/* ==========================================================================
   /website — the web studio, same stage
   ========================================================================== */

/* ---------- Browser frame (shared by hero + collection) ---------- */
.browser{display:flex;flex-direction:column;width:100%;background:var(--ivory);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.browser-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#1F1E1C;color:var(--ash);flex:none}
.browser-bar i{width:8px;height:8px;background:#3A3936}
.browser-url{margin-left:12px;font-size:11px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser-view{position:relative;display:block;aspect-ratio:600/690;overflow:hidden;background:#222}
.browser-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}

/* ---------- Hero ---------- */
.w-hero{position:relative;min-height:100vh;min-height:100svh;padding-top:76px;display:flex;overflow:hidden;isolation:isolate}
.w-hero::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 60% at 78% 70%,rgba(232,93,42,.16),transparent 70%)}
.w-hero-in{flex:1;width:100%;max-width:var(--max);margin:0 auto;padding:clamp(24px,5vh,56px) var(--gutter) clamp(12px,2.5vh,28px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center}
.w-hero-copy{grid-column:1/span 7}
.w-hero .hero-title{font-size:min(7.6vw,11.6vh);font-stretch:68%;line-height:.86}
.w-hero .hero-side{margin-top:clamp(24px,4vh,44px);max-width:560px}
.w-hero .hero-lede{max-width:40ch}
.w-hero-stage{grid-column:8/span 5;justify-self:center;width:min(100%,56vh);aspect-ratio:1;margin-bottom:calc(min(100%,56vh) * .36);position:relative}
.w-hero-stage .o-still{position:absolute;left:-12%;top:-4%;width:124%}
@media (max-width:900px){
  .w-hero-in{align-content:start}
  .w-hero-copy,.w-hero-stage{grid-column:1/-1}
  .w-hero .hero-title{font-size:min(14vw,9vh)}
  .w-hero-stage{justify-self:end;width:min(58vw,300px);margin:24px 0 calc(min(58vw,300px) * .4)}
}

/* ---------- Collection: one site on stage at a time ---------- */
.collection{position:relative;padding:var(--sec-t) 0 40px}
.collection-pin{position:relative;display:flex;flex-direction:column}
.collection-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;margin-bottom:clamp(28px,4vh,48px)}
.collection-head h2{grid-column:1/span 8;font-size:clamp(44px,5vw,80px)}
.collection-head p{grid-column:9/span 4;margin:0;color:var(--sub)}
.card-exhibition{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end}
.exhibit-stage{grid-column:1/span 7;position:relative;height:clamp(360px,54vh,600px);display:flex;align-items:flex-end;justify-content:center;padding-bottom:28px}
.exhibit-card{--pos:0;--dist:0;position:absolute;bottom:28px;left:50%;width:min(46%,calc((54vh - 60px) * 600 / 720));padding:0;border:0;background:none;text-align:left;cursor:pointer;
  transform:translateX(calc(-50% + var(--pos) * 78%)) translateY(calc(var(--dist) * -4%)) scale(calc(1 - var(--dist) * .3));transform-origin:bottom center;
  z-index:calc(3 - var(--dist));filter:brightness(calc(1 - var(--dist) * .55)) saturate(calc(1 - var(--dist) * .6));
  transition:transform .95s var(--ease-out),filter .7s,opacity .7s}
.exhibit-card[data-placement=center]{cursor:default}
.exhibit-card[data-placement=center] .browser{box-shadow:0 40px 90px rgba(0,0,0,.55)}
.exhibit-card:not([data-placement=center]):hover{filter:brightness(.7) saturate(.6)}
.exhibit-bar{position:absolute;left:50%;bottom:0;width:min(46%,calc((54vh - 60px) * 600 / 720));transform:translateX(-50%)}
.exhibit-story{grid-column:9/span 4;padding-bottom:28px}
.exhibit-count{display:flex;gap:14px;font-size:var(--t-xs);font-weight:650;color:var(--sub);margin-bottom:14px}
.exhibit-count span:first-child{color:var(--orange);font-variant-numeric:tabular-nums}
.exhibit-story h3{font-weight:800;font-stretch:72%;font-size:var(--t-2xl);line-height:.92;margin-bottom:22px}
.exhibit-cols{display:grid;gap:4px}
.exhibit-cols p{font-size:var(--t-s);margin-bottom:12px}
.exhibit-minor{font-size:var(--t-xs)!important;font-weight:650;color:var(--sub);margin-bottom:4px!important}
.exhibit-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin:20px 0 28px}
.exhibit-controls{display:flex;align-items:center;gap:14px}
.exhibit-controls>button,.craft-controls>button:not(.craft-explode){width:48px;height:48px;border:1.5px solid currentColor;background:none;font-size:26px;line-height:1;display:grid;place-items:center;transition:background-color .25s,color .25s}
.exhibit-controls>button:hover,.craft-controls>button:not(.craft-explode):hover{background:var(--fg);color:var(--bg)}
.card-dots{display:flex;gap:8px}
.card-dots button{width:28px;height:4px;padding:0;border:0;background:var(--rule);position:relative}
.card-dots button::before{content:'';position:absolute;inset:-12px -2px}
.card-dots button[aria-current=true]{background:var(--orange)}
.card-disclaimer{margin-top:28px;font-size:var(--t-xs);color:var(--sub)}
@media (max-width:900px){
  .collection-head h2,.collection-head p{grid-column:1/-1}
  .collection-head p{margin-top:16px}
  .exhibit-stage,.exhibit-story{grid-column:1/-1}
  .exhibit-stage{height:min(108vw,560px)}
  .exhibit-card,.exhibit-bar{width:min(62%,320px)}
  .exhibit-story{margin-top:28px}
}

