/* ============================================================================
   UNIDECORS · HOME PAGE CONCEPT
   Reference: craftaforms.com for the editorial language. Content and structure
   from the Unidecors Capability & Positioning document v1.0.
   Single file, zero dependencies.  >> PROD marks production notes.
   ========================================================================= */

/* ---------- 1. TOKENS --------------------------------------------------- */
:root{
  --paper:#FBFBF9;
  --sand:#F1EEE7;
  --ink:#171613;
  --ink-2:#5E5B54;
  --ink-3:#8C887F;
  --hair:rgba(23,22,19,.13);
  --hair-2:rgba(23,22,19,.22);
  --accent:#A8752F;            /* warm bronze, used sparingly            */
  --flag:#B4482F;             /* only for interface risk. never decorative */

  --sans:'Futura','Avenir Next','Century Gothic','Questrial',ui-sans-serif,system-ui,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  --gut:clamp(20px,4.6vw,72px);
  --maxw:1360px;
  --sec:clamp(74px,9.6vw,150px);
  --e:cubic-bezier(.22,.61,.36,1);
  --e2:cubic-bezier(.65,.02,.25,1);

  /* LOGO SLOT. height drives everything, ratio holds the box. */
  --brand-ratio:6.97;          /* the unidecors wordmark                  */
  --brand-h:18px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- 2. TYPE ----------------------------------------------------- */
.lbl{font-size:10.5px; letter-spacing:.215em; text-transform:uppercase; color:var(--ink-3); margin:0}
.h1{margin:0; font-weight:400; letter-spacing:-.03em; line-height:1.02;
    font-size:clamp(38px,6.6vw,92px)}
.h2{margin:0; font-weight:400; letter-spacing:-.019em; line-height:1.1;
    font-size:clamp(25px,3.2vw,43px); text-wrap:balance}
.h3{margin:0; font-weight:400; letter-spacing:-.012em; line-height:1.22; font-size:clamp(19px,1.9vw,26px)}
.dim{color:var(--ink-3)}
.body{margin:0; color:var(--ink-2); font-size:clamp(14.5px,1.05vw,16.5px); line-height:1.78}
.tech{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}

.al{display:inline-flex; align-items:center; gap:9px; position:relative;
    font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; padding-bottom:7px}
.al svg{width:13px;height:13px;transition:transform .45s var(--e); flex:0 0 auto}
.al::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--ink); transform:scaleX(0); transform-origin:100% 50%; transition:transform .5s var(--e)}
.al:hover svg{transform:translateX(6px)}
.al:hover::after{transform:scaleX(1); transform-origin:0 50%}
.btn{display:inline-flex; align-items:center; gap:11px; border-radius:100px; padding:14px 26px;
  font-size:11px; letter-spacing:.17em; text-transform:uppercase;
  border:1px solid var(--hair-2); transition:.42s var(--e)}
.btn svg{width:12px;height:12px;transition:transform .45s var(--e)}
.btn:hover{border-color:var(--ink)}
.btn:hover svg{transform:translateX(5px)}
.btn.solid{background:var(--ink); color:var(--paper); border-color:var(--ink)}

/* ---------- 3. REVEALS -------------------------------------------------- */
.rv{opacity:0; transform:translateY(22px);
    transition:opacity .95s var(--e), transform .95s var(--e);
    transition-delay:calc(var(--i,0)*90ms)}
.rv.in{opacity:1; transform:none}
/* curtain, never clip-path on the observed element */
.fig{position:relative; overflow:hidden; background:var(--sand)}
.fig::after{content:""; position:absolute; inset:0; z-index:2; background:var(--paper);
  transition:transform 1.15s var(--e2); transition-delay:calc(var(--i,0)*90ms)}
.sec.sand .fig::after{background:var(--sand)}
.fig.in::after{transform:translateY(-101%)}
.fig img{width:100%; height:100%; object-fit:cover; transform:scale(1.14);
  transition:transform 1.7s var(--e2); transition-delay:calc(var(--i,0)*90ms)}
