:root{
  color-scheme:light;
  --ground:#F7F4EE; --surface:#FFFFFF; --sunk:#EFEAE0; --ink:#1C1B19; --muted:#5F5A52;
  --gold:#B48F4F; --gold-deep:#7D5F2A; --gold-tint:#F1E8D4; --hair:#D9D2C4;
  --display:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --text:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gutter:clamp(16px,5.5vw,80px); --pad:120px; --max:1280px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface);color:var(--ink);font:400 16px/1.6 var(--text);-webkit-font-smoothing:antialiased}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
.wrap{max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto;padding-inline:var(--gutter)}
h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-0.02em;text-wrap:balance;margin:0}
p{margin:0}
.eyebrow{font:600 12px/1.6 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep)}
.lead{font-size:20px;line-height:1.55;color:var(--muted);max-width:34em}
.muted{color:var(--muted)}
.confirm{background:var(--gold-tint);color:var(--gold-deep);font-size:.85em;padding:1px 6px;white-space:nowrap}

/* Header */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid transparent;transition:border-color .3s}
.site-head.scrolled{border-bottom-color:var(--hair)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:84px}
.brand{display:flex;align-items:center}
.brand img{height:40px;width:auto}
.nav{display:flex;align-items:center;gap:36px}
.nav a{text-decoration:none;font-size:15px;color:var(--ink);position:relative;padding-block:6px}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.nav a:not(.btn):hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.menu-btn{display:none;background:none;border:0;font:500 15px var(--text);color:var(--ink);cursor:pointer;padding:8px 0}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--ground)!important;text-decoration:none;font:500 15px/1 var(--text);padding:16px 24px;border:1px solid var(--ink);transition:background .25s,color .25s;cursor:pointer}
.btn:hover{background:transparent;color:var(--ink)!important}
.btn.small{padding:12px 18px;font-size:14px}
.link{display:inline-flex;align-items:center;gap:10px;font:500 15px var(--text);text-decoration:none;border-bottom:1px solid var(--hair);padding-bottom:4px;transition:border-color .25s}
.link:hover{border-color:var(--ink)}
.link .arr{transition:transform .25s}.link:hover .arr{transform:translateX(4px)}

/* Hero */
.hero{position:relative;background:var(--surface);overflow:hidden;min-height:min(820px,calc(100svh - 84px))}
.hero-img{position:absolute;top:0;right:0;bottom:0;width:76%;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.4) 16%,#000 40%);mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.4) 16%,#000 40%)}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:100% 50%;opacity:.9}
.hero-in{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:inherit;padding-block:96px}
.hero-copy{max-width:600px;display:grid;gap:28px}
.hero h1{font-size:clamp(40px,5vw,66px);line-height:1.04}
.hero .sub{font-size:20px;color:var(--muted)}
.hero .ctas{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;margin-top:8px}

/* Intro */
.intro{padding-block:var(--pad);border-top:1px solid var(--hair)}
.intro-grid{display:grid;grid-template-columns:5fr 7fr;gap:48px 80px;align-items:start}
.intro h2{font-size:clamp(30px,3.4vw,44px);line-height:1.12;margin-top:20px}
.intro .body{display:grid;gap:24px;padding-top:34px}
.intro .belief{font-family:var(--display);font-size:22px;line-height:1.4;color:var(--ink);border-top:1px solid var(--hair);padding-top:24px}

