/* Invicta V2 — Raking Light design system.
   Faithful port of the approved capability-statement page
   (~/Work/clients/invicta/comms/capability-interactive/build.py CSS string), verbatim.
   Only change from the source: data: URIs rewritten to served /assets/ paths
   (fonts, grain texture, light-section louvre pattern). V1 css/style.css is never touched.
   Two deliberate additions for the multi-page site are appended at the very end,
   clearly marked — everything above this file's final comment block is the source, unmodified. */
:root{
  /* dark = anodised graphite-blue (a committed colour, not default near-black) */
  --bg:#0e1a20; --bg2:#122229; --panel:#17272f; --panel2:#1d2f38;
  --ink:#eef4f6; --soft:#a7b8bf; --steel:#728790; --silver:#cbd9df;
  --line:rgba(203,217,223,.12); --line2:rgba(203,217,223,.22);
  --bronze:#c9902f; --bronze-hi:#e7ad52; --bronze-lo:#8a5f16; --bronze-ink:#8a5a12;
  --cond:'ArchExp',sans-serif; --sans:'Hanken',system-ui,sans-serif; --mono:'Hanken',system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1); --ease2:cubic-bezier(.22,.61,.36,1);
  --gut:clamp(20px,5vw,88px); --maxw:1280px;
}
/* light "mill-finish" sections — override the theme tokens; every component adapts via the vars.
   NOTE: --silver stays light (it is only ever used on dark photo overlays). */
.t-light{
  --bg:#e8edef; --bg2:#eef2f4; --panel:#f4f6f7; --panel2:#ffffff;
  --ink:#141a1e; --soft:#41505a; --steel:#5c6b73;
  --line:rgba(20,26,30,.14); --line2:rgba(20,26,30,.24);
  --bronze:#8a5a12; --bronze-hi:#a86e1e;
  background:var(--bg); color:var(--ink); position:relative; isolation:isolate;
}
.t-light::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:#c9902f;opacity:.45;z-index:2}
/* raking louvre-shadow cast across the aluminium ground */
.t-light::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.42;
  background-image:url(/assets/v2/louvre-bg.svg);background-repeat:repeat;background-size:220px auto}
.t-light > .wrap{position:relative;z-index:1}
/* de-scaffold the section heads: drop the number + machined tick-rule, quiet the mono eyebrow
   (verbatim to the approved capability page — see comms/capability-interactive/index.html) */
.sechead{display:block;margin-bottom:16px}
.sechead .idx,.sechead .lbl{display:none}
.sechead .mono{font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--bronze)}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

/* Skip link. Every page put the full nav — including two dropdowns — ahead of
   the content, so reaching the page meant tabbing through all of it, on every
   page. Off-screen until focused rather than display:none, which would take it
   out of the tab order and defeat the point. */
.skip{position:absolute;left:8px;top:-60px;z-index:9999;
  padding:12px 18px;border-radius:8px;
  background:var(--bronze);color:#12181b;
  font-family:var(--sans);font-weight:600;font-size:15px;text-decoration:none;
  transition:top .18s ease}
.skip:focus{top:8px;outline:3px solid var(--ink);outline-offset:2px}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;
  line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--bronze);color:#111}
body::-webkit-scrollbar{width:0}

@font-face{font-family:'ArchExp';font-weight:400 800;font-stretch:125%;font-style:normal;font-display:swap;src:url(/assets/fonts/archexp.woff2) format('woff2')}
@font-face{font-family:'Hanken';font-weight:400 700;font-style:normal;font-display:swap;src:url(/assets/fonts/hanken.woff2) format('woff2')}

/* ---- texture + type primitives ---- */
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url(/assets/v2/grain-noise.svg);background-size:180px}
.mono{font-family:var(--mono);font-weight:500;text-transform:uppercase;letter-spacing:.22em;
  font-size:clamp(10px,.72vw,11.5px);color:var(--steel)}
.disp{font-family:var(--cond);font-weight:600;line-height:.98;letter-spacing:-.02em}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.bronze{color:var(--bronze)}

/* ---- progress + nav ---- */
.prog{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--bronze-lo),var(--bronze-hi));z-index:60}
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  /* padding is deliberately NOT transitioned. The nav condenses 16px -> 11px on
     scroll, and animating padding relayouts the bar on every frame of the half
     second it runs. The 5px step is imperceptible as a movement anyway — what
     the eye actually reads is the background and blur arriving, and those still
     ease. Snapping the padding costs nothing visually and removes the only
     layout-property animation left in this stylesheet. */
  padding:16px var(--gut);transition:background .5s var(--ease),backdrop-filter .5s,border-color .5s;
  border-bottom:1px solid transparent}
.nav.small{background:rgba(11,14,17,.72);backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--line);padding-top:11px;padding-bottom:11px}
.nav__logo{height:60px;filter:brightness(0) invert(1);opacity:.96}
.nav__right{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.nav__word{font-family:var(--mono);text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--soft)}
@media(max-width:760px){.nav__word{display:none}}
.dl{position:relative;display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);
  letter-spacing:0;font-size:14px;font-weight:600;color:#0b0e11;
  background:var(--bronze);padding:13px 22px;border-radius:3px;overflow:hidden;cursor:pointer;
  transition:transform .5s var(--ease),box-shadow .5s,background .3s;will-change:transform}
.dl svg{width:13px;height:13px}
.dl:hover{background:var(--bronze-hi);box-shadow:0 10px 34px -8px rgba(201,144,47,.6)}
.dl__sheen{position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);
  transform:translateX(-120%)}
.dl:hover .dl__sheen{transform:translateX(120%);transition:transform .7s var(--ease)}

/* ================= HERO ================= */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:-8% 0;z-index:-3;background:var(--bg2)}
/* The still and the video are the same picture (the video's first frame), so they
   have to be graded and scaled identically or the handover between them shows as
   a jump. Filter values are the video's — the encode was quality-tuned through
   exactly these numbers. */
.hero__img{position:absolute;inset:-12% 0 0;z-index:-4;width:100%;height:118%;object-fit:cover;
  opacity:0;transform:scale(1.14);filter:grayscale(.3) contrast(1.05) brightness(.58)}
.hero__grad{position:absolute;inset:0;z-index:-2;background:
  linear-gradient(180deg,rgba(11,14,17,.62) 0%,rgba(11,14,17,.34) 34%,rgba(11,14,17,.72) 74%,var(--bg) 100%),
  radial-gradient(120% 80% at 78% 12%,rgba(201,144,47,.14),transparent 55%)}
.hero__inner{position:relative;flex:1;display:flex;flex-direction:column;
  padding-top:clamp(96px,16vh,180px);padding-bottom:clamp(44px,7vh,100px)}
.hero__foot{margin-top:auto}
.hero__eyebrow{display:flex;align-items:center;gap:14px}
.hero__eyebrow .ln{height:1px;width:clamp(36px,7vw,88px);background:var(--bronze);transform-origin:left;transform:scaleX(0)}
.hero h1{font-family:var(--cond);font-weight:600;letter-spacing:-.025em;line-height:.92;
  font-size:clamp(3rem,9.2vw,6.2rem);max-width:16ch;margin-top:.34em;overflow-wrap:break-word}
.hero h1 .em{color:var(--bronze)}
.hero__sub{margin-top:clamp(22px,3vh,34px);max-width:46ch;color:var(--soft);
  font-size:clamp(15px,1.35vw,19px);line-height:1.55}
.hero__meta{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center}
.tag{font-family:var(--sans);letter-spacing:0;font-size:14px;color:var(--silver);padding:0}
.hero__facts{margin-top:22px;color:var(--silver);font-size:clamp(14px,1.15vw,16px);line-height:1.5;letter-spacing:.005em;max-width:52ch}
.scrollcue{position:absolute;left:var(--gut);bottom:22px;display:flex;align-items:center;gap:11px}
.scrollcue .dot{width:22px;height:34px;border:1px solid var(--line2);border-radius:12px;position:relative}
.scrollcue .dot::after{content:"";position:absolute;left:50%;top:7px;width:2px;height:7px;border-radius:2px;
  background:var(--bronze);transform:translateX(-50%);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}}
/* hide the scroll cue on phones — it collides with the hero CTA and touch scroll needs no prompt */
@media(max-width:760px){.scrollcue{display:none}}

/* ================= shared section chrome ================= */
.sec{position:relative;padding:clamp(36px,5.3vh,64px) 0}
/* The Who-we-are band is a full-bleed light panel between two dark sections, so
   it needs more room top and bottom than a section that shares its background
   with its neighbours — at the shared padding the type sat hard against both
   edges. */
#who.sec{padding:clamp(64px,9vh,108px) 0}
.sechead{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:clamp(14px,2.2vh,24px)}
.sechead .idx{font-family:var(--mono);color:var(--bronze);letter-spacing:.1em;font-size:13px}
.sechead .lbl{flex:1;height:1px;background:var(--line);min-width:40px;align-self:center}
.statement{font-family:var(--cond);font-weight:600;letter-spacing:-.02em;line-height:.98;
  font-size:clamp(2.1rem,5.4vw,3.9rem);max-width:18ch}
.lead{margin-top:26px;max-width:62ch;color:var(--soft);font-size:clamp(15px,1.3vw,18px)}

/* ---- who / intro ---- */
.who{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,6vw,90px);align-items:center}
@media(max-width:900px){.who{grid-template-columns:1fr}}
.who__body p{color:var(--soft);font-size:clamp(15px,1.28vw,17.5px);margin-top:18px;max-width:54ch}
.who__quote{margin-top:30px;font-family:var(--cond);font-weight:600;font-size:clamp(1.4rem,2.7vw,2rem);
  line-height:1.12;letter-spacing:-.015em;color:var(--ink);padding-top:22px;border-top:1px solid var(--line2)}
.who__fig{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--line)}
.who__fig img{width:100%;height:112%;object-fit:cover;filter:grayscale(.2) contrast(1.03) brightness(.86)}
.who__fig .cap{position:absolute;left:0;bottom:0;right:0;padding:18px 20px;
  background:linear-gradient(0deg,rgba(11,14,17,.86),transparent);font-family:var(--mono);
  text-transform:uppercase;letter-spacing:.16em;font-size:10.5px;color:var(--silver)}
.stats{margin-top:clamp(30px,5vh,52px);display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line)}
.stat{background:var(--bg);padding:clamp(20px,2.6vw,30px)}
.stat .n{font-family:var(--cond);font-weight:600;font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1;color:var(--ink)}
.stat .n.br{color:var(--bronze)}
.stat .k{margin-top:9px;color:var(--steel);font-size:13px;line-height:1.35}
@media(max-width:620px){.stats{grid-template-columns:1fr}}

