/*
Theme Name: ZeroY Starter
Description: Static planning-route framework for the Comco website.
Version: 1.0.0
*/

*,*::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-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:.2em}
img{display:block;max-width:100%;height:auto}
h1,h2{color:var(--ink);font-family:var(--font-heading);line-height:var(--lh-heading)}
h1{margin:0 0 var(--space-5);font-size:var(--fs-h1);letter-spacing:var(--tracking-tight)}
p{margin:0;color:var(--ink-2)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.wrap{width:min(calc(100% - (var(--gutter) * 2)),var(--max));margin-inline:auto}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--navy);color:#fff;padding:12px 18px}
.skip-link:focus{left:0}

.site-head{border-bottom:1px solid var(--line-2);background:var(--bg)}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-6);padding-block:var(--space-4)}
/* The brand is the logo mark alone — no wordmark text beside it — so it carries
   the whole brand in the header and is sized to read at a glance. */
.brand{display:inline-flex;align-items:center}
.brand:hover{text-decoration:none}
.brand__logo{width:auto;height:clamp(40px,2.8vw,48px)}
/* Fallback wordmark, used only while the logo attachment is unavailable. */
.brand__name{color:var(--navy);font-size:var(--fs-nav);font-weight:var(--w-bold);letter-spacing:var(--tracking-heading)}
.navlinks{order:3;flex:1 1 100%;overflow-x:auto}
/* The top-level row only. Nested lists live inside the popover panel and are laid
   out by their own rules — a bare `.navlinks ul` would also match `.mega` and
   `.mega__children` and flatten the panel. */
.navlinks > ul{display:flex;gap:var(--space-5);margin:0;padding:0;list-style:none}
/* One line each, but only for the top-level row. Written on the row itself the
   rule would be inherited by the popover panels, where a long heading then runs
   into the next column instead of wrapping. */
.navlinks > ul > li > a,.navlinks > ul .nav-pop__trigger{white-space:nowrap}
.navlinks > ul > li > a{display:block;padding-block:var(--space-2);color:var(--ink-2);font-size:var(--fs-nav);font-weight:var(--w-medium);border-bottom:2px solid transparent}
.navlinks > ul > li > a:hover,.navlinks > ul > li > a[aria-current="page"]{color:var(--navy);border-bottom-color:var(--teal);text-decoration:none}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 20px;border:1px solid var(--navy);border-radius:var(--radius-sm);font-size:var(--fs-small);font-weight:var(--w-bold)}
.btn--primary{margin-left:auto;background:var(--navy);color:#fff}
.btn--primary:hover{background:var(--navy-2);text-decoration:none}

.planning-main,.entry{min-height:55vh;padding:var(--space-section) 0}
.planning-content{max-width:820px}
.entry article{max-width:760px}
.entry article+article{margin-top:var(--space-8);padding-top:var(--space-8);border-top:1px solid var(--line)}

/* --- Planning skeleton: one page per route -------------------------------
   Every route renders through template-planning.php, so the page states which
   route it is, at which URL, and what sits underneath it. */
.planning-note{margin:var(--space-6) 0 0;color:var(--muted);font-family:var(--font-heading);font-size:var(--fs-h3);font-weight:var(--w-medium);letter-spacing:var(--tracking-heading)}
.planning-path{margin:var(--space-3) 0 0}
.planning-path code{padding:3px 9px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--soft-2);color:var(--ink-2);font-size:var(--fs-micro)}
.planning-children{margin:var(--space-8) 0 0;padding-top:var(--space-5);border-top:1px solid var(--line)}
.planning-children__title{margin:0 0 var(--space-4);color:var(--muted);font-size:var(--fs-label);letter-spacing:var(--tracking-label);text-transform:uppercase}
.planning-children ul{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6);margin:0;padding:0;list-style:none}
.planning-children a{color:var(--navy);font-size:var(--fs-small);font-weight:var(--w-medium)}

