/* ==========================================================================
   STEELwud — Homepage template
   Structure & type scale mirror the approved reference; palette is Steelwud's.
   Measured from reference @1440: container 1216 / gutter 105 / header 80
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  --font:"Figtree","Figtree Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  /* Theme A — Steelwud blue (default). Set by the client 2026-09-10;
     --brand-deep is the darker tone used for link text that needs contrast. */
  --brand:#1283F0;
  --brand-deep:#0B63C4;
  --brand-ink:#FFFFFF;
  --ink:#2F373E;
  --ink-2:#5A646E;
  --ink-3:#8B949D;
  --bg:#FFFFFF;
  --surface:#F1F3F7;
  --surface-2:#F6F6F6;
  --line:#E4E8EE;
  --line-2:#D5DCE5;  /* a shade stronger — reads as a border against white */

  /* Baked into the product images — keep in step with CARD_BG in extract.py */
  --card-well:#F1F3F7;

  --radius:6px;
  --radius-lg:10px;
  --container:1440px;
  --gutter:clamp(20px,5.4vw,96px);
  --header-h:100px;

  --shadow-sm:0 1px 2px rgba(24,32,40,.06);
  --shadow-md:0 6px 24px rgba(24,32,40,.10);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* Theme B — Steelwud red (the previous default) */
[data-theme="red"]{
  --brand:#D32227; --brand-deep:#A61B1F; --brand-ink:#FFFFFF;
  --ink:#2F373E; --ink-2:#5A646E; --ink-3:#8B949D;
  --bg:#FFFFFF; --surface:#F1F3F7; --surface-2:#F6F6F6; --line:#E4E8EE;
}
/* Theme C — Preface (cream / gold) */
[data-theme="preface"]{
  --brand:#C59245; --brand-deep:#9A6F2E; --brand-ink:#FFFFFF;
  --ink:#3B3B3B; --ink-2:#5E5E5E; --ink-3:#8E8A85;
  --bg:#FAF6F3; --surface:#F2ECE5; --surface-2:#F6F1EB; --line:#E7DED3;
}

/* ---------- 2. Reset ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);font-size:16px;line-height:1.55;
  color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,ul{margin:0}
ul{list-style:none;padding:0}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:3px}

/* ---------- 3. Layout ---------------------------------------------------- */
.container{width:100%;max-width:calc(var(--container) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(48px,7vw,88px)}
.section--tight{padding-block:clamp(32px,4.5vw,56px)}
.section--surface{background:var(--surface-2)}
/* Brand-tinted band. Derived from --brand, so it follows a palette change. */
.section--tint{background:color-mix(in srgb,var(--brand) 7%,#fff)}

/* ---------- 4. Type ------------------------------------------------------ */
.eyebrow{font-size:14px;font-weight:500;letter-spacing:.02em;color:var(--ink)}
.h-hero{font-size:clamp(34px,5.6vw,60px);line-height:1.2;font-weight:600;letter-spacing:-.02em}
.h-section{font-size:clamp(24px,2.6vw,30px);line-height:1.27;font-weight:600;letter-spacing:-.005em}
.h-card{font-size:clamp(17px,1.5vw,20px);line-height:1.3;font-weight:600}
/* Inner pages take the reference's larger section heading (36/44); the homepage
   keeps the 30/38 it was signed off at. */
.h-section--page{font-size:clamp(26px,3vw,36px);line-height:1.22}
.lede{font-size:clamp(20px,2.6vw,30px);line-height:1.4;font-weight:400;color:var(--ink)}
.sub{font-size:16px;line-height:1.5;color:var(--ink);max-width:56ch}
.measure{max-width:1010px}

/* ---------- 5. Buttons --------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 16px;border-radius:var(--radius);
  font-size:16px;font-weight:600;line-height:1.25;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
  white-space:nowrap;
}
.btn--primary{background:var(--brand);color:var(--brand-ink)}
.btn--primary:hover{background:var(--brand-deep)}
.btn--outline{border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.btn--outline:hover{border-color:var(--ink-3)}
.link-arrow{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:600;color:var(--ink)}
.link-arrow svg{transition:transform .2s var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}
.link-arrow--brand{color:var(--brand)}

/* ---------- 6. Header ---------------------------------------------------- */
.header{
  position:sticky;top:0;z-index:60;height:var(--header-h);
  background:var(--bg);border-bottom:1px solid var(--line);
}
.header__inner{height:100%;display:flex;align-items:center;gap:28px}
.logo{display:flex;align-items:center;flex:0 0 auto}
/* 2026-09-12 logo is a 3:1 lockup where the old mark was 5.27:1, so the same height read
   much smaller in the bar. 52px restores comparable width inside the 80px header. */
/* 2026-09-14 mark stacks the figures above the wordmark at 2.34:1, so it needs real
   height to stay legible — hence the taller header bar it sits in. */
.logo img{height:76px;width:auto}
/* Any img given an explicit height must set width:auto, or the HTML width
   attribute supplies the width and the logo stretches. */
.nav{display:flex;align-items:center;justify-content:center;gap:4px;flex:1 1 auto}
.nav__item{position:relative}
/* Uppercase is set smaller than the sentence-case original: at 16px the seven items
   needed a 1391px viewport and collided with the logo on a 1280 laptop. */
.nav__link{display:inline-flex;align-items:center;gap:5px;padding:9px 8px;border-radius:var(--radius);font-size:14px;font-weight:600;color:var(--ink);text-transform:uppercase;letter-spacing:.03em}
.nav__link:hover,.nav__link[aria-current="page"]{background:var(--surface);color:var(--brand)}
.nav__link svg{opacity:.6}
.header__tools{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--radius);color:var(--ink)}
.icon-btn:hover{background:var(--surface);color:var(--ink)}
.header__cta{margin-left:6px}
.burger{display:none}

/* Mega menu */
.mega{
  position:absolute;top:calc(100% + 10px);left:0;min-width:250px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s var(--ease),transform .16s var(--ease),visibility .16s;
}
.nav__item:hover .mega,.nav__item:focus-within .mega{opacity:1;visibility:visible;transform:none}
.mega a{display:block;padding:9px 12px;border-radius:var(--radius);font-size:15px;font-weight:600;color:var(--ink)}
.mega a:hover,.mega a[aria-current="page"]{background:color-mix(in srgb,var(--brand) 10%,#fff);color:var(--brand)}


/* ---------- Blog ---------------------------------------------------------- */
/* Posts get their own card: the project card is an image with a name under it,
   which leaves an excerpt looking like loose text on the page. */
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,30px)}
.bcard{
  display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;
  transition:border-color .2s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease);
}
.bcard:hover{border-color:transparent;box-shadow:var(--shadow-md);transform:translateY(-3px)}
.bcard__media{aspect-ratio:16/10;overflow:hidden;background:var(--surface)}
.bcard__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s var(--ease)}
.bcard:hover .bcard__media img{transform:scale(1.05)}
.bcard__body{display:flex;flex-direction:column;flex:1;padding:clamp(18px,1.7vw,24px)}
.bcard__meta{
  display:flex;align-items:center;gap:8px;margin:0 0 10px;
  font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--brand);
}
.bcard__meta time{color:var(--ink-3);font-weight:500;letter-spacing:.02em}
.bcard__meta span{color:var(--line)}
.bcard__name{
  margin:0;font-size:clamp(18px,1.5vw,21px);line-height:1.3;font-weight:600;color:var(--ink);
  transition:color .18s var(--ease);
}
.bcard:hover .bcard__name{color:var(--brand)}
/* Three lines keeps every card the same height whatever the excerpt length. */
.bcard__excerpt{
  margin:10px 0 0;font-size:15.5px;line-height:1.6;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.bcard__foot{margin-top:auto;padding-top:16px}
.bcard .link-arrow{font-size:14.5px;color:var(--brand)}

/* Blog article: a touch wider than .measure, at the client's request. */
/* Centred, unlike .measure, which is deliberately left-aligned on the marketing pages. */
.measure--blog{max-width:1100px;margin-inline:auto}


/* ---------- Quote modal ---------------------------------------------------- */
/* Same mechanics as the drawer: aria-hidden drives it, the scrim closes it. */
.qmodal{position:fixed;inset:0;z-index:80;visibility:hidden}
.qmodal[aria-hidden="false"]{visibility:visible}
.qmodal__scrim{position:absolute;inset:0;background:rgba(16,21,26,.5);opacity:0;transition:opacity .25s var(--ease)}
.qmodal[aria-hidden="false"] .qmodal__scrim{opacity:1}
.qmodal__panel{
  position:relative;margin:min(6vh,56px) auto;max-width:760px;width:calc(100% - 32px);
  max-height:88vh;overflow-y:auto;background:var(--bg);border-radius:var(--radius-lg);
  box-shadow:0 24px 60px rgba(16,21,26,.28);
  opacity:0;transform:translateY(12px) scale(.99);
  transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.qmodal[aria-hidden="false"] .qmodal__panel{opacity:1;transform:none}
.qmodal__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:clamp(20px,2.4vw,28px) clamp(20px,2.4vw,32px) 0;
}
.qmodal__title{margin:0;font-size:clamp(19px,1.8vw,23px);line-height:1.25;font-weight:600}
.qmodal__sub{margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--ink-2)}
.qmodal__close{flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center;border-radius:var(--radius);color:var(--ink-2)}
.qmodal__close:hover{background:var(--surface);color:var(--ink)}
.qmodal__body{padding:clamp(16px,2vw,22px) clamp(20px,2.4vw,32px) clamp(22px,2.6vw,32px)}
/* The form sits on the panel itself, so it drops the card treatment it has on a page. */
.qmodal .form-card{background:transparent;padding:0;border-radius:0}
.qmodal .form-grid{gap:16px 20px}