.fig.in img{transform:scale(1)}
.h1 .ln{
  overflow:hidden;
  padding-bottom:.12em;      /* room for descenders */
  margin-bottom:-.12em;      /* cancel the extra spacing so layout doesn't shift */
}
  transition:transform 1.05s var(--e2); transition-delay:calc(var(--i,0)*95ms)}
.rv.in .ln > span, .ln.in > span{transform:none}

/* ---------- 4. LOADER --------------------------------------------------- */
#ld{position:fixed; inset:0; z-index:200; background:var(--paper); display:grid; place-items:center;
  transition:opacity .7s ease .15s, visibility .7s}
#ld.done{opacity:0; visibility:hidden}
#ld .m{color:var(--ink); height:24px; width:calc(24px*var(--brand-ratio)); opacity:0;
  animation:fin .8s var(--e) .1s forwards}
#ld .m svg{width:100%;height:100%}
#ld .bar{position:absolute; left:0; top:0; height:1px; width:100%; background:var(--hair)}
#ld .bar i{display:block; height:100%; width:0; background:var(--ink); animation:fill 1.15s var(--e2) forwards}
@keyframes fin{to{opacity:1}} @keyframes fill{to{width:100%}}

/* ---------- 5. HEADER --------------------------------------------------- */
.hd{position:fixed; inset:0 0 auto 0; z-index:90; padding:22px 0;
  transition:background-color .5s ease, padding .5s var(--e), border-color .5s ease;
  border-bottom:1px solid transparent}
.hd.stuck{background:rgba(250,249,246,.87); backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%); border-bottom-color:var(--hair); padding:15px 0}
.hd .wrap{display:flex; align-items:center; justify-content:space-between; gap:26px}
.hd.stuck .brand{--brand-h:16px}
.brand{display:block; color:var(--ink); flex:0 0 auto;
  height:var(--brand-h); width:calc(var(--brand-h)*var(--brand-ratio))}
.brand svg,.brand img{width:100%;height:100%;object-fit:contain;display:block}
.nav{display:flex}
/* WordPress menus arrive as a <ul>, the static preview used bare links.
   both shapes land on the same flex row. */
.nav-list{display:flex; gap:clamp(16px,2.1vw,34px); margin:0; padding:0; list-style:none}
.nav-list li{margin:0}
.nav a{position:relative; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-2); padding:5px 0; transition:color .3s}
.nav a::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--ink); transform:scaleX(0); transform-origin:100% 50%; transition:transform .45s var(--e)}
.nav a:hover{color:var(--ink)} .nav a:hover::after{transform:scaleX(1); transform-origin:0 50%}
@media (max-width:760px){.nav{gap:14px} .nav a{font-size:9.5px; letter-spacing:.1em}}
@media (max-width:460px){.nav a:nth-child(3),.nav a:nth-child(4){display:none}}

/* ---------- 6. HERO ----------------------------------------------------- */
/* overflow:hidden matters. The hero glow is an 800px absolutely positioned
   layer; on a phone it widens the layout viewport and the whole page zooms out
   to 696px. Clipping at .hero cuts it only at the screen edges, which is
   invisible, and kills the overflow. */
.hero{padding:clamp(136px,18vh,206px) 0 0; position:relative; isolation:isolate; overflow:hidden}
.hero > .wrap{position:relative; z-index:1}
.hero-stage{position:relative}
.hero-top{display:grid; justify-items:center; text-align:center; gap:clamp(20px,2.3vw,28px)}
.hero .h1{max-width:14ch}
.kicker{margin:0; font-family:var(--mono); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-3)}

/* ---------- 6a. THE MEMBRANE -------------------------------------------
   A tensioned membrane, pinned at its perimeter exactly the way a real one is
   held in its profile, drawn as section lines rather than rendered as a
   surface. Push it and it deforms, ripples outward and settles. Their deepest
   technical territory, made playable. Squash and stretch, but engineering. */
