/* ==========================================================================
   CoC Electrical Residence and Fence (Pty) Ltd
   Palette taken from the company crest: warning yellow, near-black line art,
   white. Yellow carries the accents; black carries the structure; white and a
   warm off-white carry the space. Poppins. Static, no dependencies.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* brand — sampled from the crest (shield border and hazard triangle) */
  --y-050: #FFFBE8;
  --y-100: #FFF3C2;
  --y-300: #FFE370;
  --y:     #FFD400;
  --y-600: #E8BF00;
  --y-700: #A98B00;

  /* the crest's line art, as a neutral scale */
  --ink-900:#0E0F11;
  --ink:    #16181B;
  --ink-700:#2C3036;
  --body:   #55595F;
  --dim:    #868C93;

  --line:   #E4E5E7;
  --line-d: rgba(255,255,255,.14);
  --mist:   #F5F4F0;
  --paper:  #FFFFFF;

  --shell:  1440px;
  --pad:    20px;
  --r:      16px;
  --r-sm:   10px;
  --r-btn:  6px;

  --sec:    clamp(62px, 6.6vw, 96px);
  --ease:   cubic-bezier(.22,.61,.36,1);
  --t:      .32s var(--ease);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--body);
  font:400 16px/1.6 'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{ margin:0; color:var(--ink-900); font-weight:700; letter-spacing:-.015em; }
p{ margin:0 0 1em; } p:last-child{ margin-bottom:0; }
ul{ margin:0; padding:0; list-style:none; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
strong{ color:var(--ink-900); font-weight:600; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
svg{ fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
::selection{ background:var(--y); color:var(--ink-900); }
:focus-visible{ outline:3px solid var(--ink-900); outline-offset:2px; border-radius:2px; }
.navbar :focus-visible,.hero :focus-visible,.facts :focus-visible,
.band :focus-visible,.ftr :focus-visible,.cta :focus-visible{ outline-color:var(--y); }
.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--y); color:var(--ink-900); padding:12px 20px; font-weight:700; }
.skip:focus{ left:0; }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad); }

/* The sideways scroll-reveal starts an element 24px outside its column, which
   at some widths reaches past the shell. `clip` contains that without creating
   a scroll container, so position:sticky inside still tracks the viewport. */
main{ overflow-x:clip; }

/* ---------- 3. Shared type ---------- */
.eyebrow{
  display:flex; align-items:center; gap:12px;
  margin:0 0 16px; font-size:12px; font-weight:700; letter-spacing:1.7px;
  text-transform:uppercase; color:rgba(255,255,255,.72);
}
.eyebrow::before{ content:''; width:26px; height:3px; border-radius:2px; background:var(--y); flex:none; }
.eyebrow--dark{ color:var(--ink-700); }
.eyebrow--c{ justify-content:center; }
.lede{ font-size:18px; line-height:1.62; }

/* ---------- 4. Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 26px; border-radius:var(--r-btn);
  font-size:15px; font-weight:700; white-space:nowrap;
  border:1px solid transparent;
  transition:background var(--t),border-color var(--t),color var(--t),box-shadow var(--t),transform var(--t);
}
/* lift uses transform so it composes with the reveal, which animates translate */
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn__c{ width:15px; height:15px; flex:none; stroke-width:2.2; transition:transform var(--t); }
.btn:hover .btn__c{ transform:translateX(3px); }

