/* Windora Pty Ltd — site stylesheet */

:root{
  --bg:#FFFFFF;
  --bg-alt:#F5F6F7;
  --bg-line:#ECEEEF;
  --ink:#1C1F23;
  --ink-2:#30343A;
  --ink-3:#5B6168;
  --accent:#1C1F23;
  --accent-dark:#000000;
  --line:#E1E4E6;
  --dark:#1C1F23;
  --dark-2:#1C1F23;

  --wrap:1280px;
  --gut:clamp(20px,5vw,64px);
  --sec:clamp(64px,8vw,120px);

  --f-sans:"Archivo","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --f-display:"Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
section[id]{scroll-margin-top:96px}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink-2);
  font-family:var(--f-sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}

h1,h2,h3,h4,h5{
  color:var(--ink);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.02em;
  margin:0 0 .5em;
}
/* Display type: editorial serif for the two largest levels, grotesk below. */
h1,h2{
  font-family:var(--f-display);
  font-weight:400;
  font-optical-sizing:auto;
  letter-spacing:-.018em;
  line-height:1.02;
}
h1{font-size:clamp(2.6rem,5.6vw,4.6rem)}
h2{font-size:clamp(2rem,3.7vw,3.15rem)}
h3{font-size:clamp(1.12rem,1.55vw,1.32rem);letter-spacing:-.012em;font-weight:600}
h4{font-size:1.02rem;letter-spacing:0}
em.accent{font-style:italic;color:var(--accent)}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--ink-3);line-height:1.6;max-width:60ch}
.muted{color:var(--ink-3)}
.small{font-size:.86rem;line-height:1.55}
.eyebrow{
  display:block;font-size:.92rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin:0 0 1rem;
}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--sec)}
.section--tight{padding-block:clamp(44px,6vw,80px)}
.section--alt{background:var(--bg-alt)}
.section--dark{background:var(--dark);color:#C6CBD1}
.section--dark h1,.section--dark h2,.section--dark h3{color:#fff}
.section--dark .lead{color:#B4BAC1}
.section--line{border-top:1px solid var(--line)}
.sec-head{max-width:66ch;margin-bottom:clamp(32px,4vw,56px)}
.sec-head--row{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;justify-content:space-between;max-width:none}
.grid{display:grid;gap:1px;background:var(--line)}
.stack>*+*{margin-top:1.1em}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:.95em 1.7em;border:1px solid transparent;border-radius:2px;
  font-size:.92rem;font-weight:600;letter-spacing:.01em;text-decoration:none;
  cursor:pointer;background:none;
  transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.btn--primary{background:var(--accent);color:#fff}
.btn--primary:hover{background:var(--accent-dark)}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:var(--ink-2)}
.btn--ghost{border-color:var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{background:var(--bg-line)}
.btn--outline-light{border-color:rgba(255,255,255,.35);color:#fff}
.btn--outline-light:hover{background:#fff;color:var(--ink)}
.btn--sm{padding:.7em 1.2em;font-size:.85rem}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:2rem}

.link-arrow{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:.88rem;font-weight:600;color:var(--accent);text-decoration:none;
}
.link-arrow::after{content:"→";transition:transform .25s var(--ease)}
.link-arrow:hover::after{transform:translateX(4px)}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--ease);
}
.hdr__bar{
  display:flex;align-items:center;gap:24px;
  height:84px;transition:height .3s var(--ease);
}
.hdr.is-stuck .hdr__bar{height:66px}
.hdr.is-stuck{box-shadow:0 1px 14px rgba(23,25,28,.07)}

.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;line-height:1;margin-right:auto}
.brand__logo{height:46px;width:auto;flex:none}
.brand__text{display:flex;flex-direction:column}
.brand__mark{font-size:1.32rem;font-weight:700;letter-spacing:.14em;color:var(--ink)}
.brand__sub{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);margin-top:5px}

.nav{display:flex;align-items:center;gap:4px}
.nav__link{
  display:block;padding:10px 14px;text-decoration:none;
  font-size:.92rem;font-weight:500;color:var(--ink-2);border-radius:2px;
  transition:color .2s var(--ease),background-color .2s var(--ease);
}
.nav__link:hover,.nav__link[aria-current="page"]{color:var(--ink);background:var(--bg-alt)}
.nav__link[aria-current="page"]{font-weight:600}
.nav__item{position:relative}
.nav__toggle{border:0;display:inline-flex;align-items:center;gap:.4em;cursor:pointer}
/* translate must precede rotate — after a rotate it shifts along the rotated
   axis, which drags the chevron diagonally over the label. */
.nav__toggle::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s var(--ease)}
.nav__item.is-open .nav__toggle::after{transform:translateY(1px) rotate(225deg)}

.mega{
  position:absolute;top:calc(100% + 1px);left:50%;transform:translate(-50%,8px);
  width:min(760px,90vw);background:#fff;border:1px solid var(--line);
  box-shadow:0 20px 50px rgba(23,25,28,.10);
  padding:32px;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
}
.mega--2{grid-template-columns:repeat(2,1fr);width:min(520px,90vw)}
.nav__item.is-open .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.mega__title{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px;font-weight:600}
.mega ul{list-style:none;margin:0;padding:0}
.mega li+li{margin-top:2px}
.mega a{display:block;padding:7px 10px;margin-left:-10px;text-decoration:none;font-size:.92rem;color:var(--ink-2);border-radius:2px;transition:background-color .2s,color .2s}
.mega a:hover{background:var(--bg-alt);color:var(--accent)}

.hdr__cta{display:inline-flex}
.burger{
  display:none;width:44px;height:44px;border:1px solid var(--line);background:none;
  border-radius:2px;cursor:pointer;align-items:center;justify-content:center;
}
.burger span,.burger span::before,.burger span::after{
  content:"";display:block;width:18px;height:1.5px;background:var(--ink);transition:transform .25s var(--ease),opacity .2s
}
.burger span::before{transform:translateY(-6px)}
.burger span::after{transform:translateY(4.5px)}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:rotate(-45deg) translateY(-1.5px)}

/* mobile drawer */
.drawer{
  position:fixed;inset:0 0 0 auto;width:min(420px,100%);
  background:#fff;border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .3s var(--ease);
  z-index:70;overflow-y:auto;padding:24px var(--gut) 48px;display:none;
}
.drawer.is-open{transform:none}
.drawer__head{display:flex;justify-content:flex-end;margin-bottom:8px}
.drawer__close{width:44px;height:44px;border:1px solid var(--line);background:none;font-size:1.3rem;line-height:1;cursor:pointer;border-radius:2px}
.drawer a{display:block;padding:13px 0;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--bg-line);font-size:1.02rem}
.drawer .mega__title{margin:26px 0 6px}
.drawer .drawer__sub a{padding-left:14px;color:var(--ink-3);font-size:.95rem}
.drawer .btn{width:100%;margin-top:26px}
.scrim{position:fixed;inset:0;background:rgba(23,25,28,.4);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:65}
.scrim.is-open{opacity:1;visibility:visible}

/* skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:12px 18px}
.skip:focus{left:8px;top:8px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(520px,78vh,780px);display:flex;align-items:flex-end;overflow:hidden;background:var(--dark)}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:heroZoom 1.6s var(--ease) forwards}
.hero::after{
  content:"";position:absolute;inset:0;
  
}
.hero__inner{position:relative;z-index:2;width:100%;padding-block:clamp(48px,7vw,84px)}
.hero h1{color:#fff;max-width:17ch}
.hero__text{color:#D3D7DC;font-size:clamp(1.02rem,1.5vw,1.2rem);max-width:56ch;margin-top:1.2rem}
.hero__note{margin-top:2rem;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:#9EA5AD}
@keyframes heroZoom{to{transform:scale(1)}}

.pagehero{padding-block:clamp(56px,8vw,110px) clamp(40px,5vw,64px);border-bottom:1px solid var(--line)}
.pagehero--media{position:relative;background:var(--dark);border:0;overflow:hidden;min-height:clamp(360px,46vh,520px);display:flex;align-items:flex-end}
.pagehero--media .pagehero__bg{position:absolute;inset:0}
.pagehero--media .pagehero__bg img{width:100%;height:100%;object-fit:cover}
.pagehero--media::after{content:"";position:absolute;inset:0;}
.pagehero--media .wrap{position:relative;z-index:2;padding-block:clamp(40px,5vw,64px)}
.pagehero--media h1{color:#fff}
.pagehero--media .lead{color:#C9CED4}

/* breadcrumb */
.crumb{font-size:.8rem;color:var(--ink-3);margin-bottom:1.2rem}
.crumb a{text-decoration:none;color:inherit}
.crumb a:hover{color:var(--accent);text-decoration:underline}
.crumb span{margin:0 .5em;opacity:.5}
.pagehero--media .crumb{color:#B6BCC3}

/* ---------- value strip ---------- */
.strip{border-bottom:1px solid var(--line)}
.strip__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.strip__item{background:#fff;padding:clamp(28px,3vw,40px) clamp(20px,2.4vw,32px)}
.strip__item h2{font-family:var(--f-sans);font-weight:600;letter-spacing:-.012em;line-height:1.1;font-size:1rem;margin-bottom:.4em}
.strip__item p{font-size:.9rem;color:var(--ink-3);line-height:1.55}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.split--wide{grid-template-columns:1.05fr .95fr}
.split__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg-alt)}
.split__media img{width:100%;height:100%;object-fit:cover}
.split--flip .split__media{order:2}
/* diagrams and small product photos: show the whole image at its own ratio */
.split__media--natural{aspect-ratio:auto;background:none}
.split__media--natural img{height:auto}