.site-foot{padding:var(--space-8) 0 var(--space-6);background:var(--navy-deep);color:#fff}
.foot-cols{display:grid;gap:var(--space-6)}
.foot-heading{margin:0 0 var(--space-4);color:var(--on-navy-muted);font-size:var(--fs-label);letter-spacing:var(--tracking-label);text-transform:uppercase}
.foot-cols ul{margin:0;padding:0;list-style:none}
.foot-cols li+li{margin-top:var(--space-2)}
.foot-cols a{color:var(--on-navy)}
.foot-cols a:hover{color:#fff}
.foot-bottom{margin-top:var(--space-7);padding-top:var(--space-5);border-top:1px solid rgba(255,255,255,.14);color:var(--on-navy-muted);font-size:var(--fs-micro)}

@media (min-width:760px){
  .nav{min-height:96px;flex-wrap:nowrap}
  .navlinks{order:initial;flex:1 1 auto;margin-left:auto;overflow:visible}
  .navlinks > ul{justify-content:flex-end}
  .btn--primary{margin-left:0}
  /* Four groups: Products, Solutions, Company and Legal. */
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1000px){
  .foot-cols{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* Between the tablet breakpoint and the wide desktop layout the row carries the
   brand, six sections and the quote button; tighten the gaps so the larger
   navigation type never forces a wrap. */
@media (min-width:760px) and (max-width:1240px){
  .navlinks > ul{gap:var(--space-4)}
  .nav{gap:var(--space-4)}
  .nav-rfq{padding-inline:14px}
}

@media (max-width:759px){
  .navlinks{padding-bottom:var(--space-1)}
  .btn{min-height:44px;padding-inline:14px}
}
/* --- Content-model pages: shared vocabulary ------------------------------- */
.content-main{min-height:55vh}
.page-head{padding:var(--space-8) 0 var(--space-6);border-bottom:1px solid var(--line-2);background:var(--soft)}
.page-head h1{max-width:24ch;margin-bottom:var(--space-4);font-size:var(--fs-h1);line-height:var(--lh-heading);letter-spacing:var(--tracking-tight)}
.eyebrow{margin:0 0 var(--space-3);color:var(--teal-deep);font-size:var(--fs-label);font-weight:var(--w-bold);letter-spacing:var(--tracking-label);text-transform:uppercase}
.lead{max-width:62ch;color:var(--ink-2);font-size:var(--fs-lead)}
.breadcrumb{margin:0 0 var(--space-5);color:var(--muted);font-size:var(--fs-micro)}
.breadcrumb a{color:var(--muted)}
.breadcrumb span+span::before{content:"/";margin:0 var(--space-2);color:var(--line)}

.section{padding:var(--space-section) 0}
.section--soft{background:var(--soft-2)}
.section__head{max-width:70ch;margin-bottom:var(--space-6)}
.section h2{margin:0 0 var(--space-4);font-size:var(--fs-h2);letter-spacing:var(--tracking-heading)}
.section h3{margin:0 0 var(--space-3);font-size:var(--fs-h4)}
.section p+p{margin-top:var(--space-4)}
.prose{max-width:72ch}
.grid{display:grid;gap:var(--space-5)}
.grid--2,.grid--3{grid-template-columns:minmax(0,1fr)}
.stack>*+*{margin-top:var(--space-4)}
.meta{margin:0 0 var(--space-3);color:var(--muted);font-size:var(--fs-micro);letter-spacing:.02em}

.card{padding:var(--space-5);border:1px solid var(--line);border-radius:var(--radius);background:var(--bg)}
.card__thumb{margin:0 0 var(--space-4)}
.card__thumb img{width:100%;height:auto;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--soft-2)}
.media--hero{margin-bottom:var(--space-6)}
.media--hero img{width:100%;height:auto;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--soft-2)}
.card__label{margin:0 0 var(--space-2);color:var(--muted);font-size:var(--fs-label);letter-spacing:var(--tracking-label);text-transform:uppercase}
.card__title{margin:0 0 var(--space-3);font-size:var(--fs-h4)}
.card__text{margin:0;color:var(--ink-2);font-size:var(--fs-small)}
.tag-row{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-4) 0 0}
.tag{padding:2px 10px;border:1px solid var(--line);border-radius:999px;color:var(--ink-2);font-size:var(--fs-micro)}
.badge{display:inline-block;padding:2px 8px;border-radius:var(--radius-sm);font-size:var(--fs-micro);font-weight:var(--w-semibold)}
.badge--in-house{background:var(--teal-soft);color:var(--teal-deep)}
.badge--sourced{background:var(--soft-2);color:var(--muted)}

.spec{margin:0;display:grid;gap:var(--space-3)}
.spec>div{display:grid;gap:2px;padding-bottom:var(--space-3);border-bottom:1px solid var(--line-2)}
.spec dt{margin:0;color:var(--muted);font-size:var(--fs-label);letter-spacing:var(--tracking-label);text-transform:uppercase}
.spec dd{margin:0}
.table{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
.table th,.table td{padding:var(--space-3);border-bottom:1px solid var(--line-2);text-align:left;vertical-align:top}
.table th{color:var(--muted);font-size:var(--fs-label);letter-spacing:var(--tracking-label);text-transform:uppercase}
.note{margin:var(--space-5) 0 0;padding:var(--space-4) var(--space-5);border-left:3px solid var(--teal);background:var(--teal-soft);color:var(--ink-2);font-size:var(--fs-small)}
.cta{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;margin-top:var(--space-6)}
.links{margin:0;padding:0;list-style:none}
.links li+li{margin-top:var(--space-3)}
.media{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);margin:0}
.media img{border:1px solid var(--line);border-radius:var(--radius)}

@media (min-width:760px){
  .grid--2,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .spec>div{grid-template-columns:200px minmax(0,1fr);gap:var(--space-4);align-items:baseline}
  .media{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Wide sets (the 7 product families) step up to 4 across so a full-width row
   never ends with a single orphan card. */
@media (min-width:1000px){
  .grid--4{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1280px){
  .grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* --- Primary navigation: mega menu, dropdown panels, mobile drawer -------- */
.nav__item{position:relative}
.nav-pop{display:flex}
.nav-pop__trigger{display:block;margin:0;padding:var(--space-2) 0;border:0;border-bottom:2px solid transparent;background:none;color:var(--ink-2);font:inherit;font-size:var(--fs-nav);font-weight:var(--w-medium);cursor:pointer;text-align:left}
.nav-pop__trigger:hover,.nav-pop__trigger.is-current,.nav-pop__trigger[aria-expanded="true"]{color:var(--navy);border-bottom-color:var(--teal)}

/* The panel never inherits the top row's single-line setting: a heading or a
   link inside it wraps rather than crossing into the next column. */
.nav-panel{width:min(1180px,94vw);padding:var(--space-5);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--bg);box-shadow:0 18px 40px rgba(16,42,67,.16);white-space:normal;overflow-wrap:break-word}
/* Products is the only expanding section, so the panel only ever has to hold the
   mega menu; every other section is a plain link in the top-level row. */
.mega{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-5);margin:0;padding:0;list-style:none}
.mega__card{margin:0}
.mega__head{display:block;color:inherit}
.mega__title{display:block;color:var(--navy);font-size:var(--fs-nav);font-weight:var(--w-bold)}
.mega__head:hover .mega__title{text-decoration:underline;text-underline-offset:.2em}
.mega__text{margin:var(--space-1) 0 0;color:var(--muted);font-size:15px;line-height:1.5}
.mega__children{margin:var(--space-2) 0 0;padding:0;list-style:none}
.mega__children li+li{margin-top:var(--space-1)}
.mega__children a{color:var(--ink-2);font-size:15px}
.mega__children a:hover{color:var(--navy)}
/* A short panel of direct links: Product Development, Manufacturing, Quality and
   Resources each hold a handful of items, so the panel shrinks to its content
   instead of spanning the mega menu's width. */
.nav-panel--list{width:auto;min-width:min(280px,92vw)}
.nav-panel__list{margin:0;padding:0;list-style:none}
.nav-panel__list li+li{margin-top:var(--space-3)}
.nav-panel__list a{display:block;color:var(--ink-2);font-size:var(--fs-nav);font-weight:var(--w-medium)}
.nav-panel__list a:hover{color:var(--navy);text-decoration:none}
.nav-panel__footer{display:flex;flex-wrap:wrap;gap:var(--space-5);margin:var(--space-5) 0 0;padding:var(--space-4) 0 0;border-top:1px solid var(--line-2);list-style:none}
.nav-panel__footer a{color:var(--navy);font-size:var(--fs-nav);font-weight:var(--w-medium)}

.nav-mobile{order:2;margin-left:auto}
.nav-toggle{min-height:44px;padding:10px 16px;border:1px solid var(--navy);border-radius:var(--radius-sm);background:none;color:var(--navy);font:inherit;font-size:var(--fs-small);font-weight:var(--w-bold);cursor:pointer}
.nav-rfq{order:3;font-size:var(--fs-nav)}
.nav-drawer{position:fixed;inset:0 0 0 auto;width:min(420px,92vw);max-height:100vh;margin:0;padding:var(--space-6) var(--space-5);border:0;border-left:1px solid var(--line);background:var(--bg);color:var(--ink);overflow-y:auto}
.nav-drawer::backdrop{background:rgba(16,42,67,.45)}
.nav-drawer__title{margin:0 0 var(--space-5);color:var(--navy);font-size:var(--fs-label);font-weight:var(--w-bold);letter-spacing:var(--tracking-label);text-transform:uppercase}
.nav-drawer__list{margin:0;padding:0;list-style:none}
.nav-drawer__group+.nav-drawer__group{margin-top:var(--space-5);padding-top:var(--space-5);border-top:1px solid var(--line-2)}
.nav-drawer__section{color:var(--navy);font-weight:var(--w-bold)}
.nav-drawer__sub{margin:var(--space-2) 0 0;padding:0;list-style:none}
.nav-drawer__sub li+li{margin-top:var(--space-2)}
.nav-drawer__sub a{color:var(--ink-2);font-size:var(--fs-small)}
.nav-drawer__sub2{margin:var(--space-1) 0 var(--space-2);padding:0 0 0 var(--space-4);list-style:none}
.nav-drawer__sub2 a{color:var(--muted);font-size:var(--fs-micro)}
.nav-drawer__cta{margin:var(--space-6) 0 0}
.nav-drawer__cta .btn{width:100%}
.nav-drawer__close-row{margin:var(--space-4) 0 0}
.nav-drawer__close{border:0;background:none;color:var(--ink-2);font:inherit;font-size:var(--fs-small);text-decoration:underline;cursor:pointer}

@media (min-width:760px){.nav-mobile{display:none}}
@media (min-width:760px) and (max-width:1100px){.mega{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:759px){
  .navlinks--desktop{display:none}
  .nav-rfq{flex:1 1 100%;margin-left:0}
  .mega{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ==========================================================================
   Reference page system
   The homepage sets the pattern every other page follows: white space first,
   thin rules, large real images, navy bands for statements and evidence, and
   motion that only supports hierarchy (150-350ms, no parallax, no floating).
   ========================================================================== */

/* --- Hero: copy left, one large image right ------------------------------ */
.hero{padding:clamp(56px,6vw,96px) 0 clamp(48px,5vw,80px);background:var(--soft);border-bottom:1px solid var(--line-2)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-7);align-items:center}
.hero__copy{min-width:0}
.hero__copy h1{max-width:19ch;margin-bottom:var(--space-5)}
.hero__lead{max-width:58ch;color:var(--ink-2);font-size:var(--fs-lead)}
.hero__media{margin:0}
.hero__media img{width:100%;height:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--soft-2)}
@media (min-width:980px){
  .hero__grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(40px,5vw,80px)}
}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-6) 0 0;padding:0;list-style:none}
.chip{padding:6px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg);color:var(--ink-2);font-size:var(--fs-micro)}