/* the crest's own pairing: black on yellow */
.btn--primary{ background:var(--y); color:var(--ink-900); box-shadow:0 10px 22px -12px rgba(232,191,0,.9); }
.btn--primary:hover{ background:var(--y-600); }
/* solid black, for light grounds */
.btn--solid{ background:var(--ink-900); color:#fff; }
.btn--solid:hover{ background:var(--ink-700); }
/* outlined for dark grounds */
.btn--ghost{ color:#fff; border-color:rgba(255,255,255,.42); }
.btn--ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.btn--ghost:hover .btn__c{ transform:none; }
/* outlined for light grounds */
.btn--line{ color:var(--ink-900); border-color:var(--line); background:var(--paper); }
.btn--line:hover{ border-color:var(--ink-900); }
.btn--lg{ padding:15px 30px; font-size:15.5px; }

.linky{ display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:var(--ink-900); border-bottom:2px solid var(--y); padding-bottom:3px; transition:color var(--t),border-color var(--t); }
.linky svg{ width:15px; height:15px; transition:transform var(--t); }
.linky:hover{ color:var(--y-700); }
.linky:hover svg{ transform:translate(3px,-3px); }

.viewall{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--ink-900); border-bottom:2px solid var(--y); padding-bottom:5px; transition:color var(--t); }
.viewall svg{ width:14px; height:14px; stroke-width:2.2; transition:transform var(--t); }
.viewall:hover{ color:var(--y-700); }
.viewall:hover svg{ transform:translateX(3px); }

/* ---------- 5. Header — white brand bar over a black nav bar ---------- */
.topbar{ background:var(--paper); border-bottom:1px solid var(--line); }
.topbar__in{ display:flex; align-items:center; justify-content:space-between; gap:26px; min-height:94px; }
.brand{ display:flex; align-items:center; gap:14px; }
.brand img{ width:auto; height:58px; }
.brand__txt{ display:flex; flex-direction:column; line-height:1.2; }
.brand__txt b{ font-size:19px; font-weight:700; color:var(--ink-900); letter-spacing:-.02em; }
.brand__txt i{ font-style:normal; font-size:11.5px; font-weight:500; letter-spacing:.05em; color:var(--body); }

.topbar__meta{ display:flex; align-items:center; gap:10px; }
.meta{ display:flex; align-items:center; gap:12px; padding:8px 14px; border-radius:var(--r-btn); transition:background var(--t); }
.meta:hover{ background:var(--mist); }
.meta__ico{
  display:grid; place-items:center; width:38px; height:38px; flex:none;
  border-radius:11px; background:var(--y-050); border:1px solid rgba(255,212,0,.4);
  color:var(--ink-900); transition:background var(--t);
}
.meta:hover .meta__ico{ background:var(--y); }
.meta__ico svg{ width:17px; height:17px; }
.meta__txt{ display:flex; flex-direction:column; line-height:1.25; }
.meta__txt i{ font-style:normal; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
.meta__txt b{ font-size:14.5px; font-weight:600; color:var(--ink-900); }
.topbar__wa{ margin-left:6px; }
.topbar__wa svg{ width:18px; height:18px; stroke-width:1.6; }

.navbar{
  position:sticky; top:0; z-index:70; background:var(--ink-900);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  transition:box-shadow var(--t);
}
.navbar.is-stuck{ box-shadow:0 14px 30px -22px rgba(14,15,17,.95); }
.navbar__in{ display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:58px; }
.navbar__list{ display:flex; align-items:center; gap:2px; }
.navbar__list li{ position:relative; }
.navbar__list a{
  position:relative; display:flex; align-items:center; white-space:nowrap;
  padding:18px 13px; font-size:14px; font-weight:600;
  color:rgba(255,255,255,.82); transition:color var(--t);
}
.navbar__list a::after{
  content:''; position:absolute; left:13px; right:13px; bottom:12px; height:3px; border-radius:2px;
  background:var(--y); transform:scaleX(0); transform-origin:left; transition:transform var(--t);
}
.navbar__list a:hover,.navbar__list li.is-current > a{ color:#fff; }
.navbar__list a:hover::after,.navbar__list li.is-current > a::after{ transform:scaleX(1); }
.navbar__cta{ display:flex; align-items:center; gap:22px; }
.navbar__note{ font-size:12.5px; color:rgba(255,255,255,.55); }

.burger{ display:none; width:46px; height:46px; padding:11px; border-radius:var(--r-btn); background:var(--mist); }
.burger span{ display:block; height:2px; background:var(--ink-900); border-radius:2px; transition:transform var(--t),opacity var(--t); }
.burger span+span{ margin-top:5px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Seven menu items plus a call to action is a wide row, so the bar sheds the
   service-area note first, then tightens, and hands over to the burger menu
   while there is still room to breathe rather than cramming. */
@media (max-width:1460px){ .navbar__note{ display:none; } }
@media (max-width:1330px){
  .navbar__list a{ padding:18px 10px; font-size:13.2px; }
  .navbar__list a::after{ left:10px; right:10px; }
  .navbar__cta{ gap:16px; }
  .navbar__cta .btn{ padding:12px 18px; font-size:13.6px; }
}
@media (max-width:1180px){
  .topbar{ position:sticky; top:0; z-index:70; }
  .topbar__in{ min-height:76px; }
  .brand img{ height:46px; }
  .brand__txt b{ font-size:16px; }
  .topbar__meta{ display:none; }
  .burger{ display:block; }
  .navbar{ display:none; }
}
@media (max-width:430px){
  .brand img{ height:40px; }
  .brand__txt b{ font-size:14.5px; }
  .brand__txt i{ font-size:10.5px; }
}

/* ---------- 6. Mobile menu ---------- */
.menu{
  position:fixed; left:0; right:0; bottom:0; top:var(--navtop,76px); z-index:69;
  background:var(--paper); overflow-y:auto;
  padding:22px var(--pad) calc(28px + env(safe-area-inset-bottom,0px));
  transform:translateY(-10px); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
}
.menu.is-open{ transform:none; opacity:1; visibility:visible; pointer-events:auto; }
@media (min-width:1181px){ .menu{ display:none; } }
.menu__label{ font-size:11px; font-weight:700; letter-spacing:.17em; text-transform:uppercase; color:var(--dim); margin:0 0 6px; }
.menu__nav li{ border-bottom:1px solid var(--line); }
.menu__nav li > a{
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  padding:17px 2px; font-size:17px; font-weight:600; color:var(--ink-900);
}
.menu__nav li > a svg{ width:16px; height:16px; color:var(--y-700); flex:none; }
.menu__cta{ margin-top:24px; }
.menu__cta .btn{ width:100%; }
.menu__contact{ margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
.menu__contact a,.menu__contact span{ display:flex; align-items:center; gap:12px; padding:10px 2px; font-size:15px; color:var(--body); word-break:break-word; }
.menu__contact svg{ width:17px; height:17px; color:var(--y-700); flex:none; }
/* The burger now runs all the way up to 1180px, so on a wide tablet the panel
   holds its rows to a readable column instead of stretching edge to edge. */
@media (min-width:760px){ .menu > *{ max-width:640px; margin-inline:auto; } }

/* ---------- 7. Hero ---------- */
.hero{ position:relative; min-height:742px; display:flex; flex-direction:column; justify-content:center; overflow:hidden; background:var(--ink-900); }
.hero__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero__slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter:saturate(1.04) contrast(1.06);
  opacity:0; transform:scale(1.07); transition:opacity 1.6s var(--ease), transform 10s linear;
}
.hero__slide.is-on{ opacity:1; transform:scale(1); }
.hero__veil{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(92deg, rgba(14,15,17,.96) 0%, rgba(14,15,17,.86) 40%, rgba(14,15,17,.48) 76%, rgba(14,15,17,.34) 100%),
    linear-gradient(180deg, rgba(14,15,17,.52) 0%, rgba(14,15,17,.12) 40%, rgba(14,15,17,.90) 100%);
}
@keyframes float{ from{ transform:translateY(0);} to{ transform:translateY(-14px);} }

.hero__in{ position:relative; z-index:2; padding-block:clamp(72px,8vw,110px); }
.hero__box{ max-width:820px; }
.hero h1{ font-size:clamp(2.3rem,4.9vw,3.6rem); line-height:1.06; color:#fff; margin-bottom:14px; }
.hero h1 em{ font-style:normal; color:var(--y); }
.hero__tag{ font-size:clamp(1rem,1.5vw,1.15rem); font-weight:600; color:var(--y); margin-bottom:18px; }
.hero .lede{ color:rgba(255,255,255,.80); max-width:640px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }

.hero__trust{ display:flex; flex-wrap:wrap; gap:14px 34px; margin-top:38px; padding-top:26px; border-top:1px solid rgba(255,255,255,.16); }
.hero__trust li{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:500; color:rgba(255,255,255,.84); }
.hero__trust svg{ width:19px; height:19px; flex:none; color:var(--y); stroke-width:2.4; }

.hero__dots{ position:absolute; z-index:2; left:0; right:0; bottom:32px; }
.hero__dots-in{ display:flex; gap:10px; }
.hero__dots button{ width:38px; height:3px; border-radius:2px; background:rgba(255,255,255,.3); transition:background var(--t); }
.hero__dots button.is-on{ background:var(--y); }

@media (max-width:1024px){ .hero{ min-height:660px; } }
@media (max-width:640px){
  .hero{ min-height:600px; }
  .hero__cta .btn{ flex:1 1 100%; }
  .hero__trust{ gap:12px 22px; }
  .hero__trust li{ font-size:13px; }
  }

/* ---------- 8. Service cards ---------- */
.scards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
@media (max-width:980px){ .scards{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; } }
.scard{
  display:flex; flex-direction:column; border-radius:var(--r); overflow:hidden;
  background:var(--paper); border:1px solid var(--line);
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}
.scard:hover{ border-color:var(--y-600); box-shadow:0 26px 48px -32px rgba(14,15,17,.45); transform:translateY(-5px); }
.scard__img{ display:block; overflow:hidden; }
.scard__img img{ width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform 1s var(--ease); }
.scard:hover .scard__img img{ transform:scale(1.06); }
.scard__b{ display:flex; flex-direction:column; flex:1; padding:0 26px 26px; }
.scard__ico{
  position:relative; margin:-28px 0 18px; display:grid; place-items:center;
  width:56px; height:56px; border-radius:16px; background:var(--y); color:var(--ink-900);
  box-shadow:0 12px 24px -14px rgba(14,15,17,.7);
}
.scard__ico svg{ width:27px; height:27px; stroke-width:1.5; }
.scard h3{ font-size:18px; line-height:1.35; margin-bottom:8px; }
.scard__sans{ margin:0 0 20px; font-size:12.5px; font-weight:600; color:var(--dim); }
.scard__go{ display:inline-flex; align-items:center; gap:8px; margin-top:auto; font-size:13.5px; font-weight:700; color:var(--ink-900); }
.scard__go svg{ width:13px; height:13px; stroke-width:2.4; color:var(--y-700); transition:transform var(--t); }
.scard:hover .scard__go svg{ transform:translateX(4px); }

/* ---------- 9. Seller's guide — photographic band + carousel ---------- */
.facts{ position:relative; overflow:hidden; background:var(--ink-900); padding-block:clamp(74px,7vw,108px); }
.facts__bg{
  position:absolute; inset:0;
  background:url('../images/facts-bg.jpg') center/cover no-repeat;
  filter:saturate(1.02) contrast(1.05);
  animation:factsPan 26s ease-in-out infinite alternate;
}
@keyframes factsPan{ from{ transform:scale(1.04);} to{ transform:scale(1.13) translate3d(-1.6%,-1.2%,0);} }
.facts__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(14,15,17,.97) 0%, rgba(14,15,17,.92) 44%, rgba(14,15,17,.80) 76%, rgba(14,15,17,.70) 100%),
    radial-gradient(84% 76% at 14% 26%, rgba(255,212,0,.16) 0%, rgba(255,212,0,0) 62%);
}
.facts__in{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.94fr);
  gap:clamp(40px,5vw,80px); align-items:center;
}
.facts__lede h2{ font-size:clamp(1.8rem,3.3vw,2.55rem); line-height:1.12; color:#fff; margin-bottom:20px; }
.facts__lede p{ margin:0; font-size:16px; line-height:1.78; color:rgba(255,255,255,.76); max-width:560px; }
.facts__acts{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }

.facts__panel{
  position:relative; border-radius:var(--r); padding:clamp(26px,3vw,38px);
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  box-shadow:0 34px 64px -40px rgba(0,0,0,.8);
}
.facts__top{ display:flex; align-items:center; gap:18px; margin-bottom:26px; }
.facts__count{ flex:none; font-size:13px; font-weight:600; letter-spacing:.08em; color:rgba(255,255,255,.45); }
.facts__count b{ font-size:23px; font-weight:700; color:var(--y); }
.facts__rail{ flex:1; height:2px; border-radius:2px; background:rgba(255,255,255,.16); overflow:hidden; }
.facts__rail i{ display:block; width:0; height:100%; background:var(--y); }
.facts__rail i.run{ transition:width 5s linear; }

.facts__view{ position:relative; min-height:250px; }
.fact{ position:absolute; inset:0; opacity:0; visibility:hidden; translate:0 12px; transition:opacity .5s var(--ease), translate .5s var(--ease), visibility .5s; }
.fact.is-on{ position:relative; opacity:1; visibility:visible; translate:0 0; }
.fact__ico{
  display:grid; place-items:center; width:54px; height:54px; border-radius:15px; margin-bottom:20px;
  color:var(--y); background:rgba(255,212,0,.13); border:1px solid rgba(255,212,0,.34);
}
.fact__ico svg{ width:26px; height:26px; stroke-width:1.5; }
.fact h3{ font-size:clamp(1.25rem,2.1vw,1.5rem); line-height:1.2; color:#fff; margin-bottom:12px; }
.fact p{ margin:0; font-size:15px; line-height:1.78; color:rgba(255,255,255,.74); }

.facts__ctrl{ display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:28px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); }
.facts__dots{ display:flex; gap:9px; }
.facts__dots button{ width:8px; height:8px; border-radius:50%; background:#fff; opacity:.25; transition:opacity var(--t),background var(--t),transform var(--t); }
.facts__dots button.is-on{ opacity:1; background:var(--y); transform:scale(1.35); }
.facts__navs{ display:flex; gap:10px; }
.facts__nav{ width:42px; height:42px; display:grid; place-items:center; border-radius:50%; color:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.2); transition:color var(--t),background var(--t),border-color var(--t),transform var(--t); }
.facts__nav svg{ width:19px; height:19px; stroke-width:2; }
.facts__nav:hover{ color:var(--ink-900); background:var(--y); border-color:var(--y); transform:translateY(-2px); }

@media (max-width:1024px){ .facts__in{ grid-template-columns:1fr; gap:40px; } }
@media (max-width:560px){ .facts__view{ min-height:300px; } .facts__acts .btn{ flex:1 1 100%; } }

/* ---------- 10. Card grid (before the inspection) ---------- */
.costs{ background:var(--mist); padding-block:var(--sec); }
.costs__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:42px; }
.costs__head h2{ font-size:clamp(1.8rem,3.2vw,2.4rem); line-height:1.12; }
.costs__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.card{ background:var(--paper); border-radius:var(--r-sm); overflow:hidden; display:flex; flex-direction:column; transition:transform var(--t),box-shadow var(--t); }
.card:hover{ transform:translateY(-5px); box-shadow:0 26px 46px -30px rgba(14,15,17,.45); }
.card figure{ margin:0; overflow:hidden; position:relative; }
.card figure::after{ content:''; position:absolute; inset:auto 0 0 0; height:4px; background:var(--y); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.card:hover figure::after{ transform:scaleX(1); }
.card figure img{ width:100%; aspect-ratio:43/30; object-fit:cover; transition:transform .8s var(--ease); }
.card:hover figure img{ transform:scale(1.05); }
.card__b{ padding:26px 26px 28px; display:flex; flex-direction:column; flex:1; }
.card__b h3{ font-size:18px; line-height:1.3; margin-bottom:10px; }
.card__b p{ font-size:14px; line-height:1.68; margin:0 0 18px; }
.card__m{ margin-top:auto; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--y-700); }
@media (max-width:1000px){ .costs__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){ .costs__grid{ grid-template-columns:1fr; } }

/* ---------- 11. CTA band ---------- */
.cta{ background:var(--y); }
.cta__in{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:26px; padding-block:46px; }
.cta__in h2{ font-size:clamp(1.4rem,2.4vw,1.85rem); color:var(--ink-900); margin-bottom:8px; }
.cta__in p{ margin:0; font-size:14.5px; color:rgba(14,15,17,.72); }
.cta__acts{ display:flex; flex-wrap:wrap; gap:12px; }
.cta .btn--primary{ background:var(--ink-900); color:#fff; box-shadow:none; }
.cta .btn--primary:hover{ background:var(--ink-700); }
.cta .btn--ghost{ color:var(--ink-900); border-color:rgba(14,15,17,.35); }
.cta .btn--ghost:hover{ background:rgba(14,15,17,.08); border-color:var(--ink-900); }
@media (max-width:560px){ .cta__acts .btn{ flex:1 1 100%; } }

/* ---------- 12. Footer ---------- */
.ftr{ background:var(--ink-900); color:rgba(255,255,255,.64); font-size:15px; }
.ftr__grid{ display:grid; grid-template-columns:1.5fr 1fr .8fr 1.25fr; gap:clamp(30px,3.4vw,54px); padding-block:clamp(52px,6vw,76px); }
.ftr__logo{ display:inline-grid; place-items:center; background:#fff; border-radius:14px; padding:12px 16px; margin-bottom:20px; }
.ftr__logo img{ width:128px; height:auto; }
.ftr__name{ font-size:15px; font-weight:700; color:#fff; margin-bottom:10px; line-height:1.4; }
.ftr__brand p{ font-size:14px; line-height:1.78; max-width:380px; }
.ftr__reg{ font-size:12.5px; color:rgba(255,255,255,.4); margin-top:16px; }
.ftr__col h3{ font-size:12px; font-weight:700; letter-spacing:.17em; text-transform:uppercase; color:var(--y); margin-bottom:22px; }
.ftr__links li+li{ margin-top:13px; }
.ftr__links a,.ftr__links span{ display:flex; align-items:flex-start; gap:11px; font-size:14px; line-height:1.55; transition:color var(--t); word-break:break-word; }
.ftr__links svg{ width:15px; height:15px; color:var(--y); flex:none; margin-top:3px; }
.ftr__links a:hover{ color:var(--y); }
.ftr__std li{ display:flex; gap:11px; font-size:13.5px; line-height:1.62; }
.ftr__std li+li{ margin-top:13px; }
.ftr__std svg{ width:17px; height:17px; color:var(--y); flex:none; margin-top:1px; }

.ftr__bar{ position:relative; border-top:1px solid var(--line-d); }
/* right padding reserves the back-to-top button's column plus a gap */
.ftr__bar-in{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-block:22px; padding-inline:0 196px; font-size:13px; color:rgba(255,255,255,.45); }
.ftr__bar p{ margin:0; }
.ftr__social span{ font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--y); }

.totop{ position:absolute; right:calc(50% - var(--shell)/2 + var(--pad) + 76px); bottom:0; width:56px; height:56px; display:grid; place-items:center; background:var(--y); color:var(--ink-900); transition:background var(--t); }
.totop svg{ width:20px; height:20px; stroke-width:2.4; }
.totop:hover{ background:var(--y-600); }
@media (max-width:1480px){ .totop{ right:calc(var(--pad) + 76px); } }
@media (max-width:1100px){ .ftr__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:760px){
  .totop{ position:static; width:100%; height:48px; margin-top:4px; }
  .ftr__bar-in{ padding-inline:0; justify-content:center; text-align:center; }
  .ftr__bar{ padding-bottom:86px; }
}
@media (max-width:620px){ .ftr__grid{ grid-template-columns:1fr; } }

/* ---------- 13. Scroll reveal ----------
   Uses the standalone `translate` property, not `transform`, so elements that
   also animate `transform` on hover are not overridden. */
[data-a]{ opacity:0; translate:0 18px; transition:opacity .62s var(--ease), translate .62s var(--ease); }
[data-a].in{ opacity:1; translate:0 0; }
[data-a="l"]{ translate:-24px 0; }
[data-a="r"]{ translate:24px 0; }
/* once the layout stacks, a sideways reveal has nothing to slide across and the
   pre-reveal offset would widen the page, so fall back to the vertical one */
@media (max-width:980px){
  [data-a="l"],[data-a="r"]{ translate:0 18px; }
}
[data-d="1"]{ transition-delay:.08s; }
[data-d="2"]{ transition-delay:.16s; }
[data-d="3"]{ transition-delay:.24s; }
[data-d="4"]{ transition-delay:.32s; }

[data-img]{ overflow:hidden; }
[data-img] > img{ transform:scale(1.08); opacity:0; transition:transform 1.05s var(--ease), opacity .7s var(--ease); }
[data-img].in > img{ transform:scale(1); opacity:1; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-a]{ opacity:1; translate:0 0; }
  [data-img] > img{ transform:none; opacity:1; }
  .hero__slide{ transform:none; }
  .facts__bg{ animation:none; }
  .facts__rail i.run{ transition:none; }
}

/* ==========================================================================
   14. Floating contact buttons — WhatsApp left, Call right
   ========================================================================== */
.fab{
  position:fixed; bottom:22px; z-index:90;
  width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center; color:#fff;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.45);
  transition:transform var(--t), box-shadow var(--t), background var(--t);
}
.fab svg{ width:30px; height:30px; }
.fab:hover{ transform:translateY(-3px) scale(1.04); box-shadow:0 16px 32px -10px rgba(0,0,0,.5); }
.fab:active{ transform:scale(.96); }
.fab--wa{ left:18px; background:#25D366; }      /* WhatsApp brand green */
.fab--wa:hover{ background:#1FBA57; }
.fab--call{ right:18px; background:var(--ink-900); color:var(--y); }
.fab--call:hover{ background:var(--ink-700); }
.fab--call svg{ width:26px; height:26px; stroke-width:1.9; }
.fab__label{
  position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%);
  background:var(--ink-900); color:#fff; font-size:11.5px; font-weight:600;
  padding:5px 10px; border-radius:4px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity var(--t);
}
.fab:hover .fab__label{ opacity:1; }
/* anchored to each button's own screen edge, so a tooltip can never stick out
   past the viewport and widen the page */
.fab--wa .fab__label{ left:0; transform:none; }
.fab--call .fab__label{ left:auto; right:0; transform:none; }
.fab--wa::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 0 rgba(37,211,102,.55); animation:fabPulse 3.2s ease-out infinite;
}
@keyframes fabPulse{ 0%{ box-shadow:0 0 0 0 rgba(37,211,102,.5);} 70%{ box-shadow:0 0 0 16px rgba(37,211,102,0);} 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0);} }
@media (max-width:560px){
  .fab{ width:54px; height:54px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); }
  .fab--wa{ left:14px; } .fab--call{ right:14px; }
  .fab svg{ width:27px; height:27px; }
  .fab__label{ display:none; }   /* hover tooltips are a pointer affordance */
}