/* What is being quoted, shown so nobody has to describe the product in the message. */
.qprod{
  display:flex;align-items:center;gap:14px;margin-bottom:18px;padding:12px 14px;
  background:var(--surface);border-radius:var(--radius);
}
.qprod img{width:56px;height:56px;object-fit:cover;border-radius:var(--radius);background:var(--card-well);flex:0 0 auto}
.qprod__code{margin:0;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--brand)}
.qprod__name{margin:2px 0 0;font-size:16px;font-weight:600;line-height:1.3;color:var(--ink)}
@media (max-width:560px){
  .qmodal__panel{margin:0;width:100%;max-width:none;min-height:100%;border-radius:0}
}


/* ---------- Category landing page ------------------------------------------ */
/* The redesigned product flow: a category is a landing page of photographs rather than a
   filterable grid of cards linking to individual product pages. The old flow is kept in
   the theme's _backup-product-flow/ directory. */
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,32px)}
.pshot{display:flex;flex-direction:column}
/* Nothing here is cropped. The client does not want any part of a piece of furniture cut
   off, and the supplied photography ranges from 0.80 to 1.64 in aspect ratio, so every
   image is CONTAINED inside its box rather than covering it. That means letterboxing on the
   outliers, which is the deliberate trade. No hover scale either — it would clip. */
.pshot__open{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;text-align:left}
.pshot__media{
  aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;background:#fff;
  border:1px solid var(--line-2);display:grid;place-items:center;padding:clamp(10px,1.2vw,18px);
  min-height:0;
}
/* max-*, not width/height:100%. With height:100% the image falls back to its intrinsic
   height, and a grid item's min-height:auto then lets that content override aspect-ratio —
   so one portrait photograph made its tile half again as tall as its neighbours. Bounding
   the image instead keeps every tile 4:3 and still shows the whole object, uncropped. */
.pshot__media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;min-width:0;min-height:0}
.pshot__name{margin:14px 0 0;font-size:clamp(16px,1.35vw,18px);line-height:1.35;font-weight:600;color:var(--ink)}
.pshot__note{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--ink-3)}
@media (max-width:900px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pgrid{grid-template-columns:1fr}}

/* ---------- 7. Hero ------------------------------------------------------ */
.hero{position:relative;min-height:calc(100vh - var(--header-h));display:flex;align-items:flex-end;overflow:hidden;background:#11161B}
/* svh keeps the hero from being cut off by mobile browser chrome. */
@supports (height:100svh){.hero{min-height:calc(100svh - var(--header-h))}}
.hero__media{position:absolute;inset:0;overflow:hidden}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.5s var(--ease)}
.hero__slide.is-active{opacity:1}
.hero__slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
/* Ken Burns runs only on the visible slide, and alternates direction so
   consecutive slides don't drift the same way. */
.hero__slide.is-active img{animation:kbA 11s ease-out forwards}
.hero__slide:nth-child(even).is-active img{animation-name:kbB}
@keyframes kbA{from{transform:scale(1.04) translate3d(0,0,0)}
                 to{transform:scale(1.16) translate3d(-1.6%,-1.2%,0)}}
@keyframes kbB{from{transform:scale(1.16) translate3d(1.6%,1.2%,0)}
                 to{transform:scale(1.04) translate3d(0,0,0)}}
