/* 7Fold Creative. Shared styles for every page. */

/* ---------- tokens ---------- */
:root{
  --paper:#f1eee7; --ink:#151311; --muted:#7a736b; --line:rgba(21,19,17,.14); --green:#1f8f47;
  --gold:#1f8f47; --stone:#cfd0cc; --ghost:rgba(21,19,17,.075);
  --mono:"Courier Prime","Courier New",monospace;
  --dark-muted:#9a928a; --dark-line:rgba(241,238,231,.2);
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --pad:clamp(20px,4vw,56px);
  --sec:clamp(60px,8vw,110px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper);scroll-behavior:smooth}
main{overflow-x:clip}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
img,video,iframe{display:block;width:100%}
.label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.dot{color:var(--green)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}

/* ---------- nav ---------- */
nav{display:flex;justify-content:space-between;align-items:center;padding:22px var(--pad);border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--paper);z-index:10}
nav .mark{font-weight:700;letter-spacing:-.01em}
nav ul{display:flex;gap:28px;list-style:none;font-size:14px}
nav ul a{transition:color .2s}
nav ul a:hover,nav ul a[aria-current]{color:var(--green)}

/* ---------- type ---------- */
.display{font-size:clamp(52px,10.5vw,176px);line-height:.9;letter-spacing:-.045em;font-weight:500}
.h1{font-size:clamp(44px,7.4vw,124px);line-height:.92;letter-spacing:-.045em;font-weight:500}
.h2{font-size:clamp(36px,5vw,76px);line-height:.98;letter-spacing:-.035em;font-weight:500}
.lede{font-size:clamp(17px,1.5vw,21px);line-height:1.45}
.body p+p{margin-top:1em}
.body{font-family:var(--mono);font-size:16px;line-height:1.7;max-width:62ch}

/* ---------- sections ---------- */
.sec{padding:var(--sec) var(--pad)}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:24px}
.page-head{padding:clamp(48px,8vw,110px) var(--pad) 36px}
.page-head .rule{margin-top:clamp(36px,5vw,64px);padding-top:20px;border-top:1px solid var(--ink)}
.dark{background:var(--ink);color:var(--paper)}
.dark .label{color:var(--dark-muted)}

/* ---------- hero meta ---------- */
.meta{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px;font-size:14px;align-content:start}

/* ---------- work index rows ---------- */
.row{display:grid;grid-template-columns:60px 1fr 1fr 120px;gap:20px;align-items:baseline;padding:26px 0;border-top:1px solid var(--line)}
.row:last-of-type{border-bottom:1px solid var(--line)}
.row h3{font-size:clamp(30px,4.6vw,68px);font-weight:500;letter-spacing:-.03em;line-height:1;transition:color .2s}
.row .what{font-family:var(--mono);font-size:14px;color:var(--muted)}
.row .yr{text-align:right;font-size:14px}
.row:hover h3{color:var(--green)}
.row .thumb{display:none}
#peek{position:fixed;left:0;top:0;width:min(34vw,460px);aspect-ratio:16/10;pointer-events:none;opacity:0;transition:opacity .2s;z-index:9;overflow:hidden}
#peek img{height:100%;object-fit:cover}