/* ---------- Booking ---------- */
.booking{padding:var(--sec-t) 0 var(--sec-b)}
.booking-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center}
.booking-copy{grid-column:1/span 7}
.booking-copy h2{font-size:var(--t-3xl);max-width:12ch}
.booking-copy>p{max-width:46ch;margin:28px 0 32px;font-size:var(--t-l);line-height:1.35}
.booking-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.ticket{grid-column:9/span 4;background:var(--ink);color:var(--ivory);padding:28px;position:relative;transform:rotate(-2.5deg);box-shadow:20px 24px 0 rgba(14,14,14,.18)}
.ticket::after{content:'';position:absolute;left:0;right:0;top:118px;border-top:2px dashed rgba(243,238,229,.25)}
.ticket-top{display:flex;justify-content:space-between;font-size:var(--t-xs);color:var(--ash);font-weight:600}
.ticket-title{font-weight:800;font-stretch:72%;font-size:var(--t-xl);line-height:1;margin:22px 0 46px}
.ticket-facts{margin:0;display:grid;gap:10px}
.ticket-facts div{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid rgba(243,238,229,.12);font-size:var(--t-s)}
.ticket-facts dt{color:var(--ash)}.ticket-facts dd{margin:0;font-weight:600}
.ticket-agenda{list-style:none;counter-reset:a;margin:20px 0 0;padding:0;display:flex;gap:10px;flex-wrap:wrap}
.ticket-agenda li{counter-increment:a;font-size:var(--t-xs);padding:6px 10px;border:1px solid rgba(243,238,229,.25)}
.ticket-agenda li::before{content:counter(a) ' ';color:var(--orange);font-weight:700}
@media (max-width:900px){.booking-copy,.ticket{grid-column:1/-1}.ticket{margin-top:56px;max-width:420px;transform:rotate(-1.5deg)}}

/* ---------- Craft: four layers, pulled apart ---------- */
.craft{padding:var(--sec-t) 0 var(--sec-b)}
.craft-interactive{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center}
.craft-visual{--gap:22px;grid-column:1/span 7;position:relative;height:clamp(420px,66vh,620px);perspective:1800px;perspective-origin:50% 30%}
.craft-visual.is-exploded{--gap:76px}
.craft-stack{position:absolute;left:50%;top:68%;width:min(70%,400px);aspect-ratio:3/2;transform:translate(-50%,-50%) rotateX(58deg) rotateZ(-34deg);transform-style:preserve-3d}
.craft-layer{--i:0;position:absolute;inset:0;padding:0;border:0;background:none;color:inherit;text-align:left;transform-style:preserve-3d;
  transform:translateZ(calc(var(--i) * var(--gap)));transition:transform .9s var(--ease-out)}