@media (prefers-reduced-motion:reduce){
  .hero__slide{transition:none}
  .hero__slide.is-active img,.hero__slide:nth-child(even).is-active img{animation:none;transform:scale(1.02)}
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,17,22,.55) 0%,rgba(12,17,22,.28) 22%,rgba(12,17,22,.62) 44%,rgba(12,17,22,.84) 72%,rgba(12,17,22,.92) 100%);
}
.hero__inner{position:relative;z-index:2;width:100%;padding-block:clamp(40px,7vw,84px);color:#fff}
.hero .eyebrow{color:rgba(255,255,255,.82)}
.hero__title{margin-block:14px 22px;max-width:16ch;color:#fff}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- 8. Statement ------------------------------------------------- */
.statement{text-align:center;max-width:960px;margin-inline:auto}
.statement .lede + .lede{margin-top:16px}

/* ---------- 9. Section head ---------------------------------------------- */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}
.sec-head__text{max-width:1010px}
/* Centred section heading, with more air before what follows. Used by the category
   landing pages, where the copy introduces the photographs below it. */
.sec-head--center{flex-direction:column;align-items:center;text-align:center;margin-bottom:clamp(34px,4.2vw,60px)}
.sec-head--center .sec-head__text{max-width:900px}
.sec-head--center .sub{margin-inline:auto;max-width:78ch}
.sec-head .sub{margin-top:10px;max-width:96ch}

/* ---------- 10. Carousel ------------------------------------------------- */
.rail{
  --gap:16px;
  display:grid;grid-auto-flow:column;gap:var(--gap);
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:4px;
  /* bleed past the container's right gutter, like the reference */
  margin-right:calc(var(--gutter)*-1);padding-right:var(--gutter);
  /* --per cards fill the container exactly; the next one peeks into the bleed.
     The percentage resolves against the rail's content box = container inner width. */
  grid-auto-columns:calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
}
.rail::-webkit-scrollbar{display:none}
.rail > *{scroll-snap-align:start}
.rail--products{--per:5}
.rail--categories{--per:5}
/* The homepage rail shows wide room scenes, so the 4:5 tile the tighter grid uses leaves a
   deep band of white above and below each one. 4:3 sits closer to the images themselves. */
.rail--categories .ccard__media{aspect-ratio:4/3}
.rail--sectors{--per:7}

.rail-foot{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.rail-count{font-size:15px;color:var(--ink)}
.rail-nav{display:flex;gap:8px}
.rail-btn{
  width:40px;height:40px;border-radius:999px;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink);background:var(--bg);
  transition:border-color .16s var(--ease),opacity .16s var(--ease);
}
.rail-btn:hover:not(:disabled){border-color:var(--ink-3)}
.rail-btn:disabled{opacity:.35;cursor:default}

/* ---------- 11. Product card --------------------------------------------- */
/* One grey card: image and text share a single rounded surface, as the reference does. */
.pcard{
  position:relative;display:flex;flex-direction:column;
  background:var(--card-well);border-radius:8px;overflow:hidden;
  padding:14px 14px 16px;
}
.pcard__media{position:relative;aspect-ratio:1;overflow:hidden}
.pcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.pcard:hover .pcard__media img{transform:scale(1.045)}
.pcard__quote{
  position:absolute;top:0;right:0;z-index:2;width:34px;height:34px;border-radius:var(--radius);
  background:#fff;border:1px solid rgba(24,32,40,.10);display:grid;place-items:center;color:var(--ink);
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.pcard__quote:hover{color:var(--brand);border-color:var(--brand)}
.pcard__body{padding:14px 2px 0}
.pcard__code{font-size:13px;letter-spacing:.02em;color:var(--ink-3)}
.pcard__name{font-size:16px;font-weight:600;line-height:1.3;margin-top:5px}
.swatches{display:flex;gap:5px;margin-top:9px}
.swatch{width:12px;height:12px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.10)}
.pcard__specs{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:12px;font-size:13px;color:var(--ink)}
.pcard__specs span{display:inline-flex;align-items:center;gap:4px}
.pcard__specs svg{flex:0 0 auto;opacity:.65}

/* ---------- 12. Category card -------------------------------------------- */
.ccard__media{
  aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;background:#fff;
  border:1px solid var(--line-2);display:grid;place-items:center;padding:clamp(10px,1.2vw,16px);
  min-height:0;transition:border-color .25s var(--ease)
}
/* Bounded, not stretched — see .pshot__media. A hover scale() is gone with it: zooming a
   contained image pushes it past the tile and clips exactly what we are trying to show. */
.ccard__media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;min-width:0;min-height:0}
.ccard:hover .ccard__media{border-color:var(--brand)}
/* Opt-in per category: a wide room scene fills the tile instead of letterboxing inside it.
   Off everywhere by default — furniture must not lose its edges. */
.ccard__media--fill{padding:0}
.ccard__media--fill img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
.ccard__name{margin-top:15px;font-size:clamp(18px,1.45vw,22px);font-weight:600;line-height:1.24}
.ccard .link-arrow{margin-top:9px;font-size:15px;color:var(--ink)}
.ccard:hover .link-arrow{color:var(--brand)}

/* ---------- 13. Promo banner --------------------------------------------- */
.promo{position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:clamp(260px,30vw,306px);display:flex;align-items:center}
.promo__media{position:absolute;inset:0}
.promo__media img{width:100%;height:100%;object-fit:cover}
.promo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,19,24,.80) 0%,rgba(14,19,24,.45) 55%,rgba(14,19,24,.20) 100%)}
.promo__inner{position:relative;z-index:2;padding:clamp(26px,4vw,44px);color:#fff;max-width:660px}
.promo .eyebrow{color:rgba(255,255,255,.82)}
.promo__title{font-size:clamp(26px,3.6vw,40px);line-height:1.18;font-weight:600;letter-spacing:-.015em;margin-block:8px 20px}

/* ---------- 14. Sector rail ---------------------------------------------- */
.sectors{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:40px;align-items:center;
  border-block:1px solid var(--line);padding-block:36px}
.sector{text-align:center}
.sector__media{aspect-ratio:1;border-radius:var(--radius);overflow:hidden;background:var(--card-well)}
.sector__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.sector:hover .sector__media img{transform:scale(1.06)}
.sector__name{margin-top:9px;font-size:15px;color:var(--ink)}
.sector:hover .sector__name{color:var(--ink)}

/* ---------- 15. Project cards -------------------------------------------- */
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.proj__media{aspect-ratio:16/11;border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.proj__media img{width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease)}
.proj:hover .proj__media img{transform:scale(1.05)}
.proj__name{margin-top:16px;font-size:clamp(20px,1.75vw,26px);font-weight:600;line-height:1.22}
.proj .link-arrow{margin-top:9px;font-size:15px;color:var(--ink)}
.proj:hover .link-arrow{color:var(--brand)}

/* ---------- 15b. Reviews (Google) ---------------------------------------- */
.rail--reviews{--per:3}
.grev{
  display:flex;align-items:center;gap:18px;
  margin-bottom:24px;padding:16px 20px;
  background:var(--bg);border:1px solid var(--line);border-radius:10px;
  width:fit-content;
}
.grev__score{margin:0;font-size:38px;line-height:1;font-weight:700;letter-spacing:-.02em}
.grev__meta p{margin:2px 0 0;font-size:15px;color:var(--ink)}
.grev__stars,.rcard__stars{color:#F2A100;letter-spacing:.08em}
.grev__stars{font-size:17px}

.rcard{
  display:flex;flex-direction:column;gap:12px;height:100%;
  padding:22px;background:var(--bg);
  border:1px solid var(--line);border-radius:10px;
}
.rcard__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rcard__stars{font-size:15px}
.rcard__src{font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--ink-3);text-transform:uppercase}
.rcard__text{margin:0;flex:1;font-size:16px;line-height:1.6;color:var(--ink)}
.rcard__by{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding-top:14px;border-top:1px solid var(--line)}
.rcard__avatar{
  display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand-deep);
  font-weight:700;font-size:15px;
}
.rcard__who{display:flex;flex-direction:column;min-width:0}
.rcard__who strong{font-size:15px;font-weight:600}
.rcard__who span{font-size:13.5px;color:var(--ink)}
.rcard__when{font-size:12px;color:var(--ink-3);white-space:nowrap;align-self:start}

