:root{
  --obsidian:#0b0b0d; --dawn:#e3b565; --linen:#efe6d6; --paper:#f7f6f2; --stone:#6b6458; --sand:#e6dbc6;
  --serif:"Cormorant Garamond", Georgia, serif; --sans:Lato, system-ui, sans-serif;
  --smooth:cubic-bezier(.22,1,.36,1);           /* close to a no-bounce spring */
  --pad:clamp(20px,4vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:17px;line-height:1.55;background:var(--obsidian);color:var(--linen);overflow-x:hidden}
a{color:inherit}
::selection{background:var(--dawn);color:var(--obsidian)}
.label{font:700 11px/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.serif{font-family:var(--serif);font-weight:600;letter-spacing:-.015em}

/* ---------- gate (loader) ---------- */
#gate{position:fixed;inset:0;z-index:100;pointer-events:auto;cursor:pointer}
#gate svg{width:100%;height:100%;display:block}
#gate .count{position:absolute;left:50%;bottom:calc(14svh);transform:translateX(-50%);color:#9b9385;white-space:nowrap}
#gate .skip{position:absolute;right:var(--pad);bottom:var(--pad);color:#9b9385}
.no-gate #gate{display:none}

/* ---------- nav ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:18px var(--pad);color:var(--linen);mix-blend-mode:difference}
nav .brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:600 24px/1 var(--serif);min-height:44px}
nav .links{display:flex;gap:28px}
nav .links a{text-decoration:none;min-height:44px;display:flex;align-items:center;position:relative}
nav .links a::after{content:"";position:absolute;left:0;right:0;bottom:12px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--smooth)}
nav .links a:hover::after{transform:scaleX(1);transform-origin:left}
nav .clock{display:flex;align-items:center;gap:8px}
nav .clock i{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
nav .clock #city{display:inline-block}
@media (max-width:980px){nav .clock>span:first-child{display:none}} @media (max-width:760px){nav .links a:not(.keep){display:none} nav .clock{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;overflow:hidden;padding:0 var(--pad)}
.hero-copy{position:relative;z-index:2;padding-top:clamp(120px,20svh,200px);margin-left:auto;width:min(760px,100%)}
.hero h1{font:600 clamp(52px,8.4vw,128px)/.94 var(--serif);letter-spacing:-.025em;margin-top:18px}
.line{display:block;overflow:hidden;padding-bottom:.06em}
.line>span{display:inline-block}
#medium{display:inline-block;font-style:italic;font-weight:500}
.hero p{max-width:440px;margin-top:26px;color:#cfc6b6;font-size:18px}
.pile{position:absolute;left:0;right:0;bottom:0;height:46svh;z-index:1;pointer-events:none}
.pile span{position:absolute;bottom:0;font:600 clamp(150px,23vw,400px)/.8 var(--serif);color:var(--linen);transform-origin:50% 60%;will-change:transform}
.pile .i{position:absolute}
.pile .i b{position:absolute;left:50%;top:.02em;width:.15em;height:.15em;margin-left:-.075em;border-radius:50%;background:var(--dawn);box-shadow:0 0 .25em rgba(227,181,101,.55)}
.hero .scroll{position:absolute;z-index:3;left:var(--pad);bottom:var(--pad);color:#cfc6b6}
@media (max-width:760px){.hero-copy{padding-top:120px} .hero h1{font-size:15vw} .pile{height:44svh} .pile span{font-size:44vw}}

/* ---------- manifesto ---------- */
.manifesto{background:var(--linen);color:var(--obsidian);padding:clamp(90px,16vw,200px) var(--pad)}
.manifesto .label{color:var(--stone)}
.manifesto p{font:500 clamp(30px,4.4vw,64px)/1.12 var(--serif);letter-spacing:-.01em;max-width:1200px;margin-top:28px}
.manifesto p .w{opacity:.16} .reduce .manifesto p .w{opacity:1}

/* ---------- services ---------- */
.services{background:var(--linen);color:var(--obsidian);overflow:hidden;padding:0 var(--pad) clamp(90px,12vw,160px)}
.services header{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--obsidian);padding-bottom:14px;color:var(--stone)}
.row{display:grid;grid-template-columns:70px 1fr minmax(0,380px);align-items:center;gap:24px;padding:26px 0;border-bottom:1px solid rgba(11,11,13,.22);cursor:default;position:relative}
.row .n{color:var(--stone)}
.row h3{display:block;font:600 clamp(40px,6.4vw,104px)/.95 var(--serif);letter-spacing:-.025em;transition:transform .6s var(--smooth)}
.row h3 em{font-style:italic;font-weight:500}
.row{transition:color .45s var(--smooth);isolation:isolate}
.row p{color:#3d3a34;font-size:16px;transition:color .45s var(--smooth)}
.row::after{content:"";position:absolute;top:0;bottom:0;left:calc(-1*var(--pad));right:calc(-1*var(--pad));background:var(--obsidian);transform:scaleY(0);transform-origin:50% 100%;transition:transform .65s var(--smooth);z-index:-1}
.row .d{display:block;max-height:0;opacity:0;overflow:hidden;margin-top:0;color:var(--dawn);transition:max-height .6s var(--smooth),opacity .4s,margin .6s var(--smooth)}
@media (hover:hover){.row:hover{color:var(--linen)} .row:hover p{color:#cfc6b6} .row:hover .n{color:var(--dawn)} .row:hover::after{transform:scaleY(1)} .row:hover .d{max-height:3em;opacity:1;margin-top:14px}}
@media (hover:none){.row .d{max-height:none;opacity:1;margin-top:12px;color:var(--stone)}}
.row::before{content:"";position:absolute;left:52px;box-shadow:0 0 18px rgba(227,181,101,.9);top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--dawn);transform:scale(0);transition:transform .5s var(--smooth)}
@media (hover:hover){.row:hover h3{transform:translateX(28px)} .row:hover::before{transform:scale(1)}}
@media (max-width:760px){.row{grid-template-columns:44px 1fr} .row p{grid-column:2}}

/* ---------- sheets (process) ---------- */
.sheets{position:relative;height:100svh;overflow:hidden;background:var(--linen)}
.sheet{position:absolute;left:50%;top:50%;width:min(1100px,90vw);height:min(640px,78svh);margin-left:calc(min(1100px,90vw)/-2);margin-top:calc(min(640px,78svh)/-2);border-radius:22px;padding:clamp(26px,4vw,56px);display:flex;flex-direction:column;justify-content:space-between;color:var(--obsidian);box-shadow:0 -1px 0 rgba(255,255,255,.6) inset,0 40px 80px -40px rgba(11,11,13,.45)}
.sheet .top{display:flex;justify-content:space-between;color:var(--stone)}
.sheet h3{font:600 clamp(48px,8vw,128px)/.92 var(--serif);letter-spacing:-.025em}
.sheet h3 em{font-style:italic;font-weight:500}
.sheet p{max-width:520px;font-size:clamp(16px,1.4vw,19px);margin-top:18px}
.s1{background:var(--paper)} .s2{background:#e9dfcc} .s3{background:#f3ece0} .s4{background:var(--dawn)} .s4 .top{color:#4a3a20}
.s5{background:var(--obsidian);color:var(--linen)} .s5 .top{color:#9b9385}
.sheets .intro{position:absolute;left:var(--pad);top:clamp(90px,14svh,140px);color:var(--stone)}
.reduce .sheets{height:auto;padding:100px var(--pad);display:grid;gap:24px}
.reduce .sheet{position:relative;left:auto;top:auto;margin:0;width:100%;height:auto;min-height:340px}
.reduce .sheets .intro{position:static}

/* ---------- work ---------- */
.work{background:var(--obsidian);padding:clamp(100px,14vw,180px) var(--pad)}
.work>.label{color:#9b9385}
.work h2{font:600 clamp(44px,6vw,96px)/.95 var(--serif);letter-spacing:-.025em;margin:18px 0 56px}
.work h2 em{font-style:italic;font-weight:500;color:#cfc6b6}
/* 3-column grid, rows: [feature x2 | 1] [1 | 1 | 1] [feature x2 | invite] */
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.case{--r:22px;--p:12px;position:relative;display:flex;flex-direction:column;border-radius:var(--r);padding:var(--p);background:var(--linen);color:var(--obsidian);text-decoration:none;transition:transform .7s var(--smooth),box-shadow .7s var(--smooth)}
.case.span2{grid-column:span 2}
/* concentric corners: inner radius = outer radius - padding */
.case .shot{position:relative;height:clamp(200px,21vw,320px);border-radius:calc(var(--r) - var(--p));overflow:hidden;background:var(--paper)}
.case .shot img{width:100%;height:100%;object-fit:cover;object-position:0 0;display:block;transition:transform 1.1s var(--smooth)}
.case .meta{padding:20px 10px 10px;display:flex;flex-direction:column;gap:8px;flex:1}
.case .top{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--stone)}
.case h3{font:600 clamp(30px,2.8vw,46px)/1 var(--serif);letter-spacing:-.02em;margin-top:6px}
.case h3 em{font-style:italic;font-weight:500}
.case p{font-size:16px;color:#3d3a34;max-width:46ch}
.pill{display:inline-flex;align-items:center;gap:7px;font:700 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:7px 11px;border-radius:999px;border:1px solid rgba(11,11,13,.18);color:var(--obsidian);white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:#2f8f5b}
.pill.soon::before{background:var(--dawn);box-shadow:0 0 8px rgba(227,181,101,.9)}
.pill.ghost{border-color:rgba(239,230,214,.3);color:var(--linen)} .pill.ghost::before{background:var(--dawn)}
/* the whole card is one 44px+ target; the round button is the visible affordance */
.case .open{position:absolute;inset:0;border:0;background:none;cursor:pointer;border-radius:var(--r);font:inherit}
.case .open span{position:absolute;right:24px;top:24px;width:44px;height:44px;border-radius:50%;background:rgba(11,11,13,.82);color:var(--linen);display:grid;place-items:center;font-size:22px;line-height:1;transition:transform .6s var(--smooth),background .4s}
.case .open:focus-visible{outline:2px solid var(--dawn);outline-offset:4px}
@media (hover:hover){
  .case:hover{transform:translateY(-6px);box-shadow:0 40px 70px -40px rgba(0,0,0,.8)}
  .case:hover .shot img{transform:scale(1.04)}
  .case:hover .open span{transform:rotate(90deg);background:var(--obsidian)}
}
.case .mock{background:var(--sand)} .case .mock .bar{height:24px;background:#d9ccb3}
.case .mock .blk{margin:18px;height:52%;border-radius:10px;background:var(--obsidian);position:relative}
.case .mock .blk::after{content:"";position:absolute;left:16px;bottom:16px;width:30%;height:12px;border-radius:6px;background:var(--dawn)}
.case .mock .ln{margin:0 18px 8px;height:8px;border-radius:4px;background:var(--stone);opacity:.35}
.case.next{background:transparent;color:var(--linen);border:1px dashed rgba(239,230,214,.35);padding:30px}
.case.next .top{color:#9b9385} .case.next p{color:#cfc6b6}
.case.next .big{font:500 italic clamp(80px,9vw,150px)/.9 var(--serif);color:var(--dawn);margin:auto 0 18px}
.case.next .meta{flex:0;padding:0}
.case.next:focus-visible{outline:2px solid var(--dawn);outline-offset:4px}
@media (max-width:1000px){.cases{grid-template-columns:repeat(2,minmax(0,1fr))} .case.span2{grid-column:span 2}}
@media (max-width:640px){.cases{grid-template-columns:1fr} .case.span2{grid-column:auto} .case .shot{height:56vw}}

/* case dialog: grows out of the card (zoom transition) */
#zoom{position:fixed;z-index:60;background:var(--linen);color:var(--obsidian);border-radius:22px;overflow:auto;display:none;overscroll-behavior:contain}
#zoom .in{max-width:900px;margin:0 auto;padding:clamp(80px,12svh,120px) var(--pad) 90px;opacity:0}
#zoom h3{font:600 clamp(48px,7vw,104px)/.92 var(--serif);letter-spacing:-.025em;margin:16px 0 26px}
#zoom .zshot{border-radius:16px;overflow:hidden;margin:0 0 34px;box-shadow:0 30px 60px -30px rgba(11,11,13,.45)}
#zoom .zshot img{display:block;width:100%;height:auto}
#zoom .zshot.mock{height:300px}
#zoom p{font-size:19px;margin-bottom:18px;color:#2a2824}
#zoom ul{margin:24px 0 36px 20px} #zoom li{margin-bottom:8px}
#zoom .visit{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 28px;border-radius:999px;background:var(--obsidian);color:var(--linen);text-decoration:none;font-weight:700}
#zoom .visit i{width:10px;height:10px;border-radius:50%;background:var(--dawn);box-shadow:0 0 12px rgba(227,181,101,.8)}
#zoom .visit[aria-disabled="true"]{background:transparent;color:var(--stone);border:1px dashed var(--stone);pointer-events:none}
#zoom .close{position:fixed;top:18px;right:var(--pad);width:44px;height:44px;border-radius:50%;border:0;background:var(--obsidian);color:var(--linen);font-size:22px;cursor:pointer;opacity:0;z-index:61}

/* ---------- toolbox ---------- */
.toolbox{background:var(--obsidian);padding:0 0 clamp(80px,10vw,140px);overflow:hidden}
.toolbox .label{padding:0 var(--pad) 22px;color:#9b9385}
.marq{display:flex;white-space:nowrap;border-top:1px solid #2a2a2e;padding:18px 0}
.marq:last-child{border-bottom:1px solid #2a2a2e}
.marq div{display:flex;gap:48px;padding-right:48px;font:500 clamp(28px,3.6vw,52px)/1 var(--serif);animation:marq 46s linear infinite}
.marq.rev div{animation-direction:reverse;color:#9b9385;font-style:italic}
.marq div i{font-style:normal;color:var(--dawn)}
.marq:hover div{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-100%)}}

/* ---------- contact ---------- */
.contact{background:var(--linen);color:var(--obsidian);padding:clamp(100px,16vw,200px) var(--pad) 40px}
.contact .label{color:var(--stone)}
.contact h2{font:600 clamp(56px,10vw,170px)/.9 var(--serif);letter-spacing:-.03em;margin:22px 0 40px;max-width:1300px}
.contact h2 em{font-style:italic;font-weight:500}
.btn{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 28px;border-radius:999px;background:var(--obsidian);color:var(--linen);text-decoration:none;font-weight:700;transition:transform .5s var(--smooth)}
.btn i{width:10px;height:10px;border-radius:50%;background:var(--dawn);box-shadow:0 0 12px rgba(227,181,101,.8)}
.btn:hover{transform:translateY(-3px)}
.btn:focus-visible{outline:2px solid var(--obsidian);outline-offset:4px}
footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:clamp(100px,14vw,180px);padding-top:18px;border-top:1px solid var(--obsidian);color:var(--stone)}
footer a{min-height:44px;display:inline-flex;align-items:center}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}