/* ============================================================================
   Drenin V5 · additions on top of the V4 shell (v4.css)
   The offer in the opening and the work gallery with the Signature ceiling.
   The package showroom has its own file, showroom.css.
   ========================================================================== */

/* ── opening: the packages, in plain sight ───────────────────────────────── */
.hero-price{display:flex;flex-wrap:wrap;gap:8px;margin:1.4rem 0 0}
.hero-price a{display:inline-flex;align-items:baseline;gap:.45rem;padding:.55rem .8rem;border-radius:10px;text-decoration:none;color:var(--silver-1);
  font:600 .92rem/1.1 var(--font);background:rgba(7,9,12,.42);box-shadow:0 0 0 1px var(--night-line-2) inset;transition:box-shadow .25s,color .25s}
.hero-price a b{color:var(--silver-0);font-weight:760}
.hero-price a:hover{color:var(--silver-0);box-shadow:0 0 0 1.5px var(--amber) inset}
.hero-price a[data-go-tier="growth"]{box-shadow:0 0 0 1px rgba(244,168,58,.55) inset}
.hero-fine .play-link{display:inline-flex;align-items:center;gap:.4rem;margin-left:.2rem;color:var(--amber);font-weight:680;text-decoration:underline;text-decoration-color:rgba(244,168,58,.45)}
.hero-fine .play-link:hover{text-decoration-color:var(--amber)}
@media (min-width:1080px){.hero-price{margin-top:1.2rem}}

/* ── work: three examples, then the ceiling ──────────────────────────────── */
.work{padding:clamp(56px,8vw,120px) 0 calc(clamp(120px,13vw,200px) + 44px)}
.gallery{display:grid;gap:clamp(34px,4vw,44px)}
@media (min-width:900px){.gallery{grid-template-columns:minmax(0,1fr) minmax(0,1.16fr);align-items:start;gap:clamp(26px,3vw,44px)}}
.ex{display:grid;gap:20px;min-width:0}
.ex-shot{position:relative;display:block;border-radius:14px;overflow:hidden;background:#0D1117;text-decoration:none;
  box-shadow:0 0 0 1px var(--night-line-2),0 40px 70px -40px rgba(0,0,0,.9);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.ex-shot:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(244,168,58,.55),0 50px 80px -40px rgba(0,0,0,.95)}
.ex.is-featured .ex-shot{box-shadow:0 0 0 1.5px rgba(244,168,58,.6),0 40px 70px -40px rgba(0,0,0,.9)}
.ex-chrome{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#1A1F27;border-bottom:1px solid var(--night-line)}
.ex-chrome i{width:8px;height:8px;border-radius:50%;background:#3A414D}
.ex-chrome span{margin-left:8px;font:500 12px/1 var(--font);color:var(--silver-2)}
.ex-shot img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top center}
.ex-meta h3{font:780 clamp(1.45rem,1.05rem + 1vw,1.95rem)/1.08 var(--font);font-stretch:108%;letter-spacing:-.012em;margin-bottom:.4rem}
.ex-pkg{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .75rem;margin:0 0 .8rem;font-size:.98rem;color:var(--silver-1)}
.ex-pkg b{color:var(--silver-0);font-weight:760}
.ex-kind{flex-basis:100%;order:3}
.ex-flag{order:2}
.ex-flag{padding:.32rem .55rem;border-radius:6px;background:var(--amber);color:var(--amber-ink);font:760 .72rem/1 var(--font);letter-spacing:.06em;text-transform:uppercase}
.ex-meta>p:not(.ex-pkg):not(.ex-acts){color:var(--silver-1);max-width:54ch;margin-bottom:0}
.ex-acts{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.3rem;margin:1.2rem 0 0}
.ex-acts .text-link{color:var(--silver-0)}

.ceiling{position:relative;isolation:isolate;display:grid;align-items:end;min-height:clamp(460px,50vw,660px);margin-top:clamp(48px,7vw,96px);
  border-radius:22px;overflow:hidden;background:#04060A;box-shadow:0 0 0 1px var(--night-line),0 70px 120px -60px rgba(0,0,0,1)}
.ceiling-media{position:absolute;inset:0;z-index:-2;display:block}
.ceiling-media picture,.ceiling-media img{position:absolute;inset:0;width:100%;height:100%}
.ceiling-media img{object-fit:cover;object-position:62% 50%}
.cm-on{opacity:0;transition:opacity 2.6s cubic-bezier(.4,0,.2,1) .3s}
.ceiling.is-lit .cm-on{opacity:1}
.ceiling-light{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1.2s ease 1s;mix-blend-mode:screen;
  background:radial-gradient(34% 48% at var(--lx,68%) var(--ly,58%),rgba(255,190,110,.26),rgba(255,160,70,.08) 55%,transparent 72%)}
.ceiling.is-lit .ceiling-light{opacity:1}
.ceiling::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(4,6,10,.9) 0%,rgba(4,6,10,.62) 36%,rgba(4,6,10,0) 66%),linear-gradient(0deg,rgba(4,6,10,.72),rgba(4,6,10,0) 42%)}
.ceiling-copy{position:relative;max-width:540px;padding:clamp(26px,4.4vw,60px)}
.ceiling-copy h3{font:800 clamp(2.6rem,1.4rem + 3.6vw,4.6rem)/.92 var(--font);font-stretch:122%;letter-spacing:-.02em;margin-bottom:.6rem}
.ceiling-copy>p:not(.ex-pkg):not(.ex-acts){color:var(--silver-1)}
.ceiling-fine{margin:1.1rem 0 0;font-size:.86rem;color:var(--silver-2)}
@media (max-width:700px){
  .ceiling{min-height:0;align-items:stretch;grid-template-rows:minmax(300px,62vw) auto}
  .ceiling-media{position:relative;inset:auto;z-index:0;min-height:300px;height:62vw}
  .ceiling::before{background:linear-gradient(0deg,rgba(4,6,10,1) 0%,rgba(4,6,10,0) 36%);height:calc(62vw + 2px);min-height:302px}
  .ceiling-light{height:62vw;min-height:300px}
  .ceiling-copy{padding:4px 22px 26px}
}
@media (max-width:330px){.ceiling-copy h3{font-size:2.5rem}}   /* "Sablelight" is one long word: it stays inside the card at 320 px */