/* Remove with the sample reviews. */
.sample-flag{
  display:inline-block;vertical-align:middle;margin-left:10px;
  padding:4px 9px;border-radius:999px;background:rgba(47,55,62,.88);color:#fff;
  font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
}

/* ---------- 15c. Video carousel ------------------------------------------ */
/* Flex rather than the grid track the other rails use: with only three videos the
   row should centre, and `safe center` falls back to start once it overflows so the
   first card can never be scrolled off the left edge. */
.rail--videos{
  --per:4;
  display:flex;justify-content:safe center;
  margin-right:0;padding-right:0;
}
.rail--videos > *{flex:0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per))}

.vcard{position:relative;aspect-ratio:9/16;border-radius:10px;overflow:hidden;background:#11161B}
.vcard__media{display:block;width:100%;height:100%;object-fit:cover}
.vcard__play{
  position:absolute;inset:auto 0 0 0;margin:0 auto 16px;
  display:grid;place-items:center;width:52px;height:52px;padding:0;
  border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.92);color:var(--brand-deep);
  box-shadow:var(--shadow-md);transition:transform .18s var(--ease),background .18s var(--ease);
}
.vcard__play svg{margin-left:2px}          /* optical centring of the triangle */
.vcard__play:hover{transform:scale(1.06);background:#fff}
.vcard.is-playing .vcard__play{display:none}

/* ---------- 15d. Inner page head + team ---------------------------------- */
.page-head{padding-bottom:0}
.page-hero{position:relative;min-height:clamp(320px,42vh,480px);display:flex;align-items:flex-end;overflow:hidden;background:#11161B}
.page-hero__media{position:absolute;inset:0}
.page-hero__media img{width:100%;height:100%;object-fit:cover;display:block}
.page-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,17,22,.45) 0%,rgba(12,17,22,.30) 40%,rgba(12,17,22,.78) 100%);
}
.page-hero__inner{position:relative;z-index:2;width:100%;padding-block:clamp(30px,4.6vw,60px);color:#fff}
.page-hero .eyebrow{color:rgba(255,255,255,.82)}
.page-hero .h-page{color:#fff;margin-top:10px;max-width:18ch}
.crumbs--under{padding-block:18px 0;margin-bottom:0}

.crumbs{display:flex;gap:8px;font-size:14px;color:var(--ink-3);margin-bottom:18px}
.crumbs a{color:var(--ink)}
.crumbs a:hover{color:var(--brand)}
.h-page{font-size:clamp(34px,5.6vw,60px);line-height:1.2;font-weight:600;letter-spacing:-.02em;margin:10px 0 0;max-width:20ch}
.page-head__lede{margin:22px auto 0;max-width:70ch;text-align:center}
.page-head__lede p{margin-bottom:14px}
/* The opening line carries the weight; the paragraphs under it step down. */
.lede--bold{font-weight:600;letter-spacing:-.01em}
.lede--sm{font-size:clamp(17px,1.7vw,20px);line-height:1.55}
.page-head__lede p{color:var(--ink);margin-bottom:12px}

.stats.stats--3{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:34px}

.ticks{margin:12px 0 0;padding:0;list-style:none}
.ticks li{position:relative;padding-left:24px;margin-bottom:10px;font-size:16px;line-height:1.6;color:var(--ink)}
.ticks li::before{
  content:"";position:absolute;left:0;top:.5em;width:12px;height:7px;
  border-left:2px solid var(--brand);border-bottom:2px solid var(--brand);
  transform:rotate(-45deg);
}

.team{display:grid;gap:clamp(20px,2.4vw,28px)}
.team--leaders{grid-template-columns:repeat(3,minmax(0,1fr))}
.team--staff{grid-template-columns:repeat(4,minmax(0,1fr))}

.rail--team{--per:2.2}
.tshot{margin:0;border-radius:var(--radius-lg);overflow:hidden;background:var(--card-well);aspect-ratio:3/2}
.tshot img{width:100%;height:100%;object-fit:cover;display:block}
.person{position:relative}
.person--card{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(24px,2.6vw,34px) clamp(18px,2vw,26px);
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);
  transition:box-shadow .25s var(--ease),transform .25s var(--ease);
}
.person--card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.person--card .person__media{
  width:132px;height:132px;border-radius:50%;margin-bottom:18px;flex:0 0 auto;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--brand) 14%,transparent);
}
/* A tint at the head of each card so the row is not three white boxes. */
.person--card::before{
  content:"";position:absolute;inset:0 0 auto;height:6px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  background:linear-gradient(90deg,var(--brand),var(--brand-deep));
}
.person--card{overflow:hidden}
.person--card .person__bio{margin-top:12px}

/* Sits beside the two leaders so the row reads as a full-width band. */
.lead-note{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(24px,2.6vw,34px);border-radius:var(--radius-lg);
  background:linear-gradient(150deg,var(--brand) 0%,var(--brand-deep) 100%);
  color:#fff;
}
.lead-note h3{margin:0;font-size:22px;font-weight:600;line-height:1.25;color:#fff}
.lead-note p{margin:12px 0 0;font-size:16px;line-height:1.6;color:rgba(255,255,255,.92)}
.lead-note .btn{align-self:flex-start;margin-top:20px}
.person__media{
  position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:10px;
  background:var(--card-well);margin-bottom:14px;
}
.person__media img{width:100%;height:100%;object-fit:cover;display:block}
.person__name{font-size:20px;font-weight:600;margin:0}
.person__role{font-size:15px;font-weight:600;color:var(--brand);margin:2px 0 0}
.person__bio{font-size:16px;line-height:1.6;color:var(--ink);margin:10px 0 0}

.brands{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
/* Brand tiles are markers, not product shots — a short fixed band, not the 4:5 card. */
/* Brand tiles hold a logo, not a photograph: cap the box so a supplied logo sits at a
   sensible size and the placeholder does not pretend to be an image. */
.brands .ccard__media{aspect-ratio:auto;height:100px;display:grid;place-items:center;padding:12px}
.brands .ccard__media img{max-height:100px;width:auto;height:auto;object-fit:contain}
.brands [data-placeholder] .ph-art svg{width:auto;height:46px;max-width:none}

/* ---------- 15e. Contact page -------------------------------------------- */
.chans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.chans--after-lede{margin-top:clamp(28px,3.2vw,44px)}
.chan{
  display:flex;gap:16px;align-items:flex-start;
  padding:clamp(20px,2.2vw,28px);
  border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--bg);
  transition:border-color .2s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease);
}
.chan:hover{border-color:transparent;box-shadow:var(--shadow-md);transform:translateY(-2px)}
.chan__icon{
  display:grid;place-items:center;flex:0 0 auto;width:46px;height:46px;border-radius:12px;
  background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand-deep);
}
.chan__icon svg{width:22px;height:22px}
.chan__body{display:flex;flex-direction:column;min-width:0}
.chan__body strong{font-size:16px;font-weight:600}
.chan__value{margin-top:3px;font-size:17px;font-weight:600;color:var(--brand-deep);word-break:break-word}
.chan__note{margin-top:4px;font-size:14px;color:var(--ink)}