/* ---- deliver grid ---- */
.deliver{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:900px){.deliver{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.deliver{grid-template-columns:1fr}}
.dcell{background:var(--bg);padding:clamp(24px,2.6vw,34px);min-height:210px;display:flex;flex-direction:column;
  position:relative;overflow:hidden;transition:background .5s var(--ease)}
/* underline sweep on hover — scaleX rather than animating width, so it composites
   on the GPU instead of relaying out the cell on every frame. Same visual. */
.dcell::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--bronze);
  transform:scaleX(0);transform-origin:left center;transition:transform .6s var(--ease)}
.dcell:hover{background:var(--panel)}
.dcell:hover::after{transform:scaleX(1)}
.dcell .k{color:var(--bronze)}
.dcell h3{font-family:var(--cond);font-weight:600;font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.02;
  letter-spacing:-.01em;margin:14px 0 12px}
.dcell p{color:var(--soft);font-size:14.5px;line-height:1.5}

/* ---- pantheon ---- */
.pan__hint{color:var(--steel);font-size:14.5px;margin-top:clamp(10px,1.4vh,16px)}
.pan{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,5vw,72px);align-items:stretch;margin-top:clamp(18px,2.6vh,32px)}
/* The intro sits across both columns rather than stacked above the systems
   table. It was making the text column much taller than the render beside it,
   which left the figure short and floating in its own column. Full width, the
   table alone sits next to the render and the two read as a matched pair. */
.pan__lead{grid-column:1/-1;max-width:82ch;margin-bottom:clamp(6px,1.2vh,16px)}
@media(max-width:940px){.pan{grid-template-columns:1fr}}
.pan__fig{position:relative;overflow:hidden;border:1px solid var(--line);min-height:540px}
@media(max-width:940px){.pan__fig{aspect-ratio:16/11;min-height:0}}

/* Break the 3D render out of its boxed frame — bleeds LEFTWARD into the page's
   own left gutter margin (nothing else occupies that space, so this can never
   collide with the text column next to it — the earlier rightward-bleed
   attempt did, because a position:relative box paints over a static sibling
   wherever the two overlap, regardless of DOM order). Border and the render's
   own gradient background are both removed so it sits directly on the page's
   own background instead of reading as a separate dark panel.
   Scoped to .home3d specifically (added only on index.njk's instance) — NOT
   the bare #louvre3d id or the shared .pan__fig/.louvre3d classes, both of
   which capability.njk's own render also uses (same id, different page).
   Without this scoping the rule would silently reach into capability.njk too. */
@media(min-width:941px){
  .home3d.pan__fig{
    border:none;
    overflow:visible;
    /* --h3w set/updated live by the TEMP width +/- buttons in site.js. Right
       edge stays anchored at the grid column's own edge regardless of value
       (margin-left = 100% - width is always negative here as long as --h3w
       is bigger than the column itself, so it only ever grows leftward,
       never rightward into the text column). */
    width:var(--h3w, 700px);
    /* Clamped at 0 so the bleed can never cross the page gutter. --h3w is 650px
       and the column is narrower than that, so the raw calc went negative enough
       to run the render off the left edge of the viewport with no margin at all
       — it read as a bug rather than a deliberate bleed. max() keeps the right
       edge anchored to the column and lets the left edge sit on the same gutter
       as the heading above it. */
    margin-left:max(calc(100% - var(--h3w, 700px)), 0px);
    max-width:100%;
    /* The grid stretches its items, so this figure was growing to match the
       height of the systems table beside it — a box far taller than the render
       needs. The camera fits the panel to the box, so the taller the box got,
       the more empty space it drew around the louvre. The panel is a 1m square,
       so the box is square too, and it sits at the top of the row instead of
       stretching down to meet the table. */
    align-self:start;
    aspect-ratio:1/1;
    height:auto;
    min-height:0;
  }
  .home3d .louvre3d__stage{min-height:0}
}
.home3d.louvre3d{background:none}
/* TEMP CAMERA DEBUG — shows exactly where the #louvre3d box's edges are while
   positioning the camera. Remove this rule once the position is locked in
   (paired with the DEBUG_CAMERA block in js/v2/site.js). */
.home3d.cam-debug{outline:2px solid #ffe600;outline-offset:-2px}
/* Safety net regardless of the above: the text/table column always paints
   above #louvre3d even if a future change makes them overlap. */
.pan__copy{position:relative;z-index:1}
/* The name/spec caption under the render shows on home as well as capability,
   so the two pages read the same. */
.pan__fig img{position:absolute;inset:-7% 0;width:100%;height:114%;object-fit:cover;filter:grayscale(.18) contrast(1.06) brightness(.82)}
.pan__fig .badge{position:absolute;top:16px;left:16px}
.spec{border-top:1px solid var(--line2)}
.row{display:grid;grid-template-columns:1.5fr .7fr .9fr .75fr .85fr;gap:14px;align-items:center;
  padding:19px 4px;border-bottom:1px solid var(--line);position:relative}
.row.head{border-bottom:1px solid var(--line2)}
.row.head span{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:10px;color:var(--steel)}
.row .name{font-family:var(--cond);font-weight:600;font-size:clamp(1.15rem,1.8vw,1.5rem);letter-spacing:-.01em}
.row .v{font-family:var(--mono);font-size:13px;color:var(--soft);letter-spacing:.02em}
.row .v b{color:var(--bronze);font-weight:500}
.row.data:hover{background:var(--panel)}
@media(max-width:560px){.row{grid-template-columns:1fr 1fr;gap:6px 14px}.row .colspan{grid-column:1/-1}
  .row.head{display:none}
  /* The header row is hidden at this width, so each cell has to name itself or
     the figures become unreadable: "Class A" sitting next to "Class 3" with
     nothing to say which is rain defence and which is aerodynamic. Same
     data-label pattern .cmp already uses on the louvres and architects tables. */
  .row.data>span.v::before{content:attr(data-label);display:block;
    font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.1em;
    text-transform:uppercase;color:var(--steel);margin-bottom:3px}}
.pan__note{margin-top:22px;color:var(--steel);font-size:12.5px;line-height:1.5;max-width:60ch}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:22px}
.chip{font-family:var(--sans);letter-spacing:0;font-size:14.5px;font-weight:500;
  padding:0;border:0;background:none;color:var(--silver)}
.chip+.chip::before{content:"\00B7";margin-right:14px;color:var(--bronze)}
.chip b{color:var(--bronze);font-weight:500}

/* ---- why ---- */
.why{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:820px){.why{grid-template-columns:1fr}}
.wcell{background:var(--bg);padding:clamp(26px,3vw,42px);display:flex;gap:22px;align-items:flex-start}
.wcell .no{font-family:var(--cond);font-weight:600;font-size:clamp(2rem,3.4vw,3rem);line-height:.9;
  color:transparent;-webkit-text-stroke:1px var(--steel);flex:none}
.wcell h3{font-family:var(--cond);font-weight:600;font-size:clamp(1.25rem,1.9vw,1.6rem);letter-spacing:-.01em;margin-bottom:10px}
.wcell p{color:var(--soft);font-size:14.5px;line-height:1.5}

/* ================= PROJECTS (pinned horizontal — UNUSED CLASSES, see note at file end) ================= */
.projects{background:var(--bg)}
.pgal-pin{position:relative}
.pgal-stage{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center}
.pgal-track{display:flex;height:100%;align-items:stretch;will-change:transform}
.panel{position:relative;flex:0 0 auto;width:min(78vw,900px);height:100%;
  display:flex;align-items:flex-end;overflow:hidden;border-right:1px solid rgba(0,0,0,.5)}
.panel.intro{width:min(66vw,720px);align-items:center;background:var(--bg);padding-left:var(--gut)}
.panel__img{position:absolute;inset:0;z-index:0}
.panel__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(.24) contrast(1.05) brightness(.72);
  transform:scale(1.16);will-change:transform;transition:filter .5s var(--ease)}
/* hover a project card -> clear the grade/grayscale so the photo reads in full */
.panel:hover .panel__img img{filter:grayscale(0) contrast(1.03) brightness(.98)}
.panel__grad{position:absolute;inset:0;z-index:1;background:
  linear-gradient(0deg,rgba(9,12,14,.94) 2%,rgba(9,12,14,.34) 42%,rgba(9,12,14,.12) 100%)}
.panel__c{position:relative;z-index:2;padding:clamp(28px,4vw,60px);width:100%}
.panel__yr{font-family:var(--mono);letter-spacing:.16em;color:var(--bronze);font-size:12px}
.panel h3{font-family:var(--cond);font-weight:600;font-size:clamp(2rem,4vw,3.4rem);line-height:.96;
  letter-spacing:-.02em;margin:10px 0 14px;max-width:14ch}
.panel .meta{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--silver);margin-bottom:14px}
.panel .scope{color:var(--soft);font-size:15px;line-height:1.5;max-width:44ch}
.panel .val{margin-top:20px;display:inline-flex;align-items:baseline;gap:10px;
  border-top:1px solid var(--line2);padding-top:14px}
.panel .val .lab{font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;font-size:10px;color:var(--steel)}
.panel .val .amt{font-family:var(--cond);font-weight:600;font-size:clamp(1.5rem,2.6vw,2.1rem);color:var(--bronze)}
.panel.type{width:min(58vw,640px);align-items:center;background:
  radial-gradient(120% 90% at 20% 20%,rgba(201,144,47,.16),transparent 60%),linear-gradient(180deg,var(--panel),var(--bg))}
.panel.type .blades2{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:26px;opacity:.35}
.panel.type .blades2 i{height:1px;background:linear-gradient(90deg,transparent,rgba(215,221,227,.4),transparent)}
.introc .kick{color:var(--bronze)}
.introc h2{font-family:var(--cond);font-weight:600;font-size:clamp(2.3rem,4.2vw,3.6rem);line-height:.97;
  letter-spacing:-.02em;margin:16px 0 18px}
.introc p{color:var(--soft);font-size:15px;max-width:34ch}
.introc .hint{margin-top:26px;display:flex;align-items:center;gap:12px;color:var(--steel);
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;font-size:10.5px}
.introc .hint svg{width:34px;height:9px}

