/* ============================================================
   THE RENDERED CLUB — PAGES / SCENES
   ============================================================ */

/* ===== ACT I — THE SPARK (hero) ===== */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.hero__canvas { position: absolute; inset: 0; z-index: 0; }
.hero__canvas canvas { width: 100% !important; height: 100% !important; display:block; }
.hero__glow { position:absolute; inset:0; z-index:1; pointer-events:none;
  background: radial-gradient(60% 50% at 50% 42%, rgba(245,166,35,0.10), transparent 70%); }
.hero__inner { position: relative; z-index: 3; width: 100%; padding-bottom: clamp(5rem, 12vh, 9rem); }
.hero__badge { margin-bottom: 1.6rem; }
.hero__title { font-size: var(--t-mega); font-weight: 600; line-height: 0.92; letter-spacing: -0.03em; max-width: 16ch; }
.hero__title em { font-style: normal; color: var(--gold); }
.hero__sub { margin-top: 1.8rem; max-width: 46ch; }
.hero__actions { margin-top: 2.4rem; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.hero__proof { margin-top: 2rem; display:flex; align-items:center; gap: 1rem; font-size: 0.85rem; color: var(--ink-dim); flex-wrap: wrap; }
.hero__stars { color: var(--gold); letter-spacing: 0.1em; }
.hero__scroll { position: absolute; left: 50%; bottom: calc(var(--hud-h) + 1.2rem); transform: translateX(-50%); z-index: 4; display:flex; flex-direction: column; align-items:center; gap: 0.6rem; font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-faint); }
.hero__scroll .bar { width:1px; height: 46px; background: linear-gradient(var(--gold), transparent); position: relative; overflow: hidden;}
.hero__scroll .bar::after { content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background: var(--gold); animation: scrolldown 2s var(--ease) infinite; }
@keyframes scrolldown { 0%{top:-50%} 100%{top:120%} }
@media (max-width: 760px){ .hero__scroll{ display:none; } }

/* floating frame chips around hero */
.frame-chip { position:absolute; z-index:2; border:1px solid var(--line); border-radius: 8px; overflow:hidden; background: rgba(10,19,32,0.5); backdrop-filter: blur(4px); }
.frame-chip .lbl { position:absolute; top:6px; left:8px; font-family: var(--f-mono); font-size: 8px; letter-spacing:0.15em; color: var(--off-white); text-transform: uppercase; z-index:2; }
.frame-chip canvas { width:100%; height:100%; }

/* ===== SECTION HEADERS ===== */
.shead { display:flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); flex-wrap: wrap; }
.shead__title { font-size: var(--t-h2); max-width: 20ch; }
.shead__meta { font-family: var(--f-mono); font-size: var(--t-small); color: var(--ink-faint); text-align: right; letter-spacing: 0.1em; }

