@charset "UTF-8";
/* --------------------------------------------------------------------------
   TWK Everett — the brand typeface,licensed from Weltkern and served from
   assets/fonts/. Self-hosted,so the site makes no third-party font request
   at all: nothing to consent to,nothing that can go down with someone
   else's CDN. The licence forbids modifying the files,so they are served
   exactly as delivered — no subsetting,no conversion.

   The Bold face declares the 600–700 range: Weltkern ships it as weight 700,while the design system asks for 600,and this maps both to the one file
   instead of letting the browser fake a bolder cut.
   -------------------------------------------------------------------------- */
/* The Light cut is licensed and kept with the sources, but no rule on the
   site asks for weight 300, so it is not declared and not deployed. Declare
   it here again if a design ever calls for it. */
@font-face{font-family:"TWK Everett";src:url("../fonts/TWKEverett-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"TWK Everett";src:url("../fonts/TWKEverett-Medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"TWK Everett";src:url("../fonts/TWKEverett-Bold.woff2") format("woff2");
  font-weight:600 700;font-style:normal;font-display:swap}

/* ==========================================================================
   ZOOMTECH®  ·  design system
   Written from scratch against FRAMS and the approved ZOOMTECH prototype.
   Grid    — centred ~1280px column,full-bleed photography,image-led tiles.
   Colour  — the FRAMS editorial palette on the FRAMS ground #F7F6F3.
   Type    — TWK Everett,sentence-case display as in the prototype.
   ========================================================================== */

:root{
  /* — brand palette ————————————————————————————————— */
  --zero:#000000;          /* Zero Black — logo & display type   */
  --white:#FFFFFF;         /* Optical White — raised surfaces    */
  --paper:#F7F6F3;         /* FRAMS ground — the page background */
  --paper-2:#EFEDE8;       /* one shade deeper — closing band & footer */
  --grey:#B3B3B3;          /* Structural Grey                    */
  --mist:#BFC1CE;          /* 01 Cool Mist         light cool    */
  --rose:#D2CCCC;          /* 02 Rose Porcelain    light warm    */
  --taupe:#9F958B;         /* 03 Warm Taupe        neutral luxe  */
  --blue:#7184A2;          /* 04 Architectural Blue city / exter */
  --clay:#9A5244;          /* 05 Burnt Clay        accent        */
  --slate:#2E323E;         /* 06 Midnight Slate    night         */
  --deep:#22252B;          /* deepest slate — footer & statement */

  /* — functional ——————————————————————————————————— */
  --bg:var(--paper);
  --ink:#15171C;
  --muted:#5C5A56;
  --muted-dark:#B6BAC4;
  --line:#E3E1DB;
  --line-strong:#C9C6BE;
  --line-dark:#3C4050;

  /* — grid (see _layout section for the rest) ——————————— */
  --gap:clamp(18px,2vw,28px);
  --head:72px;

  --font:"TWK Everett","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ————————————————————————————————————————————— reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:1.0625rem;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
::selection{background:var(--slate);color:var(--white)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--slate);color:var(--white);padding:14px 20px;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ————————————————————————————————— image placeholders */
.ph{position:relative;overflow:hidden;background:var(--rose);isolation:isolate}
.ph img{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  transition:filter .5s var(--ease);
}
.ph::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.16),rgba(0,0,0,.10)),
    repeating-linear-gradient(90deg,rgba(0,0,0,.055) 0 1px,transparent 1px 84px);
  transition:filter .5s var(--ease);
}
.ph.has-img::before{display:none}
.ph::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.42) 100%);
  transition:background .5s var(--ease);
}
.ph .cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 20px;color:var(--white);
  font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  opacity:.75;transition:opacity .5s var(--ease);
}
.ph.has-img .cap{opacity:0}
.ph:hover::before{filter:brightness(.85)}
.ph:hover img{filter:brightness(.85)}
.ph:hover::after{background:rgba(0,0,0,.4)}
.ph:hover .cap{opacity:1}
.ph.no-cap:hover img{filter:none}
.ph.no-cap:hover::after{background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.42) 100%)}

.scene-detail img{object-position:72% 50%}
.hero-bg .scene-detail img{object-position:88% 45%}
.hero-bg .scene-engineering img{object-position:62% 22%}
/* The machine is centred in the frame; widen the picture and anchor it left
   so the machine sits clear of the headline. */
.hero-bg .scene-zoombox img{width:115%;max-width:none;left:0;right:auto;object-position:50% 46%}
/* narrower viewports: the headline runs wider relative to the frame,so the
   picture is pushed further right to keep the machine clear of the type */
@media(max-width:1500px){.hero-bg .scene-zoombox img{width:128%}}
@media(max-width:1200px){.hero-bg .scene-zoombox img{width:145%}}
@media(max-width:1000px){.hero-bg .scene-zoombox img{width:165%}}
/* phone: the headline fills the column,so the machine is dropped below it */
@media(max-width:760px){.hero-bg .scene-zoombox img{width:100%;object-position:8% 50%}}
@media(max-width:560px){.hero-bg .scene-zoombox img{object-position:30% 50%}}
.scene-vaat img{object-position:50% 56%}
.scene-hotel img{object-position:50% 42%}
.scene-rescz img{object-position:50% 45%}
.scene-terrace img{object-position:50% 50%}
.scene-bath img{object-position:50% 50%}
.scene-fitness img{object-position:55% 50%}
.scene-zipusa img{object-position:50% 50%}
.scene-workshop img{object-position:58% 50%}
.scene-facade img{object-position:50% 62%}
.scene-window{background:var(--mist)}
.scene-facade{background:var(--slate)}
.scene-detail{background:var(--deep)}
.scene-commercial{background:var(--rose)}
.scene-night{background:#1A1D26}
.scene-workshop{background:var(--grey)}
.scene-office{background:var(--mist)}
.scene-fair{background:var(--blue)}

.blind-lines::before{
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.22),rgba(0,0,0,.14)),
    repeating-linear-gradient(180deg,rgba(0,0,0,.05) 0 1px,transparent 1px 11px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 1px,transparent 1px 130px);
}
.scene-detail::before,.scene-facade::before,.scene-night::before{
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(0,0,0,.35)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 96px);
}
.scene-detail.blind-lines::before,.scene-facade.blind-lines::before,.scene-night.blind-lines::before{
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(0,0,0,.35)),
    repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 1px,transparent 1px 11px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 130px);
}
.scene-fair::before{
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.14),rgba(0,0,0,.24)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 70px);
}

/* ==========================================================================
   LAYOUT  ·  follows the approved prototype
   Near-full-width editorial grid,section rules,two-tone headlines and
   full-bleed colour bands from the FRAMS editorial palette.
   ========================================================================== */

/* ——————————————————————————————————————— the container */
.wrap,.hdr-in,.hero-inner,.page-hero .inner,.sec-rule,.sec-head,.specstrip .track,.stats .grid,.compare .cmp-cards,.tech-draw .frame-wrap,.principle .rail,.apps .tiles,.lists .cols,.lists .foot,.lists .fabstrip,.cards .grid,.models .grid,.steps .grid,.configs .rows,.serve .rows,.statement .in,.award .award-shot,.photoband .pb,.team .grid,.resources .grid,.locations .grid,.contact .inner,.quicklinks .ql,.cta-final .inner,.f-cols,.f-bottom,.err .in{
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
}

/* ————————————————————————————————————————— typography */
/* Display sizes are bounded in px,not rem,on purpose: the window-relative
   middle term already scales them,while rem bounds tied the ceiling to the
   reader’s browser font size. A larger default then pushed a headline past
   the column it sits in and added a line. Body copy keeps rem and scales. */
.display{
  font-weight:400;letter-spacing:-.03em;line-height:1.0;
  font-size:clamp(30px,4.4vw,66px);
}
h1.display{font-size:clamp(35px,6.1vw,96px);line-height:.96;letter-spacing:-.033em}
.display.d-sm{font-size:clamp(24px,2.6vw,37px);line-height:1.06;letter-spacing:-.022em}
/* A section may set its own measure and keep its highlighted phrase
   unbroken — see h2_measure() in build.py. Both are opt-in: without the
   custom property nothing changes,so one headline can be tuned without
   touching the rest of the system. */
.display em{font-style:normal;color:var(--em);white-space:var(--emwrap,normal)}
/* a line break the design asks for,dropped once the column is narrow
   enough that the text needs to find its own breaks */
.lb{display:none}
@media(min-width:900px){.lb{display:inline}}
@media(max-width:620px){.display em{white-space:normal}}
.small-caps{
  font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;color:var(--label);margin-bottom:20px;
}
/* 46ch was a short measure for 14px text and left the right column of a
   section head a sixth empty; 62ch fills it and still reads easily. */