.membrane{position:absolute; inset:0 0 auto 0; z-index:0; pointer-events:none;
  width:100%; height:clamp(430px,70vh,800px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 13%,#000 74%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 13%,#000 74%,transparent 100%);
  opacity:0; transition:opacity 1.4s ease .4s}
.hero.lit .membrane{opacity:1}
.mem-hint{margin:0; font-family:var(--mono); font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3);
  transition:opacity .7s ease, transform .7s var(--e)}
.mem-hint.gone{opacity:0; transform:translateY(6px)}
@media (hover:none),(pointer:coarse){.mem-hint{display:none}}

/* audience switch. their document says the customer and the advocate are
   different people and neither audience alone is sufficient, so the page says
   two different things depending on who is reading it. */
.aud{display:inline-flex; align-items:center; gap:3px; padding:4px;
  border:1px solid var(--hair); border-radius:100px}
.aud button{padding:9px 18px; border-radius:100px; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); transition:color .3s, background-color .3s}
.aud button:hover{color:var(--ink)}
.aud button[aria-pressed="true"]{background:var(--ink); color:var(--paper)}
.aud-copy{margin:0; max-width:58ch; min-height:5.6em; color:var(--ink-2);
  font-size:clamp(14.5px,1.05vw,16.5px); line-height:1.78;
  transition:opacity .3s ease, transform .3s var(--e)}
.aud-copy.swap{opacity:0; transform:translateY(6px)}
@media (max-width:560px){.aud button{padding:9px 13px; font-size:9.5px; letter-spacing:.1em}
  .aud-copy{min-height:8em}}

/* three disciplines, coded. only three, so they get room */
.codes{margin-top:clamp(42px,5.4vw,74px); border-top:1px solid var(--hair);
  display:grid; grid-template-columns:repeat(3,1fr)}
.codes a{position:relative; padding:22px 22px 40px 0; border-right:1px solid var(--hair);
  display:grid; gap:9px; align-content:start; overflow:hidden}
.codes a:last-child{border-right:0}
.codes .c{font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--ink-3);
  transition:color .4s ease}
.codes .n{font-size:clamp(15px,1.35vw,20px); letter-spacing:-.008em; line-height:1.25}
.codes .go{position:absolute; left:0; bottom:15px; font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3); display:inline-flex; align-items:center; gap:6px;
  opacity:0; transform:translateY(6px); transition:opacity .45s var(--e), transform .45s var(--e)}
.codes .go svg{width:11px;height:11px}
.codes a::before{content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--ink); transform:scaleX(0); transform-origin:0 50%; transition:transform .55s var(--e)}
.codes a:hover::before{transform:scaleX(1)}
.codes a:hover .c{color:var(--accent)}
.codes a:hover .go{opacity:1; transform:none}
.codes a .pg{position:absolute; left:0; top:-1px; height:1px; width:0; background:var(--accent); z-index:2}
.codes a.live .pg{width:100%; transition:width 5.2s linear}
.codes a.live .c{color:var(--accent)}
.codes.taken a .pg{display:none}
@media (hover:none),(pointer:coarse){.codes .go{display:none} .codes a{padding-bottom:22px}}
@media (max-width:680px){.codes{grid-template-columns:1fr}
  .codes a{border-right:0; border-bottom:1px solid var(--hair); padding:18px 0 20px}
  .codes a:last-child{border-bottom:0}}

/* ---------- 6b. BANNER (the torch) -------------------------------------- */
.banner{position:relative; margin:clamp(34px,4.2vw,60px) auto 0; max-width:1100px;
  aspect-ratio:1500/866; overflow:hidden; background:var(--sand); isolation:isolate}
.banner::after{content:""; position:absolute; inset:0; z-index:5; background:var(--paper);
  transition:transform 1.15s var(--e2)}
.banner.in::after{transform:translateY(-101%)}
.bstack{position:absolute; inset:0; will-change:transform;
  transition:transform .9s var(--e), filter 1.7s var(--e) .3s;
  filter:brightness(.84) saturate(.8)}
.banner.in .bstack{filter:none}
.bframe{position:absolute; inset:0; opacity:0; transform:scale(1.07);
  transition:opacity 1s var(--e), transform 1.7s var(--e2)}