.craft-layer:nth-child(2){--i:1}.craft-layer:nth-child(3){--i:2}.craft-layer:nth-child(4){--i:3}
.craft-layer::before{content:'';position:absolute;inset:0;background:rgba(36,35,32,.92);border:1.5px solid rgba(243,238,229,.28);transition:background-color .4s,border-color .4s}
.craft-layer.is-active::before{background:rgba(232,93,42,.95);border-color:var(--orange)}
.craft-layer:focus-visible{outline:none}
.craft-layer:focus-visible::before{border:3px solid var(--ivory)}
.cl-n,.cl-t,.cl-d{position:absolute;left:6%;transform-origin:left bottom;pointer-events:none}
.cl-n{top:8%;font-size:13px;font-weight:700;color:var(--ash)}
.cl-t{top:18%;font-weight:850;font-stretch:72%;font-size:30px;line-height:1}
.cl-d{top:38%;font-size:12px;color:var(--ash);max-width:60%}
.craft-layer.is-active .cl-n,.craft-layer.is-active .cl-d{color:var(--ink)}
.craft-layer.is-active .cl-t{color:var(--ink)}
.cl-art{position:absolute;right:6%;bottom:10%;width:38%;height:50%;display:flex;flex-direction:column;gap:8%;pointer-events:none}
.cl-art i{flex:1;background:rgba(243,238,229,.16)}
.craft-layer.is-active .cl-art i{background:rgba(14,14,14,.22)}
.cl-art-0{flex-direction:row;flex-wrap:wrap}.cl-art-0 i{flex:0 0 44%;height:40%}
.cl-art-1 i:nth-child(1){flex:2}.cl-art-1 i:nth-child(2){flex:.6;width:70%}
.cl-art-2 i{flex:.4}.cl-art-2 i:nth-child(2){width:70%}.cl-art-2 i:nth-child(3){width:50%}
.cl-art-3 i:nth-child(1){flex:2.4}.cl-art-3 i:nth-child(2){flex:.5;width:40%;background:var(--orange)}
.craft-layer.is-active .cl-art-3 i:nth-child(2){background:var(--ink)}
.craft-detail{grid-column:9/span 4}
.craft-counter{display:flex;gap:14px;font-size:var(--t-xs);font-weight:650;color:var(--sub);margin-bottom:16px}
.craft-counter span:first-child{color:var(--orange);font-variant-numeric:tabular-nums}
.craft-detail h3{font-weight:800;font-stretch:72%;font-size:var(--t-2xl);line-height:.92;margin-bottom:18px}
.craft-detail>p:not(.craft-counter){color:var(--sub);max-width:40ch;min-height:4.8em}
.craft-controls{display:flex;align-items:center;gap:12px;margin-top:20px}
.craft-explode{margin-left:8px;padding:0 16px;height:48px;border:1.5px solid var(--rule);background:none;font-weight:650;font-size:var(--t-s)}
.craft-explode[aria-pressed=true]{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}
@media (max-width:900px){
  .craft-visual,.craft-detail{grid-column:1/-1}
  .craft-visual{height:420px;--gap:16px}
  .craft-visual.is-exploded{--gap:62px}
  .craft-stack{width:min(68%,300px)}
  .cl-t{font-size:22px}.cl-d{display:none}
}

/* ---------- Services + pricing ---------- */
.w-services{padding:var(--sec-t) 0 clamp(32px,4vw,56px)}
.w-services .wrap{position:relative}
.w-pricing{padding:clamp(40px,5vw,72px) 0 var(--sec-b)}
.podium-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1080px}
@media (max-width:900px){.podium-2{grid-template-columns:1fr}}
.fineprint{margin-top:40px;max-width:72ch;font-size:var(--t-xs);color:var(--sub)}