.lede{font-size:clamp(.9375rem,1.05vw,1.0625rem);line-height:1.62;color:var(--body);max-width:62ch}
.body{font-size:.9375rem;line-height:1.65;color:var(--body);max-width:48ch;margin-top:26px}
p{max-width:62ch}
/* ® sits raised,as it does in the logo. */
sup.reg{
  font-size:.52em;line-height:0;vertical-align:.52em;letter-spacing:0;
  font-weight:inherit;margin-left:.02em;
}
.small-caps sup.reg,.sec-rule sup.reg,.pane-rule sup.reg{vertical-align:.42em;font-size:.62em}
.display sup.reg,h1 sup.reg,h2 sup.reg,h3 sup.reg{vertical-align:.56em;font-size:.44em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ————————————————————————————————— section scaffolding */
main{display:block}
section{position:relative}
main > section{padding-block:var(--rhythm)}
main > section.hero,main > section.page-hero,main > section.specstrip,main > section.panel-split{padding-block:0}

/* every section opens with the editorial rule */
.sec-rule{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  color:var(--label);padding-top:14px;margin-bottom:clamp(26px,3.4vw,52px);
  position:relative;
}
.sec-rule::before{
  content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);height:1px;background:var(--rule);
}
.sec-rule span:last-child{font-variant-numeric:tabular-nums}

.sec-head{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.75fr);
  gap:clamp(28px,5vw,90px);align-items:start;
}
/* The headline columns are query containers,so a heading can size itself
   against the column it actually sits in (cqi units) rather than against
   the window. A line that must not break can then never outgrow its
   column — whatever the window width,the zoom or the reader’s font. */
@media(min-width:900px){.sec-head .left,.split .txt{container-type:inline-size}}
.sec-head .left .display{max-width:16ch}
.sec-head .left .display[style*="--h2w"],.sec-head.wide .left .display[style*="--h2w"],.split .txt .display[style*="--h2w"],.split.wide .txt .display[style*="--h2w"],.panel-split h2[style*="--h2w"],.hero h1[style*="--h2w"],.page-hero h1[style*="--h2w"],.cta-final h2[style*="--h2w"]{max-width:var(--h2w)}
.display[style*="--h2fs"]{font-size:var(--h2fs)}
/* the ZOOMTECH card answers the standard-solution card beside it,and
   reads better on three short lines than on two long ones */
.compare .card.zt h3{max-width:11ch}

/* a long headline that would otherwise stack into three short lines */
.sec-head.wide{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.sec-head.wide .left .display{max-width:24ch}
@media(max-width:900px){.sec-head.wide{grid-template-columns:1fr}}
.sec-head .right{padding-top:clamp(6px,1.4vw,24px)}
/* The call to action now sits inside the section head’s left column,which is already inside the page container — a second helping of the
   outer padding would indent it past the headline it belongs to. */
.cta-row{margin-top:clamp(28px,3.4vw,44px)}
.tech-draw .cta-row{width:100%;max-width:none;margin-inline:0;padding-inline:0}
@media(max-width:900px){
  .sec-head{grid-template-columns:1fr;gap:26px}
  .sec-head .right{padding-top:0}
}

/* ——————————————————————————————————————— colour bands */
:root{
  --em:var(--blue);
  --label:#6E6B66;
  --body:#4B4945;
  --rule:#CFCCC4;
  --maxw:1680px;
  --pad:clamp(20px,4vw,56px);
  --rhythm:clamp(44px,6.5vh,84px);
}
.band-slate{background:var(--slate);color:var(--white);--em:var(--rose);--label:rgba(255,255,255,.6);--body:rgba(255,255,255,.8);--rule:rgba(255,255,255,.22)}
/* The closing band: one shade off the page ground,so the page ends calmly
   and runs into the footer without a hard edge. */
.band-soft{background:var(--paper-2);--em:var(--taupe);--label:#7A766F;--body:#4B4945;--rule:rgba(21,23,28,.16)}

/* ————————————————————————————————————————————— links */
.btn{
  display:inline-flex;align-items:center;justify-content:space-between;gap:34px;
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  padding:17px 22px;border:1px solid currentColor;color:inherit;min-width:clamp(200px,20vw,260px);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.btn .arr{font-size:1.1em;line-height:1;transition:transform .35s var(--ease)}
.btn:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}
.btn:hover .arr{transform:translate(3px,-3px)}
.btn.solid{background:var(--white);color:var(--ink);border-color:var(--white)}
.btn.solid:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}
.btn.ondark{border-color:rgba(255,255,255,.5);color:var(--white)}
.btn.ondark:hover{background:var(--white);color:var(--ink);border-color:var(--white)}
.hero-cta{display:flex;flex-wrap:wrap;gap:0}
.hero-cta .btn + .btn{margin-left:-1px}
@media(max-width:520px){.hero-cta{flex-direction:column;gap:0}.hero-cta .btn+.btn{margin-left:0;margin-top:-1px}}

.tlink{
  display:inline-flex;align-items:center;justify-content:space-between;gap:44px;
  font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  padding-bottom:12px;border-bottom:1px solid currentColor;color:inherit;min-width:220px;
  transition:opacity .3s var(--ease);
}
.tlink .arr{transition:transform .35s var(--ease)}
.tlink:hover .arr{transform:translate(3px,-3px)}

/* ————————————————————————————————————————————— header */
header{
  position:fixed;inset:0 0 auto 0;z-index:100;background:var(--paper);
  border-bottom:1px solid var(--rule);color:var(--ink);
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease);
}
body{padding-top:var(--head)}
body.dark-top{padding-top:0}
body.dark-top header{background:transparent;border-bottom-color:transparent;color:var(--white)}
body.dark-top header .logo{color:var(--white)}
body.dark-top header.stuck{background:var(--paper);border-bottom-color:var(--rule);color:var(--ink)}
body.dark-top header.stuck .logo{color:var(--ink)}
.hdr-in{height:var(--head);display:flex;align-items:center;gap:var(--gap)}
.logo{display:block;flex:none;color:var(--ink)}
.logo .mark{width:clamp(118px,10vw,146px);height:auto;display:block}

/* Logo left,navigation right — the meta slot is empty in the single-language build. */
nav.main{display:flex;align-items:center;gap:clamp(14px,2vw,34px);margin-left:auto}
nav.main .item{position:relative}
nav.main .top{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  padding:22px 0;color:inherit;transition:color .3s var(--ease);
}
nav.main .top:hover{color:var(--grey)}
nav.main .top.active{position:relative}
nav.main .top.active::after{content:"";position:absolute;left:0;right:0;bottom:16px;height:1px;background:currentColor}
nav.main .chev{font-size:.5em;opacity:.55;transition:transform .3s var(--ease)}
nav.main .item:hover .chev{transform:rotate(180deg)}
.submenu{
  position:absolute;top:100%;left:50%;transform:translate(-50%,-6px);min-width:290px;
  background:var(--paper);border:1px solid var(--rule);padding:10px 0;
  opacity:0;visibility:hidden;transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
  box-shadow:0 26px 52px rgba(0,0,0,.08);
}
nav.main .item:hover .submenu,nav.main .item:focus-within .submenu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.submenu a{display:block;padding:11px 22px;font-size:.8125rem;color:var(--body);transition:color .25s var(--ease)}
.submenu a:hover{color:var(--ink)}

.nav-meta{display:flex;align-items:center;gap:16px;flex:none}
.burger{display:none;width:28px;height:14px;position:relative;flex:none}
.burger span{position:absolute;left:0;right:0;height:1px;background:currentColor;transition:transform .35s var(--ease),opacity .25s var(--ease)}
.burger span:nth-child(1){top:0}.burger span:nth-child(2){top:6px}.burger span:nth-child(3){top:12px}
body.nav-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ————————————————————————————————————————— home hero */
.hero,.page-hero{position:relative;background:var(--slate);color:var(--white);overflow:hidden}
.hero{min-height:clamp(660px,94vh,1040px);display:flex;align-items:flex-end}
.page-hero{min-height:clamp(540px,78vh,860px);display:flex;align-items:flex-end}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg .ph{position:absolute;inset:0;height:100%}
/* Two scrims: a vertical one for the header and foot,and a left wash that
   keeps the headline legible without dulling the photograph on the right. */