.locs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,32px)}
.loc__map{
  aspect-ratio:16/10;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--card-well);margin-bottom:16px;border:1px solid var(--line);
}
.loc__map{position:relative;display:grid;place-items:center}
.loc__map .ph-art{position:absolute;inset:0}
.loc__map .ph-art svg{width:auto;height:54px;max-width:none}
.loc__open{position:relative;z-index:2;background:var(--bg)}
.loc__map--live{display:block}
.loc__map--live iframe{display:block;width:100%;height:100%;border:0}
.loc__map--live .loc__open{position:absolute;right:12px;bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,.18)}
.loc__name{margin:0;font-size:20px;font-weight:600}
.loc__addr{margin:8px 0 0;font-size:16px;line-height:1.6}
.loc__links{margin:10px 0 0;font-size:16px}
.loc__gst{margin:8px 0 0;font-size:14px;color:var(--ink-3);letter-spacing:.01em}
.loc__gst strong{color:var(--ink);font-weight:600}
.loc__links a{color:var(--brand-deep);font-weight:600}

/* The enquiry-type select matches the text inputs. */
.field select{
  width:100%;padding:12px 14px;font:inherit;font-size:16px;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235A646E' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.field select:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:transparent}

/* ---------- 15f. Projects page ------------------------------------------- */
.pjs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.8vw,34px)}
.pj{position:relative}
.pj__media{
  position:relative;aspect-ratio:16/11;overflow:hidden;border-radius:var(--radius-lg);
  background:var(--card-well);margin-bottom:16px;
}
.pj__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.pj:hover .pj__media img{transform:scale(1.03)}
.pj__meta{margin:0;font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--brand-deep)}
.pj__name{margin:6px 0 0;font-size:clamp(19px,1.6vw,22px);font-weight:600;line-height:1.25}
.pj__desc{margin:9px 0 0;font-size:16px;line-height:1.6}

/* ---------- 15g. Project lightbox ---------------------------------------- */
.pj__open{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left}
.pj__open .pj__media{margin-bottom:0}
.pj__open:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:var(--radius-lg)}
.pj__zoom{
  position:absolute;left:12px;bottom:12px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;
  background:rgba(14,19,24,.72);color:#fff;backdrop-filter:blur(3px);
  opacity:0;transform:translateY(4px);transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.pj__zoom em{font-style:normal;font-size:13px;font-weight:600}
.pj:hover .pj__zoom,.pj__open:focus-visible .pj__zoom{opacity:1;transform:none}

.lbox{
  position:fixed;inset:0;z-index:120;display:grid;
  grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(8px,2vw,24px);
  padding:clamp(16px,4vw,48px);background:rgba(10,14,18,.975);
}
.lbox[hidden]{display:none}
.lbox__figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0}
.lbox__img{
  max-width:100%;max-height:78vh;object-fit:contain;display:block;
  border-radius:var(--radius);background:#0e1318;
}
.lbox__cap{display:flex;align-items:center;flex-wrap:wrap;gap:10px;color:#fff;font-size:15px}
.lbox__title{font-weight:600}
.lbox__count{color:rgba(255,255,255,.7)}
.lbox__cap .sample-flag{margin-left:0;background:rgba(255,255,255,.18)}

.lbox__close,.lbox__nav{
  display:grid;place-items:center;width:46px;height:46px;padding:0;cursor:pointer;
  border:1px solid rgba(255,255,255,.28);border-radius:50%;
  background:rgba(255,255,255,.08);color:#fff;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.lbox__close:hover,.lbox__nav:hover{background:rgba(255,255,255,.2);border-color:transparent}
.lbox__nav:disabled{opacity:.3;cursor:default}
.lbox__close{position:absolute;top:clamp(12px,2.4vw,26px);right:clamp(12px,2.4vw,26px)}

@media (max-width:640px){

  .lbox{grid-template-columns:1fr;grid-template-rows:1fr auto}
  .lbox__nav{position:static}
  .lbox__figure{grid-row:1}
  .lbox__nav--prev{grid-column:1;justify-self:start;margin-top:-8px}
  .lbox__nav--next{grid-column:1;justify-self:end;margin-top:-54px}
}

/* ---------- 15h. Process steps ------------------------------------------- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(18px,2.2vw,26px)}
.step{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.step__n{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--brand);color:#fff;font-weight:700;font-size:15px;flex:0 0 auto;
}
.step__name{margin:6px 0 0;font-size:19px;font-weight:600;line-height:1.25}
.step__text{margin:6px 0 0;font-size:16px;line-height:1.6;max-width:70ch}

/* ---------- 15i. Image-led solutions layout ------------------------------ */
/* Heading left, intro right — the reference's inner-page opening. */
.head-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,6vw,88px);align-items:start}
.head-split h2{margin:0}
.head-split__body p{margin:0 0 14px;font-size:17px;line-height:1.65}
.head-split__body p:last-child{margin-bottom:0}

/* A row of tall portrait cards with the label beneath. */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.tile__media{aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius-lg);background:var(--card-well);margin-bottom:16px}
.tile__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.tile:hover .tile__media img{transform:scale(1.03)}
.tile__name{margin:0;font-size:clamp(18px,1.5vw,21px);font-weight:600;line-height:1.25}
.tile__text{margin:8px 0 0;font-size:16px;line-height:1.6}

/* Alternating text / image blocks. */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:center}
.duo + .duo{margin-top:clamp(40px,6vw,86px)}
.duo__media{border-radius:var(--radius-lg);overflow:hidden;background:var(--card-well)}
.duo__media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.duo__body h2{margin:0 0 14px}
.duo__body p{margin:0 0 14px;font-size:17px;line-height:1.65}
.duo__body p:last-of-type{margin-bottom:0}
.duo__body .btn{margin-top:20px}
.duo--flip .duo__media{order:-1}

/* The category's main image, uncropped. These MUST stay after `.duo__media img` above:
   both selectors are one class plus one element, so specificity ties and the later rule
   wins. Declared earlier in the file, `object-fit:cover` silently took the hero back. */