/* ==========================================================================
   15. Inner pages
   ========================================================================== */
.phero{ position:relative; background:var(--ink-900); overflow:hidden; }
.phero__bg{ position:absolute; inset:0; background-size:cover; background-position:center; filter:saturate(1.02) contrast(1.05); }
.phero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(92deg, rgba(14,15,17,.95) 0%, rgba(14,15,17,.86) 46%, rgba(14,15,17,.60) 100%),
    linear-gradient(180deg, rgba(14,15,17,.38) 0%, rgba(14,15,17,.22) 50%, rgba(14,15,17,.78) 100%);
}
.phero__in{ position:relative; z-index:2; padding-block:clamp(54px,6vw,84px); }
.phero h1{ font-size:clamp(1.9rem,3.5vw,2.75rem); line-height:1.12; color:#fff; margin-bottom:14px; max-width:900px; }
.phero p{ margin:0; font-size:16.5px; line-height:1.66; color:rgba(255,255,255,.82); max-width:700px; }
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:18px; font-size:13px; color:rgba(255,255,255,.6); }
.crumbs a{ color:rgba(255,255,255,.84); transition:color var(--t); }
.crumbs a:hover{ color:var(--y); }
.crumbs svg{ width:12px; height:12px; stroke-width:2.4; opacity:.6; }

