/* ==========================================================================
   ZenithLinen — SFG TRADINGS LLP
   style.css  ·  single stylesheet for the whole site
   --------------------------------------------------------------------------
   1  Tokens          6  Hero + portal
   2  Reset           7  Sections & components
   3  Typography      8  Page-specific blocks
   4  Header          9  Catalogue
   5  Buttons        10  Utilities / motion / responsive
   ========================================================================== */

/* 1 ── TOKENS ────────────────────────────────────────────────────────────── */
:root{
  --bg:#f4f1ea;
  --bg-2:#eae5da;
  --bg-3:#e1dbcd;
  --surface:#fefdfa;
  --surface-2:#f8f5ee;

  --ink:#1a1713;          /* display + headings */
  --ink-2:#3f382f;        /* body copy          */
  --muted:#5f574a;        /* darkened for readability — ~6.6:1 on --bg */
  --line:#ded6c7;
  --line-2:#cabfab;

  --accent:#b6653c;       /* buttons, fills            */
  --accent-hover:#9c5230;
  --accent-deep:#9a4f2b;  /* small text on light, 4.9:1 */
  --accent-light:#e7a17f; /* on dark panels            */
  --accent-warm:#f0a681;
  --accent-tint:rgba(182,101,60,.09);

  --dark:#201d19;
  --dark-2:#2b2721;
  --dark-3:#3a352d;

  --radius-s:10px;
  --radius:16px;
  --radius-l:24px;
  --radius-xl:34px;

  --shadow-s:0 2px 10px rgba(45,36,26,.05);
  --shadow:0 12px 34px rgba(45,36,26,.09);
  --shadow-l:0 28px 70px rgba(45,36,26,.14);

  --ease:cubic-bezier(.22,.68,.28,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --wrap:1280px;
  --gut:clamp(20px,5vw,64px);

  --f-display:'Playfair Display',Georgia,serif;
  --f-accent:'Italiana',Georgia,serif;
  --f-body:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* 2 ── RESET ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f-body);font-size:15px;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.nav-open,body.intro-lock{overflow:hidden}
img,svg,video,iframe{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent-light);color:#241a12}
main{display:block}

/* 3 ── TYPOGRAPHY ────────────────────────────────────────────────────────── */
h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-.015em;line-height:1.1}
h1{font-family:var(--f-display);font-size:clamp(34px,5vw,68px)}
h2{font-family:var(--f-display);font-size:clamp(28px,3.6vw,48px)}
h3{font-family:var(--f-body);font-size:17px;font-weight:600;letter-spacing:-.005em;line-height:1.35}
p{margin:0 0 14px}
p:last-child{margin-bottom:0}
em{font-family:var(--f-accent);font-style:normal;color:var(--accent)}
strong{font-weight:600}
.serif{font-family:var(--f-display)}
.muted{color:var(--muted)}

.eyebrow{
  font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:12px;
}
.link-arrow{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:600;letter-spacing:.03em;color:var(--accent);
  transition:gap .3s var(--ease);
}
.link-arrow:hover{gap:12px}

/* 4 ── HEADER ────────────────────────────────────────────────────────────── */
.showcase{position:relative;overflow-x:clip}

.site-header{
  position:fixed;top:0;left:0;right:0;z-index:300;
  background:rgba(243,240,234,.86);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid rgba(221,213,200,.7);
  transition:background .4s var(--ease),box-shadow .4s var(--ease),border-color .4s;
  border-bottom:1px solid transparent;
}
.site-header.solid{
  background:rgba(243,240,234,.9);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom-color:var(--line);
}
.site-header.hidden{transform:none}
.header-inner{
  max-width:var(--wrap);margin-inline:auto;
  padding:14px var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:22px;
}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand-mark{
  width:30px;height:30px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(140deg,var(--accent),var(--accent-light));
  display:grid;place-items:center;color:#fff;font-size:13px;
  font-family:var(--f-accent);letter-spacing:.02em;
}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-name{font-family:var(--f-accent);font-size:19px;letter-spacing:.11em}
/* header wordmark: heavier, wider and fully dark so it reads clearly over
   the translucent bar and hero photography */
.site-header .brand-name,.mnav-head .brand-name{
  font-family:var(--f-body);font-weight:800;
  font-size:17.5px;letter-spacing:.14em;color:var(--ink);
}
.site-header .brand-mark{width:32px;height:32px;font-size:14px}
.brand-sub{font-size:7.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:3px}

.nav{display:flex;align-items:center;gap:2px}
.nav a{
  position:relative;padding:9px 12px;border-radius:999px;
  font-size:12.5px;font-weight:500;color:var(--ink-2);
  transition:color .25s,background .25s;
}
.nav a:hover{color:var(--ink);background:rgba(0,0,0,.04)}
.nav a.active{color:var(--accent);font-weight:600}
.nav a.active::after{
  content:'';position:absolute;left:12px;right:12px;bottom:3px;height:1.5px;
  background:var(--accent);border-radius:2px;
}
.header-cta{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav-toggle{display:none;width:40px;height:40px;border-radius:11px;border:1px solid var(--line);
  align-items:center;justify-content:center;font-size:15px;color:var(--ink)}

.mobile-nav{
  position:fixed;inset:0;z-index:119;background:var(--bg);
  padding:86px var(--gut) 32px;overflow-y:auto;
  transform:translateY(-100%);opacity:0;visibility:hidden;
  transition:transform .5s var(--ease-out),opacity .35s,visibility .35s;
}
.mobile-nav.open{transform:translateY(0);opacity:1;visibility:visible}
.mobile-nav a{
  display:flex;align-items:center;justify-content:space-between;
  padding:15px 0;border-bottom:1px solid var(--line);
  font-family:var(--f-display);font-size:24px;color:var(--ink);
}
.mobile-nav a i{font-size:12px;color:var(--accent)}
.mobile-nav a.active{color:var(--accent)}
.mobile-nav-foot{margin-top:26px;display:grid;gap:11px}

/* 5 ── BUTTONS ───────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 25px;border-radius:999px;white-space:nowrap;
  font-size:12.5px;font-weight:600;letter-spacing:.03em;
  border:1px solid transparent;cursor:pointer;
  transition:transform .3s var(--ease),background .3s,color .3s,border-color .3s,box-shadow .3s;
}
.btn i{font-size:11px;transition:transform .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover i{transform:translateX(3px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(192,118,78,.26)}
.btn-primary:hover{background:var(--accent-hover);box-shadow:0 10px 26px rgba(192,118,78,.32)}
.btn-dark{background:var(--dark);color:#f6f2ea}
.btn-dark:hover{background:var(--dark-2)}
.btn-light{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.4);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.btn-light:hover{background:rgba(255,255,255,.24)}
.btn-outline{border-color:var(--line-2);color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn-sm{padding:10px 18px;font-size:11.5px}
.btn-wide{width:100%}

/* 6 ── HERO + PORTAL ─────────────────────────────────────────────────────── */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;background:var(--bg)}
.hero-stage{position:absolute;inset:0}

/* the room behind the arch */
.hero-scene{position:absolute;inset:0;overflow:hidden}
.hero-scene img,.hero-scene video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.34);transform-origin:50% 46%;will-change:transform;
}
/* video sits over the fallback image; the veil stays on top of both.
   If the video never loads it is transparent and the image shows through. */
.hero-scene video{z-index:1}
.hero-veil{z-index:2}
.hero-veil{
  position:absolute;inset:0;
  background:
    radial-gradient(118% 88% at 50% 38%,rgba(0,0,0,0) 32%,rgba(24,20,15,.6) 100%),
    linear-gradient(to top,rgba(20,17,13,.76) 0%,rgba(20,17,13,0) 55%);
}

/* hero copy */
.hero-content{
  position:absolute;inset:0;z-index:3;
  max-width:var(--wrap);margin-inline:auto;
  padding:0 var(--gut) clamp(60px,10vh,116px);
  display:flex;flex-direction:column;justify-content:flex-end;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  padding:8px 16px;border-radius:999px;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#f7ede2;
}
.hero-badge i{color:var(--accent-warm);font-size:10px}
.hero-content h1{
  font-size:clamp(42px,7.2vw,104px);line-height:.99;letter-spacing:-.02em;
  color:#fdfaf5;margin:22px 0 0;
}
.hero-content h1 em{color:#f4e3d2}
.hero-content p{
  max-width:54ch;margin:20px 0 0;
  font-size:clamp(13px,1.1vw,15.5px);line-height:1.75;color:rgba(255,255,255,.82);
}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* the arch wall that scales through the viewer */
.hero-portal{
  position:absolute;inset:0;z-index:6;pointer-events:none;
  transform-origin:50% 46%;will-change:transform,opacity;
}
.hero-portal svg{width:100%;height:100%}
.hero-mark{
  position:absolute;left:50%;top:46%;z-index:7;transform:translate(-50%,-50%);
  text-align:center;pointer-events:none;
}
.hero-mark span{
  display:block;font-family:var(--f-accent);
  font-size:clamp(14px,1.5vw,22px);letter-spacing:.44em;text-indent:.44em;color:#6f5d47;
}
.hero-mark small{
  display:block;margin-top:9px;font-size:8px;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:#a5947c;
}
.hero-skip{
  position:absolute;right:var(--gut);top:calc(50% + 0px);z-index:9;
  top:auto;bottom:26px;
  padding:9px 17px;border-radius:999px;
  border:1px solid rgba(80,66,50,.24);background:rgba(255,255,255,.66);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#5d4d3a;
  transition:background .25s,opacity .3s;
}
.hero-skip:hover{background:#fff}
.hero-cue{
  position:absolute;left:50%;bottom:22px;z-index:8;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;
  font-size:8.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.hero-cue span:last-child{width:1px;height:32px;background:linear-gradient(rgba(255,255,255,.6),transparent)}

/* inner page heroes */
.image-page-hero{
  position:relative;min-height:clamp(430px,64vh,620px);
  display:flex;align-items:flex-end;overflow:hidden;
}
.image-page-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.image-page-hero::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,17,13,.82) 8%,rgba(20,17,13,.28) 58%,rgba(20,17,13,.42) 100%);
}
.image-page-hero .inner{
  position:relative;z-index:2;max-width:var(--wrap);margin-inline:auto;width:100%;
  padding:0 var(--gut) clamp(48px,7vh,80px);
}
.image-page-hero .eyebrow{color:var(--accent-warm)}
.image-page-hero h1{color:#fdfaf5;font-size:clamp(34px,5.4vw,72px)}
.image-page-hero h1 em{color:#f4e3d2}
.image-page-hero p{max-width:62ch;margin-top:18px;font-size:14px;line-height:1.8;color:rgba(255,255,255,.8)}

.page-hero{
  max-width:var(--wrap);margin-inline:auto;
  padding:clamp(130px,18vh,180px) var(--gut) clamp(40px,6vh,62px);
  text-align:left;
}
.page-hero h1{margin-bottom:14px}
.page-hero p{color:var(--muted);max-width:62ch}

/* 7 ── SECTIONS & SHARED COMPONENTS ──────────────────────────────────────── */
.section{max-width:var(--wrap);margin-inline:auto;padding:clamp(64px,9vh,110px) var(--gut)}
.section-tight{max-width:var(--wrap);margin-inline:auto;padding:clamp(44px,6vh,74px) var(--gut)}
.section-full{padding-inline:0;max-width:none}
.band{background:var(--bg-2)}
.band-line{border-block:1px solid var(--line)}
.section-dark-soft{background:var(--bg-2)}

.section-head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:22px;margin-bottom:clamp(28px,4vh,46px);
}
.section-head>div{max-width:640px}
.section-head p{max-width:44ch;font-size:13px;line-height:1.8;color:var(--muted);margin:0}

.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.feature{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);
  padding:clamp(20px,2.4vw,30px);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s;
}
a.feature:hover,.feature:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-2)}
.feature h3{margin-bottom:9px}
.feature p{font-size:12.5px;line-height:1.75;color:var(--muted);margin-bottom:6px}
.feature-icon{
  width:44px;height:44px;border-radius:13px;margin-bottom:16px;
  display:grid;place-items:center;font-size:16px;color:var(--accent);
  background:linear-gradient(140deg,rgba(192,118,78,.14),rgba(231,161,127,.1));
  border:1px solid rgba(192,118,78,.16);
}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,60px);align-items:center}
.split-media{border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow)}
.split-media img{width:100%;aspect-ratio:4/3.2;object-fit:cover}

.check-list{display:grid;gap:11px;margin:22px 0 26px}
.check-list>div{display:flex;align-items:flex-start;gap:11px;font-size:13px;color:var(--ink-2)}
.check-list i{color:var(--accent);font-size:11px;margin-top:5px}

.dark-panel{
  position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--dark) 0%,var(--dark-2) 62%,var(--dark-3) 100%);
  color:#f4efe6;border-radius:var(--radius-xl);
  padding:clamp(30px,5vw,64px);
}
.dark-panel::after{
  content:'';position:absolute;right:-90px;top:-90px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(231,161,127,.2),transparent 68%);pointer-events:none;
}
.dark-panel h1{font-size:clamp(28px,3.6vw,50px);color:#fdfaf5;margin-bottom:14px}
.dark-panel h2{color:#fdfaf5;margin-bottom:14px}
.dark-panel p{max-width:58ch;font-size:13.5px;line-height:1.8;color:rgba(244,239,230,.76);margin-bottom:24px}
.dark-panel .eyebrow{color:var(--accent-light)}

.quote-block{
  font-family:var(--f-display);font-size:clamp(22px,3.1vw,42px);line-height:1.28;
  font-style:italic;text-align:center;color:var(--ink);
  max-width:22ch;margin-inline:auto;padding:clamp(28px,5vh,56px) 0;
}
.quote-block[data-wide]{max-width:34ch}

.notice{
  background:rgba(192,118,78,.07);border:1px solid rgba(192,118,78,.2);
  border-left:3px solid var(--accent);border-radius:var(--radius);
  padding:16px 20px;font-size:12.5px;line-height:1.75;color:var(--ink-2);
}
.portfolio-note{font-size:11.5px;color:var(--muted);font-style:italic}

.trust-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius-l);overflow:hidden;
}
.trust-strip>div{background:var(--surface);padding:22px 18px;text-align:center}
.trust-strip strong{display:block;font-family:var(--f-display);font-size:clamp(22px,2.6vw,34px);color:var(--accent)}
.trust-strip span{display:block;margin-top:5px;font-size:10px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted)}

/* image cards / bento */
.bento{display:grid;grid-template-columns:1.24fr 1fr .82fr;gap:20px}
.card-image{
  position:relative;overflow:hidden;border-radius:var(--radius-xl);
  min-height:340px;display:block;
}
.card-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1s var(--ease-out)}
.card-image:hover img{transform:scale(1.06)}
.card-image .overlay{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,17,13,.8) 4%,rgba(20,17,13,.08) 62%)}
.card-label{position:absolute;left:0;right:0;bottom:0;padding:22px;color:#fdfaf5;z-index:2}
.card-label .eyebrow{margin-bottom:6px}
.card-label h3{font-family:var(--f-display);font-size:clamp(19px,2vw,27px);font-weight:400;color:#fdfaf5}
.card-label small{display:block;margin-top:6px;font-size:11px;color:rgba(255,255,255,.66)}

/* location cards */
.location-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.location-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);
  padding:24px 22px;transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.location-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.location-card h3{font-family:var(--f-display);font-size:24px;font-weight:400;margin-bottom:8px}
.location-card p{font-size:12px;line-height:1.7;color:var(--muted)}

/* blog cards */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.blog-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.blog-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.blog-card>img{width:100%;aspect-ratio:16/10;object-fit:cover}
.blog-card .inside{padding:22px;display:flex;flex-direction:column;flex:1}
.blog-meta{font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);margin-bottom:11px}
.blog-card h3{font-family:var(--f-display);font-size:21px;font-weight:400;line-height:1.24;margin-bottom:10px}
.blog-card p{font-size:12.5px;line-height:1.72;color:var(--muted);margin-bottom:16px;flex:1}