/* ── the showroom lives in showroom.css (rendered from offer.config.json) ── */
.no-js-note{display:none}

/* ── the new chapter order: work → offer (day) → clarity → process ───────── */
.clarity{padding:clamp(110px,13vw,190px) 0 clamp(70px,9vw,130px)}
.process{padding:clamp(40px,6vw,90px) 0 clamp(70px,9vw,130px)}

@media (prefers-reduced-motion:reduce){
  .cm-on,.ceiling-light,.ex-shot{transition:none!important;animation:none!important}
}

/* the dawn bridge under the gallery: softer, so it reads as light, not a glitch */
.offer .dawn::before{opacity:.26}

/* ── render only what is near ──────────────────────────────────────────────────────────────────────────────
   Below-the-fold chapters skip style, layout and paint until they approach the viewport. Measured with
   scripts/v5/perf_bisect.py on a 4x-slowed phone: first paint about a quarter to a third sooner. The placeholder
   heights are the measured heights (desktop, tablet, phone); "auto" remembers the real height once rendered.
   Never on the showroom: containment would clip its cards' shadows and the display case. ── */
#work>.wrap,#clarity>.wrap,#process>.wrap,.studio-grid,#lab>.wrap,#contact>.wrap,.foot>.wrap,#offer .fee-notes{content-visibility:auto;overflow-clip-margin:96px}   /* containment clips paint at the box: the margin keeps shadows (Sablelight's drop shadow) whole */
#work>.wrap{contain-intrinsic-block-size:auto 1650px}
#clarity>.wrap{contain-intrinsic-block-size:auto 970px}
#process>.wrap{contain-intrinsic-block-size:auto 1450px}
.studio-grid{contain-intrinsic-block-size:auto 440px}
#lab>.wrap{contain-intrinsic-block-size:auto 520px}
#contact>.wrap{contain-intrinsic-block-size:auto 760px}
.foot>.wrap{contain-intrinsic-block-size:auto 120px}
#offer .fee-notes{contain-intrinsic-block-size:auto 250px}
@media (max-width:1079px){
  #work>.wrap{contain-intrinsic-block-size:auto 2280px}#clarity>.wrap{contain-intrinsic-block-size:auto 1040px}
  #process>.wrap{contain-intrinsic-block-size:auto 1560px}.studio-grid{contain-intrinsic-block-size:auto 820px}
  #lab>.wrap{contain-intrinsic-block-size:auto 980px}#contact>.wrap{contain-intrinsic-block-size:auto 1100px}
  .foot>.wrap{contain-intrinsic-block-size:auto 290px}#offer .fee-notes{contain-intrinsic-block-size:auto 400px}
}
@media (max-width:700px){
  #work>.wrap{contain-intrinsic-block-size:auto 2330px}#clarity>.wrap{contain-intrinsic-block-size:auto 1130px}
  #process>.wrap{contain-intrinsic-block-size:auto 1710px}.studio-grid{contain-intrinsic-block-size:auto 940px}
  #lab>.wrap{contain-intrinsic-block-size:auto 1140px}#contact>.wrap{contain-intrinsic-block-size:auto 1370px}
  .foot>.wrap{contain-intrinsic-block-size:auto 345px}#offer .fee-notes{contain-intrinsic-block-size:auto 650px}
}
/* ── jump, don't glide, below desktop ───────────────────────────────────────────────────────────────────
   A smooth in-page scroll is aimed before the chapters it passes have rendered, and on phones and tablets they
   grow past their placeholders: "Start a conversation" and "Ask about …" stopped about a screen short of #contact
   (live check 2026-10-22, 360 to 768 px). An instant jump lands on the form at every width; desktop keeps the glide. ── */
@media (max-width:1079px){html{scroll-behavior:auto}}

/* -- production contact form (built only when the form posts to /api/inquiry; the review composer is unchanged) -- */
.composer .c-err{margin:-.55rem 0 0;font:600 .88rem/1.4 var(--font);color:#8A1C00}
.composer [aria-invalid="true"]{border-color:#8A1C00;box-shadow:0 0 0 1px #8A1C00}
.composer .c-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.composer .c-turnstile:empty{display:none}
.composer .btn[aria-disabled="true"]{opacity:.7;cursor:progress}
.composer [data-inquiry-status]:empty{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}   /* stays a live region */