.sec{ padding-block:var(--sec); }
.sec--mist{ background:var(--mist); }
.sec--row{ padding-block:clamp(52px,5.4vw,80px); }
.sec--intro{ padding-block:clamp(56px,6vw,84px) 0; }

.shead{ max-width:760px; margin-bottom:clamp(34px,4vw,50px); }
.shead--c{ margin-inline:auto; text-align:center; }
.shead--c .eyebrow{ justify-content:center; }
.shead h2{ font-size:clamp(1.65rem,3vw,2.25rem); line-height:1.16; }
.shead p{ margin-top:14px; font-size:16px; line-height:1.72; }

.note{ margin-top:26px; padding:18px 22px; border-left:4px solid var(--y); background:var(--paper); border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:14.5px; line-height:1.7; }
.note--c{ max-width:860px; margin-inline:auto; text-align:center; border-left:0; border-top:4px solid var(--y); border-radius:0 0 var(--r-sm) var(--r-sm); }
.sec--mist .note{ background:var(--paper); }

/* aside panel */
.aside{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:28px; position:sticky; top:96px; }
.aside h3{ font-size:17px; margin-bottom:14px; }
.aside p{ font-size:14px; line-height:1.7; margin-bottom:18px; }
.aside .btn{ width:100%; }
.aside__list li{ display:flex; gap:10px; font-size:14px; line-height:1.6; padding:10px 0; border-bottom:1px solid var(--line); word-break:break-word; }
.aside__list li:last-child{ border-bottom:0; }
.aside__list svg{ width:17px; height:17px; color:var(--y-700); flex:none; margin-top:3px; stroke-width:2; }
@media (max-width:980px){ .aside{ position:static; } }