.bframe.on{opacity:1; transform:scale(1)}
/* both layers read the same --s, so each photograph is embedded once */
/* --s is set inline per frame and MUST be an absolute URL. A relative url()
   inside a custom property resolves against this stylesheet, not the page,
   so a relative path would 404. get_template_directory_uri() is always
   absolute, which is why this is safe in the theme. */
.bframe > span{position:absolute; inset:0; display:block;
  background-image:var(--s); background-size:cover; background-position:center}
.bframe .unlit{filter:brightness(.68) saturate(.24) contrast(.90)}
.bframe .lit{--bw:2600px; --bh:2600px;
  -webkit-mask-image:radial-gradient(closest-side,#000 0%,#000 30%,rgba(0,0,0,.42) 58%,transparent 86%);
          mask-image:radial-gradient(closest-side,#000 0%,#000 30%,rgba(0,0,0,.42) 58%,transparent 86%);
  -webkit-mask-repeat:no-repeat;  mask-repeat:no-repeat;
  -webkit-mask-size:var(--bw) var(--bh);  mask-size:var(--bw) var(--bh);
  -webkit-mask-position:calc(var(--px,50%) - var(--bw)/2) calc(var(--py,50%) - var(--bh)/2);
          mask-position:calc(var(--px,50%) - var(--bw)/2) calc(var(--py,50%) - var(--bh)/2);
  transition:-webkit-mask-size 1.5s var(--e), mask-size 1.5s var(--e)}
.banner.armed[data-beam="spot"]  .lit{--bw:360px;  --bh:360px}
.banner.armed[data-beam="flood"] .lit{--bw:760px;  --bh:760px}
.banner.armed[data-beam="wash"]  .lit{--bw:1120px; --bh:360px}
.bglow{position:absolute; inset:0; z-index:2; pointer-events:none; mix-blend-mode:screen;
  opacity:0; transition:opacity .8s ease;
  background:radial-gradient(circle 260px at var(--px,50%) var(--py,50%),
    rgba(255,206,150,.30) 0%, rgba(255,206,150,.07) 46%, transparent 70%)}
.banner.armed .bglow{opacity:1}
.bbar{position:absolute; z-index:3; inset:auto 0 0 0; color:#FAF9F6;
  padding:clamp(15px,1.9vw,26px); display:flex; align-items:flex-end;
  justify-content:space-between; gap:18px;
  background:linear-gradient(0deg,rgba(20,19,16,.68),rgba(20,19,16,.18) 58%,transparent)}
.bcap{display:flex; align-items:baseline; gap:6px 15px; flex-wrap:wrap; min-width:0;
  transition:opacity .26s ease, transform .26s var(--e)}
.bcap.swap{opacity:0; transform:translateY(5px)}
.bcap .bn{font-size:clamp(14px,1.3vw,18px); letter-spacing:-.01em}
.bcap .bl{font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; opacity:.8}
.beam{display:flex; align-items:center; gap:2px; flex:0 0 auto}
.beam button{padding:6px 11px; border-radius:100px; color:rgba(250,249,246,.62);
  font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  transition:color .3s, background-color .3s}
.beam button:hover{color:#FAF9F6}
.beam button[aria-pressed="true"]{color:#171613; background:rgba(250,249,246,.94)}
.bcursor{position:fixed; z-index:95; left:0; top:0; pointer-events:none;
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  padding:11px 17px; border-radius:100px; background:var(--ink); color:var(--paper);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  opacity:0; transform:translate3d(-50%,-50%,0) scale(.78);
  transition:opacity .35s ease, transform .45s var(--e)}
.bcursor.on{opacity:1; transform:translate3d(-50%,-50%,0) scale(1)}
.bnote{margin:14px auto 0; max-width:1100px; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3)}
@media (hover:none),(pointer:coarse){
  .bframe .lit{-webkit-mask-image:none; mask-image:none}
  .bframe .unlit{display:none}
  .bcursor,.bglow,.beam,.bnote{display:none}
}
@media (max-width:780px){.banner{aspect-ratio:4/3}}

/* ---------- 7. STANDARDS MARQUEE ---------------------------------------- */
/* not a client logo wall. their document flags that many clients cannot be
   named, and this audience reads standards faster than logos anyway. */
.mq{border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
  padding:17px 0; overflow:hidden; margin-top:clamp(52px,6.4vw,96px)}
.mq-track{display:flex; width:max-content; animation:mq 64s linear infinite}
.mq-track span{font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3); padding:0 22px; white-space:nowrap}
.mq:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- 8. SECTIONS ------------------------------------------------- */
.sec{padding:var(--sec) 0}
.sec.sand{background:var(--sand)}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:32px;
  flex-wrap:wrap; margin-bottom:clamp(36px,4.4vw,64px)}
.sec-head .l{display:grid; gap:18px}

/* capability strip. no invented figures: the positioning document lists every
   scale metric as "to compile", so the strip carries what is verifiable today
   and the numbers drop in when they exist. */
.caps-strip{border-top:1px solid var(--hair); display:grid; grid-template-columns:repeat(4,1fr)}
.cs{padding:28px 22px 8px 0; border-right:1px solid var(--hair)}
.cs:last-child{border-right:0}
.cs .t{font-size:clamp(16px,1.5vw,21px); letter-spacing:-.01em; line-height:1.28}
.cs .d{margin-top:11px; font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); line-height:1.7}
@media (max-width:860px){.caps-strip{grid-template-columns:repeat(2,1fr)}
  .cs:nth-child(2n){border-right:0}
  .cs:nth-child(n+3){border-top:1px solid var(--hair); margin-top:20px}}