/* ---- trusted ---- */
.trusted{overflow:hidden}
/* white banner: colour logos read clearly */
.trusted__logos{background:#e9edee;padding:clamp(70px,10vh,118px) 0}
.trusted__logos .cap{text-align:center;margin-bottom:clamp(30px,4vh,44px)}
.trusted__logos .cap .mono{color:#5c6f78;font-size:20px;font-weight:600;letter-spacing:.16em}
/* dark banner: the testimonial */
.trusted__quote{background:var(--bg2);padding:clamp(54px,9vh,104px) 0;border-top:1px solid rgba(201,144,47,.28)}
.marquee{display:flex;gap:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mrow{display:flex;align-items:center;gap:clamp(30px,4.5vw,64px);padding-right:clamp(30px,4.5vw,64px);
  animation:scroll 40s linear infinite;flex:none}
.mrow .txt{font-family:var(--cond);font-weight:600;font-size:clamp(1.5rem,2.8vw,2.3rem);color:var(--silver);
  opacity:.62;letter-spacing:-.015em;white-space:nowrap;transition:opacity .4s}
.mrow .sep{color:var(--bronze);opacity:.8;font-size:clamp(1rem,1.6vw,1.3rem)}
.trusted:hover .mrow .txt{opacity:.9}
@keyframes scroll{to{transform:translateX(-100%)}}
/* trusted-by logo row + testimonial */
.logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(30px,5vw,68px);margin-bottom:0}
.tlogo{width:auto;object-fit:contain;opacity:.95;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.tlogo:hover{opacity:1;transform:translateY(-2px)}
/* per-brand optical sizing (logos trimmed to tight bounds; sized by presence) */
.tlogo--hutch{height:42px}
.tlogo--pellicano{height:38px}
.tlogo--multiplex{height:23px}
.tlogo--tomkins{height:50px}
@media(max-width:520px){.tlogo--hutch{height:34px}.tlogo--pellicano{height:31px}.tlogo--multiplex{height:18px}.tlogo--tomkins{height:40px}}
.tquote{max-width:62ch;margin:0 auto;text-align:center;font-family:var(--cond);font-weight:500;
  font-size:clamp(1.15rem,2vw,1.55rem);line-height:1.32;letter-spacing:-.005em;color:var(--ink)}
.tquote__by{text-align:center;margin-top:18px;font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.08em;color:var(--bronze-hi);text-transform:uppercase}

/* ---- how ---- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:840px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.steps{grid-template-columns:1fr}}
.step{background:var(--bg);padding:clamp(24px,2.6vw,34px);min-height:230px;display:flex;flex-direction:column}
.step .no{font-family:var(--mono);color:var(--bronze);letter-spacing:.16em;font-size:12px}
.step h3{font-family:var(--cond);font-weight:600;font-size:clamp(1.2rem,1.8vw,1.55rem);margin:auto 0 12px;letter-spacing:-.01em}
.step p{color:var(--soft);font-size:14px;line-height:1.5}

/* ---- credentials ---- */
.creds{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:900px){.creds{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.creds{grid-template-columns:1fr}}
.cred{background:var(--bg);padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;gap:8px;min-height:150px}
.cred .k{color:var(--steel)}
.cred .v{font-family:var(--cond);font-weight:600;font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1;margin-top:auto;letter-spacing:-.01em}
.cred .v.br{color:var(--bronze)}
.cred .s{color:var(--soft);font-size:13px;line-height:1.4}
.credfoot{margin-top:26px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;color:var(--steel);font-size:13px}
.credfoot img{height:44px;width:auto}
/* credentials: text stamps + prominent Australian Made & Owned mark (short-&-sweet page) */
.credgrid{display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(30px,5vw,68px);flex-wrap:wrap;
  margin-top:clamp(26px,4vh,44px);border-top:1px solid var(--line2);padding-top:clamp(26px,3vh,36px)}
.stamps{display:flex;flex-wrap:wrap;gap:clamp(22px,3.2vw,48px);align-items:flex-start}
.stamp{display:flex;flex-direction:column;gap:5px}
.stamp .sv{font-family:var(--cond);font-weight:700;font-size:clamp(1.4rem,2.3vw,2rem);line-height:1;letter-spacing:-.01em;color:var(--bronze)}
.stamp .sl{color:var(--steel);font-size:12.5px;line-height:1.35;max-width:20ch}
.certs{flex:none;display:flex;align-items:center;gap:clamp(18px,2.6vw,38px)}
.aumade{display:block;transition:transform .4s var(--ease)}
.aumade img{height:clamp(94px,11vw,132px);width:auto;display:block}
.aumade:hover{transform:translateY(-3px)}
.isologo{height:clamp(94px,11vw,132px);width:auto;display:block}
.stampfoot{margin-top:22px;color:var(--steel);font-size:12.5px;letter-spacing:.02em}
/* image-forward product tiles — "Beyond the louvre" (labels are fixed-light: they sit on a dark image scrim) */
.products-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.4vw,18px)}
.ptile{grid-column:span 2;display:flex;flex-direction:column;background:#17272f;border:1px solid rgba(201,144,47,.6);border-radius:2px;overflow:hidden;isolation:isolate}
.ptile:nth-child(1),.ptile:nth-child(2){grid-column:span 3}
.ptile__img{position:relative;aspect-ratio:4/3;overflow:hidden}
.ptile:nth-child(1) .ptile__img,.ptile:nth-child(2) .ptile__img{aspect-ratio:16/9}
.ptile__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.15) contrast(1.05) brightness(.82);transition:transform .7s var(--ease),filter .5s var(--ease)}
.ptile:hover .ptile__img img{transform:scale(1.05);filter:grayscale(0) contrast(1.05) brightness(.95)}
.ptile__grad{position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(11,14,17,.9) 0%,rgba(11,14,17,.3) 40%,transparent 72%)}
.ptile__head{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(15px,1.5vw,22px)}
.ptile__k{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#e7ad52}
.ptile__head h3{font-family:var(--cond);font-weight:700;font-size:clamp(1.15rem,1.7vw,1.55rem);line-height:1.04;letter-spacing:-.01em;margin-top:7px;color:#eef4f6}
.ptile__panel{flex:1 1 auto;display:flex;flex-direction:column;gap:13px;justify-content:space-between;background:#17272f;border-top:1px solid rgba(201,144,47,.6);padding:clamp(16px,1.5vw,20px)}
.ptile__panel p{color:#dbe3e7;font-size:16px;line-height:1.5;font-weight:500;margin:0}
.ptile__view{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#e7ad52;transition:gap .3s var(--ease)}
.ptile__view svg{width:14px;height:14px}
.ptile:hover .ptile__view{gap:13px}
@media(max-width:820px){.products-grid{grid-template-columns:1fr 1fr}.ptile,.ptile:nth-child(1),.ptile:nth-child(2){grid-column:span 1}.ptile:nth-child(1) .ptile__img,.ptile:nth-child(2) .ptile__img{aspect-ratio:4/3}}
@media(max-width:520px){.products-grid{grid-template-columns:1fr}}

/* ================= tools (configurator promo + live airflow calc) ================= */
.tools{display:grid;grid-template-columns:5fr 7fr;gap:clamp(12px,1.6vw,20px)}
.tool{border:1px solid var(--line2);border-radius:2px;background:var(--panel);position:relative;overflow:hidden;isolation:isolate}
.tool__k{display:inline-block;font-family:var(--mono);text-transform:uppercase;letter-spacing:.18em;font-size:11px;color:var(--bronze)}
/* configurator promo card */
.tool--config{display:flex;min-height:360px;text-decoration:none;color:var(--ink)}
.tool--config img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% center;z-index:-2;
  filter:contrast(1.03) brightness(.92);transition:transform .8s var(--ease),filter .8s var(--ease)}
.tool--config__grad{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(14,26,32,.08) 0%,rgba(14,26,32,.55) 52%,rgba(14,26,32,.95) 100%)}
.tool--config:hover img{transform:scale(1.04);filter:contrast(1.04) brightness(1)}
.tool--config__body{margin-top:auto;padding:clamp(22px,2.4vw,34px)}
.tool--config__body h3{font-family:var(--cond);font-weight:600;letter-spacing:-.01em;line-height:1.02;
  font-size:clamp(1.5rem,2.6vw,2.1rem);margin:12px 0 10px}
.tool--config__body p{color:var(--soft);font-size:14.5px;max-width:44ch;margin-bottom:18px}
.tool__go{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);text-transform:uppercase;
  letter-spacing:.14em;font-size:11.5px;color:#111;background:var(--bronze);
  padding:13px 22px;border-radius:2px;box-shadow:0 6px 22px -8px rgba(201,144,47,.55);
  transition:background .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)}
.tool__go svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.tool--config:hover .tool__go{background:var(--bronze-hi);box-shadow:0 10px 30px -8px rgba(201,144,47,.65);transform:translateY(-1px)}
.tool--config:hover .tool__go svg{transform:translateX(4px)}
/* calculator instrument panel */
.tool--calc{padding:clamp(20px,2vw,30px);background:linear-gradient(160deg,var(--panel2),var(--bg2))}
.tool__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--line2)}
.tool__std{font-size:11px;letter-spacing:.16em;color:var(--steel)}
.calc2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2vw,30px)}
.calc2__inputs{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start}
.calc2__field--full{grid-column:1/-1}
.calc2__lbl{display:block;font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;
  font-size:10px;color:var(--steel);margin-bottom:7px}
.calc2__profiles{display:flex;flex-wrap:wrap;gap:6px}
.calc2__prof{font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;font-size:11px;
  color:var(--soft);background:transparent;border:1px solid var(--line2);border-radius:2px;
  padding:6px 10px;cursor:pointer;transition:all .2s var(--ease)}