/* ===== MARQUEE / social proof ===== */
.marquee { overflow: hidden; border-block: 1px solid var(--line-soft); padding-block: 1.6rem; }
.marquee__track { display:flex; gap: 4rem; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.1rem,2vw,1.7rem); color: var(--ink-faint); display:flex; align-items:center; gap: 2rem; white-space: nowrap; }
.marquee__item::after { content:"●"; color: var(--gold); font-size: 0.5em; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ===== ACT II — THE TIMELINE ===== */
.timeline-act { position: relative; background: var(--navy-900); }
.tl { position: relative; }
.tl__rail { position: relative; padding-left: clamp(2.5rem, 6vw, 6rem); }
.tl__line { position:absolute; left: clamp(1rem,3vw,3rem); top:0; bottom:0; width: 2px; background: var(--line); }
.tl__line .fill { position:absolute; top:0; left:0; width:100%; height:0; background: var(--gold); box-shadow: 0 0 16px rgba(245,166,35,0.6); }
.tl__playhead { position:absolute; left: clamp(1rem,3vw,3rem); width: 16px; height: 16px; border-radius:50%; background: var(--gold); transform: translate(-50%,-50%); box-shadow: 0 0 20px rgba(245,166,35,0.9); top: 0; }
.tl__clip { position: relative; padding: clamp(1.6rem,3vw,2.4rem) 0; border-bottom: 1px solid var(--line-soft); display:grid; grid-template-columns: auto 1fr auto; gap: clamp(1rem,3vw,2.5rem); align-items: center; transition: background .4s; }
.tl__clip::before { content:""; position:absolute; left: calc(clamp(1rem,3vw,3rem) - clamp(2.5rem,6vw,6rem) - 6px); top:50%; width:12px; height:12px; border-radius:50%; border:2px solid var(--raw); background: var(--navy-900); transform: translateY(-50%); transition: border-color .4s, background .4s; }
.tl__clip.is-on::before { border-color: var(--gold); background: var(--gold); }
.tl__num { font-family: var(--f-mono); font-size: var(--t-small); color: var(--ink-faint); }
.tl__clip.is-on .tl__num { color: var(--gold); }
.tl__body h3 { font-size: var(--t-h3); margin-bottom: 0.4rem; transition: color .4s; }
.tl__body p { color: var(--ink-dim); max-width: 52ch; font-size: 0.96rem; }
.tl__tc { font-family: var(--f-mono); font-size: var(--t-small); color: var(--ink-faint); white-space:nowrap; }
.tl__bars { display:flex; align-items:flex-end; gap:3px; height: 34px; margin-top: 0.8rem; }
.tl__bars i { width: 3px; background: var(--raw); border-radius: 2px; opacity:0.5; transition: background .4s, opacity .4s; }
.tl__clip.is-on .tl__bars i { background: var(--gold); opacity: 0.85; }
@media (max-width: 700px){ .tl__clip{ grid-template-columns: auto 1fr; } .tl__tc{ display:none; } }

/* ===== ACT III — TRANSFORMATION (before/after) ===== */
.transform-act { background: var(--off-white); color: var(--charcoal); }
.transform-act .lead { color: rgba(44,44,44,0.6); }
.transform-act .eyebrow { color: var(--gold-deep); }
.transform-act .eyebrow::before { background: var(--gold-deep); }
.transform-act .shead__meta { color: rgba(44,44,44,0.4); }

.ba { position: relative; aspect-ratio: 16/9; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 40px 80px -30px rgba(13,27,42,0.4); user-select: none; }
.ba__layer { position:absolute; inset:0; }
.ba__layer canvas { width:100%; height:100%; display:block; }
.ba__after { clip-path: inset(0 0 0 50%); }
.ba__divider { position:absolute; top:0; bottom:0; left:50%; width: 2px; background: var(--off-white); transform: translateX(-50%); z-index: 4; box-shadow: 0 0 0 1px rgba(0,0,0,0.1); }
.ba__handle { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); z-index:5; width: 52px; height:52px; border-radius:50%; background: var(--off-white); display:grid; place-items:center; box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
.ba__handle svg { width: 22px; height:22px; }
.ba__tag { position:absolute; top: 14px; z-index: 4; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; padding: 5px 10px; border-radius: 30px; backdrop-filter: blur(6px); }
.ba__tag--l { left: 14px; background: rgba(13,27,42,0.6); color: var(--platinum); }
.ba__tag--r { right: 14px; background: rgba(245,166,35,0.92); color: var(--navy); }

.stage-flow { display:flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 2rem; }
.stage-chip { font-family: var(--f-mono); font-size: var(--t-small); letter-spacing: 0.08em; padding: 0.6rem 1rem; border-radius: 8px; border: 1px solid rgba(44,44,44,0.14); color: rgba(44,44,44,0.7); display:flex; align-items:center; gap: 0.6em; transition: all .4s var(--ease); }
.stage-chip .i { width: 7px; height:7px; border-radius:50%; background: var(--raw); }
.stage-chip.is-on { background: var(--navy); color: var(--off-white); border-color: var(--navy); }
.stage-chip.is-on .i { background: var(--gold); }

/* ===== ACT IV — THE RENDER ===== */
.render-act { background: var(--black); position: relative; overflow: hidden; }
.render-stage { position: relative; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.5rem, 4vw, 3rem); background: linear-gradient(160deg, rgba(18,36,56,0.5), rgba(6,10,17,0.2)); }
.render-stage__top { display:flex; align-items:center; justify-content: space-between; gap:1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.render-grid { display:grid; grid-template-columns: repeat(8, 1fr); gap: 8px; aspect-ratio: 16/7; }
.render-cell { background: var(--navy-700); border-radius: 4px; position: relative; overflow:hidden; opacity: 0.25; transform: scale(0.9); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.render-cell::after { content:""; position:absolute; inset:0; background: linear-gradient(135deg, var(--gold-deep), var(--gold)); opacity: 0; transition: opacity .6s; }
.render-cell.lit { opacity: 1; transform: none; }
.render-cell.lit::after { opacity: 0.0; }
.render-cell.lit.warm::after { opacity: 0.7; }
.render-progress { margin-top: 2rem; }
.render-bar { height: 6px; border-radius: 6px; background: var(--navy-700); overflow:hidden; position: relative; }
.render-bar .fill { position:absolute; inset:0 100% 0 0; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); box-shadow: 0 0 16px rgba(245,166,35,0.5); }
.render-meta { display:flex; justify-content: space-between; margin-top: 0.9rem; font-family: var(--f-mono); font-size: var(--t-small); color: var(--ink-dim); flex-wrap: wrap; gap: 0.5rem; }
.render-meta b { color: var(--gold); }
.render-stats { display:grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin-top: 2rem; background: var(--line-soft); border:1px solid var(--line-soft); border-radius: 10px; overflow:hidden; }
.render-stat { background: var(--navy-900); padding: 1rem 1.2rem; }
.render-stat .v { font-family: var(--f-mono); font-size: 1.3rem; color: var(--off-white); font-weight: 700; }
.render-stat .l { font-size: var(--t-small); color: var(--ink-faint); }
@media (max-width:700px){ .render-grid{ grid-template-columns: repeat(4,1fr); } .render-stats{ grid-template-columns: repeat(2,1fr); } }

/* ===== ACT V — THE PREMIERE (portfolio + reviews + box office) ===== */
.premiere-act { background: var(--navy-900); }
.posters { display:grid; grid-template-columns: repeat(12,1fr); gap: clamp(0.8rem,1.6vw,1.4rem); }
.poster { position: relative; border-radius: var(--r); overflow: hidden; grid-column: span 4; aspect-ratio: 2/3; border:1px solid var(--line); }
.poster--wide { grid-column: span 6; aspect-ratio: 16/10; }
.poster--tall { grid-column: span 4; aspect-ratio: 2/3; }
.poster__media { position:absolute; inset:0; }
.poster__media canvas { width:100%; height:100%; }
.poster__shade { position:absolute; inset:0; background: linear-gradient(0deg, rgba(6,10,17,0.92) 6%, rgba(6,10,17,0.1) 55%, rgba(6,10,17,0.4)); z-index:2; }
.poster__top { position:absolute; top:0; left:0; right:0; z-index:3; display:flex; justify-content: space-between; padding: 1rem; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--ink-dim); text-transform: uppercase; }
.poster__body { position:absolute; left:0; right:0; bottom:0; z-index:3; padding: clamp(1rem,2vw,1.6rem); }
.poster__cat { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.poster__title { font-size: clamp(1.2rem,2vw,1.7rem); margin-top: 0.4rem; }
.poster__metric { font-family: var(--f-mono); font-size: 0.82rem; color: var(--platinum); margin-top: 0.4rem; opacity:0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
.poster__play { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%) scale(0.7); z-index:3; width:64px; height:64px; border-radius:50%; border:1px solid rgba(248,246,240,0.5); display:grid; place-items:center; opacity:0; transition: opacity .4s var(--ease), transform .4s var(--ease), background .3s; }
.poster:hover .poster__play { opacity:1; transform: translate(-50%,-50%) scale(1); background: var(--gold); border-color: var(--gold); }
.poster:hover .poster__play svg { fill: var(--navy); }
.poster:hover .poster__metric { opacity:1; transform:none; }
.poster:hover .poster__shade { background: linear-gradient(0deg, rgba(6,10,17,0.95) 10%, rgba(6,10,17,0.25) 60%, rgba(245,166,35,0.06)); }
@media (max-width: 800px){ .poster, .poster--wide, .poster--tall { grid-column: span 6; } }
@media (max-width: 520px){ .posters{ grid-template-columns: 1fr; } .poster,.poster--wide,.poster--tall{ grid-column: span 1; } }

/* Critic reviews */
.reviews { display:grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; }
.review { padding: clamp(1.4rem,2.5vw,2.2rem); border:1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(160deg, rgba(255,255,255,0.03), transparent); }
.review__stars { color: var(--gold); letter-spacing: 0.15em; margin-bottom: 1rem; }
.review__quote { font-family: var(--f-serif); font-style: italic; font-size: clamp(1.05rem,1.5vw,1.25rem); line-height: 1.5; color: var(--off-white); }
.review__who { margin-top: 1.4rem; display:flex; align-items:center; gap: 0.8rem; }
.review__av { width: 40px; height:40px; border-radius:50%; background: linear-gradient(135deg, var(--navy-600), var(--gold-deep)); display:grid; place-items:center; font-family: var(--f-mono); font-weight:700; font-size:0.85rem; color: var(--off-white); }
.review__name { font-size: 0.9rem; }
.review__role { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.12em; }
@media (max-width: 900px){ .reviews{ grid-template-columns: 1fr; } }

/* Box office stats */
.boxoffice { display:grid; grid-template-columns: repeat(4,1fr); gap: 0; border:1px solid var(--line); border-radius: var(--r-lg); overflow:hidden; }
.bo { padding: clamp(1.6rem,3vw,2.6rem); border-right:1px solid var(--line); }
.bo:last-child{ border-right: none; }
.bo .v { font-family: var(--f-mono); font-weight: 700; font-size: clamp(2.2rem,4vw,3.4rem); color: var(--gold); line-height: 1; font-variant-numeric: tabular-nums; }
.bo .l { margin-top: 0.7rem; font-size: 0.86rem; color: var(--ink-dim); }
@media (max-width: 800px){ .boxoffice{ grid-template-columns: repeat(2,1fr); } .bo:nth-child(2){border-right:none} .bo:nth-child(1),.bo:nth-child(2){border-bottom:1px solid var(--line)} }

/* ===== SHARED: problem grid ===== */
.prob-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line-soft); border:1px solid var(--line-soft); border-radius: var(--r-lg); overflow:hidden; }
.prob { background: var(--navy-900); padding: clamp(1.5rem,2.5vw,2.2rem); transition: background .4s; }
.prob:hover { background: var(--navy-700); }
.prob .x { color: var(--alert); font-family: var(--f-mono); font-size: 1.1rem; margin-bottom: 0.8rem; }
.prob p { color: var(--ink-dim); font-size: 0.96rem; }
.prob b { color: var(--off-white); font-weight: 500; }
@media (max-width:760px){ .prob-grid{ grid-template-columns: 1fr; } }