/* --- Actions: one primary, one secondary, quiet text links --------------- */
.btn{transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.btn:hover{transform:translateY(-1px)}
.cta .btn--primary{margin-left:0}
.btn--ghost{background:var(--bg);color:var(--navy)}
.btn--ghost:hover{background:var(--soft-2);text-decoration:none}
.btn--on-navy{background:#fff;color:var(--navy);border-color:#fff}
.btn--on-navy:hover{background:var(--teal-on-navy);border-color:var(--teal-on-navy);color:var(--navy-deep);text-decoration:none}
.textlink,.cta > a:not(.btn){display:inline-block;padding-bottom:2px;border-bottom:1px solid var(--teal);color:var(--navy);font-size:var(--fs-small);font-weight:var(--w-bold)}
.textlink:hover,.cta > a:not(.btn):hover{text-decoration:none;border-bottom-color:var(--navy)}
.textlink--on-navy{color:#fff;border-bottom-color:var(--teal-on-navy)}
.textlink--on-navy:hover{border-bottom-color:#fff}

/* --- Navy bands: statements and evidence --------------------------------- */
.band{background:var(--navy);color:#fff}
.band .eyebrow{color:var(--teal-on-navy)}
.statement{padding:clamp(64px,7vw,104px) 0}
.statement__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5)}
.statement__quote{margin:0;max-width:36ch;color:#fff;font-family:var(--font-heading);font-size:clamp(24px,2.7vw,38px);font-weight:var(--w-semibold);line-height:1.18;letter-spacing:var(--tracking-heading)}
.statement__quote em{font-style:normal;color:var(--teal-on-navy)}
.statement__note{margin:var(--space-6) 0 0;color:var(--on-navy-muted);font-size:var(--fs-micro);letter-spacing:.04em;text-transform:uppercase}
@media (min-width:980px){
  .statement__grid{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(32px,5vw,72px);align-items:start}
}

/* --- Section heading: eyebrow, heading, one introduction ----------------- */
.section-head{max-width:64ch;margin-bottom:clamp(32px,4vw,56px)}
.section-head h2{margin:var(--space-3) 0 0}
.section-head__intro{margin:var(--space-4) 0 0;max-width:62ch;color:var(--ink-2);font-size:var(--fs-lead)}
.section-head--on-navy h2{color:#fff}
.section-head--on-navy .section-head__intro{color:var(--on-navy)}

/* --- Image-led card: image leads, text supports -------------------------- */
.media-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);overflow:hidden;transition:border-color var(--dur) var(--ease)}
.media-card:hover{border-color:var(--line-strong)}
.media-card__frame{position:relative;margin:0;overflow:hidden;border-bottom:1px solid var(--line-2);background:var(--soft-2)}
.media-card__frame img{width:100%;height:auto;transition:transform var(--dur-slow) var(--ease)}
.media-card:hover .media-card__frame img{transform:scale(1.035)}
.media-card__index{position:absolute;left:14px;top:14px;z-index:2;padding:5px 9px;border-left:3px solid var(--teal);background:#fff;color:var(--navy);font-size:11px;font-weight:var(--w-bold);letter-spacing:.1em}
.media-card__body{display:flex;flex-direction:column;flex:1 1 auto;padding:var(--space-5)}
.media-card__label{margin:0 0 var(--space-2);color:var(--muted);font-size:var(--fs-label);letter-spacing:var(--tracking-label);text-transform:uppercase}
.media-card__title{margin:0;font-size:var(--fs-h4);letter-spacing:var(--tracking-heading)}
.media-card__title a{color:var(--navy)}
.media-card__anchor::after{content:"";position:absolute;inset:0}
.media-card:hover .media-card__title a{text-decoration:underline;text-underline-offset:.2em}
.media-card__text{margin:var(--space-3) 0 0;color:var(--ink-2);font-size:var(--fs-small)}

/* --- Process rail: numbered stages on fine rules ------------------------- */
.rail{display:grid;grid-template-columns:minmax(0,1fr);gap:0 clamp(24px,3vw,44px);margin:0;padding:0;list-style:none}
.rail__step{padding:var(--space-5) 0 var(--space-6);border-top:1px solid var(--line)}
.rail__n{margin:0;color:var(--teal-deep);font-size:var(--fs-label);font-weight:var(--w-bold);letter-spacing:var(--tracking-label)}
.rail__media{margin:var(--space-4) 0 0}
.rail__media img{width:100%;height:auto;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--soft-2)}
.rail__title{margin:var(--space-4) 0 0;font-size:var(--fs-h4);letter-spacing:var(--tracking-heading)}
.rail__text{margin:var(--space-3) 0 0;color:var(--ink-2);font-size:var(--fs-small)}
@media (min-width:760px){.rail{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.rail{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* --- Evidence row: large value, small uppercase label -------------------- */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,3vw,44px);margin:0;padding:0;list-style:none}
.stat{padding:var(--space-5) 0;border-top:1px solid var(--line)}
.stat__value{margin:0;font-family:var(--font-heading);font-size:clamp(30px,3.4vw,44px);font-weight:var(--w-semibold);line-height:1.05;letter-spacing:var(--tracking-tight)}
.stat__label{margin:var(--space-2) 0 0;color:var(--muted);font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase}
@media (min-width:760px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stats--on-navy .stat{border-top-color:rgba(255,255,255,.2)}
.stats--on-navy .stat__value{color:#fff}
.stats--on-navy .stat__label{color:var(--on-navy-muted)}

/* --- Two-column compositions: copy beside one large image ---------------- */
.split,.feature{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,56px)}
.split{align-items:start}
.feature{align-items:center}
@media (min-width:980px){
  .split,.feature{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .feature--reverse .feature__copy{order:2}
  .feature--reverse .feature__media{order:1}
}
.feature__copy{min-width:0}
.feature__media{margin:0}
.feature__media img{width:100%;height:auto;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--soft-2)}
.feature__title{margin:0;font-size:var(--fs-h2);letter-spacing:var(--tracking-heading)}
.feature__text{margin:var(--space-4) 0 0;max-width:56ch;color:var(--ink-2);font-size:var(--fs-lead)}
.band .feature__title{color:#fff}
.band .feature__text{color:var(--on-navy)}

/* --- Development stages: four images, captions under each ---------------- */
.dev-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.dev-step{margin:0}
.dev-step img{width:100%;height:auto;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--soft-2)}
.dev-step figcaption{margin-top:var(--space-3)}
.dev-step__n{display:block;margin-bottom:4px;color:var(--teal-deep);font-size:11px;font-weight:var(--w-bold);letter-spacing:.1em;text-transform:uppercase}
.dev-step__text{display:block;color:var(--ink-2);font-size:var(--fs-micro);line-height:1.55}

/* --- Ruled lists: capabilities, proofs, verification --------------------- */
.ruled{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.ruled--two{display:grid;grid-template-columns:minmax(0,1fr);gap:0 var(--space-6)}
.ruled__item{padding:var(--space-5) 0;border-bottom:1px solid var(--line-2)}
.ruled__title{margin:0;font-size:var(--fs-h4);letter-spacing:var(--tracking-heading)}
.ruled__title a{color:var(--navy)}
.ruled__title a:hover{text-decoration:underline;text-underline-offset:.2em}
.ruled__meta{margin:0 0 var(--space-2);color:var(--muted);font-size:var(--fs-label);letter-spacing:var(--tracking-label);text-transform:uppercase}
.ruled__text{margin:var(--space-3) 0 0;color:var(--ink-2);font-size:var(--fs-small)}
.ruled__note{margin:var(--space-3) 0 0;padding-left:var(--space-4);border-left:2px solid var(--line);color:var(--muted);font-size:var(--fs-micro)}
@media (min-width:760px){.ruled--two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.subhead{margin:var(--space-6) 0 var(--space-4);color:var(--navy);font-size:var(--fs-h4);letter-spacing:var(--tracking-heading)}

/* --- Closing call to action --------------------------------------------- */
.cta-band{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6);align-items:center}
@media (min-width:980px){.cta-band{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,4vw,64px)}}
.cta-band__copy h2{margin:var(--space-3) 0 0;font-size:var(--fs-h2);letter-spacing:var(--tracking-heading)}
.cta-band__text{margin:var(--space-4) 0 0;max-width:54ch;color:var(--ink-2);font-size:var(--fs-lead)}
.cta-band__actions{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center}
.cta-band__actions .btn--primary{margin-left:0}
.cta-band--on-navy h2{color:#fff}
.cta-band--on-navy .cta-band__text{color:var(--on-navy)}

/* --- Motion: one reveal, one hover zoom, one button transition ----------- */
@media (prefers-reduced-motion: no-preference){
  html.is-motion [data-reveal]{opacity:0;transform:translateY(var(--reveal-shift));transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
  html.is-motion [data-reveal].is-revealed{opacity:1;transform:none}
}
@media (prefers-reduced-motion: reduce){
  .btn:hover{transform:none}
  .media-card:hover .media-card__frame img{transform:none}
}
.navlinks > ul > li > a{transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.card{transition:border-color var(--dur) var(--ease)}
.card:hover{border-color:var(--line-strong)}

/* --- Reference page: local layout helpers -------------------------------- */
.band--block{padding:clamp(64px,7vw,104px) 0}
.grid--families{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1000px){.grid--families{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1360px){.grid--families{grid-template-columns:repeat(4,minmax(0,1fr))}}
.facts__lead{margin:var(--space-4) 0 var(--space-7);max-width:56ch;color:var(--on-navy);font-size:var(--fs-lead)}
/* `.section h2` and `.section h3` carry their own margins; these headings own
   their spacing, so the reference blocks stay on the 4/8/12px rhythm. */
.section .feature__title,.section .media-card__title,.section .ruled__title{margin:0}
.section .rail__title{margin:var(--space-4) 0 0}
.split .subhead:first-child{margin-top:0}

/* --- Homepage: media slots, pending frames, local spacing ----------------- */
/* A slot shows the real photograph when one is set, and an honest labelled
   frame when one is not, so a missing image is never filled with a stand-in. */
.media-slot{display:block;position:relative;background:var(--soft-2);overflow:hidden}
.media-slot__image{display:block;width:100%;height:auto}
.media-slot--pending{
  display:grid;place-items:center;min-height:190px;padding:var(--space-5);
  border:1px dashed var(--line-strong);border-radius:var(--radius-sm);
  background:repeating-linear-gradient(135deg,var(--soft) 0 9px,var(--soft-2) 9px 18px);
}
.media-slot--wide{min-height:230px}
.media-slot--tall{min-height:300px}
.media-slot__label{
  max-width:28ch;color:var(--muted);font-size:var(--fs-label);font-weight:var(--w-medium);
  letter-spacing:var(--tracking-label);line-height:1.6;text-align:center;text-transform:uppercase;
}
.media-card__frame .media-slot--pending{border:0;border-radius:0}
.band .media-slot--pending{
  border-color:rgba(255,255,255,.28);
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 9px,rgba(255,255,255,.09) 9px 18px);
}
.band .media-slot__label{color:var(--on-navy-muted)}

/* A quiet line for a state the page is in, rather than a claim it makes. */
.aside-note{
  margin:var(--space-5) 0 0;max-width:70ch;padding-left:var(--space-4);
  border-left:2px solid var(--line);color:var(--muted);font-size:var(--fs-micro);line-height:1.6;
}
.band .aside-note{border-left-color:rgba(255,255,255,.24);color:var(--on-navy-muted)}

.home-frames{margin-top:var(--space-7)}
.home-frame{margin:0}

/* The development rail carries five stages, so it steps up one column earlier
   than the shared four-stage rail. */
@media (min-width:760px){.home .rail, .rail--5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.home .rail, .rail--5{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* ==========================================================================
   Catalogue pages
   The products overview, a product family, a product category and one model.
   They reuse the reference vocabulary above; only the local adjustments the
   catalogue needs live here.
   ========================================================================== */

/* A card whose heading is also the link to the page that lists it. */
.card__title a{color:var(--navy)}
.card__title a:hover{text-decoration:underline;text-underline-offset:.2em}
/* A media slot inside a card thumb keeps the card's own frame. */
.card__thumb .media-slot--pending{border:0;border-radius:0}
/* Reference specification and commercial parameters read as one pair of lists. */
.spec-pair{display:grid;gap:clamp(28px,4vw,56px)}
@media (min-width:980px){.spec-pair{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}


/* ==========================================================================
   Resources, About and inquiry pages
   ========================================================================== */
.resource-empty{max-width:64ch;padding:var(--space-5);border:1px solid var(--line);border-radius:var(--radius);background:var(--bg)}
.resource-article .page-head .meta{margin-top:var(--space-4)}
.resource-article .prose{margin-inline:auto}
.resource-article .prose>*:first-child{margin-top:0}
.resource-article .prose h2{margin:var(--space-7) 0 var(--space-4);font-size:var(--fs-h3)}
.resource-article .prose h3{margin:var(--space-6) 0 var(--space-3);font-size:var(--fs-h4)}
.resource-article .prose p,.resource-article .prose ul,.resource-article .prose ol{margin-top:var(--space-4)}
.resource-article .prose a{color:var(--teal-deep);text-decoration:underline;text-underline-offset:.2em}
.resource-article .prose blockquote{margin:var(--space-6) 0;padding-left:var(--space-5);border-left:3px solid var(--teal)}

.inquiry-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.inquiry-aside{padding:var(--space-5);border-top:3px solid var(--teal);background:var(--soft)}
.inquiry-aside h2{margin:0 0 var(--space-4);font-size:var(--fs-h4)}
.inquiry-aside p+p{margin-top:var(--space-3)}
.inquiry-form{max-width:960px}
.inquiry-form fieldset{min-width:0;margin:0;padding:0;border:0}
.inquiry-form fieldset+fieldset{margin-top:var(--space-7);padding-top:var(--space-6);border-top:1px solid var(--line)}
.inquiry-form legend{width:100%;margin:0 0 var(--space-5);padding:0;color:var(--navy);font-size:var(--fs-h4);font-weight:var(--w-bold)}
.form-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5)}
.form-field{display:flex;flex-direction:column;gap:var(--space-2);margin:0}
.form-field label{color:var(--ink);font-size:var(--fs-small);font-weight:var(--w-semibold)}
.form-field input,.form-field select,.form-field textarea{width:100%;min-height:48px;padding:11px 13px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--bg);color:var(--ink);font:inherit;line-height:1.45}
.form-field textarea{min-height:112px;resize:vertical}
.form-field input[type="file"]{padding:10px;background:var(--soft)}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--teal);outline:3px solid rgba(25,167,160,.18);outline-offset:1px}
.form-field small,.form-required{color:var(--muted);font-size:var(--fs-micro)}
.form-required{margin:var(--space-5) 0 var(--space-3)}
.form-feedback{max-width:960px;margin:0 0 var(--space-6);padding:var(--space-4) var(--space-5);border-left:4px solid var(--teal);background:var(--teal-soft)}
.form-feedback--error{border-left-color:var(--coral);background:#fff6f1}
.form-feedback p{color:var(--ink)}
.form-honeypot{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.inquiry-form .btn--primary{margin-left:0}

@media (min-width:760px){
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-field--wide{grid-column:1/-1}
}
@media (min-width:980px){
  .inquiry-layout{grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr)}
}


/* ==========================================================================
   Homepage V2 — editorial manufacturing reference
   ========================================================================== */
.site-head{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
@media (min-width:760px){.site-head .nav{min-height:82px;padding-block:12px}.site-head .brand__logo{height:42px}.site-head .navlinks>ul>li>a,.site-head .nav-pop__trigger,.site-head .nav-rfq{font-size:clamp(16px,1.05vw,18px)}}
.home .section{overflow:hidden}
.home img{object-fit:cover}
.home .home-placeholder{width:100%;height:100%}
.home-hero{padding:clamp(40px,4vw,64px) 0;background:linear-gradient(115deg,#fff 0 58%,var(--soft-2) 58%)}
.home-hero .hero__grid{align-items:stretch;gap:clamp(32px,4vw,64px)}
.home-hero .hero__copy{align-self:center;padding-block:0}
.home-hero h1{max-width:19ch;font-size:var(--fs-h1);line-height:var(--lh-tight)}
.home-hero__media{position:relative;min-height:clamp(400px,40vw,560px);overflow:hidden;border-radius:2px;box-shadow:0 24px 60px rgba(16,42,67,.12);transition:transform 500ms var(--ease)}
.home-hero__media img{width:100%;height:100%;border:0;border-radius:0}
.home-hero__media figcaption{position:absolute;right:18px;bottom:18px;padding:9px 12px;background:rgba(255,255,255,.92);color:var(--navy);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.home-hero__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
.home-hero__facts span{color:var(--muted);font-size:12px;line-height:1.4;text-transform:uppercase;letter-spacing:.05em}
.home-hero__facts strong{display:block;margin-bottom:5px;color:var(--navy);font-size:clamp(22px,2.4vw,34px);line-height:1}
.home-family-mosaic{grid-template-columns:1fr}
.home-family-mosaic__item,.home-family-mosaic__item .media-card{height:100%}
.home-family-mosaic .media-card__frame{aspect-ratio:4/3;min-height:0}
.home-family-mosaic .media-card__frame img{width:100%;height:100%;aspect-ratio:4/3}
@media (min-width:640px){.home-family-mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.home-family-mosaic{grid-template-columns:repeat(4,minmax(0,1fr))}}
.home-product-grid{display:grid;grid-template-columns:1fr;gap:22px}
.home-product-grid .media-card{height:100%;box-shadow:0 8px 24px rgba(16,42,67,.05);transition:transform 320ms var(--ease),box-shadow 320ms var(--ease),border-color var(--dur) var(--ease)}
.home-product-grid .media-card__frame{aspect-ratio:4/3}
.home-product-grid .media-card__frame img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 500ms var(--ease),filter 500ms var(--ease)}
.home-product-grid .media-card__body{min-height:128px}
.home-product-grid__cta{justify-content:center;margin-top:40px}
@media (hover:hover) and (pointer:fine){.home-product-grid .media-card:hover{transform:translateY(-8px);border-color:var(--teal);box-shadow:0 20px 44px rgba(16,42,67,.14)}.home-product-grid .media-card:hover .media-card__frame img{transform:scale(1.07);filter:saturate(1.08)}}
@media (min-width:600px){.home-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.home-product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (prefers-reduced-motion:no-preference){html.is-motion .home-product-grid .media-card[data-reveal]{transform:translateY(36px) scale(.97);opacity:0;transition:opacity 600ms var(--ease),transform 600ms var(--ease),box-shadow 320ms var(--ease),border-color var(--dur) var(--ease)}html.is-motion .home-product-grid .media-card[data-reveal].is-revealed{transform:none;opacity:1}@media (hover:hover) and (pointer:fine){html.is-motion .home-product-grid .media-card[data-reveal].is-revealed:hover{transform:translateY(-8px)}}}
.home-scale{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:40px;border-block:1px solid rgba(255,255,255,.18)}
.home-scale__item{position:relative;padding:28px 18px;border-right:1px solid rgba(255,255,255,.16)}
.home-scale__item strong{display:block;color:#fff;font-size:clamp(34px,4vw,54px);line-height:1}
.home-scale__item span{display:block;margin-top:10px;color:var(--on-navy-muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.home-scale__item i{position:absolute;left:18px;right:18px;bottom:-1px;height:2px;background:var(--teal-on-navy);transform-origin:left;transform:scaleX(1)}
.home-frames{grid-template-columns:repeat(3,minmax(0,1fr))}
.home-frame{overflow:hidden;aspect-ratio:4/3}.home-frame img{width:100%;height:100%;aspect-ratio:4/3}
@media (min-width:900px){.home-scale{grid-template-columns:repeat(4,minmax(0,1fr))}}
.home-inside-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.home-inside-grid .media-card__frame img{aspect-ratio:4/3}
@media (min-width:1050px){.home-inside-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.home-innovation{background:#fff}
.home-innovation__head{margin-bottom:40px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.home-innovation__head h2{margin:var(--space-3) 0 0}
.home-innovation__subhead{margin:var(--space-2) 0 0;color:var(--teal-deep);font-size:var(--fs-lead);font-weight:var(--w-medium)}
.home-innovation__story{margin:var(--space-3) 0 0;max-width:68ch;color:var(--ink-2);font-size:var(--fs-body);line-height:1.6}
.home-innovation__layout{display:grid;gap:32px}
.home-innovation__images{display:grid;grid-template-columns:1fr;gap:20px}
.home-innovation__card{margin:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);overflow:hidden}
.home-innovation__frame{margin:0;overflow:hidden;aspect-ratio:4/3;background:var(--soft-2);border-bottom:1px solid var(--line-2)}
.home-innovation__frame img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
.home-innovation__caption{padding:14px 16px;display:flex;flex-direction:column;gap:4px;background:#fff}
.home-innovation__tag{color:var(--teal-deep);font-size:var(--fs-micro);font-weight:var(--w-bold);letter-spacing:.08em;text-transform:uppercase}
.home-innovation__label{color:var(--navy);font-size:var(--fs-small);font-weight:var(--w-semibold)}
.home-innovation__details{display:grid;align-content:start;gap:28px}
.home-benefits{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.home-benefits li{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--line-2)}
.home-benefits span{color:var(--teal-deep);font-size:12px;letter-spacing:.12em}
.home-benefits strong{color:var(--navy);font-size:18px}
.home-benefits__item{display:flex;align-items:center;justify-content:space-between;gap:8px}
.home-benefits__badge{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:var(--radius-sm);background:var(--teal-soft);color:var(--teal-deep);font-size:11px;font-weight:var(--w-semibold);letter-spacing:.04em;text-transform:uppercase}
.home-benefits__badge svg{width:12px;height:12px;fill:currentColor}
@media (min-width:760px){.home-innovation__images{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){.home-innovation__layout{grid-template-columns:minmax(0,1fr) minmax(280px,.32fr)}}
.home .rail__media, .rail--5 .rail__media{overflow:hidden}.home .rail__media img, .rail--5 .rail__media img{aspect-ratio:4/3;object-fit:cover}
/* How quality is checked and Audit and program experience: one record, one
   picture. The shared ruled list still serves the blocks that read as a list;
   these two blocks read as galleries, so they step one column, then two, then
   four (audit) or three (quality). */
.proof-cards{display:grid;gap:24px;margin:var(--space-6) 0 0;padding:0;list-style:none}
.proof-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg)}
.proof-card__frame{margin:0;overflow:hidden;aspect-ratio:4/3;border-bottom:1px solid var(--line-2);background:var(--soft-2)}
.proof-card__frame img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
.proof-card__body{display:flex;flex:1 1 auto;flex-direction:column;padding:var(--space-5)}
.proof-card__meta{margin:0 0 var(--space-2);color:var(--muted);font-size:var(--fs-label);letter-spacing:var(--tracking-label);text-transform:uppercase}
.proof-card__title{margin:0;font-size:var(--fs-h4);letter-spacing:var(--tracking-heading)}
.proof-card__title a{color:var(--navy)}
.proof-card__title a:hover{text-decoration:underline;text-underline-offset:.2em}
.proof-card__text{margin:var(--space-3) 0 0;color:var(--ink-2);font-size:var(--fs-small)}
.proof-card__note{margin:auto 0 0;padding:var(--space-3) 0 0 var(--space-4);border-left:2px solid var(--line);color:var(--muted);font-size:var(--fs-micro)}
@media (min-width:640px){.proof-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.proof-cards{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Six quality records read as two full rows of three rather than four plus a gap. */
@media (min-width:1100px){.proof-cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.home-market{display:grid;gap:clamp(32px,5vw,72px);align-items:center}
.home-market__map{margin:0;position:relative;overflow:hidden;border:1px solid var(--line);background-color:var(--navy)}
.home-market__map img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.home-market__bars{display:grid;gap:24px}.home-market__row>div{display:flex;justify-content:space-between;gap:20px;color:var(--navy)}
.home-market__track{display:block;height:5px;margin-top:10px;background:var(--soft-2);overflow:hidden}.home-market__track i{display:block;width:var(--bar-value);height:100%;background:linear-gradient(90deg,var(--teal),var(--coral));transform-origin:left;transform:scaleX(1)}
@media (min-width:900px){.home-market{grid-template-columns:1.2fr .8fr}}
.home-trade-gallery{grid-template-columns:1fr}.home-trade-gallery .media-card__frame{aspect-ratio:3/2}.home-trade-gallery .media-card__frame img{width:100%;height:100%;aspect-ratio:3/2}
@media (min-width:760px){.home-trade-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.home-trade-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}
.home-resource-empty{position:relative;max-width:760px;padding:clamp(28px,5vw,52px);border:1px solid var(--line);background:linear-gradient(135deg,#fff 0 72%,var(--teal-soft) 72%)}
.home-resource-empty:after{content:"01";position:absolute;right:28px;top:18px;color:var(--line);font-size:72px;font-weight:700;line-height:1}
.home-resource-empty h3{position:relative;max-width:18ch;font-size:clamp(24px,3vw,38px);color:var(--navy)}
.home .feature--reverse{padding:clamp(28px,4vw,56px);background:var(--navy);color:#fff}.home .feature--reverse .feature__title{color:#fff}.home .feature--reverse .chip{border-color:rgba(255,255,255,.22);background:transparent;color:var(--on-navy)}.home .feature--reverse .btn--ghost{border-color:#fff}
.home>section:last-child{position:relative}.home>section:last-child:after{content:"";position:absolute;width:220px;height:220px;right:-70px;top:-100px;border:34px solid var(--coral);border-radius:50%;opacity:.2;pointer-events:none}
html.is-motion .home [data-progress-group] i{transform:scaleX(0);transition:transform 700ms var(--ease)}
html.is-motion .home [data-progress-group].is-progressed i{transform:scaleX(1)}
@media (prefers-reduced-motion:no-preference){html.is-motion .home-hero__media{opacity:0;transform:translateY(12px) scale(.985)}html.is-motion .home-hero__media.is-hero-ready{opacity:1;transform:translate3d(var(--hero-x,0),var(--hero-y,0),0) scale(1)}.home-hero__media img{transition:transform 500ms var(--ease)}.home-hero__media.is-hero-ready img{transform:translate3d(calc(var(--hero-x,0) * -.18),calc(var(--hero-y,0) * -.18),0) scale(1.015)}}
@media (max-width:759px){.site-head{backdrop-filter:blur(10px)}.home-hero{background:#fff}.home-hero h1{font-size:var(--fs-h1)}.home-hero__facts{grid-template-columns:1fr}.home-hero__media{min-height:360px}.home-family-mosaic,.home-inside-grid{grid-template-columns:1fr}.home-frames{grid-template-columns:1fr}.home-scale{grid-template-columns:1fr 1fr}.home-innovation__head{display:block}.home-innovation__images{grid-template-columns:1fr}.home-market__map{min-height:auto}}
@media (prefers-reduced-motion:reduce){.home-hero__media,.home-hero__media img,.home [data-progress-group] i{transition:none!important;transform:none!important}}
/* Innovation Story Article Styles */
.story-page {
  background: var(--bg);
}
.story-hero {
  padding-top: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(48px, 6vw, 80px);
  border-bottom: 1px solid var(--line);
}
.story-hero__header {
  max-width: 900px;
  margin-bottom: clamp(32px, 4vw, 52px);
}
.story-hero__header h1 {
  margin: var(--space-3) 0 var(--space-4);
  font-size: clamp(34px, 4.5vw, 56px);
  line-height: var(--lh-tight);
  color: var(--navy);
  letter-spacing: var(--tracking-tight);
}
.story-hero__subtitle {
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.35;
  color: var(--ink);
  font-weight: var(--w-medium);
  margin-bottom: var(--space-4);
}
.story-hero__proof-line {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 8px 16px;
  background: var(--teal-soft);
  border: 1px solid rgba(25, 167, 160, 0.2);
  border-radius: var(--radius-sm);
  color: var(--teal-deep);
  font-size: var(--fs-small);
  font-weight: var(--w-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.story-hero__media {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--soft-2);
  box-shadow: 0 12px 32px -8px rgba(16, 42, 67, 0.08);
}
.story-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.story-hero__opening {
  margin-top: clamp(32px, 4vw, 48px);
  max-width: 800px;
}
.story-hero__opening blockquote {
  margin: 0;
  padding: 24px 32px;
  background: var(--soft);
  border-left: 4px solid var(--teal);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.4;
  color: var(--navy);
  font-weight: var(--w-medium);
}

/* Story Section Shared */
.story-section {
  padding-block: clamp(64px, 7vw, 100px);
  border-bottom: 1px solid var(--line-2);
}
.story-section--soft {
  background: var(--soft);
}
.story-section__num {
  font-size: var(--fs-label);
  font-weight: var(--w-bold);
  letter-spacing: 0.14em;
  color: var(--teal);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.story-section__heading {
  font-size: var(--fs-h2);
  color: var(--navy);
  margin-bottom: var(--space-4);
  line-height: var(--lh-heading);
}

/* Section 01: The Question */
.story-question-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (min-width: 840px) {
  .story-question-grid {
    grid-template-columns: 1.1fr 1fr;
  }
}
.story-comparison {
  display: grid;
  gap: 20px;
  padding: 32px;
  background: var(--soft-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.story-comparison__card {
  padding: 20px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.story-comparison__type {
  font-size: var(--fs-label);
  font-weight: var(--w-bold);
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.story-comparison__flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
  font-size: var(--fs-small);
  font-weight: var(--w-medium);
}
.story-comparison__flow span.arrow {
  color: var(--teal);
}
.story-comparison__pivot {
  text-align: center;
  padding-top: 12px;
  border-top: 1px dashed var(--line-strong);
}
.story-comparison__question {
  display: inline-block;
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: var(--w-bold);
  color: var(--teal-deep);
}

/* Section 02: The Process */
.story-process-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (min-width: 860px) {
  .story-process-grid {
    grid-template-columns: 1.15fr 0.85fr;
  }
}
.story-prototype-figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}
.story-prototype-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.story-prototype-figure figcaption {
  padding: 14px 18px;
  background: var(--navy);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-label);
  font-weight: var(--w-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.story-stats-rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.story-stat-card strong {
  display: block;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.1;
  color: var(--navy);
  font-weight: var(--w-bold);
  letter-spacing: var(--tracking-heading);
}
.story-stat-card span {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-small);
  color: var(--teal-deep);
  font-weight: var(--w-medium);
}

/* Section 03: The Result & Experience */
.story-result-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 40px;
}
@media (min-width: 760px) {
  .story-result-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.story-compare-box {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}
.story-compare-box__head {
  padding: 12px 18px;
  background: var(--soft-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-label);
  font-weight: var(--w-bold);
  letter-spacing: 0.08em;
  color: var(--navy);
  text-transform: uppercase;
}
.story-compare-box img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.story-proof-tags {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 32px;
}
@media (min-width: 680px) {
  .story-proof-tags {
    grid-template-columns: repeat(3, 1fr);
  }
}
.story-proof-tag-item {
  padding: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.story-proof-tag-item h4 {
  margin: 0 0 6px;
  font-size: var(--fs-label);
  font-weight: var(--w-bold);
  letter-spacing: 0.08em;
  color: var(--teal-deep);
  text-transform: uppercase;
}
.story-proof-tag-item p {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--ink-2);
  line-height: 1.5;
}

/* Experience Module (10-sec unfold) */
.story-unfold-block {
  margin-top: clamp(48px, 6vw, 80px);
  padding: clamp(32px, 4vw, 56px);
  background: var(--navy);
  border-radius: var(--radius-md);
  color: #fff;
}
.story-unfold-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
@media (min-width: 860px) {
  .story-unfold-grid {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
}
.story-unfold-media {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.story-unfold-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.story-unfold-stat {
  font-size: clamp(48px, 6vw, 76px);
  line-height: 1;
  font-weight: var(--w-bold);
  color: var(--teal-on-navy);
  letter-spacing: var(--tracking-tight);
}
.story-unfold-label {
  display: block;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: var(--w-semibold);
  letter-spacing: 0.1em;
  color: #fff;
  text-transform: uppercase;
  margin: 8px 0 20px;
}
.story-unfold-desc {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--on-navy);
  margin: 0;
}

/* Section 04: The Protection */
.story-cert-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 36px;
}
@media (min-width: 860px) {
  .story-cert-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
}
.story-cert-card {
  padding: 24px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.story-cert-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(16, 42, 67, 0.06);
}
.story-cert-card__flag {
  font-size: 28px;
  margin-bottom: 12px;
}
.story-cert-card__country {
  font-size: var(--fs-label);
  font-weight: var(--w-bold);
  letter-spacing: 0.1em;
  color: var(--navy);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.story-cert-card__type {
  font-size: var(--fs-small);
  color: var(--teal-deep);
  font-weight: var(--w-medium);
}

/* Section 05: The Evolution */
.story-evolution-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: stretch;
  margin-top: 40px;
}
@media (min-width: 800px) {
  .story-evolution-grid {
    grid-template-columns: 1fr auto 1fr;
    gap: 24px;
    align-items: center;
  }
}
.story-evo-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.story-evo-card__img {
  margin: 0;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--soft-2);
}
.story-evo-card__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story-evo-card__body {
  padding: 24px;
  flex: 1 1 auto;
}
.story-evo-card__badge {
  display: inline-block;
  padding: 3px 10px;
  background: var(--teal-soft);
  color: var(--teal-deep);
  font-size: var(--fs-micro);
  font-weight: var(--w-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}
.story-evo-card__title {
  margin: 0 0 16px;
  font-size: var(--fs-h4);
  color: var(--navy);
}
.story-evo-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.story-evo-card__list li {
  position: relative;
  padding-left: 20px;
  font-size: var(--fs-small);
  color: var(--ink-2);
  margin-bottom: 8px;
}
.story-evo-card__list li:before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--teal);
}
.story-evo-arrow {
  text-align: center;
  padding: 16px;
  color: var(--teal);
  font-size: 24px;
  font-weight: var(--w-bold);
}
@media (max-width: 799px) {
  .story-evo-arrow {
    transform: rotate(90deg);
  }
}

/* ==========================================================================
   Quality and Factory Audits & Compliance
   Two pages with two different jobs: /quality/ explains how product quality is
   controlled from material to shipment, and /quality/audits-compliance/ proves
   global retail and brand audit experience with real report covers. They reuse
   the reference vocabulary above and add only the blocks each argument needs.
   Both read their photographs from real records; a missing photograph shows a
   labelled pending frame rather than a stand-in.
   -------------------------------------------------------------------------- */

/* --- Quality strip: four small photographs, equal in size, one per stage, with
   the single link into the quality system centred underneath them --------- */
.qstrip{margin:var(--space-6) 0 0}
.qstrip__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin:0;padding:0;list-style:none}
.qstrip__item{margin:0}
.qstrip__media{margin:0;overflow:hidden;aspect-ratio:4/3;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--soft-2)}
.qstrip__media img{display:block;width:100%;height:100%;object-fit:cover}
/* Each caption is a stage description rather than a one-word label, so it reads
   as a sentence under its photograph: sentence case, set at body-copy scale
   (between --fs-small and --fs-body so it stays legible under a small
   photograph), and held to two lines so four captions of different length
   still end level. */
.qstrip__label{margin:var(--space-3) 0 0;color:var(--ink-2);font-size:clamp(15px,1.15vw,17px);line-height:1.5;text-align:center;text-wrap:balance}
@media (min-width:760px){.qstrip__label{min-height:calc(1.5em * 2)}}
.qstrip__cta{margin:clamp(28px,3vw,44px) 0 0;text-align:center}
@media (min-width:760px){.qstrip__list{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* --- Trust strip: audit and compliance proof, held apart from the quality
   chain because it is not a fifth step of it ------------------------------- */
.trust-strip{display:grid;gap:clamp(24px,3vw,48px);padding:clamp(28px,4vw,48px);border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:var(--radius);background:var(--bg)}
.trust-strip__title{margin:var(--space-3) 0 0;max-width:36ch;color:var(--navy);font-size:var(--fs-h3);letter-spacing:var(--tracking-heading)}
.trust-strip__programs{margin:var(--space-4) 0 0;color:var(--ink-2);font-size:var(--fs-small);letter-spacing:.08em;text-transform:uppercase}
.trust-strip__action{align-self:center}
@media (min-width:900px){.trust-strip{grid-template-columns:minmax(0,1fr) auto;align-items:center}}
/* With covers in the record the strip becomes a framed row: one column, so the
   five frames get the whole width, and the single link moves under them. */
.trust-strip--frames{grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.trust-strip--frames{grid-template-columns:minmax(0,1fr)}}
.trust-strip--frames .trust-strip__title{max-width:52ch}
.trust-strip--frames .trust-strip__action{margin-top:clamp(24px,3vw,36px);justify-self:center}

/* --- Framed audit covers: a white mat and a soft shadow, the way a report
   cover is presented on a wall, so five covers read as evidence rather than as
   five more product photographs. The frame is the mat, never a crop of the
   cover: the image keeps its 3:4 report proportions inside it ------------- */
.audit-frames{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.2vw,28px);margin:var(--space-5) 0 0;padding:0;list-style:none}
.audit-frame{margin:0;text-align:center}
/* The mat is deep navy — the palette's trust colour — with a fine aqua inlay
   between the frame and the cover, the same navy/aqua pairing the audits band
   already carries. A white certificate inside a navy frame reads as framed
   evidence rather than as five more white rectangles. */
.audit-frame__mat{display:block;padding:clamp(12px,1.4vw,18px);border:1px solid var(--navy-2);border-radius:var(--radius-sm);background:var(--navy);box-shadow:0 2px 4px rgba(16,42,67,.10),0 16px 30px -18px rgba(16,42,67,.45);transition:transform var(--dur-slow) var(--ease),box-shadow var(--dur-slow) var(--ease),background var(--dur) var(--ease)}
/* A report cover is a document, not a photograph: it is shown whole inside the
   mat at its own proportions rather than cropped to fill the frame, so a
   certificate's border and signature block survive the layout. */
.audit-frame__mat img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:contain;border:2px solid var(--teal);background:var(--bg);box-shadow:0 8px 16px -10px rgba(0,0,0,.5)}
.audit-frame__name{margin:var(--space-3) 0 0;color:var(--navy);font-size:clamp(19px,1.4vw,22px);font-weight:var(--w-semibold);letter-spacing:normal;line-height:1.35}
.audit-frame__note{margin:4px 0 0;color:var(--muted);font-size:var(--fs-small);letter-spacing:normal}
.audit-frame__mat img.audit-frame__image--pending{background:var(--soft-2);border-color:var(--line-strong)}
@media (min-width:700px){.audit-frames{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1000px){.audit-frames{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (hover:hover) and (pointer:fine){
  .audit-frame__mat:hover{transform:translateY(-3px);background:var(--navy-2);box-shadow:0 4px 10px rgba(16,42,67,.12),0 22px 38px -18px rgba(16,42,67,.5)}
}
@media (prefers-reduced-motion:reduce){.audit-frame__mat{transition:none}}

/* --- A six-stage flow reads three across, then six once the row is wide
   enough for six labels ---------------------------------------------- */
@media (min-width:760px){.rail--6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1500px){.rail--6{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* --- A photograph slot that states its own size --------------------------- */
.img-slot__image{display:block;width:100%;height:auto;aspect-ratio:var(--img-ratio,4/3);object-fit:cover;border:1px solid var(--line);border-radius:var(--radius);background:var(--soft-2)}
.img-slot__image--pending{border-style:dashed;border-color:var(--line-strong)}
.img-slot__note{margin:var(--space-2) 0 0;color:var(--muted);font-size:var(--fs-micro);letter-spacing:var(--tracking-label);text-transform:uppercase}
figure:hover>.img-slot__note{color:var(--ink-2)}
.media-card__frame .img-slot__image,.audit-card__frame .img-slot__image{border:0;border-radius:0}

/* --- A claim beside the photograph that supports it ---------------------- */
.qblock{display:grid;gap:clamp(24px,3vw,48px);align-items:center}
.qblock__media{margin:0}
.qblock__body>:first-child{margin-top:0}
.qblock__title{margin:0;color:var(--navy);font-size:var(--fs-h3);letter-spacing:var(--tracking-heading)}
.qblock__text{margin:var(--space-4) 0 0;color:var(--ink-2);font-size:var(--fs-small);line-height:var(--lh-body)}
@media (min-width:900px){
  .qblock{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qblock--reverse .qblock__media{order:-1}
}

/* --- Checked items: a material or film property, listed not claimed ------ */
.qlist{display:grid;gap:var(--space-3) var(--space-5);margin:var(--space-5) 0 0;padding:0;list-style:none}
.qlist li{position:relative;padding:0 0 var(--space-3) var(--space-5);border-bottom:1px solid var(--line-2);color:var(--ink-2);font-size:var(--fs-small)}
.qlist li:before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border:1.5px solid var(--teal);border-radius:50%}
/* Two columns only once the list is wide enough to hold its longest item. */
@media (min-width:1200px){.qlist{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* --- Inline flow: the steps inside one stage, read in one line ----------- */
.qflow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);margin:var(--space-5) 0 0;padding:0;list-style:none}
.qflow li{display:flex;align-items:center;gap:var(--space-3);color:var(--ink-2);font-size:var(--fs-small)}
.qflow li:after{content:"→";color:var(--line-strong)}
.qflow li:last-child:after{content:""}
.qflow__pass{color:var(--teal-deep);font-weight:var(--w-semibold)}
.qflow__fail{color:var(--coral);font-weight:var(--w-semibold)}

/* --- Applicable testing by product type: a small, plain table ----------- */
.qtable{width:100%;margin:var(--space-6) 0 0;border-collapse:collapse;font-size:var(--fs-small)}
.qtable th,.qtable td{padding:var(--space-4) var(--space-3);border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.qtable th{color:var(--muted);font-size:var(--fs-label);font-weight:var(--w-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase}
.qtable td:first-child{color:var(--navy);font-weight:var(--w-medium)}
.qtable tr:last-child td{border-bottom:0}

/* --- The page's primary proof: one large real photograph beside the
   figures that carry it --------------------------------------------------- */
.qproof{display:grid;gap:clamp(24px,3vw,48px);align-items:center}
.qproof__media{margin:0}
.qproof__title{margin:0;color:var(--navy);font-size:var(--fs-h2);letter-spacing:var(--tracking-heading)}
.qproof__text{margin:var(--space-4) 0 0;color:var(--ink-2);font-size:var(--fs-lead);line-height:var(--lh-body)}
.qstats{display:grid;gap:var(--space-5);margin:var(--space-6) 0 0;padding:0;list-style:none}
.qstats__value{display:block;color:var(--navy);font-size:clamp(30px,4vw,52px);font-weight:var(--w-bold);letter-spacing:var(--tracking-tight);line-height:1}
.qstats__label{display:block;margin-top:var(--space-2);color:var(--muted);font-size:var(--fs-label);letter-spacing:var(--tracking-label);text-transform:uppercase}
@media (min-width:640px){.qstats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.qproof{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}

/* --- Audit and compliance proof gallery: the report covers are the page's
   visual subject, so they lead and the captions stay short --------------- */
.audit-gallery{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(20px,2.4vw,32px);margin:var(--space-6) 0 0;padding:0;list-style:none}
.audit-gallery>li{flex:1 1 280px;max-width:400px}
.audit-card{margin:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg)}
.audit-card__link{display:block;color:inherit}
/* The same navy mat and aqua inlay as the home audits row: these are the same
   certificates, so they are framed the same way on the page that owns them. */
.audit-card__frame{display:block;margin:0;overflow:hidden;aspect-ratio:3/4;padding:clamp(12px,1.4vw,18px);background:var(--navy)}
.audit-card__frame img{display:block;width:100%;height:100%;object-fit:contain;border:2px solid var(--teal);background:var(--bg);box-shadow:0 8px 16px -10px rgba(0,0,0,.5);transition:transform var(--dur-slow) var(--ease)}
.audit-card__link:hover .audit-card__frame img,.audit-card__link:focus-visible .audit-card__frame img{transform:scale(1.02)}
.audit-card__body{padding:var(--space-5)}
.audit-card__name{margin:0;color:var(--navy);font-size:var(--fs-h4);letter-spacing:var(--tracking-heading)}
.audit-card__subtitle{margin:var(--space-2) 0 0;color:var(--muted);font-size:var(--fs-label);letter-spacing:var(--tracking-label);text-transform:uppercase}
.audit-card__text{margin:var(--space-3) 0 0;color:var(--ink-2);font-size:var(--fs-small)}
@media (prefers-reduced-motion:reduce){.audit-card__frame img{transition:none}}

/* --- Testing gallery: real test photographs, opened larger in the runtime's
   gallery lightbox. The dialog markup is the behaviour's own contract. ----- */
.gallery-thumbs{display:grid;gap:clamp(16px,2vw,24px);margin:var(--space-6) 0 0;padding:0;list-style:none}
.gallery-thumbs li,.gallery-thumbs figure{margin:0}
.gallery-thumbs a{display:block;color:inherit;border-radius:var(--radius)}
.gallery-thumbs img{display:block;width:100%;height:auto;aspect-ratio:var(--img-ratio,4/3);object-fit:cover}
.gallery-thumbs figcaption{margin-top:var(--space-3);color:var(--muted);font-size:var(--fs-micro);letter-spacing:var(--tracking-label);text-transform:uppercase}
.gallery-thumbs .img-slot__note{margin-top:var(--space-3)}
@media (min-width:640px){.gallery-thumbs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.gallery-thumbs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gallery-dialog{width:min(920px,92vw);max-width:920px;max-height:92vh;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);color:var(--ink)}
.gallery-dialog::backdrop{background:rgba(11,33,51,.72)}
.gallery-dialog__frame{margin:0;background:var(--soft-2)}
.gallery-dialog__frame img{display:block;width:100%;height:auto;max-height:68vh;object-fit:contain}
.gallery-dialog__bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-top:1px solid var(--line-2)}
.gallery-dialog__caption{margin:0;flex:1 1 200px;color:var(--ink-2);font-size:var(--fs-small)}
.gallery-dialog__nav{display:flex;gap:var(--space-3);margin-left:auto}

/* --- Four short operating facts, after the report covers ----------------- */
.qpoints{display:grid;gap:0;margin:var(--space-6) 0 0;padding:0;list-style:none}
.qpoints li{position:relative;padding:var(--space-4) 0 var(--space-4) var(--space-6);border-top:1px solid var(--line-2);color:var(--navy);font-size:var(--fs-body)}
.qpoints li:before{content:"";position:absolute;left:0;top:calc(var(--space-4) + .5em);width:10px;height:10px;border-radius:2px;background:var(--teal)}
@media (min-width:760px){.qpoints{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--space-8)}}