/* two-up: copy beside an image composition */
.duo{ display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); gap:clamp(40px,5vw,80px); align-items:center; }
.duo--flip .duo__c{ order:2; }
.duo--flip .collage{ order:1; }
.duo__c h2{ font-size:clamp(1.6rem,2.8vw,2.2rem); line-height:1.16; margin-bottom:20px; }
.duo__c p{ font-size:15.5px; line-height:1.8; }
.duo__acts{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; margin-top:30px; }
@media (max-width:980px){
  .duo{ grid-template-columns:1fr; gap:44px; }
  .duo--flip .duo__c,.duo--flip .collage{ order:0; }
}
@media (max-width:520px){ .duo__acts .btn{ width:100%; } }

/* overlapping image pair */
.collage{ position:relative; padding-bottom:54px; }
.collage__a{ position:relative; z-index:1; margin:0; border-radius:var(--r); overflow:hidden; box-shadow:0 26px 52px -36px rgba(14,15,17,.55); }
.collage__a img{ width:100%; aspect-ratio:4/3; max-height:470px; object-fit:cover; }
.collage--tall .collage__a img{ aspect-ratio:3/4; max-height:560px; }
.collage__b{
  position:absolute; z-index:2; right:0; bottom:0; width:48%; margin:0;
  border-radius:var(--r); overflow:hidden; border:7px solid var(--paper);
  box-shadow:0 26px 50px -30px rgba(14,15,17,.6);
}
.sec--mist .collage__b{ border-color:var(--mist); }
.collage__b img{ width:100%; aspect-ratio:3/4; max-height:310px; object-fit:cover; }
.collage--tall .collage__b img{ aspect-ratio:4/3; max-height:260px; }
.collage__dots{
  position:absolute; z-index:0; left:-20px; top:-20px; width:108px; height:108px; opacity:.85;
  background-image:radial-gradient(var(--y) 1.7px, transparent 1.8px); background-size:13px 13px;
}
@media (max-width:520px){
  .collage{ padding-bottom:0; }
  .collage__b{ position:static; width:100%; margin-top:14px; border:0; box-shadow:none; }
  .collage__dots{ display:none; }
}