/* ---------- services columns ---------- */
.svc{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--dark-line)}
.svc>div{padding:26px 22px 30px 0;border-right:1px solid var(--dark-line)}
.svc>div+div{padding-left:22px}
.svc>div:last-child{border-right:0}
.svc .n{font-size:13px;color:var(--dark-muted)}
.svc h4{font-size:24px;font-weight:500;margin:46px 0 12px;letter-spacing:-.01em}
.svc p{font-family:var(--mono);font-size:14px;color:#c9c3bb}
.svc .from{margin-top:22px;font-size:14px;color:var(--paper)}

/* ---------- buttons + links ---------- */
.btn{display:inline-block;font:inherit;font-size:15px;background:var(--ink);color:var(--paper);border:0;padding:16px 22px;cursor:pointer;transition:background .2s}
.btn:hover{background:var(--green)}
.link{border-bottom:1px solid var(--green);padding-bottom:2px;transition:color .2s}
.link:hover{color:var(--green)}

/* ---------- case study ---------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;font-size:15px}
.facts span{display:block;margin-bottom:6px}
.frame{border:1px solid var(--ink);background:#e6e2d9}
.frame-bar{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--ink);font-size:13px}
.frame-stage{position:relative;aspect-ratio:16/10;overflow:hidden}
.frame-stage img{height:100%;object-fit:cover}
.frame-stage iframe{position:absolute;inset:0;height:100%;border:0;background:#fff}
.frame-stage .try{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center}
.frame-stage .try small{display:block;margin-top:10px;font-size:13px;color:var(--paper);text-shadow:0 1px 8px rgba(0,0,0,.5)}
.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;border-top:1px solid var(--ink);padding-top:22px}
.notes h4{font-size:20px;font-weight:500;letter-spacing:-.01em;margin:14px 0 8px}
.notes p{font-family:var(--mono);font-size:14px;color:#4d4842}
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.next{display:flex;justify-content:space-between;align-items:baseline;padding:40px var(--pad);border-top:1px solid var(--line)}
.next a h3{font-size:clamp(30px,4.6vw,68px);font-weight:500;letter-spacing:-.03em;line-height:1;transition:color .2s}
.next a:hover h3{color:var(--green)}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.contact h2{grid-column:1/7}
form{grid-column:8/13;display:grid;gap:14px;align-content:start}
input,select,textarea{font:inherit;font-size:16px;background:transparent;border:0;border-bottom:1px solid var(--ink);padding:12px 0;color:var(--ink);border-radius:0;width:100%}
textarea{min-height:110px;resize:vertical}
form .btn{text-align:left;margin-top:10px}
input:focus,select:focus,textarea:focus{outline:none;border-bottom-color:var(--green)}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}

footer{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:22px var(--pad);border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
footer a:hover{color:var(--ink)}

/* ---------- reveal (only when JS runs) ---------- */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.js .reveal.in{opacity:1;transform:none}


/* =========================================================
   BOOKLET LAYER. Pieces pulled from the printed booklet ref:
   ghosted type, gold blocks, black and white photos with color
   snapshots on top, numbered checkerboard, sideways and stacked type.
   ========================================================= */
.mono{font-family:var(--mono)}
.gold{background:var(--gold);color:var(--ink)}
.gold .label{color:rgba(21,19,17,.62)}
.stone{background:var(--stone)}
section,header{position:relative}

/* huge light type bleeding off the page, behind everything */
.ghost{position:absolute;z-index:0;pointer-events:none;white-space:nowrap;font-weight:300;letter-spacing:-.05em;line-height:.8;color:var(--ghost);font-size:clamp(120px,24vw,420px);user-select:none}
.gold .ghost{color:rgba(241,238,231,.22)}
.dark .ghost{color:rgba(241,238,231,.06)}
.lift{position:relative;z-index:1}

/* black and white photo with a small color snapshot dropped on it */
.collage{position:relative}
.collage .base{width:100%;aspect-ratio:4/5;object-fit:cover}
.collage .snap{position:absolute;width:46%;border:8px solid #fbfaf6;box-shadow:0 10px 24px rgba(21,19,17,.18);transform:rotate(-4deg)}
.collage .snap img{aspect-ratio:4/3;object-fit:cover}
.collage .snap.r{transform:rotate(3deg)}
.collage .tag{position:absolute;background:var(--gold);padding:10px 14px;font-family:var(--mono);font-size:13px;line-height:1.3}

/* sideways type running up the edge */
.side{writing-mode:vertical-rl;transform:rotate(180deg);font-size:clamp(28px,3.2vw,52px);font-weight:400;letter-spacing:-.02em;line-height:1;white-space:nowrap}

/* stacked repeats: WE MAKE / WE MAKE / WE MAKE */
.stack-rows{display:grid;border-top:1px solid var(--ink)}
.stack-rows>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;align-items:center;padding:18px 0;border-bottom:1px solid var(--ink)}
.stack-rows b{font-weight:400;font-size:clamp(40px,6.2vw,104px);letter-spacing:.02em;line-height:.9;text-transform:uppercase}
.stack-rows p{font-family:var(--mono);font-size:15px;max-width:44ch}
.stack-rows p strong{display:block;font-family:var(--sans);font-weight:500;font-size:20px;letter-spacing:-.01em;margin-bottom:4px}

/* numbered checkerboard */
.checker{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--ink)}
.checker>*{aspect-ratio:1;padding:clamp(14px,1.6vw,24px);display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);overflow:hidden;position:relative}
.checker>*:nth-child(4n){border-right:0}
.checker>*:nth-last-child(-n+4){border-bottom:0}
.checker .n{font-family:var(--mono);font-size:14px}
.checker h4{font-size:clamp(20px,2vw,30px);font-weight:400;letter-spacing:-.02em;line-height:1.05}
.checker p{font-family:var(--mono);font-size:13px;line-height:1.45}
.checker .ph{padding:0}
.checker .ph img{height:100%;object-fit:cover}
.checker .paper{background:#fbfaf6}

/* founders */
.founders{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.founder{position:relative}
.founder .pic{position:relative;overflow:hidden;background:var(--stone)}
.founder .pic img{aspect-ratio:4/5;object-fit:cover;transition:opacity .4s}
.founder .pic img+img{position:absolute;inset:0;height:100%;opacity:0}
.founder:hover .pic img+img{opacity:1}
.founder .side{position:absolute;top:0;color:var(--ink)}
.founder h3{font-size:clamp(30px,3.4vw,52px);font-weight:500;letter-spacing:-.03em;line-height:1;margin:22px 0 8px}
.founder .role{display:inline-block;background:var(--gold);padding:6px 10px;font-family:var(--mono);font-size:13px}
.founder p{font-family:var(--mono);font-size:14px;line-height:1.65;margin-top:16px;max-width:44ch}

@media (max-width:900px){
  .checker{grid-template-columns:1fr 1fr}
  .checker>*{border-right:1px solid var(--ink)!important;border-bottom:1px solid var(--ink)!important}
  .checker>*:nth-child(2n){border-right:0!important}
  .stack-rows>div{grid-template-columns:1fr;gap:8px}
  .founders>*{grid-column:1/-1!important}
  .founder .side{display:none}
  .hide-md{display:none}
}

/* ---------- small screens ---------- */
@media (max-width:900px){
  .grid,.contact,.spread,.founders,.gallery{grid-template-columns:minmax(0,1fr)!important}
  .grid>*,.contact>*{grid-column:1/-1!important}
  .row{grid-template-columns:1fr auto;gap:6px 14px}
  .row .num{display:none}
  .row .what{grid-column:1/-1;order:3}
  .row .thumb{display:block;grid-column:1/-1;order:4;margin-top:12px}
  .svc{grid-template-columns:1fr 1fr}
  .svc>div:nth-child(2){border-right:0}
  .svc>div:nth-child(3){padding-left:0}
  .svc>div:nth-child(n+3){border-top:1px solid var(--dark-line)}
  .facts{grid-template-columns:1fr 1fr}
  .notes{grid-template-columns:1fr}
  .gallery>*{grid-column:1/-1!important}
  #peek{display:none}
}
@media (max-width:600px){
  nav ul{gap:16px}
  nav ul li.hide-sm{display:none}
  .svc{grid-template-columns:1fr}
  .svc>div{border-right:0!important;padding-left:0!important;border-top:1px solid var(--dark-line)}
  .svc h4{margin-top:20px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
  .js .reveal{opacity:1;transform:none}
}

/* =========================================================
   WORK PAGE. Each project is a spread, like a booklet page:
   black and white photo that turns to color, a color snapshot
   on top, a gold number tag, sideways type on the edge.
   ========================================================= */
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters button{font:inherit;font-family:var(--mono);font-size:14px;background:transparent;color:var(--ink);border:1px solid var(--ink);padding:8px 14px;cursor:pointer;transition:background .2s,color .2s}
.filters button[aria-pressed="true"],.filters button:hover{background:var(--ink);color:var(--paper)}
.spread{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;align-items:center;padding:clamp(50px,7vw,100px) 0;border-top:1px solid var(--line);position:relative}
.spread[hidden]{display:none}
.spread .shot{grid-column:1/8;position:relative;display:block}
.spread.flip .shot{grid-column:6/13;order:2}
.spread .txt{grid-column:9/13}
.spread.flip .txt{grid-column:1/5}
.spread .frame-img,.spread .snap,.spread .num-tag{display:block}
.spread .frame-img{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--stone)}
.spread .frame-img img{position:absolute;inset:0;height:100%;object-fit:cover;transition:opacity .5s,transform .9s cubic-bezier(.16,1,.3,1)}
.spread .frame-img img.color{opacity:0}
.spread .shot:hover img.color{opacity:1}
.spread .shot:hover .frame-img img{transform:scale(1.02)}
.spread .snap{position:absolute;width:34%;right:-4%;bottom:-10%;border:8px solid #fbfaf6;box-shadow:0 10px 24px rgba(21,19,17,.18);transform:rotate(3deg);overflow:hidden;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.spread.flip .snap{right:auto;left:-4%;transform:rotate(-4deg)}
.spread .shot:hover .snap{transform:rotate(0)}
.spread .snap img{aspect-ratio:1;object-fit:cover;transform:scale(1.8)}
.spread .num-tag{position:absolute;left:-1px;top:-1px;background:var(--gold);padding:10px 14px;font-family:var(--mono);font-size:13px;z-index:2}
.spread.flip .num-tag{left:auto;right:-1px}
.spread .edge{position:absolute;top:clamp(50px,7vw,100px);right:calc(-1 * var(--pad) + 6px);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);writing-mode:vertical-rl}
.spread.flip .edge{right:auto;left:calc(-1 * var(--pad) + 6px);transform:rotate(180deg)}
.spread h2{font-size:clamp(36px,4.4vw,68px);font-weight:500;letter-spacing:-.035em;line-height:.95;margin:14px 0 16px}
.spread .txt>p{font-family:var(--mono);font-size:15px;line-height:1.65}
.spread dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:24px 0;padding-top:16px;border-top:1px solid var(--ink);font-size:14px}
.spread dt{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.count{font-family:var(--mono);font-size:14px}

@media (max-width:900px){
  .spread .shot,.spread.flip .shot,.spread .txt,.spread.flip .txt{grid-column:1/-1}
  .spread.flip .shot{order:0}
  .spread .snap{width:38%;bottom:-8%}
  .spread .txt{margin-top:30px}
  .spread .edge{display:none}
}

/* =========================================================
   DEVICE MOCKUPS. Real mockup photos: a MacBook scene with the
   live site on screen, and an iPhone render in front of it.
   ========================================================= */
.devices{position:relative;display:block;padding-bottom:6%}
.devices .scene{display:block;overflow:hidden;aspect-ratio:16/10;background:#111}
.devices .scene img{height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.devices:hover .scene img{transform:scale(1.025)}
.devices .iphone{position:absolute;right:-5%;bottom:-6%;width:24%;filter:drop-shadow(0 24px 30px rgba(21,19,17,.35));transition:transform .6s cubic-bezier(.16,1,.3,1)}
.devices:hover .iphone{transform:translateY(-10px)}
.spread.flip .devices .iphone{right:auto;left:-5%}
.spread .devices .num-tag{left:-1px;top:-1px}
.spread.flip .devices .num-tag{left:auto;right:-1px}
@media (max-width:900px){.devices .iphone{right:-2%;width:26%}.spread.flip .devices .iphone{left:-2%}}

/* =========================================================
   WEBSITE SPREAD OPTIONS (A, B, C)
   ========================================================= */
.ws{padding:clamp(50px,7vw,100px) 0;border-top:1px solid var(--line);position:relative}
.ws[hidden]{display:none}
.ws .tagline{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px}
.ws .tagline .num-tag{position:static;display:inline-block;background:var(--gold);padding:8px 12px;font-family:var(--mono);font-size:13px}
.ws h2{font-size:clamp(36px,4.4vw,68px);font-weight:500;letter-spacing:-.035em;line-height:.95}
.ws .copy{font-family:var(--mono);font-size:15px;line-height:1.65}
.ws dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:14px;align-content:start}
.ws dt{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.ws .scene{display:block;overflow:hidden;aspect-ratio:16/10;background:#111}
.ws .scene img{height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.ws a:hover .scene img{transform:scale(1.02)}
.ws .panel{display:flex;align-items:center;justify-content:center;overflow:hidden}
.ws .panel img{width:auto;filter:drop-shadow(0 22px 26px rgba(21,19,17,.32));transition:transform .6s cubic-bezier(.16,1,.3,1)}
.ws a:hover .panel img{transform:translateY(-8px) rotate(-1deg)}

/* A: booklet spread. Laptop page + gold page with the phone, text row under */
.ws-a .pages{display:grid;grid-template-columns:2fr 1fr;border:1px solid var(--ink)}
.ws-a .pages>*{border-right:1px solid var(--ink)}
.ws-a .pages>*:last-child{border-right:0}
.ws-a .scene{aspect-ratio:auto;height:100%}
.ws-a .panel{background:var(--gold)}
.ws-a .panel img{height:86%;max-height:520px}
.ws-a .under{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;margin-top:28px}
.ws-a .under h2{grid-column:1/5}.ws-a .under .copy{grid-column:5/9}.ws-a .under .side-col{grid-column:10/13}

/* B: laptop full width, then phone on stone + text in a row */
.ws-b .scene{aspect-ratio:21/10}
.ws-b .row3{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;margin-top:20px;align-items:stretch}
.ws-b .panel{grid-column:1/4;background:var(--stone);aspect-ratio:4/5}
.ws-b .panel img{height:88%}
.ws-b .mid{grid-column:5/9;align-self:center}
.ws-b .mid h2{margin-bottom:16px}
.ws-b .side-col{grid-column:10/13;align-self:center}

/* C: phone first. Big gold panel with the phone beside the text, laptop below as the second page */
.ws-c .top{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;align-items:center}
.ws-c .panel{grid-column:1/6;background:var(--gold);aspect-ratio:4/5}
.ws-c .panel img{height:84%}
.ws-c .txt{grid-column:7/13}
.ws-c .txt h2{margin:14px 0 18px}
.ws-c .txt dl{margin:24px 0;padding-top:16px;border-top:1px solid var(--ink)}
.ws-c .scene{margin-top:20px;margin-left:calc(100% / 12 * 3);aspect-ratio:16/9}
.ws.flip.ws-a .pages{grid-template-columns:1fr 2fr}
.ws.flip.ws-a .pages .panel{order:-1}
.ws.flip.ws-c .panel{grid-column:8/13;order:2}
.ws.flip.ws-c .txt{grid-column:1/7}
.ws.flip.ws-c .scene{margin-left:0;margin-right:calc(100% / 12 * 3)}

@media (max-width:900px){
  .ws-a .pages,.ws.flip.ws-a .pages{grid-template-columns:1fr}
  .ws-a .pages>*{border-right:0;border-bottom:1px solid var(--ink)}
  .ws-a .panel{aspect-ratio:4/3}
  .ws-a .under,.ws-b .row3,.ws-c .top{grid-template-columns:minmax(0,1fr)}
  .ws-a .under>*,.ws-b .row3>*,.ws-c .top>*{grid-column:1/-1!important}
  .ws-b .scene{aspect-ratio:16/10}
  .ws-c .scene,.ws.flip.ws-c .scene{margin:20px 0 0}
  .ws.flip.ws-c .panel{order:0}
}
/* walkthrough videos on the mockups */
.ws .scene video{width:100%;height:100%;object-fit:cover;display:block}
.ws .panel video{width:100%;height:100%;object-fit:cover;display:block;filter:none}
.ws-b .scene{aspect-ratio:16/10}
.ws-b .panel{padding:0}

/* P: one phone walkthrough beside the words */
.ws-p .pair{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;align-items:center}
.ws-p .panel{grid-column:1/6;background:var(--stone);aspect-ratio:4/5}
.ws-p .txt{grid-column:7/12}
.ws-p .txt h2{margin:6px 0 18px}
.ws-p .txt dl{margin:24px 0;padding-top:16px;border-top:1px solid var(--ink)}
.ws-p .tagline{margin-bottom:22px}
.ws.flip.ws-p .panel{grid-column:8/13;order:2}
.ws.flip.ws-p .txt{grid-column:2/7}
@media (max-width:900px){
  .ws-p .pair{grid-template-columns:minmax(0,1fr)}
  .ws-p .pair>*{grid-column:1/-1!important}
  .ws.flip.ws-p .panel{order:0}
  .ws-p .txt{margin-top:26px}
}

/* DESIGN COLLECTION: a pinned up wall of pieces beside the words */
.g-wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;align-items:start}
.g-grid{grid-column:1/9;columns:3;column-gap:14px}
.g-tile{display:block;break-inside:avoid;margin-bottom:14px;position:relative;overflow:hidden;background:var(--stone)}
.g-tile img{transition:transform .8s cubic-bezier(.16,1,.3,1)}
.g-tile:hover img{transform:scale(1.03)}
.g-tile span{position:absolute;left:0;bottom:0;background:var(--paper);font-family:var(--mono);font-size:12px;padding:6px 9px;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
.g-tile:hover span{opacity:1;transform:none}
.ws-g .txt{grid-column:9/13;position:sticky;top:110px}
.ws-g .txt h2{margin-bottom:16px}
.ws-g .txt dl{margin:24px 0;padding-top:16px;border-top:1px solid var(--ink)}
.gallery-page{columns:2;column-gap:20px}
.gallery-page figure{break-inside:avoid;margin-bottom:28px}
.gallery-page figcaption{display:flex;justify-content:space-between;margin-top:10px;font-size:14px}
.gallery-page figcaption span{font-family:var(--mono);color:var(--muted);font-size:13px}
@media (max-width:900px){.g-wrap{grid-template-columns:minmax(0,1fr)}.g-grid,.ws-g .txt{grid-column:1/-1;position:static}.g-grid{columns:2}.gallery-page{columns:1}}

/* design collection v2: orderly rows, like pages in the booklet */
.g-head{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;align-items:end;margin-bottom:28px}
.g-head h2{grid-column:1/7}
.g-head>div{grid-column:8/13}
.g-row{display:grid;gap:20px;margin-bottom:20px}
.g-row.g-2{grid-template-columns:1fr 1fr}
.g-row.g-4{grid-template-columns:repeat(4,1fr)}
.g-row figure{margin:0}
.g-row figure a{display:block;overflow:hidden;background:var(--stone)}
.g-row img{transition:transform .8s cubic-bezier(.16,1,.3,1)}
.g-row figure a:hover img{transform:scale(1.025)}
.g-row figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:14px}
.g-row figcaption span{font-family:var(--mono);font-size:13px;color:var(--muted)}
@media (max-width:900px){.g-head{grid-template-columns:minmax(0,1fr)}.g-head>*{grid-column:1/-1!important}.g-row.g-2{grid-template-columns:1fr}.g-row.g-4{grid-template-columns:1fr 1fr}}

/* =========================================================
   DESIGN DECK: Into the Night in motion up front, the other
   pieces stacked behind it, just peeking out
   ========================================================= */
.deck{position:relative;display:block;padding:6% 8% 9%}
.deck .card{position:absolute;width:56%;box-shadow:0 14px 34px -12px rgba(21,19,17,.45);transition:transform .7s cubic-bezier(.16,1,.3,1)}
.deck .c1{left:2%;top:1%;transform:rotate(-6deg)}
.deck .c2{right:1%;top:3%;transform:rotate(5deg)}
.deck .c3{left:5%;bottom:3%;transform:rotate(4deg)}
.deck .c4{width:25%;right:2%;bottom:1%;transform:rotate(-5deg)}
.deck .c5{width:22%;left:0;top:34%;transform:rotate(-9deg)}
.deck:hover .c1{transform:rotate(-8deg) translate(-3%,-4%)}
.deck:hover .c2{transform:rotate(7deg) translate(3%,-4%)}
.deck:hover .c3{transform:rotate(6deg) translate(-3%,5%)}
.deck:hover .c4{transform:rotate(-7deg) translate(5%,5%)}
.deck:hover .c5{transform:rotate(-12deg) translate(-8%,0)}
.deck-cap{position:absolute;left:8%;bottom:2%;display:flex;gap:12px;font-size:14px;z-index:3}
.deck-cap span{font-family:var(--mono);font-size:13px;color:var(--muted)}

/* the Into the Night hero, rebuilt from its layers (same motion as the event page) */
.stage{position:relative;z-index:2;aspect-ratio:16/9;overflow:hidden;background:#1b1b1b;--mx:0;--my:0;user-select:none;box-shadow:0 24px 50px -18px rgba(21,19,17,.55)}
.stage img{display:block;width:100%;pointer-events:none}
.stage .hl-base{position:absolute;inset:0;height:100%;object-fit:cover;transform:scale(1.03) translate(calc(var(--mx) * -4px),calc(var(--my) * -4px));transition:transform .6s cubic-bezier(.2,.8,.3,1)}
.stage .hl{position:absolute;transform:translate(calc(var(--mx) * var(--d) * 1px),calc(var(--my) * var(--d) * 1px));transition:transform .6s cubic-bezier(.2,.8,.3,1)}
.stage .hl img{animation:var(--in),var(--idle);animation-play-state:paused}
.stage.go .hl img{animation-play-state:running}
.hl-teal{--in:sway-in 1s .1s both;--idle:sway 5s 1.1s ease-in-out infinite}.hl-teal img{transform-origin:0% 100%}
.hl-title{--in:slam .9s .25s cubic-bezier(.2,1.4,.4,1) both;--idle:breathe 6s 1.2s ease-in-out infinite}
.hl-figure{--in:rise 1.1s .45s cubic-bezier(.2,.9,.3,1) both;--idle:groove 4.2s 1.6s ease-in-out infinite}.hl-figure img{transform-origin:60% 100%}
.hl-y2026{--in:pop .8s .75s cubic-bezier(.3,1.8,.5,1) both;--idle:bob 3.6s 1.6s ease-in-out infinite}
.hl-burst{--in:spin-in .9s .9s cubic-bezier(.3,1.5,.5,1) both;--idle:wobble 7s 1.8s ease-in-out infinite}.hl-burst img{transform-origin:62% 32%}
.stage [class*="hl-sp"]{--in:pop .7s var(--t,1s) cubic-bezier(.3,1.8,.5,1) both;--idle:twinkle var(--p,4s) calc(var(--t,1s) + .7s) ease-in-out infinite}
.hl-sp0{--t:1.05s;--p:4.4s}.hl-sp1{--t:1.15s;--p:5.2s}.hl-sp2{--t:1s;--p:3.8s}.hl-sp3{--t:1.3s;--p:3.2s}.hl-sp4{--t:1.2s;--p:4.8s}.hl-sp5{--t:.95s;--p:5.6s}
.stage .hl.spin img{animation:spin .9s cubic-bezier(.3,1.3,.5,1)}
@keyframes sway-in{from{opacity:0;transform:rotate(-14deg) scale(.8)}to{opacity:1;transform:none}}
@keyframes sway{0%,100%{transform:rotate(0) skewX(0)}50%{transform:rotate(-2.5deg) skewX(3deg)}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.018) rotate(-.4deg)}}
@keyframes groove{0%,100%{transform:rotate(0) translateY(0)}25%{transform:rotate(.8deg) translateY(-.6%)}75%{transform:rotate(-.6deg) translateY(.4%)}}
@keyframes pop{from{opacity:0;transform:scale(.3) rotate(-12deg)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2.2%) rotate(-1.4deg)}}
@keyframes spin-in{from{opacity:0;transform:rotate(-120deg) scale(.4)}to{opacity:1;transform:none}}
@keyframes wobble{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(6deg) scale(1.04)}}
@keyframes spin{from{transform:rotate(0) scale(1)}50%{transform:rotate(200deg) scale(1.25)}to{transform:rotate(360deg) scale(1)}}
@keyframes slam{from{opacity:0;transform:scale(1.18) rotate(-2deg)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(14%)}to{opacity:1;transform:none}}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.06) rotate(6deg)}}
@media (prefers-reduced-motion:reduce){.stage .hl img{animation:none!important}.stage .hl,.stage .hl-base{transform:none!important}.deck .card{transition:none}}
@media (max-width:600px){.deck{padding:10% 4% 14%}.deck .c4,.deck .c5{display:none}}
/* Into the Night on the LED wall mockup */
.wall{display:block;overflow:hidden;background:#000}
.wall video{display:block;width:100%;aspect-ratio:2000/714;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.wall:hover video{transform:scale(1.015)}
.wall-cap{display:flex;gap:12px;margin-top:10px;font-size:14px}
.wall-cap span{font-family:var(--mono);font-size:13px;color:var(--muted)}

/* INTO THE NIGHT flat lay: the real campaign pieces dropped on the panel */
.lay{position:relative;display:block;overflow:hidden;--mx:0;--my:0}
.lay .pc{position:absolute;box-shadow:0 2px 3px rgba(21,19,17,.18),0 16px 30px -10px rgba(21,19,17,.38);
  transform:translate(calc(var(--mx) * var(--d) * .6px),calc(var(--my) * var(--d) * .6px)) rotate(var(--r));transition:transform .6s cubic-bezier(.2,.8,.3,1);opacity:0}
.lay .pc-banner{width:30%;left:6%;top:-4%;--r:-4deg}
.lay .pc-story{width:30%;right:7%;top:5%;--r:5deg}
.lay .pc-poster{width:50%;left:20%;top:16%;--r:-2deg}
.lay .pc-slide{width:34%;left:4%;bottom:6%;--r:4deg}
.lay .pc-card{width:40%;right:5%;bottom:13%;--r:-7deg}
.lay .pc-sticker{width:24%;right:28%;bottom:3%;--r:10deg;box-shadow:none;filter:drop-shadow(0 10px 12px rgba(21,19,17,.32))}
.lay.go .pc{animation:drop .8s cubic-bezier(.2,1.2,.4,1) both}
.lay.go .pc-banner{animation-delay:.05s}.lay.go .pc-story{animation-delay:.18s}.lay.go .pc-poster{animation-delay:.32s}
.lay.go .pc-slide{animation-delay:.46s}.lay.go .pc-card{animation-delay:.6s}.lay.go .pc-sticker{animation-delay:.76s}
@keyframes drop{from{opacity:0;translate:0 -30px;scale:1.08}to{opacity:1;translate:0 0;scale:1}}
.lay:hover .pc-card{--r:-3deg}.lay:hover .pc-sticker{--r:18deg}.lay:hover .pc-story{--r:8deg}
@media (prefers-reduced-motion:reduce){.lay .pc{opacity:1;animation:none!important;transform:rotate(var(--r))}}
.ws .panel.lay img.pc{height:auto;filter:none}
.ws .panel.lay img.pc-banner{width:30%}.ws .panel.lay img.pc-story{width:30%}.ws .panel.lay img.pc-poster{width:50%}
.ws .panel.lay img.pc-slide{width:34%}.ws .panel.lay img.pc-card{width:40%}.ws .panel.lay img.pc-sticker{width:24%;filter:drop-shadow(0 10px 12px rgba(21,19,17,.32))}

/* INTO THE NIGHT 4:5, the same build as the event page poster: pieces slam and rise in, sparkles twinkle */
.ws .panel.itn-box{background:var(--stone);display:flex;align-items:center;justify-content:center}
.itn45{position:relative;width:76%;aspect-ratio:4/5;overflow:hidden;container-type:inline-size;background:#d4682a url("itn45/plate.webp") center/cover;box-shadow:0 22px 40px -18px rgba(21,19,17,.45)}
.itn45 img{position:absolute;width:auto;height:auto;filter:none;pointer-events:none;transform:none}

.itn45 .p-title{left:15.23%;top:24.04%;width:64.26%!important;opacity:0}
.itn45 .p-figure{left:72.87%;top:12.44%;width:27.13%!important;opacity:0}
.itn45 .p-burst{left:72.69%;top:0;width:27.31%!important}
.itn45 .burst-txt{position:absolute;left:80.2%;top:5.2%;width:19%;font-weight:800;color:#c9de50;text-transform:uppercase;font-size:3.55cqw;line-height:1.02;letter-spacing:-.01em}
.itn45 .burst-txt span{display:block;white-space:nowrap}
.itn45 .sp{z-index:3;animation:twinkle 5s ease-in-out infinite}
.itn45 .sp-large{left:61.67%;top:67.04%;width:38.33%!important;animation-delay:-1s}
.itn45 .sp-bottom{left:36.76%;top:71.11%;width:32.04%!important;animation-delay:-2.5s}
.itn45 .sp-right{left:89.17%;top:12.07%;width:10.83%!important;animation-delay:-.6s}
.itn45 .sp-top{left:41.94%;top:0;width:23.61%!important;animation-delay:-3.4s}
.itn45 .sp-topleft{left:0;top:0;width:26.85%!important;animation-delay:-1.8s}
.itn45.go .p-title{animation:slam .9s .15s cubic-bezier(.2,1.4,.4,1) both}
.itn45.go .p-figure{animation:rise 1.1s .35s cubic-bezier(.2,.9,.3,1) both}
@media (prefers-reduced-motion:reduce){.itn45 .p-title,.itn45 .p-figure{opacity:1}.itn45 .sp,.itn45.go .p-title,.itn45.go .p-figure{animation:none}}
/* no build in: everything is already there and just keeps moving */
.itn45 .p-title,.itn45 .p-figure{opacity:1}
.itn45 .p-title,.itn45.go .p-title{animation:breathe 6s ease-in-out infinite}
.itn45 .p-figure,.itn45.go .p-figure{animation:groove 4.2s ease-in-out infinite;transform-origin:60% 100%}
.itn45 .p-burst{animation:wobble 7s ease-in-out infinite;transform-origin:62% 32%}
/* brand mockups inset in the box, crossfading */
.mock-fade{position:relative;width:76%;aspect-ratio:4/5;overflow:hidden;box-shadow:0 22px 40px -18px rgba(21,19,17,.45)}
.ws .panel .mock-fade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:none;animation:mockfade 10s ease-in-out infinite}
.ws .panel .mock-fade img:nth-child(2){animation-delay:-5s}
@keyframes mockfade{0%,40%{opacity:1}50%,90%{opacity:0}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.ws .panel .mock-fade img{animation:none}.ws .panel .mock-fade img:nth-child(2){display:none}}
.ws .panel .mock-fade.single img{animation:slowzoom 16s ease-in-out infinite alternate}
@keyframes slowzoom{from{transform:scale(1)}to{transform:scale(1.06)}}
/* Pepp: their four posts, one at a time, square, inset like the others */
.mock-fade.cycle{aspect-ratio:1;width:78%}
.ws .panel .mock-fade.cycle img{animation:cycle4 12s infinite}
.ws .panel .mock-fade.cycle img:nth-child(1){animation-delay:0s}
.ws .panel .mock-fade.cycle img:nth-child(2){animation-delay:3s}
.ws .panel .mock-fade.cycle img:nth-child(3){animation-delay:6s}
.ws .panel .mock-fade.cycle img:nth-child(4){animation-delay:9s}
.ws .panel .mock-fade.cycle img:not(:first-child){opacity:0}
@keyframes cycle4{0%{opacity:0}3%,25%{opacity:1}28%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.ws .panel .mock-fade.cycle img{animation:none}.ws .panel .mock-fade.cycle img:not(:first-child){display:none}}
/* PEPP 4:5: their posts and the cup guy, idling like Into the Night */
.pepp45{position:relative;width:76%;aspect-ratio:4/5;overflow:hidden;background:#efc9c8;box-shadow:0 22px 40px -18px rgba(21,19,17,.45)}
.ws .panel .pepp45 img{position:absolute;height:auto;filter:none}
.ws .panel .pepp45 .pz-p2{width:54%;left:5%;top:6%;--r:-6deg;box-shadow:0 10px 22px -10px rgba(21,19,17,.4);animation:pbob 4.4s ease-in-out infinite}
.ws .panel .pepp45 .pz-p3{width:50%;right:4%;top:12%;--r:5deg;box-shadow:0 10px 22px -10px rgba(21,19,17,.4);animation:pbob 5s -2s ease-in-out infinite}
.ws .panel .pepp45 .pz-guy{width:100%;left:-2%;bottom:-3%;--r:0deg;transform-origin:50% 100%;animation:pgroove 3.6s ease-in-out infinite}
@keyframes pbob{0%,100%{transform:rotate(var(--r)) translateY(0)}50%{transform:rotate(calc(var(--r) - 1.5deg)) translateY(-3%)}}
@keyframes pgroove{0%,100%{transform:rotate(0)}25%{transform:rotate(1.6deg) translateY(-1%)}75%{transform:rotate(-1.4deg) translateY(.6%)}}
@media (prefers-reduced-motion:reduce){.ws .panel .pepp45 img{animation:none!important;transform:rotate(var(--r))}}
.ws .panel .pepp45 .pz-p2{width:40%;left:6%;top:6%}
.ws .panel .pepp45 .pz-p3{width:40%;right:6%;top:9%}
.ws .panel .pepp45 .pz-guy{width:84%;left:6%;bottom:-2%}
.ws .panel .mock-fade.still img{animation:none;opacity:1}
.spread .frame-img video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ws .panel .mock-fade video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* HOME HERO: gold statement */
.hC{position:relative;overflow:hidden;min-height:calc(100vh - 70px);padding:clamp(40px,6vw,90px) var(--pad);display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.hC-stack>div{padding:12px 0}
.hC-stack b{font-size:clamp(28px,3.4vw,52px)}
.hC-foot{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;border-top:1px solid var(--ink);padding-top:22px}

/* =========================================================
   GOLD AS THE THIRD COLOR: off white and near black carry the
   site, gold only shows up in small accents
   ========================================================= */
.hC.gold{background:var(--ink);color:var(--paper)}
.hC.gold .label{color:#9a928a}
.hC.gold .ghost{color:rgba(241,238,231,.06)!important}
.hC h1 span{color:var(--gold)!important}
.hC .stack-rows,.hC .stack-rows>div{border-color:rgba(241,238,231,.22)}
.hC-foot{border-top-color:rgba(241,238,231,.22)!important}
.hC .btn{background:var(--gold);color:var(--ink)}
.hC .btn:hover{background:var(--paper)}
/* the other gold blocks become quiet */
.gold:not(.hC){background:var(--paper);color:var(--ink);border-top:1px solid var(--line)}
.gold:not(.hC) .label{color:var(--muted)}
.gold:not(.hC) .ghost{color:var(--ghost)!important}
.checker .gold{background:var(--ink);color:var(--paper)}
.founder .role{background:transparent;border:1px solid var(--ink);padding:5px 9px}
/* hero: black on cream */
.hC.gold{background:var(--paper);color:var(--ink);border-bottom:1px solid var(--line)}
.hC.gold .label{color:var(--muted)}
.hC.gold .ghost{color:var(--ghost)!important}
.hC .stack-rows,.hC .stack-rows>div{border-color:var(--ink)}
.hC-foot{border-top-color:var(--ink)!important}
.hC .btn{background:var(--ink);color:var(--paper)}
.hC .btn:hover{background:var(--gold);color:var(--ink)}

/* HOME SERVICES: dark columns */
.o4{padding:var(--sec) var(--pad)}
.o4h{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:end;margin-bottom:44px}
.o4h .label{grid-column:1/-1}
.o4h h2{margin-top:0!important}
.o4h .mono{font-size:15px;color:#c9c3bb}
.o4g{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--dark-line)}
.o4c{padding:26px 22px 30px;border-right:1px solid var(--dark-line);display:flex;flex-direction:column;gap:12px}
.o4c:first-child{padding-left:0}.o4c:last-child{border-right:0;padding-right:0}
.o4c .big{font-size:84px;font-weight:300;letter-spacing:-.05em;line-height:.9;color:#5d5751}
.o4c b{font-weight:500;font-size:26px;letter-spacing:-.01em}
.o4c p{font-size:13px;color:#c9c3bb}
.o4c ul{list-style:none;font-size:13px;color:#c9c3bb}
.o4c li{padding:6px 0;border-top:1px solid var(--dark-line)}
.o4c .pr{margin-top:auto;padding-top:10px;font-family:var(--mono);font-size:13px;color:var(--paper)}
@media (max-width:900px){.o4h{grid-template-columns:minmax(0,1fr)}.o4g{grid-template-columns:1fr 1fr}.o4c{padding-left:0}.o4c:nth-child(2){border-right:0}.o4c:nth-child(n+3){border-top:1px solid var(--dark-line)}}
@media (max-width:600px){.o4g{grid-template-columns:1fr}.o4c{border-right:0!important;border-top:1px solid var(--dark-line)}}

/* testimonial */
.quote blockquote{max-width:1100px;margin-top:28px}
.quote blockquote>p{font-size:clamp(30px,3.8vw,58px);line-height:1.08;letter-spacing:-.03em;font-weight:400;color:var(--paper)}
.q-who{display:flex;align-items:center;gap:18px;margin-top:40px;padding-top:22px;border-top:1px solid var(--dark-line);flex-wrap:wrap;background:none;color:inherit;font-size:15px}
.q-who b{display:block;font-weight:500;font-size:18px;color:var(--paper)}
.q-pic{width:64px;height:64px;border-radius:50%;background:#3a3532;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;color:#a59a90;overflow:hidden;flex:none}
.q-pic img{width:100%;height:100%;object-fit:cover}
.q-who .link{margin-left:auto;color:var(--paper)}
.quote .q-who{padding:22px 0 0;max-width:none}

/* testimonial: block centered on the page, text stays left */
.quote>.label,.quote blockquote{display:block;max-width:1100px;margin-left:auto;margin-right:auto}
.q-case blockquote>p{font-size:clamp(26px,2.8vw,42px);line-height:1.12;text-wrap:pretty}



/* hero: let the ghost word finish below the hero instead of being cut off at the bottom (same spot, same size) */
.hC{overflow:visible;overflow-x:clip}
.hC + .sec{position:relative}