:root{
  --ink:#0E0E0C;
  --paper:#F2F0EA;
  --sky:#BFD0DE;
  --skyink:#4E6B85;
  --deep:#3D5570;
  --metal:#626360;
  --hair:rgba(14,14,12,.16);
  --gut:clamp(16px,3.4vw,40px);
  --maxw:1440px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:'Jost',system-ui,sans-serif;font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
img{display:block;max-width:100%}
a{color:inherit}

/* ---------- swiss grid ---------- */
.grid{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut);
}
.workwrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

/* type roles */
.disp{font-family:'Fraunces',Georgia,serif;font-weight:900;font-variation-settings:'opsz' 144;letter-spacing:-.01em;line-height:.96}
.mono{font-family:'Jost',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase}

/* ---------- nav ---------- */
header.nav{position:sticky;top:0;z-index:80;background:var(--paper);border-bottom:2px solid var(--skyink)}
.nav-in{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);
  height:58px;display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.mark{display:flex;align-items:center;gap:9px;text-decoration:none}
.mark-sq{width:22px;height:22px;flex:0 0 auto;display:block}
.mark b{font-family:'Jost',sans-serif;font-weight:700;font-size:17px;letter-spacing:-.02em}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{text-decoration:none;font-size:14px;font-weight:700}
.nav-links a:hover{color:var(--skyink)}
a.cta{
  background:var(--skyink);color:#fff;text-decoration:none;
  font-weight:600;font-size:14px;padding:11px 20px;white-space:nowrap;
  transition:background .16s;
}
a.cta:hover{background:var(--deep)}

/* ---------- hero: orbital ring ---------- */
.hero{padding:clamp(14px,2.4vw,30px) 0 0}
.orbit-stage{
  position:relative;height:clamp(480px,66vh,680px);
  touch-action:pan-y pinch-zoom;isolation:isolate;
}
.orbit-center{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  pointer-events:none;padding:0 var(--gut);
  z-index:60;
}
.orbit-word{font-size:clamp(42px,5.8vw,80px);margin:0;color:var(--ink)}
.orbit-ring{position:absolute;inset:0}
.ocard{
  position:absolute;left:50%;top:50%;
  width:clamp(120px,14.5vw,190px);aspect-ratio:4/5;
  margin-left:calc(clamp(120px,14.5vw,190px) / -2);
  margin-top:calc(clamp(120px,14.5vw,190px) * -.625);
  padding:0;border:1px solid var(--ink);background:#ddd;
  cursor:grab;will-change:transform;
}
.ocard img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.ocard .shade{
  position:absolute;inset:0;background:var(--ink);opacity:0;
  pointer-events:none;will-change:opacity;
}
.ocard:focus-visible{outline:3px solid var(--skyink);outline-offset:3px}
.orbit-stage.dragging .ocard{cursor:grabbing}
.orbit-hint{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  color:var(--ink);z-index:110;white-space:nowrap;pointer-events:none;
  background:var(--paper);border:1px solid var(--ink);padding:10px 18px;
}
/* mobile: flat snap row, no 3d */
@media(max-width:760px){
  .orbit-stage{height:auto;perspective:none;overflow:visible;padding:26px 0 8px}
  .orbit-center{position:static;pointer-events:auto;margin-bottom:26px}
  .orbit-ring{
    position:static;transform:none!important;display:flex;gap:14px;
    overflow-x:auto;padding:0 var(--gut) 14px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  }
  .ocard{
    position:static;margin:0;flex:0 0 62vw;width:62vw;
    transform:none!important;scroll-snap-align:center;
  }
  .ocard .shade{display:none}
  .orbit-hint{display:none}
}

/* ---------- case panel ---------- */
.case{
  position:fixed;inset:0;z-index:120;display:none;
  background:rgba(14,14,12,.55);
}
.case.open{display:block}
.case-in{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(960px,calc(100vw - 2*var(--gut)));max-height:88vh;overflow-y:auto;
  background:var(--paper);border-top:3px solid var(--skyink);
  padding:clamp(20px,3vw,36px);
}
.case-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,3vw,36px);align-items:start}
.case-img{width:100%;height:auto;border:1px solid var(--ink)}
.case-side{display:flex;flex-direction:column;gap:20px;position:relative}
.case-k{color:var(--metal)}
.case-side h3{font-family:'Fraunces',Georgia,serif;font-weight:900;font-variation-settings:'opsz' 144;font-size:clamp(24px,3vw,38px);letter-spacing:-.02em;line-height:1}
.case-row h4{font-family:'Jost',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--skyink);margin-bottom:7px}
.case-row p{font-size:15px;color:#33332C}
.case-close{
  position:absolute;top:0;right:0;
  border:1px solid var(--ink);background:var(--paper);cursor:pointer;
  font-family:'Jost',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;padding:9px 14px;
}
.case-close:hover{background:var(--skyink);color:#fff}
.case-side .cta{align-self:flex-start;margin-top:4px}
@media(max-width:640px){
  .case-grid{grid-template-columns:1fr}
  .case-close{position:static;align-self:flex-end;order:-1}
}

/* spec row: production notation */
.spec{margin-top:clamp(34px,5vw,58px);border-top:2px solid var(--skyink)}
.spec-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:repeat(4,1fr)}
.spec-c{padding:16px 0 18px;border-left:1px solid var(--hair)}
.spec-c:first-child{border-left:0}
.spec-c:not(:first-child){padding-left:clamp(12px,2vw,24px)}
.spec-c .k{color:var(--metal);display:block;margin-bottom:6px}
.spec-c .v{font-family:'Jost',sans-serif;font-weight:600;font-size:clamp(15px,1.7vw,20px);letter-spacing:-.02em}

/* ---------- the proof: before/after, full bleed ---------- */
.proof{background:var(--deep);color:var(--paper);padding:clamp(40px,6vw,76px) 0}
.proof .grid{align-items:end;row-gap:26px}
.proof-head{grid-column:1 / span 6}
.proof-head h2{font-size:clamp(28px,3.6vw,46px)}
.proof-note{grid-column:8 / span 5;align-self:end}
.proof-note p{color:rgba(242,240,234,.72);font-size:15px;max-width:34ch}
.proof-img{
  margin-top:clamp(26px,4vw,44px);padding:0 var(--gut);
  max-width:940px;margin-left:auto;margin-right:auto;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,24px);
}
.proof-img figure{margin:0}
.proof-img img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border:1px solid rgba(242,240,234,.22)}
.proof-img figcaption{
  font-family:'Jost',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(242,240,234,.65);margin-bottom:10px;
}
@media(max-width:640px){.proof-img{grid-template-columns:1fr}}