/* article body */
.article-wrap{max-width:760px;margin-inline:auto}
.article-wrap h2{font-size:clamp(24px,2.8vw,34px);margin:38px 0 14px}
.article-wrap h2:first-child{margin-top:0}
.article-wrap h3{font-size:16px;margin:26px 0 10px}
.article-wrap p,.article-wrap li{font-size:14px;line-height:1.9;color:var(--ink-2)}
.article-wrap ul,.article-wrap ol{padding-left:20px;margin:0 0 16px}
.article-wrap li{margin-bottom:8px}
.article-wrap img{border-radius:var(--radius-l);margin:26px 0}
.article-meta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px;
  font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.article-meta span{padding:5px 12px;border:1px solid var(--line);border-radius:999px}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);padding:22px 26px;margin-bottom:32px}
.toc .eyebrow{margin-bottom:10px}
.toc ol{margin:0;padding-left:18px}
.toc li{font-size:13px;margin-bottom:6px}
.toc a:hover{color:var(--accent)}

/* footer */
.site-footer{background:var(--dark);color:#e7e0d4;margin-top:0;overflow:hidden}
.footer-inner{max-width:var(--wrap);margin-inline:auto;padding:clamp(48px,7vh,80px) var(--gut) 0}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:44px}
.footer-brand .brand-name{color:#fdfaf5}
.footer-brand .brand-sub{color:rgba(231,224,212,.5)}
.footer-brand p{margin-top:18px;font-size:12.5px;line-height:1.8;color:rgba(231,224,212,.62);max-width:36ch}
.footer-col h4{font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent-light);margin-bottom:16px}
.footer-col a,.footer-col p{display:block;font-size:12.5px;line-height:2.05;
  color:rgba(231,224,212,.68);transition:color .25s,padding-left .25s;margin:0}
.footer-col a:hover{color:#fdfaf5;padding-left:4px}
.footer-contact div{display:flex;gap:11px;align-items:flex-start;margin-bottom:13px;
  font-size:12.5px;line-height:1.65;color:rgba(231,224,212,.68)}
.footer-contact i{color:var(--accent-light);font-size:12px;margin-top:4px;width:14px;flex-shrink:0}
.footer-social{display:flex;gap:9px;margin-top:18px}
.footer-social a{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:14px;
  border:1px solid rgba(231,224,212,.18);color:rgba(231,224,212,.75);
  transition:background .3s,color .3s,border-color .3s,transform .3s;
}
.footer-social a:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-2px)}
.footer-wordmark{
  font-family:var(--f-accent);font-size:clamp(56px,15vw,196px);line-height:.82;
  letter-spacing:.02em;color:rgba(231,224,212,.07);
  text-align:center;user-select:none;pointer-events:none;
  padding-top:10px;margin-bottom:-.13em;
}
.footer-bottom{
  padding:28px var(--gut) 20px;max-width:var(--wrap);margin-inline:auto;
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  font-size:11.5px;color:rgba(231,224,212,.5);
}
.footer-bottom nav{display:flex;gap:18px;flex-wrap:wrap}
.footer-bottom a:hover{color:#fdfaf5}

/* floating enquiry-list button (replaces the old WhatsApp float) */
.req-float{
  position:fixed;right:18px;bottom:18px;z-index:110;
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--dark);color:#fdfaf5;font-size:20px;
  box-shadow:0 10px 26px rgba(45,36,26,.28);
  transition:transform .3s var(--ease),background .3s var(--ease);
}
.req-float:hover{transform:scale(1.08)}
.req-float.has-items{background:var(--accent)}
.req-float-count{
  position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;
  border-radius:999px;background:var(--accent);color:#fff;
  font-size:11px;font-weight:700;line-height:20px;text-align:center;
  border:2px solid var(--bg);
}
.req-float.has-items .req-float-count{background:var(--dark)}

/* toast */
.toast{
  position:fixed;left:50%;bottom:26px;z-index:200;transform:translate(-50%,20px);
  background:var(--dark);color:#f4efe6;padding:13px 22px;border-radius:999px;
  font-size:12.5px;opacity:0;visibility:hidden;transition:all .4s var(--ease);
  box-shadow:var(--shadow-l);
}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* 8 ── CATALOGUE ─────────────────────────────────────────────────────────── */
.catalogue-controls{
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  margin-bottom:26px;
}
.catalogue-search-wrap{display:flex;align-items:center;gap:16px;flex:1 1 auto;min-width:0;max-width:100%}
.product-count{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}
.catalogue-search{position:relative;flex:1 1 240px;min-width:0}
.catalogue-search i{position:absolute;left:16px;top:50%;transform:translateY(-50%);
  font-size:12px;color:var(--muted);pointer-events:none}
.catalogue-search input{
  width:100%;padding:12px 16px 12px 40px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);font-size:13px;
  transition:border-color .25s,box-shadow .25s;
}
.catalogue-search input:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(192,118,78,.13)}
.product-search-preview{
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:40;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-l);overflow:hidden;display:none;
}
.product-search-preview.open{display:block}
.product-search-preview button{
  display:flex;width:100%;gap:12px;align-items:center;padding:10px 14px;text-align:left;
  border-bottom:1px solid var(--line);transition:background .2s;
}
.product-search-preview button:last-child{border-bottom:0}
.product-search-preview button:hover{background:var(--bg-2)}
.product-search-preview img{width:38px;height:38px;border-radius:9px;object-fit:cover;flex-shrink:0}
.product-search-preview strong{display:block;font-size:12.5px;font-weight:600}
.product-search-preview span{font-size:10.5px;color:var(--muted)}

.category-tabs{display:flex;flex-wrap:wrap;gap:8px}
.category-tabs button{
  padding:9px 17px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);font-size:11.5px;font-weight:600;color:var(--ink-2);
  transition:all .28s var(--ease);white-space:nowrap;
}
.category-tabs button:hover{border-color:var(--accent);color:var(--accent)}
.category-tabs button.active{background:var(--ink);border-color:var(--ink);color:var(--bg)}

.product-grid-wide{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
}
.product-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);
  overflow:hidden;cursor:pointer;text-align:left;display:flex;flex-direction:column;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s;
}
.product-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--line-2)}
.product-card-media{position:relative;overflow:hidden;aspect-ratio:4/3.4;background:var(--bg-2)}
.product-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.product-card:hover .product-card-media img{transform:scale(1.07)}
.product-tag{
  position:absolute;left:11px;top:11px;z-index:2;
  padding:5px 11px;border-radius:999px;background:rgba(29,26,22,.84);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-size:8.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#fdfaf5;
}
.product-card-body{padding:16px 17px 18px;display:flex;flex-direction:column;flex:1;min-width:0}
.product-code{font-size:10px;font-weight:600;letter-spacing:.1em;color:var(--muted);margin-bottom:7px}
.product-card-body h3{
  font-family:var(--f-display);font-size:18px;font-weight:400;line-height:1.22;
  margin-bottom:8px;overflow-wrap:break-word;hyphens:auto;
}
.product-card-body p{
  font-size:11.5px;line-height:1.65;color:var(--muted);margin-bottom:14px;flex:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.product-card-body .link-arrow{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase}

.pagination{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:34px}
.pagination button{
  min-width:38px;height:38px;padding:0 12px;border-radius:11px;
  border:1px solid var(--line);background:var(--surface);
  font-size:12.5px;font-weight:600;color:var(--ink-2);transition:all .25s var(--ease);
}
.pagination button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.pagination button.active{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.pagination button:disabled{opacity:.35;cursor:not-allowed}

.catalogue-empty{
  grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--muted);
}
.catalogue-empty i{font-size:26px;color:var(--line-2);margin-bottom:14px;display:block}

.catalogue-visual-handoff{
  display:grid;grid-template-columns:1fr 1.5fr;gap:28px;align-items:center;
  margin-top:44px;padding:28px;border:1px solid var(--line);
  border-radius:var(--radius-xl);background:var(--surface);
}
.handoff-copy h3{font-family:var(--f-display);font-size:26px;font-weight:400;margin-bottom:10px}
.handoff-copy p{font-size:12.5px;color:var(--muted);margin-bottom:14px}
.handoff-images{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.handoff-images img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius);
  transition:transform .5s var(--ease)}
.handoff-images a:hover img{transform:scale(1.04)}

/* ── PRODUCT MODAL ───────────────────────────────────────────────────────
   Fix: media column carries a thumbnail strip so the left never reads empty,
   and the CTA row is pinned to a footer that cannot scroll out of view.     */
.product-modal{
  position:fixed;inset:0;z-index:200;display:none;
  padding:clamp(10px,3vh,34px) clamp(10px,3vw,34px);
  background:rgba(24,20,16,.62);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  opacity:0;transition:opacity .35s var(--ease);
}
.product-modal.open{display:grid;place-items:center;opacity:1}
.product-modal-box{
  position:relative;width:min(1080px,100%);max-height:min(92svh,860px);
  background:var(--surface);border-radius:var(--radius-xl);overflow:hidden;
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  grid-template-rows:minmax(0,1fr);
  box-shadow:var(--shadow-l);
  transform:translateY(14px) scale(.985);transition:transform .45s var(--ease-out);
}
.product-modal.open .product-modal-box{transform:none}

.pm-media{
  position:relative;background:var(--bg-2);
  display:flex;flex-direction:column;min-height:0;
}
.pm-media-main{position:relative;flex:1;min-height:0;overflow:hidden}
.pm-media-main img{width:100%;height:100%;object-fit:cover}
.pm-media .product-tag{left:14px;top:14px}
.pm-thumbs{
  display:flex;gap:8px;padding:10px;background:var(--surface-2);
  border-top:1px solid var(--line);overflow-x:auto;flex-shrink:0;
  scrollbar-width:thin;
}
.pm-thumbs button{
  width:60px;height:52px;border-radius:10px;overflow:hidden;flex-shrink:0;
  border:2px solid transparent;transition:border-color .25s,transform .25s;
}
.pm-thumbs button:hover{transform:translateY(-2px)}
.pm-thumbs button.active{border-color:var(--accent)}
.pm-thumbs img{width:100%;height:100%;object-fit:cover}

.pm-content{display:flex;flex-direction:column;min-height:0;min-width:0}
.pm-scroll{overflow-y:auto;padding:clamp(22px,3vw,38px);flex:1;min-height:0}
.pm-scroll::-webkit-scrollbar{width:6px}
.pm-scroll::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}
.pm-code{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px}
.pm-content h2{
  font-family:var(--f-display);font-size:clamp(26px,3vw,40px);font-weight:400;
  line-height:1.1;margin-bottom:14px;overflow-wrap:break-word;
}
.pm-desc{font-size:13px;line-height:1.8;color:var(--ink-2);margin-bottom:22px}
.pm-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-bottom:22px}
.pm-spec{background:var(--bg-2);border-radius:var(--radius);padding:13px 15px;min-width:0}
.pm-spec dt{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:5px}
.pm-spec dd{margin:0;font-size:12.5px;font-weight:600;line-height:1.5;overflow-wrap:break-word}
.pm-block{border-top:1px solid var(--line);padding-top:18px;margin-top:18px}
.pm-block .eyebrow{margin-bottom:11px}
.pm-chips{display:flex;flex-wrap:wrap;gap:8px}
.pm-chip{
  padding:7px 14px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);font-size:11.5px;font-weight:500;white-space:nowrap;
}
.pm-swatches{display:flex;flex-wrap:wrap;gap:8px}
.pm-swatch{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px 6px 7px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);font-size:11.5px;font-weight:500;white-space:nowrap;
}
.pm-swatch i{width:15px;height:15px;border-radius:50%;border:1px solid rgba(0,0,0,.13);flex-shrink:0}

.pm-actions{
  flex-shrink:0;display:flex;flex-wrap:wrap;gap:10px;
  padding:15px clamp(22px,3vw,38px);
  background:var(--surface);border-top:1px solid var(--line);
  box-shadow:0 -8px 22px rgba(45,36,26,.05);
}
.pm-actions .btn{flex:1 1 165px}
.pm-close{
  position:absolute;right:14px;top:14px;z-index:6;
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);color:var(--ink);font-size:15px;box-shadow:var(--shadow-s);
  transition:transform .3s var(--ease),background .3s;
}
.pm-close:hover{transform:rotate(90deg);background:var(--bg-2)}

/* ── PRODUCT DETAIL PAGE ─────────────────────────────────────────────────
   Fix: only the summary sits beside the image. Everything after it runs
   full width, so the left column is never left empty.                      */
.pdp-top{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,54px);align-items:start;
}
.pdp-gallery{position:sticky;top:96px}
.pdp-main{
  position:relative;border-radius:var(--radius-xl);overflow:hidden;
  aspect-ratio:4/3.6;background:var(--bg-2);box-shadow:var(--shadow);
}
.pdp-main img{width:100%;height:100%;object-fit:cover}
.pdp-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.pdp-thumbs button{
  border-radius:var(--radius);overflow:hidden;aspect-ratio:1;
  border:2px solid transparent;transition:border-color .25s,transform .25s;
}
.pdp-thumbs button:hover{transform:translateY(-2px)}
.pdp-thumbs button.active{border-color:var(--accent)}
.pdp-thumbs img{width:100%;height:100%;object-fit:cover}

.pdp-summary h1{font-size:clamp(30px,4vw,54px);margin-bottom:16px;overflow-wrap:break-word}
.pdp-lede{font-size:14px;line-height:1.85;color:var(--ink-2);margin-bottom:24px}
.pdp-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:24px}
.pdp-actions{display:flex;flex-wrap:wrap;gap:11px}
.pdp-actions .btn{flex:1 1 180px}
.pdp-assurance{
  margin-top:22px;display:grid;gap:9px;padding-top:20px;border-top:1px solid var(--line);
}
.pdp-assurance div{display:flex;gap:10px;align-items:flex-start;font-size:12px;color:var(--ink-2)}
.pdp-assurance i{color:var(--accent);font-size:11px;margin-top:4px}

/* full-width rows below the fold */
.pdp-options{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(22px,3vw,44px);
  background:var(--bg-2);border-radius:var(--radius-xl);
  padding:clamp(24px,3.4vw,42px);
}
.pdp-options h3{font-family:var(--f-display);font-size:clamp(20px,2.2vw,28px);
  font-weight:400;line-height:1.2;margin-bottom:16px}
.pdp-why{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);align-items:center}
.pdp-why h2{margin-bottom:16px}
.pdp-why p{font-size:13.5px;line-height:1.85;color:var(--ink-2)}
.pdp-why-media{border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow)}
.pdp-why-media img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* 9 ── GALLERY ───────────────────────────────────────────────────────────
   Masonry via CSS columns: reflows at any width, never overflows the gutter. */
.gallery{columns:4;column-gap:16px}
.gallery-item{
  break-inside:avoid;margin:0 0 16px;position:relative;overflow:hidden;
  border-radius:var(--radius-l);cursor:zoom-in;background:var(--bg-2);
  display:block;width:100%;
}
.gallery-item img{width:100%;height:auto;display:block;transition:transform .8s var(--ease-out)}
.gallery-item:hover img{transform:scale(1.05)}
.gallery-caption{
  position:absolute;inset:auto 0 0 0;padding:18px 16px 15px;color:#fdfaf5;
  background:linear-gradient(to top,rgba(20,17,13,.86),rgba(20,17,13,0));
  opacity:0;transform:translateY(10px);transition:all .45s var(--ease);
}
.gallery-item:hover .gallery-caption,.gallery-item:focus-visible .gallery-caption{opacity:1;transform:none}
.gallery-caption strong{display:block;font-family:var(--f-display);font-size:17px;font-weight:400}
.gallery-caption span{display:block;margin-top:3px;font-size:9.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.7)}