/* Pillars */
.pillar{padding-block:calc(var(--pad) * .8);}
.pillar + .pillar{border-top:1px solid var(--hair)}
.pillar-grid{display:grid;grid-template-columns:8fr 4fr;gap:40px 72px;align-items:center}
.pillar.flip .pillar-grid{grid-template-columns:4fr 8fr}
.pillar.flip .stage-col{order:2}
.stage{position:relative;aspect-ratio:4/3;max-width:100%;background:var(--surface);overflow:hidden}
.stage .frame{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.stage .frame.on{opacity:1}
.stage img,.stage video{width:100%;height:100%;object-fit:cover}
.stage-meta{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:16px;font-size:13px;color:var(--muted)}
.ticks{display:flex;gap:8px}
.ticks button{width:34px;height:20px;border:0;background:none;padding:0;cursor:pointer;position:relative}
.ticks button::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--hair)}
.ticks button::after{content:"";position:absolute;left:0;top:50%;height:2px;width:0;background:var(--gold)}
.ticks button.on::after{width:100%}
.ticks button.run::after{animation:fill var(--dur,4s) linear forwards}
@keyframes fill{from{width:0}to{width:100%}}
.pillar-copy{display:grid;gap:22px;align-content:center}
.pillar-copy h2{font-size:clamp(30px,3.2vw,42px);line-height:1.1}
.pillar-copy p{color:var(--muted);font-size:17px}
.watch{justify-self:start;display:inline-flex;align-items:center;gap:14px;background:none;border:0;padding:0;font:500 15px var(--text);color:var(--ink);cursor:pointer}
.play{width:46px;height:46px;border-radius:999px;background:var(--gold);display:grid;place-items:center;transition:transform .25s}
.play svg{width:14px;height:14px;fill:#fff;margin-left:2px}
.watch:hover .play{transform:scale(1.08)}
.sound{position:absolute;right:16px;bottom:16px;z-index:3;display:none;align-items:center;gap:10px;background:rgba(28,27,25,.72);color:#fff;border:0;font:500 13px var(--text);padding:9px 14px;cursor:pointer}
.stage.film .sound{display:inline-flex}

/* Proof + promise */
.proof{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding-block:56px}
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.proof-grid div{display:grid;gap:8px;align-content:start}
.proof-grid strong{font:500 30px/1.1 var(--display);letter-spacing:-.02em}
.proof-grid span{font-size:14px;color:var(--muted)}
.promise{background:var(--gold-tint);padding-block:var(--pad);text-align:left}
.promise .wrap{display:grid;gap:36px}
.promise blockquote{margin:0;font:400 clamp(26px,3vw,40px)/1.25 var(--display);letter-spacing:-.015em;max-width:24em;text-wrap:balance}

/* Footer */
.site-foot{background:var(--ground);padding-block:72px 40px;font-size:14px;color:var(--muted)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.foot-grid h3{font:600 12px var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:14px}
.foot-grid a{text-decoration:none}.foot-grid a:hover{text-decoration:underline}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot-base{margin-top:56px;padding-top:24px;border-top:1px solid var(--hair);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px}

/* Page heads */
.page-head{padding-block:96px 72px}
.page-head h1{font-size:clamp(38px,4.6vw,60px);line-height:1.06;max-width:15em;margin-top:20px}
.page-head .lead{margin-top:24px}
.section{padding-block:var(--pad)}
.section + .section{border-top:1px solid var(--hair)}
.split{display:grid;grid-template-columns:5fr 7fr;gap:48px 80px;align-items:start}
.split h2{font-size:clamp(28px,3vw,38px);line-height:1.15;margin-top:18px}
.prose{display:grid;gap:20px;max-width:40em}
.prose p{color:var(--muted)}
.feature-img{aspect-ratio:16/10;max-width:100%;overflow:hidden;background:var(--sunk)}
.feature-img img{width:100%;height:100%;object-fit:cover}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--hair);counter-reset:s}
.steps li{align-content:start;list-style:none;padding:28px 28px 28px 0;border-bottom:1px solid var(--hair);display:grid;gap:8px}
.steps li b{font:500 20px var(--display)}
.steps li span{font-size:15px;color:var(--muted)}
.steps .n{font:500 13px var(--text);color:var(--gold-deep);font-variant-numeric:tabular-nums}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.pair figure{margin:0}
.pair img{aspect-ratio:1;object-fit:cover;width:100%}
figcaption{font-size:13px;color:var(--muted);margin-top:10px}
.tags{display:flex;flex-wrap:wrap;gap:8px 8px}
.tags li{list-style:none;border:1px solid var(--hair);padding:7px 12px;font-size:14px;background:var(--surface)}
.placeholder{aspect-ratio:4/3;background:var(--sunk);display:grid;place-items:center;text-align:center;padding:24px;font-size:14px;color:var(--muted);border:1px dashed var(--hair)}
.quote{font:400 22px/1.45 var(--display);border-left:2px solid var(--gold);padding-left:24px}
.quote cite{display:block;margin-top:12px;font:400 14px var(--text);color:var(--muted);font-style:normal}
.awards{width:100%;border-collapse:collapse;font-size:15px}
.awards th{text-align:left;font:600 12px var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);padding:0 16px 14px 0;border-bottom:1px solid var(--ink)}
.awards td{padding:16px 16px 16px 0;border-bottom:1px solid var(--hair);vertical-align:top}
.awards td:first-child{font-variant-numeric:tabular-nums;font-weight:500;width:80px}
.awards td:last-child{color:var(--muted)}
.table-scroll{overflow-x:auto}
.faq details{border-bottom:1px solid var(--hair);padding-block:22px}
.faq details:first-child{border-top:1px solid var(--hair)}
.faq summary{cursor:pointer;font:500 19px var(--display);list-style:none;display:flex;justify-content:space-between;gap:24px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold-deep);font-weight:400}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin-top:14px;color:var(--muted);max-width:44em}