/* ---------- formats: sky field ---------- */
.formats{background:var(--sky);color:var(--ink);padding:22px 0}
.formats-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);display:flex;flex-wrap:wrap;gap:12px 30px;align-items:baseline}
.formats .k{color:rgba(14,14,12,.75)}
.formats ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px}
.formats li{font-family:'Jost',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}

/* ---------- section heads ---------- */
section{padding:clamp(56px,8vw,110px) 0;scroll-margin-top:70px}
.sec-mark{grid-column:1 / span 2}
.sec-mark .num{font-family:'Fraunces',Georgia,serif;font-weight:900;font-size:clamp(38px,5vw,64px);line-height:.8;color:var(--skyink);letter-spacing:-.02em}
.sec-mark .lbl{color:var(--metal);margin-top:10px;display:block}
.sec-body{grid-column:3 / span 8}
.sec-body h2{font-size:clamp(30px,4.4vw,58px)}
.sec-body .sub{margin-top:20px;max-width:50ch;color:#33332C;font-size:clamp(16px,1.7vw,19px)}

/* ---------- process: numbered swiss rows ---------- */
.steps{margin-top:clamp(30px,4vw,52px);border-top:2px solid var(--skyink)}
.step{
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut);
  padding:clamp(22px,2.6vw,32px) 0;border-bottom:1px solid var(--hair);
}
.step .sn{grid-column:1 / span 2;font-family:'Jost',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--skyink);padding-top:6px}
.step h3{grid-column:3 / span 4;font-family:'Jost',sans-serif;font-weight:700;font-size:clamp(19px,2.2vw,26px);letter-spacing:-.01em;line-height:1.15}
.step p{grid-column:8 / span 5;color:#33332C;font-size:16px}

/* ---------- built section ---------- */
.built{border-top:1px solid var(--hair)}

/* ---------- faq ---------- */
.faq{margin-top:clamp(28px,3.6vw,46px);border-top:2px solid var(--skyink)}
details{border-bottom:1px solid var(--hair)}
summary{
  list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;
  font-family:'Jost',sans-serif;font-weight:600;font-size:clamp(17px,1.9vw,21px);letter-spacing:-.02em;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"";position:absolute;right:8px;top:50%;width:13px;height:13px;
  margin-top:-6px;background:var(--skyink);transition:transform .2s;
}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 44px 22px 0;color:#33332C;max-width:66ch}

/* ---------- close ---------- */
.close{background:var(--deep);color:var(--paper)}
.close .sec-mark .num{color:var(--sky)}
.close .sec-mark .lbl{color:rgba(242,240,234,.55)}
.close .sec-body .sub{color:rgba(242,240,234,.75)}
.contact{margin-top:clamp(30px,4vw,48px);display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut);border-top:1px solid rgba(242,240,234,.28);padding-top:26px}
.contact div{grid-column:span 4}
.contact .k{color:rgba(242,240,234,.55);display:block;margin-bottom:9px}
.contact a{
  font-family:'Jost',sans-serif;font-weight:600;
  font-size:clamp(17px,2vw,23px);letter-spacing:-.02em;text-decoration:none;
  border-bottom:2px solid rgba(242,240,234,.3);padding-bottom:2px;
}
.contact a:hover{color:var(--sky);border-color:var(--sky)}
footer{background:var(--deep);color:rgba(242,240,234,.62);padding:22px 0 30px;border-top:1px solid rgba(242,240,234,.14)}
.foot{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between}
footer a{text-decoration:none}
footer a:hover{color:var(--paper)}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:12px 18px;z-index:200}
.skip:focus{left:0}
a:focus-visible,summary:focus-visible{outline:3px solid var(--skyink);outline-offset:3px}

/* ---------- reveal (visible by default) ---------- */
.rv{opacity:1;transform:none}
html.js .rv{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
html.js .rv.in{opacity:1;transform:none}

@media(max-width:900px){
  .spec-in{grid-template-columns:repeat(2,1fr)}
  .spec-c:nth-child(3){border-left:0}
  .spec-c:nth-child(3),.spec-c:nth-child(4){border-top:1px solid var(--hair)}
  .spec-c:nth-child(odd){padding-left:0}
  .sec-mark,.sec-body,.proof-head,.proof-note{grid-column:1 / -1}
  .sec-mark{margin-bottom:14px}
  .step .sn,.step h3,.step p{grid-column:1 / -1}
  .step h3{margin:8px 0 8px}
    .contact div{grid-column:span 12}
  .contact div + div{margin-top:22px}
}
@media(max-width:600px){
  .nav-links{display:none}
  }
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1!important;transform:none!important}
  *{transition:none!important}
}