.gallery-feature{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);align-items:center}
.gallery-feature .feature-image{border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow)}
.gallery-feature .feature-image img{width:100%;aspect-ratio:4/3.1;object-fit:cover}
.feature-copy h2{margin-bottom:16px}
.feature-copy p{font-size:13.5px;line-height:1.85;color:var(--ink-2)}

.gallery-carousel{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);
  gap:16px;overflow-x:auto;padding-bottom:8px;
  scroll-snap-type:x mandatory;scrollbar-width:thin;
}
.gallery-carousel::-webkit-scrollbar{height:5px}
.gallery-carousel::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}
.mini-gallery{margin:0;border-radius:var(--radius-l);overflow:hidden;scroll-snap-align:start;
  background:var(--bg-2)}
.mini-gallery img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .7s var(--ease-out)}
.mini-gallery:hover img{transform:scale(1.05)}

.lightbox{
  position:fixed;inset:0;z-index:210;display:none;place-items:center;padding:24px;
  background:rgba(20,17,13,.92);opacity:0;transition:opacity .35s var(--ease);
}
.lightbox.open{display:grid;opacity:1}
.lightbox img{max-width:100%;max-height:88vh;border-radius:var(--radius-l);object-fit:contain}
.lightbox-close{
  position:absolute;right:20px;top:20px;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.13);color:#fff;font-size:17px;
  transition:transform .3s var(--ease),background .3s;
}
.lightbox-close:hover{transform:rotate(90deg);background:rgba(255,255,255,.24)}

/* 10 ── PORTFOLIO CASE STUDIES ───────────────────────────────────────────
   Rhythm: two upright cards, then one wide card, repeating. Adding items
   keeps the pattern instead of leaving a hole in the grid.                  */
.case-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.case-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xl);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s;
}
.case-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--line-2)}
.case-media{overflow:hidden;background:var(--bg-2)}
.case-media img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .9s var(--ease-out)}
.case-card:hover .case-media img{transform:scale(1.05)}
.case-copy{padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;flex:1;min-width:0}
.case-copy h3{font-family:var(--f-display);font-size:clamp(21px,2.3vw,30px);font-weight:400;
  line-height:1.15;margin-bottom:14px;overflow-wrap:break-word}
.case-meta{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.case-meta span{
  padding:5px 12px;border-radius:999px;border:1px solid var(--line);
  font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
}
.case-copy p{font-size:12.5px;line-height:1.78;color:var(--muted);margin-bottom:10px}
.case-copy p strong{color:var(--ink)}

/* every third card goes wide: image left, copy right */
.case-card.wide{grid-column:1/-1;flex-direction:row}
.case-card.wide .case-media{flex:0 0 46%;display:flex}
.case-card.wide .case-media img{aspect-ratio:auto;height:100%;min-height:330px}
.case-card.wide .case-copy{flex:1;justify-content:center;padding:clamp(24px,3.2vw,46px)}
.case-card.wide .case-copy h3{font-size:clamp(24px,2.8vw,38px)}

.portfolio-strip{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(22px,3.4vw,48px);align-items:center}

/* 11 ── FAQ ──────────────────────────────────────────────────────────────── */
.faq-layout{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(26px,4vw,64px);align-items:start}
.faq-intro{position:sticky;top:96px}
.faq-intro h2{margin-bottom:14px}
.faq-category{display:flex;flex-wrap:wrap;gap:7px;margin:20px 0 24px}
.faq-category span{
  padding:6px 13px;border-radius:999px;background:var(--bg-2);border:1px solid var(--line);
  font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
}
.faq-list{display:grid;gap:11px}
.faq-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);
  overflow:hidden;transition:border-color .3s,box-shadow .3s}
.faq-item.open{border-color:var(--accent);box-shadow:var(--shadow-s)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:18px 22px;text-align:left;font-size:14px;font-weight:600;line-height:1.45;
  transition:color .25s;
}
.faq-q:hover{color:var(--accent)}
.faq-q i{font-size:12px;color:var(--accent);transition:transform .4s var(--ease);flex-shrink:0}
.faq-item.open .faq-q i{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.faq-a-inner{padding:0 22px 20px;font-size:13px;line-height:1.85;color:var(--muted)}
.faq-bottom{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}

/* 12 ── PROCESS ──────────────────────────────────────────────────────────── */
.process-layout{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(26px,4vw,60px);align-items:start}
.process-left{position:sticky;top:96px;display:grid;gap:22px}
.process-visual{position:relative;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow)}
.process-visual img{width:100%;aspect-ratio:4/3.4;object-fit:cover}
.process-caption{
  position:absolute;inset:auto 0 0 0;padding:26px 24px;color:#fdfaf5;
  background:linear-gradient(to top,rgba(20,17,13,.92),rgba(20,17,13,0));
}
.process-caption h2{font-size:26px;color:#fdfaf5;margin-bottom:8px}
.process-caption p{font-size:12px;line-height:1.7;color:rgba(255,255,255,.74)}
.process-brief{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-l);padding:24px}
.process-brief h3{font-family:var(--f-display);font-size:22px;font-weight:400;margin-bottom:9px}
.process-brief p{font-size:12.5px;color:var(--muted);margin-bottom:16px}
.process-brief-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.process-brief-list span,.process-check{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-2)}
.process-brief-list i,.process-check i{color:var(--accent);font-size:10px;flex-shrink:0}
.process-stat-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.process-stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 14px;text-align:center}
.process-stat strong{display:block;font-family:var(--f-display);font-size:30px;color:var(--accent)}
.process-stat span{display:block;margin-top:4px;font-size:9.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

.process-timeline{position:relative;display:grid;gap:16px}
.process-item{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-l);padding:24px 26px 24px 74px;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.process-item:hover{transform:translateX(5px);box-shadow:var(--shadow)}
.process-node{
  position:absolute;left:24px;top:24px;width:34px;height:34px;border-radius:11px;
  display:grid;place-items:center;background:var(--accent);color:#fff;
  font-size:12px;font-weight:700;letter-spacing:.02em;
}
.process-item h3{font-family:var(--f-display);font-size:23px;font-weight:400;margin-bottom:9px}
.process-item p{font-size:12.5px;line-height:1.78;color:var(--muted);margin-bottom:14px}
.process-checks{display:flex;flex-wrap:wrap;gap:16px}

/* 13 ── TRADE ────────────────────────────────────────────────────────────── */
.trade-intro-grid{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,1fr);
  gap:clamp(26px,4vw,56px);align-items:center}
.trade-big-title{font-family:var(--f-display);font-size:clamp(28px,3.8vw,52px);
  font-weight:400;line-height:1.08;margin-bottom:16px}
.trade-lead{font-size:13.5px;line-height:1.85;color:var(--muted);max-width:52ch}
.trade-stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.trade-step-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.trade-step{
  display:flex;gap:16px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-l);padding:24px;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.trade-step:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.trade-step>span{
  flex-shrink:0;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:var(--accent);color:#fff;font-size:12px;font-weight:700;
}
.trade-step h3{font-family:var(--f-display);font-size:20px;font-weight:400;margin-bottom:8px}
.trade-step p{font-size:12px;line-height:1.72;color:var(--muted)}
.trade-visual-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,3.6vw,52px);align-items:center}
.trade-image{position:relative;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow)}
.trade-image img{width:100%;aspect-ratio:4/3.3;object-fit:cover}
.trade-image .card-label{background:linear-gradient(to top,rgba(20,17,13,.9),transparent)}
.trade-visual-copy{display:flex;flex-direction:column}
.trade-visual-copy h2{margin-bottom:14px}
.trade-visual-copy>p{font-size:13.5px;line-height:1.85;color:var(--muted);margin-bottom:20px}
.trade-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.trade-check-grid span{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink-2)}
.trade-check-grid i{color:var(--accent);font-size:10px;flex-shrink:0}
.trade-import-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,3.6vw,48px);align-items:center}
.trade-mini-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.trade-mini-list span{
  padding:7px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);
  font-size:11px;font-weight:500;color:var(--ink-2);
}

/* 14 ── CLIENTS ──────────────────────────────────────────────────────────── */
.client-hero-grid,.client-proof{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(22px,3.4vw,44px);align-items:stretch}
.client-story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);align-items:center}
.client-story-media{position:relative;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow)}
.client-story-media img{width:100%;aspect-ratio:4/3.4;object-fit:cover}
.client-story-badge{
  position:absolute;left:18px;bottom:18px;background:var(--surface);
  border-radius:var(--radius);padding:15px 18px;max-width:240px;box-shadow:var(--shadow)
}
.client-story-badge span{font-family:var(--f-display);font-size:23px;color:var(--accent);display:block}
.client-story-badge strong{display:block;font-size:13px;margin:3px 0 4px}
.client-story-badge small{font-size:11px;line-height:1.55;color:var(--muted)}
.client-story-copy h2{margin-bottom:14px}
.client-story-copy>p{font-size:13.5px;line-height:1.85;color:var(--muted);margin-bottom:20px}
.client-story-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-bottom:24px}
.client-story-points span{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink-2)}
.client-story-points i{color:var(--accent);font-size:11px;flex-shrink:0}
.client-profile-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.client-profile{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);padding:26px 24px;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.client-profile:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.client-profile .number{font-family:var(--f-display);font-size:34px;color:var(--line-2);
  line-height:1;margin-bottom:12px}
.client-profile h3{font-family:var(--f-display);font-size:22px;font-weight:400;margin-bottom:9px}
.client-profile p{font-size:12.5px;line-height:1.75;color:var(--muted)}
.client-metrics{display:grid;gap:11px;align-content:center}
.client-metric{
  display:flex;gap:16px;align-items:center;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;
}
.client-metric strong{font-family:var(--f-display);font-size:26px;color:var(--accent);flex-shrink:0}
.client-metric span{font-size:12.5px;color:var(--ink-2)}

/* 15 ── TESTIMONIALS ─────────────────────────────────────────────────────── */
.testimonial-intro{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:32px;align-items:end}
.testimonial-intro p{font-size:13px;line-height:1.8;color:var(--muted)}
.proof-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.proof-step{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);padding:26px 24px;
}
.proof-step .number{font-family:var(--f-display);font-size:32px;color:var(--line-2);line-height:1;margin-bottom:12px}
.proof-step h3{font-family:var(--f-display);font-size:21px;font-weight:400;margin-bottom:9px}
.proof-step p{font-size:12.5px;line-height:1.75;color:var(--muted)}

/* 16 ── CONTACT / FORMS ──────────────────────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(22px,3vw,40px);align-items:start}
.form-card{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-xl);padding:clamp(24px,3.4vw,42px)}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field label{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.field input,.field select,.field textarea{
  width:100%;padding:12px 15px;border-radius:12px;border:1px solid var(--line);
  background:var(--bg);font-size:13px;transition:border-color .25s,box-shadow .25s,background .25s;
}
.field textarea{min-height:118px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);background:var(--surface);
  box-shadow:0 0 0 3px rgba(192,118,78,.13);
}
.field input::placeholder,.field textarea::placeholder{color:#b3a795}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#c0503f}
.field-error{font-size:11px;color:#c0503f;display:none}
.field.invalid .field-error{display:block}
.hp-field{position:absolute!important;left:-9999px!important;opacity:0;height:0;width:0;overflow:hidden}
.form-status{font-size:11.5px;color:var(--muted);line-height:1.65}

.info-card{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-xl);padding:clamp(22px,3vw,34px);position:sticky;top:96px}
.info-row{display:flex;gap:13px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.info-row:last-of-type{border-bottom:0}
.info-row i{color:var(--accent);font-size:13px;margin-top:4px;width:16px;flex-shrink:0}
.info-row div{font-size:12.5px;line-height:1.65;min-width:0;overflow-wrap:break-word}
.info-row a:hover{color:var(--accent)}
.contact-side-guide{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.contact-side-guide h3{font-family:var(--f-display);font-size:19px;font-weight:400;margin-bottom:13px}
.contact-guide-grid{display:grid;gap:9px}
.contact-guide-grid span{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--ink-2)}
.contact-guide-grid i{color:var(--accent);font-size:11px;width:14px;flex-shrink:0}
.map-card{border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow);background:var(--bg-2)}
.map-card iframe{width:100%;height:clamp(280px,42vh,420px);border:0;display:block}

/* 17 ── HOME VISUAL CAROUSEL ─────────────────────────────────────────────── */
.visual-carousel{position:relative}
.visual-carousel-stage{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(212px,1fr);gap:16px;
  overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory;scrollbar-width:none;
}
.visual-carousel-stage::-webkit-scrollbar{display:none}
.visual-slide{position:relative;border-radius:var(--radius-l);overflow:hidden;
  scroll-snap-align:start;background:var(--bg-2)}
.visual-slide img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .8s var(--ease-out)}
.visual-slide:hover img{transform:scale(1.05)}
.visual-slide>div{
  position:absolute;inset:auto 0 0 0;padding:18px 16px 15px;color:#fdfaf5;
  background:linear-gradient(to top,rgba(20,17,13,.88),transparent);
}
.visual-slide small{font-size:9px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent-warm)}
.visual-slide strong{display:block;margin-top:4px;font-family:var(--f-display);
  font-size:18px;font-weight:400}
.visual-carousel-controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:18px}
.visual-carousel-controls button{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);display:grid;place-items:center;font-size:12px;color:var(--ink);
  transition:all .28s var(--ease);
}
.visual-carousel-controls button:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.visual-carousel-note{font-size:10px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}

/* 18 ── INDUSTRIES STORY ROWS ────────────────────────────────────────────── */
.story-list{display:grid;gap:clamp(36px,6vh,80px)}
.story-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,60px);align-items:center}
.story-row.reverse .story-media{order:2}
.story-media{border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow)}
.story-media img{width:100%;aspect-ratio:4/3.1;object-fit:cover}
.story-index{font-family:var(--f-display);font-size:44px;color:var(--line-2);line-height:1;margin-bottom:6px}
.story-copy h2{margin-bottom:14px}
.story-copy>p{font-size:13.5px;line-height:1.85;color:var(--muted);margin-bottom:18px}
.story-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.story-tags span{
  padding:6px 13px;border-radius:999px;background:var(--bg-2);border:1px solid var(--line);
  font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);
}