/* ===== SHARED: pillars / who we serve ===== */
.pillars { display:grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; }
.pillar { padding: clamp(1.5rem,2.5vw,2.2rem); border:1px solid var(--line); border-radius: var(--r-lg); position: relative; overflow:hidden; transition: transform .5s var(--ease), border-color .4s; }
.pillar:hover { transform: translateY(-6px); border-color: rgba(245,166,35,0.4); }
.pillar__ico { width: 46px; height:46px; border-radius: 12px; display:grid; place-items:center; border:1px solid var(--line); margin-bottom: 1.3rem; }
.pillar__ico svg { width: 22px; height:22px; stroke: var(--gold); fill:none; }
.pillar h3 { font-size: var(--t-h3); margin-bottom: 0.5rem; }
.pillar p { color: var(--ink-dim); font-size: 0.95rem; }
@media (max-width: 900px){ .pillars{ grid-template-columns: 1fr; } }

.serve-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; }
.serve { position: relative; border:1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.4rem,2.4vw,2rem); min-height: 200px; display:flex; flex-direction: column; justify-content: space-between; overflow:hidden; transition: border-color .4s; }
.serve::after { content:""; position:absolute; inset:0; background: radial-gradient(140% 80% at 0% 100%, rgba(245,166,35,0.10), transparent 60%); opacity:0; transition: opacity .5s; }
.serve:hover { border-color: rgba(245,166,35,0.4); }
.serve:hover::after { opacity:1; }
.serve__ico { font-size: 1.6rem; }
.serve h3 { font-size: 1.25rem; margin-top: 1rem; }
.serve p { color: var(--ink-dim); font-size: 0.9rem; margin-top: 0.4rem; }
.serve .go { margin-top: 1.2rem; }
@media (max-width: 900px){ .serve-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .serve-grid{ grid-template-columns: 1fr; } }

