/* Golden Ratio Studios: 3D site. Two themes from one set of tokens; the WebGL scenes read the same tokens. */
:root,[data-gr="light"]{
  --bg:#F2EDE4; --panel:#FAF7F1; --ink:#111111; --soft:#3b3a37; --muted:#8A877F; --line:#DED6C8;
  --gold:#FFC72C; --gold-edge:#D9A514; --cobalt:#2B2BE8; --btn:#111111; --btn-ink:#F2EDE4;
}
[data-gr="dark"]{
  --bg:#0B0B0C; --panel:#141416; --ink:#ECE8DC; --soft:#bdb9b0; --muted:#8A877F; --line:#26262A;
  --gold:#FFC72C; --gold-edge:#D9A514; --cobalt:#5B5BFF; --btn:#ECE8DC; --btn-ink:#0B0B0C;
}
:root{
  --serif:'aktiv-grotesk','Aktiv Grotesk','Aktiv Grotesk Arbc','Inter Tight',Arial,sans-serif; --sans:'aktiv-grotesk','Aktiv Grotesk','Aktiv Grotesk Arbc','Inter Tight',Arial,sans-serif; --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --gl:max(16px,3vw,env(safe-area-inset-left,0px)); --gr:max(16px,3vw,env(safe-area-inset-right,0px));
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.serif{font-family:var(--serif);font-weight:600;text-transform:none;line-height:.95;letter-spacing:-.035em;text-wrap:balance}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.muted{color:var(--muted)}
.lead{font-size:clamp(18px,1.5vw,21px);line-height:1.6;max-width:58ch;color:var(--soft)}
.eyebrow{font-family:var(--sans);font-style:normal;font-size:19px;color:var(--muted)}
.sq{display:inline-block;width:9px;height:9px;background:var(--gold);margin-right:10px;vertical-align:0}
[data-gr="dark"] .on-light,[data-gr="light"] .on-dark,:root:not([data-gr]) .on-dark{display:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:stretch;background:var(--btn);color:var(--btn-ink);text-decoration:none;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;border:0;cursor:pointer}
.btn span{padding:12px 16px}.btn i{font-style:normal;padding:12px 12px;border-left:1px solid color-mix(in srgb,var(--btn-ink) 25%,transparent)}
.btn:hover{filter:brightness(.9)}
.btn.gold{background:var(--gold);color:#111}.btn.gold i{border-left-color:var(--gold-edge)}

/* ---------- nav ---------- */
.nav{position:fixed;z-index:50;top:env(safe-area-inset-top,0px);left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:20px var(--gr) 0 var(--gl);pointer-events:none}
.nav>*{pointer-events:auto}
.nav::before{content:"";position:absolute;inset:0 0 -18px;background:linear-gradient(var(--bg) 55%,color-mix(in srgb,var(--bg) 0%,transparent));z-index:-1;pointer-events:none}   /* keeps the logo readable over scrolling content */
.nav .logo img{height:32px;width:auto}   /* the horizontal lockup: the pixel G beside GOLDEN RATIO and STUDIOS */
.pill{display:flex;align-items:center;gap:14px;background:color-mix(in srgb,var(--panel) 80%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:999px;padding:10px 18px}
.pill a{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.pill a[aria-current="page"]{color:var(--gold)}
.pill a:hover{color:var(--muted)}
.pill i{width:18px;height:1px;background:var(--line)}
.menu,.sheet{display:none}
@media(max-width:760px){
  .pill{display:none}
  .menu{display:block;background:var(--btn);color:var(--btn-ink);border:0;border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:10px 16px}
  .nav.open .sheet{display:flex;flex-direction:column;gap:8px;position:fixed;top:72px;left:16px;right:16px;background:var(--panel);border:1px solid var(--line);padding:22px}
  .sheet a{font-family:var(--serif);font-weight:600;letter-spacing:-.02em;font-size:34px;text-decoration:none;line-height:1.1}
  .nav .logo img{height:26px}
}

/* ---------- home: 3D flight (js/gl3d.js) ---------- */
.gl3d{position:relative;height:1100vh}
.g-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.g-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.g-ui{position:absolute;inset:0;pointer-events:none;z-index:2}
.g-block{position:absolute;opacity:0;transition:opacity .6s}
.g-block.on{opacity:1}
.g-block.on .btn{pointer-events:auto}
#g-b1{left:50%;bottom:6vh;transform:translateX(-50%);text-align:center;width:min(92vw,1100px)}
.g-clients{display:flex;align-items:center;justify-content:center;gap:clamp(18px,3vw,44px);flex-wrap:wrap;margin-top:clamp(26px,5vh,54px);padding-top:22px;border-top:1px solid var(--line)}
.g-clients{flex-wrap:nowrap;justify-content:flex-start}
.g-tb{flex:none;display:flex;flex-direction:column;gap:6px;text-align:left}
.g-mq{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.g-mq .mq{align-items:center;gap:clamp(30px,4vw,60px);animation-duration:60s}
.g-clients img{height:26px;width:auto;max-width:120px;object-fit:contain;filter:brightness(0);opacity:.8;flex:none}
.sample-tag{display:inline-block;margin-left:10px;padding:3px 7px;border:1px dashed var(--gold);color:var(--muted);font-size:9px;letter-spacing:.12em;vertical-align:middle}
.g-tb .sample-tag{margin-left:0}
[data-gr="dark"] .g-clients img,[data-gr="dark"] .logo-t img{filter:brightness(0) invert(1)}
.g-claim{font-size:clamp(34px,4.6vw,76px);margin:0 0 clamp(22px,4vh,40px);max-width:16ch}
.g-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.g-stats>div{display:flex;flex-direction:column;gap:8px;padding:20px 20px 0 0}
.g-stats b{font-size:clamp(48px,6vw,104px);line-height:.85}
@media(max-width:700px){.g-stats{grid-template-columns:1fr 1fr;gap:10px}.g-stats b{font-size:46px}.g-clients img{height:20px}}
#g-b1 h1{margin:0;font-size:clamp(30px,3.4vw,52px)}#g-b1 .g-tag{font-size:clamp(14px,1.15vw,18px);letter-spacing:.22em;margin-top:16px;color:var(--soft)}   /* the line under the name reads at a glance */
#g-b1 .g-sub{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:18px;color:var(--ink)}
#g-b1 .g-sub i{width:min(180px,24vw);height:1px;background:var(--ink)}
.g-tag{font-family:var(--sans);font-style:normal;font-size:clamp(18px,1.6vw,24px);color:var(--muted);margin:10px 0 0}
#g-b2{left:var(--gl);right:var(--gr);bottom:8vh}
#g-b3{left:var(--gl);right:var(--gr);top:clamp(100px,14vh,140px);display:flex;justify-content:space-between;align-items:flex-start;gap:30px}
#g-b3 .serif{font-size:clamp(38px,5vw,84px);margin:10px 0 0}
/* desktop: the service text is a callout tag with a leader line, tracked to its sculpture in the flight */
.g-lead{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 382ms steps(4,end)}
.g-lead.on{opacity:1}
.g-lead line{stroke:var(--ink);stroke-width:1}.g-lead rect{fill:var(--gold)}
@media(min-width:701px){
  #g-b3.tag{left:0;right:auto;top:0;width:min(400px,34vw);flex-direction:column;gap:18px;padding:22px 24px 24px;border-left:1px solid var(--ink);background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:opacity 382ms steps(4,end)}
  #g-b3.tag .serif{font-size:clamp(30px,2.6vw,44px);margin:8px 0 0}
  #g-b3.tag .g-side{max-width:none}#g-b3.tag .g-side p{font-size:15px;margin:0 0 14px}
}
.g-side{max-width:340px}
.g-side p{margin:0 0 16px;color:var(--soft)}
#g-b4{left:50%;bottom:9vh;transform:translateX(-50%);text-align:center;width:min(92vw,1000px)}
#g-b4 .serif{font-size:clamp(34px,4.4vw,70px);margin:12px 0 22px}
#g-b5{right:var(--gr);top:50%;transform:translateY(-50%);width:min(44vw,560px)}
#g-b5 .serif{font-size:clamp(46px,6vw,104px);margin:14px 0 12px}
.g-quote{font-family:var(--sans);font-style:normal;font-size:clamp(20px,1.8vw,28px);line-height:1.3;color:var(--soft);margin:22px 0 24px}
@media(max-width:700px){#g-b5{left:var(--gl);right:var(--gr);top:auto;bottom:7vh;transform:none;width:auto}#g-b5 .serif{font-size:44px}.g-quote{font-size:19px;margin:12px 0 16px}}
.g-bar{position:absolute;left:var(--gl);right:var(--gr);bottom:20px;height:1px;background:var(--line)}
.g-bar b{position:absolute;inset:0;background:var(--ink);transform-origin:0 50%;transform:scaleX(0)}
.g-hint{position:absolute;right:var(--gr);bottom:32px;color:var(--muted);transition:opacity .4s}
.gl3d.no-gl{height:auto}.gl3d.no-gl .g-stage{height:80vh}
@media(max-width:700px){.gl3d{height:900vh}#g-b3{flex-direction:column;gap:14px}.g-side{max-width:none}#g-b3 .serif{font-size:42px}}

/* ---------- inner pages ---------- */
.hero{position:relative;overflow:hidden;min-height:min(92vh,860px);display:flex;flex-direction:column;justify-content:flex-end;padding:140px var(--gr) clamp(50px,7vw,100px) var(--gl)}
.hero>*:not(.gl-field){position:relative;z-index:1}
.hero h1{font-size:clamp(52px,8.4vw,150px);margin:16px 0 0}
.hero .lead{margin-top:26px}
.gl-field{position:absolute;inset:0 0 0 45%;z-index:0;pointer-events:none}
.gl-field canvas{width:100%;height:100%;display:block}
@media(min-width:900px){.hero>*:not(.gl-field){max-width:60%}}   /* headline stays left of the sculpture */
@media(max-width:899px){.gl-field{inset:0 0 52% 0;opacity:.5}}   /* sculpture above the headline, not behind it */
.block{padding:clamp(60px,8vw,120px) var(--gr) clamp(60px,8vw,120px) var(--gl);border-top:1px solid var(--line)}
.big{font-size:clamp(44px,6vw,104px);margin:14px 0 40px}
.panel{background:color-mix(in srgb,var(--panel) 85%,transparent);border:1px solid var(--line)}
.two{display:grid;grid-template-columns:1fr 2fr;gap:40px}
@media(max-width:899px){.two{grid-template-columns:1fr}}

/* tilt cards (js/ui.js turns them toward the pointer) */
.tcard{position:relative;display:block;text-decoration:none;background:var(--panel);border:1px solid var(--line);padding:12px;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;will-change:transform}
.tcard:hover{box-shadow:0 30px 60px -30px rgba(0,0,0,.45)}
.tc-img{aspect-ratio:4/5;overflow:hidden;background:var(--bg)}
.tc-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.tcard:hover .tc-img img{transform:scale(1.04)}
.tc-lab{display:flex;flex-direction:column;gap:8px;padding:16px 4px 6px}
.tc-lab .serif{font-size:clamp(24px,2.2vw,34px)}
.tcard .px{position:absolute;right:16px;bottom:18px;width:12px;height:12px;background:var(--gold)}

/* services */
.svc{display:grid;grid-template-columns:70px 1fr minmax(240px,360px);gap:clamp(20px,4vw,60px);padding:50px 0;border-top:1px solid var(--line);scroll-margin-top:90px}
.svc:first-child{border-top:0;padding-top:0}
.svc h2{font-size:clamp(44px,6vw,100px);margin:0}
.svc ul{list-style:none;padding:0;margin:24px 0 28px;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;color:var(--soft)}
.svc li::before{content:"";display:inline-block;width:7px;height:7px;background:var(--gold);margin-right:10px}
@media(max-width:899px){.svc{grid-template-columns:1fr}.svc-n{display:none}.svc ul{grid-template-columns:1fr}}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.steps .panel{padding:26px}
.steps h3{font-size:34px;margin:14px 0 10px}
.steps p{margin:0;color:var(--soft)}
@media(max-width:899px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

/* work */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px}
.chip{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:none;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)}
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:899px){.works{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.works{grid-template-columns:1fr}}

/* studio */
.founder{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:clamp(30px,5vw,80px);align-items:start}
.f-photo{position:sticky;top:100px;margin:0}
.f-photo img{width:100%;height:auto;display:block}   /* the pixel portrait stands free on the page, no frame */
.chapters{margin-top:40px}
.chapter{display:grid;grid-template-columns:180px 1fr;gap:24px;padding:24px 0;border-top:1px solid var(--line)}
.chapter h3{font-size:32px;margin:0 0 10px}
.chapter p{margin:0;color:var(--soft);max-width:60ch}
.quote{font-size:clamp(34px,4.4vw,72px);margin:50px 0 0}
@media(max-width:899px){.founder{grid-template-columns:1fr}.f-photo{position:static;max-width:420px}.chapter{grid-template-columns:1fr;gap:8px}}

/* booking */
.book{display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:start}
.step{padding:30px 0;border-top:1px solid var(--line)}
.step:first-child{border-top:0;padding-top:0}
.step h2{font-size:clamp(32px,3.6vw,52px);margin:10px 0 20px}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.opt,.day,.slot{background:var(--panel);border:1px solid var(--line);color:var(--ink);font:inherit;cursor:pointer;min-width:0}
.opt{text-align:left;padding:16px}
.opt b{font-family:var(--serif);font-weight:600;letter-spacing:-.02em;font-size:22px}
.opt small{display:block;color:var(--muted);margin-top:6px;font-size:13px}
.opt[aria-pressed="true"]{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.day{padding:10px 4px;text-align:center}
.day b{display:block;font-family:var(--serif);font-weight:600;letter-spacing:-.02em;font-size:26px}
.day small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.day:disabled{opacity:.35;cursor:not-allowed}
.day[aria-pressed="true"],.slot[aria-pressed="true"]{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)}
.day[aria-pressed="true"] small{color:inherit;opacity:.7}
.slots{display:flex;flex-wrap:wrap;gap:8px}
.slot{font-family:var(--mono);font-size:13px;padding:10px 14px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld{display:flex;flex-direction:column;gap:8px}.fld.full{grid-column:1/-1}
.fld label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fld input,.fld textarea{font:inherit;padding:13px 14px;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:0;width:100%}
.err{color:#E0331F;margin-top:14px;min-height:1.5em}
.summary{position:sticky;top:100px;padding:28px}
.summary dl{display:grid;grid-template-columns:auto 1fr;gap:12px 18px;margin:22px 0 26px}
.summary dt{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.summary dd{margin:0;font-family:var(--serif);font-weight:600;letter-spacing:-.02em;font-size:20px}
.summary .btn{width:100%;justify-content:space-between}
.summary p{margin:16px 0 0;line-height:1.7}
.done{padding:40px 0}
@media(max-width:899px){.book{grid-template-columns:1fr}.summary{position:static}.opts{grid-template-columns:1fr 1fr}.days{grid-template-columns:repeat(4,1fr)}.fields{grid-template-columns:1fr}}

/* ---------- shared sections ---------- */
.btn.ghost{background:none;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}.btn.ghost i{border-left-color:var(--line)}
.split-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.split-head .big{margin-bottom:30px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding-top:0;padding-bottom:0}
.stat{padding:clamp(34px,4vw,60px) 24px clamp(34px,4vw,60px) 0;border-right:1px solid var(--line);margin-right:24px}
.stat:last-child{border-right:0}
.stat b{display:block;font-size:clamp(64px,8vw,140px);margin:18px 0 10px;line-height:.85}
@media(max-width:899px){.stats{grid-template-columns:1fr 1fr}.stat:nth-child(2){border-right:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--line)}}
.rows{border-top:1px solid var(--line)}
.row{position:relative;display:grid;grid-template-columns:60px minmax(200px,1.1fr) 1.4fr auto;gap:24px;align-items:center;padding:26px 0;border-bottom:1px solid var(--line);text-decoration:none}
.row .serif{font-size:clamp(30px,3.4vw,58px)}
.row-line{color:var(--soft);max-width:52ch}
.row-go{opacity:0;transition:opacity .3s}
.row-peek{position:absolute;right:120px;top:50%;width:150px;aspect-ratio:4/5;transform:translateY(-50%) rotate(-4deg) scale(.9);opacity:0;pointer-events:none;transition:opacity .35s,transform .35s;z-index:2;border:6px solid var(--panel);box-shadow:0 20px 40px -20px rgba(0,0,0,.4)}
.row-peek img{width:100%;height:100%;object-fit:cover}
.row:hover .row-go{opacity:1}.row:hover .row-peek{opacity:1;transform:translateY(-50%) rotate(-4deg) scale(1)}
.row:hover .serif{color:var(--muted)}
@media(max-width:899px){.row{grid-template-columns:40px 1fr}.row-line{grid-column:2}.row-go,.row-peek{display:none}}
.steps.five{grid-template-columns:repeat(5,1fr)}
@media(max-width:1100px){.steps.five{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.steps.five{grid-template-columns:1fr}}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary .serif{font-size:clamp(22px,2vw,30px)}
.faq summary i{flex:none;width:14px;height:14px;position:relative}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:0;top:6px;width:14px;height:2px;background:var(--ink);transition:transform .3s}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq details[open] summary i::before{background:var(--gold)}
.faq p{margin:0 0 24px;color:var(--soft);max-width:62ch}
.start{text-align:left}
.start-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.tc-sub{font-size:14px;line-height:1.5;color:var(--soft)}
.big-lead{font-size:clamp(22px,2.2vw,32px);line-height:1.45;max-width:40ch;color:var(--ink)}
.svc-detail{display:grid;grid-template-columns:1fr minmax(260px,380px);gap:clamp(30px,5vw,80px);align-items:start}
.gets{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.get{display:flex;gap:18px;align-items:baseline;padding:22px}
.get .serif{font-size:clamp(22px,1.9vw,28px)}
.chips-static{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip-s{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:9px 16px}
@media(max-width:899px){.svc-detail{grid-template-columns:1fr}.gets{grid-template-columns:1fr}}

/* clients: two rows drifting in opposite directions */
.clients{overflow:hidden}
.marquee{overflow:hidden;margin-top:14px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq{display:flex;gap:14px;width:max-content;animation:mq 46s linear infinite}
.marquee.rev .mq{animation-direction:reverse}
.marquee:hover .mq{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.logo-t{flex:none;width:210px;height:110px;display:flex;align-items:center;justify-content:center;background:var(--panel);border:1px solid var(--line)}
.logo-t img{max-width:62%;max-height:40%;object-fit:contain;filter:brightness(0);opacity:.85}
.logo-row{display:flex;flex-wrap:wrap;gap:14px}
.logo-t.more{width:auto;padding:0 28px;color:var(--muted)}
.logo-t.empty{flex-direction:column;gap:12px;color:var(--muted)}
.logo-t.empty i{width:22px;height:22px;background:repeating-conic-gradient(var(--line) 0 25%,transparent 0 50%) 0 0/11px 11px}
@media(prefers-reduced-motion:reduce){.mq{animation:none}}
/* careers */
.role-meta{text-align:right;line-height:1.7}
.apply{padding:28px}
.apply .btn{margin-top:18px}
.fld select{font:inherit;padding:13px 14px;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:0;width:100%}
@media(max-width:899px){.role-meta{grid-column:2;text-align:left}}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:clamp(60px,8vw,110px) var(--gr) 30px var(--gl)}
.foot-big{font-size:clamp(52px,11vw,200px);margin:0 0 50px}
.foot-cols{display:grid;grid-template-columns:1.1fr 1fr 1fr 1.2fr;gap:30px}
.foot-cols p{margin:10px 0 0;color:var(--soft)}
.foot-links{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:6px;color:var(--soft)}
.foot-links a{text-decoration:none}.foot-links a:hover{color:var(--ink)}
.foot-cta .serif{font-size:clamp(30px,2.8vw,46px);margin:0 0 20px}
@media(max-width:899px){.foot-cols{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-cols{grid-template-columns:1fr}}
.foot-row{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start;margin-top:30px}
.foot-row p{margin:10px 0 0;color:var(--soft)}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* service heroes: the service poster art in a golden frame, with poster corner labels */
.hero.has-art{display:grid;grid-template-columns:61.8fr 38.2fr;gap:clamp(24px,4vw,70px);align-items:end}
.hero.has-art>*:not(.gl-field){max-width:none}
.hero-txt{grid-column:1;align-self:end}
.hero-art{grid-column:2;grid-row:1;margin:0;position:relative;aspect-ratio:4/5;overflow:hidden;align-self:end}
.poster-art{position:relative;aspect-ratio:4/5;overflow:hidden}.poster-art img{width:100%;height:100%;object-fit:cover}
.hero-art img{width:100%;height:100%;object-fit:cover;display:block}
.hero-art .hc,.poster-art .hc{position:absolute;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#8A877F}
.hc.tl{left:14px;top:12px}.hc.tr{right:14px;top:12px}.hc.bl{left:14px;bottom:12px}.hc.br{right:14px;bottom:12px}
.hero-art.y .hc{color:#6b5410}
@media(max-width:899px){.hero.has-art{grid-template-columns:1fr}.hero-art{grid-column:1;grid-row:1;max-width:420px;width:100%}.hero-txt{grid-row:2}}

/* WhatsApp: a small ink pill fixed bottom right, with the yellow origin pixel */
.wa{position:fixed;z-index:60;right:var(--gr);bottom:calc(18px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:10px;height:52px;padding:0 20px 0 16px;border-radius:999px;background:var(--btn);color:var(--btn-ink);text-decoration:none;box-shadow:0 14px 30px -14px rgba(0,0,0,.45);transition:transform .25s cubic-bezier(.4,0,.2,1)}
.wa:hover{transform:translateY(-3px)}
.wa svg{width:24px;height:24px;flex:none}
.wa .mono{font-size:11px}
.wa i{position:absolute;top:8px;right:10px;width:7px;height:7px;background:var(--gold)}
@media(max-width:700px){.wa{width:54px;height:54px;padding:0;justify-content:center}.wa .mono{display:none}.wa i{top:9px;right:11px}}


/* shop: 1.618 Editions, a museum boutique in our identity */
.ann{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 18px;align-items:center;background:var(--gold);color:#111;font-size:10px;padding:10px var(--gr) 10px var(--gl);margin-top:76px}
.ann i{width:5px;height:5px;background:#111}
.shop-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding:42px var(--gr) 26px var(--gl);border-bottom:1px solid var(--line)}
.shop-mark{font-size:clamp(44px,6vw,96px);line-height:.9}.shop-mark span{color:var(--muted)}
.shop-cats{display:flex;flex-wrap:wrap;gap:6px}.shop-cats a{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:9px 15px}
.shop-cats a:hover{border-color:var(--ink)}
.shop-hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(24px,4vw,70px);padding:clamp(28px,4vw,60px) var(--gr) clamp(28px,4vw,60px) var(--gl)}
.shop-hero img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.shop-hero h1{font-size:clamp(48px,7vw,124px);margin:14px 0 18px}.shop-hero p{max-width:46ch;font-size:clamp(17px,1.3vw,20px);color:var(--soft)}
.tabs{display:flex;gap:6px;flex-wrap:wrap}.tab{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:none;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer}
.tab[aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.rail{min-width:0;max-width:100%;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,22%);gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;margin-top:26px;scrollbar-width:thin}
.rail .pc{scroll-snap-align:start}.rail .pc[hidden]{display:none}
.pc{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:6px;min-width:0}
.pc:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.pc-img{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:#EAE3D8}
.pc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .45s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1)}
.pc-img .pc-alt{opacity:0;object-fit:contain;background:var(--panel)}
.pc:hover .pc-alt{opacity:1}.pc:hover .pc-img img:first-child{transform:scale(1.04)}
.pc-flag{position:absolute;left:10px;top:10px;background:var(--gold);color:#111;font-size:9px;padding:5px 8px}
.pc-kind{font-size:10px;color:var(--muted);margin-top:8px}.pc-line{font-size:clamp(19px,1.5vw,23px);line-height:1.05}
.pc-ar{font-family:var(--sans);font-size:15px;color:var(--soft);text-align:right}.pc-price{font-size:12px}
.band{background:var(--gold);color:#111;padding:clamp(40px,6vw,90px) 0}
.band-in>*{min-width:0}.band-in{display:grid;grid-template-columns:minmax(220px,24%) 1fr;gap:28px;padding-left:var(--gl)}
.band-txt h2{font-size:clamp(36px,4vw,64px);margin:10px 0 14px}.band-txt p{max-width:30ch}
.band .rail{margin-top:0;padding-right:var(--gr)}.band .pc-kind,.band .pc-ar{color:#4a3b0a}.band .pc-img{background:#f3dc8c}
.feat{display:grid;grid-template-columns:1fr 1fr;min-height:min(80vh,720px)}
.feat.flip .feat-txt{order:2}
.feat-txt{background:var(--ink);color:var(--bg);display:flex;flex-direction:column;justify-content:center;gap:16px;padding:clamp(30px,5vw,90px)}
.feat-txt .mono{color:var(--muted)}.feat-txt h2{font-size:clamp(38px,4.6vw,76px)}.feat-txt p{max-width:42ch;color:#cfcac0}.feat-txt .btn{align-self:flex-start}
.feat-img{all:unset;cursor:pointer;display:block;overflow:hidden}.feat-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.4,0,.2,1)}
.feat-img:hover img{transform:scale(1.03)}
.lines{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:30px}
.ln{all:unset;cursor:pointer;background:var(--bg);padding:clamp(22px,2.6vw,40px);display:flex;flex-direction:column;gap:12px;min-height:200px;justify-content:flex-end;transition:background .3s}
.ln:hover{background:var(--panel)}.ln-ar{font-family:var(--sans);font-weight:600;font-size:clamp(24px,2.2vw,34px);text-align:right}
.ln-en{font-size:clamp(22px,2vw,32px);line-height:1}
.colls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:30px}
.coll{text-decoration:none;display:flex;flex-direction:column;gap:8px}.coll img{width:100%;aspect-ratio:1;object-fit:cover;display:block}.coll .serif{font-size:clamp(22px,2vw,30px)}
.grid-ed{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 22px;margin-top:26px}.grid-ed .pc[hidden]{display:none}
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust div{background:var(--bg);padding:34px var(--gr) 34px var(--gl);display:flex;flex-direction:column;gap:8px}.trust b{font-size:22px}
.tr-px{width:12px;height:12px;background:var(--gold)}
.circle{text-align:center;padding:clamp(60px,8vw,120px) var(--gr) clamp(60px,8vw,120px) var(--gl);display:flex;flex-direction:column;align-items:center;gap:16px}
.circle h2{font-size:clamp(36px,4.4vw,72px);max-width:16ch}.circle p{max-width:44ch;color:var(--soft)}
.pd{border:0;padding:0;max-width:min(1120px,94vw);width:100%;background:var(--bg);color:var(--ink)}
.pd::backdrop{background:rgba(17,17,17,.55)}
.pd-x{position:absolute;right:14px;top:10px;z-index:2;background:none;border:0;font-size:30px;cursor:pointer;color:var(--ink)}
.pd-in{display:grid;grid-template-columns:1.05fr 1fr}
.pd-media{background:#EAE3D8}.pd-main{width:100%;aspect-ratio:1;object-fit:contain;display:block}
.pd-thumbs{display:flex;gap:8px;padding:10px}.pd-thumbs button{all:unset;cursor:pointer;width:64px;height:64px;outline:1px solid var(--line)}
.pd-thumbs button[aria-pressed="true"]{outline:2px solid var(--ink)}.pd-thumbs img{width:100%;height:100%;object-fit:cover}
.pd-txt{padding:clamp(24px,3.4vw,52px);display:flex;flex-direction:column;gap:14px}
.pd-line{font-size:clamp(32px,3.4vw,52px);line-height:.98}.pd-ar{font-family:var(--sans);font-weight:600;font-size:clamp(24px,2.4vw,36px);text-align:right}
.pd-story{color:var(--soft);font-size:17px;line-height:1.6}.pd-meta{display:flex;flex-direction:column;gap:6px;font-size:11px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px}
.pd-sizes{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.pd-sizes .chip[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.pd-buy{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:6px}.pd-price{font-size:30px}.pd-note{font-size:13px}
@media(max-width:1000px){.grid-ed{grid-template-columns:repeat(3,1fr)}.trust{grid-template-columns:1fr 1fr}.lines{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.shop-hero,.feat,.pd-in{grid-template-columns:1fr}.feat.flip .feat-txt{order:0}.band-in{grid-template-columns:1fr;padding-right:var(--gr)}
  .rail{grid-auto-columns:72%}.grid-ed{grid-template-columns:1fr 1fr;gap:26px 14px}.colls{grid-template-columns:1fr 1fr}.lines{grid-template-columns:1fr}.feat-img{aspect-ratio:1}}

.num-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(24px,4vw,70px);align-items:start;margin-top:26px}
.num-big{font-size:clamp(90px,15vw,240px);line-height:.85;letter-spacing:-.05em}.num-big::after{content:"";display:block;width:.12em;height:.12em;background:var(--gold);margin-top:.1em}
.num-txt p{font-size:clamp(17px,1.3vw,20px);line-height:1.6;color:var(--soft);max-width:52ch}
@media(max-width:760px){.num-grid{grid-template-columns:1fr}}

/* ---------- origin motion (js/motion.js): pixels grow, headlines resolve, panels wipe in by steps. Nothing fades ---------- */
.rv{clip-path:inset(0 100% 0 0)}
.rv.in{animation:gr-wipe 618ms steps(8,end) both}
.rv.done{clip-path:none;animation:none}
@keyframes gr-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes gr-pulse{0%{transform:scale(1)}38.2%{transform:scale(1.618)}100%{transform:scale(1)}}
.btn i{transition:background-color 382ms steps(3,end),color 382ms steps(3,end)}
.btn:hover{filter:none}.btn:hover i{background:var(--gold);color:#111}
.btn.gold:hover i{background:var(--ink);color:var(--gold)}
.tcard:hover .tc-img img{transform:none}
.tcard:hover .px,.pc:hover .pc-flag,.wa:hover i,.trust div:hover .tr-px{animation:gr-pulse 618ms cubic-bezier(.65,0,.35,1)}
.wa:hover{transform:none}
.pc-img img{transition:opacity 382ms steps(4,end)}
.pc:hover .pc-img img:first-child{transform:none}
.row-peek{transition:opacity 382ms steps(4,end),transform 382ms steps(4,end)}
.faq summary i::before,.faq summary i::after{transition:transform 382ms steps(3,end)}
.g-block{transition:opacity 382ms steps(4,end)}
@media(prefers-reduced-motion:reduce){.rv{clip-path:none;animation:none}}

/* brand system, direction C: the manual's twelve column grid, faint behind every page */
main{position:relative;isolation:isolate}
main::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(to right,color-mix(in srgb,var(--line) 75%,transparent) 1px,transparent 1px);
  background-size:calc((100% - 1px) / 12) 100%;
  width:calc(100% - var(--gl) - var(--gr) + 1px);left:var(--gl)}
.block{background:transparent}