/* 19 ── MOTION UTILITIES ─────────────────────────────────────────────────── */
[data-reveal],.reveal,.media-reveal{will-change:transform,opacity}
[data-reveal],.reveal{opacity:0;transform:translateY(26px)}
[data-reveal].in,.reveal.in{opacity:1;transform:none;
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.media-reveal{overflow:hidden}
.media-reveal img{transform:scale(1.1);transition:transform 1.3s var(--ease-out)}
.media-reveal.in img{transform:scale(1)}

/* 20 ── RESPONSIVE ───────────────────────────────────────────────────────
   Every rule below exists to stop something being clipped, squeezed or
   pushed off-screen at a narrower width.                                    */

@media(max-width:1180px){
  .nav a{padding:9px 9px;font-size:12px}
  .gallery{columns:3}
  .bento{grid-template-columns:1fr 1fr}
  .bento>a:first-child{grid-column:1/-1;min-height:300px}
  .footer-top{grid-template-columns:1fr 1fr;gap:34px}
}

@media(max-width:1020px){
  /* nav collapses — the desktop list no longer fits without truncating */
  .nav{display:none}
  .nav-toggle{display:flex}
  .header-cta .btn{display:none}
  .header-cta .btn.btn-sm.always{display:inline-flex}

  .split,.gallery-feature,.trade-visual-split,.trade-import-grid,.trade-intro-grid,
  .client-hero-grid,.client-story-grid,.client-proof,.portfolio-strip,
  .pdp-why,.testimonial-intro{grid-template-columns:minmax(0,1fr)}

  .story-row{grid-template-columns:minmax(0,1fr)}
  .story-row.reverse .story-media{order:0}

  .process-layout,.faq-layout{grid-template-columns:minmax(0,1fr)}
  .process-left,.faq-intro,.info-card,.pdp-gallery{position:static}

  .contact-grid{grid-template-columns:minmax(0,1fr)}
  .catalogue-visual-handoff{grid-template-columns:minmax(0,1fr)}
  .client-profile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .location-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .faq-bottom{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* product detail: stack, image first */
  .pdp-top{grid-template-columns:minmax(0,1fr)}

  /* product modal: single column, image on top, CTAs stay pinned */
  .product-modal-box{grid-template-columns:minmax(0,1fr);max-height:94svh}
  .pm-media{max-height:38svh}
  .pm-media-main{min-height:170px}
}

@media(max-width:820px){
  .gallery{columns:2}
  .trust-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento{grid-template-columns:minmax(0,1fr)}
  .bento .card-image{min-height:260px}
  .footer-top{grid-template-columns:minmax(0,1fr);gap:30px}
  .footer-wordmark{font-size:clamp(46px,17vw,120px)}

  /* case studies: the wide card can no longer hold two columns */
  .case-grid{grid-template-columns:minmax(0,1fr)}
  .case-card.wide{flex-direction:column}
  .case-card.wide .case-media{flex:none}
  .case-card.wide .case-media img{aspect-ratio:16/10;min-height:0;height:auto}

  .process-item{padding:22px 22px 22px 64px}
  .process-node{left:18px;top:20px}
  .process-brief-list,.trade-check-grid,.client-story-points{grid-template-columns:minmax(0,1fr)}
}

@media(max-width:620px){
  body{font-size:14.5px}
  :root{--radius-xl:22px;--radius-l:18px}

  .hero{min-height:540px}
  .hero-content{padding-bottom:clamp(46px,13vh,86px)}
  .hero-content h1{font-size:clamp(36px,10vw,54px)}
  .hero-actions{width:100%}
  .hero-actions .btn{flex:1 1 100%}
  .hero-skip{bottom:auto;top:76px;right:14px}

  .image-page-hero{min-height:400px}
  .image-page-hero h1{font-size:clamp(29px,8.4vw,44px)}

  .section-head{flex-direction:column;align-items:flex-start;gap:14px}
  .section-head p{max-width:none}

  .grid-2,.grid-3,.grid-4,.location-grid,.blog-grid,.faq-bottom,
  .client-profile-grid,.trust-strip,.process-stat-row,.trade-stats-grid,
  .pdp-specs,.pm-specs,.pdp-options{grid-template-columns:minmax(0,1fr)}

  .gallery{columns:2;column-gap:11px}
  .gallery-item{margin-bottom:11px}
  /* captions are hover-only on desktop; on touch they must always show */
  .gallery-caption{opacity:1;transform:none;padding:14px 12px 11px}
  .gallery-caption strong{font-size:14px}
  .gallery-caption span{font-size:8.5px}

  .handoff-images{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}

  /* catalogue controls stack rather than squash the search box */
  .catalogue-controls{flex-direction:column;align-items:stretch}
  .catalogue-search-wrap{flex-direction:column;align-items:stretch;gap:11px}
  .category-tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .category-tabs::-webkit-scrollbar{display:none}
  .product-grid-wide{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .product-card-body{padding:13px 13px 15px}
  .product-card-body h3{font-size:15px}
  .product-card-body p{font-size:11px;-webkit-line-clamp:2}

  /* modal: full-bleed sheet, buttons always reachable */
  .product-modal{padding:0}
  .product-modal-box{
    width:100%;max-height:100svh;height:100svh;border-radius:0;
    grid-template-rows:auto 1fr auto;
  }
  .pm-media{max-height:32svh}
  .pm-thumbs{padding:8px}
  .pm-thumbs button{width:52px;height:44px}
  .pm-scroll{padding:20px}
  .pm-actions{padding:12px 16px;padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .pm-actions .btn{flex:1 1 100%}
  .pm-close{width:36px;height:36px;font-size:13px;right:10px;top:10px}

  .pdp-thumbs{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
  .pdp-actions .btn{flex:1 1 100%}

  .process-item{padding:20px 18px 20px 18px}
  .process-node{position:static;margin-bottom:12px}
  .process-checks{flex-direction:column;gap:8px}

  .quote-block{font-size:clamp(19px,5.6vw,28px);max-width:none}
  .dark-panel{padding:26px 22px}
  .dark-panel h1{font-size:clamp(24px,6.6vw,34px)}

  .contact-guide-grid{grid-template-columns:minmax(0,1fr)}
  .map-card iframe{height:280px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:11px}
  .req-float{width:48px;height:48px;font-size:18px;right:14px;bottom:14px}
  .toast{left:14px;right:14px;transform:translateY(20px);text-align:center}
  .toast.show{transform:translateY(0)}
}

@media(max-width:400px){
  .gallery{columns:1}
  .product-grid-wide{grid-template-columns:minmax(0,1fr)}
  .handoff-images{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brand-sub{display:none}
}

/* long unbroken strings (codes, emails) must never widen a grid track */
h1,h2,h3,p,td,li,dd,.pm-spec dd,.info-row div{overflow-wrap:anywhere}

/* 21 ── PRINT & REDUCED MOTION ───────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .hero-portal,.hero-mark,.hero-skip{display:none!important}
  .hero-scene img,.hero-scene video{transform:scale(1)!important}
  [data-reveal],.reveal{opacity:1!important;transform:none!important}
  .media-reveal img{transform:none!important}
}
@media print{
  .site-header,.site-footer,.req-float,.hero-portal,.product-modal,.lightbox{display:none!important}
  body{background:#fff}
}

/* ══════════════════════════════════════════════════════════════════════════
   22 ── REVISION 2
   Header background · footer wordmark motion · side-by-side mobile layouts
   · footer 2×2 on mobile · blog page · overflow guards
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 22.1 Header ─────────────────────────────────────────────────────────
   The bar now carries a background at all times, so nav text stays legible
   over hero photography instead of dissolving into it.                     */
.site-header.solid{box-shadow:0 2px 20px rgba(45,36,26,.07)}
.hero,.image-page-hero{z-index:0}
.hero-portal{z-index:6}
.mobile-nav{z-index:290}
.product-modal,.lightbox{z-index:400}
.req-float{z-index:280}

/* nav is shorter now — give the remaining links a little more room */
.nav a{padding:9px 13px;font-size:13px}

/* secondary links inside the mobile sheet, as compact pills */
.mobile-more{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.mobile-more a{
  display:inline-flex;padding:9px 15px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);
  font-family:var(--f-body);font-size:12px;font-weight:600;color:var(--ink-2);
}
.mobile-more a.active{border-color:var(--accent);color:var(--accent)}
.mobile-nav-label{
  font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-top:26px;
}

/* ── 22.2 Footer wordmark — letters fall in, alternating, with a stagger ── */
.footer-wordmark{
  display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-end;
  overflow:hidden;padding-top:16px;line-height:.86;
}
.footer-wordmark span{
  display:inline-block;
  transform:translateY(var(--from,115%)) rotate(var(--rot,0deg));
  opacity:0;
  transition:transform 1s var(--ease-out),opacity .7s ease;
  transition-delay:calc(var(--i,0) * 52ms);
}
.footer-wordmark.in span{transform:translateY(0) rotate(0deg);opacity:1}

/* ── 22.3 Side-by-side preserved on mobile ───────────────────────────────
   Requested: keep the desktop two-column reading order on phones rather
   than stacking image above text.                                          */
@media(max-width:1020px){
  .split,.gallery-feature,.trade-visual-split,.client-story-grid,
  .story-row,.pdp-why,.trade-import-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(14px,3vw,34px);
  }
  .story-row.reverse .story-media{order:2}
}

@media(max-width:820px){
  .split,.gallery-feature,.trade-visual-split,.client-story-grid,
  .story-row,.pdp-why,.trade-import-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:14px;align-items:center;
  }
  .story-row.reverse .story-media{order:2}
  .story-index{font-size:30px;margin-bottom:2px}
  .story-copy h2,.trade-visual-copy h2,.client-story-copy h2,
  .feature-copy h2,.pdp-why h2{font-size:clamp(18px,3.4vw,26px);line-height:1.14}
  .story-copy>p,.trade-visual-copy>p,.client-story-copy>p,
  .feature-copy p,.pdp-why p{font-size:11.5px;line-height:1.62}
  .story-tags span{padding:4px 9px;font-size:8.5px}
  .story-media img,.split-media img,.gallery-feature .feature-image img,
  .trade-image img,.client-story-media img{aspect-ratio:3/3.4}
}

@media(max-width:620px){
  .split,.gallery-feature,.trade-visual-split,.client-story-grid,
  .story-row,.pdp-why,.trade-import-grid{gap:12px}
  .story-copy>p,.client-story-copy>p{
    display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
  }
  .story-copy .btn,.trade-visual-copy .btn,.client-story-copy .btn{
    padding:10px 15px;font-size:11px;width:100%;
  }
  .story-tags{gap:5px;margin-bottom:12px}
  .client-story-badge{left:9px;bottom:9px;padding:10px 12px;max-width:150px}
  .client-story-badge span{font-size:17px}
  .client-story-badge strong{font-size:11px}
  .client-story-badge small{font-size:9.5px;line-height:1.4}
  .client-story-points,.trade-check-grid{grid-template-columns:minmax(0,1fr);gap:7px}
  .client-story-points span,.trade-check-grid span{font-size:10.5px}
  /* the import panel is a solid block — it needs full width to breathe */
  .trade-import-grid{grid-template-columns:minmax(0,1fr)}
}

/* ── 22.4 Footer: 2×2 on mobile instead of one long column ───────────────── */
@media(max-width:820px){
  .footer-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px}
  .footer-brand{grid-column:1/-1}
}
@media(max-width:620px){
  .footer-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}
  .footer-brand{grid-column:1/-1}
  .footer-brand p{max-width:none;font-size:11.5px}
  .footer-col h4{font-size:9px;margin-bottom:11px}
  .footer-col a,.footer-col p{font-size:11.5px;line-height:1.95}
  .footer-contact div{font-size:11.5px;margin-bottom:10px}
  .footer-contact .btn{width:100%;justify-content:center}
  .footer-inner{padding-top:38px}
}

/* ── 22.5 Blog page ──────────────────────────────────────────────────────── */
.blog-featured{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(20px,3.4vw,44px);align-items:center;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-xl);overflow:hidden;
}
.blog-featured-media{overflow:hidden;height:100%;min-height:300px}
.blog-featured-media img{width:100%;height:100%;object-fit:cover;
  transition:transform 1s var(--ease-out)}
.blog-featured:hover .blog-featured-media img{transform:scale(1.04)}
.blog-featured-copy{padding:clamp(22px,3vw,44px) clamp(22px,3vw,44px) clamp(22px,3vw,44px) 0}
.blog-featured-copy h2{font-size:clamp(24px,3.2vw,42px);line-height:1.1;margin:10px 0 14px}
.blog-featured-copy p{font-size:13px;line-height:1.8;color:var(--muted);margin-bottom:20px}
.blog-badge{
  display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;
  background:var(--accent);color:#fff;
  font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
}
.blog-topics{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.blog-topics span{
  padding:8px 16px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);font-size:11px;font-weight:600;color:var(--ink-2);
}
.blog-read{
  display:flex;gap:14px;align-items:center;font-size:10.5px;
  font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  margin-bottom:12px;
}
.blog-read i{color:var(--accent);font-size:10px;margin-right:5px}
.blog-list{display:grid;gap:12px}
.blog-row{
  display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:18px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);
  padding:14px;transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.blog-row:hover{transform:translateX(5px);box-shadow:var(--shadow)}
.blog-row img{width:88px;height:66px;object-fit:cover;border-radius:12px}
.blog-row h3{font-family:var(--f-display);font-size:19px;font-weight:400;margin-bottom:4px}
.blog-row p{font-size:11.5px;color:var(--muted);margin:0}
.blog-row i{color:var(--accent);font-size:12px}

@media(max-width:820px){
  .blog-featured{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0}
  .blog-featured-media{min-height:0}
  .blog-featured-media img{aspect-ratio:3/3.6}
  .blog-featured-copy{padding:16px 16px 16px 0}
  .blog-featured-copy h2{font-size:clamp(17px,3.3vw,26px)}
  .blog-featured-copy p{font-size:11px;line-height:1.6;margin-bottom:14px;
    display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .blog-featured-copy .btn{width:100%;padding:10px 14px;font-size:11px}
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .blog-card .inside{padding:14px}
  .blog-card h3{font-size:16px}
  .blog-card p{font-size:11px;line-height:1.6;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}
@media(max-width:620px){
  .blog-row{grid-template-columns:66px minmax(0,1fr) auto;gap:12px;padding:11px}
  .blog-row img{width:66px;height:52px}
  .blog-row h3{font-size:15px}
  .blog-row p{font-size:10.5px}
  .blog-topics span{padding:6px 12px;font-size:10px}
}

/* ── 22.6 Mobile spacing — tighten the vertical rhythm ───────────────────── */
@media(max-width:620px){
  .section{padding:38px var(--gut)}
  .section-tight{padding:26px var(--gut)}
  .section-head{margin-bottom:20px;gap:10px}
  .story-list{gap:26px}
  :root{--gut:16px}
  .pdp-top{gap:16px}
  .pdp-options{padding:20px;gap:22px}
  .pdp-assurance{margin-top:16px;padding-top:14px}
  .pdp-lede{font-size:12.5px;line-height:1.7;margin-bottom:16px}
  .pdp-summary h1{font-size:clamp(24px,6.6vw,34px);margin-bottom:12px}
  .quote-block{padding:22px 0}
  .catalogue-visual-handoff{margin-top:26px;padding:18px;gap:18px}
}

/* ── 22.7 Overflow guards ────────────────────────────────────────────────
   Nothing may push the document wider than the viewport at any size.       */
html,body{max-width:100%;overflow-x:hidden}
.showcase{max-width:100vw}
.section,.section-tight,.header-inner,.footer-inner,.footer-bottom{max-width:min(var(--wrap),100%)}
.catalogue-search{max-width:100%}
.catalogue-search input{max-width:100%}
.trust-strip,.grid,.bento,.product-grid-wide,.case-grid,.blog-grid,
.location-grid,.gallery,.faq-layout,.contact-grid,.process-layout{max-width:100%}
img,iframe,video{max-width:100%}

/* ── 22.8 Catalogue controls on mobile ───────────────────────────────────
   The wrap switches to column at 620px. In a column flex container
   flex-basis resolves against the cross axis, so `flex:1 1 240px` was
   reserving 240px of empty height under the search field.                  */
@media(max-width:620px){
  .catalogue-controls{gap:12px}
  .catalogue-search-wrap{flex:0 0 auto}
  .catalogue-search{flex:0 0 auto;width:100%}
  .product-count{order:-1}
}

/* ── 22.9 Story rows: align the media to the top of the copy ─────────────── */
@media(max-width:820px){
  .story-row,.split,.gallery-feature,.client-story-grid,.trade-visual-split{align-items:start}
  .story-media,.split-media,.gallery-feature .feature-image,
  .client-story-media,.trade-image{position:sticky;top:82px}
}
@media(max-width:620px){
  .story-media,.split-media,.gallery-feature .feature-image,
  .client-story-media,.trade-image{position:static}
  .link-arrow{font-size:11px}
}

/* ══════════════════════════════════════════════════════════════════════════
   23 ── REVISION 3
   Bento on mobile · 3D coverflow · mobile menu grid · gallery modal
   · product modal scroll clearance
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 23.1 Bento keeps the desktop pattern on every screen ───────────────── */
@media(max-width:820px){
  .bento{grid-template-columns:1.24fr 1fr .82fr;gap:10px}
  .bento .card-image{min-height:210px}
  .bento>a:first-child{grid-column:auto}
  .bento .grid{gap:10px}
  .bento .card-image[style]{min-height:100px!important}
  .card-label{padding:12px 11px}
  .card-label h3{font-size:15px;line-height:1.1}
  .card-label .eyebrow{font-size:7.5px;letter-spacing:.1em;margin-bottom:3px}
  .card-label small{font-size:9px;margin-top:3px}
}
@media(max-width:620px){
  .bento{gap:7px}
  .bento .card-image{min-height:172px}
  .bento .card-image[style]{min-height:82px!important}
  .bento .grid{gap:7px}
  .card-label{padding:9px 8px}
  .card-label h3{font-size:12px}
  .card-label .eyebrow{font-size:6.5px;margin-bottom:2px}
  .card-label small{display:none}
}
@media(max-width:400px){
  .bento .card-image{min-height:148px}
  .bento .card-image[style]{min-height:70px!important}
  .card-label h3{font-size:10.5px}
}

/* ── 23.2 Coverflow carousel ─────────────────────────────────────────────
   Cards fan back in 3D either side of the active one. Same behaviour at
   every width; only the card size changes.                                 */
.coverflow{position:relative;margin-top:8px}
.cf-viewport{
  position:relative;overflow:hidden;
  padding:14px 0 18px;
  perspective:1500px;perspective-origin:50% 50%;
}
.cf-stage{
  position:relative;height:clamp(300px,42vw,440px);
  transform-style:preserve-3d;
}
.cf-card{
  position:absolute;top:0;left:50%;
  width:clamp(190px,23vw,290px);height:100%;
  margin-left:calc(clamp(190px,23vw,290px) / -2);
  border-radius:var(--radius-l);overflow:hidden;
  background:var(--bg-2);cursor:pointer;
  box-shadow:0 18px 44px rgba(45,36,26,.2);
  transition:transform .72s var(--ease-out),opacity .55s ease,filter .55s ease;
  will-change:transform,opacity;
  transform-style:preserve-3d;backface-visibility:hidden;
}
.cf-card img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.cf-card>div{
  position:absolute;inset:auto 0 0 0;padding:18px 16px 15px;color:#fdfaf5;z-index:2;
  background:linear-gradient(to top,rgba(20,17,13,.9),rgba(20,17,13,0));
}
.cf-card small{
  font-size:8.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-warm);
}
.cf-card strong{
  display:block;margin-top:4px;font-family:var(--f-display);
  font-size:clamp(15px,1.6vw,21px);font-weight:400;line-height:1.15;
}
/* depth states, applied by JS */
.cf-card[data-pos="0"]{z-index:10}
.cf-card[data-pos="-1"],.cf-card[data-pos="1"]{z-index:8}
.cf-card[data-pos="-2"],.cf-card[data-pos="2"]{z-index:6}
.cf-card[data-pos="hide"]{opacity:0;pointer-events:none;z-index:1}
.cf-card:not([data-pos="0"]){filter:brightness(.82)}
.cf-card:not([data-pos="0"])>div{opacity:0}
.cf-card[data-pos="0"]>div{opacity:1;transition:opacity .5s ease .15s}

.cf-controls{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:6px}
.cf-controls>button{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  border:1px solid var(--line-2);background:var(--surface);
  display:grid;place-items:center;font-size:12px;color:var(--ink);
  transition:all .3s var(--ease);
}
.cf-controls>button:hover{background:var(--ink);color:var(--bg);border-color:var(--ink);transform:scale(1.06)}
.cf-dots{display:flex;gap:6px;align-items:center}
.cf-dots button{
  width:7px;height:7px;min-width:0;border-radius:50%;padding:0;border:0;
  background:var(--line-2);transition:all .3s var(--ease);
}
.cf-dots button.active{background:var(--accent);width:22px;border-radius:99px}

@media(max-width:620px){
  .cf-stage{height:clamp(268px,68vw,330px)}
  .cf-card{width:clamp(168px,52vw,220px);margin-left:calc(clamp(168px,52vw,220px) / -2)}
  .cf-controls>button{width:40px;height:40px}
}

/* ── 23.3 Mobile menu — two-column grid with an expandable More group ───── */
.mobile-nav{padding:0;display:flex;flex-direction:column}
.mobile-nav-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px var(--gut);border-bottom:1px solid var(--line);
  background:var(--surface);flex-shrink:0;
}
.mobile-nav-head .brand-name{font-size:19px}
.mobile-nav-close{
  width:40px;height:40px;border-radius:12px;flex-shrink:0;
  border:1px solid var(--line);background:var(--bg);
  display:grid;place-items:center;font-size:15px;color:var(--ink);
}
.mobile-nav-body{flex:1;overflow-y:auto;padding:6px var(--gut) 20px}
.mobile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px}
.mobile-grid a{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:16px 0;border-bottom:1px solid var(--line);
  font-family:var(--f-body);font-size:13.5px;font-weight:600;
  letter-spacing:.02em;text-transform:uppercase;color:var(--ink);
}
.mobile-grid a i{font-size:10px;color:var(--accent);opacity:.55}
.mobile-grid a.active{color:var(--accent)}
.mobile-grid a.full{grid-column:1/-1}

