/* ==========================================================================
   studio.css — the "white studio" inner-page language (Step C, 2026-07-18)
   --------------------------------------------------------------------------
   Loaded AFTER /styles.css on every inner page (never index.html, never
   404.html — that page is self-contained by contract). styles.css stays
   untouched as the base layer; this sheet re-tokens the surface and lays the
   approved scroll-world design language over it, ported from:
     - redesign/mock/index.html               (approved "words in the room")
     - redesign/previz-preview/css/world.css  (homepage tokens + vocabulary)
   Inner pages are the CALM rooms of the same studio: no video, whiter
   surfaces, floating placard sections, big Playfair headlines under
   uppercase mono eyebrows, teal accents, hairline rules.

   Design tokens chosen here (the canonical Step-C set):
     surface        #f4f6f7   (the ONE inner-page studio hex; hero glow #fff)
     ink            #171a1e   (unchanged, mock-identical)
     muted          #4d565e   (unchanged, mock-identical)
     teal           #0f766e   text-safe accent · teal-bright #14b8a6 borders
     hairline       rgba(23, 26, 30, 0.08)
     placard shadow 0 24px 48px -36px rgba(23, 26, 30, 0.25)
   ========================================================================== */

:root {
  --bg: #f4f6f7;             /* whiter studio floor — ONE hex, used everywhere */
  --bg-2: #f4f6f7;           /* flattens the old vertical gradient */
  --concrete-hi: #ffffff;    /* body radial now pools pure white, like the mock room */
  --line-hair: rgba(23, 26, 30, 0.08);
  --placard-shadow: 0 24px 48px -36px rgba(23, 26, 30, 0.25);
  --placard-shadow-hover: 0 30px 54px -34px rgba(23, 26, 30, 0.30);
}

/* Frosted top-bar tints follow the new surface hex. */
.topnav::before {
  background: linear-gradient(180deg, rgba(244, 246, 247, 0.66), rgba(244, 246, 247, 0.28) 62%, rgba(244, 246, 247, 0));
}
.topnav.is-scrolled::before {
  background: linear-gradient(180deg, rgba(244, 246, 247, 0.85), rgba(244, 246, 247, 0.45) 62%, rgba(244, 246, 247, 0));
}

/* ---------- Hero — spatial type, calm room -------------------------------
   The mock's hero grammar without the video: uppercase mono eyebrow ABOVE a
   big Playfair headline (the .subbrand is re-ordered up via flex), a gentle
   perspective tilt on the headline, generous air. The old JT badge box is
   retired — the wordmark IS the object in the room. */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 108px 24px 64px;
  perspective: 1400px;
  perspective-origin: 50% 30%;
}
.hero .mark { display: none; }
.hero .subbrand {
  order: -1;
  margin: 0 0 18px;
  letter-spacing: 0.3em;
  color: var(--teal);
  line-height: 1.9;
  max-width: 92vw;
}
.hero .wordmark {
  margin: 0 0 18px;
  font-size: clamp(2.5rem, 6.5vw, 4.2rem);
  letter-spacing: 0.02em;
  line-height: 1.04;
  transform: rotateX(6deg);
  max-width: 22ch;
}
.hero .tagline {
  max-width: 58ch;
  font-size: 17px;
  line-height: 1.6;
}
.hero .manifesto { max-width: 46ch; }
.hero .links { margin-top: 8px; }

/* ---------- Sections as floating placards --------------------------------
   Every content section becomes an object in the white room: solid white
   surface, hairline border, slight radius, tiny shadow, whitespace between.
   The old fading hairline divider is retired with the flat page it ruled. */
.wrap { max-width: 980px; padding: 0 20px 8px; }
.section {
  padding: clamp(28px, 4.5vw, 44px) clamp(22px, 4.5vw, 46px);
  margin: 0 0 26px;
  background: #ffffff;
  border: 1px solid var(--line-hair);
  border-radius: 18px;
  box-shadow: var(--placard-shadow);
}
.section::before { display: none; }

/* CTA / stand-alone card sections carry their own placard — the wrapping
   section goes transparent so boxes never nest. */
.section.no-rule {
  padding: 0;
  margin: 6px 0 30px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Section headings: mono teal eyebrow, no leading dash, Playfair display. */
.eyebrow {
  margin: 0 0 12px;
  letter-spacing: 0.3em;
  color: var(--teal);
}
.eyebrow::before { display: none; }
.section h2 {
  font-size: clamp(1.65rem, 3.4vw, 2.15rem);
  letter-spacing: 0.005em;
  line-height: 1.12;
}

/* ---------- Cards & offers: placards within the room ---------------------- */
.card {
  background: #ffffff;
  border: 1px solid var(--line-hair);
  border-radius: 14px;
  box-shadow: 0 16px 34px -30px rgba(23, 26, 30, 0.22);
}
.card:hover {
  border-color: rgba(15, 118, 110, 0.3);
  box-shadow: var(--placard-shadow-hover);
}
.offer {
  background: #ffffff;
  border: 1px solid var(--line-hair);
  border-radius: 16px;
  box-shadow: 0 16px 34px -30px rgba(23, 26, 30, 0.22);
}
/* Price as a mono micro-label — studio spec-plate, not a headline. */
.offer .price {
  font-family: var(--font-mono);
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--teal);
}
.cta-band,
.contact-card {
  border-color: var(--line-hair);
  background:
    radial-gradient(700px 240px at 50% 0%, rgba(20, 184, 166, 0.07) 0%, transparent 70%),
    #ffffff;
  box-shadow: var(--placard-shadow);
}
.demo {
  border-color: var(--line-hair);
  background:
    radial-gradient(700px 240px at 50% 0%, rgba(20, 184, 166, 0.05) 0%, transparent 70%),
    #ffffff;
}

/* ---------- Nav overlay (nav.js injects .nav-menu-btn + .nav-overlay) ------ */
.nav-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.nav-menu-btn:hover { color: var(--teal); }

/* styles.css handles .nav-overlay base (frosted glass, z-index, open/close
   transitions).  We only add centering for the flat link list. */
.nav-overlay {
  align-items: center;
  justify-content: center;
}

/* Flat link list — nav.js creates .overlay-nav with top-level <a> links. */
.overlay-nav {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  text-align: center;
}
.overlay-nav a {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--ink);
  text-decoration: none;
  transition: color 160ms ease;
}
.overlay-nav a:hover { color: var(--teal); }

/* ---------- Footer: hairline shelf on the studio floor -------------------- */
footer { background: transparent; }
.disclaimer { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.7; }

/* ---------- Small screens -------------------------------------------------- */
@media (max-width: 720px) {
  .nav-menu-btn { display: inline-flex; grid-column: 3; justify-self: end; }
}

@media (max-width: 640px) {
  .hero { padding: 92px 18px 48px; }
  .hero .subbrand { letter-spacing: 0.22em; }
  .wrap { padding: 0 14px 8px; }
  .section { border-radius: 15px; }
  .overlay-nav a { font-size: 1.35rem; }
}

/* Reduced motion: the tilt is static (no animation), but flatten it anyway —
   perspective text can shimmer on some zoomed/low-vision setups. */
@media (prefers-reduced-motion: reduce) {
  .hero .wordmark { transform: none; }
}