.calc2__prof:hover{border-color:var(--bronze);color:var(--ink)}
.calc2__prof.is-active{background:var(--bronze);border-color:var(--bronze);color:#111;font-weight:600}
.calc2__wrap{display:flex;align-items:center;gap:8px;border:1px solid var(--line2);border-radius:2px;
  padding:0 11px;background:rgba(0,0,0,.18);transition:border-color .2s var(--ease)}
.calc2__wrap:focus-within{border-color:var(--bronze)}
.calc2__wrap input{flex:1;width:100%;background:transparent;border:0;outline:0;color:var(--ink);
  font-family:var(--sans);font-size:15px;font-weight:600;padding:10px 0;-moz-appearance:textfield}
.calc2__wrap input::-webkit-outer-spin-button,.calc2__wrap input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc2__unit{font-family:var(--mono);font-size:11px;color:var(--steel)}
.calc2__adv{grid-column:1/-1;border-top:1px solid var(--line);padding-top:12px}
.calc2__adv summary{font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;font-size:10.5px;
  color:var(--steel);cursor:pointer;list-style:none}
.calc2__adv summary::-webkit-details-marker{display:none}
.calc2__adv summary::before{content:"+ ";color:var(--bronze)}
.calc2__adv[open] summary::before{content:"\2212 "}
.calc2__adv-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
.calc2__out{display:flex;flex-direction:column;border-left:1px solid var(--line2);padding-left:clamp(16px,1.8vw,26px)}
.calc2__profline{font-size:11px;letter-spacing:.12em;color:var(--bronze);text-transform:uppercase;margin-bottom:16px}
.calc2__readouts{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.calc2__ro{display:flex;flex-direction:column}
.calc2__ro--lead{grid-column:span 1}
.calc2__val{font-family:var(--cond);font-weight:600;line-height:1;font-size:clamp(1.8rem,3.4vw,2.7rem);color:var(--ink)}
.calc2__val--sm{font-size:clamp(1.15rem,2vw,1.5rem);color:var(--silver)}
.calc2__u{font-family:var(--mono);font-size:10.5px;color:var(--steel);margin-top:3px}
.calc2__cap{font-family:var(--sans);font-size:12px;color:var(--soft);margin-top:6px}
.calc2__note{margin-top:auto;padding-top:18px;font-size:11.5px;color:var(--steel);line-height:1.5}
@media(max-width:980px){.tools{grid-template-columns:1fr}.tool--config{min-height:300px}}
@media(max-width:680px){.calc2{grid-template-columns:1fr}.calc2__out{border-left:0;padding-left:0;border-top:1px solid var(--line2);padding-top:18px}}
@media(max-width:520px){.calc2__inputs,.calc2__readouts,.calc2__adv-fields{grid-template-columns:1fr}}

@media(max-width:640px){.credgrid{justify-content:flex-start}.aumade img{height:110px}}

/* ---- closing ---- */
.close{position:relative;padding:clamp(44px,6.7vh,80px) 0 clamp(40px,6vh,72px);overflow:hidden;isolation:isolate}
.close__glow{position:absolute;inset:0;z-index:-1;background:radial-gradient(90% 70% at 50% 0%,rgba(201,144,47,.16),transparent 60%)}
.close h2{font-family:var(--cond);font-weight:600;font-size:clamp(2.4rem,6.4vw,5rem);line-height:.96;
  letter-spacing:-.025em;max-width:16ch;overflow-wrap:break-word}
.close .kick{color:var(--bronze);margin-bottom:20px}
.close__sub{margin-top:22px;max-width:54ch;color:var(--soft);font-size:clamp(15px,1.4vw,18px);line-height:1.5}
.close__cta{margin-top:clamp(34px,5vh,52px);display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px}
.proj-cta{display:flex;justify-content:center;padding:clamp(30px,5vh,56px) var(--gut) 0}
.dl.big{padding:17px 30px;font-size:15px;letter-spacing:0}
.dl.big svg{width:15px;height:15px}
.contact{margin-top:clamp(56px,9vh,96px);display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
  border-top:1px solid var(--line);padding-top:40px}
@media(max-width:680px){.contact{grid-template-columns:1fr}}
.contact .k{color:var(--steel);margin-bottom:9px}
.contact .d{font-family:var(--cond);font-weight:500;font-size:clamp(1.2rem,1.8vw,1.5rem);line-height:1.15;color:var(--ink)}
.foot{padding:clamp(48px,7vh,82px) var(--gut) clamp(26px,3.5vh,36px);border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:clamp(32px,4.2vh,50px)}
.foot__top{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr 1.2fr;gap:clamp(22px,3vw,46px)}
.foot__brand{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.foot__logo{height:46px;width:auto;filter:brightness(0) invert(1);opacity:.95}
.foot .fm{color:var(--steel);font-size:11px;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;line-height:1.8}
.foot__col{display:flex;flex-direction:column;gap:10px}
.foot__h{font-family:var(--mono);text-transform:uppercase;letter-spacing:.18em;font-size:10.5px;color:var(--bronze);margin-bottom:4px}
.foot__col a,.foot__addr{color:var(--soft);font-size:13.5px;transition:color .2s;line-height:1.45}
.foot__col a:hover{color:var(--bronze-hi)}
.foot__insta{display:inline-flex;align-items:center;gap:8px}
.foot__insta svg{width:16px;height:16px}
.foot__compliance{display:flex;justify-content:space-between;align-items:center;gap:clamp(20px,3vw,44px);
  flex-wrap:wrap;padding-top:clamp(24px,3.4vh,36px);border-top:1px solid var(--line)}
.foot__badges{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);flex-wrap:wrap}
.foot__badges .aumade img,.foot__badges .isologo{height:clamp(52px,6vw,66px);width:auto;display:block}
.foot__legal{display:flex;flex-direction:column;gap:5px;color:var(--steel);font-size:12px;letter-spacing:.02em;line-height:1.45}
.foot__qbcc b{color:var(--silver);font-weight:600}
.foot__bottom{display:flex;flex-direction:column;gap:6px;text-align:right;font-family:var(--mono);
  text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:var(--steel)}
.foot__bottom a{color:var(--steel);transition:color .2s}
.foot__bottom a:hover{color:var(--bronze-hi)}
@media(max-width:820px){.foot__top{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot__top{grid-template-columns:1fr}.foot__compliance{flex-direction:column;align-items:flex-start}.foot__bottom{text-align:left}}

/* ================= reveal system (progressive) ================= */
.js .reveal{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.d1{transition-delay:.08s}.js .reveal.d2{transition-delay:.16s}
.js .reveal.d3{transition-delay:.24s}.js .reveal.d4{transition-delay:.32s}
.js .clip{clip-path:inset(0 0 100% 0);transition:clip-path 1.25s var(--ease)}
.js .clip.in{clip-path:inset(0 0 0 0)}
.js .word{display:inline-block}
.js .word>span{display:inline-block;transform:translateY(.85em);opacity:0;
  transition:transform .95s var(--ease),opacity .8s var(--ease)}
.js .word.in>span{transform:none;opacity:1}
.js .growx{transform:scaleX(0)!important;transition:transform 1s var(--ease)}
.js .growx.in{transform:scaleX(1)!important}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition-duration:.001s!important}
  .js .reveal,.js .clip,.js .word>span,.hero__img{opacity:1!important;transform:none!important;clip-path:none!important}
  .scrollcue .dot::after{display:none}
}

/* ===================== amplification layer ===================== */
/* hero depth — the darkened facade photo must sit ABOVE the base panel */
.hero__bg{z-index:-5}
.hero__img{z-index:-4}
.hero__rake{position:absolute;inset:0;z-index:-3;overflow:hidden;pointer-events:none;mix-blend-mode:soft-light}
.hero__rake i{position:absolute;top:-10%;bottom:-10%;left:-30%;width:60%;
  background:linear-gradient(100deg,transparent,rgba(231,173,82,.28) 35%,rgba(255,255,255,.48) 50%,rgba(231,173,82,.28) 65%,transparent);
  transform:translate3d(-130%,0,0) skewX(-10deg);animation:rake 16s cubic-bezier(.45,.05,.55,.95) infinite}
@keyframes rake{0%,56%{transform:translate3d(-130%,0,0) skewX(-10deg)}100%{transform:translate3d(340%,0,0) skewX(-10deg)}}

/* machined graduated rules on section heads */
.sechead .lbl{height:10px;background-image:
  linear-gradient(0deg,var(--line2),var(--line2)),
  repeating-linear-gradient(90deg,var(--line2) 0 1px,transparent 1px 25%),
  repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 14px);
  background-size:100% 1px,100% 10px,100% 5px;background-position:left bottom;background-repeat:no-repeat}

/* survey plumb-line scroll cue (retires the mouse pill) */
.scrollcue{align-items:flex-start}
.scrollcue .dot{width:1px;height:56px;border:none;border-radius:0;
  background:repeating-linear-gradient(180deg,var(--line2) 0 1px,transparent 1px 11px)}
.scrollcue .dot::after{left:-1px;top:0;width:3px;height:9px;border-radius:0;transform:none;
  background:var(--bronze-hi);animation:cue 2.4s cubic-bezier(.45,.05,.55,.95) infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}18%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translateY(47px)}}

/* shop-drawing dimension overlay on the Pantheon louvre photo — UNUSED CLASS, see note at file end */
.dim{position:absolute;inset:0;z-index:3;pointer-events:none}
.dim svg{width:100%;height:100%;display:block}
.dim line{stroke:rgba(215,221,227,.6);stroke-width:1}
.dim line.b{stroke:var(--bronze)}
.dim .lab{position:absolute;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bronze-hi)}
.dim .lab.v{right:4%;top:50%;transform:translateY(-50%);writing-mode:vertical-rl}
.dim .lab.l{left:8%;bottom:14%}
.js .dim line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease)}
.js .dim.in line{stroke-dashoffset:0}
.js .dim .lab{opacity:0;transition:opacity .6s var(--ease) .9s}
.js .dim.in .lab{opacity:1}

/* closing — light falling through louvres */
.close__glow{background:
  repeating-linear-gradient(179deg,transparent 0 64px,rgba(0,0,0,.16) 84px 96px,transparent 116px 128px),
  radial-gradient(90% 70% at 50% 0%,rgba(201,144,47,.16),transparent 60%)}

/* hero video (banner montage, looped; facade photo is the poster/fallback) */
/* Geometry, grade and entrance scale all match .hero__img above, so the video can
   take over from the still without anything appearing to move. */
.hero__vid{position:absolute;inset:-12% 0 0;z-index:-4;width:100%;height:118%;object-fit:cover;
  opacity:0;transform:scale(1.14);transition:opacity .45s var(--ease);
  filter:grayscale(.3) contrast(1.05) brightness(.58)}
.hero__vid.ready{opacity:1}