.hero-bg .ph::after{
  background:
    linear-gradient(100deg,rgba(18,20,25,.72) 0%,rgba(18,20,25,.5) 26%,rgba(18,20,25,.14) 56%,rgba(18,20,25,0) 76%),
    linear-gradient(180deg,rgba(18,20,25,.52) 0%,rgba(18,20,25,.16) 40%,rgba(18,20,25,.74) 100%);
}
.hero-bg .ph:hover::before,.hero-bg .ph:hover img{filter:none}
.hero-bg .ph .cap{display:none}
.hero-inner,.page-hero .inner{
  position:relative;z-index:2;
  padding-top:calc(var(--head) + clamp(40px,8vh,96px));padding-bottom:clamp(56px,9vh,104px);
}
.hero-tags{
  display:flex;gap:clamp(24px,14vw,220px);
  font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  color:rgba(255,255,255,.86);margin-bottom:clamp(26px,5vh,64px);
}
.hero h1,.page-hero h1{color:var(--white);max-width:13ch;text-shadow:0 2px 40px rgba(16,18,22,.32)}
.hero h1 em,.page-hero h1 em{color:rgba(255,255,255,.84)}
.hero-foot{
  display:flex;flex-wrap:wrap;align-items:flex-end;
  gap:clamp(22px,6vw,110px);margin-top:clamp(30px,5vh,62px);
}
/* Homepage cover: explanatory copy above,buttons beneath it — as in the prototype. */
.hero .hero-foot{display:block;margin-top:clamp(26px,4vh,48px)}
.hero .hero-cta{margin-top:clamp(26px,3.4vh,42px)}
.hero-copy .lede{color:var(--white);max-width:46ch;font-size:clamp(1.0625rem,1.35vw,1.375rem);line-height:1.45}
.hero-copy .sub{font-size:clamp(.875rem,.95vw,1rem);line-height:1.55;color:rgba(255,255,255,.84);margin-top:12px;max-width:54ch}
.page-hero .hero-copy .lede{font-size:clamp(1rem,1.2vw,1.25rem)}
.hero-mark{
  position:absolute;right:max(var(--pad),calc((100vw - var(--maxw))/2 + var(--pad)));bottom:clamp(22px,3.4vh,36px);z-index:2;
  font-size:.5625rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.76);
  white-space:nowrap;max-width:none;
}
.page-hero .crumb{font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:16px}
.page-hero.light{background:var(--paper);color:var(--ink);min-height:0;border-bottom:1px solid var(--rule)}
.page-hero.light h1{color:var(--ink);text-shadow:none}
.page-hero.light h1 em{color:var(--em)}
.page-hero.light .hero-tags,.page-hero.light .crumb{color:var(--label)}
.page-hero.light .hero-copy .lede{color:var(--body)}
@media(max-width:900px){.hero-mark{display:none}}

/* The R+T seal on the cover. It sits on the photograph with nothing behind
   it: R+T's own grey border is its edge,so no card,no padding,no white
   showing past it.

   On a phone it stands beside the two paragraphs,which give way to it,so
   the seal belongs to the text block instead of trailing after the buttons;
   the buttons keep the full width their labels need. From 900px up it moves
   to the far corner,opposite the text,above the key-figure line. */
.hero-award{position:absolute;z-index:2;right:0;top:0}
.hero-award img{display:block;height:auto;width:clamp(96px,8.2vw,122px)}
@media(max-width:899px){
  .hero .hero-foot{position:relative}
  .hero .hero-copy{width:62%}
  .hero-award img{width:clamp(86px,23vw,104px)}
}
@media(min-width:900px){
  .hero-award{right:var(--pad);top:auto;bottom:clamp(54px,6.6vh,82px)}
}

/* ————————————————————————————————————————— spec strip */
.specstrip{background:var(--paper);border-bottom:1px solid var(--rule)}
.specstrip .track{
  padding-block:clamp(26px,3.4vw,44px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);
}
.specstrip .sp{display:flex;align-items:center;justify-content:space-between;gap:14px;
  border-left:1px solid var(--rule);padding-left:24px}
.specstrip .sp .v{display:flex;flex-direction:column;gap:9px}
.specstrip .sp:first-child{border-left:0;padding-left:0}
.specstrip b{font-size:clamp(1.5rem,2.6vw,2.3rem);font-weight:400;letter-spacing:-.02em;line-height:1}
.specstrip .l{font-size:.5625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--label)}
/* the award seal sits beside its figure */
.specstrip .sp-seal{flex:none;width:clamp(42px,4.2vw,64px);height:auto;display:block}
/* a strip under a page hero closes the hero,so it needs its top rule too */
.page-hero + .specstrip .track{border-top:1px solid var(--rule)}
@media(max-width:760px){
  .specstrip .track{grid-template-columns:repeat(2,1fr);gap:24px}
  .specstrip .sp:nth-child(3){border-left:0;padding-left:0}
}

/* ———————————————————————— numbered lists (right columns) */
.num-list{display:flex;flex-direction:column}
.num-list li{
  display:grid;grid-template-columns:14px minmax(0,1fr);gap:16px;align-items:baseline;
  padding:9px 0;
}
.num-list li::before{content:"";width:5px;height:5px;background:var(--taupe);
  align-self:start;margin-top:.55em}
.num-list .n{font-size:.5625rem;letter-spacing:.16em;color:var(--label);font-variant-numeric:tabular-nums}
.num-list .t{font-size:.9375rem;line-height:1.4}
.num-list .t em{display:block;font-style:normal;font-size:.8125rem;color:var(--body);margin-top:5px}
.num-list.big .t{font-size:clamp(1rem,1.35vw,1.25rem)}

/* ————————————————————————————————————————————— split */
/* Text and photograph share one height: the section rule sits on the
   photo's top edge and the last paragraph ends on its bottom edge. The
   photo stretches to the text (never shorter than min-height),and the
   paragraphs run the full column width instead of a narrow measure. */
.split .inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);align-items:stretch;gap:0}
.split .media{order:2;display:flex}
.split .media .ph{flex:1;width:100%;min-height:clamp(300px,28vw,460px)}
.split .txt{order:1;padding-left:max(var(--pad),calc((100vw - var(--maxw))/2 + var(--pad)));padding-right:clamp(28px,5vw,90px)}
.split.rev .media{order:1}
.split.rev .txt{order:2;padding-right:max(var(--pad),calc((100vw - var(--maxw))/2 + var(--pad)));padding-left:clamp(28px,5vw,90px)}
.split .txt .sec-rule{margin-bottom:clamp(22px,2.8vw,40px);padding-inline:0}
.split .txt .sec-rule::before{left:0;right:0}
.split .txt p{color:var(--body);font-size:.9375rem;margin-top:clamp(16px,1.6vw,22px);max-width:64ch}
.split .txt .tlink{margin-top:clamp(26px,3vw,38px)}
@media(max-width:900px){
  .split .inner{grid-template-columns:1fr}
  .split .media,.split.rev .media{order:1}
  .split .txt,.split.rev .txt{order:2;padding:clamp(30px,6vw,48px) var(--pad) 0;max-width:var(--maxw);margin-inline:auto}
  .split .media .ph{flex:none;aspect-ratio:16/9;min-height:0}
}

/* ————————————————— full-width proof photograph with captions */
.proof-band{margin:clamp(26px,3.4vw,48px) 0 0;position:relative}
.proof-band .ph{width:100%;aspect-ratio:2/1;min-height:280px}
.proof-band.inset{
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
}
.proof-band.inset .ph{aspect-ratio:16/9}
.proof-band figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;justify-content:space-between;gap:20px;
  padding:20px clamp(22px,3vw,38px);color:var(--white);
  font-size:.5625rem;letter-spacing:.18em;text-transform:uppercase;
}
.proof-band.inset figcaption{padding-inline:calc(var(--pad) + clamp(18px,2.4vw,34px))}
.split.wide .inner{grid-template-columns:1fr;display:block}
.split.wide .cols{
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,90px);
  align-items:start;
}
.split.wide .txt{padding:0;max-width:none;width:100%;order:0}
.split.wide .txt .display{max-width:18ch}
/* The picture no longer stretches to fill the row: it keeps its own shape,so no empty column is left under the short paragraph beside it. */
.split.wide .aside{order:1;align-self:start;display:flex}
.split.wide .aside .ph{width:100%;height:auto;min-height:0;aspect-ratio:16/10}
@media(max-width:900px){
  .split.wide .cols{grid-template-columns:1fr;gap:clamp(28px,5vw,44px)}
  .split.wide .aside .ph{min-height:0;aspect-ratio:3/2}
}
@media(max-width:700px){.proof-band .ph{aspect-ratio:3/2}}

/* —————————————————————— colour panel + photograph,50/50 */
.panel-split{display:grid;grid-template-columns:1fr 1fr;background:var(--slate);color:var(--white)}
.panel-split .pane{display:flex;align-items:center;--em:var(--rose);--label:rgba(255,255,255,.6);--body:rgba(255,255,255,.78);--rule:rgba(255,255,255,.22)}
.panel-split .pane-in{
  padding:clamp(40px,5.4vw,84px) clamp(30px,5vw,90px) clamp(40px,5.4vw,84px)
          max(var(--pad),calc((100vw - var(--maxw))/2 + var(--pad)));
}
/* The pane carries its own label/number rule — the section is full-bleed,so it cannot use the page-wide .sec-rule hairline. */
.panel-split .pane-rule{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  color:var(--label);border-top:1px solid var(--rule);padding-top:14px;
  margin-bottom:clamp(30px,4vw,54px);max-width:none;
}
.panel-split .pane-rule span:last-child{font-variant-numeric:tabular-nums}
.panel-split h2{color:var(--white);max-width:11ch}
.panel-split h2 em{color:rgba(255,255,255,.5)}
.panel-split p{color:rgba(255,255,255,.78);font-size:.9375rem;margin-top:24px;max-width:44ch}
.panel-split .tlink{margin-top:34px;color:var(--white)}
.panel-split .shot{position:relative;min-height:clamp(360px,52vw,760px)}
.panel-split .shot .ph{position:absolute;inset:0;height:100%}
@media(max-width:900px){
  .panel-split{grid-template-columns:1fr}
  .panel-split .shot{min-height:56vw}
  .panel-split .pane-in{padding:clamp(44px,9vw,70px) var(--pad)}
}