/* ---------- About ---------- */
.about{padding:var(--sec-t) 0 var(--sec-b)}
.about-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center}
.about-copy{grid-column:1/span 6}
.about-copy h2{font-size:var(--t-3xl);max-width:8ch;margin-bottom:32px}
.about-copy>p{max-width:46ch;color:var(--sub)}
.about-copy>p.about-chip{margin-top:28px;padding-top:16px;border-top:1px solid var(--rule);color:var(--fg)}
.about-mark{grid-column:8/span 5;color:var(--ivory)}
@media (max-width:900px){.about-copy,.about-mark{grid-column:1/-1}.about-mark{margin-top:56px;max-width:420px}}

/* ---------- Trust ---------- */
.trust{padding:0 0 var(--sec-b)}
.trust-title{font-weight:800;font-stretch:72%;font-size:var(--t-2xl);line-height:.95;max-width:18ch;margin-bottom:clamp(40px,6vw,72px)}
.trust-grid{list-style:none;counter-reset:t;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.trust-grid li{counter-increment:t;border-top:1.5px solid var(--fg);padding-top:20px}
.trust-grid li::before{content:counter(t);display:block;color:var(--orange);font-weight:700;font-size:var(--t-s);margin-bottom:22px;font-variant-numeric:tabular-nums}
.trust-grid h3{font-weight:800;font-stretch:72%;font-size:var(--t-xl);line-height:1;margin-bottom:14px}
.trust-grid p{color:var(--sub);max-width:40ch}
.trust-note{margin-top:48px;font-size:var(--t-xs);color:var(--sub)}
@media (max-width:900px){.trust-grid{grid-template-columns:1fr;gap:40px}}

/* ---------- Contact ---------- */
.w-contact{padding:var(--sec-t) 0 var(--sec-b)}
.w-contact h2{font-size:var(--t-4xl);max-width:11ch;line-height:.84}
.w-contact-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-top:clamp(40px,6vw,72px);align-items:start}
.w-contact-grid>p{grid-column:1/span 5;font-size:var(--t-l);line-height:1.35;margin:0}
.w-contact-actions{grid-column:7/span 6;display:flex;flex-wrap:wrap;gap:14px;justify-content:flex-end}
.w-contact-mail{flex-basis:100%;text-align:right;margin:10px 0 0}
.w-contact-mail a{font-weight:650;text-underline-offset:4px}
@media (max-width:900px){.w-contact-grid>p,.w-contact-actions{grid-column:1/-1}.w-contact-actions{justify-content:flex-start;margin-top:28px}.w-contact-mail{text-align:left}}
@media (max-width:520px){.w-contact-actions .btn{width:100%}}

/* ---------- Inquiry modal (custom layer; contact.js relies on #modal.open) ---------- */
.modal-layer{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:16px;background:rgba(14,14,14,.84);opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.modal-layer.open{opacity:1;visibility:visible;transition:opacity .4s}
.modal-layer .modal{position:relative;margin:0;max-width:680px;width:100%;transform:translateY(40px);transition:transform .6s var(--ease-out)}
.modal-layer.open .modal{transform:none}
.modal h2#modalTitle{font-size:var(--t-2xl)}
.modal .fields{margin:28px 0 18px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:var(--t-xs);font-weight:600}
.modal input,.modal select,.modal textarea{border-color:rgba(14,14,14,.3);color:var(--ink)}
.modal input::placeholder,.modal textarea::placeholder{color:rgba(14,14,14,.45)}
.modal input:focus,.modal select:focus,.modal textarea:focus{border-color:var(--ink);background:rgba(14,14,14,.03)}
.modal select option{background:var(--ivory);color:var(--ink)}
.modal #inquirySubmit{width:100%;min-height:58px}
.modal #inquirySubmit::after{display:none}
.form-feedback{min-height:1.4em;margin:10px 0 0;font-size:var(--t-s)}
.form-feedback.error{color:#A1240A}
.form-feedback.success{color:#245C32}
#humanVerification:empty{display:none}
html.reduced .w-hero-stage .browser-view img{clip-path:none}
html.reduced .w-hero-stage .browser-view img:not(:first-child){display:none}

/* ---------- v2.1: pricing is a dark stage lit by the O ---------- */
.w-pricing .plinth{background:#2B2A27}
.w-pricing .plan-feature .plinth{background:var(--orange)}
.w-pricing .plan-flag{background:var(--orange);color:var(--ink)}
.w-pricing .plan-o{width:min(52%,120px);margin:0 auto 34px}