@media (max-width:520px){.caps-strip{grid-template-columns:1fr}
  .cs{border-right:0; border-top:1px solid var(--hair); margin-top:0; padding:22px 0 6px}
  .cs:first-child{border-top:0}}

/* ---------- 9. THE INTERFACE ARGUMENT ----------------------------------- */
/* section 3.4 of their document is the central commercial argument and the
   wireframe has no room for it at all. It earns a diagram because it shows a
   mechanism rather than decorating one. */
.iface{display:grid; gap:clamp(26px,3vw,44px)}
.iface-switch{display:inline-flex; gap:3px; padding:4px; border:1px solid var(--hair);
  border-radius:100px; justify-self:start}
.iface-switch button{padding:9px 18px; border-radius:100px; font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
  transition:color .3s, background-color .3s}
.iface-switch button[aria-pressed="true"]{background:var(--ink); color:var(--paper)}
.dia{position:relative; display:flex; align-items:stretch; gap:var(--gap,20px);
  transition:gap .8s var(--e2)}
.pkg{flex:1; min-width:0; border:1px solid var(--hair-2); background:var(--paper);
  padding:clamp(18px,2vw,28px); display:grid; gap:10px; align-content:start;
  transition:border-color .8s var(--e2), background-color .8s var(--e2)}
.sec.sand .pkg{background:var(--sand)}
.pkg .pn{font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3)}
.pkg .pt{font-size:clamp(14px,1.25vw,18px); letter-spacing:-.008em; line-height:1.3}
.pkg .pd{font-size:12.5px; line-height:1.65; color:var(--ink-2)}
.seam{position:absolute; top:50%; width:var(--gap,20px); margin-top:-9px; z-index:2;
  display:grid; place-items:center; transition:opacity .55s ease}
.seam i{display:block; width:9px; height:9px; border-radius:50%;
  background:var(--flag); box-shadow:0 0 0 4px rgba(180,72,47,.14)}
.seam.s1{left:calc(33.333% - var(--gap,20px)/3)}
.seam.s2{left:calc(66.666% - var(--gap,20px)*2/3)}
.dia.one{--gap:0px}
.dia.one .pkg{border-color:var(--ink)}
.dia.one .pkg + .pkg{border-left-color:transparent}
.dia.one .seam{opacity:0}
.iface-note{display:grid; gap:14px; max-width:64ch}
.iface-note .flagline{display:flex; align-items:flex-start; gap:11px; color:var(--ink-2);
  font-size:clamp(14px,1.02vw,16px); line-height:1.72}