/* ——————————————————————————————————————————— compare */
/* The proof band ends section 01 flush,so the comparison opens tight beneath it. */
.split.wide{padding-bottom:0}
.compare{padding-top:clamp(32px,4.5vh,60px)}
.compare .sec-rule{margin-bottom:clamp(26px,3vw,44px)}
.compare .cmp-head{
  width:100%;max-width:var(--maxw);margin:0 auto clamp(30px,3.6vw,54px);padding-inline:var(--pad);
}
.compare .cmp-claim{
  font-size:clamp(1.375rem,2.3vw,2.05rem);line-height:1.12;letter-spacing:-.02em;
  font-weight:400;color:var(--ink);max-width:42ch;text-wrap:balance;
}
/* Three shared rows — label,headline,list — so both cards line up exactly. */
.compare .cmp-cards{
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;
  gap:clamp(16px,2vw,28px);align-items:stretch;
}
.compare .cmp-cards .card{
  padding:clamp(38px,4.2vw,64px) clamp(34px,3.6vw,58px);
  display:flex;flex-direction:column;border:0;overflow:visible;
}
@supports(grid-template-rows:subgrid){
  .compare .cmp-cards .card{
    display:grid;grid-row:span 3;grid-template-rows:subgrid;
    row-gap:0;align-content:start;
  }
}
.compare .cmp-cards .card.std{background:var(--taupe);--label:rgba(21,23,28,.62);--body:rgba(21,23,28,.8);--rule:rgba(21,23,28,.26)}
.compare .cmp-cards .card.zt{background:var(--slate);color:var(--white);--label:rgba(255,255,255,.68);--body:rgba(255,255,255,.8);--rule:rgba(255,255,255,.22)}
.compare .cmp-cards .card .small-caps{color:var(--label)}
.compare .card h3{max-width:13ch;margin-bottom:clamp(30px,4vw,52px);align-self:end}
.compare .card.zt h3{color:var(--white)}
.compare ul{display:flex;flex-direction:column;margin-top:auto;align-self:stretch}
@supports(grid-template-rows:subgrid){.compare ul{margin-top:0}}
.compare li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;align-items:baseline;
  padding:11px 0;font-size:.9375rem}
.compare li::before{content:"\00D7";color:rgba(21,23,28,.55)}
.compare .card.zt li::before{content:"\2713";color:var(--rose)}
.compare li.foot{font-size:.8125rem;opacity:.75}
@media(max-width:820px){.compare .cmp-cards{grid-template-columns:1fr}}

/* —————————————————————————————————— technical drawing */
.tech-draw .frame-wrap{margin-top:clamp(26px,3.2vw,46px)}
/* photo of the real components beside the drawing */
.tech-draw .frame-wrap.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(14px,1.6vw,24px);align-items:stretch}
.tech-draw .pair .shot{display:flex}
.tech-draw .pair .shot .ph{flex:1;min-height:300px}
.tech-draw .pair .frame{display:flex;flex-direction:column;justify-content:center}
.tech-draw .frame-wrap.pair:has(.schem){grid-template-columns:minmax(0,1fr) minmax(0,1.9fr)}
.tech-draw .frame.schem{justify-content:space-between;gap:clamp(24px,3vw,40px);background:transparent}
.tech-draw .frame.schem .schematic{display:block;width:100%;height:auto;margin-block:auto}
@media(max-width:900px){.tech-draw .frame-wrap.pair{grid-template-columns:1fr}.tech-draw .pair .shot .ph{aspect-ratio:3/2;min-height:0;flex:none;width:100%}}
.tech-draw .frame{border:1px solid rgba(21,23,28,.22);background:rgba(255,255,255,.5);padding:clamp(18px,2.4vw,34px)}
.tech-draw .dwg-meta{display:flex;justify-content:space-between;gap:16px;margin-bottom:18px;
  font-size:.5625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--label)}
.tech-draw svg{width:100%;height:auto}

/* ———————————————————————————————————— principle rail */
/* Section 01 on Technology follows the spec strip directly — no second
   rule. A small label sits over the heading; the award badge fills the
   right column. */
.stats:has(+ .principle){padding-bottom:0}
.stats + .principle{padding-top:clamp(32px,3.6vw,52px)}
.principle .sec-head{grid-template-columns:1fr}
.principle .sec-head .right{display:none}
.principle .sec-head .left .display{max-width:none}
.principle .sec-head .sec-tag{display:flex;gap:14px;align-items:baseline;max-width:none;margin-bottom:clamp(14px,1.6vw,22px);
  font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--label)}
.principle .sec-tag .no{color:var(--ink);font-variant-numeric:tabular-nums}
.principle .rail{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);margin-top:clamp(26px,3.2vw,46px)}
.principle .p{padding:clamp(26px,3vw,40px) clamp(18px,2vw,30px) clamp(30px,3.4vw,46px);border-left:1px solid var(--rule)}
.principle .p:first-child{border-left:0;padding-left:0}
.principle .n{display:block;font-size:.625rem;letter-spacing:.24em;color:var(--clay);margin-bottom:22px;font-weight:500}
.principle h3{font-size:1.0625rem;font-weight:500;margin-bottom:12px}
.principle p{font-size:.875rem;color:var(--body)}
@media(max-width:820px){.principle .rail{grid-template-columns:1fr 1fr}.principle .p:nth-child(3){border-left:0;padding-left:0}}
@media(max-width:560px){.principle .rail{grid-template-columns:1fr}.principle .p{border-left:0;padding-left:0;border-top:1px solid var(--rule)}.principle .p:first-child{border-top:0}}

/* ——————————————————— use-case tiles in colour mats */
.apps .tiles{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(22px,2.6vw,40px) var(--gap);margin-top:clamp(26px,3.2vw,46px);
}
.apps .tile{grid-column:span 6}
.apps .tile:nth-child(1){grid-column:1/span 6}
.apps .tile:nth-child(2){grid-column:7/span 6;margin-top:clamp(14px,2.6vw,44px)}
.apps .tile:nth-child(3){grid-column:1/span 6}
.apps .tile:nth-child(4){grid-column:7/span 6;margin-top:clamp(14px,2.6vw,44px)}
.apps .tile:nth-child(5){grid-column:1/-1}
/* three tiles: the last one runs the full width instead of leaving a gap */
.apps .tiles:has(> .tile:nth-child(3):last-child) .tile:nth-child(3){grid-column:1/-1}
.apps .tiles:has(> .tile:nth-child(3):last-child) .tile:nth-child(3) .ph{aspect-ratio:2/1}
/* six references: three staggered pairs,no odd full-width tile at the end */
.apps .tiles:has(> .tile:nth-child(6)) .tile:nth-child(5){grid-column:1/span 6}
.apps .tiles:has(> .tile:nth-child(6)) .tile:nth-child(6){grid-column:7/span 6;margin-top:clamp(14px,2.6vw,44px)}
.apps .tiles:has(> .tile:nth-child(6)) .tile:nth-child(5) .ph{aspect-ratio:4/3}
/* No coloured mats — the photographs carry these tiles on their own. */
.apps .mat{background:transparent;height:100%;display:flex;flex-direction:column}
.apps .tile .ph{width:100%;aspect-ratio:4/3}
.apps .tile:nth-child(2) .ph{aspect-ratio:4/3}
.apps .tile:nth-child(5) .ph{aspect-ratio:21/8}
.apps .tile:nth-child(3) .ph{aspect-ratio:4/3}
.apps .meta{padding-top:18px}
.apps .meta h3{font-size:clamp(1.0625rem,1.5vw,1.35rem);font-weight:400;letter-spacing:-.012em;line-height:1.2}
.apps .meta p{font-size:.8125rem;margin-top:8px;color:var(--body);max-width:44ch}
/* One tile per row below 820px. The :has() rules above place the fifth and
   sixth tiles on column 7,and they out-specify a plain .tile selector,so
   the reset has to match their weight — otherwise those two tiles ask for a
   column that no longer exists and the page grows a horizontal scrollbar. */