.mobile-more-toggle{
  grid-column:1/-1;width:100%;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 0;border-bottom:1px solid var(--line);
  font-family:var(--f-body);font-size:13.5px;font-weight:600;
  letter-spacing:.02em;text-transform:uppercase;color:var(--accent);
}
.mobile-more-toggle i{transition:transform .4s var(--ease)}
.mobile-more-toggle[aria-expanded="true"] i{transform:rotate(180deg)}
.mobile-more-panel{
  grid-column:1/-1;max-height:0;overflow:hidden;
  transition:max-height .45s var(--ease);
}
.mobile-more-panel .inner{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:22px;padding:4px 0 6px;
}
.mobile-more-panel a{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 0;border-bottom:1px solid var(--line);
  font-size:12.5px;font-weight:500;color:var(--ink-2);
}
.mobile-more-panel a.active{color:var(--accent)}
.mobile-more-panel i{font-size:9px;color:var(--accent);opacity:.5}
.mobile-nav-foot{margin-top:22px;display:grid;gap:10px}
.mobile-nav-foot .btn{padding:16px 24px;font-size:13px}

/* ── 23.4 Gallery modal — replaces the bare lightbox ─────────────────────
   Same two-panel treatment as the product modal, at every width.           */
.gallery-item{cursor:pointer}
.gal-modal{
  position:fixed;inset:0;z-index:400;display:none;
  padding:clamp(10px,3vh,34px) clamp(10px,3vw,34px);
  background:rgba(24,20,16,.66);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;transition:opacity .35s var(--ease);
}
.gal-modal.open{display:grid;place-items:center;opacity:1}
.gal-box{
  position:relative;width:min(1080px,100%);max-height:min(92svh,780px);
  background:var(--surface);border-radius:var(--radius-xl);overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  grid-template-rows:minmax(0,1fr);
  box-shadow:var(--shadow-l);
  transform:translateY(14px) scale(.985);transition:transform .45s var(--ease-out);
}
.gal-modal.open .gal-box{transform:none}
.gal-media{position:relative;background:var(--bg-2);overflow:hidden;min-height:0}
.gal-media img{width:100%;height:100%;object-fit:cover}
.gal-content{display:flex;flex-direction:column;min-height:0;min-width:0}
.gal-scroll{overflow-y:auto;padding:clamp(22px,3vw,40px);flex:1;min-height:0}
.gal-content h2{
  font-family:var(--f-display);font-size:clamp(26px,3.2vw,44px);font-weight:400;
  line-height:1.06;margin:8px 0 14px;overflow-wrap:break-word;
}
.gal-desc{font-size:13px;line-height:1.8;color:var(--ink-2);margin-bottom:22px}
.gal-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-bottom:22px}
.gal-actions{
  flex-shrink:0;padding:15px clamp(22px,3vw,40px);
  background:var(--surface);border-top:1px solid var(--line);
  box-shadow:0 -8px 22px rgba(45,36,26,.05);
}
.gal-actions .btn{width:100%}
.gal-close{
  position:absolute;right:14px;top:14px;z-index:6;
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);color:var(--ink);font-size:15px;box-shadow:var(--shadow-s);
  transition:transform .3s var(--ease),background .3s;
}
.gal-close:hover{transform:rotate(90deg);background:var(--bg-2)}
.gal-nav{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  display:flex;justify-content:space-between;padding:0 12px;pointer-events:none;z-index:5;
}
.gal-nav button{
  width:40px;height:40px;border-radius:50%;pointer-events:auto;
  background:rgba(253,251,247,.9);color:var(--ink);font-size:12px;
  display:grid;place-items:center;box-shadow:var(--shadow-s);
  transition:transform .28s var(--ease);
}
.gal-nav button:hover{transform:scale(1.09)}

@media(max-width:820px){
  .gal-box{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}
  .gal-media{max-height:40svh}
  .gal-nav{top:20svh}
}
@media(max-width:620px){
  .gal-modal{padding:0}
  .gal-box{width:100%;height:100svh;max-height:100svh;border-radius:0}
  .gal-media{max-height:36svh}
  .gal-scroll{padding:20px}
  .gal-specs{grid-template-columns:minmax(0,1fr)}
  .gal-actions{padding:12px 16px;padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .gal-close{width:36px;height:36px;font-size:13px;right:10px;top:10px}
}

/* ── 23.5 Modal scroll clearance ─────────────────────────────────────────
   The pinned action bar sat on top of the last block of copy. Pad the
   scroll area so every line clears it, and hint that more is below.        */
.pm-scroll,.gal-scroll{
  padding-bottom:26px;
  scroll-padding-bottom:26px;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.pm-content,.gal-content{position:relative}
.pm-content::after,.gal-content::after{
  content:'';position:absolute;left:0;right:0;height:44px;pointer-events:none;
  bottom:var(--fade-offset,74px);
  background:linear-gradient(to top,var(--surface),rgba(253,251,247,0));
  opacity:1;transition:opacity .3s ease;
}
.pm-content.at-end::after,.gal-content.at-end::after{opacity:0}
.pm-scroll::-webkit-scrollbar,.gal-scroll::-webkit-scrollbar{width:5px}
.pm-scroll::-webkit-scrollbar-track,.gal-scroll::-webkit-scrollbar-track{background:var(--bg-2)}
.pm-scroll::-webkit-scrollbar-thumb,.gal-scroll::-webkit-scrollbar-thumb{
  background:var(--line-2);border-radius:99px}
.pm-scroll,.gal-scroll{scrollbar-width:thin;scrollbar-color:var(--line-2) var(--bg-2)}
@media(max-width:620px){
  .pm-actions,.gal-actions{padding-top:12px}
  .pm-content::after,.gal-content::after{bottom:var(--fade-offset,120px)}
}

/* ══════════════════════════════════════════════════════════════════════════
   23 ── REVISION 3
   Bento kept on mobile · 3D coverflow · mobile menu grid · gallery lightbox
   with detail panel · visible scroll affordance in the product modal
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 23.1 Bento keeps its desktop pattern on every screen ────────────────── */
.bento{grid-template-columns:1.24fr 1fr .82fr}
.bento-stack{display:grid;gap:20px}
.bento-half{min-height:250px}

@media(max-width:1180px){
  .bento{grid-template-columns:1.24fr 1fr .82fr}
  .bento>a:first-child{grid-column:auto;min-height:340px}
}
@media(max-width:820px){
  .bento{grid-template-columns:1.24fr 1fr .82fr;gap:10px}
  .bento-stack{gap:10px}
  .bento .card-image{min-height:260px}
  .bento-half{min-height:125px}
  .card-label{padding:13px 11px}
  .card-label h3{font-size:clamp(12px,2.3vw,18px);line-height:1.1}
  .card-label .eyebrow{font-size:7.5px;letter-spacing:.1em;margin-bottom:3px}
  .card-label small{font-size:8.5px;margin-top:3px}
}
@media(max-width:620px){
  .bento{gap:7px}
  .bento-stack{gap:7px}
  .bento .card-image{min-height:200px;border-radius:14px}
  .bento-half{min-height:96px}
  .card-label{padding:9px 8px}
  .card-label h3{font-size:clamp(10px,2.9vw,14px)}
  .card-label .eyebrow{font-size:6.5px;margin-bottom:2px}
  .card-label small{display:none}
}

/* ── 23.2 Coverflow — a fanned deck, CSS transforms only ─────────────────── */
.coverflow{position:relative;padding:14px 0 6px}
.coverflow-stage{
  position:relative;height:clamp(320px,44vw,450px);
  perspective:1400px;transform-style:preserve-3d;
  touch-action:pan-y;cursor:grab;user-select:none;
}
.coverflow-stage:active{cursor:grabbing}
.cf-card{
  position:absolute;top:0;left:50%;
  width:clamp(180px,22vw,282px);height:88%;
  margin-left:calc(clamp(180px,22vw,282px) / -2);
  border-radius:var(--radius-l);overflow:hidden;
  background:var(--bg-2);box-shadow:0 20px 46px rgba(45,36,26,.2);
  transition:transform .68s var(--ease-out),opacity .55s var(--ease-out),
             filter .55s var(--ease-out),box-shadow .55s var(--ease-out);
  will-change:transform,opacity;
}
.cf-card img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.cf-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,17,13,.9) 2%,rgba(20,17,13,.05) 58%);
}
.cf-meta{position:absolute;inset:auto 0 0 0;z-index:2;padding:18px 16px 16px;color:#fdfaf5}
.cf-meta small{
  display:block;font-size:8.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent-warm);
}
.cf-meta strong{
  display:block;margin-top:5px;font-family:var(--f-display);
  font-size:clamp(15px,1.7vw,23px);font-weight:400;line-height:1.12;
}
.cf-card:not(.is-active){filter:saturate(.78) brightness(.93)}
.cf-card:not(.is-active) .cf-meta{opacity:.72}
.cf-card.is-active{box-shadow:0 30px 64px rgba(45,36,26,.3)}

.coverflow-nav{
  display:flex;align-items:center;justify-content:center;gap:14px;margin-top:20px;
}
.coverflow-nav button{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);display:grid;place-items:center;font-size:12px;color:var(--ink);
  transition:all .28s var(--ease);
}
.coverflow-nav button:hover{background:var(--ink);color:var(--bg);border-color:var(--ink);transform:translateY(-2px)}
.coverflow-dots{display:flex;gap:6px;align-items:center}
.coverflow-dots button{
  width:7px;height:7px;padding:0;border-radius:50%;border:0;
  background:var(--line-2);transition:all .3s var(--ease);
}
.coverflow-dots button.active{background:var(--accent);width:22px;border-radius:99px}

@media(max-width:620px){
  .coverflow-stage{height:clamp(290px,78vw,360px);perspective:900px}
  .cf-card{width:clamp(158px,52vw,210px);margin-left:calc(clamp(158px,52vw,210px) / -2)}
  .coverflow-nav{gap:10px;margin-top:16px}
  .coverflow-nav button{width:38px;height:38px}
}

/* ── 23.3 Mobile menu — two-column grid with an expandable More group ─────── */
.mobile-nav{padding:0;display:flex;flex-direction:column}
.mnav-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px var(--gut);border-bottom:1px solid var(--line);
  background:var(--surface);flex-shrink:0;
}
.mnav-body{padding:8px var(--gut) 26px;overflow-y:auto;flex:1}
.mnav-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px}
.mnav-grid a{
  display:block;padding:16px 0;border-bottom:1px solid var(--line);
  font-family:var(--f-body);font-size:13px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink);
}
.mnav-grid a.active{color:var(--accent)}
.mnav-more-toggle{
  grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:16px 0;border-bottom:1px solid var(--line);
  font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);
}
.mnav-more-toggle i{transition:transform .4s var(--ease)}
.mnav-more-toggle[aria-expanded="true"] i{transform:rotate(180deg)}
.mnav-more{
  grid-column:1/-1;max-height:0;overflow:hidden;
  transition:max-height .45s var(--ease);
}
.mnav-more-inner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px}
.mnav-more-inner a{
  display:block;padding:13px 0;border-bottom:1px solid var(--line);
  font-size:12px;font-weight:500;color:var(--ink-2);
}
.mnav-more-inner a.active{color:var(--accent)}
.mnav-foot{padding:22px var(--gut) calc(22px + env(safe-area-inset-bottom));
  display:grid;gap:10px;flex-shrink:0;border-top:1px solid var(--line)}