.iface-note .flagline b{flex:0 0 auto; width:8px; height:8px; margin-top:8px; border-radius:50%;
  background:var(--flag)}
.iface.resolved .flagline b{background:var(--accent)}
@media (max-width:760px){
  .dia{flex-direction:column} .seam{display:none} .dia.one .pkg + .pkg{border-left-color:var(--ink)}
}

/* ---------- 10. DISCIPLINE ROWS ----------------------------------------- */
.disc{border-top:1px solid var(--hair)}
.drow{position:relative; display:grid;
  grid-template-columns:56px minmax(0,.9fr) minmax(0,1.1fr) 40px;
  gap:clamp(14px,2.6vw,40px); align-items:start;
  padding:clamp(24px,2.9vw,38px) 0; border-bottom:1px solid var(--hair);
  transition:padding-left .55s var(--e)}
.drow:hover{padding-left:clamp(8px,1.5vw,26px)}
.drow::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--ink); transform:scaleX(0); transform-origin:0 50%; transition:transform .6s var(--e)}
.drow:hover::after{transform:scaleX(1)}
.drow .no{font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--ink-3);
  transition:color .4s; padding-top:6px}
.drow:hover .no{color:var(--accent)}
.drow .ttl{font-size:clamp(20px,2.4vw,33px); letter-spacing:-.016em; line-height:1.16}
.drow .sys{margin-top:12px; display:flex; flex-wrap:wrap; gap:6px}
.drow .sys span{font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); border:1px solid var(--hair); border-radius:100px; padding:4px 9px}
.drow .dsc{font-size:14px; line-height:1.74; color:var(--ink-2)}
.drow .dsc em{font-style:normal; color:var(--ink)}
.drow .arw{justify-self:end; opacity:.35; transition:opacity .4s, transform .45s var(--e); padding-top:6px}
.drow .arw svg{width:15px;height:15px}
.drow:hover .arw{opacity:1; transform:translateX(5px)}
@media (max-width:980px){
  .drow{grid-template-columns:48px minmax(0,1fr)}
  .drow .dsc{grid-column:2/3; margin-top:14px}
  .drow .arw{display:none}}
#peek{position:fixed; left:0; top:0; z-index:80; width:280px; height:200px; pointer-events:none;
  opacity:0; transform:translate3d(-50%,-50%,0) scale(.86);
  transition:opacity .4s ease, transform .5s var(--e); overflow:hidden;
  box-shadow:0 22px 60px rgba(23,22,19,.18)}
#peek img{width:100%;height:100%;object-fit:cover}
#peek.on{opacity:1; transform:translate3d(-50%,-50%,0) scale(1)}
@media (hover:none),(pointer:coarse),(max-width:980px){#peek{display:none}}

/* ---------- 11. SHOW THE WORK ------------------------------------------- */
/* operating principle 2: show the work, not the claim. Their document notes
   that finished photography shows taste, process photography shows capability,
   and almost nobody in the category publishes the second. */
.layers{display:grid; gap:clamp(20px,2.4vw,32px)}
.lstage{position:relative; aspect-ratio:1500/866; overflow:hidden; background:var(--sand)}
.lstage img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.05); transition:opacity .85s var(--e), transform 1.5s var(--e2)}
.lstage img.on{opacity:1; transform:scale(1)}
.lsteps{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--hair)}
.lsteps button{position:relative; text-align:left; padding:18px 18px 20px 0;
  border-right:1px solid var(--hair); display:grid; gap:8px; align-content:start;
  transition:padding-left .5s var(--e)}
.lsteps button:last-child{border-right:0}
.lsteps button:hover{padding-left:10px}
.lsteps .sn{font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; color:var(--ink-3);
  transition:color .35s}