@media(max-width:820px){
  .apps .tiles{grid-template-columns:1fr;gap:clamp(30px,7vw,54px)}
  .apps .tiles:has(> .tile:nth-child(6)) .tile:nth-child(n),
  .apps .tiles:has(> .tile:nth-child(3):last-child) .tile:nth-child(n),
  .apps .tile:nth-child(n){grid-column:1/-1;margin-top:0}
  .apps .tiles:has(> .tile:nth-child(6)) .tile:nth-child(n) .ph,
  .apps .tile:nth-child(n) .ph{aspect-ratio:4/3}
}

/* ————————————————————————————————————————————— lists */
.lists .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
  border-top:1px solid var(--rule);margin-top:clamp(26px,3.2vw,46px)}
.lists .box{padding:clamp(26px,3vw,42px) clamp(20px,2.2vw,38px) clamp(30px,3.4vw,48px);border-left:1px solid var(--rule)}
.lists .box:first-child{border-left:0;padding-left:0}
/* the columns already sit inside the section's own bottom padding — their
   own padding on top of it left a 120px void before the next section */
.lists .cols:last-child .box{padding-bottom:0}
.lists .box p{font-size:.9375rem;color:var(--body);margin-top:16px}
.lists .box ul{margin-top:22px;display:flex;flex-direction:column}
.lists .box li{padding:8px 0;font-size:.875rem;color:var(--body);display:flex;gap:12px}
.lists .box li::before{content:"";flex:none;width:5px;height:5px;background:var(--clay);margin-top:9px}
.lists .box li:first-child{padding-top:0}
.lists .col-cta{margin-top:28px}
.lists .foot{margin-top:clamp(30px,4vw,50px)}
.lists.band-slate .box li::before{background:var(--rose)}
/* the picture takes the leftover space,not half the row: the text column
   keeps the width it had before the photograph was added */
.lists .cols:has(> .side-shot){grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
/* the picture fills the column,so its foot lands level with the last line
   of the text beside it; cropping,when needed,comes off the bottom */
.lists .box.side-shot{display:flex}
.lists .box.side-shot .ph{flex:1;width:100%;min-height:clamp(170px,16vw,240px)}
.lists .box.side-shot .ph img{object-position:50% 0}
@media(max-width:760px){.lists .cols:has(> .side-shot){grid-template-columns:1fr}}

@media(max-width:760px){.lists .box{border-left:0;padding-left:0;border-top:1px solid var(--rule)}.lists .box:first-child{border-top:0}}

/* three fabrics,three characters: screen,dim-out,translucent at scale */
.lists .fabstrip{margin-top:clamp(30px,3.6vw,52px);display:grid;gap:clamp(10px,1vw,18px);
  grid-template-columns:repeat(3,1fr)}
.lists .fabstrip:has(.ph:only-child){grid-template-columns:1fr}
.lists .fabstrip .ph:only-child{aspect-ratio:21/9}
/* a pair: two equal halves rather than two thirds of a three-up row */
.lists .fabstrip:has(.ph:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
.lists .fabstrip:has(.ph:nth-child(2):last-child) .ph{aspect-ratio:var(--strip-ar,3/2)}
.lists .fabstrip .ph{aspect-ratio:4/5}
@media(max-width:760px){
  .lists .fabstrip{grid-template-columns:repeat(2,1fr)}
  .lists .fabstrip .ph:first-child{grid-column:1/-1;aspect-ratio:16/10}
}

/* ————————————————————————————————————————————— cards */
.cards .grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);margin-top:clamp(26px,3.2vw,46px)}
.cards .card{position:relative;overflow:hidden;padding:clamp(26px,3vw,40px) clamp(20px,2.2vw,32px) clamp(32px,3.8vw,50px);
  border-left:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.cards .card:nth-child(3n+1){border-left:0;padding-left:0}
/* four categories sit in one row rather than 3 + 1 */
.cards .grid:has(> .card:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
.cards .grid:has(> .card:nth-child(4):last-child) .card:nth-child(3n+1){border-left:1px solid var(--rule);padding-left:clamp(20px,2.2vw,32px)}
.cards .grid:has(> .card:nth-child(4):last-child) .card:first-child{border-left:0;padding-left:0}
.cards .card::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--clay);transition:width .55s var(--ease)}
.cards .card:hover::after{width:100%}
.cards .n{display:block;font-size:.625rem;letter-spacing:.24em;color:var(--label);margin-bottom:20px;font-weight:500}
.cards h3{font-size:1.125rem;font-weight:500;letter-spacing:-.01em;line-height:1.3;max-width:24ch}
.cards p{font-size:.875rem;color:var(--body);margin-top:13px}
@media(max-width:1100px){.cards .grid:has(> .card:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards .grid:has(> .card:nth-child(4):last-child) .card:nth-child(2n+1){border-left:0;padding-left:0}
  .cards .grid:has(> .card:nth-child(4):last-child) .card:nth-child(2n){border-left:1px solid var(--rule);padding-left:clamp(20px,2.2vw,32px)}}
@media(max-width:900px){.cards .grid{grid-template-columns:repeat(2,1fr)}
  .cards .card:nth-child(3n+1){border-left:1px solid var(--rule);padding-left:clamp(20px,2.2vw,32px)}
  .cards .card:nth-child(2n+1){border-left:0;padding-left:0}}
@media(max-width:600px){.cards .grid{grid-template-columns:1fr}.cards .card{border-left:0 !important;padding-left:0 !important}}

/* ———————————————————————————————— cooperation models */
.models .grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-top:clamp(26px,3.2vw,46px)}
.models .model{border:1px solid var(--rule);padding:clamp(28px,3.4vw,48px);position:relative;overflow:hidden;display:flex;flex-direction:column}
.models .model::after{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--clay);transition:width .6s var(--ease)}
.models .model:hover::after{width:100%}
.models .tag{display:inline-block;font-size:.5625rem;letter-spacing:.24em;text-transform:uppercase;color:var(--clay);font-weight:500;margin-bottom:22px}
.models h3{font-size:clamp(1.3rem,2vw,1.75rem);font-weight:400;letter-spacing:-.02em;line-height:1.15}
.models .model > p{font-size:.9375rem;color:var(--body);margin-top:18px}
.models ul{margin:26px 0 32px;display:flex;flex-direction:column}
.models li{padding:12px 0;border-top:1px solid var(--rule);font-size:.875rem;color:var(--body)}
.models .tlink{margin-top:auto;align-self:flex-start}
@media(max-width:820px){.models .grid{grid-template-columns:1fr}}

/* ————————————————————————————————————————————— steps */
.steps .grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);margin-top:clamp(26px,3.2vw,46px)}
.steps .step{padding:clamp(26px,3vw,40px) clamp(18px,2vw,30px) clamp(30px,3.6vw,48px);border-left:1px solid var(--rule)}
.steps .step:first-child{border-left:0;padding-left:0}
/* five steps plus a photograph: two even rows of three */
.steps.has-shot .grid{grid-template-columns:repeat(3,1fr)}
.steps.has-shot .step{border-left:1px solid var(--rule)}
.steps.has-shot .step:nth-child(3n+1){border-left:0;padding-left:0}
.steps.has-shot .step:nth-child(n+4){border-top:1px solid var(--rule)}
.steps .step.shot{display:flex;padding-bottom:clamp(26px,3vw,40px)}
.steps .step.shot .ph{flex:1;width:100%;min-height:clamp(170px,16vw,240px)}
@media(max-width:900px){
  .steps.has-shot .grid{grid-template-columns:repeat(2,1fr)}
  .steps.has-shot .step{border-left:1px solid var(--rule)}
  .steps.has-shot .step:nth-child(3n+1){border-left:1px solid var(--rule);padding-left:clamp(18px,2vw,30px)}
  .steps.has-shot .step:nth-child(2n+1){border-left:0;padding-left:0}
  .steps.has-shot .step:nth-child(n+3){border-top:1px solid var(--rule)}
}
@media(max-width:620px){
  .steps.has-shot .grid{grid-template-columns:1fr}
  .steps.has-shot .step,.steps.has-shot .step:nth-child(3n+1){border-left:0;padding-left:0}
  .steps.has-shot .step:nth-child(n+2){border-top:1px solid var(--rule)}
}
.steps .n{display:block;font-size:clamp(1.4rem,2.2vw,2rem);line-height:1;color:var(--rule);margin-bottom:24px}
.steps h3{font-size:1.0625rem;font-weight:500;margin-bottom:12px}
.steps p{font-size:.875rem;color:var(--body)}
@media(max-width:900px){.steps .grid{grid-template-columns:1fr 1fr}.steps .step:nth-child(3){border-left:0;padding-left:0}}
@media(max-width:560px){.steps .grid{grid-template-columns:1fr}.steps .step{border-left:0;padding-left:0;border-top:1px solid var(--rule)}.steps .step:first-child{border-top:0}}