.duo__media--full{background:var(--card-well);display:grid;place-items:center;padding:clamp(12px,1.6vw,26px)}
.duo__media--full img{aspect-ratio:auto;width:100%;height:auto;max-height:520px;object-fit:contain}

@media (max-width:1024px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .head-split{grid-template-columns:minmax(0,1fr);gap:20px}
  .duo{grid-template-columns:minmax(0,1fr);gap:24px}
  .duo--flip .duo__media{order:0}
}
@media (max-width:520px){
  .tiles{grid-template-columns:minmax(0,1fr)}
}

/* ---------- 15j. Product catalogue --------------------------------------- */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Landscape tiles and a generous row gap — 4:5 portraits made the grid a wall.
   Scoped to this grid so the homepage categories rail keeps its tall cards. */
.cats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(34px,4vw,54px) clamp(18px,2.2vw,28px)}
.cats-grid .ccard__media{aspect-ratio:4/3}
.cats-grid .ccard{position:relative}
.ccard__blurb{margin:8px 0 0;font-size:15px;line-height:1.55}
.cats-grid .link-arrow{margin-top:10px}

.filterbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:8px 14px;border-radius:999px;cursor:pointer;font:inherit;font-size:14px;font-weight:600;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.chip:hover{border-color:var(--ink-3)}
.chip.is-on{background:var(--brand);border-color:transparent;color:#fff}
.search input{
  width:min(280px,60vw);padding:10px 14px;font:inherit;font-size:15px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);color:var(--ink);
}
.search input:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:transparent}
.result-count{margin:0 0 18px;font-size:15px}
.no-results{margin:24px 0 0;font-size:16px}

/* Row gap is deliberately larger than the column gap so rows read as rows. */
.prod-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(30px,3.6vw,48px) clamp(16px,2vw,24px)}
.prod-grid .pcard[hidden]{display:none}

/* Product detail */
.crumbs--pdp{padding-block:clamp(18px,2.4vw,30px) 0;flex-wrap:wrap}
.pdp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4.6vw,64px);align-items:start}
.pdp__media{margin:0;border-radius:var(--radius-lg);overflow:hidden;background:var(--card-well)}
.pdp__media img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;display:block}
/* The product header carries the colour on this page — a tinted code pill, a brand rule
   under the name, and the key facts on a tinted panel with a brand edge. */
.pdp__code{
  display:inline-block;margin:0;padding:5px 12px;border-radius:999px;
  background:color-mix(in srgb,var(--brand) 13%,transparent);color:var(--brand-deep);
  font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
}
.pdp__name{position:relative;margin:14px 0 0;font-size:clamp(26px,3.2vw,38px);line-height:1.15;font-weight:600;letter-spacing:-.015em}
.pdp__name::after{
  content:"";display:block;width:64px;height:4px;margin-top:16px;border-radius:999px;
  background:linear-gradient(90deg,var(--brand),var(--brand-deep));
}
.pdp__lede{margin:16px 0 0;font-size:17px;line-height:1.6}
.specs{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;
  margin:26px 0 0;padding:20px 22px;border:0;border-left:3px solid var(--brand);
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  background:color-mix(in srgb,var(--brand) 6%,#fff);
}
.specs dt{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-deep)}
.specs dd{margin:4px 0 0;font-size:17px;font-weight:600}
.specs dd a{color:var(--brand-deep);text-decoration:underline;text-underline-offset:3px}
.swatch--lg{width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.10),0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent)}
.pdp__colours{margin-top:22px}
.pdp__label{margin:0 0 10px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-deep)}
.pdp__note{margin:10px 0 0;font-size:14px;color:var(--ink)}
.pdp__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

@media (max-width:1180px){ .cats-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .prod-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:860px){
  .cats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pdp{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){ .cats-grid{grid-template-columns:minmax(0,1fr)} }

/* ---------- 15k. Listing product card + spec table ----------------------- */
/* The homepage carousel keeps the compact grey card; listings get the image-led
   treatment from the reference — big picture, name, one meta line, See more. */
.prod-grid .pcard{background:none;padding:0;border-radius:0;overflow:visible}
.prod-grid .pcard__media{
  aspect-ratio:1/1;border-radius:var(--radius-lg);overflow:hidden;background:var(--card-well);
}
.prod-grid .pcard__media img{object-fit:cover}
.prod-grid .pcard__body{padding:16px 2px 0}
.prod-grid .pcard__code{font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.prod-grid .pcard__name{margin-top:7px;font-size:clamp(18px,1.5vw,21px);line-height:1.25}
.pcard__meta{margin:7px 0 0;font-size:15px;color:var(--ink)}
.prod-grid .swatches{margin-top:11px}
.prod-grid .swatch{width:14px;height:14px}
.pcard__more{
  display:inline-flex;align-items:center;gap:7px;margin-top:13px;
  font-size:15px;font-weight:600;color:var(--ink);
}
.prod-grid .pcard:hover .pcard__more{color:var(--brand)}
.pcard__more svg{transition:transform .22s var(--ease)}
.prod-grid .pcard:hover .pcard__more svg{transform:translateX(3px)}





/* ---------- 15m. Specification ------------------------------------------- */
/* The section sits on the brand tint; both tables are white panels so the data reads as
   data. Every label and value is the near-black ink — no grey, no coloured cells. */
.specpanel{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(8px,1.4vw,18px) clamp(18px,2.2vw,28px);
}
.spectable{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:0}
.spectable > div{
  display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr);gap:20px;
  padding:16px 0;border-bottom:1px solid var(--line);align-items:start;
}
.spectable > div:nth-last-child(-n+2){border-bottom:0}
.spectable__wide{grid-column:1/-1}
.spectable dt{font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.spectable dd{margin:0;font-size:16px;line-height:1.55;color:var(--ink)}

.spec-sub{margin:clamp(30px,3.4vw,44px) 0 0;font-size:22px;font-weight:600;line-height:1.25}
.spec-sub__text{margin:8px 0 18px;font-size:16px;line-height:1.6;max-width:76ch}
.spec-note{margin:14px 0 0;font-size:14px;color:var(--ink)}

.sizetable{width:100%;border-collapse:collapse;font-size:16px;color:var(--ink)}
.sizetable th{
  text-align:left;padding:14px 16px 14px 0;border-bottom:1px solid var(--line);
  font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);
}
.sizetable td{padding:14px 16px 14px 0;border-bottom:1px solid var(--line)}
.sizetable tr:last-child td{border-bottom:0}
.sizetable__mark{font-weight:600;white-space:nowrap}
.sizetable__mm{font-weight:600;white-space:nowrap}

@media (max-width:860px){
  .spectable{grid-template-columns:minmax(0,1fr)}
  .spectable > div:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
  .spectable > div:last-child{border-bottom:0}
}
@media (max-width:640px){
  .spectable > div{grid-template-columns:minmax(0,1fr);gap:5px}
  .specpanel{overflow-x:auto}
  .sizetable{min-width:520px}
}

/* ---------- 15n. Gallery -------------------------------------------------- */
.gal{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.gal__item{
  position:relative;display:grid;place-items:center;cursor:pointer;
  padding:clamp(8px,0.9vw,14px);border:1px solid var(--line-2);
  background:#fff;border-radius:var(--radius);overflow:hidden;aspect-ratio:1;min-height:0;
  transition:border-color .2s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease);
}
/* Bounded, not stretched, so a thumbnail shows the whole piece of furniture. See
   .pshot__media — width/height:100% would let the image's own height defeat aspect-ratio. */
.gal__item img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;min-width:0;min-height:0}
.gal__item:hover{border-color:transparent;box-shadow:var(--shadow-md);transform:translateY(-2px)}
.gal__item:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.gal__item[hidden]{display:none}
.chip span{opacity:.6;font-weight:500;margin-left:2px}