/* interactive 3D Pantheon louvre */
.louvre3d{display:flex;flex-direction:column;justify-content:center;
  background:radial-gradient(120% 90% at 50% 32%,#1b232b,#0d1116 78%)}
.louvre3d .badge{position:absolute;top:16px;left:16px;z-index:4;background:rgba(11,14,17,.6)}
.louvre3d__hint{position:absolute;top:18px;right:16px;z-index:4;color:var(--steel);font-size:9.5px;
  letter-spacing:.2em;opacity:.7}
.louvre3d__stage{position:relative;flex:1;display:flex;align-items:center;justify-content:center;min-height:470px}
.lcanvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;transition:opacity .5s var(--ease)}
/* Narrow viewports get a still captured from the WebGL render instead of the
   canvas — see js/v2/louvre-still.js. Same slot, same picture, no Three.js.
   Selector is .pan__fig img.lstill, not .lstill: #louvre3d also carries
   .pan__fig, whose `.pan__fig img` rule (object-fit:cover, inset:-7%, height:114%,
   a grey/darken filter) is more specific than a bare .lstill and was winning.
   That blew the render up past the frame — it read as over-zoomed on the
   capability page and as an empty box on the home page, where the figure is
   shorter and the crop landed on transparent pixels. These are photo treatments
   and none of them should touch a transparent product render. */
.pan__fig img.lstill,.lstill{position:absolute;inset:0;width:100%;height:100%;
  display:block;object-fit:contain;filter:none}
.lcanvas:active{cursor:grabbing}
.js .louvre3d .lcanvas{opacity:0}
.js .louvre3d.in .lcanvas{opacity:1;transition:opacity 1.1s var(--ease)}
.louvre3d.swap .lcanvas{opacity:.4}
.louvre3d__readout{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:16px 18px;
  display:flex;flex-direction:column;gap:5px;background:linear-gradient(0deg,rgba(11,14,17,.92),transparent)}
.louvre3d__readout .lname{color:var(--silver);font-size:16px;letter-spacing:.12em}
.louvre3d__readout .lspec{color:var(--bronze);font-size:13.5px;letter-spacing:.06em}
.row.data{cursor:pointer;transition:background .3s var(--ease),color .3s}
.row.data.active{background:var(--panel)}
.row.data.active .name{color:var(--bronze)}
.row.data:focus-visible{outline:1px solid var(--bronze);outline-offset:-1px}
@media(max-width:940px){.louvre3d__stage{min-height:340px}}

/* mobile louvre profile tabs — a direct child of .pan placed before the visual.
   display:none on desktop keeps the 2-col grid at 2 items; when .pan collapses
   to 1 col (<=940px) they surface as a swipeable strip ABOVE the visual, and the
   full .spec data table stays below as reference. Wired in js/v2/site.js. */
.ltabs{display:none}
@media(max-width:940px){
  /* wrap so all five profiles stay visible on a phone (no hidden horizontal scroll) */
  .ltabs{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:14px;margin-bottom:2px}
  .ltab{flex:none;font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;font-size:12px;
    color:var(--soft);background:var(--panel);border:1px solid var(--line2);border-radius:2px;
    padding:10px 15px;cursor:pointer;transition:background .18s,border-color .18s,color .18s}
  .ltab:hover{border-color:var(--bronze);color:var(--ink)}
  .ltab.is-active{background:var(--bronze);border-color:var(--bronze);color:#111;font-weight:700}
}

/* reduced-motion overrides for the amplification layer (last = wins) */
@media(prefers-reduced-motion:reduce){
  .js .dim line{stroke-dashoffset:0!important}.js .dim .lab{opacity:1!important}
  .hero__rake i{animation:none!important}
  .hero__vid{display:none!important}
  .js .louvre3d .lcanvas{opacity:1}
}

/* =========================================================================
   V2 SITE ADDITIONS — everything below this line is NOT in the source page.
   Two deliberate adaptations required for the multi-page site (per spec):

   1. Nav real page links. The source nav is logo + a single live section
      label ("Capability · 2026") + the download button — fine for a single
      page, not enough for a site. Links below are typed in the exact same
      nav language (--mono, uppercase, .16em tracking, --soft/--bronze-hi
      hover) as the rest of the nav.

   2. Projects as an auto-marquee, not the source's pinned-scroll gallery.
      The source's PROJECTS section is actually built with a JS-driven
      position:sticky horizontal track (.pgal-pin/.pgal-stage/.pgal-track
      above) driven by scroll offset — i.e. scroll-hijacking. That JS is
      deliberately NOT ported (see js/v2/README below / build report).
      The source also defines an unused/dead .marquee + .mrow + @keyframes
      scroll rule set (see "PROJECTS (pinned horizontal — UNUSED CLASSES"
      and "trusted" comments above) that was written but never wired to any
      markup — the Trusted section actually renders as static .logos + a
      .tquote testimonial. .proj-marquee / .proj-track below reuse that
      same @keyframes scroll the source already ships, applied to the
      source's own .panel card markup, so the panels drift past
      continuously instead of being scroll-pinned.
   ========================================================================= */

.nav__links{display:flex;align-items:center;gap:clamp(12px,1.8vw,26px)}
.nav__links a{font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;font-size:11px;
  color:var(--soft);transition:color .3s var(--ease)}
.nav__links a:hover,.nav__links a:focus-visible{color:var(--bronze-hi)}
/* nav dropdowns (Products, Tools) */
.nav__dd{position:relative;display:flex;align-items:center}
.nav__dd-trigger{font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;font-size:11px;
  color:var(--silver);cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:color .2s;outline:none}
.nav__dd-trigger::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-1px);opacity:.65;transition:transform .25s var(--ease)}
.nav__dd:hover .nav__dd-trigger,.nav__dd:focus-within .nav__dd-trigger{color:var(--bronze-hi)}
.nav__dd:hover .nav__dd-trigger::after,.nav__dd:focus-within .nav__dd-trigger::after{transform:rotate(225deg) translateY(2px)}
.nav__dd-menu{position:absolute;top:100%;left:-16px;padding-top:16px;min-width:214px;
  opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s}