.lsteps .st{font-size:clamp(13px,1.15vw,16px); letter-spacing:-.005em; line-height:1.3;
  color:var(--ink-2); transition:color .35s}
.lsteps .sd{font-size:11.5px; line-height:1.6; color:var(--ink-3); max-width:34ch}
.lsteps button::before{content:""; position:absolute; left:0; top:-1px; height:1px; width:0;
  background:var(--ink); transition:width .5s var(--e)}
.lsteps button[aria-selected="true"]::before{width:100%}
.lsteps button[aria-selected="true"] .sn{color:var(--accent)}
.lsteps button[aria-selected="true"] .st{color:var(--ink)}
@media (max-width:820px){.lsteps{grid-template-columns:repeat(2,1fr)}
  .lsteps button:nth-child(2n){border-right:0}
  .lsteps button:nth-child(n+3){border-top:1px solid var(--hair)}
  .lsteps .sd{display:none}}

/* ---------- 12. WORK GRID ----------------------------------------------- */
.work{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(26px,3.4vw,54px)}
.card{grid-column:span 6; display:grid}
.card.a{grid-column:1/8} .card.b{grid-column:8/13; margin-top:clamp(0px,7vw,104px)}
.card.c{grid-column:1/6} .card.d{grid-column:6/13; margin-top:clamp(0px,4vw,58px)}
.card.e{grid-column:1/7} .card.f{grid-column:7/13; margin-top:clamp(0px,5vw,74px)}
.card .fig{aspect-ratio:9/6.4}
.card:hover .fig img{transform:scale(1.045)}
.card .meta{display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding-top:19px; border-top:1px solid var(--hair); margin-top:19px}
.card .meta .t{display:grid; gap:7px}
.card .idx{font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; color:var(--ink-3)}
.card .nm{font-size:clamp(17px,1.55vw,23px); letter-spacing:-.012em; line-height:1.25}
.card .loc{font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3)}
.card .arw{width:34px;height:34px;border:1px solid var(--hair-2); border-radius:50%;
  display:grid; place-items:center; flex:0 0 auto;
  transition:background-color .42s var(--e), border-color .42s var(--e), color .42s var(--e)}
.card .arw svg{width:12px;height:12px; transition:transform .42s var(--e)}
.card:hover .arw{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.card:hover .arw svg{transform:translate(3px,-3px)}
@media (max-width:860px){.work{grid-template-columns:1fr; gap:44px}
  .card,.card.a,.card.b,.card.c,.card.d,.card.e,.card.f{grid-column:1/-1; margin-top:0}}

/* ---------- 13. DELIVERY STAGES ----------------------------------------- */
.stages{border-top:1px solid var(--hair)}
.stage{display:grid; grid-template-columns:52px minmax(0,220px) 1fr; gap:clamp(14px,2.4vw,36px);
  padding:15px 0; border-bottom:1px solid var(--hair); align-items:baseline}
.stage .sg{font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; color:var(--ink-3)}
.stage .sname{font-size:clamp(14px,1.15vw,17px); letter-spacing:-.005em}
.stage .sdesc{font-size:13px; line-height:1.66; color:var(--ink-2)}
@media (max-width:760px){.stage{grid-template-columns:44px minmax(0,1fr)}
  .stage .sdesc{grid-column:2/3; margin-top:6px}}
.models{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--hair);
  margin-top:clamp(40px,4.6vw,68px)}
.model{padding:24px 20px 6px 0; border-right:1px solid var(--hair)}
.model:last-child{border-right:0}
.model .mn{font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; color:var(--ink-3)}
.model .mt{margin-top:9px; font-size:clamp(14px,1.25vw,18px); letter-spacing:-.008em}
.model .md{margin-top:9px; font-size:12.5px; line-height:1.66; color:var(--ink-2)}
.model.lead .mn{color:var(--accent)}
@media (max-width:820px){.models{grid-template-columns:repeat(2,1fr)}
  .model:nth-child(2n){border-right:0}
  .model:nth-child(n+3){border-top:1px solid var(--hair); margin-top:18px}}