@media (max-width:1180px){ .gal{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:860px){ .gal{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:520px){ .gal{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ---------- 16. About split ---------------------------------------------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(28px,5vw,72px)}
.split__lead .h-section{margin-bottom:14px}
.split__lead p{color:var(--ink)}
.split__figure{margin:30px 0 0;border-radius:var(--radius);overflow:hidden;background:var(--card-well)}
.split__figure img{width:100%;height:auto;aspect-ratio:5/2;object-fit:cover;display:block}
.rich p{font-size:16px;line-height:1.6;color:var(--ink);margin-bottom:14px}
.rich h3{font-size:22px;font-weight:600;color:var(--ink);margin-block:22px 8px}
.rich__more{position:relative;max-height:150px;overflow:hidden;transition:max-height .45s var(--ease)}
.rich__more::after{content:"";position:absolute;inset:auto 0 0;height:70px;background:linear-gradient(180deg,transparent,var(--bg));pointer-events:none;transition:opacity .3s}
.rich.is-open .rich__more{max-height:1400px}
.rich.is-open .rich__more::after{opacity:0}
.rich__toggle{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-size:15px;font-weight:600;color:var(--brand)}
.rich__toggle svg{transition:transform .25s var(--ease)}
.rich.is-open .rich__toggle svg{transform:rotate(180deg)}

/* Post content: the editor can produce images, lists and tables, none of which the
   marketing pages needed. .ticks keeps its own bespoke styling. */
.rich img{max-width:100%;height:auto;display:block;border-radius:var(--radius-lg)}
.rich figure{margin:24px 0}
.rich figcaption{margin-top:8px;font-size:14px;line-height:1.5;color:var(--ink-3)}
.rich ul:not(.ticks),.rich ol{margin:0 0 16px;padding-left:1.15em}
.rich ul:not(.ticks) li,.rich ol li{font-size:16px;line-height:1.6;color:var(--ink);margin-bottom:7px}
.rich table{width:100%;border-collapse:collapse;margin:20px 0;font-size:15px}
.rich th,.rich td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.rich thead th{font-weight:600;background:var(--surface)}
.rich blockquote{margin:20px 0;padding-left:16px;border-left:3px solid var(--brand);color:var(--ink-2)}

/* ---------- 17. Commitment pillars --------------------------------------- */
.pillars{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.pillar{padding:34px 24px;text-align:center;border-right:1px solid var(--line)}
.pillar:last-child{border-right:0}
.pillar__icon{
  width:56px;height:56px;margin:0 auto 18px;display:grid;place-items:center;
  border-radius:16px;color:var(--brand);
  background:color-mix(in srgb,var(--brand) 10%,transparent);
}
.pillar__icon svg{width:27px;height:27px}
.pillar__name{font-size:20px;font-weight:600;line-height:1.25;letter-spacing:-.005em}
.pillar__text{margin-top:10px;font-size:16px;line-height:1.55;color:var(--ink)}

/* ---------- 18. Need cards ----------------------------------------------- */
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.need__media{aspect-ratio:1;border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.need__media img{width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease)}
.need:hover .need__media img{transform:scale(1.05)}
.need__name{margin-top:14px;font-size:17px;font-weight:600;line-height:1.3}
.need .link-arrow{margin-top:5px;font-size:15px;color:var(--ink)}

/* ---------- 18b. Enquiry form -------------------------------------------- */
.form-card{background:var(--card-well);border-radius:var(--radius-lg);padding:clamp(24px,3.2vw,44px)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field--full{grid-column:1/-1}
.field label{font-size:14px;font-weight:600;color:var(--ink)}
.req{color:var(--brand)}
.field input,.field textarea{
  font:inherit;font-size:15px;color:var(--ink);width:100%;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease);
}
.field textarea{min-height:130px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent);
}
.field.is-invalid input,.field.is-invalid textarea{border-color:var(--brand)}
.field__error{font-size:12.5px;line-height:1.35;color:var(--brand)}
.field__error:empty{display:none}

.captcha{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.captcha input{flex:1 1 150px}
.captcha__code{
  flex:0 0 auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:19px;font-weight:700;letter-spacing:.24em;padding:11px 16px 11px 20px;
  border:1px dashed var(--line);border-radius:var(--radius);background:var(--bg);color:var(--ink);
  user-select:none;-webkit-user-select:none;
  background-image:repeating-linear-gradient(45deg,transparent 0 6px,rgba(47,55,62,.05) 6px 12px);
}
.captcha__refresh{
  flex:0 0 auto;width:42px;height:42px;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--bg);color:var(--ink);display:grid;place-items:center;
  transition:color .16s var(--ease),border-color .16s var(--ease);
}
.captcha__refresh:hover{color:var(--brand);border-color:var(--brand)}
.captcha__refresh svg{transition:transform .35s var(--ease)}
.captcha__refresh:active svg{transform:rotate(-180deg)}

.form-foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.form-note{font-size:13px;color:var(--ink);max-width:52ch}
.form-success{
  display:none;gap:14px;align-items:flex-start;
  padding:22px 24px;border-radius:var(--radius);
  background:var(--bg);border:1px solid var(--line);
}
.form-success.is-on{display:flex}
.form-success svg{flex:0 0 auto;color:var(--brand);margin-top:1px}
.form-success h3{font-size:18px;font-weight:600}
.form-success p{margin-top:5px;font-size:14px;color:var(--ink)}
form.is-sent{display:none}

/* ---------- 19. Stats ---------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.stat__num{font-size:clamp(30px,3.6vw,42px);font-weight:600;letter-spacing:-.02em;color:var(--brand)}
.stat__label{margin-top:4px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.stat__text{margin-top:6px;font-size:14px;color:var(--ink)}

/* ---------- 20. Footer --------------------------------------------------- */
.footer{background:var(--surface-2);padding-block:clamp(40px,5vw,64px) 0;margin-top:clamp(48px,7vw,88px)}
.footer__grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:32px}
.footer__logo img{height:76px;width:auto;margin-bottom:16px}
.footer__tag{font-size:14px;color:var(--ink);max-width:34ch}
.footer h4{font-size:13px;font-weight:600;color:var(--ink-3);margin-bottom:14px}
.footer li{margin-bottom:9px}
.footer li a{font-size:14px;color:var(--ink)}
.footer li a:hover{color:var(--brand)}
.footer__contact{font-size:14px;color:var(--ink);line-height:1.7}
.footer__contact a:hover{color:var(--brand)}
.footer__bar{margin-top:40px;border-top:1px solid var(--line);padding-block:20px 76px;
  display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:13px;color:var(--ink-3)}
.footer__bar nav{display:flex;flex-wrap:wrap;gap:8px 20px}

/* ---------- 21. Placeholder (content pending) ---------------------------- */
[data-placeholder]{position:relative}
[data-placeholder] .ph-art{
  width:100%;height:100%;display:grid;place-items:center;
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--brand) 12%,transparent),color-mix(in srgb,var(--brand) 3%,transparent)),
    repeating-linear-gradient(45deg,transparent 0 11px,rgba(47,55,62,.045) 11px 22px);
  color:var(--brand);
}
[data-placeholder] .ph-art svg{width:34%;max-width:76px;opacity:.55}
.ph-badge{
  position:absolute;top:10px;left:10px;z-index:3;
  padding:4px 9px;border-radius:999px;background:rgba(47,55,62,.88);color:#fff;
  font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
}