.nav__dd:hover .nav__dd-menu,.nav__dd:focus-within .nav__dd-menu{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.nav__dd-inner{background:rgba(11,14,17,.94);backdrop-filter:blur(14px) saturate(1.1);
  border:1px solid var(--line2);border-radius:3px;padding:8px;box-shadow:0 22px 54px -20px rgba(0,0,0,.75)}
.nav__dd-menu a{display:block;font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:10.5px;
  color:var(--soft);padding:11px 15px;border-radius:2px;transition:background .18s,color .18s}
.nav__dd-menu a:hover{background:rgba(201,144,47,.12);color:var(--bronze-hi)}
.nav__enquire .dl__sheen{display:none}

/* hamburger toggle — hidden on desktop (hover dropdowns handle nav there) */
.nav__toggle{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer}
.nav__toggle span{display:block;width:24px;height:2px;margin:0 auto;background:var(--silver);border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s var(--ease)}

/* ── mobile nav (<=980px): hamburger + full-screen slide-in panel ──
   .nav__links is hidden as a flow element and re-shown as a fixed overlay.
   The bar chrome (logo, Enquire, toggle) sits above the panel so it stays
   tappable; the panel's own solid backdrop fills behind the transparent bar. */
@media(max-width:980px){
  .nav__toggle{display:inline-flex}
  .nav__logo-link,.nav__enquire,.nav__toggle{position:relative;z-index:2}
  .nav__links{
    position:fixed;inset:0;z-index:1;
    display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    padding:calc(84px + env(safe-area-inset-top,0px)) var(--gut) calc(40px + env(safe-area-inset-bottom,0px));
    background:rgba(11,14,17,.98);backdrop-filter:blur(18px) saturate(1.1);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    opacity:0;visibility:hidden;transform:translateX(6%);
    transition:opacity .32s var(--ease),transform .4s var(--ease),visibility .32s var(--ease)}
  .nav__links>a,.nav__links .nav__dd-trigger{
    font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;font-size:15px;
    color:var(--silver);width:100%;padding:17px 2px}
  .nav__links>a{border-bottom:1px solid var(--line)}
  .nav__links .nav__dd{display:block;width:100%;border-bottom:1px solid var(--line)}
  .nav__links .nav__dd-trigger{display:flex;justify-content:space-between;align-items:center}
  /* submenu: tap-to-expand via .open (JS), not hover */
  /* grid-template-rows 0fr->1fr rather than max-height. Animating max-height
     relayouts on every frame, and it needs a guessed ceiling — the old 280px
     would have clipped the menu silently if a link were ever added. 1fr is
     whatever the content actually is. */
  .nav__dd-menu{position:static;padding-top:0;min-width:0;transform:none;pointer-events:auto;
    opacity:1;visibility:visible;display:grid;grid-template-rows:0fr;
    transition:grid-template-rows .35s var(--ease)}
  .nav__dd.open .nav__dd-menu{grid-template-rows:1fr}
  /* min-height:0 lets the grid item actually collapse to zero; overflow moves
     here from the menu so the clipping still happens while it animates */
  .nav__dd-inner{background:none;border:0;box-shadow:none;padding:0 0 8px 16px;backdrop-filter:none;
    min-height:0;overflow:hidden}
  .nav__dd-menu a{padding:12px 2px;font-size:12px}
  .nav__dd:hover .nav__dd-trigger::after,.nav__dd:focus-within .nav__dd-trigger::after{transform:rotate(45deg) translateY(-1px)}
  .nav__dd.open .nav__dd-trigger::after{transform:rotate(225deg) translateY(2px)}
  .nav__dd.open .nav__dd-trigger{color:var(--bronze-hi)}
  /* open state */
  body.nav-open{overflow:hidden}
  /* .nav.small carries a backdrop-filter, and an element with backdrop-filter
     becomes the containing block for its position:fixed descendants. That traps
     .nav__links (position:fixed;inset:0) inside the 60px bar instead of the
     viewport, so the menu opened as a stub showing only the first link. Dropping
     the filter while the menu is open hands the viewport back. Nothing is lost
     visually — the panel's own opaque backdrop covers the bar anyway. */
  body.nav-open .nav{backdrop-filter:none;-webkit-backdrop-filter:none}
  body.nav-open .nav__links{opacity:1;visibility:visible;transform:none}
  body.nav-open .nav__toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.nav-open .nav__toggle span:nth-child(2){opacity:0}
  body.nav-open .nav__toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media(max-width:560px){.nav__logo{height:44px}.nav__enquire{padding:11px 16px}}

/* pinned-gallery instrument HUD — the graduated rule that tracks progress
   across the horizontal project scroll. site.js has always built this element
   and driven the marker along it (see galHud), but the styles only ever existed
   in capability.njk's own block, so on the home page it was an unstyled row with
   a zero-width rule and the marker had nowhere to travel. Lifted here verbatim
   so both pinned galleries read as the same instrument. */
.ghud{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:5;
  display:none;align-items:center;gap:18px;pointer-events:none;white-space:nowrap}
.ghud .mono{font-size:10.5px}
.ghud__ix{color:var(--bronze)}
.ghud__nm{color:var(--silver);max-width:32ch;overflow:hidden;text-overflow:ellipsis}
.ghud__rule{position:relative;width:min(30vw,300px);height:12px;background-image:
  linear-gradient(0deg,var(--line2),var(--line2)),
  repeating-linear-gradient(90deg,var(--line2) 0 1px,transparent 1px 25%),
  repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 5%);
  background-size:100% 1px,100% 10px,100% 5px;background-position:left bottom;background-repeat:no-repeat}
.ghud__rule i{position:absolute;left:0;bottom:0;width:2px;height:12px;background:var(--bronze-hi);
  box-shadow:0 0 10px rgba(231,173,82,.7)}
.projects.stacked .ghud{display:none!important}

.proj-marquee{overflow:hidden;margin-top:clamp(30px,5vh,52px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.proj-track{display:flex;width:max-content;animation:scroll 64s linear infinite}
.proj-marquee:hover .proj-track{animation-play-state:paused}
.proj-track .panel,.proj-track .panel.intro,.proj-track .panel.type{
  height:clamp(400px,58vh,640px);border-right:1px solid rgba(0,0,0,.5)}
@media(prefers-reduced-motion:reduce){.proj-track{animation:none}}

/* ── home projects: mobile stacked layout ────────────────────────────────────
   Below 901px this is the DEFAULT, not something JS switches to.

   It used to be class-only: the page painted the desktop pinned layout
   (.pgal-stage sticky at 100svh, a horizontal track of 78vw panels), then
   site.js setupGal() ran and added .stacked, and the whole section relaid out
   to a vertical column. That single reflow measured CLS 1.00 on the mobile home
   page — the worst possible score — and dragged mobile Lighthouse to 63 against
   desktop's 96-99.

   Matching the media query to setupGal()'s own >900px test means mobile paints
   the stacked layout first time and the class becomes a no-op. The .stacked
   rules below are kept because JS also stacks for reduced-motion at any width,
   and when the track is too narrow to be worth hijacking. */
@media (max-width:900px){
  .projects .pgal-pin{height:auto!important}
  .projects .pgal-stage{position:static;height:auto;overflow:visible;display:block}
  .projects .pgal-track{flex-direction:column;height:auto;transform:none!important;will-change:auto;gap:clamp(12px,2vw,18px)}
  .projects .panel,
  .projects .panel.intro,
  .projects .panel.type{width:100%;height:auto;min-height:clamp(340px,58vh,480px);border-right:0}
  .projects .panel.intro{min-height:0;padding:clamp(24px,6vw,44px) var(--gut)}
  .projects .panel__img{transform:none!important}
  .projects .pgal-track a.panel:nth-of-type(n+4){display:none}
}

/* The same unwinding, driven by the class — for the reduced-motion and
   narrow-track cases above 900px, where the media query does not apply. */
.projects.stacked .pgal-pin{height:auto!important}
.projects.stacked .pgal-stage{position:static;height:auto;overflow:visible;display:block}
.projects.stacked .pgal-track{flex-direction:column;height:auto;transform:none!important;will-change:auto;gap:clamp(12px,2vw,18px)}
.projects.stacked .panel,
.projects.stacked .panel.intro,
.projects.stacked .panel.type{width:100%;height:auto;min-height:clamp(340px,58vh,480px);border-right:0}
.projects.stacked .panel.intro{min-height:0;padding:clamp(24px,6vw,44px) var(--gut)}
/* parallax sets an inline transform on .panel__img [data-par]; neutralise it when
   stacked so the (inset:0) image stays fully covering its taller card */
.projects.stacked .panel__img{transform:none!important}
/* keep the stacked list short: show the first 3 project cards, then the
   "View all projects" CTA below the track carries the rest (project <a>s are
   the only <a> children; the intro is a <div> so it's not counted) */
.projects.stacked .pgal-track a.panel:nth-of-type(n+4){display:none}

/* ── hero CTA row (home): primary "Start a project" + ghost download + configurator link ── */
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px}
.cta{position:relative;display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);
  font-size:15px;letter-spacing:0;font-weight:600;
  padding:15px 26px;border-radius:3px;background:var(--bronze);color:#0e1a20;
  transition:background .3s var(--ease),box-shadow .3s var(--ease),transform .2s var(--ease)}
.cta svg{width:14px;height:14px}
.cta:hover{background:var(--bronze-hi);box-shadow:0 10px 34px -8px rgba(201,144,47,.6);transform:translateY(-1px)}
.cta--lg{padding:18px 34px;font-size:16px;letter-spacing:0}
.cta--lg svg{width:16px;height:16px}
.panel:hover .ptile__view{gap:13px}
.dl.ghost{background:transparent;color:var(--silver);border:1px solid var(--line2)}
.dl.ghost:hover{background:rgba(203,217,223,.06);border-color:var(--silver);box-shadow:none;color:var(--ink)}
.cta-link{font-family:var(--sans);font-size:14.5px;letter-spacing:0;font-weight:500;
  color:var(--soft);border-bottom:1px solid var(--line2);padding-bottom:3px;transition:color .2s,border-color .2s}
.cta-link:hover{color:var(--ink);border-color:var(--bronze)}

/* who section as a simple two-column text intro (headline left, body right) */
.who--text{align-items:start;gap:clamp(30px,7vw,110px)}
.who__body p:first-child{margin-top:0}
.who__body a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--bronze);transition:color .2s}
.who__body a:hover{color:var(--bronze)}

/* ================= sub-page hero ================= */
.phero{position:relative;min-height:min(70vh,620px);display:flex;align-items:flex-end;
  padding:clamp(120px,20vh,200px) 0 clamp(48px,8vh,88px);overflow:hidden;isolation:isolate;border-bottom:1px solid var(--line)}
.phero__bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;filter:grayscale(.3) contrast(1.05) brightness(.5)}
.phero__vid{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;filter:grayscale(.3) contrast(1.05) brightness(.44)}
.phero__grad{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,26,32,.55),rgba(14,26,32,.8) 62%,var(--bg))}
.phero__rake{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;mix-blend-mode:soft-light}
.phero__rake i{position:absolute;top:-10%;bottom:-10%;left:-30%;width:60%;
  background:linear-gradient(100deg,transparent,rgba(231,173,82,.28) 35%,rgba(255,255,255,.46) 50%,rgba(231,173,82,.28) 65%,transparent);
  transform:translate3d(-130%,0,0) skewX(-10deg);animation:rake 16s cubic-bezier(.45,.05,.55,.95) infinite}
.phero__eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.phero__eyebrow .ln{width:44px;height:1px;background:var(--bronze)}
.phero__eyebrow .mono{color:var(--steel)}
.phero__title{font-family:var(--cond);font-weight:600;letter-spacing:-.02em;line-height:.96;font-size:clamp(2.6rem,6.6vw,5.2rem);max-width:16ch;text-shadow:0 2px 30px rgba(11,14,17,.55);overflow-wrap:break-word}
.phero__title .em{color:var(--bronze)}
.phero__sub{margin-top:26px;max-width:60ch;color:var(--soft);font-size:clamp(19px,1.5vw,23px);line-height:1.55}
.phero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;margin-top:clamp(26px,3.4vh,38px)}