/* ── 23.4 Gallery lightbox — image plus a detail panel, always in frame ──── */
.lightbox{
  position:fixed;inset:0;z-index:400;display:none;
  padding:clamp(10px,3vh,34px) clamp(10px,3vw,34px);
  background:rgba(24,20,16,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;transition:opacity .35s var(--ease);
}
.lightbox.open{display:grid;place-items:center;opacity:1}
.lb-box{
  position:relative;width:min(1080px,100%);max-height:min(92svh,820px);
  background:var(--surface);border-radius:var(--radius-xl);overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  grid-template-rows:minmax(0,1fr);
  box-shadow:var(--shadow-l);
  transform:translateY(14px) scale(.985);transition:transform .45s var(--ease-out);
}
.lightbox.open .lb-box{transform:none}
.lb-media{position:relative;min-height:0;overflow:hidden;background:var(--bg-2)}
.lb-media img{width:100%;height:100%;object-fit:cover;max-height:none;border-radius:0}
.lb-content{display:flex;flex-direction:column;min-height:0;min-width:0}
.lb-scroll{overflow-y:auto;padding:clamp(22px,3vw,40px);flex:1;min-height:0}
.lb-content h2{
  font-family:var(--f-display);font-size:clamp(26px,3vw,42px);font-weight:400;
  line-height:1.08;margin:8px 0 14px;
}
.lb-desc{font-size:13px;line-height:1.8;color:var(--ink-2);margin-bottom:22px}
.lb-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.lb-actions{
  flex-shrink:0;padding:15px clamp(22px,3vw,40px);
  background:var(--surface);border-top:1px solid var(--line);
  box-shadow:0 -8px 22px rgba(45,36,26,.05);
}
.lb-actions .btn{width:100%}
.lightbox-close{
  position:absolute;right:14px;top:14px;z-index:6;
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);color:var(--ink);font-size:15px;box-shadow:var(--shadow-s);
  transition:transform .3s var(--ease),background .3s;
}
.lightbox-close:hover{transform:rotate(90deg);background:var(--bg-2)}

@media(max-width:1020px){
  .lb-box{grid-template-columns:minmax(0,1fr);max-height:94svh}
  .lb-media{max-height:36svh;min-height:150px}
}
@media(max-width:620px){
  .lightbox{padding:0}
  .lb-box{width:100%;height:100svh;max-height:100svh;border-radius:0;
    grid-template-rows:auto minmax(0,1fr)}
  .lb-media{max-height:32svh}
  .lb-scroll{padding:20px}
  .lb-specs{grid-template-columns:minmax(0,1fr)}
  .lb-actions{padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .lightbox-close{width:36px;height:36px;font-size:13px;right:10px;top:10px}
}

/* ── 23.5 Scroll affordance — make it obvious there is more below ─────────── */
.pm-content,.lb-content{position:relative}
.pm-scroll,.lb-scroll{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.pm-scroll::-webkit-scrollbar,.lb-scroll::-webkit-scrollbar{width:8px}
.pm-scroll::-webkit-scrollbar-track,.lb-scroll::-webkit-scrollbar-track{
  background:var(--bg-2);border-radius:99px;margin:8px 0}
.pm-scroll::-webkit-scrollbar-thumb,.lb-scroll::-webkit-scrollbar-thumb{
  background:var(--line-2);border-radius:99px}
.pm-scroll::-webkit-scrollbar-thumb:hover,.lb-scroll::-webkit-scrollbar-thumb:hover{
  background:var(--accent)}

/* fading edge above the pinned action bar, hidden once you reach the end */
.scroll-fade{
  position:absolute;left:0;right:8px;bottom:0;height:64px;pointer-events:none;z-index:3;
  background:linear-gradient(to top,var(--surface) 12%,rgba(253,251,247,0));
  opacity:1;transition:opacity .3s var(--ease);
}
.scroll-fade.hide{opacity:0}
.scroll-hint{
  position:absolute;left:50%;bottom:8px;transform:translateX(-50%);z-index:4;
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 14px;border-radius:999px;pointer-events:none;
  background:var(--ink);color:var(--bg);
  font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  opacity:1;transition:opacity .3s var(--ease);
  animation:hintBob 1.7s var(--ease) infinite;
}
.scroll-hint.hide{opacity:0}
@keyframes hintBob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,4px)}}
@media(prefers-reduced-motion:reduce){.scroll-hint{animation:none}}

/* ── 23.6 Mobile menu head — stop the tagline clipping under the rule ────── */
.mnav-head .brand{min-width:0;flex:1}
.mnav-head .brand-text{min-width:0}
.mnav-head .brand-name{font-size:17px;letter-spacing:.1em;white-space:nowrap}
.mnav-head .brand-sub{
  display:block;font-size:7.5px;letter-spacing:.15em;line-height:1.5;
  white-space:normal;margin-top:4px;
}
.mnav-head .nav-toggle{display:flex;flex-shrink:0}

/* ══════════════════════════════════════════════════════════════════════════
   24 ── REVISION 4 · TYPOGRAPHY
   A single fluid scale, optical tracking that tightens as size grows, and
   generous measure. Display face is Playfair; Italiana is reserved for the
   wordmark and italic accents only.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --step--2:clamp(10px,.62vw + 8.4px,11.5px);
  --step--1:clamp(12px,.42vw + 10.6px,13.5px);
  --step-0: clamp(14.5px,.34vw + 13.4px,16px);
  --step-1: clamp(17px,.62vw + 15px,20px);
  --step-2: clamp(21px,1.5vw + 16px,28px);
  --step-3: clamp(26px,2.6vw + 17px,40px);
  --step-4: clamp(31px,4.1vw + 17px,56px);
  --step-5: clamp(38px,6.4vw + 16px,80px);
  --measure:66ch;
}

body{
  font-size:var(--step-0);
  line-height:1.72;
  letter-spacing:-.003em;
  color:var(--ink-2);
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  text-rendering:optimizeLegibility;
}

/* Display — tracking tightens as the size grows, which is how a serif
   is meant to be set. Balanced wrapping stops orphan words in headlines. */
h1,h2,h3,h4,.serif,.trade-big-title,.quote-block,
.card-label h3,.blog-card h3,.case-copy h3,.location-card h3,
.client-profile h3,.process-item h3,.trade-step h3,.proof-step h3,
.blog-row h3,.pm-content h2,.lb-content h2,.pdp-options h3,
.handoff-copy h3,.process-brief h3,.blog-featured-copy h2{
  color:var(--ink);
  text-wrap:balance;
  font-synthesis-weight:none;
}
h1{font-size:var(--step-5);line-height:1.02;letter-spacing:-.028em}
h2{font-size:var(--step-3);line-height:1.08;letter-spacing:-.02em}
h3{font-size:var(--step-1);line-height:1.28;letter-spacing:-.012em;font-weight:600}
h4{font-size:var(--step--1);line-height:1.35}

p{max-width:var(--measure);text-wrap:pretty}
.muted{color:var(--muted)}

/* Eyebrow — the deeper accent so 10px bold still clears 4.5:1 */
.eyebrow{
  font-size:var(--step--2);font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--accent-deep);margin-bottom:14px;
  line-height:1.4;
}
.link-arrow{color:var(--accent-deep);font-size:var(--step--1);letter-spacing:.01em}

/* Lede paragraphs sit one step up from body and a touch looser */
.hero-content p,.image-page-hero p,.section-head p,.trade-lead,
.pdp-lede,.pm-desc,.lb-desc,.blog-featured-copy p{
  font-size:var(--step--1);line-height:1.8;
}
.section-head p{max-width:42ch}

/* Body copy inside cards — one consistent size, not eleven */
.feature p,.blog-card p,.case-copy p,.location-card p,.client-profile p,
.process-item p,.trade-step p,.proof-step p,.story-copy>p,
.client-story-copy>p,.trade-visual-copy>p,.feature-copy p,.pdp-why p,
.handoff-copy p,.faq-a-inner,.article-wrap p,.article-wrap li{
  font-size:var(--step--1);line-height:1.78;color:var(--muted);
}
.article-wrap p,.article-wrap li{font-size:var(--step-0);line-height:1.85;color:var(--ink-2)}
.article-wrap h2{font-size:var(--step-2);margin:44px 0 16px;letter-spacing:-.018em}
.article-wrap h3{font-size:var(--step-1);margin:30px 0 10px}
.article-wrap>p:first-of-type{font-size:var(--step-1);line-height:1.72;color:var(--ink-2)}

/* Small caps labels share one definition */
.product-code,.pm-code,.blog-meta,.case-meta span,.story-tags span,
.trust-strip span,.process-stat span,.client-metric span,
.pm-spec dt,.footer-col h4,.visual-carousel-note,.cf-meta small{
  font-feature-settings:"kern" 1;
}
.pm-spec dt{font-size:var(--step--2);letter-spacing:.13em}
.pm-spec dd{font-size:var(--step--1);line-height:1.55;color:var(--ink)}

/* Buttons + nav */
.btn{font-size:var(--step--1);letter-spacing:.015em;font-weight:600}
.nav a{font-size:var(--step--1);letter-spacing:-.002em}
.field label{font-size:var(--step--2);letter-spacing:.11em}
.field input,.field select,.field textarea{font-size:var(--step--1)}

/* Display numerals — tabular where they are compared, lining everywhere */
.trust-strip strong,.process-stat strong,.client-metric strong,
.story-index,.client-profile .number,.proof-step .number{
  font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.02em;
}

/* Quote block */
.quote-block{
  font-size:var(--step-3);line-height:1.24;letter-spacing:-.02em;
  font-style:italic;max-width:20ch;
}
.quote-block[data-wide]{max-width:32ch}

/* Hero headline sits at the top of the scale with the tightest tracking */
.hero-content h1{font-size:var(--step-5);letter-spacing:-.032em;line-height:.98}
.image-page-hero h1{font-size:var(--step-4);letter-spacing:-.028em;line-height:1.03}
.dark-panel h1{font-size:var(--step-3);letter-spacing:-.022em}

/* Italiana is a display face only — never for running text */
em,.brand-name,.footer-wordmark{font-family:var(--f-accent);font-style:normal}
em{letter-spacing:.005em}

@media(max-width:620px){
  :root{--measure:none}
  body{line-height:1.68}
  .eyebrow{margin-bottom:10px;letter-spacing:.15em}
  h2{letter-spacing:-.016em}
}

/* ══════════════════════════════════════════════════════════════════════════
   25 ── REVISION 5 · IMAGE REVEAL, HOVER, DESKTOP "MORE" MENU
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 25.1 Expand reveal — the frame opens from the centre on all four sides.
   Applied to every image on the site except the index hero, which has its
   own portal intro and must not be double-animated.                        */
.x-reveal{overflow:hidden}
.x-reveal>img,.x-reveal img.x-img{
  clip-path:inset(44% 44% 44% 44% round 20px);
  transform:scale(1.18);
  will-change:clip-path,transform;
  transition:
    clip-path 1.15s cubic-bezier(.16,1,.3,1),
    transform 1.35s cubic-bezier(.16,1,.3,1);
}
.x-reveal.in>img,.x-reveal.in img.x-img{
  clip-path:inset(0% 0% 0% 0% round 0px);
  transform:scale(1);
}
/* once revealed, hand control back so hover transforms stay snappy */
.x-reveal.done>img,.x-reveal.done img.x-img{
  will-change:auto;
  transition:transform .85s cubic-bezier(.16,1,.3,1),filter .5s ease;
}
.hero .x-reveal>img{clip-path:none;transform:none;transition:none}

/* ── 25.2 Hover ──────────────────────────────────────────────────────────── */
@media(hover:hover){
  .card-image:hover img,.blog-card:hover>img,.case-card:hover .case-media img,
  .story-row:hover .story-media img,.split:hover .split-media img{transform:scale(1.055)}

  .gallery-item{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
  .gallery-item:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
  .gallery-item:hover img{transform:scale(1.07)}

  .mini-gallery{transition:transform .5s var(--ease)}
  .mini-gallery:hover{transform:translateY(-4px)}

  .location-card,.client-profile,.proof-step{position:relative;overflow:hidden}
  .location-card::before,.client-profile::before,.proof-step::before,
  .feature::before{
    content:'';position:absolute;inset:auto 0 0 0;height:2px;
    background:linear-gradient(90deg,var(--accent),var(--accent-light));
    transform:scaleX(0);transform-origin:left;
    transition:transform .55s var(--ease-out);
  }
  .location-card:hover::before,.client-profile:hover::before,
  .proof-step:hover::before,.feature:hover::before{transform:scaleX(1)}
  .feature{position:relative;overflow:hidden}

  .feature:hover .feature-icon{
    background:linear-gradient(140deg,var(--accent),var(--accent-light));
    color:#fff;border-color:transparent;transform:translateY(-2px);
  }
  .feature-icon{transition:background .4s var(--ease),color .4s,border-color .4s,transform .4s var(--ease)}

  .product-card:hover .product-tag{background:var(--accent)}
  .product-tag{transition:background .35s var(--ease)}

  .blog-row:hover i{transform:translateX(4px)}
  .blog-row i{transition:transform .35s var(--ease)}

  .footer-col a{position:relative}
  .info-row a,.footer-bottom a{
    background-image:linear-gradient(var(--accent-light),var(--accent-light));
    background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
    transition:background-size .4s var(--ease),color .3s;
  }
  .info-row a:hover,.footer-bottom a:hover{background-size:100% 1px}

  .pm-thumbs button:hover,.pdp-thumbs button:hover{border-color:var(--accent-light)}
  .trade-step:hover>span{background:var(--accent-hover);transform:scale(1.08)}
  .trade-step>span{transition:background .35s,transform .35s var(--ease)}
  .process-item:hover .process-node{background:var(--accent-hover);transform:scale(1.08)}
  .process-node{transition:background .35s,transform .35s var(--ease)}
}

/* ── 25.3 Desktop "More" dropdown ───────────────────────────────────────── */
.nav-more{position:relative}
.nav-more>button{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 13px;border-radius:999px;
  font-size:var(--step--1);font-weight:500;color:var(--ink-2);
  transition:color .25s,background .25s;
}
.nav-more>button:hover,.nav-more[data-open="true"]>button{color:var(--ink);background:rgba(0,0,0,.045)}
.nav-more>button i{font-size:9px;transition:transform .35s var(--ease)}
.nav-more[data-open="true"]>button i{transform:rotate(180deg)}
.nav-more.has-active>button{color:var(--accent-deep);font-weight:600}

.nav-more-panel{
  position:absolute;top:calc(100% + 10px);right:0;z-index:20;
  min-width:400px;padding:14px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-l);box-shadow:var(--shadow-l);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .3s var(--ease),transform .35s var(--ease-out),visibility .35s;
}
.nav-more[data-open="true"] .nav-more-panel{opacity:1;visibility:visible;transform:none}
.nav-more-panel a{
  display:flex;flex-direction:column;gap:2px;
  padding:11px 13px;border-radius:12px;
  font-size:var(--step--1);font-weight:600;color:var(--ink);
  transition:background .25s,color .25s;
}
.nav-more-panel a span{
  font-size:var(--step--2);font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--muted);line-height:1.4;
}
.nav-more-panel a:hover{background:var(--bg-2)}
.nav-more-panel a.active{color:var(--accent-deep);background:var(--accent-tint)}
.nav-more-panel a.active span{color:var(--accent-deep);opacity:.75}

@media(max-width:1020px){.nav-more{display:none}}

@media(prefers-reduced-motion:reduce){
  .x-reveal>img,.x-reveal img.x-img{clip-path:none!important;transform:none!important}
}