/* full-bleed photographic band */
.band{ position:relative; overflow:hidden; background:var(--ink-900); padding-block:clamp(60px,6.5vw,92px); }
.band--short{ padding-block:clamp(48px,5vw,68px); }
.band__bg{ position:absolute; inset:0; }
.band__bg img{ width:100%; height:100%; object-fit:cover; }
.band__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(14,15,17,.94) 0%, rgba(14,15,17,.90) 100%),
    radial-gradient(70% 90% at 82% 18%, rgba(255,212,0,.16) 0%, rgba(255,212,0,0) 62%);
}
.band__in{ position:relative; z-index:1; }
.band__in--split{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:28px; }
.band__in--split h2{ font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.16; color:#fff; margin-bottom:10px; }
.band__in--split p{ margin:0; max-width:560px; font-size:15px; line-height:1.72; color:rgba(255,255,255,.74); }
.band__acts{ display:flex; flex-wrap:wrap; gap:12px; }
.band__head{ max-width:720px; margin-bottom:clamp(32px,3.6vw,46px); }
.band__head h2{ font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.18; color:#fff; }
.band__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.band__grid article{
  padding:32px 28px; border-radius:var(--r);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13);
  transition:background var(--t), border-color var(--t), transform var(--t);
}
.band__grid article:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,212,0,.55); transform:translateY(-4px); }
.band__grid span{ display:grid; place-items:center; width:56px; height:56px; border-radius:16px; margin-bottom:20px; color:var(--y); background:rgba(255,212,0,.13); border:1px solid rgba(255,212,0,.34); }
.band__grid svg{ width:27px; height:27px; stroke-width:1.5; }
.band__grid h3{ font-size:17.5px; color:#fff; margin-bottom:10px; }
.band__grid p{ margin:0; font-size:14.5px; line-height:1.72; color:rgba(255,255,255,.72); }
@media (max-width:900px){ .band__grid{ grid-template-columns:1fr; } }
@media (max-width:560px){ .band__acts .btn{ flex:1 1 100%; } }

/* alternating image + copy rows */
.srow{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(36px,4.6vw,72px); align-items:center; scroll-margin-top:120px; }
.srow--flip .srow__fig{ order:2; }
.srow--flip .srow__c{ order:1; }
.srow__fig{ position:relative; margin:0; border-radius:var(--r); overflow:hidden; box-shadow:0 26px 52px -36px rgba(14,15,17,.55); }
.srow__fig img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform 1s var(--ease); }
.srow:hover .srow__fig img{ transform:scale(1.04); }
.srow__top{ display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.srow__ico{ display:grid; place-items:center; flex:none; width:60px; height:60px; border-radius:17px; color:var(--ink-900); background:var(--y-050); border:1px solid rgba(255,212,0,.45); transition:background var(--t); }
.srow:hover .srow__ico{ background:var(--y); }
.srow__ico svg{ width:29px; height:29px; stroke-width:1.5; }
.srow__n{ font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--y-700); }
.srow__c h2{ font-size:clamp(1.45rem,2.5vw,2rem); line-height:1.18; margin-bottom:14px; }
.srow__sans{ display:inline-flex; align-items:center; gap:8px; margin:0 0 18px; padding:6px 13px; border-radius:999px; background:var(--y-050); border:1px solid rgba(255,212,0,.5); font-size:12.5px; font-weight:600; color:var(--ink-900); }
.srow__sans svg{ width:13px; height:13px; stroke-width:3; color:var(--y-700); flex:none; }
.srow__c > p{ font-size:15.5px; line-height:1.8; }
.srow__acts{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; margin-top:30px; }
@media (max-width:900px){
  .srow{ grid-template-columns:1fr; gap:34px; }
  .srow--flip .srow__fig,.srow--flip .srow__c{ order:0; }
}
@media (max-width:520px){ .srow__acts .btn{ width:100%; } }