/* ================= louvre system cards ================= */
.lsys{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px);margin-top:clamp(30px,5vh,52px)}
.lsys__card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line2);border-radius:2px;overflow:hidden}
.lsys__img{aspect-ratio:16/10;overflow:hidden}
.lsys__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2) contrast(1.04) brightness(.82);transition:transform .6s var(--ease),filter .6s var(--ease)}
.lsys__card:hover .lsys__img img{transform:scale(1.05);filter:grayscale(0) contrast(1.04) brightness(.95)}
.lsys__body{display:flex;flex-direction:column;flex:1;padding:clamp(22px,2vw,30px)}
/* 3D rotating louvre profile on a warm stone backdrop (deity-cards.js) */
.lsys__viz{position:relative;aspect-ratio:16/11;overflow:hidden;background:#2a2622 center/cover no-repeat;border-bottom:1px solid var(--line2)}
.lsys__viz canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Below 900px deity-boot.js swaps the canvas for a still of the same render.
   Same slot, same picture, no Three.js — the still is transparent so the stone
   backdrop below still shows through. */
.lsys__viz .deity-still{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain}
.lsys__viz--zeus{background-image:url(/assets/images/zeus-stone.jpg)}
.lsys__viz--odin{background-image:url(/assets/images/odin-stone.webp)}
.lsys__viz--hydra{background-image:url(/assets/images/zeus-hydra-stone.jpg)}
.lsys__viz--thor{background-image:url(/assets/images/thor-stone.jpg)}
.lsys__viz--magni{background-image:url(/assets/images/magni-stone.jpg)}
.lsys__viz--loki{background-image:url(/assets/images/loki-stone.jpg)}
.lsys__series{font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;font-size:10.5px;color:var(--bronze);margin-bottom:14px}
.lsys__card h3{font-family:var(--cond);font-weight:600;font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1;margin-bottom:12px}
/* Screens page system cards — title in the amber accent, to match the
   configurator's own card styling. */
#range .lsys__card h3, #gates .lsys__card h3{color:var(--bronze)}
.lsys__card p{color:var(--soft);font-size:14px;line-height:1.5;margin-bottom:18px}
.lsys__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;margin-bottom:20px}
.lsys__links{border-top:1px solid var(--line);padding-top:16px}
@media(max-width:900px){.lsys{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.lsys{grid-template-columns:1fr}}

/* ================= comparison table + downloads ================= */
.cmp{margin-top:clamp(28px,4vh,44px);border-top:1px solid var(--line2)}
.cmp__row{display:grid;grid-template-columns:1.6fr .8fr .9fr .8fr .7fr .8fr .7fr;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.cmp__row--head span{font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;font-size:17px;color:var(--steel)}
.cmp__name{font-family:var(--cond);font-weight:600;font-size:clamp(1.35rem,1.8vw,1.7rem)}
.cmp__row span{font-size:20px}
.cmp__row b{color:var(--bronze-ink)}
.cmp__muted{color:var(--steel)}
.cmp__dl a{display:inline-block;font-family:var(--mono);font-size:15px;letter-spacing:.08em;color:var(--bronze-ink);
  border:1px solid rgba(138,90,18,.4);border-radius:2px;padding:5px 10px;transition:background .2s,color .2s,border-color .2s}
.cmp__dl a:hover{background:var(--bronze);color:#fff;border-color:var(--bronze)}
@media(max-width:820px){
  /* right-edge fade signals the table scrolls horizontally (same mask idiom
     as .marquee / .proj-track); -webkit-overflow-scrolling for momentum on iOS */
  .cmp{overflow-x:auto;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
    mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .cmp__row{grid-template-columns:1.4fr .7fr .8fr .7fr .6fr .7fr .6fr;min-width:780px}}

/* ================= FAQ accordion ================= */
.faq{margin-top:clamp(28px,4vh,44px);border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{list-style:none;cursor:pointer;padding:22px 42px 22px 0;position:relative;
  font-family:var(--cond);font-weight:500;font-size:clamp(1.05rem,1.7vw,1.4rem);color:var(--ink)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--bronze);border-bottom:2px solid var(--bronze);transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)}
.faq__item[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq__a{padding:0 42px 24px 0}
.faq__a p{color:var(--soft);font-size:15px;line-height:1.6;max-width:78ch}

/* ================= applications gallery (louvres page) ================= */
.agal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,16px);margin-top:clamp(30px,5vh,52px)}
.agal__item{position:relative;margin:0;overflow:hidden;border-radius:2px;aspect-ratio:4/3;isolation:isolate}
.agal__item--lg{grid-column:1/-1;aspect-ratio:21/9}
.agal__item img{width:100%;height:100%;object-fit:cover;filter:grayscale(.18) contrast(1.05) brightness(.8);transition:transform .7s var(--ease),filter .7s var(--ease)}
.agal__item:hover img{transform:scale(1.04);filter:grayscale(0) contrast(1.05) brightness(.95)}
.agal__item figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;font-size:10.5px;color:var(--silver);
  background:linear-gradient(0deg,rgba(11,14,17,.85),rgba(11,14,17,0))}
/* on-site galleries: single column on phones — 2-up shrank the photos too far to read */
@media(max-width:640px){.agal{grid-template-columns:1fr}.agal__item{aspect-ratio:16/10}.agal__item--lg{aspect-ratio:16/9}}

/* ================= screens page ================= */
.lsys--2{grid-template-columns:repeat(2,1fr)}
.lsys__viz--screen{background-image:url(/assets/images/thor-stone.jpg)}
.lsys__viz--gate{background-image:url(/assets/images/magni-stone.jpg)}
.lsys__viz--angled{background-image:url(/assets/images/zeus-hydra-stone.jpg)}
.gal-more{margin-top:clamp(28px,4vh,44px)}

/* ---- Architects hub ---- */
.qlinks{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.qlink{display:inline-block;padding:9px 15px;border:1px solid var(--line2);border-radius:2px;font-family:var(--sans);font-size:14px;color:var(--soft);transition:color .2s,border-color .2s}
.qlink:hover{color:var(--ink);border-color:var(--bronze)}

.specs{margin-top:clamp(30px,5vh,52px);border-top:1px solid var(--line2)}
.spec-item{border-bottom:1px solid var(--line2)}
.spec-item summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;font-family:var(--cond);font-weight:600;font-size:clamp(1.2rem,1.8vw,1.5rem);color:var(--ink)}
.spec-item summary::-webkit-details-marker{display:none}
.spec-item summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:24px;color:var(--bronze)}
.spec-item[open] summary::after{content:"\2212"}
.spec-body{padding:0 0 24px}
.spec-text{margin:0 0 16px;color:#2a2724;font-size:15px;line-height:1.7;background:#f4f2ee;border:1px solid #e2ded6;border-radius:3px;padding:18px 20px}
.spec-copy{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.02em;color:#12100e;background:var(--bronze);border:0;border-radius:2px;padding:10px 18px;cursor:pointer;transition:opacity .2s}
.spec-copy:hover{opacity:.88}
.spec-copy.copied{background:#4a7a54;color:#fff}

.finishes{margin-top:clamp(24px,4vh,40px);border-top:1px solid var(--line2)}
.finish-range{border-bottom:1px solid var(--line2)}
.finish-range>summary{list-style:none;cursor:pointer;position:relative;padding:20px 44px 20px 0;font-family:var(--sans);font-size:14px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--ink)}
.finish-range>summary::-webkit-details-marker{display:none}
.finish-range>summary::after{content:"";position:absolute;right:8px;top:50%;width:9px;height:9px;border-right:2px solid var(--steel);border-bottom:2px solid var(--steel);transform:translateY(-65%) rotate(45deg);transition:transform .2s}
.finish-range[open]>summary::after{transform:translateY(-35%) rotate(-135deg)}
.finish-range-count{margin-left:10px;font-weight:400;letter-spacing:0;text-transform:none;font-size:13px;color:var(--soft)}
.swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:18px;padding:6px 0 28px}
.swatch{margin:0}
.swatch-chip{display:block;width:100%;aspect-ratio:3/2;border-radius:3px;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 2px rgba(255,255,255,.25)}
.swatch-cap{margin-top:8px;display:flex;flex-direction:column;gap:2px}
.swatch-name{font-size:13px;font-weight:500;color:var(--ink);line-height:1.25}
.swatch-hex{font-size:11px;color:var(--soft);letter-spacing:.04em}

.cred__logos{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(22px,3vw,44px);margin-top:clamp(22px,3vh,34px)}
.cred__logos img{height:clamp(84px,10vw,120px);width:auto}
/* architects credentials grid — renamed from .cred to avoid inheriting the
   unrelated .cred tile rule above (background/padding/min-height leaked onto
   this grid, putting a dark box on the light section). .credgrid is taken. */
.acred{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 clamp(24px,3vw,48px);margin-top:clamp(24px,4vh,40px)}
.cred__item{display:flex;flex-direction:column;gap:5px;padding:18px 0;border-top:1px solid var(--line2)}
.cred__k{font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--bronze)}
.cred__v{font-size:17px;color:var(--ink)}
@media(max-width:760px){.lsys--2{grid-template-columns:1fr}}
/* 5-column components table (screens) */
.cmp--5 .cmp__row{grid-template-columns:1.3fr 1fr 1fr .8fr 2.2fr}
@media(max-width:820px){.cmp--5 .cmp__row{grid-template-columns:1.3fr 1fr 1fr .8fr 2.2fr;min-width:680px}}
/* 4-column materials table (metalwork) */
.cmp--4 .cmp__row{grid-template-columns:1.2fr 1.8fr 1.6fr 1.2fr}
@media(max-width:820px){.cmp--4 .cmp__row{grid-template-columns:1.2fr 1.8fr 1.6fr 1.2fr;min-width:660px}}

/* ── comparison tables -> stacked cards on phones (<=600px) ──────────────────
   Below 600px each data row becomes a self-contained card of label:value pairs
   (label pulled from the per-cell data-label). No horizontal scroll. This block
   is later in the cascade AND names the .cmp--5/.cmp--4 variants so it beats the
   <=820px grid+min-width rules above; the 600-820px band keeps the scroll+fade. */
@media(max-width:600px){
  .cmp{overflow:visible;-webkit-mask-image:none;mask-image:none;border-top:0;
    display:flex;flex-direction:column;gap:14px}
  .cmp .cmp__row--head{display:none}  /* .cmp descendant = beats the .cmp__row card rule below */
  .cmp__row:not(.cmp__row--head),.cmp--5 .cmp__row:not(.cmp__row--head),.cmp--4 .cmp__row:not(.cmp__row--head){
    display:block;min-width:0;grid-template-columns:none;gap:0;
    padding:16px 16px 6px;border:1px solid var(--line2);border-radius:3px}
  .cmp__name{display:block;font-size:1.55rem;margin-bottom:8px;padding-bottom:10px;border-bottom:1px solid var(--line)}
  /* value always on its own line UNDER its label (consistent across every table,
     regardless of value length) */
  .cmp__row>span:not(.cmp__name){display:block;padding:10px 0;border-bottom:1px solid var(--line);
    font-size:16px;line-height:1.45}
  .cmp__row>span:not(.cmp__name):last-child{border-bottom:0}
  .cmp__row>span:not(.cmp__name)::before{content:attr(data-label);display:block;margin-bottom:4px;
    font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:var(--steel)}
  .cmp__dl a{font-size:14px}
  /* datasheet/revit rows: keep the label left, push the PDF/RFA button to the far right */
  .cmp__row>span.cmp__dl{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .cmp__row>span.cmp__dl::before{margin-bottom:0}
}

/* ============================================================
   Readability pass (Geordie, 2026-07-16): thicker, higher-contrast
   text site-wide. Hanken is a variable font (400–700), so these lift
   REAL weights — no faux-bold. Layered as overrides so the verbatim
   capability-page port above stays untouched; later same-specificity
   rules win the cascade.
   ============================================================ */
body{font-weight:500}                                   /* global body floor 400 -> 500 (medium) */
.mono{font-weight:600}                                  /* eyebrows / machine labels */
.dl{font-weight:600}                                    /* pill buttons (Enquire, Start a project) */
.nav__links a,.nav__dd-trigger{font-weight:600;color:var(--silver)}  /* nav: thicker + brighter, unified colour */
.lead,.phero__sub,.close__sub{font-weight:500}          /* large intro copy stays medium, explicit */
.faq__a p,.cmp__note{font-weight:500}                   /* small body copy: medium for legibility */

/* ============================================================
   Projects index grid — reuses the .ptile card component in an
   equal responsive grid (neutralises the home 6-col span rules).
   ============================================================ */
.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:clamp(12px,1.4vw,18px);margin-top:clamp(30px,5vh,52px)}
.proj-grid .ptile,.proj-grid .ptile:nth-child(1),.proj-grid .ptile:nth-child(2){grid-column:auto}
.proj-grid .ptile__img,.proj-grid .ptile:nth-child(1) .ptile__img,.proj-grid .ptile:nth-child(2) .ptile__img{aspect-ratio:4/3}

/* ============================================================
   Gallery page — one mixed collage (photos + films woven together),
   every tile project-labelled. Lightbox driven by /js/v2/gallery.js
   (self-hosted; CSP allows frame-src youtube-nocookie).
   ============================================================ */