@media (max-width:480px){.models{grid-template-columns:1fr}
  .model{border-right:0; border-top:1px solid var(--hair); margin-top:0; padding:20px 0 6px}
  .model:first-child{border-top:0}}

/* ---------- 14. INSIGHTS ------------------------------------------------ */
.notes{border-top:1px solid var(--hair)}
.note{position:relative; display:grid; grid-template-columns:1fr minmax(0,180px) 40px;
  gap:clamp(14px,2.4vw,36px); align-items:baseline;
  padding:clamp(20px,2.3vw,30px) 0; border-bottom:1px solid var(--hair);
  transition:padding-left .55s var(--e)}
.note:hover{padding-left:clamp(8px,1.4vw,22px)}
.note::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--ink); transform:scaleX(0); transform-origin:0 50%; transition:transform .6s var(--e)}
.note:hover::after{transform:scaleX(1)}
.note .nt{font-size:clamp(16px,1.7vw,24px); letter-spacing:-.012em; line-height:1.3; max-width:30ch}
.note .nd{font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3)}
.note .arw{justify-self:end; opacity:.35; transition:opacity .4s, transform .45s var(--e)}
.note .arw svg{width:15px;height:15px}
.note:hover .arw{opacity:1; transform:translateX(5px)}
@media (max-width:700px){.note{grid-template-columns:1fr} .note .arw{display:none}
  .note .nd{margin-top:8px}}

/* ---------- 15. ENQUIRY ------------------------------------------------- */
.enq{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--hair)}
.enq a{position:relative; padding:clamp(24px,2.8vw,38px) 24px clamp(26px,3vw,42px) 0;
  border-right:1px solid var(--hair); display:grid; gap:11px; align-content:start;
  transition:padding-left .5s var(--e)}
.enq a:last-child{border-right:0}
.enq a:hover{padding-left:16px}
.enq a::after{content:""; position:absolute; left:0; bottom:-1px; height:1px; width:100%;
  background:var(--ink); transform:scaleX(0); transform-origin:0 50%; transition:transform .55s var(--e)}
.enq a:hover::after{transform:scaleX(1)}
.enq .et{font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent)}
.enq .en{font-size:clamp(16px,1.6vw,22px); letter-spacing:-.012em; line-height:1.28}
.enq .ed{font-size:12.5px; line-height:1.66; color:var(--ink-2); max-width:32ch}
@media (max-width:760px){.enq{grid-template-columns:1fr}
  .enq a{border-right:0; border-bottom:1px solid var(--hair); padding:22px 0 24px}
  .enq a:last-child{border-bottom:0}}

/* ---------- 16. FOOTER -------------------------------------------------- */
.ft{border-top:1px solid var(--hair); padding:clamp(52px,6.2vw,88px) 0 30px; background:var(--sand)}
.ft-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:clamp(26px,3.4vw,54px);
  padding-bottom:clamp(44px,5.2vw,74px)}
.ft-grid h4{margin:0 0 18px; font-family:var(--mono); font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3); font-weight:400}
.ft-grid p{margin:0; font-size:14px; line-height:1.75; color:var(--ink-2)}
.ft-grid ul{margin:0; padding:0; list-style:none; display:grid; gap:9px}
.ft-grid li a{font-size:14px; color:var(--ink-2); transition:color .3s}
.ft-grid li a:hover{color:var(--ink)}
.ft-brand{display:block; color:var(--ink); height:26px;
  width:calc(26px*var(--brand-ratio)); max-width:100%; margin-bottom:22px}
.ft-brand svg{width:100%;height:100%;display:block}
.ft-btm{display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap;
  padding-top:26px; border-top:1px solid var(--hair); font-family:var(--mono); font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
@media (max-width:900px){.ft-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ft-grid{grid-template-columns:1fr}}

/* ---------- 17. ACCESSIBILITY ------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .rv{opacity:1;transform:none} .fig::after{display:none} .fig img{transform:none}
  .ln>span{transform:none} #ld{display:none} .mq-track{animation:none}
  .membrane{display:none}
}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}