/* ── 25.4 Card headings belong to the display face ───────────────────────── */
.feature h3,.location-card h3,.client-profile h3,.proof-step h3,
.blog-card h3,.case-copy h3,.process-item h3,.trade-step h3,
.blog-row h3,.handoff-copy h3,.process-brief h3,.card-label h3,
.client-story-badge strong,.gallery-caption strong{
  font-family:var(--f-display);font-weight:400;letter-spacing:-.012em;
}
.feature h3{font-size:var(--step-1);line-height:1.22;margin-bottom:10px}
.location-card h3,.client-profile h3,.proof-step h3{font-size:var(--step-2);line-height:1.14}
.blog-card h3,.case-copy h3{line-height:1.14}
.process-item h3,.trade-step h3{font-size:var(--step-2);line-height:1.16}
.client-story-badge strong{font-size:var(--step--1);letter-spacing:0}
.gallery-caption strong{font-size:var(--step-1)}

/* keep genuine UI labels in the sans face */
.pm-spec dt,.field label,.footer-col h4,.blog-meta,.eyebrow,
.product-code,.pm-code,.mnav-grid a{font-family:var(--f-body)}

/* ── 25.5 Line clamping ──────────────────────────────────────────────────
   `-webkit-line-clamp` is unreliable on an element that is also a flex item
   with `flex:1` — the box grows and the clamp is ignored. Take the growth
   off the paragraph and push the CTA down with auto margin instead.        */
.product-card-body p,.blog-card p,.case-copy p{flex:none}
.product-card-body .link-arrow,.blog-card .link-arrow{margin-top:auto;padding-top:12px}
.product-card-body p{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;max-height:calc(1.65em * 2);
}
.blog-card p{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  overflow:hidden;max-height:calc(1.78em * 3);
}
.product-card,.blog-card,.feature,.location-card,.client-profile,
.proof-step,.case-card{height:100%}
.product-grid-wide,.blog-grid,.grid-2,.grid-3,.grid-4,
.location-grid,.client-profile-grid,.proof-grid{align-items:stretch}

/* ══════════════════════════════════════════════════════════════════════════
   26 ── REVISION 6 · MOBILE REPAIR
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 26.1 Mobile nav font leak ───────────────────────────────────────────
   `.mobile-nav a` (from an earlier revision) was still matching the CTA
   links inside the menu footer, forcing them to Playfair 24px inside a box
   padded for 12px text — so the cap-heights were clipped by the pill.     */
.mobile-nav a{
  display:block;padding:0;border-bottom:0;
  font-family:var(--f-body);font-size:inherit;color:inherit;
}
.mnav-grid a{
  display:block;padding:16px 0;border-bottom:1px solid var(--line);
  font-family:var(--f-body);font-size:13px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink);
}
.mnav-grid a.active,.mnav-more-inner a.active{color:var(--accent-deep)}
.mnav-more-inner a{
  display:block;padding:13px 0;border-bottom:1px solid var(--line);
  font-size:12px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--ink-2);
}
.mobile-nav .btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-body);font-size:var(--step--1);font-weight:600;
  text-transform:none;letter-spacing:.015em;padding:14px 22px;
}

/* ── 26.2 Buttons can never overflow their column ────────────────────────── */
.btn{
  white-space:normal;              /* wrap rather than push past the edge */
  line-height:1.25;
  min-height:46px;
  max-width:100%;
  text-align:center;
  padding-block:13px;
}
.btn i{flex-shrink:0}

/* ── 26.3 Stack on phones ────────────────────────────────────────────────
   Two columns still work on tablets. Below 620px the text column drops to
   ~180px, which is where copy started clipping and buttons started
   breaking out of the viewport — so these stack again.                     */
@media(max-width:620px){
  .split,.gallery-feature,.trade-visual-split,.client-story-grid,
  .story-row,.pdp-why,.trade-import-grid,.blog-featured,
  .client-hero-grid,.client-proof,.portfolio-strip,.testimonial-intro{
    grid-template-columns:minmax(0,1fr);
    gap:20px;
    align-items:stretch;
  }
  .story-row.reverse .story-media{order:0}

  /* type returns to a readable size now the column is full width */
  .story-copy h2,.trade-visual-copy h2,.client-story-copy h2,
  .feature-copy h2,.pdp-why h2{font-size:var(--step-2);line-height:1.12}
  .story-copy>p,.trade-visual-copy>p,.client-story-copy>p,
  .feature-copy p,.pdp-why p{
    font-size:var(--step--1);line-height:1.75;
    display:block;-webkit-line-clamp:none;overflow:visible;
  }
  .story-copy .btn,.trade-visual-copy .btn,.client-story-copy .btn{
    width:100%;padding:13px 20px;font-size:var(--step--1);
  }
  .story-tags{gap:7px;margin-bottom:16px}
  .story-tags span{padding:5px 11px;font-size:9.5px}
  .story-index{font-size:34px}
  .story-media img,.split-media img,.gallery-feature .feature-image img,
  .trade-image img,.client-story-media img{aspect-ratio:16/11}
  .client-story-badge{left:12px;bottom:12px;max-width:190px;padding:12px 14px}
  .client-story-points,.trade-check-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .client-story-points span,.trade-check-grid span{font-size:11.5px}

  /* blog featured card stacks and gets its padding back */
  .blog-featured-media img{aspect-ratio:16/10}
  .blog-featured-copy{padding:20px}
  .blog-featured-copy h2{font-size:var(--step-2)}
  .blog-featured-copy p{
    font-size:var(--step--1);line-height:1.75;
    display:block;-webkit-line-clamp:none;overflow:visible;margin-bottom:18px;
  }
  .blog-read{flex-wrap:wrap;gap:10px}
}

/* ── 26.4 Bento becomes a swipeable carousel on phones ───────────────────── */
@media(max-width:620px){
  .bento{
    display:grid;grid-auto-flow:column;
    grid-template-columns:none;
    grid-auto-columns:82%;
    gap:12px;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:6px;
    scroll-padding-inline:0;
  }
  .bento::-webkit-scrollbar{display:none}
  .bento>*{scroll-snap-align:start}
  .bento-stack{
    display:grid;grid-auto-flow:column;grid-auto-columns:100%;
    gap:0;overflow:visible;
  }
  .bento-stack>a{display:none}
  .bento-stack>a:first-child{display:block}
  .bento .card-image,.bento-half{min-height:300px;border-radius:18px}
  .card-label{padding:18px 16px}
  .card-label h3{font-size:var(--step-2)}
  .card-label .eyebrow{font-size:9px;letter-spacing:.14em;margin-bottom:5px}
  .card-label small{display:block;font-size:11px;margin-top:5px}
  .bento-hint{
    display:flex;align-items:center;gap:8px;justify-content:center;
    margin-top:14px;font-size:9.5px;font-weight:700;letter-spacing:.16em;
    text-transform:uppercase;color:var(--muted);
  }
  .bento-hint i{color:var(--accent-deep);font-size:10px}
}
.bento-hint{display:none}

/* ── 26.5 Coverflow: drop the dots, let the image carry the section ──────── */
.coverflow-dots{display:none}
.coverflow-nav{gap:18px}
.cf-card{width:clamp(200px,25vw,320px);margin-left:calc(clamp(200px,25vw,320px) / -2)}
.coverflow-stage{height:clamp(340px,46vw,480px)}
@media(max-width:620px){
  .cf-card{width:min(74vw,300px);margin-left:calc(min(74vw,300px) / -2)}
  .coverflow-stage{height:clamp(340px,92vw,420px)}
  .cf-meta{padding:16px 14px 14px}
  .cf-meta strong{font-size:var(--step-1)}
}

/* ── 26.6 Padding and measure guards ────────────────────────────────────── */
@media(max-width:620px){
  :root{--gut:18px}
  .section,.section-tight{padding-inline:var(--gut)}
  .dark-panel{padding:26px 20px}
  .dark-panel p{font-size:var(--step--1)}
  .feature,.location-card,.client-profile,.proof-step{padding:20px 18px}
  .form-card,.info-card{padding:20px 18px}
  .notice{padding:14px 16px}
  .article-wrap{padding-inline:0}
  h1,h2,h3,p,li,dd,span,strong,small,a{overflow-wrap:anywhere;word-break:normal}
  .btn{overflow-wrap:normal}
}

/* ── 26.7 Images settle into their frame ─────────────────────────────────
   The frame opens from the centre and the picture eases from 97% up to its
   full size, so it reads as the image completing itself rather than sliding
   in. Above-the-fold images run on load with a short stagger.             */
.x-reveal>img,.x-reveal img.x-img{
  clip-path:inset(43% 43% 43% 43% round 22px);
  transform:scale(.97);
  transition:
    clip-path 1.05s cubic-bezier(.16,1,.3,1) var(--d,0ms),
    transform 1.25s cubic-bezier(.16,1,.3,1) var(--d,0ms);
}
.x-reveal.in>img,.x-reveal.in img.x-img{
  clip-path:inset(0% 0% 0% 0% round 0px);
  transform:scale(1);
}

/* ── 26.8 The brand lockup inside the menu is a flex row, not a block ────── */
.mobile-nav .brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.mobile-nav .brand-text{display:flex;flex-direction:column;line-height:1;min-width:0}
.mobile-nav .brand-mark{display:grid;place-items:center;flex-shrink:0}
.mnav-head .brand-name{
  display:block;font-family:var(--f-accent);font-size:17px;
  letter-spacing:.1em;line-height:1;white-space:nowrap;
}
.mnav-head .brand-sub{
  display:block;font-family:var(--f-body);font-size:7.5px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
  line-height:1.4;margin-top:5px;
}

/* ══════════════════════════════════════════════════════════════════════════
   27 ── BUILD 7 — about teaser · certifications · enquiry list · consent
   ══════════════════════════════════════════════════════════════════════════ */

/* 27.1 Home "About Us" teaser ─────────────────────────────────────────────── */
.about-teaser{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,4vw,56px);align-items:start;
}
.about-teaser h2{font-family:var(--f-display);font-size:clamp(22px,2.8vw,34px)}
.about-teaser .link-arrow{margin-top:14px}
@media(max-width:760px){ .about-teaser{grid-template-columns:minmax(0,1fr);gap:14px} }

/* 27.2 Certifications strip ───────────────────────────────────────────────── */
.cert-grid{
  display:grid;gap:14px;margin-top:8px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.cert-item{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 18px;
}
.cert-item i{font-size:20px;color:var(--accent);margin-bottom:10px;display:block}
.cert-item h3{font-family:var(--f-body);font-weight:700;font-size:13.5px;letter-spacing:.01em;margin-bottom:6px}
.cert-item p{font-size:11.5px;line-height:1.6;color:var(--muted)}

/* 27.3 Product card + add-to-enquiry button ──────────────────────────────── */
.product-card{position:relative}
.product-card-open{
  display:flex;flex-direction:column;flex:1;color:inherit;text-align:left;
  border-radius:inherit;overflow:hidden;
}
.product-add{
  position:absolute;top:10px;right:10px;z-index:3;
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 12px;border-radius:999px;
  background:rgba(29,26,22,.86);color:#fdfaf5;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-size:10.5px;font-weight:600;letter-spacing:.04em;
  transition:background .25s var(--ease),opacity .25s,transform .25s var(--ease);
}
.product-add i{font-size:10px}
.product-add span{white-space:nowrap}
.product-add:hover{background:var(--accent)}
.product-add.added{background:var(--accent)}
/* on hover-capable screens the button reveals on card hover to keep the grid calm */
@media(hover:hover){
  .product-add{opacity:0;transform:translateY(-4px)}
  .product-card:hover .product-add,
  .product-card:focus-within .product-add,
  .product-add.added{opacity:1;transform:none}
}
/* modal / product-page actions use it as a normal .btn — reset the float bits */
.pm-actions .product-add,.pdp-actions .product-add{
  position:static;opacity:1;transform:none;backdrop-filter:none;-webkit-backdrop-filter:none;
}

/* 27.4 Enquiry list on the contact form ─────────────────────────────────── */
.req-selected{
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 16px 8px;
}
.req-selected-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  margin-bottom:10px;
}
.req-selected-head button{
  font-size:10.5px;font-weight:600;letter-spacing:.04em;color:var(--accent-deep);
  text-transform:none;
}
.req-selected ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.req-selected li{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:9px 11px;font-size:12px;
}
.req-selected li strong{font-weight:700;color:var(--accent-deep);margin-right:4px}
.req-selected li button{
  flex-shrink:0;width:24px;height:24px;border-radius:7px;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--muted);font-size:11px;
}
.req-selected li button:hover{border-color:var(--accent);color:var(--accent)}

/* 27.5 Consent checkbox ─────────────────────────────────────────────────── */
.field-consent .consent{
  display:flex;align-items:flex-start;gap:10px;cursor:pointer;
  font-size:12px;line-height:1.6;color:var(--ink-2);
}
.field-consent .consent input{
  width:17px;height:17px;flex-shrink:0;margin-top:1px;accent-color:var(--accent);
}
.field-consent .consent a{color:var(--accent-deep);text-decoration:underline}
.field-consent .field-error{display:none;margin-top:7px}
.field-consent.invalid .field-error{display:block}

/* ── 27.6 Fixes from build-7 review ──────────────────────────────────────── */

/* bento / image-card headings must stay light — a later global rule was
   forcing them to --ink, which made them vanish against the photo */
.card-label h3,.card-image .card-label h3{color:#fdfaf5}
.card-label small{color:rgba(255,255,255,.78)}

/* section-head supporting text: darker, and anchored with an accent rule so
   it reads as a deliberate standfirst rather than stray filler copy */
.section-head p{
  color:var(--ink-2);font-size:13.5px;line-height:1.8;
  border-left:2px solid var(--accent);padding-left:16px;
}
.section-head p a{color:var(--accent-deep);font-weight:600;text-decoration:underline}
@media(max-width:820px){ .section-head p{padding-left:13px} }

/* hero video fades in only once it can actually play; until then (or if it
   never loads) the poster image behind it stays visible */
.hero-scene video{opacity:0;transition:opacity .6s ease}
.hero-scene video.ready{opacity:1}

/* homepage coverflow carries real catalogue products — every card reveals
   its detail on hover/focus, and the active or hovered card links to the PDP */
[data-home-coverflow] .cf-card{cursor:pointer}
[data-home-coverflow] .cf-card::after{
  background:linear-gradient(to top,rgba(20,17,13,.94) 4%,rgba(20,17,13,.15) 55%,rgba(20,17,13,.02) 100%);
}
[data-home-coverflow] .cf-card:not(.is-active) .cf-meta{opacity:.9}
[data-home-coverflow] .cf-card:hover:not(.is-active){filter:none}
[data-home-coverflow] .cf-card:hover .cf-meta{opacity:1}
.cf-meta strong{text-shadow:0 1px 12px rgba(0,0,0,.45)}
.cf-open{
  display:none;align-items:center;gap:7px;margin-top:9px;
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#f4e3d2;
}
.cf-card.is-active .cf-open,
[data-home-coverflow] .cf-card:hover .cf-open{display:inline-flex}

/* ── 27.7 misc build-9/10 ──────────────────────────────────────────────── */
.field-hint{display:block;margin-top:6px;font-size:10.5px;line-height:1.5;color:var(--muted)}
/* about teaser: give the two columns room and align the supporting column */
.about-teaser .check-list{margin-bottom:6px}

/* ══════════════════════════════════════════════════════════════════════════
   28 ── BUILD 11 — logo · header socials · founder intro · banner · loaders
   ══════════════════════════════════════════════════════════════════════════ */

/* 28.1 Logo in the header: dedicated emblem crop (logo-emblem.webp, 204x180) */
.brand-emblem{
  width:auto;height:46px;aspect-ratio:268/240;border-radius:0;overflow:visible;
  background:transparent;flex-shrink:0;display:block;
}
.brand-emblem img{position:static;width:100%;height:100%;max-width:none;object-fit:contain;display:block}
.site-header .brand{gap:12px}
.site-header .brand-name,.mnav-head .brand-name{font-size:17px}
.site-header.solid .brand-emblem{height:40px}
.brand-emblem{transition:height .3s var(--ease)}
@media(max-width:620px){ .brand-emblem{height:38px} .site-header.solid .brand-emblem{height:34px} }

/* header is pinned at all times — never slides away on scroll */
.site-header{position:fixed;top:0;transform:none!important}

/* 28.2 Socials in the header (desktop) and the mobile menu ───────────────── */
.header-cta{gap:14px}
.header-social{display:flex;align-items:center;gap:6px}
.header-social a{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--ink-2);font-size:13px;
  transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease);
}
.header-social a:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-2px)}
@media(max-width:1180px){ .header-social{display:none} }
.mnav-social{display:flex;gap:10px;justify-content:center;margin-top:6px}
.mnav-social a{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--ink);font-size:15px;
}