.gcollage{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(130px,14vw,194px);grid-auto-flow:dense;gap:clamp(8px,1vw,14px);margin-top:clamp(30px,5vh,52px)}
.gt{position:relative;display:block;overflow:hidden;border-radius:2px;background:#0c1418;border:1px solid var(--line2);cursor:pointer;isolation:isolate;margin:0;padding:0;text-align:left;color:#fff}
.gt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.18) contrast(1.04) brightness(.82);transition:transform .6s var(--ease),filter .6s var(--ease)}
.gt:hover img,.gt:focus-visible img{transform:scale(1.05);filter:grayscale(0) contrast(1.04) brightness(.96)}
.gt__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(11,14,17,.82),rgba(11,14,17,.06) 52%,transparent)}
.gt__meta{position:absolute;left:14px;right:14px;bottom:12px;z-index:2}
.gt__label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze-hi);margin-bottom:4px}
.gt__title{display:block;font-family:var(--cond);font-weight:700;font-size:clamp(.95rem,1.2vw,1.16rem);line-height:1.08;color:#eef4f6}
.gt__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.92);color:#111;display:flex;align-items:center;justify-content:center;transition:transform .25s var(--ease),background .25s;z-index:2}
.gt--video:hover .gt__play,.gt--video:focus-visible .gt__play{transform:translate(-50%,-50%) scale(1.09);background:#fff}
.gt--w2{grid-column:span 2}.gt--h2{grid-row:span 2}.gt--2x2{grid-column:span 2;grid-row:span 2}
.gt:focus-visible{outline:2px solid var(--bronze-hi);outline-offset:2px}
@media(max-width:900px){.gcollage{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.gcollage{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(150px,26vw,194px)}.gt--2x2{grid-column:span 2}}

.glb{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:clamp(16px,3vw,40px)}
.glb.is-open{display:flex}
.glb__bg{position:absolute;inset:0;background:rgba(6,10,12,.93);backdrop-filter:blur(5px)}
.glb__body{position:relative;z-index:1;display:flex;align-items:center;justify-content:center}
.glb__frame{position:relative;background:#000;border-radius:3px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.glb__frame--169{width:min(94vw,980px);aspect-ratio:16/9}
.glb__frame--916{height:min(84vh,840px);aspect-ratio:9/16;max-width:94vw}
.glb__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.glb__img{display:block;max-width:94vw;max-height:86vh;width:auto;height:auto;border-radius:3px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.glb__close{position:absolute;top:clamp(12px,2vw,22px);right:clamp(12px,2vw,22px);z-index:3;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;font-size:23px;line-height:1;cursor:pointer;transition:background .2s}
.glb__close:hover{background:rgba(255,255,255,.32)}
body.glb-open{overflow:hidden}

/* ============================================================
   About (team grid) + Contact (form) pages
   ============================================================ */
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:clamp(16px,2vw,26px);margin-top:clamp(30px,5vh,52px)}
/* On a phone the 210px minimum resolves to a single column, so six people
   became six full-width cards and you scrolled past most of the team to see it.
   Two up halves the height and still reads at this size. */
@media(max-width:640px){.team{grid-template-columns:repeat(2,1fr);gap:14px}
  .team__nm{font-size:1rem;margin-top:11px}
  .team__ro{font-size:10px;letter-spacing:.1em;margin-top:4px}}
.team__card{margin:0}
.team__ph{aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:#0c1418;border:1px solid var(--line2)}
.team__ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.team__card:hover .team__ph img{transform:scale(1.04)}
.team__nm{font-family:var(--cond);font-weight:700;font-size:clamp(1.05rem,1.4vw,1.28rem);line-height:1.1;margin-top:15px;color:var(--ink)}
.team__ro{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--bronze-hi);margin-top:6px}
.team__note{margin-top:clamp(22px,3vh,34px);color:var(--soft);font-weight:500;font-size:19px;line-height:1.6;max-width:60ch}

/* two-column prose (About story) */
.prose2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);margin-top:clamp(26px,4vh,42px)}
.prose2 p{color:var(--soft);font-weight:500;font-size:19px;line-height:1.65;margin-bottom:16px}
@media(max-width:760px){.prose2{grid-template-columns:1fr;gap:0}}

/* contact */
.contact-cols{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,5vw,64px);align-items:start;margin-top:clamp(30px,5vh,52px)}
@media(max-width:820px){.contact-cols{grid-template-columns:1fr;gap:clamp(28px,5vh,44px)}}
.vform{display:grid;gap:16px}
.vform__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.vform__row{grid-template-columns:1fr}}
.vform label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);margin-bottom:7px}
.vform input,.vform textarea{width:100%;background:var(--panel);border:1px solid var(--line2);border-radius:2px;color:var(--ink);font:inherit;font-weight:500;padding:12px 14px;transition:border-color .2s,background .2s}
.vform input:focus,.vform textarea:focus{outline:none;border-color:var(--bronze);background:var(--panel2)}
.vform textarea{min-height:130px;resize:vertical}
.vform__hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.vform__submit{justify-self:start;margin-top:4px}
.contact-info{border-top:2px solid var(--bronze);padding-top:22px}
.contact-info__row{margin-bottom:22px}
.contact-info__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);margin-bottom:7px}
.contact-info__v{color:var(--ink);font-weight:500;font-size:16px;line-height:1.5}
.contact-info__v a{color:var(--ink);border-bottom:1px solid var(--line2);transition:border-color .2s}
.contact-info__v a:hover{border-color:var(--bronze)}

/* ============================================================
   SIZE LIFT (Geordie, 2026-07-20): undo the "everything tiny"
   AI pattern. Bumps nav, table, body copy and the whole
   meta/label/chip family up to normal, readable sizes. One
   block, exact-matching selectors so cascade order wins.
   ============================================================ */
/* body + reading copy */
body{font-size:19px}
.hero__sub{font-size:clamp(19px,1.5vw,23px);line-height:1.55}
.lead{font-size:clamp(19px,1.5vw,23px)}
.who__body p{font-size:clamp(19px,1.5vw,23px)}
.panel .scope{font-size:19px}
.introc p{font-size:19px}
.step p{font-size:19px}
.cred .s{font-size:18px}
.tool--config__body p{font-size:19px}
.calc2__cap{font-size:16px}
.close__sub{font-size:clamp(19px,1.5vw,23px)}
.ptile__panel p{font-size:19px}

/* nav — keep caps but readable, less spread */
.nav__links a,.nav__dd-trigger{font-size:15px;letter-spacing:.06em}
.nav__word{font-size:13px}

/* the Pantheon spec table (flagged too tiny) */
.row.head span{font-size:14px;letter-spacing:.05em}
.row .v{font-size:16px}

/* meta / label / chip family — the AI-shrink offenders */
.mono{font-size:clamp(13px,1vw,15px);letter-spacing:.12em}
.who__fig .cap{font-size:13px}
.stat .k{font-size:15px;line-height:1.4}
.panel__yr{font-size:14px}
.panel .meta{font-size:14px}
.panel .val .lab{font-size:13px}
.tquote__by{font-size:14px}
.step .no{font-size:14px}
.chip{font-size:14.5px}
.ptile__k{font-size:14px}
.ptile__view{font-size:14px}
.tool__k{font-size:14px}
.tool__std{font-size:13.5px}
.calc2__lab,.calc2__prof,.calc2__unit,.calc2__profline{font-size:13px}
.sechead .idx{font-size:14px}
.credfoot{font-size:14.5px}
.foot .fm{font-size:13.5px}
.foot__legal{font-size:14px}
.vform label,.contact-info__k{font-size:13px}

/* ============================================================
   HOW WE WORK — centre-line timeline over a raking-light photo.
   Ported from the V1 about page (design Geordie approved),
   restyled for V2 (ArchExp headings, bronze nodes, size-lift copy).
   ============================================================ */
.hww{position:relative;overflow:hidden}
/* Only the timeline half sits on the workshop photo. The video and the two
   paragraphs above it are a reading block, and running them over a photo made
   them fight it for attention — they get flat dark instead. */
.hww--photo::before{content:"";position:absolute;inset:0;background:url(/assets/images/louvre-site-1.jpg) center/cover no-repeat;filter:grayscale(1) contrast(1.04);z-index:0}
.hww--photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,14,17,.86),rgba(11,14,17,.78));z-index:1}
/* The pair now reads as one idea split across two bands, so close the seam:
   no bottom padding on the intro, no top padding on the timeline. */
.hww:not(.hww--photo){background:var(--bg);padding-bottom:0}
.hww--photo{padding-top:clamp(28px,4vh,52px)}
.hww>.wrap{position:relative;z-index:2}
.hww__top{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,64px);align-items:center;max-width:1140px;margin:0 auto}
.hww__title{font-family:var(--cond);font-weight:600;font-size:clamp(2.2rem,5.4vw,4.1rem);letter-spacing:-.02em;line-height:1;color:var(--ink);max-width:1140px;margin:0 auto clamp(24px,3vh,36px);text-align:center}
.hww__intro{color:var(--soft);font-size:19px;line-height:1.65}
.hww__intro+.hww__intro{margin-top:16px}
.hww__media{display:flex;justify-content:center}
.hww__video{position:relative;width:100%;max-width:330px;aspect-ratio:9/16;border-radius:8px;overflow:hidden;box-shadow:0 26px 64px -22px rgba(0,0,0,.65);border:1px solid var(--line2)}
.hww__video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:820px){
  .hww__top{grid-template-columns:1fr;gap:30px}
  .hww__title{font-size:clamp(2.4rem,10vw,3.2rem)}
  .hww__media{order:1}
}
.hwtl{position:relative;max-width:1000px;margin:clamp(30px,5vh,56px) auto 0}
.hwtl::before{content:"";position:absolute;left:50%;transform:translateX(-50%);top:0;bottom:0;width:1px;background:rgba(203,217,223,.22)}
.hwtl__item{display:grid;grid-template-columns:1fr 48px 1fr;align-items:center;padding:clamp(30px,5vh,58px) 0}
.hwtl__node{display:flex;justify-content:center;align-items:center;position:relative;z-index:1}
.hwtl__dot{width:13px;height:13px;border-radius:50%;background:var(--bronze);box-shadow:0 0 0 6px rgba(201,144,47,.14)}
.hwtl__c{display:grid;gap:10px}
.hwtl__c--left{padding-right:clamp(20px,4vw,64px);text-align:right}
.hwtl__c--right{padding-left:clamp(20px,4vw,64px)}
.hwtl__num{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze)}
.hwtl__c h3{font-family:var(--cond);font-weight:600;font-size:clamp(1.5rem,2.4vw,2.1rem);color:var(--ink);letter-spacing:-.02em;line-height:1.06;margin:0}
.hwtl__c p{color:var(--soft);font-size:19px;line-height:1.6;margin:0}
@media(max-width:760px){
  .hwtl{margin-top:16px}
  .hwtl::before{left:6px;transform:none;top:0}
  .hwtl__item{display:flex;align-items:flex-start;gap:16px;padding:22px 0}
  .hwtl__node{order:-1;flex:0 0 13px;margin-top:7px}
  .hwtl__c--left,.hwtl__c--right{text-align:left;padding:0}
  .hwtl__c:empty{display:none}
}