/* ===== SHARED: process steps ===== */
.steps { display:grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; counter-reset: step; }
.step { position: relative; padding-top: 2.5rem; border-top: 2px solid var(--line); transition: border-color .4s; }
.step:hover { border-color: var(--gold); }
.step__n { position:absolute; top: -0.2rem; left:0; font-family: var(--f-mono); font-size: var(--t-small); color: var(--gold); }
.step h3 { font-size: var(--t-h3); margin-bottom: 0.6rem; }
.step p { color: var(--ink-dim); font-size: 0.95rem; }
.panel-light .step p { color: rgba(44,44,44,0.62); }
.panel-light .step { border-color: rgba(44,44,44,0.15); }
@media (max-width: 800px){ .steps{ grid-template-columns: 1fr; } }

/* ===== PRICING ===== */
.tiers { display:grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; align-items: stretch; }
.tier { display:flex; flex-direction: column; padding: clamp(1.6rem,2.6vw,2.4rem); border:1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(170deg, rgba(255,255,255,0.03), transparent); position: relative; transition: transform .5s var(--ease), border-color .4s; }
.tier:hover { transform: translateY(-6px); }
.tier--feat { border-color: var(--gold); background: linear-gradient(170deg, rgba(245,166,35,0.10), rgba(245,166,35,0.02)); transform: scale(1.02); }
.tier--feat:hover { transform: scale(1.02) translateY(-6px); }
.tier__flag { position:absolute; top: -1px; right: 1.5rem; background: var(--gold); color: var(--navy); font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; padding: 5px 10px; border-radius: 0 0 8px 8px; }
.tier__name { font-family: var(--f-mono); font-size: var(--t-small); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-dim); }
.tier__price { font-family: var(--f-display); font-weight: 600; font-size: clamp(2.4rem,4vw,3.2rem); margin: 0.6rem 0 0.2rem; line-height:1; }
.tier__price span { font-family: var(--f-mono); font-size: 0.9rem; color: var(--ink-faint); font-weight: 400; }
.tier__for { font-size: 0.88rem; color: var(--ink-dim); min-height: 2.4em; }
.tier__list { margin: 1.6rem 0; display:flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.tier__list li { display:flex; gap: 0.7rem; font-size: 0.9rem; color: var(--ink-dim); align-items: flex-start; }
.tier__list li svg { width: 16px; height:16px; flex: 0 0 16px; stroke: var(--gold); margin-top: 3px; }
.tier .btn { width: 100%; justify-content: center; }
@media (max-width: 900px){ .tiers{ grid-template-columns: 1fr; } .tier--feat{ transform:none; } .tier--feat:hover{ transform: translateY(-6px); } }

/* comparison table */
.cmp { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.cmp th, .cmp td { padding: 1rem 1.2rem; text-align: left; border-bottom: 1px solid var(--line-soft); }
.cmp thead th { font-family: var(--f-mono); font-size: var(--t-small); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); }
.cmp tbody th { font-weight: 400; color: var(--ink-dim); }
.cmp td { font-family: var(--f-mono); color: var(--off-white); }
.cmp .feat-col { color: var(--gold); }
.cmp tbody tr:hover td, .cmp tbody tr:hover th { background: rgba(255,255,255,0.02); }

/* ===== FAQ ===== */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { width:100%; display:flex; justify-content: space-between; align-items:center; gap: 2rem; padding: 1.5rem 0; text-align: left; font-family: var(--f-display); font-size: clamp(1.05rem,1.8vw,1.35rem); color: var(--off-white); transition: color .3s; }
.faq__q:hover { color: var(--gold); }
.faq__q .pm { flex: 0 0 22px; width:22px; height:22px; position: relative; }
.faq__q .pm::before, .faq__q .pm::after { content:""; position:absolute; background: var(--gold); top:50%; left:50%; transition: transform .4s var(--ease); }
.faq__q .pm::before { width:14px; height:2px; transform: translate(-50%,-50%); }
.faq__q .pm::after { width:2px; height:14px; transform: translate(-50%,-50%); }
.faq__item.open .pm::after { transform: translate(-50%,-50%) scaleY(0); }
.faq__a { overflow: hidden; height: 0; }
.faq__a p { padding: 0 0 1.6rem; color: var(--ink-dim); max-width: 70ch; font-size: 0.96rem; }
.panel-light .faq, .panel-light .faq__item { border-color: rgba(44,44,44,0.14); }
.panel-light .faq__q { color: var(--charcoal); }
.panel-light .faq__a p { color: rgba(44,44,44,0.62); }

/* ===== ABOUT / values ===== */
.bigstat { display:grid; grid-template-columns: repeat(3,1fr); gap: 2rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding-block: 3rem; }
.bigstat .v { font-family: var(--f-mono); font-weight:700; font-size: clamp(2.6rem,6vw,5rem); color: var(--off-white); line-height: 0.9; }
.bigstat .v em { color: var(--gold); font-style: normal; }
.bigstat .l { color: var(--ink-dim); margin-top: 0.8rem; max-width: 28ch; }
@media (max-width:800px){ .bigstat{ grid-template-columns: 1fr; gap: 2.5rem; } }

.values { display:grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--line-soft); border:1px solid var(--line-soft); border-radius: var(--r-lg); overflow:hidden; }
.value { background: var(--navy-900); padding: clamp(1.6rem,3vw,2.4rem); transition: background .4s; }
.value:hover { background: var(--navy-700); }
.value__n { font-family: var(--f-mono); color: var(--gold); font-size: var(--t-small); }
.value h3 { font-size: var(--t-h3); margin: 0.8rem 0 0.6rem; }
.value p { color: var(--ink-dim); font-size: 0.95rem; }
@media (max-width: 700px){ .values{ grid-template-columns: 1fr; } }

/* ===== PAGE HERO (interior) ===== */
.phero { position: relative; padding-top: clamp(8rem, 18vh, 12rem); padding-bottom: clamp(3rem,6vh,5rem); overflow: hidden; }
.phero__canvas { position:absolute; inset:0; z-index:0; opacity: 0.7; }
.phero__inner { position: relative; z-index: 2; }
.phero__title { font-size: var(--t-h1); max-width: 18ch; margin-top: 1.4rem; }
.phero__title em { font-family: var(--f-serif); font-style: italic; color: var(--gold); }
.phero__sub { margin-top: 1.4rem; max-width: 52ch; }

/* ===== CONTACT / book ===== */
.book { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,4vw,4rem); align-items: start; }
@media (max-width: 900px){ .book{ grid-template-columns: 1fr; } }
.field { margin-bottom: 1.3rem; }
.field label { display:block; font-family: var(--f-mono); font-size: var(--t-small); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 0.6rem; }
.field input, .field textarea, .field select { width:100%; background: var(--navy-900); border:1px solid var(--line); border-radius: 10px; padding: 0.9rem 1rem; color: var(--off-white); transition: border-color .3s, background .3s; font-size: 0.95rem; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--gold); outline: none; background: var(--navy-700); }
.field textarea { resize: vertical; min-height: 120px; }
.chips { display:flex; flex-wrap: wrap; gap: 0.6rem; }
.chip-opt { font-size: 0.85rem; padding: 0.6rem 1rem; border:1px solid var(--line); border-radius: 30px; color: var(--ink-dim); transition: all .3s; cursor: none; }
.chip-opt:hover { border-color: var(--gold); color: var(--off-white); }
.chip-opt.sel { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.book__side { border:1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.6rem,3vw,2.4rem); background: linear-gradient(170deg, rgba(255,255,255,0.03), transparent); position: sticky; top: 100px; }
.book__side h3 { font-size: var(--t-h3); margin-bottom: 1rem; }
.book__list li { display:flex; gap:0.7rem; align-items:flex-start; padding: 0.6rem 0; color: var(--ink-dim); font-size: 0.92rem; border-bottom: 1px solid var(--line-soft); }
.book__list li:last-child { border:none; }
.book__list svg { width: 18px; height:18px; stroke: var(--gold); flex:0 0 18px; margin-top: 2px; }
.form-note { font-size: var(--t-small); color: var(--ink-faint); margin-top: 1rem; }
.form-ok { display:none; padding: 2rem; border:1px solid var(--gold); border-radius: var(--r-lg); background: rgba(245,166,35,0.06); text-align:center; }
.form-ok.show { display:block; }