/* ---------- category / product cards ---------- */
.cards{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
.cards--2{grid-template-columns:repeat(2,1fr)}
.cards--3{grid-template-columns:repeat(3,1fr)}
.cards--4{grid-template-columns:repeat(4,1fr)}

.pcard{background:#fff;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:background-color .3s var(--ease)}
.pcard__media{aspect-ratio:4/3;overflow:hidden;background:var(--bg-alt)}
.pcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.pcard:hover .pcard__media img{transform:scale(1.04)}
.pcard__body{padding:clamp(22px,2.4vw,32px);flex:1;display:flex;flex-direction:column}
.pcard__body p{font-size:.92rem;color:var(--ink-3);margin-bottom:1.4em}
.pcard__body .link-arrow{margin-top:auto}
.pcard:hover{background:var(--bg-alt)}
.pcard__list{list-style:none;margin:0 0 1.4em;padding:0;font-size:.88rem;color:var(--ink-3);columns:2;column-gap:20px}
.pcard__list li{padding-left:14px;position:relative}
.pcard__list li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:1px;background:var(--ink-3)}

/* feature cards */
.fcard{background:#fff;padding:clamp(26px,2.6vw,38px)}
.fcard__num{font-size:.75rem;font-weight:600;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;display:block}
.fcard h3{margin-bottom:.55em}
.cards--quotes{gap:clamp(16px,2vw,28px);background:none;border:0}
.fcard.quote{position:relative;margin:0;display:flex;flex-direction:column;justify-content:space-between;gap:32px;
  padding:clamp(32px,4vw,52px);border:1px solid var(--line);border-top:3px solid var(--accent);box-shadow:0 18px 40px -26px rgba(23,25,28,.35)}
.fcard.quote::before{content:"“";font-family:var(--f-display);font-size:5.5rem;line-height:.6;color:var(--accent);opacity:.9;height:.45em}
.quote blockquote{margin:0}
.fcard.quote p{font-family:var(--f-display);font-size:clamp(1.35rem,2vw,1.75rem);line-height:1.4;color:var(--ink);margin:0}
.quote figcaption{display:flex;align-items:center;gap:14px;font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);padding-top:24px;border-top:1px solid var(--line)}
.quote__mark{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--accent);color:#fff;font-size:.8rem;letter-spacing:.04em}
.quote__role{display:block;margin-top:2px;font-weight:500;letter-spacing:.06em;text-transform:none;color:var(--ink-3)}
.fcard p{font-size:.93rem;color:var(--ink-3);margin:0}
.section--alt .fcard{background:#fff}

/* process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.step{background:var(--bg-alt);padding:clamp(28px,3vw,40px)}
.section--alt .step{background:#fff}
.step__n{font-size:2rem;font-weight:600;color:var(--line);letter-spacing:-.03em;display:block;margin-bottom:18px;line-height:1}
.section--alt .step__n{color:var(--bg-line)}
.step h3{font-size:1.05rem}
.step p{font-size:.92rem;color:var(--ink-3);margin:0}

/* projects */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.filters button{
  padding:.6em 1.15em;border:1px solid var(--line);background:none;border-radius:2px;
  font-size:.86rem;font-weight:500;cursor:pointer;color:var(--ink-3);
  transition:border-color .2s,color .2s,background-color .2s;
}
.filters button:hover{border-color:var(--ink-3);color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.projects--editorial .proj:nth-child(6n+1){grid-column:span 2}
.proj{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column}
.proj__media{aspect-ratio:4/3;overflow:hidden;background:var(--bg-alt)}
.projects--editorial .proj:nth-child(6n+1) .proj__media{aspect-ratio:16/9}
.proj__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.proj:hover .proj__media img{transform:scale(1.03)}
.proj__body{padding:24px}
.proj__type{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:600}
.proj__body h3{font-size:1.1rem;margin:.5em 0 .4em}
.proj__body p{font-size:.92rem;color:var(--ink-3);margin:0}
.imgnote{font-size:.72rem;color:var(--ink-3);margin-top:14px;opacity:.85}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px)}
.gallery button{padding:0;border:1px solid var(--line);background:none;cursor:zoom-in;overflow:hidden;aspect-ratio:4/3}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.gallery button:hover img{transform:scale(1.04)}

.lightbox{
  position:fixed;inset:0;background:rgba(23,25,28,.93);z-index:90;
  display:flex;align-items:center;justify-content:center;padding:5vw;
  opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;
}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox img{max-height:88vh;width:auto;object-fit:contain}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.35);color:#fff;font-size:2rem;line-height:1;cursor:pointer;border-radius:50%;transition:background-color .25s}
.lightbox__nav:hover,.lightbox__nav:focus-visible{background:rgba(255,255,255,.2)}
.lightbox__nav--prev{left:clamp(10px,3vw,40px)}
.lightbox__nav--next{right:clamp(10px,3vw,40px)}
.lightbox__count{position:absolute;bottom:18px;left:0;right:0;margin:0;text-align:center;color:#C6CBD1;font-size:.85rem;letter-spacing:.12em}
.lightbox__close{position:absolute;top:20px;right:20px;width:48px;height:48px;border:1px solid rgba(255,255,255,.3);background:none;color:#fff;font-size:1.4rem;cursor:pointer;border-radius:2px}

/* ---------- FAQ accordion ---------- */
.faq{border-top:1px solid var(--line);max-width:900px}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  width:100%;display:flex;gap:20px;align-items:flex-start;justify-content:space-between;
  padding:26px 0;background:none;border:0;text-align:left;cursor:pointer;
  font-size:clamp(1rem,1.4vw,1.12rem);font-weight:600;color:var(--ink);letter-spacing:-.01em;
}
.faq__q::after{content:"+";font-size:1.35rem;font-weight:400;color:var(--accent);line-height:1;transition:transform .25s var(--ease)}
.faq__item.is-open .faq__q::after{transform:rotate(45deg)}
.faq__a{overflow:hidden;height:0;transition:height .3s var(--ease)}
.faq__a > div{padding:0 0 26px;max-width:70ch;color:var(--ink-3);font-size:.97rem}

/* ---------- CTA band ---------- */
.ctaband{background:var(--dark);color:#C6CBD1;padding-block:clamp(64px,8vw,110px);text-align:center}
.ctaband h2{color:#fff;max-width:20ch;margin-inline:auto}
.ctaband p{color:#AFB5BC;max-width:56ch;margin-inline:auto;font-size:1.05rem}
.ctaband .btn-row{justify-content:center}

/* ---------- forms ---------- */
.form{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.field{display:flex;flex-direction:column;gap:7px}
.field--full{grid-column:1/-1}
.field label{font-size:.82rem;font-weight:600;color:var(--ink-2);letter-spacing:.01em}
.field .req{color:var(--accent)}
.field input,.field select,.field textarea{
  padding:.85em 1em;border:1px solid var(--line);background:#fff;border-radius:2px;
  font-size:.95rem;transition:border-color .2s,box-shadow .2s;
}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(28,31,35,.13)}
.field__hint{font-size:.78rem;color:var(--ink-3)}
.field input[readonly]{background:var(--bg-alt);color:var(--ink-3);cursor:default}
.field input[readonly]:focus{border-color:var(--line);box-shadow:none}
.field input:invalid:not(:placeholder-shown){border-color:#B4453C}

.drop{
  grid-column:1/-1;border:1px dashed var(--line);padding:26px;text-align:center;
  background:var(--bg-alt);border-radius:2px;
}
.drop h2{font-family:var(--f-sans);font-weight:600;letter-spacing:0;line-height:1.1;font-size:1.02rem;margin-bottom:.3em}
.drop p{font-size:.85rem;color:var(--ink-3);margin:0}
.drop__list{list-style:none;margin:14px 0 0;padding:0;font-size:.84rem;color:var(--ink-2)}
.drop__list li{padding:6px 10px;background:#fff;border:1px solid var(--line);margin-top:6px;display:flex;justify-content:space-between;gap:12px}

.formnote{
  grid-column:1/-1;font-size:.84rem;color:var(--ink-3);
  border-left:2px solid var(--accent);padding:12px 0 12px 16px;background:var(--bg-alt);
}
.formstatus{grid-column:1/-1;padding:16px 18px;border:1px solid var(--line);background:var(--bg-alt);font-size:.92rem}
.formstatus[hidden]{display:none}

.infolist{list-style:none;margin:0;padding:0}
.infolist li{padding:16px 0;border-bottom:1px solid var(--line)}
.infolist strong{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:5px}
.tbc{font-style:normal;color:var(--accent);font-size:.82rem;background:rgba(28,31,35,.08);padding:2px 7px;border-radius:2px}

/* ---------- legal / prose ---------- */
.prose{max-width:74ch}
.prose h2{font-size:clamp(1.35rem,2.2vw,1.75rem);margin-top:2.4em}
.prose h2:first-child{margin-top:0}
.prose ul{padding-left:1.1em;color:var(--ink-3)}
.prose li{margin-bottom:.5em}
.callout{border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--bg-alt);padding:22px 26px;margin:0 0 2.4em}
.callout p{font-size:.94rem;margin-bottom:.6em}

/* ---------- footer ---------- */
.ftr{background:var(--dark-2);color:#9AA1A9;padding-block:clamp(56px,6vw,84px) 32px;font-size:.92rem}
.ftr__top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(32px,5vw,64px);padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.1)}
.ftr .brand__logo,.asidebar .brand__logo,.login__aside .brand__logo{background:#fff;padding:6px 10px;border-radius:6px}
.ftr .brand__mark{color:#fff}
.ftr .brand__sub{color:#7C848D}
.ftr__blurb{max-width:42ch;margin-top:20px;line-height:1.6}
.ftr h2{font-family:var(--f-sans);font-weight:600;line-height:1.1;color:#fff;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li+li{margin-top:9px}
.ftr a{text-decoration:none;transition:color .2s}
.ftr a:hover{color:#fff}
.ftr__bottom{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;padding-top:24px;font-size:.82rem;color:#767D85}
.ftr__bottom nav{display:flex;gap:20px;flex-wrap:wrap}

/* ---------- admin ---------- */
.login{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:var(--bg-alt)}
.login__aside{background:var(--dark);color:#A9B0B7;padding:clamp(40px,5vw,72px);display:flex;flex-direction:column;justify-content:space-between}
.login__aside h2{color:#fff;max-width:16ch}
.login__panel{display:flex;align-items:center;justify-content:center;padding:clamp(32px,5vw,64px)}
.login__card{width:100%;max-width:400px;background:#fff;border:1px solid var(--line);padding:clamp(28px,3.4vw,44px)}
.login__card .field{margin-bottom:18px}
.login__card .btn{width:100%}
.demo-badge,.badge{
  display:inline-block;font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);background:rgba(28,31,35,.1);padding:5px 10px;border-radius:2px;margin-bottom:20px;
}
.demo-badge--light{color:#D4D7DB;background:rgba(255,255,255,.14)}

.admin{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.asidebar{background:var(--dark);color:#9AA1A9;padding:26px 20px;display:flex;flex-direction:column;gap:8px}
.asidebar .brand{margin-bottom:24px}
.asidebar .brand__mark{color:#fff}
.asidebar button{
  display:block;width:100%;text-align:left;padding:11px 14px;border:0;background:none;
  color:#9AA1A9;font-size:.92rem;border-radius:2px;cursor:pointer;transition:background-color .2s,color .2s;
}
.asidebar button:hover{background:rgba(255,255,255,.06);color:#fff}
.asidebar button[aria-current="true"]{background:rgba(255,255,255,.1);color:#fff;font-weight:600}
.asidebar__foot{margin-top:auto;font-size:.78rem;color:#6E757D;line-height:1.5}
.amain{background:var(--bg-alt);padding:clamp(24px,3vw,44px);overflow-x:hidden}
.amain__head{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;margin-bottom:28px}
.amain h1{font-size:clamp(1.5rem,2.4vw,2rem);margin:0}
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:32px}
.stat{background:#fff;border:1px solid var(--line);padding:22px}
.stat__n{font-size:2rem;font-weight:600;color:var(--ink);letter-spacing:-.02em;line-height:1}
.stat__l{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:8px}
.panel{background:#fff;border:1px solid var(--line);padding:clamp(20px,2.4vw,32px)}
.panel+.panel{margin-top:20px}
.panel h2{font-size:1.2rem}
.atable{width:100%;border-collapse:collapse;font-size:.9rem}
.atable th,.atable td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
.atable th{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.atable tbody tr:hover{background:var(--bg-alt)}
.atable-scroll{overflow-x:auto}
.tag{font-size:.72rem;padding:3px 9px;border-radius:2px;background:var(--bg-line);color:var(--ink-2);white-space:nowrap}
.tag--new{background:rgba(28,31,35,.12);color:var(--accent)}
.agrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.aitem{border:1px solid var(--line);padding:16px;font-size:.9rem}
.aitem strong{display:block;color:var(--ink);margin-bottom:4px}
.editable{border:1px dashed var(--line);padding:14px 16px;font-size:.92rem;color:var(--ink-3);border-radius:2px}
.editable+.editable{margin-top:12px}
.editable:focus{outline:none;border-color:var(--accent);border-style:solid;color:var(--ink-2)}
.switch{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:.92rem}

/* ---------- reveal animation ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* ---------- focus ---------- */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.section--dark :focus-visible,.hero :focus-visible,.asidebar :focus-visible{outline-color:#D4D7DB}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .nav,.hdr__cta{display:none}
  .burger{display:inline-flex}
  .drawer{display:block}
  .strip__grid,.cards--4,.steps{grid-template-columns:repeat(2,1fr)}
  .cards--3{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(3,1fr)}
  .agrid{grid-template-columns:repeat(2,1fr)}
  .ftr__top{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .admin{grid-template-columns:1fr}
  .asidebar{flex-direction:row;flex-wrap:wrap;align-items:center;padding:16px}
  .asidebar .brand{margin:0 16px 0 0}
  .asidebar button{width:auto}
  .asidebar__foot{display:none}
  .login{grid-template-columns:1fr}
  .login__aside{display:none}
  .projects,.gallery{grid-template-columns:repeat(2,1fr)}
  .projects--editorial .proj:nth-child(6n+1){grid-column:span 2}
}
@media (max-width:760px){
  body{font-size:16px}
  .split,.split--wide{grid-template-columns:1fr;gap:28px}
  .split--flip .split__media{order:0}
  .cards--2,.cards--3,.cards--4,.strip__grid,.steps{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .projects,.gallery{grid-template-columns:1fr}
  .projects--editorial .proj:nth-child(6n+1){grid-column:auto}
  .projects--editorial .proj:nth-child(6n+1) .proj__media{aspect-ratio:4/3}
  .stats,.agrid{grid-template-columns:repeat(2,1fr)}
  .ftr__top{grid-template-columns:1fr;gap:36px}
  .pcard__list{columns:1}
  .btn{width:100%}
  .btn-row{flex-direction:column;align-items:stretch}
  .sec-head--row{align-items:flex-start}
}
@media (max-width:420px){
  .stats,.agrid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .hero__media img{transform:none;animation:none}
}

@media print{
  .hdr,.ftr,.drawer,.scrim,.ctaband,.wa{display:none}
}

/* ============================================================
   MOTION SYSTEM + SURFACE POLISH
   Loaded after the base rules so it intentionally overrides them.
   ============================================================ */

/* ---- reveal engine ---------------------------------------- */
/* The block itself no longer animates; its parts do (see site.js). */
.reveal{opacity:1;transform:none;transition:none}

/* word-by-word display type */
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em}
.w__i{
  display:inline-block;transform:translateY(105%);
  transition:transform .9s var(--ease-out);
  transition-delay:calc(var(--i,0) * 55ms);
}
.is-in .w__i{transform:none}

/* generic staggered items */
.anim-item{
  opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);
  transition-delay:calc(var(--i,0) * 70ms);
}
.is-in .anim-item{opacity:1;transform:none}

/* image curtain wipe + settle */
.anim-clip{clip-path:inset(0 0 100% 0);transition:clip-path 1.05s var(--ease-out);transition-delay:calc(var(--i,0) * 70ms)}
.anim-clip img{transform:scale(1.12);transition:transform 1.4s var(--ease-out);transition-delay:calc(var(--i,0) * 70ms)}
.is-in .anim-clip{clip-path:inset(0 0 0 0)}
.is-in .anim-clip img{transform:scale(1)}
.pcard:hover .anim-clip img,.proj:hover .anim-clip img,.icard:hover .anim-clip img{transform:scale(1.05)}

/* thin rule that draws itself under a section head */
.sec-head{position:relative}
.sec-head::after{
  content:"";position:absolute;left:0;bottom:calc(-1 * clamp(16px,2vw,26px));
  height:1px;width:0;background:var(--line);transition:width 1.1s var(--ease-out) .25s;
}
.is-in .sec-head::after,.sec-head.is-in::after{width:100%}
.sec-head--row::after{display:none}

/* ---- hero ------------------------------------------------- */
.hero{min-height:clamp(560px,88vh,900px)}
.hero__media img{animation:none;transform:scale(1.14);transition:transform 2.2s var(--ease-out)}
.hero.is-in .hero__media img{transform:scale(1)}
.hero::after{
  
}
.hero h1{font-size:clamp(2.7rem,6vw,5.2rem);letter-spacing:-.022em;max-width:15ch}
.hero__text,.hero .btn-row,.hero__note{
  opacity:0;transform:translateY(20px);
  transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);
}
.hero.is-in .hero__text{opacity:1;transform:none;transition-delay:.45s}
.hero.is-in .btn-row{opacity:1;transform:none;transition-delay:.6s}
.hero.is-in .hero__note{opacity:1;transform:none;transition-delay:.75s}
.hero__note{position:relative;padding-left:38px}
.hero__note::before{
  content:"";position:absolute;left:0;top:.62em;height:1px;width:26px;background:#9EA5AD;
  transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease-out) .9s;
}
.hero.is-in .hero__note::before{transform:none}

.pagehero--media{min-height:clamp(400px,54vh,600px)}
.pagehero--media .pagehero__bg img{transform:scale(1.1);transition:transform 1.8s var(--ease-out)}
.pagehero.is-in .pagehero__bg img{transform:scale(1)}

/* ---- header ----------------------------------------------- */
.hdr{transition:transform .45s var(--ease-out),box-shadow .3s var(--ease),background-color .3s}
.hdr.is-hidden{transform:translateY(-100%)}
.hdr__progress{
  position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  background:var(--accent);transform:scaleX(var(--p,0));transform-origin:left;
}
.nav__link{position:relative;background:none !important}
/* Toggles are excluded here: they carry a chevron instead of an underline, and
   the [aria-current] rule below outranks .nav__toggle::after — on the active
   page that repainted the chevron as a solid accent square. */
.nav__link:not(.nav__toggle)::after{
  content:"";position:absolute;left:14px;right:14px;bottom:6px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease-out);
}
.nav__link:not(.nav__toggle):hover::after{transform:scaleX(1);transform-origin:left}
.nav__link:not(.nav__toggle)[aria-current="page"]::after{transform:scaleX(1);background:var(--accent)}
.nav__toggle::after{
  position:static;background:none;
  transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease-out);
}
.nav__item.is-open .nav__toggle::after{transform:translateY(1px) rotate(225deg)}
.mega a{position:relative;transition:color .3s var(--ease),padding-left .3s var(--ease)}
.mega a:hover{background:none;padding-left:22px}
.mega a::before{
  content:"";position:absolute;left:10px;top:50%;width:10px;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out);
}
.mega a:hover::before{transform:scaleX(1)}

/* ---- buttons ---------------------------------------------- */
/* Two stacked layers behind the label: ::before is the resting fill,
   ::after wipes up on hover. The button itself stays transparent so
   both layers remain visible beneath the text. */
.btn{
  position:relative;overflow:hidden;isolation:isolate;border-radius:0;
  background:none;transition:color .35s var(--ease),border-color .35s var(--ease);
}
.btn::before,.btn::after{content:"";position:absolute;inset:0}
.btn::before{z-index:-2}
.btn::after{
  z-index:-1;transform:scaleY(0);transform-origin:bottom;
  transition:transform .45s var(--ease-out);
}
.btn:hover::after{transform:scaleY(1)}
/* the base rules set a solid hover background — it would hide the wipe */
.btn--primary:hover,.btn--dark:hover,.btn--light:hover,
.btn--ghost:hover,.btn--outline-light:hover{background:none}

.btn--primary::before{background:var(--accent)}
.btn--primary::after{background:var(--ink)}
.btn--dark::before{background:var(--ink)}
.btn--dark::after{background:var(--accent)}
.btn--light::before{background:#fff}
.btn--light::after{background:var(--accent)}
.btn--light:hover{color:#fff}
.btn--ghost::after{background:var(--ink)}
.btn--ghost:hover{color:#fff;border-color:var(--ink)}
.btn--outline-light::after{background:#fff}
.btn--outline-light:hover{color:var(--ink);border-color:#fff}

.link-arrow{position:relative;padding-bottom:3px}
.link-arrow::before{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out);
}
.pcard:hover .link-arrow::before,.link-arrow:hover::before{transform:scaleX(1);transform-origin:left}
.pcard:hover .link-arrow::after{transform:translateX(5px)}

/* ---- cards ------------------------------------------------ */
.pcard,.proj,.icard{position:relative}
.pcard::after,.proj::after,.icard::after{
  content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease-out);z-index:2;
}
.pcard:hover::after,.proj:hover::after,.icard:hover::after{transform:scaleX(1)}
.pcard{transition:background-color .45s var(--ease)}
.pcard__body{transition:transform .5s var(--ease-out)}
.pcard:hover .pcard__body{transform:translateY(-4px)}
.fcard{position:relative;transition:background-color .4s var(--ease)}
.fcard::before{
  content:"";position:absolute;left:0;top:0;width:2px;height:100%;background:var(--accent);
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease-out);
}
.fcard:hover::before{transform:scaleY(1)}
.fcard:hover{background:var(--bg-alt)}
.section--alt .fcard:hover{background:var(--bg-line)}
.step{position:relative;overflow:hidden}
.step__n{
  font-family:var(--f-display);font-size:2.7rem;font-weight:300;font-style:italic;
  color:var(--accent);opacity:.3;
  transition:opacity .5s var(--ease),transform .5s var(--ease-out);
}
.step:hover .step__n{opacity:.65;transform:translateY(-3px)}
.fcard__num{font-family:var(--f-display);font-style:italic;font-size:1rem;letter-spacing:.02em;opacity:.8}

.filters button{position:relative;overflow:hidden;isolation:isolate}
.filters button::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:scaleY(0);transform-origin:bottom;transition:transform .35s var(--ease-out);
}
.filters button:hover::before{transform:scaleY(1)}
.filters button:hover{color:#fff;border-color:var(--ink)}

/* ---- accordion -------------------------------------------- */
.faq__q{transition:padding-left .4s var(--ease-out),color .3s}
.faq__q:hover{padding-left:12px;color:var(--accent)}
.faq__item{position:relative}
.faq__item::before{
  content:"";position:absolute;left:0;top:0;height:100%;width:2px;background:var(--accent);
  transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease-out);
}
.faq__item.is-open::before{transform:scaleY(1)}
/* indent open item so the accent bar never overlaps the text */
.faq__item.is-open .faq__q,.faq__item.is-open .faq__a > div{padding-left:18px}
.faq__a > div{transition:padding-left .4s var(--ease-out)}

/* ---- dark surfaces: fine grain ---------------------------- */
.section--dark,.ctaband,.ftr{position:relative;isolation:isolate}
.section--dark::before,.ctaband::before,.ftr::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.35;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}
.ctaband h2{font-size:clamp(2.2rem,4.4vw,3.8rem)}
.ctaband .wrap{position:relative}

/* ---- lightbox --------------------------------------------- */
.lightbox img{transform:scale(.94);opacity:0;transition:transform .5s var(--ease-out),opacity .4s}
.lightbox.is-open img{transform:none;opacity:1}
.gallery button{position:relative}
.gallery button::after{
  content:"";position:absolute;inset:0;background:rgba(23,25,28,.16);
  opacity:0;transition:opacity .4s var(--ease);
}
.gallery button:hover::after{opacity:1}

/* ---- misc polish ------------------------------------------ */
.lead{font-family:var(--f-sans);font-size:clamp(1.06rem,1.5vw,1.22rem);line-height:1.62}
.strip__item{transition:background-color .4s var(--ease)}
.strip__item:hover{background:var(--bg-alt)}
.proj__type{font-family:var(--f-sans)}
.stat__n{font-family:var(--f-display);font-weight:400;font-size:2.5rem}
.brand__mark{font-family:var(--f-sans);font-weight:700}
.prose h2{font-size:clamp(1.5rem,2.4vw,2rem)}

/* ============================================================
   INSIGHTS (article cards, article page) + WHATSAPP BUTTON
   ============================================================ */
.badge{margin-bottom:0;align-self:flex-start}

.icards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.icards:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
.icard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);text-decoration:none;color:inherit}
.icard__media{aspect-ratio:16/10;overflow:hidden;background:var(--bg-alt)}
.icard__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.icard:hover .icard__media img{transform:scale(1.04)}
.icard__body{padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;flex:1}
.icard__title{
  font-family:var(--f-sans);font-size:clamp(1.12rem,1.55vw,1.32rem);font-weight:600;
  letter-spacing:-.012em;line-height:1.22;margin:.9em 0 .55em;transition:color .3s var(--ease);
}
.icard:hover .icard__title{color:var(--accent)}
.icard__body p{font-size:.93rem;color:var(--ink-3);margin-bottom:1.4em}
.icard__body .icard__meta{
  margin:auto 0 0;padding-top:16px;border-top:1px solid var(--bg-line);
  display:flex;gap:14px;justify-content:space-between;font-size:.8rem;
}
.icard--feature{display:grid;grid-template-columns:1.1fr .9fr;margin-bottom:clamp(16px,2vw,28px)}
.icard--feature .icard__media{aspect-ratio:auto;position:relative;min-height:clamp(260px,30vw,420px)}
.icard--feature .icard__media img{position:absolute;inset:0}
.icard--feature .icard__body{justify-content:center;padding:clamp(28px,4vw,56px)}
.icard--feature .icard__title{font-family:var(--f-display);font-weight:400;font-size:clamp(1.7rem,2.8vw,2.5rem);line-height:1.08;letter-spacing:-.018em}
.icard--feature .icard__body p{font-size:1rem}
.icard--feature .icard__body .icard__meta{margin-top:.6em;justify-content:flex-start;gap:22px}

/* eight nav items: keep every label on one line */
.nav{gap:0}
.nav__link,.hdr__cta{white-space:nowrap}
.nav__link{padding-inline:11px}
.hdr__bar{gap:18px}
/* ...and switch to the menu button before they run out of room */
@media (max-width:1240px){
  .nav,.hdr__cta{display:none}
  .burger{display:inline-flex}
  .drawer{display:block}
}

.wrap--narrow{max-width:calc(820px + 2 * var(--gut))}
.article__head{border:0;padding-bottom:0}
.article__head h1{font-size:clamp(2.1rem,4.2vw,3.4rem);line-height:1.06;margin:.55em 0 0}
.article__meta{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:.86rem;color:var(--ink-3);margin-top:1.5rem}
.article__cover{margin:clamp(28px,4vw,52px) auto;max-width:1040px;aspect-ratio:2/1;overflow:hidden;background:var(--bg-alt)}
.article__cover img{width:100%;height:100%;object-fit:cover}
.prose--article{margin-inline:auto;font-size:1.06rem;line-height:1.75}
.prose--article .lead{max-width:none;color:var(--ink-2)}
.prose--article h3{margin-top:1.9em}
.prose--article ol{padding-left:1.3em;color:var(--ink-3)}
.prose--article a{color:var(--accent);text-underline-offset:3px}
.prose--article blockquote{
  margin:2em 0;padding:.15em 0 .15em 1.3em;border-left:3px solid var(--accent);
  font-family:var(--f-display);font-size:clamp(1.25rem,2vw,1.5rem);line-height:1.4;color:var(--ink);
}
.prose--article figure{margin:2.2em 0}
.prose--article figcaption{font-size:.8rem;color:var(--ink-3);margin-top:.7em}
.prose--article .atable-scroll{margin:2em 0;border:1px solid var(--line)}
.prose--article .atable td{color:var(--ink-3)}
.prose--article .callout{margin:2.4em 0 0}
.article__foot{max-width:74ch;margin:clamp(36px,5vw,60px) auto 0;padding-top:24px;border-top:1px solid var(--line)}
.article{padding-bottom:var(--sec)}

/* floating WhatsApp contact button (injected by site.js) */
.wa{
  position:fixed;right:max(28px,env(safe-area-inset-right));bottom:max(36px,env(safe-area-inset-bottom));
  z-index:55;width:66px;height:66px;border-radius:50%;background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(23,25,28,.24);
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease);
}
.wa:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(23,25,28,.3)}
.wa svg{width:35px;height:35px;fill:currentColor}
.wa:focus-visible{outline-color:var(--ink)}
/* attention: a pulse ring that keeps expanding, plus a short shake every few seconds */
.wa{animation:waShake 6s ease-in-out 3s infinite}
.wa::before{content:"";position:absolute;inset:0;border-radius:50%;background:#25D366;z-index:-1;animation:waPulse 2s ease-out infinite}
.wa:hover,.wa:hover::before{animation-play-state:paused}
@keyframes waPulse{from{transform:scale(1);opacity:.55}to{transform:scale(1.8);opacity:0}}
@keyframes waShake{0%,84%,100%{rotate:0deg}86%{rotate:-16deg}88%{rotate:14deg}90%{rotate:-12deg}92%{rotate:9deg}94%{rotate:-5deg}96%{rotate:2deg}}

@media (max-width:1100px){
  .icards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .icards,.icards:has(> :nth-child(2):last-child),.icard--feature{grid-template-columns:1fr}
  .icard--feature .icard__media{min-height:0;aspect-ratio:16/10}
  .icard--feature .icard__media img{position:static}
  .wa{width:58px;height:58px;right:max(18px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom))}
  .wa svg{width:31px;height:31px}
}

/* honour reduced motion — must stay last */
@media (prefers-reduced-motion:reduce){
  .w__i,.anim-item,.anim-clip,.anim-clip img,
  .hero__media img,.hero__text,.hero .btn-row,.hero__note,
  .pagehero--media .pagehero__bg img,.lightbox img{
    opacity:1 !important;transform:none !important;clip-path:none !important;transition:none !important;
  }
  .sec-head::after{width:100%;transition:none !important}
  .hero__note::before{transform:none !important;transition:none !important}
  .hdr.is-hidden{transform:none}
  .wa,.wa::before{animation:none}
}

/* ---- top bar (contact + social) ---------------------------- */
.topbar{background:var(--dark);color:#D5D9DD;font-size:.82rem}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:38px}
.topbar__info,.topbar__social{display:flex;align-items:center;gap:22px}
.topbar__social{gap:6px}
.topbar a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:color .2s}
.topbar a:hover{color:#fff}
.topbar svg{width:15px;height:15px;fill:currentColor;flex:none}
.topbar__link svg{fill:#D4D7DB}
.topbar__social a{width:30px;height:30px;justify-content:center}
.topbar__social svg{width:16px;height:16px}
@media (max-width:760px){.topbar__link:first-child:not(:last-child){display:none}.topbar__in{justify-content:center}}

/* ---- home category tiles (overlap the hero) ------------------ */
.cattiles{position:relative;z-index:3;margin-top:calc(-1 * clamp(56px,7vw,92px))}
.cattiles__grid{display:grid;grid-template-columns:repeat(5,1fr);background:#fff;border:1px solid var(--line);box-shadow:0 12px 40px rgba(23,25,28,.12)}
.cattile{display:flex;flex-direction:column;align-items:center;gap:18px;padding:30px 12px 26px;text-decoration:none;color:var(--ink-2);font-weight:500;border-right:1px solid var(--line);transition:color .25s,background-color .25s}
.cattile:last-child{border-right:0}
.cattile svg{width:54px;height:74px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linejoin:round;transition:transform .3s var(--ease-out)}
.cattile:hover{color:var(--accent);background:var(--bg-alt)}
.cattile:hover svg{transform:translateY(-4px)}
@media (max-width:760px){.cattiles__grid{grid-template-columns:repeat(2,1fr)}.cattile{border-bottom:1px solid var(--line)}.cattile:last-child{grid-column:1/-1;border-bottom:0}}

/* ---- hero clears the overlapping category tiles --------------- */
.hero__inner{padding-bottom:calc(clamp(48px,7vw,84px) + clamp(56px,7vw,92px) + 20px)}

/* ---- responsive hardening ------------------------------------ */
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
img,video,svg{max-width:100%}
img{height:auto}
.hero__media img,.pagehero__bg img{height:100%}
@media (max-width:900px){
  .hdr__cta{display:none}
  .hero{min-height:clamp(520px,80vh,720px)}
  .hero h1{font-size:clamp(2.2rem,8vw,3.4rem)}
  .cattile svg{width:44px;height:60px}
}
@media (max-width:560px){
  .hdr__bar{height:68px;gap:12px}
  .brand__logo{height:38px}
  .btn-row .btn{flex:1 1 100%;text-align:center;justify-content:center}
  .cattile{padding:22px 8px 18px;gap:12px}
  .hero__note{margin-top:1.4rem}
}

/* ---- diagram heroes: keep the drawing clear of the heading ---- */
.pagehero__bg img[src$=".svg"]{object-fit:contain;object-position:right center;width:55%;margin-left:auto;display:block;opacity:.6;transform:none !important}
@media (max-width:760px){.pagehero__bg img[src$=".svg"]{width:100%;opacity:.25;object-position:center}}

/* ============================================================
   MODERN SURFACE LAYER (2026 refresh)
   Rounded, softly elevated, warm-neutral surfaces with a deep navy
   anchor. Loaded last so it overrides the earlier flat styling.
   Card grids are now contained and centred in the page width.
   ============================================================ */
:root{
  --bg-alt:#F2F2F0;
  --bg-line:#E7E7E4;
  --ink:#1C1F23;
  --ink-2:#3A3F45;
  --ink-3:#6B7178;
  --accent:#1C1F23;
  --accent-dark:#000000;
  --accent-soft:rgba(28,31,35,.09);
  --brass:#1C1F23;
  --line:#E4E4E1;
  --dark:#1C1F23;
  --dark-2:#1C1F23;
  --r-sm:10px;
  --r-md:18px;
  --r-lg:28px;
  --shadow-sm:0 1px 2px rgba(28,31,35,.05),0 8px 22px -12px rgba(28,31,35,.16);
  --shadow-md:0 2px 4px rgba(28,31,35,.04),0 22px 44px -22px rgba(28,31,35,.28);
}
body{background:#fff}
h1,h2{letter-spacing:-.022em}

/* eyebrow: small brass rule + label */
.eyebrow{display:inline-flex;align-items:center;gap:.7em;font-size:.78rem;letter-spacing:.16em;color:var(--accent)}
.eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--brass)}
.ctaband .eyebrow,.section--dark .eyebrow,.hero .eyebrow,.pagehero--media .eyebrow{color:#D4D7DB}

/* buttons */
.btn{border-radius:999px;padding:1em 1.9em;box-shadow:0 1px 0 rgba(255,255,255,.12) inset}
.btn--primary{box-shadow:0 10px 24px -10px rgba(28,31,35,.65)}
.btn--primary:hover{translate:0 -2px}
.btn--ghost{background:#fff}
.btn--light{box-shadow:var(--shadow-sm)}
.btn:active{translate:0 0}
.btn{transition-property:background-color,color,border-color,translate,box-shadow}

/* header: floating glass, pill nav */
.hdr{background:rgba(255,255,255,.82);border-bottom-color:rgba(28,31,35,.06)}
.nav__link{border-radius:999px}
.nav__link:hover,.nav__link[aria-current="page"]{background:var(--accent-soft);color:var(--accent-dark)}
.mega{border-radius:var(--r-md);box-shadow:var(--shadow-md);border-color:transparent}
.mega a{border-radius:var(--r-sm)}
.burger,.drawer__close{border-radius:12px}

/* hero */
.hero::after{}
.hero__inner{padding-block:clamp(56px,8vw,104px)}
.pagehero{border-bottom:0}
.pagehero--media{background:var(--dark)}
.pagehero--media::after{}

/* value strip becomes floating cards */
.strip{border:0;padding-block:clamp(28px,3.4vw,48px) 0}
.strip__grid{gap:clamp(14px,1.6vw,22px);background:none}
.strip__item{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-sm);
  transition:translate .4s var(--ease),box-shadow .4s var(--ease),background-color .4s var(--ease)}
.strip__item:hover{background:#fff;translate:0 -4px;box-shadow:var(--shadow-md)}
.strip__item h2{color:var(--accent-dark)}

/* contained, centred card grids */
.cards{
  background:none;border:0;gap:clamp(16px,2vw,28px);
  width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
}
.wrap .cards{padding-inline:0}
.pcard,.fcard{
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:translate .45s var(--ease),box-shadow .45s var(--ease),border-color .3s;
}
.pcard:hover,.fcard:hover{translate:0 -6px;box-shadow:var(--shadow-md);border-color:transparent;background:#fff}
.pcard__media{border-radius:0;position:relative}
.pcard__media::after{content:"";position:absolute;inset:0;pointer-events:none}
.pcard__body h3{margin-bottom:.4em}
.fcard{border-top:3px solid var(--brass)}
.section--alt .fcard{border-top-color:var(--brass)}
.fcard.quote{border-radius:var(--r-lg);border-top:1px solid var(--line);box-shadow:var(--shadow-md)}
.fcard.quote::before{color:var(--brass)}
.quote__mark{}

/* steps */
.steps{background:none;gap:clamp(14px,1.6vw,22px)}
.step{border-radius:var(--r-md);border:1px solid var(--line);box-shadow:var(--shadow-sm);background:#fff}
.section--alt .step{background:#fff}
.step__n{color:var(--brass);opacity:.55}
.section--alt .step__n{color:var(--brass)}

/* media */
.split__media{border-radius:var(--r-lg);box-shadow:var(--shadow-md)}
.proj,.icard,.panel,.login__card,.stat{border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm)}
.proj:hover,.icard:hover{box-shadow:var(--shadow-md)}
.gallery button{border-radius:var(--r-md);box-shadow:var(--shadow-sm)}
.lightbox img{border-radius:var(--r-md)}
.section--alt{background:var(--bg-alt)}

/* faq as soft cards */
.faq{border-top:0;display:grid;gap:12px}
.faq__item{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;box-shadow:var(--shadow-sm);padding-inline:clamp(18px,2.4vw,28px);overflow:hidden}
.faq__item::before{display:none}
.faq__q:hover{padding-left:0}
.faq__item.is-open .faq__q,.faq__item.is-open .faq__a > div{padding-left:0}
.faq__q::after{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--accent-soft);font-size:1.2rem}

/* notes / callouts that remain */
.callout{border:1px solid var(--line);border-left:4px solid var(--brass);border-radius:var(--r-md);background:#fff;box-shadow:var(--shadow-sm)}
.formnote{border-radius:var(--r-sm);border-left-color:var(--brass)}
.formstatus{border-radius:var(--r-sm)}

/* forms */
.field input,.field select,.field textarea{border-radius:12px;background:#fff;border-color:var(--line);padding:.9em 1.05em}
.field input:focus,.field select:focus,.field textarea:focus{box-shadow:0 0 0 4px var(--accent-soft)}
.drop{border-radius:var(--r-md);border-color:rgba(28,31,35,.3);background:var(--accent-soft)}
.infolist li{border-color:var(--line)}
.tbc{border-radius:999px}
.filters button{border-radius:999px}

/* CTA band + dark sections: navy with a soft glow */
.ctaband,.section--dark{
  
}
.ctaband h2{max-width:22ch}

/* footer */
.ftr{background:var(--dark)}
.ftr h2{color:#D4D7DB}
.ftr .brand__logo{border-radius:10px}

/* WhatsApp bubble: lift */
.wa{box-shadow:0 14px 30px -10px rgba(18,140,70,.6)}

/* page-level rhythm on phones */
@media (max-width:760px){
  :root{--r-lg:22px;--r-md:16px}
  .cards{gap:16px}
  .btn{border-radius:999px}
  .hero__inner{padding-block:48px 56px}
}

/* ============================================================
   COLOUR REFINEMENT
   Warm beige read as muddy next to the blue brand. Backgrounds are now
   white plus a cool, airy blue-mist tint, with navy for dark bands and
   the brass accent kept to small details only.
   ============================================================ */
:root{
  --bg-alt:#F2F2F0;
  --bg-line:#E7E7E4;
  --line:#E4E4E1;
  --ink:#1C1F23;
  --ink-2:#3A3F45;
  --ink-3:#6B7178;
  --accent:#1C1F23;
  --accent-dark:#000000;
  --accent-soft:rgba(28,31,35,.09);
  --dark:#1C1F23;
  --dark-2:#1C1F23;
  --shadow-sm:0 1px 2px rgba(28,31,35,.05),0 10px 24px -14px rgba(28,31,35,.25);
  --shadow-md:0 2px 4px rgba(28,31,35,.04),0 26px 50px -24px rgba(28,31,35,.38);
}
.section--alt{}
.pagehero{}
.hdr{background:rgba(255,255,255,.9)}
.pcard,.fcard,.step,.strip__item,.faq__item,.callout,.proj,.icard{border-color:rgba(28,31,35,.12)}
.fcard{border-top-color:var(--accent)}
.section--alt .fcard{border-top-color:var(--accent)}
.step__n,.section--alt .step__n{color:var(--accent);opacity:.35}
.eyebrow::before{}
.ctaband,.section--dark{
  
}
.ftr{background:#1C1F23}
.ftr h2{color:#D4D7DB}
.ctaband .eyebrow,.section--dark .eyebrow,.hero .eyebrow,.pagehero--media .eyebrow{color:#D4D7DB}
.hero::after{}
.tbc{background:var(--accent-soft)}

/* mobile menu: ".drawer a" link styles were overriding the button */
.drawer a.btn{display:flex;justify-content:center;align-items:center;text-align:center;padding:1em 1.9em;color:#fff;border-bottom:0;margin-top:26px}
.drawer a.btn:hover{color:#fff}

/* horizontal header logo */
.brand__logo--wide{height:52px;width:auto}
@media (max-width:760px){.brand__logo--wide{height:42px}}

/* footer: the navy wordmark needs a light backing on the dark footer */
.ftr .brand__logo--wide{height:58px;padding:10px 18px;border-radius:14px;background:#fff;box-shadow:0 14px 30px -16px rgba(0,0,0,.6)}
@media (max-width:760px){.ftr .brand__logo--wide{height:50px}}

/* ============================================================
   HOME REDESIGN: split hero + category boxes, trust strip, product types rail, FAQ
   ============================================================ */
.hero--split{min-height:clamp(560px,86vh,820px);align-items:center}
.hero--split .hero__inner{padding-block:clamp(72px,9vw,120px) clamp(96px,10vw,150px)}
.hero__grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,5vw,72px);align-items:center}
.hero--split h1{max-width:16ch;font-size:clamp(2.5rem,5.4vw,4.4rem)}
.hero--split .eyebrow{margin-bottom:1.2rem}

/* category boxes: solid white, overlap the hero edge (no glass, client 27 Oct 2026) */
.hcats{position:relative;z-index:3;margin-top:calc(clamp(56px,6vw,84px) * -1)}
.hcats__grid{
  list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  background:#fff;border:1px solid var(--bg-line);border-radius:var(--r-lg);box-shadow:var(--shadow-md);overflow:hidden;
}
.hcats__grid li+li{border-left:1px solid var(--bg-line)}
.hcats__grid a{
  display:flex;flex-direction:column;align-items:center;gap:18px;padding:clamp(26px,3vw,40px) 16px;
  color:var(--ink);text-decoration:none;font-size:1.05rem;font-weight:500;transition:background-color .25s,color .25s;
}
.hcats__grid svg{width:clamp(56px,5vw,72px);height:auto;color:var(--ink);transition:translate .35s var(--ease),color .25s}
.hcats__grid a:hover{background:var(--accent-soft);color:var(--accent)}
.hcats__grid a:hover svg{color:var(--accent);translate:0 -4px}

/* trust strip */
.trust{position:relative;padding-top:clamp(28px,4vw,48px)}
.trust__grid{
  list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);
  background:#fff;border:1px solid rgba(28,31,35,.12);border-radius:var(--r-lg);box-shadow:var(--shadow-md);overflow:hidden;
}
.trust__grid li{display:flex;gap:14px;align-items:flex-start;padding:clamp(20px,2.2vw,30px);border-left:1px solid var(--bg-line)}
.trust__grid li:first-child{border-left:0}
.trust__grid svg{flex:none;width:34px;height:34px;padding:7px;border-radius:12px;background:var(--accent-soft);color:var(--accent)}
.trust__grid strong{display:block;color:var(--ink);font-size:.98rem;line-height:1.25}
.trust__grid span{display:block;font-size:.84rem;color:var(--ink-3);line-height:1.45;margin-top:3px}

/* product types rail: reuses the .gallery carousel, each slide links to its product page */
.gallery .slide__media{display:block;aspect-ratio:4/3;overflow:hidden}
.gallery .slide__media img{transition:transform .6s var(--ease-out)}
.gallery .slide__media:hover img{transform:scale(1.05)}
.gallery .slide__kicker{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--accent);margin-bottom:2px}

/* about ticks */
.ticks{list-style:none;margin:1.4em 0 0;padding:0;display:grid;gap:12px}
.ticks li{position:relative;padding-left:34px;color:var(--ink-2);font-size:.97rem}
.ticks li::before{content:"";position:absolute;left:0;top:.2em;width:22px;height:22px;border-radius:50%;
  background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1F23' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}

/* dark process */
.steps--dark .step{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);box-shadow:none;backdrop-filter:blur(6px)}
.steps--dark .step h3{color:#fff}
.steps--dark .step p{color:#C3C7CC}
.steps--dark .step__n{color:#D4D7DB;opacity:1;font-family:var(--f-display);font-weight:400;font-size:2.6rem}

/* faq two-column */
.faqgrid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,96px);align-items:start}
.faqgrid__intro{position:sticky;top:120px}
.faqgrid .faq{max-width:none}

@media (max-width:1100px){
  .hero__grid{grid-template-columns:1fr}
  .trust__grid{grid-template-columns:repeat(2,1fr)}
  .trust__grid li:nth-child(3){border-left:0}
  .trust__grid li:nth-child(n+3){border-top:1px solid var(--bg-line)}
  .faqgrid{grid-template-columns:1fr}
  .faqgrid__intro{position:static}
}
@media (max-width:760px){
  .hero--split{min-height:0}
  .hero--split .hero__inner{padding-block:56px 110px}
  .hcats__grid a{gap:12px;padding:20px 8px;font-size:.92rem}
  .trust__grid{grid-template-columns:1fr}
  .trust__grid li{border-left:0}
  .trust__grid li+li{border-top:1px solid var(--bg-line)}
}
.hero--split .hero__copy .eyebrow{margin-bottom:1.6rem}
.hero--split .hero__copy h1{margin-top:0}

/* ============================================================
   INNER PAGES: tighter rhythm, carousel gallery, related chips
   ============================================================ */
/* section spacing: the old 120px top + 120px bottom stacked into 240px gaps */
:root{--sec:clamp(56px,6vw,92px)}
.section--tight{padding-block:clamp(40px,4.5vw,64px)}
.sec-head{margin-bottom:clamp(26px,3vw,40px)}
.sec-head::after{display:none}
.pagehero{padding-block:clamp(48px,6vw,88px) clamp(32px,4vw,52px)}
/* two plain white sections in a row: don't double the gap */
.section:not(.section--alt):not(.section--dark) + .section:not(.section--alt):not(.section--dark){padding-top:0}

/* gallery: horizontal, swipeable, captioned; scales to any number of images */
.gallery{
  display:grid;grid-auto-flow:column;grid-template-columns:none;
  grid-auto-columns:calc((100% - 2 * 20px) / 3);gap:20px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;
  scrollbar-width:none;padding-bottom:4px;
}
.gallery::-webkit-scrollbar{display:none}
.gallery .slide{margin:0;scroll-snap-align:start;display:flex;flex-direction:column;background:#fff;border:1px solid rgba(28,31,35,.12);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm)}
.gallery .slide button{border:0;border-radius:0;box-shadow:none;aspect-ratio:4/3}
.gallery figcaption{padding:16px 20px 18px;display:flex;flex-direction:column;gap:3px}
.gallery figcaption a,.gallery figcaption strong{font-weight:600;color:var(--ink);text-decoration:none;font-size:1rem}
.gallery figcaption a::after{content:" →";color:var(--accent);transition:margin .25s var(--ease)}
.gallery figcaption a:hover{color:var(--accent)}
.gallery figcaption span{font-size:.86rem;color:var(--ink-3);line-height:1.45}
.carousel__ctl{display:flex;align-items:center;gap:10px;margin-top:22px}
.carousel__ctl[hidden]{display:none}
.carousel__bar{flex:1;height:3px;border-radius:3px;background:var(--bg-line);overflow:hidden;margin-right:10px}
.carousel__bar span{display:block;height:100%;border-radius:3px;background:var(--accent);transition:transform .2s linear}
.carousel__btn{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);
  font-size:1.6rem;line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:var(--shadow-sm);
  transition:background-color .25s,color .25s,border-color .25s,opacity .25s;
}
.carousel__btn:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:#fff}
.carousel__btn:disabled{opacity:.35;cursor:default}
.lightbox__count{max-width:80ch;margin-inline:auto}

/* "other formats" chips on product pages */
.related{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;
  background:#fff;border:1px solid rgba(28,31,35,.12);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:clamp(24px,3vw,40px)}
.related h2{font-size:clamp(1.5rem,2.4vw,2rem);margin:0}
.related .eyebrow{margin-bottom:.6rem}
.related__chips{display:flex;flex-wrap:wrap;gap:10px}
.related__chips a{padding:.6em 1.15em;border-radius:999px;border:1px solid var(--line);background:var(--bg-alt);color:var(--ink-2);text-decoration:none;font-size:.9rem;font-weight:500;transition:background-color .25s,color .25s,border-color .25s,translate .25s var(--ease)}
.related__chips a:hover{background:var(--accent);border-color:var(--accent);color:#fff;translate:0 -2px}
.related__chips .related__all{background:none;border-color:transparent;color:var(--accent);font-weight:600}

/* dark process band on inner pages, same as home */
.section--dark .sec-head h2{color:#fff}

@media (max-width:900px){
  .gallery{grid-auto-columns:calc((100% - 20px) / 2)}
}
@media (max-width:760px){
  .gallery{grid-auto-columns:85%;gap:14px}
  .carousel__btn{width:42px;height:42px}
}

/* ============================================================
   DESIGN SYSTEM PASS (typography, consistency, states)
   ============================================================ */
:root{
  --f-sans:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --fs-body:1.0625rem;
  --fs-small:.9rem;
}

/* ---- typography ---- */
body{font-size:var(--fs-body);line-height:1.7;color:var(--ink-2);text-rendering:optimizeLegibility}
h1{font-size:clamp(2.5rem,5.2vw,4.4rem);line-height:1.04;letter-spacing:-.025em}
h2{font-size:clamp(1.95rem,3.3vw,3rem);line-height:1.08;letter-spacing:-.022em}
h3{font-family:var(--f-sans);font-weight:700;font-size:clamp(1.08rem,1.4vw,1.22rem);letter-spacing:-.015em;line-height:1.3}
p{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
.lead{color:var(--ink-3);font-size:clamp(1.06rem,1.35vw,1.2rem);line-height:1.65;max-width:62ch}
.sec-head h2+.lead,.sec-head h2+p{margin-top:.2em}
.eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.18em}
.btn{font-weight:600;letter-spacing:0;font-size:.94rem}
.nav__link{font-size:.95rem;font-weight:500}
.nav__link[aria-current="page"]{font-weight:600}
.pcard__body p,.fcard p,.step p,.proj__body p,.icard__body p{font-size:var(--fs-small);line-height:1.6}
.small,.field__hint{font-size:.84rem}

/* ---- hero: keep the glass finder, lift the copy around it ---- */
.hero .eyebrow{
  color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.26);
  padding:.55em 1.1em .55em .9em;border-radius:999px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  font-size:.7rem;letter-spacing:.16em;
}
.hero .eyebrow::before{width:8px;height:8px;border-radius:50%;background:#FFFFFF;box-shadow:0 0 0 4px rgba(255,255,255,.25)}
.hero--split h1{text-shadow:0 2px 30px rgba(28,31,35,.35)}
.hero__text{color:#E8EAEC;font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.65}
.hero .btn--outline-light{background:rgba(255,255,255,.08);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* ---- testimonial cards: the generic .fcard hover bar was hijacking the quote-mark pseudo-element ---- */
.fcard:not(.quote)::before{display:none}
.fcard.quote::before{
  position:static;inset:auto;width:auto;height:.45em;background:none;transform:none;transition:none;
  content:"\201C";font-family:var(--f-display);font-size:5rem;line-height:.6;color:var(--accent);opacity:.25;
}
.fcard.quote:hover::before{transform:none}
.fcard.quote:hover{translate:0 -4px;background:#fff;border-color:rgba(28,31,35,.22)}
.fcard.quote p{font-size:clamp(1.25rem,1.8vw,1.55rem);line-height:1.45;color:var(--ink)}

/* ---- top bar: contacts left, social right ---- */
.topbar{font-size:.84rem}
.topbar__in{min-height:42px}
.topbar__info{gap:26px}
.topbar__social{gap:8px}
.topbar__social a,.topbar__soon{
  width:32px;height:32px;display:inline-grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.08);color:#D0D3D7;transition:background-color .25s,color .25s,translate .25s var(--ease);
}
.topbar__social a:hover{background:#fff;color:var(--dark);translate:0 -1px}
.topbar__soon{cursor:default}
.topbar__social svg{width:15px;height:15px;fill:currentColor}
@media (max-width:760px){
  .topbar__in{justify-content:space-between}
  .topbar__social a,.topbar__soon{width:28px;height:28px}
}

/* ---- compare formats: preview cards ---- */
.related{display:block}
.related__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px}
.related__chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.related__chips .rel{
  display:flex;flex-direction:column;gap:0;padding:0;border-radius:var(--r-md);overflow:hidden;
  background:#fff;border:1px solid var(--line);color:var(--ink);font-weight:600;font-size:.92rem;
  box-shadow:var(--shadow-sm);transition:translate .35s var(--ease),box-shadow .35s var(--ease),border-color .3s;
}
.related__chips .rel:hover{translate:0 -4px;box-shadow:var(--shadow-md);border-color:transparent;background:#fff;color:var(--accent)}
.rel__img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--bg-alt)}
.rel__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.rel:hover .rel__img img{transform:scale(1.06)}
.rel__name{padding:12px 14px}

/* ---- gallery clones keep the same look; never show focus rings on them ---- */
.slide--clone :focus-visible{outline:none}

/* ---- loading + error states ---- */
.skel{
  border-radius:var(--r-md);min-height:280px;
  animation:skel 1.4s linear infinite;
}
@keyframes skel{to{background-position:-150% 0}}
.loaderr{grid-column:1/-1;padding:24px 28px;border-radius:var(--r-md);background:#FFF6F2;border:1px solid #F3D3C5;color:#7A3A22}
.loaderr a{color:inherit;font-weight:600}
.lightbox.is-loading img{opacity:.25}
.lightbox.is-loading::before{
  content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;
  border:3px solid rgba(255,255,255,.25);border-top-color:#fff;animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.formstatus--ok{border-color:#B9E2C8;background:#F1FAF4}
.formstatus--warn{border-color:#F3D3C5;background:#FFF6F2}
.formstatus a{color:var(--accent);font-weight:600}
/* header/footer are injected by JS: reserve their space so the page doesn't jump */
[data-header]:empty{min-height:126px}
@media (max-width:1240px){[data-header]:empty{min-height:110px}}

/* ---- 404 ---- */
.errpage{min-height:62vh;display:flex;align-items:center;}
.errpage__code{font-family:var(--f-display);font-size:clamp(5rem,14vw,10rem);line-height:.9;color:var(--accent);opacity:.18;margin:0 0 .1em;letter-spacing:-.04em}
.errpage__links{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.errpage__links a{padding:.55em 1.1em;border-radius:999px;border:1px solid var(--line);background:#fff;text-decoration:none;color:var(--ink-2);font-size:.9rem;font-weight:500;transition:background-color .25s,color .25s,border-color .25s}
.errpage__links a:hover{background:var(--accent);border-color:var(--accent);color:#fff}

@media (prefers-reduced-motion:reduce){.skel{animation:none}}
.errpage{padding-block:clamp(56px,7vw,104px)}

/* ============================================================
   GLASS SYSTEM: the hero finder's frosted look, carried through
   the header, menus, trust strip, inner-page banners and CTA.
   ============================================================ */
:root{
  --glass-light:rgba(255,255,255,.72);
  --glass-light-border:rgba(255,255,255,.65);
  --glass-dark:rgba(255,255,255,.1);
  --glass-dark-border:rgba(255,255,255,.24);
  --glass-blur:blur(22px) saturate(160%);
}

/* Header: the blur moves onto a pseudo-element. A backdrop-filter on .hdr itself would make it the
   "backdrop root", and the dropdowns inside it could then only blur the white header, not the page below. */
.hdr{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.hdr::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:rgba(255,255,255,.86);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  transition:background-color .3s var(--ease);
}
.hdr.is-stuck::before{background:rgba(255,255,255,.66)}
.hdr.is-stuck{box-shadow:0 10px 30px -18px rgba(28,31,35,.35);border-bottom-color:rgba(255,255,255,.5)}

/* Mega menus: frosted panel, pill hover */
.mega{
  background:var(--glass-light);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-light-border);border-radius:var(--r-lg);
  box-shadow:0 30px 60px -28px rgba(28,31,35,.45),inset 0 1px 0 rgba(255,255,255,.7);
  padding:28px 30px;gap:26px;top:calc(100% + 10px);
}
.mega::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px} /* hover bridge across the gap */
.mega__title{color:var(--accent);letter-spacing:.18em;font-weight:700;margin-bottom:12px}
.mega a{border-radius:999px;padding:7px 12px;margin-left:-12px;color:var(--ink-2);font-weight:500;transition:background-color .2s,color .2s,translate .2s var(--ease)}
.mega a:hover{background:rgba(28,31,35,.1);color:var(--accent-dark);translate:3px 0}

/* Mobile drawer + scrim */
.drawer{background:rgba(255,255,255,.82);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-left:1px solid var(--glass-light-border)}
.scrim{background:rgba(28,31,35,.35);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}

/* Trust strip: frosted where it overlaps the hero photo */
.trust__grid{background:var(--glass-light);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-color:var(--glass-light-border);box-shadow:0 30px 60px -30px rgba(28,31,35,.45),inset 0 1px 0 rgba(255,255,255,.8)}
.trust__grid li{border-color:rgba(28,31,35,.1)}

/* Inner-page photo banners: title sits on a dark glass card aligned to the page column */
.pagehero--media .wrap{
  width:auto;max-width:780px;
  margin:0 var(--gut) clamp(32px,4.5vw,64px) max(var(--gut),calc((100% - var(--wrap)) / 2 + var(--gut)));
  padding:clamp(24px,3vw,40px);
  background:rgba(28,31,35,.28);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-dark-border);border-radius:var(--r-lg);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.18);
}
.pagehero--media h1{font-size:clamp(2.2rem,4.4vw,3.6rem)}
.pagehero--media .lead{color:#E8EAEC;margin-bottom:0}
.pagehero--media .btn-row{margin-top:1.4rem}
.pagehero--media::after{}

/* Closing CTA: content on a glass card over the navy glow */
.ctaband .wrap{
  max-width:920px;padding:clamp(36px,5vw,64px) clamp(24px,4vw,56px);
  background:var(--glass-dark);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-dark-border);border-radius:var(--r-lg);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.14);
}
@media (max-width:760px){
  .ctaband .wrap{margin-inline:var(--gut);width:auto}
  .pagehero--media .wrap{margin-inline:var(--gut)}
}

/* Browsers without backdrop-filter: fall back to solid surfaces so text stays readable */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .mega,.drawer,.trust__grid{background:#fff}
  .hdr::before{background:#fff}
  .pagehero--media .wrap{background:rgba(28,31,35,.78)}
  .ctaband .wrap{background:rgba(255,255,255,.06)}
}

/* ============================================================
   THEME LOCK: one palette, one glass recipe, used everywhere.
   Surfaces: white, one light tint, one navy. Accent: one blue.
   (Everything below overrides the earlier experimental layers.)
   ============================================================ */
:root{
  --bg:#FFFFFF;
  --bg-alt:#F2F2F0;            /* the only light tint */
  --bg-line:#E7E7E4;
  --line:#E4E4E1;
  --dark:#1C1F23;              /* the only dark surface */
  --dark-2:#1C1F23;
  --ink:#1C1F23;
  --ink-2:#3A3F45;
  --ink-3:#6B7178;
  --accent:#1C1F23;            /* the only accent */
  --accent-dark:#000000;
  --accent-light:#D4D7DB;      /* accent on navy */
  --accent-soft:rgba(28,31,35,.08);
  --brass:var(--accent);

  /* liquid glass, dark: tinted navy, see-through, with a bright rim and soft sheen */
  
  --lg-dark-blur:blur(26px) saturate(180%) brightness(.78);
  --lg-dark-rim:rgba(255,255,255,.2);
  --lg-dark-shadow:0 30px 70px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(255,255,255,.06);
  /* liquid glass, light */
  
  --lg-light-blur:blur(24px) saturate(170%);
  --lg-light-shadow:0 24px 60px -30px rgba(28,31,35,.35),inset 0 1px 0 rgba(255,255,255,.9);
}

/* ---- surfaces: flat and consistent ---- */
.section--alt,.pagehero,.errpage{background:var(--bg-alt)}
.topbar,.ftr{background:var(--dark)}
.ctaband,.section--dark{}
.ftr h2,.ctaband .eyebrow,.section--dark .eyebrow,.pagehero--media .eyebrow{color:var(--accent-light)}
.topbar__link svg{fill:var(--accent-light)}
.eyebrow::before{background:var(--accent)}
.ctaband .eyebrow::before,.section--dark .eyebrow::before{background:var(--accent-light)}
.fcard,.section--alt .fcard{border-top:1px solid var(--line)}
.fcard,.pcard,.step,.strip__item,.faq__item,.proj,.icard,.callout,.related,.gallery .slide,.rel{border-color:var(--line)}
.callout{border-left-color:var(--accent)}
.steps--dark .step__n,.step__n{color:var(--accent-light)}
.section:not(.section--dark) .step__n{color:var(--accent);opacity:.35}

/* ---- the shared liquid-glass treatment ---- */
.mega,.drawer,.pagehero--media .wrap,.ctaband .wrap,.steps--dark .step{
  background:var(--lg-dark-bg);
  backdrop-filter:var(--lg-dark-blur);-webkit-backdrop-filter:var(--lg-dark-blur);
  border:1px solid var(--lg-dark-rim);
  box-shadow:var(--lg-dark-shadow);
}
/* sheen: a soft specular highlight across the top-left, like light on curved glass */
.mega::after,.pagehero--media .wrap::after,.ctaband .wrap::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  
}
.pagehero--media .wrap,.ctaband .wrap{position:relative;isolation:isolate}
.pagehero--media .wrap > *,.ctaband .wrap > *{position:relative;z-index:1}

/* menus on dark glass */
.mega{color:#fff}
.mega__title{color:var(--accent-light)}
.mega a{color:rgba(255,255,255,.88)}
.mega a:hover{background:rgba(255,255,255,.12);color:#fff}
.drawer{border-width:0 0 0 1px;color:#fff}
.drawer a{color:rgba(255,255,255,.92);border-bottom-color:rgba(255,255,255,.1)}
.drawer .drawer__sub a{color:rgba(255,255,255,.68)}
.drawer .mega__title{color:var(--accent-light)}
.drawer__close{color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}
.drawer a.btn{color:#fff}

/* light glass for the strip that straddles the hero */
.trust__grid{background:var(--lg-light-bg);backdrop-filter:var(--lg-light-blur);-webkit-backdrop-filter:var(--lg-light-blur);border:1px solid rgba(255,255,255,.75);box-shadow:var(--lg-light-shadow)}
.trust__grid li{border-color:rgba(28,31,35,.08)}

/* header: clean white glass, slightly clearer once scrolled */
.hdr::before{background:rgba(255,255,255,.88)}
.hdr.is-stuck::before{background:rgba(255,255,255,.72)}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .mega,.drawer,.pagehero--media .wrap,.ctaband .wrap,.steps--dark .step{background:rgba(28,31,35,.94)}
  .trust__grid{background:#fff}
}
.mega__title,.drawer .mega__title{color:#D4D7DB}
.faq__q{font-family:var(--f-sans);font-weight:600;font-size:clamp(1rem,1.3vw,1.08rem);letter-spacing:-.01em;line-height:1.4}


/* ============================================================
   NAVY & WHITE, FLAT (client's palette, 26 Oct 2026)
   Navy #0B1B33 dark surfaces · white · light tint #F3F6FA · blue #1C5FA8 accent.
   Rules: flat colours only, NO gradients anywhere.
   See DESIGN-PREFERENCES.md before changing anything here.
   ============================================================ */
:root{
  --bg:#FFFFFF;
  --bg-alt:#F3F6FA;
  --bg-line:#E6ECF3;
  --line:#DFE6EE;
  --dark:#0B1B33;
  --dark-2:#0B1B33;
  --ink:#0B1B33;
  --ink-2:#2A3A52;
  --ink-3:#5B6A80;
  --accent:#1C5FA8;
  --accent-dark:#144A86;
  --accent-light:#8EC1F2;
  --accent-soft:rgba(28,95,168,.08);
  --shadow-sm:0 1px 2px rgba(11,27,51,.05),0 10px 24px -14px rgba(28,95,168,.25);
  --shadow-md:0 2px 4px rgba(11,27,51,.04),0 26px 50px -24px rgba(28,95,168,.38);
  /* glass = flat tint + blur, nothing else */
  --glass-dark:rgba(11,27,51,.48);
  --glass-dark-rim:rgba(255,255,255,.2);
  --glass-dark-filter:blur(26px) saturate(170%) brightness(.8);
  --glass-light:rgba(255,255,255,.66);
  --glass-light-filter:blur(24px) saturate(160%);
}

/* surfaces: flat */
body{background:var(--bg)}
.section--alt,.pagehero,.errpage{background:var(--bg-alt)}
.topbar,.ftr,.ctaband,.section--dark{background:var(--dark)}
.section--dark::before,.ctaband::before,.ftr::before{display:none}
.pagehero--media{background:var(--dark)}

/* buttons: flat blue, darker blue on hover (fill painted by ::before, hover wipe by ::after) */
.btn--primary{background:var(--accent);color:#fff;box-shadow:0 10px 24px -12px rgba(28,95,168,.6)}
.btn--primary::before{background:var(--accent)}
.btn--primary::after{background:var(--accent-dark)}
.btn--primary:hover{color:#fff;translate:0 -2px}
.btn--ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.btn--ghost::after{background:var(--ink)}
.btn--ghost:hover{color:#fff;border-color:var(--ink)}
.btn--light::before{background:#fff}
.btn--light::after{background:var(--accent)}

/* links, labels, small accents */
.link-arrow{color:var(--accent);text-decoration:none}
.eyebrow{color:var(--accent)}
.eyebrow::before{background:var(--accent)}
.ctaband .eyebrow,.section--dark .eyebrow,.pagehero--media .eyebrow{color:var(--accent-light)}
.ctaband .eyebrow::before,.section--dark .eyebrow::before,.pagehero--media .eyebrow::before{background:var(--accent-light)}
.hero .eyebrow{color:#fff}
.hero .eyebrow::before{background:#5FB0FF;box-shadow:0 0 0 4px rgba(95,176,255,.25)}
.nav__link:hover,.nav__link[aria-current="page"]{background:var(--accent-soft);color:var(--accent-dark)}
.nav__link:not(.nav__toggle)[aria-current="page"]::after{background:var(--accent)}
.section:not(.section--dark) .step__n{color:var(--accent);opacity:.35}
.steps--dark .step__n{color:var(--accent-light);opacity:1}
.callout{border-left-color:var(--accent)}
.trust__grid svg{background:var(--accent-soft);color:var(--accent)}
.topbar__link svg{fill:var(--accent-light)}
.ftr h2{color:var(--accent-light)}
:focus-visible{outline-color:var(--accent)}
.hero :focus-visible,.section--dark :focus-visible,.ctaband :focus-visible{outline-color:#8FB6D8}
.ticks li::before{background-color:var(--accent-soft);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C5FA8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}

/* cards: white, hairline border, soft shadow */
.pcard,.fcard,.step,.strip__item,.faq__item,.proj,.icard,.related,.gallery .slide,.rel,.callout{border-color:rgba(28,95,168,.12)}
.fcard,.section--alt .fcard{border-top:1px solid rgba(28,95,168,.12)}
.quote__mark{background:var(--accent)}
.fcard.quote::before{color:var(--accent);opacity:.25}

/* glass panels: flat navy tint + blur. No sheen, no gradient. */
.mega,.drawer,.pagehero--media .wrap,.ctaband .wrap,.steps--dark .step{
  background:var(--glass-dark);
  backdrop-filter:var(--glass-dark-filter);-webkit-backdrop-filter:var(--glass-dark-filter);
  border:1px solid var(--glass-dark-rim);
  box-shadow:0 30px 70px -30px rgba(3,10,25,.7),inset 0 1px 0 rgba(255,255,255,.25);
}
.mega::after,.pagehero--media .wrap::after,.ctaband .wrap::after{display:none}
.ctaband .wrap,.steps--dark .step{background:rgba(255,255,255,.06);backdrop-filter:none;-webkit-backdrop-filter:none} /* nothing to blur on flat navy */
.mega__title,.drawer .mega__title{color:#BFDDFB}
.mega a:hover{background:rgba(255,255,255,.12);color:#fff}
.trust__grid{background:var(--glass-light);backdrop-filter:var(--glass-light-filter);-webkit-backdrop-filter:var(--glass-light-filter);border:1px solid rgba(255,255,255,.75);box-shadow:var(--shadow-md)}
.hdr::before{background:rgba(255,255,255,.88)}
.hdr.is-stuck::before{background:rgba(255,255,255,.74)}

/* photo overlays: flat navy scrims */
.hero::after{background:rgba(11,27,51,.42)}
.pagehero--media::after{background:rgba(11,27,51,.3)}

/* loading skeleton: flat pulse */
.skel{background:var(--bg-line);animation:skelPulse 1.2s ease-in-out infinite alternate}
@keyframes skelPulse{from{opacity:1}to{opacity:.45}}

/* forms and controls */
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.drop{background:var(--accent-soft);border-color:rgba(28,95,168,.3)}
.carousel__bar span{background:var(--accent)}
.carousel__btn:hover:not(:disabled){background:var(--accent);border-color:var(--accent)}
.related__chips .rel:hover{color:var(--accent)}
.errpage__code{color:var(--accent);opacity:.18}
.errpage__links a:hover{background:var(--accent);border-color:var(--accent)}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink)}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .mega,.drawer,.pagehero--media .wrap{background:rgba(11,27,51,.92)}
  .trust__grid{background:#fff}
}

/* Top bar ONLY: the brighter logo navy (#002568). Lower dark sections stay on the deep navy #0B1B33.
   Top bar: logo navy, crisp white text and icons, social icons without circles (client, 26 Oct 2026). */
.topbar{background:#002568;color:#fff;border-bottom:0;font-size:.88rem;font-weight:500}
.topbar__in{min-height:44px}
.topbar a{color:#fff}
.topbar a:hover{color:#9DCBFF}
.topbar__link svg{fill:#fff;width:16px;height:16px}
.topbar__social{gap:4px}
.topbar__social a,.topbar__soon{background:none;border:0;color:#fff;width:34px;height:34px}
.topbar__social a:hover{background:rgba(255,255,255,.12);color:#fff}
.topbar__social svg{width:17px;height:17px}

/* Home hero: no glass (client, 27 Oct 2026). Flat surfaces only. */
.trust__grid{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid var(--bg-line);box-shadow:none}
.hero .eyebrow,.hero .btn--outline-light{backdrop-filter:none;-webkit-backdrop-filter:none}

/* Section labels: no leading dash (client, 27 Oct 2026). The hero pill keeps its dot. */
.eyebrow::before{display:none}
.hero .eyebrow::before{display:block}

/* Legal pages (Privacy, Terms): contents sidebar, numbered sections, contact cards (client, 28 Oct 2026). */
.legal{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start}
.legal__toc{position:sticky;top:120px;font-size:.9rem}
.legal__toc-title{font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px}
.legal__toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.legal__toc a{display:flex;gap:10px;padding:7px 0 7px 16px;margin-left:-1px;border-left:2px solid transparent;color:var(--ink-3);text-decoration:none;line-height:1.4;transition:color .2s,border-color .2s}
.legal__toc a:hover,.legal__toc a:focus-visible{color:var(--accent);border-left-color:var(--accent)}
.legal__toc a span{color:var(--accent);font-weight:600;min-width:1.5em;font-variant-numeric:tabular-nums}
.legal__body{max-width:78ch;font-size:1.06rem;line-height:1.75}
.legal__summary{background:var(--bg-alt);border-radius:var(--r-md);padding:clamp(24px,3vw,36px);margin-bottom:clamp(40px,5vw,56px)}
.legal__summary h2{font-size:clamp(1.35rem,2vw,1.65rem);margin:0}
.legal__sec{padding-block:clamp(32px,4vw,44px);border-top:1px solid var(--line);scroll-margin-top:110px}
.legal__sec:first-of-type{border-top:0;padding-top:0}
.legal__sec h2{display:flex;align-items:baseline;gap:.6em;font-size:clamp(1.5rem,2.4vw,2rem);margin:0 0 .7em}
.legal__num{font-family:var(--f-sans);font-size:.95rem;font-weight:700;color:var(--accent);flex:none}
.legal__sec h3{font-family:var(--f-sans);font-size:1.06rem;font-weight:700;color:var(--ink);margin:1.6em 0 .5em}
.legal__sec p,.legal__sec li{color:var(--ink-2)}
.legal__sec ul{padding-left:1.2em;margin:0 0 1.1em}
.legal__sec li{margin-bottom:.45em}
.legal__sec a{color:var(--accent);text-underline-offset:3px}
.legal__contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:20px}
.legal__contact a{display:block;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;color:var(--ink);text-decoration:none;transition:border-color .2s,box-shadow .2s}
.legal__contact a:hover,.legal__contact a:focus-visible{border-color:var(--accent);box-shadow:var(--shadow-sm)}
.legal__contact small{display:block;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.legal__contact strong{font-weight:600;overflow-wrap:anywhere}
@media (max-width:900px){
  .legal{grid-template-columns:1fr}
  .legal__toc{position:static;background:var(--bg-alt);border-radius:var(--r-md);padding:22px 24px}
}