/* Work */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.filters button{background:var(--surface);border:1px solid var(--hair);padding:10px 16px;font:500 14px var(--text);color:var(--ink);cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.grid-work{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 24px}
.tile{display:grid;gap:14px}
.tile .ph{aspect-ratio:1;overflow:hidden;background:var(--surface);border:1px solid var(--sunk)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.tile:hover img{transform:scale(1.035)}
.tile h3{font:500 19px var(--display)}
.tile p{font-size:14px;color:var(--muted);margin-top:4px}
.tile[hidden]{display:none}

/* Contact */
.contact-grid{display:grid;grid-template-columns:4fr 7fr;gap:56px 96px;align-items:start}
.details{display:grid;gap:28px;font-size:16px}
.details dt{font:600 12px var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:6px}
.details dd{margin:0}
form{display:grid;gap:22px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
label{display:grid;gap:8px;font-size:14px;font-weight:500}
input,select,textarea{font:400 16px var(--text);color:var(--ink);background:var(--surface);border:1px solid var(--hair);border-radius:0;padding:14px 14px;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink)}
textarea{min-height:140px;resize:vertical}
.check{display:flex;gap:12px;align-items:flex-start;font-weight:400;color:var(--muted)}
.check input{width:18px;height:18px;margin-top:3px;flex:none;accent-color:var(--ink)}
.err{color:#9A2B1E;font-size:13px;font-weight:400;min-height:0}
.thanks{border:1px solid var(--hair);background:var(--ground);padding:40px;display:grid;gap:14px}

/* Film modal */
.modal{position:fixed;inset:0;z-index:100;background:rgba(20,19,17,.92);display:grid;place-items:center;padding:24px}
.modal video{width:min(1200px,100%);max-height:84vh;background:#000}
.modal .close{position:absolute;top:calc(20px + env(safe-area-inset-top,0px));right:20px;background:none;border:1px solid rgba(255,255,255,.4);color:#fff;font:500 14px var(--text);padding:10px 16px;cursor:pointer}

/* Reveal */
.rv{transition:opacity .9s ease,transform .9s ease}
.js .rv.pre{opacity:.001;transform:translateY(18px)}

@media (max-width:1000px){
  .pillar-grid,.pillar.flip .pillar-grid{grid-template-columns:1fr}
  .pillar.flip .stage-col{order:0}
  .intro-grid,.split,.contact-grid{grid-template-columns:1fr}
  .grid-work{grid-template-columns:repeat(2,1fr)}
  .proof-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  :root{--pad:72px}
  .head-in{height:68px}.brand img{height:32px}
  .menu-btn{display:block}
  .nav{display:none;position:absolute;top:68px;left:0;right:0;background:var(--surface);flex-direction:column;align-items:flex-start;gap:4px;padding:16px var(--gutter) 28px;border-bottom:1px solid var(--hair)}
  .nav.open{display:flex}
  .nav a{font-size:18px;padding-block:10px}
  .nav .btn{margin-top:12px}
  .hero{min-height:0}
  .hero-img{position:relative;width:100%;height:auto;aspect-ratio:1/1;-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);mask-image:linear-gradient(to bottom,#000 55%,transparent 100%)}
  .hero-in{padding-block:0 64px;margin-top:-48px}
  .intro .body{padding-top:0}
  .grid-work{grid-template-columns:1fr 1fr;gap:32px 14px}
  .tile h3{font-size:16px}
  .row2,.pair{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .page-head{padding-block:64px 48px}
  .proof-grid strong{font-size:24px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .js .rv.pre{opacity:1;transform:none}
}

/* Testimonials + clients */
.testi{padding-block:var(--pad);border-top:1px solid var(--hair);background:var(--ground)}
.testi .wrap{display:grid;gap:48px}
.testi-head h2{font-size:clamp(28px,3vw,38px);margin-top:18px}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.quotes.all{grid-template-columns:repeat(2,1fr);gap:48px 64px}
.q{margin:0;display:grid;gap:20px;align-content:start;border-top:1px solid var(--gold);padding-top:24px}
.q blockquote{margin:0;font:400 19px/1.5 var(--display);letter-spacing:-.005em;color:var(--ink)}
.q figcaption{margin:0;display:grid;gap:2px;font-size:14px}
.q figcaption span{color:var(--muted)}
.clients{padding-block:56px;border-top:1px solid var(--hair)}
.client-list{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 0}
.client-list li{font:500 17px var(--display);color:var(--ink);padding-right:18px;margin-right:18px;border-right:1px solid var(--hair)}
.client-list li:last-child{border-right:0}
.clients .note{margin-top:18px;font-size:13px;color:var(--muted)}
@media (max-width:1000px){.quotes,.quotes.all{grid-template-columns:1fr}}
@media (max-width:760px){.client-list li{font-size:15px;padding-right:12px;margin-right:12px}}
[id]{scroll-margin-top:96px}
/* Slightly rounded buttons (Andrew, 26 Sept) */
.btn,.filters button,.sound,.modal .close{border-radius:6px}

/* ---- 2 Oct: film-led pillars with product click-throughs ---- */
.pillar-grid{grid-template-columns:7fr 5fr}
.pillar.flip .pillar-grid{grid-template-columns:5fr 7fr}
.pillar.flip .film-col{order:2}
.film{position:relative;aspect-ratio:16/9;max-width:100%;background:var(--sunk);overflow:hidden;cursor:pointer}
.film video{width:100%;height:100%;object-fit:cover;display:block}
.snd{position:absolute;right:14px;bottom:14px;width:34px;height:34px;border-radius:999px;background:rgba(28,27,25,.45);color:#fff;display:grid;place-items:center;opacity:.75;transition:opacity .25s}
.film:hover .snd{opacity:1}
.snd svg{width:18px;height:18px;fill:#fff}
.snd .on{display:none}.film.unmuted .snd .on{display:block}.film.unmuted .snd .off{display:none}
.pillar-copy{gap:20px}
.ptiles{display:grid;gap:20px;margin-top:20px;grid-template-columns:1fr 1fr}
.ptiles.n1{grid-template-columns:minmax(0,.6fr)}
.ptile{display:grid;gap:10px;text-decoration:none;color:var(--ink)}
.ptile .ph{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:12px;background:var(--surface)}
.ptile img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.ptile:hover img{transform:scale(1.04)}
.pt-name{font:500 15px var(--text)}
.pt-name .arr{display:inline-block;transition:transform .25s}.ptile:hover .arr{transform:translateX(4px)}
.stories{padding-block:0 var(--pad)}
.stories-h{font-size:clamp(26px,2.6vw,34px);padding-top:56px;border-top:1px solid var(--hair)}
.story{display:grid;grid-template-columns:4fr 8fr;gap:40px 64px;align-items:start;padding-block:64px;border-bottom:1px solid var(--hair)}
.story:last-child{border-bottom:0}
.s-text{display:grid;gap:16px;position:sticky;top:110px}
.s-text h2{font-size:clamp(28px,2.8vw,38px);line-height:1.1}
.s-text p{color:var(--muted)}
.s-lead{font:400 20px/1.4 var(--display)!important;color:var(--ink)!important}
.s-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:150px;gap:14px}
.s-grid figure{margin:0;overflow:hidden;border-radius:12px;background:var(--surface)}
.s-grid img{width:100%;height:100%;object-fit:cover}
.s-grid.n2 .g0{grid-column:span 3;grid-row:span 3}.s-grid.n2 .g1{grid-column:span 3;grid-row:span 3}
.s-grid.n3 .g0{grid-column:span 4;grid-row:span 4}.s-grid.n3 .g1{grid-column:span 2;grid-row:span 2}.s-grid.n3 .g2{grid-column:span 2;grid-row:span 2}
.s-grid.n4 .g0{grid-column:span 4;grid-row:span 4}.s-grid.n4 .g1{grid-column:span 2;grid-row:span 2}.s-grid.n4 .g2{grid-column:span 2;grid-row:span 2}.s-grid.n4 .g3{grid-column:span 6;grid-row:span 2}
@media (max-width:1000px){
  .pillar-grid,.pillar.flip .pillar-grid{grid-template-columns:1fr}
  .pillar.flip .film-col{order:0}
  .story{grid-template-columns:1fr}
  .s-text{position:static}
  .s-grid{grid-auto-rows:90px;gap:10px}
}
/* 2 Oct pm: tighter rhythm, film bottom aligned with product images */
.intro{padding-block:88px 24px}
.intro + .pillar{padding-top:40px}
.pillar{padding-block:64px}
.pillar-grid{align-items:end}
.film-col{padding-bottom:36px}
.ptiles.n1:has(.wide){grid-template-columns:1fr}
.ptile.wide .ph{aspect-ratio:16/10;background:#fff}
.ptile.wide img{object-fit:contain}
@media (max-width:1000px){.film-col{padding-bottom:0}.pillar-grid{align-items:start}}
/* 4 Oct: labels back; picture bottoms align with film bottoms; Chivas layout */
.film-col{padding-bottom:0}
.pillar{padding-bottom:96px}
.ptile{position:relative}
.ptile .pt-name{position:absolute;left:0;top:100%;margin-top:10px;white-space:nowrap}
.s-grid.chivas{grid-template-columns:1fr 2fr;grid-template-rows:1fr 1fr;grid-auto-rows:auto;aspect-ratio:3/2.2}
.s-grid.chivas .g0{grid-column:1;grid-row:1}.s-grid.chivas .g1{grid-column:1;grid-row:2}.s-grid.chivas .g2{grid-column:2;grid-row:1 / span 2}
.s-blank{margin:12px 0 0;max-width:360px}
.s-blank img{width:100%;height:auto;display:block}
.s-blank figcaption{font-size:13px;color:var(--muted);margin-top:6px}
@media (max-width:1000px){.pillar{padding-bottom:72px}.ptiles{margin-bottom:28px}.s-grid.chivas{aspect-ratio:auto;grid-template-rows:200px 200px}}
/* 4 Oct: section labels in the logo gold */
.pillar-copy .eyebrow,.s-text .eyebrow{color:var(--gold);font-size:13px}
.awards-sec{border-top:1px solid var(--hair)}
/* 8 Oct: Brett's story layouts */
.s-grid.trio{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;grid-auto-rows:auto;aspect-ratio:1.23}
.s-grid.trio .g0{grid-column:1;grid-row:1 / span 2}.s-grid.trio .g1{grid-column:2;grid-row:1}.s-grid.trio .g2{grid-column:2;grid-row:2}
.s-grid.pair{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
.s-grid.pair figure{grid-column:auto;grid-row:auto;aspect-ratio:437/531}
.s-grid.chivas{aspect-ratio:1.38}
@media (max-width:1000px){.s-grid.trio{aspect-ratio:auto;grid-template-rows:200px 200px}}
/* 9 Oct: Brett's opening layout (no hero; intro with Hellfire then White Diamonds) */
.intro.intro-v2{padding-block:48px 24px;border-top:0}
.intro-v2 .intro-grid{grid-template-columns:5fr 6fr;gap:40px 96px;align-items:start}
.intro-v2 .intro-copy{display:grid;gap:24px;padding-top:8px;padding-bottom:32px;border-bottom:1px solid var(--hair)}
.intro-v2 h1{font-size:clamp(34px,3.6vw,50px);line-height:1.08;margin-top:8px}
.intro-v2 .lead{font-size:20px;color:var(--muted)}
.intro-show{position:relative;aspect-ratio:1600/1420;overflow:hidden;background:#fff}
.intro-show img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.intro-show img.on{opacity:1}
@media (max-width:1000px){.intro-v2 .intro-grid{grid-template-columns:1fr}.intro-show{order:-1}}
/* 11 Oct: larger logo (Brett) */
.head-in{height:112px}
.brand img{height:80px;width:auto;transition:height .25s ease}
.site-head.scrolled .brand img{height:56px}
.s-text{top:136px}
@media (max-width:760px){.head-in{height:68px}.brand img,.site-head.scrolled .brand img{height:20px}}
/* 12 Oct: About (Brett WIP) */
.about-story{border-top:0;padding-top:56px}
.about-story h1{font-size:clamp(34px,3.6vw,50px);line-height:1.08;margin:16px 0 40px}
.about-story-grid{display:grid;grid-template-columns:5fr 7fr;gap:40px 80px;align-items:start}
.about-story-grid figure{margin:0}.about-story-grid img{width:100%;height:auto;display:block}
.about-story-grid .prose{padding-top:12px}
.flip-split>div:first-child{order:2}
@media (max-width:1000px){.about-story-grid{grid-template-columns:1fr}.flip-split>div:first-child{order:0}}
/* 12 Oct: Quality section on Our work */
.quality-sec{padding-block:72px 40px;border-top:1px solid var(--hair)}
.quality-sec>.wrap>.eyebrow{color:var(--gold);font-size:13px}
.q-top{display:grid;grid-template-columns:7fr 5fr;gap:40px 64px;align-items:start;margin-top:28px}
.eb-dark{color:var(--gold-deep)!important}
.q-left h2{font-size:clamp(30px,3.2vw,44px);line-height:1.1;margin:14px 0 18px}
.q-intro{max-width:620px;font-size:17px}
.q-right{padding-top:8px}.q-claim{font-family:var(--display);font-size:22px;line-height:1.35;color:var(--ink);margin:0 0 8px}
.q-right figure{margin:28px 0 0}.q-right img{width:100%;height:auto;display:block}
.q-steps{list-style:none;padding:0;margin:40px 0 0;display:grid;gap:0 40px;border-top:1px solid var(--hair)}
.q-steps.two{grid-template-columns:1fr 1fr}.q-steps.three{grid-template-columns:1fr 1fr 1fr;margin-top:24px}
.q-steps li{display:grid;gap:8px;padding:24px 0;border-bottom:1px solid var(--hair)}
.q-steps .n{color:var(--gold-deep);font-size:14px}.q-steps b{font-family:var(--display);font-weight:500;font-size:21px;color:var(--ink)}.q-steps li span:last-child{color:var(--muted)}
.q-sub .feature-img{margin:0}.q-sub .feature-img img{width:100%;height:auto}
@media (max-width:1000px){.q-top{grid-template-columns:1fr}.q-steps.two,.q-steps.three{grid-template-columns:1fr}}
.q-sub .split>div:first-child .prose{margin-top:28px}
/* 14 Oct: Our work head image */
.work-head-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.work-head-img{margin:0}
.work-head-img img{width:100%;height:auto;display:block}
@media (max-width:760px){.work-head-grid{grid-template-columns:1fr}.work-head-img{max-width:420px}}
.client-list li.logo{display:flex;align-items:center}
.client-list li.logo img{height:36px;width:auto;max-width:140px;filter:grayscale(1);opacity:.75}
/* 14 Oct: motion layer */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.sr .w{transition:opacity .25s linear}
figure.has-annot{position:relative}
.annot-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.annot-svg path{fill:none;stroke:#fff;stroke-width:1.2;transition:stroke-dashoffset .7s cubic-bezier(.6,0,.2,1)}
.annot-svg circle{fill:#fff;stroke:rgba(26,23,18,.55);stroke-width:1.5;opacity:0;transition:opacity .3s}
.annot-in .annot-svg circle{opacity:1}
.annot{list-style:none;margin:0;padding:0}
.annot li{position:absolute;z-index:2;transform:translateY(-50%);line-height:1.3;white-space:normal!important;text-align:center;background:rgba(255,255,255,.94);color:var(--ink);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;padding:6px 10px;border-radius:14px;opacity:0;transition:opacity .4s}
.annot-in .annot li{opacity:1}
.annot-small .annot li{font-size:9px;padding:4px 7px;letter-spacing:.04em;white-space:normal;max-width:42%}
@media (prefers-reduced-motion: reduce){.annot li{opacity:1}.annot-svg path{stroke-dashoffset:0!important}.annot-svg circle{opacity:1}}
.annot-off .annot,.annot-off .annot-svg{display:none}
.mr{clip-path:inset(0 0 0 0 round 12px);transition:clip-path 1.2s cubic-bezier(.77,0,.18,1)}
.mr img{scale:1.12;transition:transform .9s cubic-bezier(.2,.7,.2,1),scale 1.6s cubic-bezier(.2,.7,.2,1)}
.mr.mr-pre{clip-path:inset(100% 0 0 0 round 12px)}
.mr.mr-pre img{scale:1.35}
@media (prefers-reduced-motion: reduce){.mr,.mr img{transition:none;clip-path:none;scale:1}}
/* 14 Oct: How we work, only a top and a bottom rule */
.q-steps li{border-bottom:0;align-content:start}
.q-steps.three{border-top:0;border-bottom:1px solid var(--hair);margin-top:0}
/* 19 Oct: Quality carton construction trio, certifications flipped */
.qc-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}
.qc-grid figure{margin:0;overflow:hidden;background:var(--surface);aspect-ratio:4/3}
.qc-grid figure.wide{grid-column:1/-1;aspect-ratio:1405/570}
.qc-grid img{width:100%;height:100%;object-fit:cover;display:block}
.cert-split{grid-template-columns:1fr 1fr}
@media (max-width:1000px){.cert-split{grid-template-columns:1fr}}
/* 19 Oct: Giving back, Brett's layout with rotating photo sets */
.give-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px 64px;align-items:start}
.give-left .prose{padding-top:6px}
.give-right h2{font-size:clamp(28px,3vw,38px);line-height:1.15;margin-top:18px}
.give-photos{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:36px}
.rot{position:relative;margin:0;overflow:hidden;background:var(--surface)}
.rot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.rot img.on{opacity:1}
.g-land{aspect-ratio:4/3;margin-top:28px}
.g-sq{aspect-ratio:1}
.g-big{grid-column:1/-1;aspect-ratio:1.28}
@media (max-width:1000px){.give-grid{grid-template-columns:1fr}.give-right{order:-1}}
@media (prefers-reduced-motion: reduce){.rot img{transition:none}}
.qc-grid{grid-template-columns:1.39fr 1.18fr}
.qc-grid figure:nth-child(1){aspect-ratio:1.39}.qc-grid figure:nth-child(2){aspect-ratio:1.18}
.cert-split{align-items:center}
.cert-split .feature-img{aspect-ratio:1.31}.cert-split .feature-img img{height:100%;object-fit:cover}
/* 21 Oct: client logo marquee (logos pre-converted to greyscale) */
.clients .wrap{padding-bottom:28px}
.logo-marquee{display:grid;gap:30px;padding-bottom:8px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.lm-row{display:flex;overflow:hidden;width:100%}
.lm-track{display:flex;align-items:center;gap:64px;list-style:none;margin:0;padding:0 32px;flex-shrink:0;min-width:max-content;animation:lm-scroll 38s linear infinite}
.lm-row.rev .lm-track{animation-direction:reverse;animation-duration:44s}
.lm-row:hover .lm-track{animation-play-state:paused}
.lm-track li{flex:0 0 auto;display:flex;align-items:center;height:64px}
.lm-track img{display:block;opacity:.75;max-width:none}
@keyframes lm-scroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media (max-width:760px){.lm-track{gap:40px;padding:0 20px}.lm-track img{transform:scale(.8)}}
@media (prefers-reduced-motion: reduce){
 .logo-marquee{-webkit-mask-image:none;mask-image:none}
 .lm-row{overflow:visible}.lm-track{animation:none;flex-wrap:wrap;justify-content:center;min-width:0;flex-shrink:1;row-gap:28px}
 .lm-track[aria-hidden]{display:none}
}

/* Project type checkboxes */
.types{border:0;padding:0;margin:0;min-width:0}
.types legend{font-size:14px;font-weight:500;padding:0;margin-bottom:8px}
.types legend .muted{font-weight:400}
.type-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tchk{display:flex;align-items:center;gap:10px;font-weight:400;font-size:15px;border:1px solid var(--hair);background:var(--surface);padding:12px 14px;cursor:pointer;transition:border-color .2s}
.tchk input{width:18px;height:18px;padding:0;margin:0;flex:none;accent-color:var(--ink)}
.tchk:hover,.tchk:has(input:checked){border-color:var(--ink)}
.tchk:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
@media (max-width:760px){.type-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Craft list: option A (ruled, numbered) */
.craft-list{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:28px;border-top:1px solid var(--hair)}
.craft-list li{display:flex;gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--hair);font-size:15px;line-height:1.35}
.craft-list .n{font:600 11px var(--text);letter-spacing:.08em;color:var(--gold-deep);min-width:18px;flex:none}
@media (max-width:520px){.craft-list{grid-template-columns:1fr}}


/* FAQ page */
.faq-index{border:1px solid var(--hair);background:var(--surface);padding:28px 32px}
.faq-index ul{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 40px}
.faq-index a{display:grid;padding:16px 0;border-bottom:1px solid var(--hair);text-decoration:none;color:var(--ink);transition:color .2s}
.faq-index li:nth-last-child(-n+2) a{border-bottom:0}
.faq-index .n{font:600 11px var(--text);letter-spacing:.08em;color:var(--gold-deep)}
.faq-index .t{font:500 20px/1.3 var(--display);margin-top:6px}
.faq-index .c{font-size:14px;color:var(--muted);margin-top:4px}
.faq-index a:hover .t{color:var(--gold-deep)}
.faq-index-sec{padding-block:0 var(--pad)}
.faq-cat{scroll-margin-top:90px;border-top:1px solid var(--hair)}
.faq-tag{color:var(--muted);margin-top:14px;max-width:24em}
.faq-top{display:inline-block;margin-top:24px;font-size:14px;color:var(--gold-deep)}
.faq-side{position:sticky;top:110px}
.faq details p+p{margin-top:10px}
@media (max-width:760px){.faq-index{padding:20px}.faq-index ul{grid-template-columns:1fr}.faq-index li:nth-last-child(2) a{border-bottom:1px solid var(--hair)}.faq-side{position:static}}

.thanks[hidden]{display:none}