/* numbered process steps */
.steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin:0; padding:0; list-style:none; }
.steps li{ position:relative; padding:30px 24px 28px; border-radius:var(--r); background:var(--paper); border:1px solid var(--line); transition:border-color var(--t),box-shadow var(--t),transform var(--t); }
.steps li:hover{ border-color:var(--y-600); box-shadow:0 22px 44px -32px rgba(14,15,17,.45); transform:translateY(-4px); }
.steps__ico{ display:grid; place-items:center; width:52px; height:52px; border-radius:15px; margin-bottom:18px; color:var(--ink-900); background:var(--y-050); border:1px solid rgba(255,212,0,.45); transition:background var(--t); }
.steps li:hover .steps__ico{ background:var(--y); }
.steps__ico svg{ width:25px; height:25px; stroke-width:1.5; }
.steps li b{ position:absolute; right:22px; top:26px; font-size:13px; font-weight:700; letter-spacing:.12em; color:var(--dim); }
.steps h3{ font-size:16.5px; line-height:1.3; margin-bottom:8px; }
.steps p{ margin:0; font-size:14px; line-height:1.68; }
@media (max-width:1000px){ .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .steps{ grid-template-columns:1fr; } }

/* tick lists */
.ticks{ display:grid; gap:12px; margin-top:26px; }
.ticks li{ display:flex; align-items:flex-start; gap:12px; font-size:15px; font-weight:500; line-height:1.6; color:var(--ink-900); }
.ticks svg{ width:20px; height:20px; flex:none; margin-top:1px; color:var(--y-700); stroke-width:1.8; }

/* checklist cards */
.checks{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:0; padding:0; list-style:none; }
.checks li{
  position:relative; padding:28px 26px 26px 92px; border-radius:var(--r);
  background:var(--paper); border:1px solid var(--line);
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}
.checks li:hover{ border-color:var(--y-600); box-shadow:0 22px 44px -32px rgba(14,15,17,.42); transform:translateY(-4px); }
.checks li:last-child{ grid-column:1 / -1; }
.checks__ico{ position:absolute; left:26px; top:28px; display:grid; place-items:center; width:48px; height:48px; border-radius:14px; color:var(--ink-900); background:var(--y-050); border:1px solid rgba(255,212,0,.45); transition:background var(--t); }
.checks li:hover .checks__ico{ background:var(--y); }
.checks__ico svg{ width:23px; height:23px; stroke-width:1.5; }
.checks__n{ position:absolute; right:24px; top:24px; font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--dim); }
.checks h3{ font-size:17px; line-height:1.34; margin-bottom:8px; padding-right:34px; }
.checks p{ margin:0; font-size:14.5px; line-height:1.7; }
@media (max-width:820px){ .checks{ grid-template-columns:1fr; } .checks li:last-child{ grid-column:auto; } }