/* ---------- 22. Theme switcher (DEMO ONLY — remove before WP build) ------- */
.themer{
  position:fixed;right:16px;bottom:16px;z-index:90;
  display:flex;align-items:center;gap:6px;padding:6px;
  background:var(--bg);border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow-md);
}
.themer__label{font-size:11px;font-weight:600;color:var(--ink-3);padding-inline:8px 2px;letter-spacing:.04em;text-transform:uppercase}
.themer button{width:26px;height:26px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);transition:transform .15s var(--ease)}
.themer button:hover{transform:scale(1.12)}
.themer button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ink)}

/* ---------- 23. Reveal on scroll ----------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(16px)}
  .reveal.is-in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
}

/* ---------- 24. Responsive ----------------------------------------------- */
@media (max-width:1180px){
  .rail--products{--per:4}
  .rail--categories{--per:4}
  .rail--videos{--per:3}
  .pillars{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pillar:nth-child(3){border-right:0}
  .pillar:nth-child(n+4){border-top:1px solid var(--line)}
}
@media (max-width:1190px){
  /* six nav items no longer fit alongside the CTA — drop the button, keep the nav */
  .header__cta{display:none}
  .header__inner{gap:18px}
  .nav__link{padding-inline:9px}
}
@media (max-width:1024px){
  :root{--header-h:80px}
  .logo img{height:60px}
  .rail--products{--per:3}
  .rail--categories{--per:3}
  .rail--videos{--per:2.5}
  .rail--reviews{--per:2.15}
  .rail--sectors{--per:6}
  .split{grid-template-columns:1fr;gap:28px}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sectors{grid-template-columns:1fr;gap:24px;text-align:left}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
  .footer__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer__brand{grid-column:1/-1}
}
@media (max-width:1279px){
  /* Seven uppercase items need 1268px beside the logo and tools; below that the bar
     collides, so hand over to the drawer. Re-measure if items are added or removed. */
  .nav{display:none}
  .burger{display:grid}
}
@media (max-width:860px){
  .pjs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chans{grid-template-columns:minmax(0,1fr)}
  .locs{grid-template-columns:minmax(0,1fr)}
  .team--staff{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats.stats--3{grid-template-columns:repeat(2,minmax(0,1fr))}

  .grid-3{grid-template-columns:1fr;gap:28px}
  .pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pillar{border-right:1px solid var(--line);border-top:1px solid var(--line)}
  .pillar:nth-child(2n){border-right:0}
  .pillar:nth-child(-n+2){border-top:0}
  .pillar:last-child{grid-column:1/-1;border-right:0}
}
@media (max-width:640px){
  .pjs{grid-template-columns:minmax(0,1fr)}
  .team--leaders{grid-template-columns:minmax(0,1fr);max-width:420px}
  .stats.stats--3{grid-template-columns:minmax(0,1fr)}

  .form-grid{grid-template-columns:1fr}
  .form-foot{flex-direction:column;align-items:stretch}
  .form-foot .btn{justify-content:center}
  .rail--products{--per:2.15}
  .rail--categories{--per:2.05}
  .rail--videos{--per:1.25}
  .rail--reviews{--per:1.15}
  .rail--sectors{--per:3.5}
  .sec-head{flex-direction:column;align-items:flex-start;gap:14px}
  .grid-4{grid-template-columns:1fr}
  /* Buttons hug their label and sit left, in line with the hero text above,
     rather than stretching the full column width. */
  .hero__actions{flex-direction:column;align-items:flex-start}
  .hero__actions .btn{flex:0 0 auto}
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rail-foot{padding-top:14px;margin-top:14px}
  .themer{right:10px;bottom:10px}
  .themer__label{display:none}
}
@media (max-width:420px){
  .rail--products{--per:1.35}
  .rail--categories{--per:1.3}
  .rail--videos{--per:1.25}
  .rail--reviews{--per:1.05}
}

/* ---------- 25. Mobile drawer -------------------------------------------- */
.drawer{
  position:fixed;inset:0;z-index:80;visibility:hidden;overflow:hidden;
}
.drawer[aria-hidden="false"]{visibility:visible}
.drawer__scrim{position:absolute;inset:0;background:rgba(16,21,26,.42);opacity:0;transition:opacity .25s var(--ease)}
.drawer[aria-hidden="false"] .drawer__scrim{opacity:1}
.drawer__panel{
  position:absolute;inset:0 0 0 auto;width:min(400px,88vw);background:var(--bg);
  transform:translateX(100%);transition:transform .3s var(--ease);
  display:flex;flex-direction:column;
}
.drawer[aria-hidden="false"] .drawer__panel{transform:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);padding-inline:20px;border-bottom:1px solid var(--line);flex:0 0 auto}
.drawer__body{padding:12px 12px 28px;overflow-y:auto}
.drawer__body a{display:block;padding:13px 12px;border-radius:var(--radius);font-size:17px;font-weight:500}
.drawer__body a:hover{background:var(--surface)}
.drawer__body .sub-link{font-size:15px;font-weight:400;color:var(--ink);padding-left:24px}
.drawer__cta{margin:16px 12px 0;display:grid;gap:10px}
.drawer__cta .btn{justify-content:center}

/* print */
@media print{.header,.themer,.rail-nav,.drawer{display:none!important}}

/* Blog grid steps down last so the narrower rule wins. */
@media (max-width:1100px){
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .blog-grid{grid-template-columns:1fr}
}