/* ——————————————————————————————— configuration table */
.configs .rows{margin-top:clamp(26px,3.2vw,46px)}
/* table beside a photograph of a wide blind */
.configs .cfg-body{width:100%;max-width:var(--maxw);margin:clamp(26px,3.2vw,46px) auto 0;padding-inline:var(--pad);
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,3.4vw,60px);align-items:stretch}
.configs .cfg-body .rows{margin-top:0;padding-inline:0;max-width:none;align-self:center}
/* The photo shares the table's height exactly — its top on the table's top
   rule,its bottom on the last rule. The column is kept narrow so the frame
   stays close to the photograph's own near-square proportion. */
.configs .cfg-body{grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);align-items:stretch}
.configs .cfg-body .rows{align-self:stretch}
.configs .cfg-body .shot{display:flex}
.configs .cfg-body .ph{flex:1;width:100%;min-height:0}
.configs .cfg-body .ph img{object-position:50% 35%}
@media(max-width:900px){.configs .cfg-body{grid-template-columns:1fr}.configs .cfg-body .ph{aspect-ratio:4/3;min-height:0;flex:none;width:100%}}
.configs .row{display:grid;grid-template-columns:56px minmax(0,1.3fr) minmax(0,1.2fr) minmax(0,.9fr);
  gap:var(--gap);align-items:baseline;padding:clamp(18px,2.2vw,28px) 0;border-top:1px solid var(--rule)}
.configs .row:last-child{border-bottom:1px solid var(--rule)}
.configs .n{font-size:.5625rem;letter-spacing:.18em;color:var(--label)}
.configs h3{font-size:clamp(1.05rem,1.5vw,1.35rem);font-weight:400;letter-spacing:-.014em}
.configs .row p{font-size:.875rem;color:var(--body)}
.configs .val{font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);justify-self:end;font-weight:500}
@media(max-width:760px){.configs .row{grid-template-columns:44px 1fr;row-gap:8px}
  .configs .val,.configs .row p{grid-column:2;justify-self:start}}

/* ——————————————————————— audience rows (find your solution) */
.serve .rows{margin-top:clamp(26px,3.2vw,46px)}
.serve .row{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) 40px;
  gap:clamp(20px,3vw,50px);align-items:start;
  padding:clamp(22px,2.6vw,36px) clamp(16px,2vw,30px);
  margin-inline:calc(-1 * clamp(16px,2vw,30px));
  border-top:1px solid var(--rule);
  transition:background .4s var(--ease),color .4s var(--ease);
}
.serve .row:last-child{border-bottom:1px solid var(--rule)}
.serve .row:hover{background:var(--paper-2)}
.serve .row:hover p{color:rgba(21,23,28,.78)}
/* two lines per audience: the longest of the three names needs 14ch,and a third line under it put that row out of step with the others */
.serve h3{font-size:clamp(20px,2.3vw,33px);font-weight:400;letter-spacing:-.028em;line-height:1.05;max-width:14ch}
.serve .row p{font-size:.9375rem;color:var(--body);max-width:52ch;padding-top:.4em}
.serve .go{font-size:1.25rem;justify-self:end;padding-top:.2em;transition:transform .35s var(--ease)}
.serve .row:hover .go{transform:translate(4px,-4px)}
@media(max-width:900px){
  .serve .row{grid-template-columns:1fr;row-gap:14px}
  .serve .go{justify-self:start}
}

/* ————————————————————————————————————————— statement */
.statement .big{max-width:22ch;font-size:clamp(22px,3vw,43px)}
/* with a photograph: the words on the left,the work on the right.
   The 22ch measure is meant for a short line; beside a picture the
   sentence may use the whole half-column. */
.statement.has-shot .in{display:grid;grid-template-columns:1.05fr 1fr;gap:var(--gap);align-items:center}
.statement.has-shot .big{max-width:30ch}
/* A whole paragraph rather than a slogan. The 22ch measure would stack it
   into a narrow tower down the left edge,so it runs wide across the band
   at a quieter display size — three lines that fill the full column. */
.statement.has-shot .st-shot .ph{aspect-ratio:3/2}
@media(max-width:900px){
  .statement.has-shot .in{grid-template-columns:1fr}
  .statement.has-shot .big{max-width:22ch}
}
.statement .src{margin-top:clamp(24px,3vw,36px);font-size:.5625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--label)}

/* —————————————————————————————————————————— timeline */
/* A plain horizontal axis that scrolls sideways: one hairline the length
   of the run,a marker at each year,the story hanging beneath it. */
.timeline{--stop:clamp(280px,25vw,360px)}
.timeline .sec-head .right{display:flex;align-items:flex-end;justify-content:flex-end}
.tl-nav{display:flex;align-items:center;gap:10px}
.tl-hint{font-size:.625rem;letter-spacing:.18em;color:var(--label);margin-right:8px;
  font-variant-numeric:tabular-nums}
.tl-nav button{
  width:44px;height:44px;border:1px solid rgba(21,23,28,.24);border-radius:50%;
  font-size:1rem;line-height:1;color:var(--ink);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.tl-nav button:hover:not(:disabled){background:var(--ink);color:var(--white);border-color:var(--ink)}
.tl-nav button:disabled{opacity:.3;cursor:default}

.tl-wrap{margin-top:clamp(28px,3.4vw,50px)}
.tl-track{
  position:relative;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;
  /* the first year lines up with the page column */
  --edge:max(var(--pad),calc((100vw - var(--maxw))/2 + var(--pad)));
  padding-left:var(--edge);padding-right:var(--edge);scroll-padding-inline:var(--edge);
  padding-bottom:26px;scrollbar-width:thin;scrollbar-color:rgba(21,23,28,.25) transparent;
}
.tl-track:focus-visible{outline:1px solid var(--ink);outline-offset:-1px}
.tl-track::-webkit-scrollbar{height:4px}
.tl-track::-webkit-scrollbar-thumb{background:rgba(21,23,28,.25)}

.tl-stops{display:flex;list-style:none;margin:0;padding:0;width:max-content}
/* each stop carries its own length of the axis,so the line is continuous */
.tl-stop{
  position:relative;flex:none;width:var(--stop);scroll-snap-align:start;
  border-top:1px solid var(--rule);
  padding:30px clamp(24px,2.6vw,44px) 0 0;
}
.tl-stop::before{
  content:"";position:absolute;top:-3px;left:0;width:5px;height:5px;background:var(--clay);
}
.tl-stop .y{
  display:block;font-size:clamp(30px,3vw,42px);font-weight:400;letter-spacing:-.035em;
  line-height:1;font-variant-numeric:tabular-nums;color:var(--ink);
}
.tl-stop h3{
  font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  color:var(--ink);margin:16px 0 14px;
}
.tl-stop h3 sup.reg{vertical-align:.42em;font-size:.62em}
.tl-stop p{font-size:.875rem;line-height:1.65;color:var(--body)}

@media(max-width:700px){
  .timeline{--stop:80vw}
  .tl-hint{display:none}
}
@media(prefers-reduced-motion:reduce){.tl-track{scroll-behavior:auto}}

/* a bait field for spam bots: never shown,never read aloud */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ——————————————————————————————————————— photo band */
/* A pair of photographs: a breath between two text-heavy sections. They sit
   on the page grid like every other block,with the usual gap between them. */
.photoband{padding-block:0}
/* same geometry as the picture pair in a lists section: the page column,the usual margins,a narrow gap between the two frames */
.photoband .pb{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,1vw,18px)}
.photoband .ph{aspect-ratio:3/2}
@media(max-width:760px){.photoband .pb{grid-template-columns:1fr}}

/* —————————————————————————————————————— legal document */
/* One readable column: a privacy policy is read,not scanned. */
.legal .doc{
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
  margin-top:clamp(26px,3.2vw,46px);
}
.legal .doc > *{max-width:78ch}
.legal h2{
  font-size:clamp(1.0625rem,1.5vw,1.35rem);font-weight:500;letter-spacing:-.01em;
  line-height:1.25;color:var(--ink);margin:clamp(34px,4vw,56px) 0 14px;
  scroll-margin-top:110px;
}
.legal h2:first-child{margin-top:0}
.legal p{font-size:.9375rem;line-height:1.7;color:var(--body);margin-top:14px}
.legal ol,.legal ul{margin:16px 0 0;padding-left:0;list-style:none;counter-reset:lg}
.legal li{position:relative;padding-left:30px;margin-top:10px;
  font-size:.9375rem;line-height:1.7;color:var(--body)}
.legal ol > li{counter-increment:lg}
.legal ol > li::before{content:counter(lg) ".";position:absolute;left:0;color:var(--label);
  font-variant-numeric:tabular-nums}
.legal ul > li::before{content:"";position:absolute;left:4px;top:.72em;
  width:5px;height:5px;background:var(--clay)}
/* the policy quotes bare URLs; on a narrow phone they have to be allowed
   to break mid-word,or one of them pushes the whole page sideways */
.legal a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}

/* ————————————————————————————————————————————— award */
.award .medal{border:1px solid var(--rule);padding:clamp(26px,3.2vw,44px);position:relative}
/* the moment the award was handed over,as a band under the section */
.award-shot{margin-top:clamp(30px,3.6vw,52px)}
.award-shot .ph{aspect-ratio:5/2}
@media(max-width:760px){.award-shot .ph{aspect-ratio:3/2}}
.award .medal::before{content:"";position:absolute;top:-1px;left:-1px;width:56px;height:2px;background:var(--clay)}
.award .medal b{display:block;margin:16px 0;font-size:clamp(1.1rem,1.7vw,1.45rem);font-weight:400;letter-spacing:-.016em;line-height:1.25}
.award .medal p{font-size:.875rem;color:var(--body)}
.award .medal{display:flex;gap:clamp(18px,2.4vw,32px);align-items:flex-start}
.award .medal-logo{flex:none;width:clamp(84px,8vw,120px);height:auto;display:block}
@media(max-width:560px){.award .medal{flex-direction:column}}
.award .left p{color:var(--body);font-size:.9375rem;margin-top:22px}

/* ————————————————————————————————————————————— team */
/* Three across rather than six: the profiles need a readable measure,and six columns would set them a dozen characters wide. A twelve-column
   grid lets the row with profiles stay three up while the rest of the team
   runs four up — seven people,two full rows,no orphan tile. */
.team .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap) clamp(20px,2.6vw,48px);
  margin-top:clamp(26px,3.2vw,46px)}
.team .p{grid-column:span 4}
.team .grid:has(> .p:nth-child(7)) .p:nth-child(n+4){grid-column:span 3}
@media(max-width:900px){.team .p,.team .grid:has(> .p:nth-child(7)) .p:nth-child(n+4){grid-column:span 6}}
@media(max-width:560px){.team .p,.team .grid:has(> .p:nth-child(7)) .p:nth-child(n+4){grid-column:span 12}}
.team .p .ph{aspect-ratio:4/5}
.team .meta{padding-top:16px}
.team .meta span{font-size:.5625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--label);
  display:block;line-height:1.5}
.team .meta h3{font-size:1.0625rem;font-weight:500;margin-top:8px}
.team .meta p{margin-top:12px;font-size:.8125rem;line-height:1.65;color:var(--body)}
@media(max-width:900px){.team .grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.team .grid{grid-template-columns:1fr}}

/* ———————————————————————————————————————— resources */
.resources .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:clamp(26px,3.2vw,46px)}
@media(max-width:860px){.resources .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.resources .grid{grid-template-columns:1fr}}
.resources .res{border:1px solid var(--rule);padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;gap:14px;min-height:230px;min-width:0;transition:border-color .4s var(--ease)}
.resources .res:hover{border-color:var(--ink)}
.resources h3{font-size:1.125rem;font-weight:500;letter-spacing:-.01em}
.resources p{font-size:.875rem;color:var(--body)}
.resources .go{margin-top:auto;font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500}

/* ————————————————————————————————————————— locations */
/* partner map — countries with a partner shaded,each city a dot on top */
.locations .map{width:100%;max-width:var(--maxw);margin:clamp(26px,3.2vw,46px) auto 0;padding-inline:var(--pad)}
.locations .world{display:block;width:100%;height:auto;overflow:visible;
  padding-block:clamp(18px,2.4vw,36px);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.locations .world path{stroke:var(--paper);stroke-width:.5;stroke-linejoin:round;transition:fill .25s var(--ease)}
.locations .world path.off{fill:#E4E1DA}
.locations .world path.on{fill:var(--ink)}
.locations .world path.on.lit{fill:var(--clay)}
.locations .hq .dot{fill:var(--clay)}
.locations .hq .halo{fill:var(--clay);opacity:.3}
.locations .map-legend{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 26px;margin-top:16px}
.locations .map-legend p{display:flex;flex-wrap:wrap;align-items:center;gap:8px 26px;max-width:none;
  font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--label)}
.locations .map-legend .li{display:inline-flex;align-items:center;gap:10px}
.locations .map-legend .k{width:8px;height:8px;border-radius:50%;background:var(--ink);display:inline-block}
.locations .map-legend .k.hq{background:var(--clay)}
/* the city lists,compact */
.locations .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,40px);margin-top:clamp(24px,2.8vw,40px)}
.locations .reg .small-caps{margin-bottom:12px}
.locations ul{display:flex;flex-direction:column;gap:6px}
.locations li{font-size:.875rem;color:var(--body);cursor:default;transition:color .2s var(--ease);width:max-content;max-width:100%}
.locations li:hover{color:var(--ink)}
@media(max-width:900px){.locations .grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.locations .hq .dot{r:6px}.locations .hq .halo{r:12px}}

/* ————————————————————————————————————— contact form */
.contact .inner{display:grid;grid-template-columns:minmax(0,.65fr) minmax(0,1.6fr);gap:clamp(30px,5vw,90px);align-items:start}
.contact .aside{font-style:normal}
.contact .aside .blk{padding:20px 0;border-top:1px solid var(--rule)}
.contact .aside .blk:first-of-type{border-top:0;padding-top:0}
.contact .aside a,.contact .aside .blk p:not(.small-caps){display:block;margin-top:9px;font-size:.9375rem;line-height:1.6;color:var(--ink);max-width:none}
.contact .aside a:hover{color:var(--clay)}
.contact fieldset{border:0;padding:0;margin:0 0 clamp(26px,3.2vw,40px)}
.contact legend{padding:0;margin-bottom:16px;font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--label);font-weight:500}
.contact .roles{display:flex;flex-wrap:wrap;gap:9px}
.contact .roles label{position:relative;cursor:pointer}
.contact .roles input{position:absolute;opacity:0;width:0;height:0}
.contact .roles span{display:inline-block;padding:10px 17px;border:1px solid var(--rule);font-size:.75rem;color:var(--body);
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease)}
.contact .roles input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.contact .roles input:focus-visible + span{outline:2px solid var(--blue);outline-offset:3px}
.contact .fields{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,1.8vw,28px)}
.contact .f.full{grid-column:1/-1}
.contact label{display:block;font-size:.5625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--label);margin-bottom:9px;font-weight:500}
.contact .req{color:var(--clay)}
.contact input,.contact textarea{width:100%;border:0;border-bottom:1px solid var(--rule);background:transparent;
  padding:11px 0;font:inherit;font-size:.9375rem;color:var(--ink);border-radius:0;transition:border-color .3s var(--ease)}
.contact input:focus,.contact textarea:focus{outline:none;border-bottom-color:var(--ink)}
.contact textarea{resize:vertical;min-height:120px}
.f-consent{display:flex;gap:13px;align-items:flex-start;margin-top:clamp(24px,3vw,36px);font-size:.8125rem;color:var(--body);cursor:pointer}
.f-consent input{width:16px;height:16px;flex:none;margin-top:3px;accent-color:var(--ink)}
.f-consent a{text-decoration:underline;text-underline-offset:3px}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:clamp(26px,3.2vw,40px)}
.form-foot .btn.solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.form-foot .btn.solid:hover{background:var(--clay);border-color:var(--clay)}
.form-note{font-size:.75rem}
.form-note[data-state="err"]{color:var(--clay)}
.required-note{font-size:.625rem;letter-spacing:.08em;color:var(--label);margin-top:18px}
button[disabled]{opacity:.55;cursor:progress}
@media(max-width:900px){.contact .inner{grid-template-columns:1fr}.contact .fields{grid-template-columns:1fr}}

/* ————————————————————————————————————————— final CTA */
.cta-final{text-align:center}
.cta-final .inner{display:flex;flex-direction:column;align-items:center}
.cta-final .small-caps{color:var(--label)}
.cta-final h2{max-width:16ch}
.cta-final h2 em{color:var(--taupe)}
.cta-final .lede{margin-top:clamp(22px,2.6vw,34px);max-width:56ch;color:var(--body)}
.cta-final .hero-cta{margin-top:clamp(30px,3.6vw,48px);justify-content:center}
.cta-final .btn{border-color:rgba(21,23,28,.28)}
.cta-final .btn.solid{background:var(--ink);color:var(--white);border-color:var(--ink)}
.cta-final .btn.solid:hover{background:var(--clay);border-color:var(--clay)}

/* ————————————————————————— proven (pre-footer band) */
.proven{border-top:1px solid var(--rule)}

/* ———————————————————————————————————————————— footer */
/* Light footer on the soft ground: orientation,not a second dark block.
   It continues the paper the section above ends on,one shade deeper. */
footer{background:var(--paper-2);color:var(--ink);--label:#7A766F;--body:#4B4945;--rule:rgba(21,23,28,.14)}
.f-cols{
  display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:var(--gap);padding-block:clamp(44px,5vw,72px) clamp(32px,3.6vw,52px);
}
.f-brand .logo{color:var(--ink)}
.f-brand .logo .mark{width:clamp(150px,12vw,182px)}
.cx{display:flex;flex-direction:column;gap:8px;margin-top:26px;font-size:.875rem;color:var(--body)}
.cx a{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.cx a:hover{color:var(--clay)}
.f-col .small-caps{color:var(--label);margin-bottom:18px}
.f-col a{display:block;padding:6px 0;font-size:.875rem;color:var(--body)}
.f-col a:hover{color:var(--ink)}
/* The partner entrance sits apart from the public links. */
.f-col.partners{align-self:start}
.f-col.partners a{color:var(--ink)}
.f-col form .row{display:flex;border-bottom:1px solid rgba(21,23,28,.28);margin-top:16px;max-width:320px}
.f-col form input{flex:1;background:transparent;border:0;color:var(--ink);padding:10px 0;font:inherit;font-size:.875rem}
.f-col form input::placeholder{color:rgba(21,23,28,.4)}
.f-col form input:focus{outline:none}
.f-col form button{font-size:.5625rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;padding:10px 0 10px 16px;color:var(--ink)}
.f-col form button:hover{color:var(--clay)}
.f-col .form-note{margin-top:11px;color:var(--body);display:block;font-size:.8125rem}
.f-bottom{padding-block:22px;display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;
  font-size:.75rem;color:var(--label);border-top:1px solid var(--rule)}
.f-bottom .links{display:flex;flex-wrap:wrap;gap:22px}
.f-bottom a:hover{color:var(--ink)}
/* Social glyphs belong to the brand block,with the address — not to the legal
   strip,which is residue. Marks rather than words,so they stay quiet. */
.f-brand .socials{display:flex;align-items:center;gap:20px;margin-top:28px}
.socials .ico{display:inline-flex;color:var(--body);transition:color .2s ease}
.socials .ico:hover,.socials .ico:focus-visible{color:var(--ink)}
.socials svg{display:block}
@media(max-width:900px){.f-cols{grid-template-columns:repeat(2,1fr);row-gap:38px}}
@media(max-width:520px){.f-cols{grid-template-columns:1fr}}

/* ——————————————————————————————————————— cookie consent
   A quiet strip,not a modal: it never covers the content,and the two
   honest answers — all or none — carry the same weight. */
.cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--paper);
  border-top:1px solid var(--rule);box-shadow:0 -16px 44px rgba(21,23,28,.09);
  transform:translateY(100%);transition:transform .45s var(--ease)}
.cookiebar.on{transform:none}
.cookiebar[hidden]{display:none}
.ck-in{width:100%;max-width:var(--maxw);margin-inline:auto;padding:clamp(20px,2.3vw,28px) var(--pad);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(16px,2vw,44px);align-items:center}
.ck-text .small-caps{color:var(--label);margin-bottom:9px}
.ck-text p{font-size:.875rem;color:var(--body);max-width:84ch}
.ck-text a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.ck-text a:hover{color:var(--clay)}
.ck-acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.ck-btn{font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  padding:13px 20px;border:1px solid var(--ink);color:var(--ink);background:transparent;
  cursor:pointer;white-space:nowrap;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.ck-btn:hover{background:var(--ink);color:var(--paper)}
.ck-btn[hidden]{display:none}
.ck-btn.ghost{border-color:var(--rule);color:var(--body)}
.ck-btn.ghost:hover{background:transparent;color:var(--ink);border-color:var(--ink)}
.ck-btn.solid{background:var(--ink);color:var(--paper)}
.ck-btn.solid:hover{background:var(--clay);border-color:var(--clay)}
.ck-opts{grid-column:1/-1;display:grid;gap:14px;padding-top:clamp(16px,2vw,22px);border-top:1px solid var(--rule)}
.ck-opts[hidden]{display:none}
.ck-opt{display:flex;gap:12px;align-items:flex-start;font-size:.8125rem;color:var(--body);cursor:pointer;max-width:92ch}
.ck-opt input{width:16px;height:16px;flex:none;margin-top:2px;accent-color:var(--ink)}
.ck-opt input:disabled{opacity:.5}
.ck-opt b{color:var(--ink);font-weight:500}
.ck-in:has(.ck-opts:not([hidden])) .ck-acts{grid-column:1/-1;justify-content:flex-start}
@media(max-width:900px){
  .ck-in{grid-template-columns:1fr}
  .ck-acts{justify-content:flex-start}
  .ck-btn{flex:1;min-width:132px;text-align:center;justify-content:center}
}

/* ————————————————————————————————————————————— 404 */
.err{min-height:80vh;display:flex;align-items:center;background:var(--slate);color:var(--white);
  --label:rgba(255,255,255,.6);--body:rgba(255,255,255,.78);--rule:rgba(255,255,255,.2);--em:var(--rose)}
.err .in{padding-block:clamp(60px,10vh,120px)}
.err .code{font-size:clamp(5rem,16vw,13rem);line-height:.8;color:rgba(255,255,255,.08);letter-spacing:-.04em;margin-bottom:-1.2vw}
.err h1{color:var(--white);max-width:14ch}
.err .in > p{color:var(--body);margin-top:24px;max-width:54ch}
.err .btn{margin-top:36px}
.err .links{display:flex;flex-wrap:wrap;gap:26px;margin-top:46px;padding-top:26px;border-top:1px solid var(--rule)}
.err .links a{font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--label)}
.err .links a:hover{color:var(--white)}

/* ————————————————————————————————————————— mobile nav */
@media(max-width:1080px){
  .burger{display:block}
  .nav-meta{margin-left:auto}
  nav.main{position:fixed;inset:var(--head) 0 0 0;background:var(--paper);color:var(--ink);
    flex-direction:column;align-items:stretch;justify-content:flex-start;padding:24px var(--pad) 60px;
    gap:0;overflow-y:auto;margin-inline:0;transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}
  body.nav-open nav.main{opacity:1;visibility:visible;transform:none}
  body.nav-open{overflow:hidden}
  nav.main .item{border-bottom:1px solid var(--rule)}
  nav.main .top{padding:20px 0;width:100%;justify-content:space-between;font-size:.75rem}
  nav.main .top.active::after{display:none}
  /* In the drawer, sub-pages open in place under their parent. The desktop
     hover/focus rule (which centres a floating panel with translate(-50%))
     must not apply here — a tap counts as hover on touch screens and would
     slide the list half off the screen. */
  nav.main .submenu,
  nav.main .item:hover .submenu,
  nav.main .item:focus-within .submenu{
    position:static;left:auto;opacity:1;visibility:visible;transform:none;border:0;box-shadow:none;
    min-width:0;padding:0 0 14px;display:none;background:transparent;
  }
  nav.main .item.open .submenu{display:block}
  nav.main .item:hover .chev{transform:none}
  /* no sticky hover grey after a tap; a chevron big enough to read as a control */
  nav.main .top:hover{color:var(--ink)}
  nav.main .chev{font-size:.85em;opacity:.7}
  nav.main .item .top[aria-expanded="true"] .chev{transform:rotate(180deg)}
  .submenu a{padding:10px 0 10px 18px;border-left:1px solid var(--rule)}
}

/* ————————————————————————————————————————————— motion */
html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  html.js .reveal{opacity:1;transform:none}
}
@media print{
  header,footer,.hero-bg{display:none}
  body{color:#000;background:#fff}
  html.js .reveal{opacity:1;transform:none}
}

/* ———————————————————————————— direct links: one compact band */
.quicklinks .ql{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:clamp(24px,4vw,70px);align-items:start}
.quicklinks .ql-head .display{max-width:12ch}
.quicklinks .ql-head .body{margin-top:14px;max-width:34ch}
.quicklinks .ql-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.quicklinks .ql-item{
  position:relative;display:flex;flex-direction:column;gap:8px;
  padding:clamp(18px,1.8vw,26px) clamp(18px,1.8vw,24px) clamp(20px,2vw,28px);
  background:var(--paper-2);transition:background .35s var(--ease);
}
.quicklinks .ql-item:hover{background:#E7E4DE}
.quicklinks .ql-item h3{font-size:1.0625rem;font-weight:500;letter-spacing:-.01em;line-height:1.25;padding-right:26px}
.quicklinks .ql-item p{font-size:.8125rem;line-height:1.5;color:var(--body)}
.quicklinks .ql-item .go{position:absolute;top:clamp(18px,1.8vw,26px);right:clamp(16px,1.6vw,22px);transition:transform .3s var(--ease)}
.quicklinks .ql-item:hover .go{transform:translate(3px,-3px)}
@media(max-width:980px){.quicklinks .ql{grid-template-columns:1fr}}
@media(max-width:640px){.quicklinks .ql-links{grid-template-columns:1fr}}

.page-hero{position:relative}