/* good to know grid */
.gtk{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.gtk article{ position:relative; padding:28px 26px; border-radius:var(--r); background:var(--paper); border:1px solid var(--line); border-top:4px solid var(--y); transition:box-shadow var(--t),transform var(--t); }
.gtk article:hover{ box-shadow:0 22px 44px -32px rgba(14,15,17,.42); transform:translateY(-4px); }
.gtk__n{ display:block; font-size:12px; font-weight:700; letter-spacing:.16em; color:var(--y-700); margin-bottom:10px; }
.gtk h3{ font-size:17px; line-height:1.34; margin-bottom:9px; }
.gtk p{ margin:0; font-size:14.5px; line-height:1.7; }
@media (max-width:1000px){ .gtk{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){ .gtk{ grid-template-columns:1fr; } }

/* help / next-step box */
.helpbox{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:26px; align-items:center;
  margin-top:38px; padding:clamp(26px,3vw,36px); border-radius:var(--r);
  background:var(--ink-900); color:rgba(255,255,255,.76);
}
.helpbox__ico{ display:grid; place-items:center; width:58px; height:58px; border-radius:16px; color:var(--y); background:rgba(255,212,0,.13); border:1px solid rgba(255,212,0,.34); }
.helpbox__ico svg{ width:27px; height:27px; stroke-width:1.5; }
.helpbox h3{ color:#fff; font-size:19px; margin-bottom:8px; }
.helpbox p{ margin:0; font-size:14.5px; line-height:1.7; }
.helpbox__acts{ display:flex; flex-wrap:wrap; gap:10px; }
.helpbox .btn--solid{ background:var(--y); color:var(--ink-900); }
.helpbox .btn--solid:hover{ background:var(--y-600); }
.helpbox .btn--line{ background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.helpbox .btn--line:hover{ border-color:#fff; background:rgba(255,255,255,.1); }
@media (max-width:980px){ .helpbox{ grid-template-columns:1fr; } }
@media (max-width:520px){ .helpbox__acts .btn{ flex:1 1 100%; } }

/* FAQ accordion */
.faqwrap{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:clamp(30px,4vw,54px); align-items:start; }
@media (max-width:980px){ .faqwrap{ grid-template-columns:1fr; } }
.faq{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:border-color var(--t),box-shadow var(--t); }
.faq + .faq{ margin-top:14px; }
.faq[open]{ border-color:var(--y-600); box-shadow:0 22px 44px -34px rgba(14,15,17,.42); }
.faq summary{ display:flex; align-items:center; gap:16px; padding:22px 24px; cursor:pointer; list-style:none; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::marker{ content:''; }
.faq__n{ flex:none; font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--dim); }
.faq__q{ flex:1; font-size:16.5px; font-weight:600; line-height:1.4; color:var(--ink-900); }
.faq__ico{ flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--y-050); border:1px solid rgba(255,212,0,.45); color:var(--ink-900); transition:transform var(--t),background var(--t); }
.faq__ico svg{ width:16px; height:16px; stroke-width:2.4; }
.faq[open] .faq__ico{ transform:rotate(45deg); background:var(--y); }
.faq__a{ padding:0 24px 26px; }
.faq__a p{ font-size:15px; line-height:1.78; }
.faq__a ul{ display:grid; gap:9px; margin:14px 0 0; }
.faq__a li{ position:relative; padding-left:26px; font-size:15px; line-height:1.7; }
.faq__a li::before{ content:''; position:absolute; left:3px; top:9px; width:9px; height:9px; border-radius:50%; background:var(--y); border:1px solid var(--y-600); }

/* seller's guide reading view */
.viewer__bar{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:26px; margin-bottom:clamp(26px,3vw,36px); }
.viewer__intro h1{ font-size:clamp(1.6rem,2.8vw,2.2rem); line-height:1.16; margin-bottom:10px; }
.viewer__intro p:last-child{ margin:0; font-size:15.5px; line-height:1.7; }
.viewer__acts{ display:flex; flex-wrap:wrap; gap:12px; }
.viewer__doc{
  max-width:880px; margin-inline:auto; border-radius:var(--r); overflow:hidden;
  background:var(--paper); border:1px solid var(--line);
  box-shadow:0 28px 58px -42px rgba(14,15,17,.55);
}
/* A4 aspect, so the embedded PDF and the fallback image occupy the same box */
.viewer__doc object{ display:block; width:100%; aspect-ratio:1 / 1.414; border:0; background:var(--paper); }
.viewer__doc object > img{ display:block; width:100%; height:100%; object-fit:contain; }
.viewer__foot{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; max-width:880px; margin:26px auto 0; }
.viewer__foot p{ margin:0; font-size:14.5px; }
@media (max-width:620px){
  .viewer__acts .btn,.viewer__foot .btn{ flex:1 1 100%; }
  .viewer__foot{ justify-content:stretch; }
}

/* contact cards */
.cc{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
@media (max-width:880px){ .cc{ grid-template-columns:1fr; } }
.cc__card{ display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:32px 28px; transition:border-color var(--t),box-shadow var(--t),transform var(--t); }
.cc__card:hover{ border-color:var(--y-600); box-shadow:0 22px 44px -32px rgba(14,15,17,.42); transform:translateY(-4px); }
.cc__ico{ display:grid; place-items:center; width:56px; height:56px; border-radius:16px; margin-bottom:18px; color:var(--ink-900); background:var(--y-050); border:1px solid rgba(255,212,0,.45); transition:background var(--t); }
.cc__card:hover .cc__ico{ background:var(--y); }
.cc__ico svg{ width:25px; height:25px; }
.cc__card h3{ font-size:16px; margin-bottom:4px; }
.cc__card p{ font-size:13.5px; margin-bottom:12px; }
.cc__card a{ margin-top:auto; font-size:17px; font-weight:700; color:var(--ink-900); transition:color var(--t); word-break:break-word; }
.cc__card a:hover{ color:var(--y-700); }
.cc__mail{ font-size:14.5px !important; }

/* enquiry form */
.solo{ max-width:920px; margin-inline:auto; }
.form{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:clamp(26px,3vw,40px); }
.form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:680px){ .form__grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:7px; }
.field--full{ grid-column:1 / -1; }
.field label{ font-size:13px; font-weight:600; color:var(--ink-900); }
.field input,.field select,.field textarea{
  font:inherit; font-size:15px; color:var(--ink-900); background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r-btn); padding:13px 15px; width:100%;
  transition:border-color var(--t), box-shadow var(--t);
}
.field textarea{ min-height:132px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--y-600); box-shadow:0 0 0 3px rgba(255,212,0,.35);
}
.field input::placeholder,.field textarea::placeholder{ color:#A4AAB0; }
.form__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:22px; }
.form__foot .btn{ min-width:190px; }
.form__note{ font-size:13px; color:var(--body); margin:0; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }