/* ===========================================================
   Inner pages — built on the tokens already defined in home.css
   =========================================================== */

/* ---------- page hero ---------- */

.page-hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(900px 420px at 12% -12%,rgba(201,162,39,.13),transparent 62%),
             radial-gradient(760px 420px at 96% 4%,rgba(165,24,62,.18),transparent 64%)}

/* ---------- breadcrumbs ---------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.55)}
.crumbs a{color:rgba(255,255,255,.72);text-decoration:none}
.crumbs a:hover{color:#fff}
.crumbs span.sep{opacity:.45}
.crumbs b{color:#fff;font-weight:600}

/* ---------- generic inner section ---------- */
.inner{padding:var(--sec-y) 0}
/* a following .sheet pulls itself up by --overlap, so the foot owes it back */
.inner:has(+ .sheet){padding-bottom:calc(var(--sec-y) + var(--overlap))}
.inner--tight{padding:64px 0}
.inner--tight:has(+ .sheet){padding-bottom:calc(64px + var(--overlap))}
.inner-head{max-width:780px;margin-bottom:44px}
.inner-head h2{font-family:var(--font-display);font-size:clamp(26px,3vw,38px);line-height:1.14;
  letter-spacing:-.015em;color:var(--ink);margin-top:12px}
.inner-head p{color:var(--body);margin-top:14px;font-size:16px}
.inner.dark{background:var(--navy-950);color:#fff}
.inner.dark .inner-head h2{color:#fff}
.inner.dark .inner-head p{color:rgba(255,255,255,.72)}

/* ---------- card grids ---------- */
.grid-3{display:grid;gap:24px;grid-template-columns:repeat(3,1fr)}
.grid-2{display:grid;gap:24px;grid-template-columns:repeat(2,1fr)}
.grid-4{display:grid;gap:20px;grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ---------- entity card (solution / product / industry / post / job) ---------- */
.ecard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
  text-decoration:none;color:inherit}
.ecard:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:#CBD8E4}
.ecard-media{aspect-ratio:1600/450;background:linear-gradient(180deg,#fff,#F3F5F8);
  border-bottom:1px solid var(--line);overflow:hidden}
.ecard-media img{width:100%;height:100%;object-fit:cover;display:block}
.ecard-media--tall{aspect-ratio:16/10}
.ecard-media--contain{display:grid;place-items:center;padding:18px}
.ecard-media--contain img{width:auto;height:100%;max-height:96px;object-fit:contain;mix-blend-mode:multiply}
.ecard-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1;gap:10px}
.ecard-kicker{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ember)}
.ecard h3{font-family:var(--font-display);font-size:19px;line-height:1.26;color:var(--ink);letter-spacing:-.01em}
.ecard p{color:var(--body);font-size:14.5px;line-height:1.6}
.ecard-foot{margin-top:auto;padding-top:14px;display:flex;align-items:center;gap:8px;
  font-size:14px;font-weight:600;color:var(--ember)}
.ecard-foot .icon{transition:transform .35s var(--ease)}
.ecard:hover .ecard-foot .icon{transform:translateX(4px)}
.ecard-ico{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;font-size:24px;
  color:var(--ember);background:linear-gradient(140deg,rgba(201,162,39,.18),rgba(165,24,62,.09))}

/* ---------- detail layout ---------- */
.detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 352px;gap:48px;align-items:start}
@media(max-width:1020px){.detail-grid{grid-template-columns:1fr}}
.detail-body{min-width:0}
.detail-body > * + *{margin-top:26px}
.detail-body h2{font-family:var(--font-display);font-size:clamp(23px,2.4vw,30px);color:var(--ink);
  letter-spacing:-.015em;margin-top:40px}
.detail-body h3{font-family:var(--font-display);font-size:19px;color:var(--ink);margin-top:28px}
.detail-body p{color:var(--body);line-height:1.74;font-size:16px}
.detail-body ul{display:grid;gap:12px;margin-top:4px}
.detail-body ul li{display:flex;gap:11px;color:var(--body);line-height:1.6;font-size:15.5px}
.detail-body ul li .icon{flex:none;margin-top:3px;color:var(--ember);font-size:17px}
.detail-figure{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#fff}
.detail-figure img{width:100%;display:block}

/* ---------- sticky sidebar ---------- */
.side-stack{display:grid;gap:18px;position:sticky;top:104px}
.side-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow-sm)}
.side-card h3{font-family:var(--font-display);font-size:17px;color:var(--ink);margin-bottom:6px}
.side-card p{color:var(--body);font-size:14px;line-height:1.6;margin-bottom:16px}
.side-card.on-dark{background:var(--navy-900);border-color:rgba(255,255,255,.12);color:#fff}
.side-card.on-dark h3{color:#fff}
.side-card.on-dark p{color:rgba(255,255,255,.72)}
.side-meta{display:grid;gap:12px}
.side-meta div{display:flex;justify-content:space-between;gap:14px;font-size:14px;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.side-meta div:last-child{border:0;padding-bottom:0}
.side-meta dt,.side-meta b{color:var(--muted);font-weight:500}
.side-meta dd,.side-meta span{color:var(--ink);font-weight:600;text-align:right}

/* ---------- variants / datasheets ---------- */
.variant{display:grid;grid-template-columns:168px minmax(0,1fr);gap:22px;align-items:start;
  padding:22px;border:1px solid var(--line);border-radius:18px;background:#fff}
.variant + .variant{margin-top:16px}
.variant-img{border-radius:12px;overflow:hidden;background:#F5F8FB;display:grid;place-items:center;
  aspect-ratio:4/3;border:1px solid var(--line)}
.variant-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:10px}
.variant h3{font-family:var(--font-display);font-size:17px;color:var(--ink)}
.variant p{color:var(--body);font-size:14.5px;line-height:1.64;margin-top:8px}
@media(max-width:620px){.variant{grid-template-columns:1fr}}
.ds-link{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:13.5px;
  font-weight:600;color:var(--ember);text-decoration:none}
.ds-link:hover{text-decoration:underline}

/* ---------- filter rail ---------- */
.filter-rail{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px}

/* ---------- about page ---------- */
.about-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
@media(max-width:960px){.about-split{grid-template-columns:1fr;gap:34px}}
/* ==============================================================
   FIGURES PANEL — "where we stand today"
   Six counters read as a bare scoreboard when they are six equal
   boxes, and the alternating dark tiles looked arbitrary. One soft
   panel with hairline dividers makes it a single designed object,
   and each figure gains an icon and a line of context so the number
   means something on its own.
   ============================================================== */
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;
  background-image:radial-gradient(760px 320px at 10% 0%,rgba(var(--amber-rgb),.07),transparent 60%),
    radial-gradient(620px 300px at 100% 100%,rgba(var(--ember-rgb),.05),transparent 62%)}
.fig{padding:30px 28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.fig:nth-child(3n){border-right:0}
.fig:nth-last-child(-n+3){border-bottom:0}
.fig .fig-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  font-size:20px;color:var(--ember);margin-bottom:16px;
  background:linear-gradient(140deg,rgba(var(--amber-rgb),.18),rgba(var(--ember-rgb),.08))}
.fig .stat-num{font-family:var(--font-display);font-weight:700;font-size:clamp(34px,4vw,46px);
  line-height:1;color:var(--ink);letter-spacing:-.02em}
.fig .stat-num sup{font-size:.46em;color:var(--ember);vertical-align:super;margin-left:2px}
.fig b{display:block;margin-top:10px;font-size:15px;color:var(--ink);font-weight:600}
.fig span.fig-note{display:block;margin-top:5px;font-size:13.6px;line-height:1.55;color:var(--muted)}
@media (max-width:860px){
  .figures{grid-template-columns:1fr 1fr}
  .fig:nth-child(3n){border-right:1px solid var(--line)}
  .fig:nth-child(2n){border-right:0}
  .fig:nth-last-child(-n+3){border-bottom:1px solid var(--line)}
  .fig:nth-last-child(-n+2){border-bottom:0}
}
@media (max-width:520px){
  .figures{grid-template-columns:1fr}
  .fig,.fig:nth-child(3n),.fig:nth-child(2n){border-right:0}
  .fig{border-bottom:1px solid var(--line)}
  .fig:last-child{border-bottom:0}
}

/* The story reads as one column of prose, so the split put a short photo
   beside a tall column of text and left a pool of white space. The prose
   now runs in two columns under a lead, with the photograph as a band. */
.story-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px 48px}
.story-cols p{color:var(--body);line-height:1.76;font-size:16px;margin:0}
@media (max-width:860px){.story-cols{grid-template-columns:1fr;gap:20px}}

.vm-card{padding:32px;border-radius:var(--radius);border:1px solid var(--line);background:#fff}
.vm-card .ecard-ico{margin-bottom:18px}
.vm-card h3{font-family:var(--font-display);font-size:21px;color:var(--ink);margin-bottom:10px}
.vm-card p{color:var(--body);line-height:1.7}
.founder{display:grid;grid-template-columns:300px minmax(0,1fr);gap:44px;align-items:start}
@media(max-width:860px){.founder{grid-template-columns:1fr}}
.founder-photo{border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,.14);background:var(--navy-900)}
.founder-photo img{width:100%;height:auto;display:block}
.founder blockquote{font-family:var(--font-display);font-size:clamp(20px,2.3vw,27px);line-height:1.38;
  letter-spacing:-.01em;color:#fff}
.founder blockquote span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.founder .sig{margin-top:22px}
.founder .sig b{display:block;font-family:var(--font-display);font-size:17px;color:#fff}
.founder .sig span{color:rgba(255,255,255,.6);font-size:14px}
.seg-chips{display:flex;flex-wrap:wrap;gap:10px}
.seg-chip{display:inline-flex;align-items:center;gap:9px;padding:11px 16px;border-radius:12px;
  background:#fff;border:1px solid var(--line);font-size:14px;font-weight:500;color:var(--ink)}
.seg-chip .icon{color:var(--ember);font-size:17px}
/* Used as a link in the Related Solutions band, so it needs the hover the
   rest of the page's cards have. */
a.seg-chip{text-decoration:none;transition:border-color .3s,box-shadow .3s,transform .4s var(--ease)}
a.seg-chip:hover{border-color:rgba(var(--amber-rgb),.5);box-shadow:var(--shadow-sm);
  transform:translateY(-2px)}

/* ---------- careers ---------- */
.job{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;
  padding:26px 28px;border:1px solid var(--line);border-radius:18px;background:#fff;
  text-decoration:none;color:inherit;transition:all .4s var(--ease)}
.job:hover{border-color:#CBD8E4;box-shadow:var(--shadow-sm);transform:translateY(-3px)}
.job + .job{margin-top:14px}
.job h3{font-family:var(--font-display);font-size:19px;color:var(--ink)}
.job-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.job-meta span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);
  background:#F3F6F9;border:1px solid var(--line);border-radius:999px;padding:6px 12px}
@media(max-width:620px){.job{grid-template-columns:1fr}}

/* ---------- posts ---------- */
.post-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:13px;color:var(--muted)}
.post-meta .dot{width:4px;height:4px;border-radius:50%;background:#C7D1DC}
.prose > * + *{margin-top:20px}
.prose h2{font-family:var(--font-display);font-size:26px;color:var(--ink);margin-top:38px}
.prose h3{font-family:var(--font-display);font-size:20px;color:var(--ink);margin-top:30px}
.prose p{color:var(--body);line-height:1.8;font-size:16.5px}
.prose ul,.prose ol{padding-left:22px;display:grid;gap:10px}
.prose li{color:var(--body);line-height:1.7}
.prose ul li{list-style:disc}
.prose ol li{list-style:decimal}
.prose a{color:var(--ember);font-weight:600}
.prose blockquote{border-left:3px solid var(--ember);padding-left:20px;font-size:18px;
  color:var(--ink);font-style:italic}

/* ---------- empty + misc ---------- */
.empty{text-align:center;padding:60px 24px;border:1px dashed #CBD4DF;border-radius:var(--radius);
  color:var(--muted);background:#fff}
/* no banner on these pages, so the fixed masthead's 125px has to be paid
   for before the top padding is space anyone can see */
.sys-page{min-height:60vh;display:grid;place-items:center;text-align:center;
  padding:calc(125px + 100px) 0 100px}
.sys-page h1{font-family:var(--font-display);font-size:clamp(40px,7vw,86px);line-height:1;
  letter-spacing:-.03em;color:var(--ink)}
.sys-page h1 .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sys-page p{color:var(--body);margin:18px auto 30px;max-width:52ch}
.sys-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

@media(max-width:760px){
  .page-hero{padding:118px 0 56px}
  .detail-grid{gap:34px}
  .side-stack{position:static}
}

/* ---------- dropdown navigation ---------- */
.nav-drop{position:relative;display:flex;align-items:center}
.nav-drop > a,.nav-drop > button{display:inline-flex;align-items:center;gap:6px;background:none;border:0;
  font:inherit;color:inherit;cursor:pointer;padding:0}
.nav-caret{font-size:13px;transform:rotate(90deg);opacity:.6;transition:transform .3s var(--ease)}
.nav-drop:hover .nav-caret,.nav-drop.is-open .nav-caret{transform:rotate(90deg) translateX(2px);opacity:1}
.nav-menu{position:absolute;top:calc(100% + 18px);left:50%;transform:translate(-50%,8px);
  min-width:280px;max-width:340px;background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 24px 60px -24px rgba(6,24,38,.4);padding:10px;display:grid;gap:2px;
  opacity:0;visibility:hidden;pointer-events:none;transition:all .3s var(--ease);z-index:60}
.nav-drop:hover .nav-menu,.nav-drop.is-open .nav-menu,.nav-menu.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.nav-menu::before{content:"";position:absolute;top:-18px;left:0;right:0;height:18px}
.nav-menu a{display:block;padding:11px 14px;border-radius:11px;text-decoration:none;
  transition:background .25s var(--ease)}
.nav-menu a:hover{background:#F3F6F9}
.nav-menu a b{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.nav-menu a span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.45}
.mm-group{display:block;padding:14px 0 6px;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.4)}
.mm-sub{padding-left:14px;border-left:1px solid rgba(255,255,255,.12);margin-bottom:8px}
.mm-sub a{font-size:15px !important}
.footer-bottom .legal-link{margin-left:16px;color:rgba(255,255,255,.55);text-decoration:none;font-size:13px}
.footer-bottom .legal-link:hover{color:#fff;text-decoration:underline}

/* ===========================================================
   Premium layer — Maharashtra palette: crimson · gold · deep navy · ivory
   =========================================================== */

/* page base: warm ivory rather than stark white */
body{background:var(--white)}

/* The gold topbar rule and gold scrolled shadow that used to sit here
   belonged to the abandoned crimson/gold palette and were tinting the
   header off-theme. home.css already gives the topbar a --line hairline
   and the scrolled bar its own shadow, so both are left to it. */

/* dark surfaces get a gold hairline at the join instead of a hard edge */
.inner.dark,.section.dark,.cta-band{position:relative}
.inner.dark::after,.section.dark::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,162,39,.32),transparent)}

/* cards lift off the ivory page with a warmer, softer shadow */
.ecard,.side-card,.variant,.job,.vm-card{
  box-shadow:0 1px 2px rgba(20,40,60,.05),0 10px 28px -18px rgba(20,40,60,.18)}
.ecard:hover{box-shadow:0 20px 44px -22px rgba(20,40,60,.26)}

/* gold detail on the premium conversion blocks */
.side-card.on-dark{border-color:rgba(201,162,39,.26)}
.side-card.on-dark h3{letter-spacing:-.01em}

/* breadcrumbs: legible, not faint */
.crumbs{color:rgba(255,255,255,.66)}
.crumbs a{color:rgba(255,255,255,.82)}

/* filter rail reads as a solid control, gold on the active chip */
.filter-rail{box-shadow:0 1px 2px rgba(20,40,60,.05)}
.filter-btn[aria-pressed="true"]{box-shadow:0 8px 18px -8px rgba(14,33,51,.55),inset 0 0 0 1px rgba(201,162,39,.3)}

/* tabular numbers so stats and counters don't jitter while animating */
.stat-num,.testi-count,.ba-count,.g-num b{font-variant-numeric:tabular-nums}

/* ---------- Full navigation: long dropdowns stay on screen ---------- */
.nav-menu{max-height:min(72vh,580px);overflow-y:auto;overscroll-behavior:contain}
/* lists longer than ~8 items go two-up so they don't run off the viewport */
.nav-menu--wide{grid-template-columns:1fr 1fr;max-width:640px;gap:2px 8px}
.nav-menu--wide > .nav-menu-lead{grid-column:1/-1}
@media (max-width:900px){.nav-menu--wide{grid-template-columns:1fr;max-width:340px}}

/* ---------- Breadcrumb band ----------
   Its own light section between the fixed masthead and the dark page hero,
   so the trail never reads as part of the header. The 140px top padding is
   what used to sit on .page-hero: it clears the fixed header. */

/* no flex here: a flex item defaults to min-width:auto, which stops the
   trail wrapping and lets a long one overflow on narrow screens */

/* blueprint grid, faded away from the headline so type stays crisp */
.page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 85% 75% at 72% 50%,#000 8%,transparent 76%);
  mask-image:radial-gradient(ellipse 85% 75% at 72% 50%,#000 8%,transparent 76%)}

/* a hairline in the brand gold where the banner meets the page */
.page-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--amber-rgb),.5),transparent)}

/* the monogram + detection rings */
.ph-art{position:absolute;right:clamp(16px,4vw,72px);top:50%;transform:translateY(-50%);
  width:clamp(180px,20vw,290px);aspect-ratio:1;pointer-events:none;z-index:0}
.ph-art svg{width:100%;height:100%;display:block}
.ph-art .pa-ring{animation:paSpin 48s linear infinite;transform-origin:200px 200px}
@keyframes paSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ph-art .pa-ring{animation:none}}

/* keep the copy clear of the artwork */

.page-hero--slim h1{max-width:26ch}
@media (max-width:1100px){.ph-art{opacity:.75}}
@media (max-width:860px){.ph-art{display:none}.page-hero h1,.page-hero--slim h1{max-width:none}}

/* ==============================================================
   MODEL INDEX — a scannable table above the variant write-ups.
   Some ranges carry 30+ models; reading them as prose does not
   work, so the index lets you compare and jump straight to one.
   ============================================================== */
.model-index{margin:0 0 26px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.model-index-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:14px 18px;background:var(--paper);border-bottom:1px solid var(--line)}
.model-index-head b{font-family:var(--font-display);font-size:14px;color:var(--ink)}
.model-index-head span{font-size:12px;color:var(--muted)}
.model-index ol{list-style:none;margin:0;padding:6px;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.model-index li{min-width:0}
.model-index a.mi-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;
  text-decoration:none;transition:background-color .2s}
.model-index a.mi-row:hover{background:var(--paper)}
.model-index .mi-n{flex:none;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;
  font-size:11px;font-weight:600;background:rgba(var(--ember-rgb),.1);color:var(--ember-text)}
.model-index .mi-name{flex:1;min-width:0;font-size:13.5px;color:var(--body);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.model-index a.mi-row:hover .mi-name{color:var(--ink)}
.model-index .mi-ds{flex:none;font-size:11px;color:var(--ember-text);opacity:.85}
.variant{scroll-margin-top:140px}
@media (max-width:760px){.model-index ol{grid-template-columns:1fr}}

/* ---------- Range facts on a product card ----------
   Lets someone compare the OEM options on a solution page at a
   glance. Both figures are counted from the catalogue, never
   asserted: models = variants we hold copy for, datasheets = PDFs
   we actually have on file. ---------------------------------- */
.ecard-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ecard-meta span{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;
  font-size:11.5px;font-weight:500;background:var(--paper);border:1px solid var(--line);color:var(--body)}
.ecard-meta span b{font-weight:600;color:var(--ink)}
.ecard-meta .em-ds{background:rgba(var(--ember-rgb),.08);border-color:rgba(var(--ember-rgb),.18);color:var(--ember-text)}
.ecard-meta .em-ds b{color:var(--ember-text)}

/* a gold hairline carries the brand down into the dark banner below */

/* the way back out, balancing the trail */

@media (max-width:860px){}
@media (max-width:760px){}

/* ==============================================================
   INNER PAGE BANNER — centred, with the trail under the title.
   One band directly beneath the masthead: eyebrow, title, the
   breadcrumb as a locator line, then the lead and the actions.
   Solution and product pages carry a real system photograph;
   every other page keeps the navy + monogram treatment.
   ============================================================== */
.page-hero{position:relative;overflow:hidden;
  padding:clamp(136px,13vw,168px) 0 clamp(64px,7vw,84px);
  background:
    radial-gradient(760px 420px at 50% -30%,rgba(var(--amber-rgb),.16),transparent 62%),
    radial-gradient(640px 400px at 50% 130%,rgba(var(--ember-rgb),.14),transparent 64%),
    var(--navy-950);
  color:#fff}
.page-hero--slim{padding:clamp(128px,12vw,152px) 0 clamp(52px,6vw,66px)}
.page-hero > .container{position:relative;z-index:2}

/* blueprint grid, faded at the edges */
.page-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000 10%,transparent 78%);
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000 10%,transparent 78%)}
/* gold hairline where the banner meets the page */
.page-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:3;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--amber-rgb),.5),transparent)}

.page-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* the trail, directly under the title */

/* ---- the monogram, now a centred watermark behind the title ---- */
.ph-art{position:absolute;z-index:1;aspect-ratio:1;pointer-events:none}
.ph-art svg{width:100%;height:100%;display:block}
.ph-art .pa-ring{animation:paSpin 48s linear infinite;transform-origin:200px 200px}
@keyframes paSpin{to{transform:rotate(360deg)}}
.ph-art.reveal{transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:.15s}
.has-anim .ph-art.reveal{opacity:0;transform:translate(-50%,-50%) scale(.92)}
.ph-art.reveal.is-in,.has-anim .ph-art.reveal.is-in{opacity:.5;transform:translate(-50%,-50%) scale(1)}
@media (prefers-reduced-motion:reduce){
  .has-anim .ph-art.reveal{opacity:.5;transform:translate(-50%,-50%)}
  .ph-art .pa-ring{animation:none}
}
@media (max-width:860px){.ph-art{opacity:.34;width:260px}}

/* ---------- Mega menu ----------
   A generous hover bridge spans the gap between the trigger and the panel so
   the pointer can travel into it; the JS close delay covers the rest. */
.nav-drop{position:relative}
.nav-drop::after{content:"";position:absolute;left:-10px;right:-10px;top:100%;height:22px;
  display:none}
.nav-drop:hover::after,.nav-drop.is-open::after{display:block}
.nav-drop.is-open > a,.nav-drop.is-open > button{color:var(--ink)}

/* grouped columns */
.nav-menu{padding:14px}
.mega{display:grid;gap:4px 22px;min-width:max-content}
.mega--3{grid-template-columns:repeat(3,minmax(170px,1fr))}
.mega--2{grid-template-columns:repeat(2,minmax(190px,1fr))}
/* The Company menu carries a one-line description under each link, so its
   columns need more room than the plain link lists in Solutions. */
.mega--co{grid-template-columns:repeat(2,minmax(272px,1fr))}
.nav-menu .mega--co a{padding:9px 12px}
.mega-col{display:flex;flex-direction:column;gap:1px}
.mega-h{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);padding:8px 12px 6px;border-bottom:1px solid var(--line);margin-bottom:4px}
.nav-menu .mega a{display:block;padding:8px 12px;border-radius:9px;font-size:13.5px;
  color:var(--body);text-decoration:none;transition:background-color .18s,color .18s}
.nav-menu .mega a:hover,.nav-menu .mega a:focus-visible{background:var(--paper);color:var(--ink)}
.nav-menu .mega a b{display:block;font-size:13.5px;font-weight:500;color:inherit}
/* the overview link, spanning the foot of the panel */
.mega-all{grid-column:1/-1;margin-top:8px;padding-top:10px;border-top:1px solid var(--line)}
.nav-menu .mega-all a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-weight:600;color:var(--ember-text)}
.nav-menu .mega-all a:hover{background:rgba(var(--ember-rgb),.07)}
@media (max-width:1180px){.mega--3,.mega--2{grid-template-columns:1fr}}
/* a mega panel sizes to its columns, not the old single-list width */
.nav-menu:has(.mega){max-width:min(92vw,900px);width:max-content;max-height:min(78vh,620px)}
.nav-menu:has(.mega--3){min-width:640px}
.nav-menu:has(.mega--2){min-width:560px}
/* keep it inside the viewport near the right-hand end of the bar */
.nav-drop:nth-last-child(-n+3) .nav-menu:has(.mega){left:auto;right:0;transform:translate(0,8px)}
.nav-drop:nth-last-child(-n+3):hover .nav-menu:has(.mega),
.nav-drop:nth-last-child(-n+3).is-open .nav-menu:has(.mega){transform:translate(0,0)}
@media (max-width:1180px){.nav-menu:has(.mega){min-width:0;max-width:92vw}}
/* ==============================================================
   LIGHT INNER BANNER
   The banner is a light band and the masthead is its own solid bar
   above it, so the two never read as one block. Nothing in the
   banner sits on a dark surface any more.
   ============================================================== */
.page-hero{
  background:
    radial-gradient(760px 420px at 50% -40%,rgba(var(--amber-rgb),.13),transparent 64%),
    radial-gradient(620px 380px at 50% 140%,rgba(var(--ember-rgb),.09),transparent 66%),
    linear-gradient(180deg,#FFF8F4 0%,var(--paper) 100%);
  color:var(--ink);
  border-bottom:1px solid var(--line)}

/* the blueprint grid flips to dark lines on the light ground */
.page-hero::before{
  background-image:
    linear-gradient(rgba(10,27,42,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(10,27,42,.05) 1px,transparent 1px)}
/* gold hairline at the foot of the band */
.page-hero::after{background:linear-gradient(90deg,transparent,rgba(var(--amber-rgb),.6),transparent)}

.page-hero .eyebrow{color:var(--ember-text);justify-content:center}
.page-hero h1{color:var(--ink)}
.page-hero h1 .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}
.page-hero .lead{color:var(--body)}

/* the trail, on light */
.page-hero .crumbs{color:var(--muted)}
.page-hero .crumbs a{color:var(--body)}
.page-hero .crumbs a:hover{color:var(--ember-text)}
.page-hero .crumbs span.sep{opacity:.5}
.page-hero .crumbs b{color:var(--ink)}

/* the secondary button was glass-on-dark; give it a light-surface form */
.page-hero .btn-glass{background:#fff;color:var(--ink);border-color:#DDE4EC;
  box-shadow:0 2px 6px -3px rgba(10,27,42,.12)}
.page-hero .btn-glass:hover{background:#fff;border-color:rgba(var(--ember-rgb),.4);
  color:var(--ember-text);transform:translateY(-2px)}

/* the monogram, tuned for a light ground */
.ph-art{opacity:.28}
.ph-art.reveal.is-in,.has-anim .ph-art.reveal.is-in{opacity:.18}
@media (prefers-reduced-motion:reduce){.has-anim .ph-art.reveal{opacity:.18}}
.ph-art .pa-r{stroke:rgba(10,27,42,.5)!important}
@media (max-width:860px){.ph-art{opacity:.12}}
/* ==============================================================
   INNER BANNER — left-aligned, trail on top, mark on the right.
   The background drifts slowly; every animation here is decorative
   (background layers only), so if none of it runs the banner is
   still complete and legible.
   ============================================================== */

/* the monogram sits to the right of the copy */

.has-anim .ph-art.reveal{opacity:0;transform:translateY(-50%) scale(.94)}
.ph-art.reveal.is-in,.has-anim .ph-art.reveal.is-in{opacity:.28;transform:translateY(-50%) scale(1)}
@media (prefers-reduced-motion:reduce){.has-anim .ph-art.reveal{opacity:.28;transform:translateY(-50%)}}
@media (max-width:980px){.ph-art{opacity:.12;right:-40px}}
@media (max-width:760px){.ph-art{display:none}.page-hero h1,.page-hero .lead{max-width:none}}

/* ---- drifting background ---- */
.ph-glow{position:absolute;inset:-25%;z-index:0;pointer-events:none;overflow:hidden}
.ph-glow i{position:absolute;display:block;border-radius:50%;filter:blur(70px);opacity:.75}
.ph-glow .g1{width:44%;aspect-ratio:1;left:-4%;top:-18%;
  background:radial-gradient(circle,rgba(var(--amber-rgb),.30),transparent 68%)}
.ph-glow .g2{width:38%;aspect-ratio:1;right:2%;bottom:-24%;
  background:radial-gradient(circle,rgba(var(--ember-rgb),.22),transparent 68%)}
.ph-glow .g3{width:30%;aspect-ratio:1;left:38%;top:30%;
  background:radial-gradient(circle,rgba(var(--amber-rgb),.16),transparent 70%)}
.has-anim .ph-glow .g1{animation:phDrift1 26s ease-in-out infinite alternate}
.has-anim .ph-glow .g2{animation:phDrift2 32s ease-in-out infinite alternate}
.has-anim .ph-glow .g3{animation:phDrift3 38s ease-in-out infinite alternate}
@keyframes phDrift1{from{transform:none}to{transform:translate(14%,10%) scale(1.14)}}
@keyframes phDrift2{from{transform:none}to{transform:translate(-12%,-8%) scale(1.1)}}
@keyframes phDrift3{from{transform:none}to{transform:translate(-8%,12%) scale(1.18)}}
/* the blueprint grid pans with it */
.has-anim .page-hero::before{animation:phGrid 44s linear infinite}
@keyframes phGrid{from{background-position:0 0}to{background-position:56px 56px}}
@media (prefers-reduced-motion:reduce){
  .has-anim .ph-glow i,.has-anim .page-hero::before{animation:none}
}
/* ==============================================================
   BANNER CONTENT — centred, and vertically in the middle of the
   band. The mark stays right-aligned as a watermark behind it.
   ============================================================== */
/* ==============================================================
   BANNER — split: copy on the left, the real thing on the right.
   Product pages show the product, solution pages show the system,
   everything else shows the monogram.
   ============================================================== */
.page-hero{text-align:left;display:block;min-height:0;
  padding:clamp(128px,12vw,156px) 0 clamp(56px,6vw,72px)}
/* the banner art is positioned with z-index, so a static container would
   be painted under it — the drawn rail crossed the headline and the lead */
.page-hero > .container{position:relative;z-index:2;max-width:var(--container);margin-inline:auto}
.ph-grid{display:grid;grid-template-columns:1.14fr .86fr;gap:clamp(28px,4vw,56px);
  align-items:center}
.ph-copy{min-width:0}
.page-hero .eyebrow{justify-content:flex-start}
.page-hero h1{max-width:none;margin:0}
.page-hero .lead{max-width:52ch;margin:18px 0 0}
.page-hero-actions{justify-content:flex-start}

/* the media panel */
.ph-media{position:relative;z-index:2;min-width:0;border-radius:20px;overflow:hidden;
  background:#fff;border:1px solid var(--line);
  box-shadow:0 30px 70px -34px rgba(10,27,42,.3),0 2px 8px -4px rgba(10,27,42,.08);
  aspect-ratio:16/10;display:grid;place-items:center}
.ph-media img{width:100%;height:100%;object-fit:cover;display:block}
/* studio shots on white sit better contained than cropped */
.ph-media--contain{background:#fff;padding:22px}
.ph-media--contain img{object-fit:contain}
.ph-media.reveal{transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:.12s}
.has-anim .ph-media.reveal{opacity:0;transform:translateY(18px)}
.ph-media.reveal.is-in,.has-anim .ph-media.reveal.is-in{opacity:1;transform:none}

/* when there is no photograph, the monogram fills the slot instead */
.ph-mark{display:grid;place-items:center;aspect-ratio:16/10;overflow:visible}
.ph-mark svg{width:min(58%,236px);height:auto;opacity:.5}

@media (max-width:900px){
  .ph-grid{grid-template-columns:1fr;gap:30px}
  .page-hero h1,.page-hero .lead{max-width:none}
  .ph-media{aspect-ratio:16/9}
  .ph-mark{display:none}
}

/* ==============================================================
   BANNER — wave foot (Electrical Panel Protection only).
   Opt in with .page-hero--wave. The square blueprint grid is
   switched off and the band's bottom edge is cut into a smooth
   wave instead of a straight line. The section below carries
   .no-sheet so it sits flush under the wave rather than riding
   up over it with rounded corners.
   ============================================================== */
.page-hero--wave::before{background-image:none}
.page-hero--wave{border-bottom:0;
  padding-bottom:calc(clamp(56px,6vw,72px) + clamp(38px,4.6vw,64px))}
/* the gold hairline belongs to a straight edge, not a wave */
.page-hero--wave::after{display:none}
.ph-wave{position:absolute;left:0;right:0;bottom:-1px;z-index:3;
  width:100%;height:clamp(40px,5vw,68px);display:block;pointer-events:none}
.ph-wave path{fill:var(--white)}
@media (max-width:760px){.ph-wave{height:30px}}

/* ==============================================================
   BANNER — orange gradient (Gas Suppression Systems only).
   Opt in with .page-hero--orange. The band carries the brand
   gradient, so every piece of type on it switches to navy: navy
   on the amber end is 9.4:1 and on the ember end 6.0:1, where
   white would be 2.2:1 and 3.9:1 and fail. The section below
   carries .no-sheet so it meets the band flush instead of riding
   up over it with rounded corners.
   ============================================================== */
.page-hero--orange{
  background:linear-gradient(100deg,#F7A42B 0%,#F2941C 42%,#E8491D 100%);
  border-bottom:0}
/* the amber/ember glows have nothing to add on an orange ground */
.page-hero--orange .ph-glow{display:none}
.page-hero--orange::before{
  background-image:
    linear-gradient(rgba(6,24,38,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(6,24,38,.055) 1px,transparent 1px)}
/* a gold hairline is invisible here; use a dark one */
.page-hero--orange::after{background:linear-gradient(90deg,transparent,rgba(6,24,38,.22),transparent)}

.page-hero--orange .eyebrow{color:var(--navy-900)}
.page-hero--orange .eyebrow::before{background:var(--navy-900)}
.page-hero--orange h1{color:var(--navy-950)}
.page-hero--orange h1 .grad-text{background:none;-webkit-text-fill-color:var(--navy-950);
  color:var(--navy-950)}
.page-hero--orange .lead{color:rgba(6,24,38,.86)}
/* the primary button is the same gradient as the band, so it has to invert */
.page-hero--orange .btn-primary{background:var(--navy-900);color:#fff;border-color:transparent}
.page-hero--orange .btn-primary:hover{background:var(--navy-950)}
.page-hero--orange .btn-glass{background:#fff;color:var(--ink);border-color:transparent;
  box-shadow:0 6px 16px -10px rgba(6,24,38,.5)}
.page-hero--orange .btn-glass:hover{background:#fff;color:var(--ink);
  border-color:transparent;transform:translateY(-2px)}
/* the white media card gains contrast on the orange, so it needs less shadow */
.page-hero--orange .ph-media{box-shadow:0 26px 60px -34px rgba(6,24,38,.5)}
.page-hero--orange .ph-mark svg{opacity:.3}
.page-hero--orange .ph-mark .pa-r{stroke:rgba(6,24,38,.45)!important}

/* ==============================================================
   BANNER — home-page treatment (Aspiration Smoke Detection).
   Opt in with .page-hero--guard. The band drops the light cream
   ground and the square blueprint grid and takes the home hero's
   own surface instead: navy gradient, two warm glows and the
   drifting embers canvas. In place of the grid it carries a drawn
   room — a sampling pipe along the ceiling, air drawn back to the
   detector, smoke off the rack caught at the nearest sample point
   long before there is fire. The photograph is untouched.

   On this dark ground every accent switches to amber: the ember
   red (#C53612) reads 2.5:1 on the navy and fails, amber reads
   ~8:1. Headings need an explicit #fff or the global
   h1,h2,h3,h4{color:var(--ink)} wins over inherited white.
   ============================================================== */
.page-hero--guard{
  background:
    radial-gradient(1100px 620px at 88% -8%,rgba(var(--amber-rgb),.20),transparent 60%),
    radial-gradient(900px 560px at -8% 108%,rgba(var(--ember-rgb),.18),transparent 62%),
    linear-gradient(180deg,var(--navy-900) 0%,var(--navy-950) 100%);
  color:#fff;border-bottom:0}
.page-hero--guard::before{background-image:none}
.page-hero--guard::after{background:linear-gradient(90deg,transparent,rgba(var(--amber-rgb),.6),transparent)}

.page-hero--guard .eyebrow{color:var(--amber)}
.page-hero--guard .eyebrow::before{background:var(--amber)}
.page-hero--guard h1{color:#fff}
.page-hero--guard .lead{color:rgba(255,255,255,.74)}
.page-hero--guard .crumbs{color:rgba(255,255,255,.6)}
.page-hero--guard .crumbs a{color:rgba(255,255,255,.78)}
.page-hero--guard .crumbs a:hover{color:var(--amber)}
.page-hero--guard .crumbs b{color:#fff}
.page-hero--guard .btn-glass{background:rgba(6,24,38,.18);color:#fff;border-color:rgba(255,255,255,.62)}
.page-hero--guard .btn-glass:hover{background:rgba(6,24,38,.3);border-color:#fff}
.page-hero--guard .ph-media{border-color:rgba(255,255,255,.14);
  box-shadow:0 34px 80px -34px rgba(0,0,0,.72),0 2px 8px -4px rgba(0,0,0,.4)}

/* the drifting embers, same canvas the home hero uses */
.page-hero--guard #embers{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}

/* the drawn room, in place of the blueprint grid */
/* The scene is a 1600x544 drawing stretched over the whole band, so its
   ceiling rail lands at ~73% of the band's height — which is wherever the
   copy happens to end up. On a three-line headline it ran straight through
   the lead paragraph. Anchoring it to the foot of the band keeps the rail
   below the type on every page. */
.ph-scene{position:absolute;inset:auto 0 0 0;height:min(74%,300px);z-index:1;
  pointer-events:none;overflow:hidden}
.ph-scene svg{width:100%;height:100%;display:block}
.ps-line{stroke:#fff;opacity:.13}
.ps-line--soft{stroke:#fff;opacity:.08}
/* the scene is laid out for a wide band; on a narrow one it letterboxes
   into the middle of the copy, so the band keeps only the navy, the
   glows and the embers there */
@media (max-width:900px){.ph-scene{display:none}}

/* Sampled air travelling back along the pipe to the detector.
   The dash pattern is visible at rest, so a frame that never
   advances still reads as a flow rather than a blank pipe. */
.ps-flow{stroke-dasharray:70 420;stroke-dashoffset:0;opacity:.75}
.has-anim .ps-flow{animation:psFlow 5s linear infinite}
.ps-flow--b{animation-delay:-1.66s}
.ps-flow--c{animation-delay:-3.33s}
@keyframes psFlow{to{stroke-dashoffset:-490}}

/* Detection rings at the sample point that sees the smoke first. */
.ps-ring{transform-origin:790px 198px;opacity:0}
.has-anim .ps-ring{animation:psRing 3.2s ease-out infinite}
.ps-ring--b{animation-delay:-1.6s}
@keyframes psRing{
  0%{transform:scale(.45);opacity:.75}
  70%{opacity:0}
  100%{transform:scale(2.8);opacity:0}}

/* The wisp lifting off the rack. */
.has-anim .ps-smoke{animation:psSmoke 7s ease-in-out infinite alternate}
.ps-smoke--b{animation-delay:-3.5s}
@keyframes psSmoke{
  0%{transform:translateX(0) scaleY(1);opacity:1}
  100%{transform:translateX(6px) scaleY(1.07);opacity:.55}}

@media (prefers-reduced-motion:reduce){
  .has-anim .ps-flow,.has-anim .ps-ring,.has-anim .ps-smoke{animation:none}
  .ps-ring{opacity:.45;transform:scale(1.7)}
}


/* ==============================================================
   MASTHEAD — WHITE ON EVERY PAGE
   The banner below is navy, and for a while the header borrowed
   that navy so the two read as one field. The client asked on
   2026-10-24 for a white header instead, so the dark treatment
   that used to live here has been removed outright: home.css
   already gives .masthead a solid white bar, the navy logo and
   dark nav labels, and with nothing overriding it those apply to
   the inner pages as well. The white bar over the dark band is
   what now separates the header from the banner, so the extra
   hairline/surface rules that did that job are gone too.
   ============================================================== */

/* ==============================================================
   BANNER CENTRING
   The header is fixed, so the band's usable area starts below it,
   not at y=0. Padding of 168/72 left the content sitting ~19px
   high in that usable area. Tying the top padding to the header
   height plus the bottom padding makes the gap above the copy and
   the gap below it equal, which centres the copy and the photo.
   ============================================================== */
/* Fixed banner height so every inner page matches. The masthead is
   fixed and overlays the band, so --mast is reserved as padding-top
   and the content is centred in what is left. min-height rather than
   height: a three-line title would otherwise be clipped by the
   .page-hero overflow:hidden. */
.page-hero--guard{--mast:125px;--band-foot:clamp(44px,4.6vw,60px);
  /* one fixed height across every inner page — the copy is centred in it, so
     a one-line title and a three-line one still produce the same band */
  height:calc(500px + var(--band-foot));min-height:0;
  display:flex;align-items:center;
  padding:calc(var(--mast) + var(--band-foot)) 0 var(--band-foot)}
@media (max-width:900px){.page-hero--guard{height:auto;min-height:calc(430px + var(--band-foot))}}
.page-hero--guard > .container{width:100%}
.page-hero--guard.page-hero--slim{padding:calc(var(--mast) + var(--band-foot)) 0 var(--band-foot)}
@media (max-width:1080px){.page-hero--guard{--mast:104px}}
@media (max-width:860px){.page-hero--guard{--mast:76px}}

/* ==============================================================
   INNER CARDS TAKE THE HOME PAGE'S CARD TREATMENT
   .ecard already matched .sol-card on surface, radius, border and
   hover lift. The two things it lacked were the cursor-tracked
   amber wash and the amber hover border — so only those are added
   here rather than restating the whole card.

   .ecard needs position:relative for the wash to anchor to it, and
   the media and body sit above it on z-index so the wash stays
   behind the photograph and the text.
   ============================================================== */
.ecard{position:relative}
.ecard::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),
    rgba(var(--amber-rgb),.10),transparent 45%);
  transition:opacity .4s}
.ecard:hover::before{opacity:1}
.ecard:hover{border-color:rgba(var(--amber-rgb),.45)}
.ecard-media,.ecard-body{position:relative;z-index:1}

/* ==============================================================
   WIDE OEM BANNERS IN THE HERO SLOT
   Eleven solution pages carry a 1600x450 OEM banner with the brand
   name baked into the artwork. The default 16:10 card cover-cropped
   roughly half of it away, including that name; switching to
   contain showed all of it but left deep empty bands above and
   below. Matching the card to the asset's own ratio does both --
   nothing cropped, nothing padded.
   ============================================================== */
.ph-media--band{aspect-ratio:var(--band,1600/450);padding:0;background:#fff}
.ph-media--band img{width:100%;height:100%;object-fit:cover}





/* ==============================================================
   SOLUTION DETAIL — built from the home page's own components
   Uses .section-head / .eyebrow / .h2 / .lead for the heading and
   .sol-card for every card, so the type scale, the hover lift and
   the amber cursor wash are literally the home page's, not a
   second implementation of them. home.js binds the --mx/--my
   spotlight to .sol-card, so these pick it up with no extra JS.
   Only spacing is set here; nothing restyles the card itself.
   ============================================================== */
.sol-brief{margin:0 0 44px}
.sol-brief .section-head{display:block;margin:0 0 22px}
.sol-brief .section-head .lead{margin-top:12px;max-width:62ch}
.sol-brief .grid-3{grid-template-columns:1fr 1fr;gap:16px;margin:0 0 16px}
.sol-brief .grid-3:last-child{margin-bottom:0}
.sol-brief .sol-card{padding:22px 24px}
.sol-brief .sol-card h3{font-size:1.02rem;margin-bottom:7px}
.sol-brief .sol-card p{font-size:14.3px;line-height:1.6;margin-bottom:0}

@media (max-width:620px){.sol-brief .grid-3{grid-template-columns:1fr}}
/* three closing cards in a two-column grid leave the last one stranded;
   letting standards span the row closes the block and suits its longer text */
.sol-brief .grid-3:last-of-type > .sol-card:last-child{grid-column:1/-1}

/* ==============================================================
   SOLUTION LANDING PAGE
   Full-width stacked sections for a technical landing page, in
   place of the narrow doc column. Benefit and application cards
   reuse the home page's .sol-card and .sol-ico, so the hover lift
   and the amber cursor wash are the home component, not a copy.
   Only the pieces home has no equivalent for are defined here.
   ============================================================== */
.sol-ico svg{width:24px;height:24px}
.sol-card .sol-ico{margin-bottom:16px}
/* A linked solution or product without a hero photograph still needs the
   media band, otherwise its card sits shorter than the rest of the row.
   The solution's own icon fills it instead of a stock image. */
/* A sector logo wall holds far fewer names than the full clients page, so
   six columns leaves a ragged last row. Four reads as a deliberate grid and
   gives each logo more room. The ladder is repeated here because home.css
   sets the 6-column breakpoints after .client-wall and would otherwise win. */
/* Case-study card: anonymised on the client's instruction — no logo, no
   name, no figures. A scope chip, the facility type as the heading, then
   the problem and what was done as one labelled pair each. */
.case-scope{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ember-text);margin-bottom:10px}
.case-scope .icon{width:15px;height:15px}
/* ==============================================================
   ORGANISATION CHART
   A board row above a department row, joined by a centred spine.
   The connectors are drawn with pseudo-elements rather than SVG so
   the chart reflows at phone width instead of scrolling sideways.
   ============================================================== */
.org-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;max-width:860px;margin:0 auto}
.org-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:24px 22px;text-align:center;transition:border-color .4s,box-shadow .4s,transform .4s var(--ease)}
.org-card:hover{border-color:rgba(var(--amber-rgb),.45);box-shadow:var(--shadow-sm);transform:translateY(-3px)}
.org-card .org-ini{width:52px;height:52px;margin:0 auto 14px;border-radius:50%;display:grid;
  place-items:center;font-family:var(--font-display);font-weight:700;font-size:17px;color:#fff;
  background:var(--grad)}
.org-card b{display:block;font-family:var(--font-display);font-size:17px;color:var(--ink);line-height:1.3}
.org-card span{display:block;margin-top:5px;font-size:12.6px;letter-spacing:.06em;
  text-transform:uppercase;font-weight:600;color:var(--ember-text)}
.org-card--lead{grid-column:2/4}
.org-board > .org-card:nth-child(2){grid-column:1/3}
.org-board > .org-card:nth-child(3){grid-column:3/5}
/* the spine between the board row and the departments */
.org-spine{height:46px;position:relative;margin:0 auto}
.org-spine::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;
  transform:translateX(-50%);background:linear-gradient(180deg,rgba(var(--amber-rgb),.6),rgba(var(--ember-rgb),.25))}
.org-depts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.org-dept{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 22px 20px;
  transition:border-color .4s,box-shadow .4s,transform .4s var(--ease)}
.org-dept:hover{border-color:rgba(var(--amber-rgb),.45);box-shadow:var(--shadow-sm);transform:translateY(-3px)}
.org-dept h3{font-size:15.5px;line-height:1.3;margin:0 0 12px;color:var(--ink)}
.org-dept .org-lead{display:flex;align-items:center;gap:11px;padding-top:12px;border-top:1px solid var(--line)}
.org-dept .org-ini{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;font-size:12.5px;color:#fff;background:var(--grad)}
.org-dept .org-lead div b{display:block;font-size:14px;color:var(--ink);line-height:1.3}
.org-dept .org-lead div span{display:block;font-size:12.6px;color:var(--muted);line-height:1.4}
.org-dept ul{list-style:none;margin:12px 0 0;padding:0}
.org-dept li{font-size:13.6px;line-height:1.6;color:var(--body);padding-left:14px;position:relative}
.org-dept li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;
  background:rgba(var(--ember-rgb),.45)}
@media (max-width:860px){.org-depts{grid-template-columns:1fr 1fr}}
@media (max-width:720px){
  .org-board{grid-template-columns:1fr}
  .org-card--lead,.org-board > .org-card:nth-child(2),
  .org-board > .org-card:nth-child(3){grid-column:1/-1}
}
@media (max-width:560px){.org-depts{grid-template-columns:1fr}}

/* Named person: an initials badge beside a name and role. Used by the
   organisation and team pages (these rules were removed with the old
   testimonial-style case card and are needed again). */
.case-q{font-size:14.3px;line-height:1.65;color:var(--body);font-style:italic;
  border-left:2px solid rgba(var(--amber-rgb),.5);padding-left:14px;margin:0 0 18px}
.case-by{display:flex;align-items:center;gap:11px;margin-top:auto;padding-top:14px;
  border-top:1px solid var(--line)}
.case-by .t-avatar{width:38px;height:38px;flex:none;border-radius:50%;display:grid;
  place-items:center;font-family:var(--font-display);font-weight:700;font-size:12.5px;
  color:#fff;background:var(--grad)}
.case-by > div b{display:block;font-size:14px;color:var(--ink);line-height:1.3}
.case-by > div span{display:block;font-size:12.6px;color:var(--muted);line-height:1.4}

.case-pair{margin:0 0 16px}
.case-pair:last-child{margin:0}
.case-pair b{display:block;font-size:12px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.case-pair p{margin:0;font-size:14.4px;line-height:1.65;color:var(--body)}
.case-pair--do{padding-top:14px;border-top:1px solid var(--line)}
.case-pair--do b{color:var(--ember-text)}

.client-wall--4{grid-template-columns:repeat(4,1fr);gap:16px}
/* A partner logo that links through to its product page. */
a.cw{text-decoration:none}
a.cw:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
@media (max-width:980px){.client-wall--4{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.client-wall--4{grid-template-columns:repeat(2,1fr)}}
.sol-media--ico{background:linear-gradient(180deg,#FFF6EC,#F3F5F8)}
.sol-media--ico .icon{width:58px;height:58px;color:var(--ember-text);stroke-width:1.5}
a.sol-card{text-decoration:none;color:inherit}

/* 03 — how it works: four numbered steps on a connecting rule */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative}
.steps::before{content:"";position:absolute;left:8%;right:8%;top:27px;height:2px;
  background:linear-gradient(90deg,rgba(var(--amber-rgb),.5),rgba(var(--ember-rgb),.5));
  border-radius:2px}
/* A delivery timeline is not always four stages. The connector line is
   drawn once across the row, so these only change the column count. */
.steps--3{grid-template-columns:repeat(3,1fr)}
.steps--5{grid-template-columns:repeat(5,1fr)}
.steps--6{grid-template-columns:repeat(6,1fr)}
@media (max-width:1180px){.steps--5,.steps--6{grid-template-columns:repeat(3,1fr);gap:28px 18px}
  .steps--5::before,.steps--6::before{display:none}}
.step{position:relative;text-align:center}
.step-n{position:relative;z-index:1;width:54px;height:54px;margin:0 auto 16px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:17px;
  color:#fff;background:var(--grad);box-shadow:0 0 0 7px var(--white)}
.step h3{font-size:15.5px;line-height:1.35;margin:0 0 7px;color:var(--ink)}
.step p{margin:0;font-size:14px;line-height:1.6;color:var(--body)}
@media (max-width:860px){
  .steps{grid-template-columns:1fr 1fr;gap:26px 18px}
  .steps::before{display:none}
}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* 06 / 07 — ticked lists for components and services */
.tick-list{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.tick-list--2{grid-template-columns:1fr 1fr;gap:13px 28px}
.tick-list li{position:relative;padding-left:31px;font-size:15px;line-height:1.6;color:var(--body)}
.tick-list li::before{content:"";position:absolute;left:0;top:4px;width:17px;height:17px;
  border-radius:50%;background:var(--grad)}
.tick-list li::after{content:"";position:absolute;left:5.5px;top:8.5px;width:5px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}
.tick-list li b{color:var(--ink);font-weight:600}
@media (max-width:760px){.tick-list--2{grid-template-columns:1fr}}

/* 08 — compliance sits on the dark surface so it reads as a caveat, not a claim */
.panel-dark{border-radius:18px;padding:28px 30px;
  background:linear-gradient(158deg,var(--navy-900),var(--navy-950));
  border:1px solid rgba(255,255,255,.08)}
.panel-dark h3{color:#fff;font-size:17px;margin:0 0 12px}
.panel-dark p{color:rgba(255,255,255,.78);font-size:15px;line-height:1.7;margin:0 0 12px}
.panel-dark p:last-child{margin-bottom:0}
.panel-dark .tick-list li{color:rgba(255,255,255,.78)}
.panel-dark .tick-list li b{color:#fff}

/* the annotated system drawing */
.sys-fig{margin:0;border:1px solid var(--line);border-radius:18px;background:var(--paper);
  padding:22px;overflow:hidden}
.sys-fig svg{width:100%;height:auto;display:block}
.sys-fig figcaption{margin-top:14px;font-size:13.5px;line-height:1.6;color:var(--muted)}
/* ten stacked sections at the home page's .section rhythm leaves very deep
   gaps; this page sets its own, and pulls consecutive sections together */
/* Equal top and bottom on every section. This used to be 52/52 on the
   first and 0/52 on the rest, which kept a 52px gutter between sections
   but read as lopsided padding; 26/26 keeps the same 52px gutter with
   the two halves equal. */
.solution-lp .section{padding:26px 0}
.solution-lp .section:has(+ .sheet){padding-bottom:calc(26px + var(--overlap))}
.solution-lp .section-head{margin-bottom:30px}
/* body prose on the landing page */
.sb-para{font-size:15.5px;line-height:1.72;color:var(--body);margin:0 0 15px;max-width:66ch}
.sb-para:last-child{margin-bottom:0}

/* ==============================================================
   HEADING SCALE
   .page-hero h1 never had a font-size, so every inner banner was
   rendering its page title at the browser default 32px — smaller
   than the 48px .h2 section headings sitting underneath it. That
   inverted the hierarchy on every inner page. The banner title is
   now sized explicitly, and the landing page's section headings
   step down from it rather than over it.
   ============================================================== */
.page-hero h1{font-size:clamp(27px,2.85vw,38px);line-height:1.16}
/* A title that carries its own <br> has had its line lengths chosen for it,
   so the 16ch cap that balances auto-wrapped banners must not re-wrap it. */
.page-hero h1.h1--br{max-width:none}
/* a title long enough to need a third line drops one step instead */
.page-hero h1.h1--long{font-size:clamp(24px,2.35vw,31px);line-height:1.2}
.solution-lp .section-head .h2{font-size:clamp(21px,2.3vw,30px);line-height:1.22}
.solution-lp .section-head .lead{font-size:15.5px;line-height:1.65;margin-top:12px}
.solution-lp .faq-aside .h2{font-size:clamp(21px,2.3vw,30px);line-height:1.22}

/* HEADER / BANNER SEPARATION — see MASTHEAD above. The header is
   now a white bar over a navy band, which separates the two on its
   own; the translucent navy surface and hairline that did this
   while the header was dark have been removed. */

/* ==============================================================
   CLOSING CTA BAND — landing page
   Shorter than the home page's version, and the decorative ring
   now carries the Intech tick. The ring is .cta-band::after, a
   520px circle at right:-120px, so its centre sits 140px in from
   the right edge; the mark is pinned to that same centre. The
   band is a .sheet, so the bottom padding keeps --overlap or the
   content rides under its own rounded top edge.
   ============================================================== */
body:has(.page-hero--guard) .cta-band,
body:has(.page-hero--guard) .cta-band.sheet{
  padding:clamp(38px,4.2vw,54px) 0}
body:has(.page-hero--guard) .cta-band:has(+ .sheet){
  padding-bottom:calc(clamp(38px,4.2vw,54px) + var(--overlap))}
body:has(.page-hero--guard) .cta-inner h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}
body:has(.page-hero--guard) .cta-inner p{font-size:1rem;margin-top:10px}

.cta-mark{position:absolute;top:50%;right:140px;transform:translate(50%,-50%);
  width:clamp(120px,13vw,186px);aspect-ratio:1;z-index:0;pointer-events:none}
.cta-mark svg{width:100%;height:100%;display:block}
@media (max-width:980px){.cta-mark{display:none}}
/* The 16:10 media panel alone is ~300px at this column width, which
   on its own exceeds the 275px left inside a 400px band. Cap it so
   the media can never be what makes a banner overflow. */
.page-hero--guard .ph-media,.page-hero--guard .ph-mark{max-height:300px}
.page-hero--guard .ph-media img{height:100%;object-fit:contain}
.page-hero--guard .ph-media--band img{object-fit:cover}
.page-hero--guard .ph-grid{align-items:center}
/* A 490px band leaves 365px under the fixed masthead. Three hub pages
   (about, solutions, products) carry a two or three line title plus a
   four line lead and overran by 15-43px. Clamping the banner lead to
   three lines holds every banner at 490 without shrinking the type.
   The full text still appears in the page body below. */

/* last 15px on the hub pages comes from a two or three line title;
   tightening the banner's own rhythm closes it without shrinking
   the type or cutting any copy */
.page-hero--guard h1{line-height:1.1}
.page-hero--guard .lead{margin-top:14px}
.page-hero--guard .page-hero-actions{margin-top:24px}
/* about carries a four-line lead; a slightly tighter leading closes the
   last 8px so it matches 490 without clamping any copy away */
.page-hero--guard .lead{line-height:1.56}
.page-hero--guard .page-hero-actions{margin-top:22px}

/* ==============================================================
   SECTION RHYTHM
   Section content on this page runs from 330px to 834px, so a true
   equal height would mean padding the short ones with ~500px of
   dead space or clipping the tall ones. Instead each section gets
   a floor and centres its content, which evens out the cadence
   while letting a long section be as long as it needs to be.
   ============================================================== */
.solution-lp .section{min-height:460px;display:flex;align-items:center}
.solution-lp .section > .container{width:100%}
@media (max-width:860px){.solution-lp .section{min-height:0;display:block}}
/* the components figure now carries a product photograph rather than a
   drawing; multiply drops its white studio background onto the panel */
.sys-fig img{width:100%;height:auto;display:block;mix-blend-mode:multiply}
/* .cta-inner is a space-between flex row, so on a page with short copy the
   buttons sit hard right — directly over the decorative ring and the mark.
   Stacking the copy and the buttons gives every inner page the same CTA
   layout and keeps the right-hand side clear for the mark. */
body:has(.page-hero--guard) .cta-inner{display:block}
body:has(.page-hero--guard) .cta-btns{margin-top:22px}
body:has(.page-hero--guard) .cta-inner h2,
body:has(.page-hero--guard) .cta-inner p{max-width:60ch}

/* ==============================================================
   PRODUCT BRAND PAGE
   Category and featured cards reuse .sol-card. The only new piece
   is the document list, which shows a row per datasheet that
   actually exists on disk — no empty download buttons.
   ============================================================== */
.doc-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.doc-row{display:flex;align-items:center;gap:14px;padding:14px 18px;background:#fff;
  border:1px solid var(--line);border-radius:12px;text-decoration:none;color:inherit;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.doc-row:hover{border-color:rgba(var(--amber-rgb),.45);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.doc-ico{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(140deg,rgba(var(--amber-rgb),.16),rgba(var(--ember-rgb),.08));color:var(--ember)}
.doc-ico svg{width:19px;height:19px}
.doc-name{flex:1;min-width:0;font-size:14.6px;font-weight:600;color:var(--ink);line-height:1.35}
.doc-meta{flex:none;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.doc-row:hover .doc-meta{color:var(--ember-text)}
@media (max-width:620px){.doc-meta{display:none}}

/* featured product card: larger image, enquiry action at the foot */
.prod-card .sol-media{height:210px}
.prod-card .sol-media img{max-height:180px}
.prod-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:16px}
.prod-actions .btn{font-size:13.5px;padding:9px 16px}
/* .btn-glass is built for dark surfaces; on a white product card it all but
   disappears. The datasheet action gets a light outline treatment instead. */
.prod-actions .btn-glass{background:#fff;color:var(--ink);border:1px solid var(--line)}
.prod-actions .btn-glass:hover{background:var(--paper);border-color:rgba(var(--amber-rgb),.45);
  color:var(--ember-text);transform:none}

/* ==============================================================
   ABOUT — warm-white editorial page            (2026-10-26)
   The client asked for the About page to read like a solutions
   inner page: warm-white ground, deep navy headlines, orange
   accents and large translucent circles behind the content.
   Everything here is scoped to .about-page so no other page
   inherits the warm ground.
   ============================================================== */
.about-page{--warm:#FBF8F4;--warm-2:#F6F1EA;--orb-a:rgba(var(--ember-rgb),.07);
  --orb-b:rgba(28,66,96,.06);--sec-y:clamp(52px,5vw,74px);--overlap:0px}
.about-page .inner-head{margin-bottom:32px}
.about-page .section.dark{--sec-y:clamp(58px,5.4vw,80px)}
.about-page .section{position:relative;overflow:hidden;background:var(--warm)}
.about-page .section.dark{background:var(--navy-950)}
.about-page .vm-sec,.about-page .why-sec{background:var(--warm-2)}

/* the translucent circles. They are decoration only, never hit-tested,
   and they sit under the content rather than over it. */
.about-page .orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.orb--a,.orb--c,.orb--g{background:radial-gradient(circle at 50% 50%,var(--orb-a) 0 58%,transparent 72%)}
.orb--b,.orb--d,.orb--e,.orb--f,.orb--h{background:radial-gradient(circle at 50% 50%,var(--orb-b) 0 58%,transparent 72%)}
.about-page .container{position:relative;z-index:1}
.orb--a{width:560px;height:560px;right:-190px;top:-180px}
.orb--b{width:300px;height:300px;left:-120px;bottom:-110px}
.orb--c{width:640px;height:640px;left:-240px;top:-200px}
.orb--d{width:460px;height:460px;right:-170px;bottom:-200px}
.orb--e{width:520px;height:520px;right:-200px;bottom:-230px}
.orb--f{width:600px;height:600px;left:-250px;bottom:-280px}
.orb--g{width:420px;height:420px;right:-150px;top:-150px}
.orb--h{width:300px;height:300px;left:-130px;bottom:-140px}
@media (max-width:760px){.about-page .orb{display:none}}

.about-page .inner-head h2{color:var(--ink)}
.about-page .section.dark .inner-head h2{color:#fff}
.about-page .section.dark .eyebrow{color:var(--amber)}
.about-page .inner-head.center{margin-left:auto;margin-right:auto;text-align:center}
.about-page .inner-head.center p{margin-left:auto;margin-right:auto}

/* hero photograph — the stock .ph-media is a 16/10 contain panel; the
   About banner carries a real photograph, so it crops instead. */
.ph-media--photo{aspect-ratio:4/3;padding:0;background:var(--navy-900)}
.ph-media--photo img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:980px){.ph-media--photo{aspect-ratio:16/9}}

/* ---------------------------------------------- 2. who we are (split) */
.wwa{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:60px;align-items:center}
.wwa-media{position:relative;margin:0;border-radius:var(--radius);overflow:visible}
.wwa-media img{width:100%;height:auto;display:block;border-radius:var(--radius);
  box-shadow:0 40px 80px -40px rgba(10,27,42,.5)}
.wwa-media::before{content:"";position:absolute;inset:auto -18px -18px auto;width:62%;height:62%;
  border:1px solid rgba(var(--ember-rgb),.3);border-radius:var(--radius);z-index:-1}
.wwa-badge{position:absolute;left:-18px;bottom:28px;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:14px 20px;box-shadow:var(--shadow-md);display:grid;gap:2px}
.wwa-badge b{font-family:var(--font-display);font-size:26px;line-height:1;color:var(--ember-text)}
.wwa-badge span{font-size:12.6px;color:var(--muted)}
.wwa-copy p{color:var(--body);font-size:16px;line-height:1.72}
.wwa-copy p + p{margin-top:16px}
.wwa-copy .tick-list{margin-top:26px;padding-top:26px;border-top:1px solid var(--line)}
@media (max-width:960px){.wwa{grid-template-columns:1fr;gap:38px}
  .wwa-badge{left:14px;bottom:14px}}

/* ------------------------------------------ 3. vision & mission (seal) */
.vm{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:0}
.vm-card{background:#fff;border:1px solid var(--line);border-radius:26px;padding:42px 40px;
  box-shadow:var(--shadow-md);position:relative}
.vm-card--v{border-top-right-radius:0;border-bottom-right-radius:0;padding-right:64px}
.vm-card--m{border-top-left-radius:0;border-bottom-left-radius:0;padding-left:64px}
.vm-ico{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:rgba(var(--ember-rgb),.1);color:var(--ember-text);font-size:24px}
.vm-label{display:block;margin-top:20px;font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ember-text)}
.vm-card p{margin-top:12px;font-family:var(--font-display);font-size:clamp(18px,1.85vw,23px);
  line-height:1.45;letter-spacing:-.012em;color:var(--ink)}
/* the seal sits in the seam between the two panels */
.vm-seal{align-self:center;width:120px;height:120px;border-radius:50%;background:#fff;display:grid;place-items:center;
  box-shadow:0 20px 44px -18px rgba(10,27,42,.35);border:1px solid var(--line);z-index:2}
.vm-seal svg{width:68px;height:68px;fill:none}
.vs-r1{stroke:rgba(var(--ember-rgb),.28);stroke-width:2}
.vs-r2{stroke:rgba(var(--ember-rgb),.14);stroke-width:2;stroke-dasharray:5 7}
.vs-tick{stroke:url(#g-logo);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.vm-motto{margin-top:38px;text-align:center}
.vm-motto span{display:block;font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.vm-motto b{display:block;margin-top:8px;font-family:var(--font-display);
  font-size:clamp(20px,2.4vw,30px);color:var(--ink)}
@media (max-width:980px){
  .vm{grid-template-columns:1fr;gap:0}
  .vm-card{border-radius:26px;padding:34px 28px}
  .vm-card--v{padding-right:28px}
  .vm-card--m{padding-left:28px;margin-top:-36px;padding-top:70px}
  .vm-seal{margin:-60px auto 0;width:104px;height:104px}
}

/* ------------------------------------------ 5. core capabilities (map) */
.cap-map{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  border:1px solid var(--line);border-radius:26px;overflow:hidden;background:#fff}
.cap-node{position:relative;padding:34px 30px 32px;border-right:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.cap-node:nth-child(3n){border-right:0}
.cap-node:nth-last-child(-n+3){border-bottom:0}
.cap-n{font-family:var(--font-display);font-size:12.5px;font-weight:700;letter-spacing:.14em;
  color:rgba(var(--ember-rgb),.55)}
.cap-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;margin-top:14px;
  background:rgba(var(--ember-rgb),.09);color:var(--ember-text);font-size:21px}
.cap-node b{display:block;margin-top:16px;font-family:var(--font-display);font-size:16.5px;
  color:var(--ink)}
.cap-node > span:last-child{display:block;margin-top:8px;font-size:14.2px;line-height:1.6;
  color:var(--muted)}
/* the connecting rule that makes the grid read as one process */
.cap-node:not(:nth-child(3n))::after{content:"";position:absolute;right:-5px;top:62px;width:9px;
  height:9px;border-radius:50%;background:var(--ember);z-index:2}
@media (max-width:960px){.cap-map{grid-template-columns:1fr 1fr}
  .cap-node:nth-child(3n){border-right:1px solid var(--line)}
  .cap-node:nth-child(2n){border-right:0}
  .cap-node:nth-last-child(-n+3){border-bottom:1px solid var(--line)}
  .cap-node:nth-last-child(-n+2){border-bottom:0}
  .cap-node::after{display:none}}
@media (max-width:620px){.cap-map{grid-template-columns:1fr}
  .cap-node{border-right:0!important;border-bottom:1px solid var(--line)!important}
  .cap-node:last-child{border-bottom:0!important}}

/* ---------------------------------------------- 6. why intech (4 tiles) */
.why4{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.why-tile{position:relative;background:#fff;border:1px solid var(--line);border-radius:22px;
  padding:34px 34px 32px;overflow:hidden}
.why-tile::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--grad)}
.why-n{position:absolute;right:22px;top:14px;font-family:var(--font-display);font-weight:700;
  font-size:58px;line-height:1;color:rgba(10,27,42,.055)}
.why-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  background:rgba(var(--ember-rgb),.1);color:var(--ember-text);font-size:22px}
.why-tile h3{margin-top:18px;font-family:var(--font-display);font-size:19px;color:var(--ink)}
.why-tile p{margin-top:10px;font-size:14.8px;line-height:1.68;color:var(--body)}
@media (max-width:860px){.why4{grid-template-columns:1fr}}

/* ------------------------------------------ 7. leadership & people band */
.people-sec .founder p{color:rgba(255,255,255,.76);font-size:15.6px;line-height:1.72;margin-top:16px}
.people-band{margin-top:64px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:44px;align-items:center;padding-top:44px;border-top:1px solid rgba(255,255,255,.14)}
.people-photo{margin:0;border-radius:var(--radius);overflow:hidden;
  border:1px solid rgba(255,255,255,.14)}
.people-photo img{width:100%;height:auto;display:block}
.people-copy h3{font-family:var(--font-display);font-size:clamp(19px,2.1vw,25px);line-height:1.25;
  color:#fff}
.people-copy p{margin-top:14px;color:rgba(255,255,255,.72);font-size:15.4px;line-height:1.7}
.people-links{margin-top:22px;display:flex;flex-wrap:wrap;gap:22px}
.people-links .link-arrow{color:var(--amber)}
@media (max-width:900px){.people-band{grid-template-columns:1fr;gap:28px}}

/* ==============================================================
   ORGANISATION CHART — the company-profile deck's slides 9 & 10
   rebuilt for the web.                            (2026-10-26)
   Slide 9 is the navy chart: board, connector bus, six department
   cards. Slide 10 is the light roster of the same six columns.
   ============================================================== */
.oc-sec{background:#fff}
.oc-chart{--oc-cols:6}

/* --- the board row: three cards, the MD carried in the centre --- */
.oc-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
  max-width:980px;margin:0 auto}
.oc-exec{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:26px 28px;text-align:center;box-shadow:var(--shadow-sm)}
.oc-exec b{display:block;font-family:var(--font-display);font-size:19px;color:var(--ink)}
.oc-exec span{display:block;margin-top:7px;font-size:14px;color:var(--muted)}
/* the managing director is carried, as on the deck slide */
.oc-exec--lead{background:var(--navy-800);border-color:var(--navy-800)}
.oc-exec--lead::before{content:"";position:absolute;left:18px;right:18px;top:-3px;height:4px;
  border-radius:3px;background:var(--grad)}
.oc-exec--lead b{color:#fff}
.oc-exec--lead span{color:var(--amber-300)}

/* --- the connector bus between the board and the departments ---
   The legs have to land on the centre of each department card, so the
   column width is worked out from the grid's own gap rather than from a
   plain sixth of the width — otherwise they drift by a gap per column. */
.oc-bus{position:relative;height:52px;margin:0 auto;--line-c:#CBD5E1;
  --oc-gap:14px;--oc-colw:calc((100% - (var(--oc-cols) - 1) * var(--oc-gap)) / var(--oc-cols))}
.oc-drop{position:absolute;left:50%;top:0;width:1px;height:22px;background:var(--line-c)}
.oc-rail{position:absolute;left:calc(var(--oc-colw) / 2);right:calc(var(--oc-colw) / 2);
  top:22px;height:1px;background:var(--line-c)}
.oc-leg{position:absolute;top:22px;height:30px;width:1px;background:var(--line-c);
  left:calc(var(--i) * (var(--oc-colw) + var(--oc-gap)) + var(--oc-colw) / 2)}
@media (max-width:1040px){.oc-bus{display:none}}

/* --- six department cards --- */
.oc-depts{display:grid;grid-template-columns:repeat(var(--oc-cols),minmax(0,1fr));gap:14px}
.oc-dept{display:flex;flex-direction:column}
.oc-dept h3{background:var(--navy-800);border-radius:12px 12px 0 0;padding:13px 12px;
  text-align:center;font-family:var(--font-display);font-size:13.6px;line-height:1.3;color:#fff;
  min-height:62px;display:grid;place-items:center}
.oc-dept-body{flex:1;background:#fff;border:1px solid var(--line);border-top:0;
  border-radius:0 0 12px 12px;padding:22px 14px 20px;text-align:center;box-shadow:var(--shadow-sm)}
.oc-ring{display:grid;place-items:center;width:62px;height:62px;margin:0 auto;border-radius:50%;
  border:1px solid rgba(var(--ember-rgb),.35);background:rgba(var(--ember-rgb),.06);
  color:var(--ember-text);font-size:26px}
.oc-dept-body b{display:block;margin-top:16px;font-family:var(--font-display);font-size:14.8px;
  color:var(--ink)}
.oc-role{display:block;margin-top:6px;font-size:12.6px;color:var(--ember-text)}
.oc-count{margin-top:11px;text-align:center;font-size:12.6px;color:var(--muted)}
@media (max-width:1040px){.oc-chart{--oc-cols:3}.oc-board{max-width:none}}
@media (max-width:760px){.oc-chart{--oc-cols:2}
  .oc-board{grid-template-columns:1fr;gap:14px}
  .oc-dept h3{min-height:0}}

/* --- slide 10: the roster, on the light ground --- */
/* both halves are white, so a hairline keeps them reading as two blocks */
.oc-roster-sec{background:#fff;border-top:1px solid var(--line)}
.oc-roster{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;align-items:start}
.oc-col h3{background:var(--navy-800);border-radius:12px;padding:13px 12px;text-align:center;
  font-family:var(--font-display);font-size:13.4px;line-height:1.3;color:#fff;min-height:60px;
  display:grid;place-items:center;margin-bottom:12px}
.oc-p{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:11px;padding:12px 12px}
.oc-p + .oc-p{margin-top:8px}
.oc-p b{display:block;font-family:var(--font-display);font-size:13.6px;line-height:1.3;
  color:var(--ink)}
.oc-p span:last-child{display:block;margin-top:4px;font-size:12.2px;line-height:1.4;
  color:var(--muted)}
.oc-p--mgr{background:#FFF5EF;border-color:rgba(var(--ember-rgb),.38)}
.oc-p--mgr b{color:var(--ember-text)}
.oc-ini{flex:0 0 28px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:rgba(var(--ember-rgb),.1);color:var(--ember-text);
  font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.02em}
.oc-p--mgr .oc-ini{background:var(--grad);color:#fff}
@media (max-width:1100px){.oc-roster{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
@media (max-width:720px){.oc-roster{grid-template-columns:1fr 1fr;gap:14px}
  .oc-col h3{min-height:0}}
@media (max-width:460px){.oc-roster{grid-template-columns:1fr}}