/* 28.3 Footer logo card (artwork is cream, so it sits on a cream card) ───── */
.footer-logo{
  width:170px;aspect-ratio:auto;background:#fbf8f1;border-radius:18px;padding:10px;margin-bottom:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.footer-logo img{width:100%;height:auto;display:block}

/* hero intro mark: logo artwork instead of plain text */
.hero-mark-logo{width:clamp(190px,26vw,320px);height:auto;aspect-ratio:640/595;margin:0 auto 12px;border-radius:24px;background:#fbf8f1;padding:14px}

/* 28.4 Founder intro (home) and founder story (about) ───────────────────── */
.founder-grid,.founder-story{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(28px,5vw,72px);align-items:center;
}
.founder-photo{margin:0;position:relative;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow)}
.founder-photo img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%}
.founder-photo figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:44px 22px 20px;
  background:linear-gradient(to top,rgba(20,17,13,.85),rgba(20,17,13,0));color:#fdfaf5;
  display:grid;gap:2px;
}
.founder-photo figcaption strong{font-family:var(--f-display);font-weight:400;font-size:22px}
.founder-photo figcaption span{font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.8)}
.founder-copy h2,.founder-story-copy h2{font-size:clamp(28px,3.4vw,44px);margin-bottom:14px}
.founder-copy p,.founder-story-copy p{font-size:14px;line-height:1.85;color:var(--ink-2);margin-bottom:12px}
.founder-points{margin-top:14px}
.founder-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:22px}
.founder-sign{font-family:var(--f-display);font-style:italic;font-size:18px !important;color:var(--accent-deep) !important;margin-top:18px}
@media(max-width:820px){ .founder-grid,.founder-story{grid-template-columns:minmax(0,1fr)} .founder-photo{max-width:440px} }

/* 28.5 Full-width banner ────────────────────────────────────────────────── */
.banner-strip{padding:clamp(28px,4vw,56px) var(--gut) 0;max-width:var(--wrap);margin-inline:auto}
.banner-figure{margin:0;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow);background:var(--bg-2)}
.banner-figure img{width:100%;height:auto;display:block}
.banner-caption{text-align:center;font-size:12px;letter-spacing:.04em;color:var(--ink-2);margin-top:14px}

/* 28.6 Image reveal: starts at ~90% (5% clipped on each side), slightly
   scaled down, then grows to 100% from all four edges. Replaces the old
   open-from-the-centre effect.                                             */
.x-reveal>img,.x-reveal img.x-img{
  clip-path:inset(5% 5% 5% 5% round 22px);
  transform:scale(.96);
  opacity:.55;
  transition:
    clip-path 1.2s cubic-bezier(.22,1,.36,1) var(--d,0ms),
    transform 1.4s cubic-bezier(.22,1,.36,1) var(--d,0ms),
    opacity .9s ease var(--d,0ms);
}
.x-reveal.in>img,.x-reveal.in img.x-img{
  clip-path:inset(0% 0% 0% 0% round 0px);
  transform:scale(1);
  opacity:1;
}
.x-reveal.done>img,.x-reveal.done img.x-img{
  will-change:auto;
  transition:transform .85s cubic-bezier(.16,1,.3,1),filter .5s ease;
}
.founder-photo.x-reveal>img,.banner-figure.x-reveal>img{border-radius:0}

/* header emblem: force the 204:180 ratio over older .brand-mark sizing */
.site-header .brand-mark.brand-emblem,.mnav-head .brand-mark.brand-emblem{
  width:52px;height:auto;aspect-ratio:268/240;border-radius:0;background:none;
}
.site-header.solid .brand-mark.brand-emblem{width:46px}
@media(max-width:620px){
  .site-header .brand-mark.brand-emblem,.mnav-head .brand-mark.brand-emblem{width:44px}
  .site-header.solid .brand-mark.brand-emblem{width:40px}
}
.brand-mark.brand-emblem{transition:width .3s var(--ease)}

/* keep the floating enquiry button visible over the dark footer */
.req-float{box-shadow:0 0 0 2px rgba(253,250,245,.35),0 10px 26px rgba(45,36,26,.28)}

/* ── 29 Transparent logo + readable brand lines ──────────────────────────── */
/* footer: transparent light-ink logo sits straight on the dark footer */
.footer-logo{width:200px;background:none;padding:0;border-radius:0;box-shadow:none;margin-bottom:14px}
.footer-logo img{width:100%;height:auto;display:block}
/* header: emblem is transparent now, no tile behind it */
.site-header .brand-mark.brand-emblem,.mnav-head .brand-mark.brand-emblem{background:none;box-shadow:none}
/* brand tagline under the wordmark — was 7.5px muted, near unreadable */
.site-header .brand-sub,.mnav-head .brand-sub{
  font-size:9px;font-weight:700;letter-spacing:.16em;color:var(--ink-2);margin-top:4px;
}
.footer-brand .footer-brand-line{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#e7d9bf;margin-top:2px;
}

/* ── 30 Phone country-code picker ───────────────────────────────────────── */
.phone-group{position:relative;display:flex;align-items:stretch}
.phone-group .cc-btn{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  padding:0 11px 0 13px;border:1px solid var(--line);border-right:0;
  border-radius:12px 0 0 12px;background:var(--surface-2);color:var(--ink);
  font-size:13px;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s;
}
.phone-group .cc-btn:hover,.phone-group .cc-btn[aria-expanded="true"]{background:var(--surface);border-color:var(--accent)}
.cc-iso{font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--muted);
  padding:2px 5px;border-radius:5px;background:var(--bg-2)}
.cc-btn i{font-size:9px;color:var(--muted);transition:transform .2s}
.cc-btn[aria-expanded="true"] i{transform:rotate(180deg)}
.phone-group input[name="phone"]{border-radius:0 12px 12px 0;min-width:0;flex:1}
.cc-panel{
  position:absolute;left:0;top:calc(100% + 6px);z-index:30;width:min(320px,88vw);
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-l);overflow:hidden;
}
.cc-search{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.cc-search i{font-size:12px;color:var(--muted)}
.field .cc-search input{border:0;padding:4px 0;background:none;box-shadow:none;border-radius:0;font-size:13px}
.field .cc-search input:focus{box-shadow:none;background:none}
.cc-list{list-style:none;margin:0;padding:5px;max-height:248px;overflow-y:auto;overscroll-behavior:contain}
.cc-list li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;cursor:pointer;font-size:12.5px}
.cc-list li.active{background:var(--accent-tint)}
.cc-list li.selected .cc-o-name{font-weight:700}
.cc-o-iso{width:26px;flex-shrink:0;font-size:10px;font-weight:700;color:var(--muted)}
.cc-o-name{flex:1;min-width:0;color:var(--ink)}
.cc-o-dial{color:var(--accent-deep);font-weight:600;font-variant-numeric:tabular-nums}
.cc-list .cc-empty{color:var(--muted);cursor:default;justify-content:center}
.field.invalid .phone-group .cc-btn{border-color:#c0503f}

/* footer tagline — set as real text (the one baked into the logo art was too small) */
.footer-tagline{
  margin:4px 0 12px !important;max-width:none;
  font-family:var(--f-display);font-style:italic;font-size:19px;line-height:1.3;
  letter-spacing:.01em;color:#e7c98f;
}
.footer-logo{width:210px;margin-bottom:12px}

/* footer lockup: logo, tagline and company line share one centred column */
.footer-logo{width:240px;margin-bottom:10px}
.footer-tagline{width:240px;text-align:center;font-size:17px;white-space:nowrap}
.footer-brand .footer-brand-line{width:240px;text-align:center;margin-bottom:6px}
@media(max-width:620px){
  .footer-logo,.footer-tagline,.footer-brand .footer-brand-line{width:220px}
  .footer-tagline{font-size:16px}
}

/* ── 31 Footer brand block on tablet/mobile: one centred lockup ─────────── */
.footer-brand{--lk:240px}
.footer-logo,.footer-tagline,.footer-brand .footer-brand-line{width:var(--lk);max-width:100%}
@media(max-width:1020px){
  .footer-brand{
    --lk:clamp(180px,58vw,240px);
    grid-column:1/-1;display:flex;flex-direction:column;align-items:center;text-align:center;
  }
  .footer-logo{margin:0 auto 10px}
  .footer-tagline{font-size:clamp(14px,4.4vw,17px);white-space:normal}
  .footer-brand .footer-brand-line{letter-spacing:.14em;font-size:clamp(9.5px,2.8vw,10.5px)}
  .footer-brand p{max-width:42ch;margin-left:auto;margin-right:auto;text-align:center}
  .footer-social{justify-content:center;flex-wrap:wrap}
}
@media(max-width:380px){ .footer-brand{--lk:170px} }

/* ── 32 Footer logo: original artwork on a cream panel ───────────────────
   The supplied logo is cut out with a cream outline, so it must sit on a
   light ground. Shown untouched (no recolouring).                          */
.footer-logo{
  background:#fbf8f1;padding:16px 18px;border-radius:18px;
  box-shadow:0 12px 30px rgba(0,0,0,.28);margin-bottom:14px;
}
.footer-logo img{width:100%;height:auto;display:block}

/* founder story: the pivotal question gets its own emphasis */
.founder-story-copy .founder-quote{
  font-family:var(--f-display);font-style:italic;font-size:21px !important;line-height:1.4;
  color:var(--ink) !important;border-left:2px solid var(--accent);padding-left:16px;margin:6px 0 14px;
}

/* ── 33 Footer logo: transparent artwork straight on the dark footer ─────
   No panel. A faint light halo (CSS only — the image is untouched) keeps
   the dark teal lettering legible against the near-black background.      */
.footer-logo{background:none;padding:0;border-radius:0;box-shadow:none;margin-bottom:12px}
.footer-logo img{
  filter:drop-shadow(0 0 1px rgba(253,250,245,.55)) drop-shadow(0 0 10px rgba(253,250,245,.10));
}

/* footer logo: no glow — the reversed (ivory-lettered) artwork is crisp on its own */
.footer-logo img{filter:none}

/* footer logo: original colours. A crisp 1px ivory hairline (zero blur, so no
   haze) traces the artwork so the dark teal lettering separates from the
   near-black footer. */
.footer-logo img{
  filter:
    drop-shadow(1px 0 0 rgba(246,239,226,.85)) drop-shadow(-1px 0 0 rgba(246,239,226,.85))
    drop-shadow(0 1px 0 rgba(246,239,226,.85)) drop-shadow(0 -1px 0 rgba(246,239,226,.85));
}

/* footer logo: plain, original colours, no outline or glow */
.footer-logo img{filter:none}

/* ══════════════════════════════════════════════════════════════════════════
   34 ── LIGHT FOOTER — cream ground so the logo shows in its true colours
   ══════════════════════════════════════════════════════════════════════════ */
.site-footer{
  background:#f7f2e8;color:var(--ink-2);
  border-top:1px solid var(--line);
}
.footer-logo img{filter:none}
.footer-brand .brand-name{color:var(--ink)}
.footer-brand .brand-sub{color:var(--muted)}
.footer-brand .footer-brand-line{color:#0f3b3f}
.footer-tagline{color:#a0712c}
.footer-brand p{color:var(--ink-2)}
.footer-col h4{color:var(--accent-deep)}
.footer-col a,.footer-col p{color:var(--ink-2)}
.footer-col a:hover{color:var(--accent-deep)}
.footer-contact div{color:var(--ink-2)}
.footer-contact a{color:var(--ink-2)}
.footer-contact i{color:var(--accent)}
.footer-social a{border-color:var(--line-2);color:var(--ink-2);background:#fffdf8}
.footer-social a:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.footer-wordmark{color:rgba(15,59,63,.07)}
.footer-bottom{color:var(--muted);border-top:1px solid var(--line)}
.footer-bottom a{color:var(--muted)}
.footer-bottom a:hover{color:var(--ink)}
/* floating enquiry button: dark again reads best on the light footer */
.req-float{box-shadow:0 10px 26px rgba(45,36,26,.28)}

/* ══════════════════════════════════════════════════════════════════════════
   35 ── YouTube hero · founder video · two-category bento
   ══════════════════════════════════════════════════════════════════════════ */
/* hero: YouTube cover-fills the stage behind the veil; hidden until playing */
.hero-scene .hero-yt{
  position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;
  opacity:0;transition:opacity .9s ease;
  transform:scale(1.34);transform-origin:50% 46%;will-change:transform;
}
.hero-scene .hero-yt.ready{opacity:1}
.hero-yt iframe{
  position:absolute;top:50%;left:50%;border:0;
  width:max(100%, calc(max(100svh, 600px) * 16 / 9));
  height:max(100%, 56.25vw);
  transform:translate(-50%,-50%);
}
@media (prefers-reduced-motion: reduce){ .hero-scene .hero-yt{transform:none} }

/* founder video: self-hosted, muted loop, fills the card like the photo */
.founder-video video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%;
  opacity:0;transition:opacity .6s var(--ease);background:#000;
}
.founder-video.is-playing video{opacity:1}
.founder-video figcaption{z-index:2}
.vid-sound{
  position:absolute;right:14px;top:14px;z-index:3;
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  border:0;cursor:pointer;font-size:16px;color:#fff;
  background:rgba(20,17,13,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background .3s,transform .3s var(--ease);
}
.vid-sound:hover{background:rgba(20,17,13,.7);transform:scale(1.06)}
.vid-sound[aria-pressed="true"]{background:var(--accent)}
.vid-sound[hidden]{display:none}

/* home categories: two equal cards (Bed / Bath) */
@media(min-width:621px){
  .bento.bento-two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento.bento-two>a{grid-column:auto}
  .bento.bento-two .card-image{min-height:clamp(260px,34vw,440px)}
}

/* ── 36 Hero video: sound toggle + edge crop ──────────────────────────────── */
/* slight zoom crops YouTube's title strip / logo at the edges on every size */
.hero-yt iframe{transform:translate(-50%,-50%) scale(1.18)}
.hero-sound{
  position:absolute;z-index:8;top:calc(var(--header-h, 76px) + 16px);right:var(--gut);
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:rgba(20,17,13,.45);color:#fdfaf5;font-size:16px;
  border:1px solid rgba(253,250,245,.35);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;transform:scale(.85);
  transition:opacity .4s ease,visibility .4s ease,transform .3s var(--ease),background .25s;
  cursor:pointer;
}
.hero-sound.show{opacity:1;visibility:visible;transform:none}
.hero-sound:hover{background:rgba(20,17,13,.7)}
.hero-sound[aria-pressed="true"]{background:var(--accent);border-color:var(--accent)}
.hero-sound:focus-visible{outline:2px solid #fdfaf5;outline-offset:3px}
@media(max-width:620px){
  .hero-sound{width:42px;height:42px;font-size:15px;top:calc(var(--header-h, 66px) + 12px)}
}

/* founder video — YouTube fallback, cover-filling the portrait card */
.founder-video .founder-yt{
  position:absolute;top:50%;left:50%;z-index:1;border:0;pointer-events:none;
  height:100%;width:auto;aspect-ratio:16/9;min-width:100%;
  transform:translate(-50%,-50%) scale(1.15);
  opacity:0;transition:opacity .6s var(--ease);background:#000;
}
.founder-video.is-playing .founder-yt{opacity:1}