/* ===== misc ===== */
.divider-tc { display:flex; align-items:center; gap: 1rem; font-family: var(--f-mono); font-size: var(--t-small); color: var(--ink-faint); letter-spacing: 0.1em; padding-block: 1.2rem; }
.divider-tc .ln { flex:1; height:1px; background: var(--line-soft); }

.split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,4vw,4rem); align-items: center; }
@media (max-width: 860px){ .split{ grid-template-columns: 1fr; } }
.split__media { aspect-ratio: 4/3; border-radius: var(--r-lg); overflow: hidden; border:1px solid var(--line); position: relative; }
.split__media canvas { width:100%; height:100%; }

/* niche deliverables list */
.delivers { display:grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--line-soft); border:1px solid var(--line-soft); border-radius: var(--r-lg); overflow:hidden; }
.deliver { background: var(--navy-900); padding: 1.4rem 1.6rem; display:flex; gap: 1rem; align-items:flex-start; transition: background .35s; }
.deliver:hover { background: var(--navy-700); }
.deliver .em { font-size: 1.3rem; }
.deliver h4 { font-family: var(--f-display); font-size: 1.05rem; margin-bottom: 0.2rem; }
.deliver p { color: var(--ink-dim); font-size: 0.88rem; }
@media (max-width:700px){ .delivers{ grid-template-columns: 1fr; } }

/* HERO3D reserved slot — the 3D film strip occupies this column */
.h3-slot {
  position: relative; min-height: clamp(240px, 38vw, 420px);
  border: 1px dashed var(--line-soft); border-radius: 14px;
}
.h3-slot__cap {
  position: absolute; right: 12px; bottom: 10px;
  font-size: var(--t-micro); letter-spacing: 0.16em; color: var(--ink-faint);
}
@media (max-width: 860px) { .h3-slot { min-height: 180px; } }