/* ══════════════════════════════════════════════════════════════════════
   QUIET FUTURE — the approved, FROZEN homepage visual system, promoted
   site-wide on Raymund's instruction, 2026-08-11 (HIRAYA-D25).

   Origin: src/_proposal/proposal.css, kept as the historical proposal.
   The freeze applies here exactly as it did there: permitted changes are
   activating a hidden [data-asset] hook when a real approved photograph
   exists, dropping the approved CTA into .cta-slot when Package E clears,
   and defect fixes. Anything else needs Raymund to reopen visual work.

   Loaded AFTER components.css on every page. Inner pages use the solid
   navigation state (no .at-top — that state exists only over the homepage
   hero) and keep their own content sections; this file supplies the shared
   chrome: fixed navigation, band rhythm, editorial type, charcoal footer.
   ═══════════════════════════════════════════════════════════════════ */


/* ── Editorial type scale — larger and tighter than the utility scale ── */
:root {
  --display: clamp(2.6rem, 1.35rem + 5.4vw, 5.25rem);
  --statement: clamp(1.5rem, 1.05rem + 1.95vw, 2.5rem);
  --lead: clamp(1.0625rem, 1rem + 0.32vw, 1.25rem);
  --eyebrow: 0.75rem;

  --gutter: clamp(1.25rem, 0.5rem + 3vw, 4.5rem);
  --band: clamp(4.5rem, 2rem + 9vw, 9.5rem);   /* vertical section rhythm */
  --shell: 1360px;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ── Section rhythm — alternating grounds, no fifth colour ───────────── */
.band { padding-block: var(--band); }
.band--ivory    { background: var(--ivory);    color: var(--charcoal); }
.band--white    { background: var(--white);    color: var(--charcoal); }
.band--charcoal { background: var(--charcoal); color: var(--ivory); }
.band--charcoal h2, .band--charcoal h3 { color: var(--ivory); }

/* ══ NAVIGATION ═══════════════════════════════════════════════════════
   Sticky, with a restrained blur. Default state is a SOLID ivory bar, so
   with JavaScript off the navigation is fully readable — the transparent
   over-hero treatment is the enhancement, not the baseline. */
/* ⚠ FIXED, NOT STICKY — and the difference is not cosmetic.
   A sticky bar occupies flow space, so the hero begins BELOW it and the bar
   sits over the page background, not over the hero. The transparent state
   then renders as an ivory strip with ivory links on it — invisible. Caught
   in a headless render, which reproduced it when the live DOM inspection did
   not, because the computed styles were correct; only the stacking was wrong.
   Fixed overlays the hero, which is what the transparent treatment needs. */
.nav-shell {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(247, 245, 240, 0.86);
  border-bottom: 1px solid var(--stone);
  transition: background .3s ease, border-color .3s ease;
}
@supports (backdrop-filter: blur(10px)) {
  .nav-shell { backdrop-filter: blur(10px) saturate(1.1); }
}
.nav-shell > div {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); min-height: 72px;
}

/* Over the charcoal hero: transparent, reversed logo, ivory links. */
.nav-shell.no-anim, .nav-shell.no-anim * { transition: none !important; }

.nav-shell.at-top {
  background: transparent; border-bottom-color: transparent; backdrop-filter: none;
}
.nav-shell.at-top .nav a { color: var(--ivory); }
.nav-shell.at-top .nav-toggle { color: var(--ivory); border-color: rgba(247,245,240,.4); }

/* Two logo files, stacked, cross-faded. No layout shift, no swap flicker. */
.brand-swap { position: relative; display: block; line-height: 0; }
.brand-swap img { display: block; height: 44px; width: auto; transition: opacity .3s ease; }
.brand-swap img + img { position: absolute; inset: 0; }
.brand-swap .on-light { opacity: 1; }
.brand-swap .on-dark  { opacity: 0; }
.at-top .brand-swap .on-light { opacity: 0; }
.at-top .brand-swap .on-dark  { opacity: 1; }

.nav-shell .nav { gap: clamp(1rem, 0.4rem + 1.6vw, 2.25rem); }
.nav-shell .nav a {
  font-size: 0.9375rem; letter-spacing: 0.005em;
  text-decoration: none; color: var(--charcoal);
  position: relative; transition: color .25s ease;
}
/* Underline is drawn, so it can sit off the baseline and animate without
   shifting text. Never the only signal — aria-current carries the meaning. */
.nav-shell .nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .28s ease;
}
.nav-shell .nav a:hover::after,
.nav-shell .nav a:focus-visible::after,
.nav-shell .nav a[aria-current="page"]::after { transform: scaleX(1); }

/* ══ HERO ═════════════════════════════════════════════════════════════
   Charcoal ground. The H1 and the subheadline must both sit inside the
   first viewport — that is a hard requirement, so the block is sized with
   svh and the type scale is capped rather than left to grow. */
.hero {
  position: relative; overflow: hidden;
  background: var(--charcoal); color: var(--ivory);
  /* Capped, not unbounded. On a tall desktop display an uncapped 100svh hero
     becomes a 1300px wall of empty charcoal before anything else appears —
     generous negative space turns into a dead screen. The cap keeps the
     intended proportion on laptops and phones and stops it running away on
     large monitors. */
  min-height: min(100svh, 1040px);
  display: flex; align-items: center;
  /* Bottom padding is small on purpose: it puts the crest of the brass arc
     at the fold, so the signature is part of the first impression rather
     than something you have to scroll to find. */
  padding-block: calc(72px + var(--space-5)) clamp(5rem, 3rem + 6vw, 9rem);
}

/* WEB-01 lands here as a background image with the type in its quiet area
   (left 40% desktop, bottom 45% mobile, per the capture brief). Until then
   the hero is typographic — which is the documented State A fallback, not a
   compromise. No placeholder box: an empty frame above a headline reads as
   a broken page. */
.hero__figure {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(105deg, var(--charcoal) 0%, var(--charcoal) 46%, #23262a 100%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; }

/* ⚠ MEASURE UNITS: `ch` and `em` resolve against the element's OWN font
   size, not its parent's. An earlier draft capped this wrapper at 20ch and
   squeezed an 84px headline into a 227px column — the wrapper inherits body
   type, so 20ch was 20 body characters, not 20 display characters.
   The cap belongs on the heading, in em. */
.hero__copy { max-width: min(100%, 70rem); }

.hero h1 {
  font-size: var(--display);
  line-height: 0.96;
  letter-spacing: -0.035em;
  font-weight: var(--weight-semi);
  color: var(--ivory);
  text-wrap: balance;
  margin: 0;
  max-width: 11em;        /* em = display size, so ~11 display characters */
}
.hero__lead {
  max-width: 46ch;
  margin-top: clamp(1.25rem, 0.6rem + 1.4vw, 2rem);
  font-size: var(--lead);
  line-height: 1.62;
  color: #CFCBC4;                 /* ivory dimmed — 9.4:1 on charcoal */
}

/* The one brass arc. Path is lifted verbatim from the Horizon H icon and
   cropped to the arc; preserveAspectRatio="none" stretches it to the full
   width while vector-effect keeps the stroke a true hairline at any size.
   Decorative, aria-hidden, and the only brass on this screen. */
.hero__arc {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  height: clamp(90px, 16vw, 200px);
  width: 100%; display: block; pointer-events: none;
  opacity: .85;
}
.hero__arc path { stroke: var(--brass); stroke-width: 1.25; fill: none; }

/* ══ STATEMENT BAND ═══════════════════════════════════════════════════ */
.statement {
  font-size: var(--statement);
  line-height: 1.28; letter-spacing: -0.02em;
  font-weight: var(--weight-medium);
  max-width: 24ch; text-wrap: balance;
  margin: 0;
}

/* ══ WHY HIRAYA ═══════════════════════════════════════════════════════
   One authentic image, three typographic statements, thin brass rules,
   large whitespace. Deliberately NOT three icon cards. */
.why { display: grid; gap: clamp(2.5rem, 1rem + 5vw, 6rem); align-items: start; }
@media (min-width: 900px) { .why { grid-template-columns: 5fr 7fr; } }

.why__figure {
  aspect-ratio: 4 / 5;
  background: var(--ivory);
  border: 1px solid var(--stone);
  position: relative;
}
.why__figure::after {           /* a quiet corner tick, not a placeholder box */
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 34%; height: 1px; background: var(--brass);
}

.why__list { display: grid; }
.why__item { padding-block: clamp(1.5rem, 0.8rem + 1.8vw, 2.75rem); }
.why__item + .why__item { border-top: 1px solid var(--brass); }
.why__item:first-child { padding-top: 0; }
.why__item h2, .why__item h3 {
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 0.6rem;
  text-wrap: balance;
}
.why__item p { margin: 0; max-width: 58ch; color: #4A4E55; line-height: 1.68; }

/* ══ PROVIDER ═════════════════════════════════════════════════════════
   The trust page's front door, treated as a major editorial feature using
   only the four approved facts: portrait, name, role, link. No invented
   credential bullets — school, year, certifications and training are all
   prohibited on any surface until verified and approved. */
.provider { display: grid; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
@media (min-width: 900px) { .provider { grid-template-columns: 4fr 6fr; } }

.provider__figure {
  aspect-ratio: 4 / 5;
  background: #23262a;
  border: 1px solid rgba(216, 211, 201, 0.22);
}
.provider__eyebrow {
  font-size: var(--eyebrow); letter-spacing: .16em; text-transform: uppercase;
  color: var(--stone); margin: 0 0 clamp(1rem, .6rem + 1vw, 1.75rem);
}
.provider__name {
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);
  line-height: 1.06; letter-spacing: -0.03em; font-weight: var(--weight-semi);
  margin: 0; color: var(--ivory); text-wrap: balance;
}
.provider__role {
  margin: clamp(.75rem, .5rem + .6vw, 1.1rem) 0 0;
  font-size: var(--lead); color: #CFCBC4;
}
.provider__link {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: var(--tap-min);
  margin-top: clamp(1.5rem, 1rem + 1.4vw, 2.5rem);
  color: var(--ivory); text-decoration: none;
  font-size: var(--lead);
  border-bottom: 1px solid rgba(247, 245, 240, .45);
  transition: border-color .25s ease;
}
.provider__link:hover { border-bottom-color: var(--ivory); }
/* Arrow is a rendered affordance, not copy — it is generated, never typed,
   and never enters the accessible name. */
.provider__link::after {
  content: "→"; transition: transform .25s ease; speak: never;
}
.provider__link:hover::after { transform: translateX(4px); }

/* ══ COMMUNITY ════════════════════════════════════════════════════════ */
.community { display: grid; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
@media (min-width: 900px) { .community { grid-template-columns: 6fr 5fr; } }
.community__figure {
  aspect-ratio: 16 / 10; background: var(--white); border: 1px solid var(--stone);
}

/* ══ ENTRANCE MOTION ══════════════════════════════════════════════════
   Opacity and transform only. One pass, no loop, no parallax, no sweep.
   Fully removed under prefers-reduced-motion — content renders at rest. */
@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(14px); animation: rise .85s cubic-bezier(.22,.61,.36,1) forwards; }
  .rise--1 { animation-delay: .05s; }
  .rise--2 { animation-delay: .18s; }
  .rise--3 { animation-delay: .30s; }
  .rise--4 { animation-delay: .42s; }
  @keyframes rise { to { opacity: 1; transform: none; } }

  /* ⚠ NO SCROLL-TRIGGERED REVEAL, AND THAT IS A DESIGN DECISION.
     An earlier draft faded each section in on scroll. Three reasons it is
     gone: it made content visibility depend on JavaScript, which is exactly
     backwards; the observer proved unreliable under test, leaving whole
     sections blank; and section-by-section fade-in is the house style of the
     SaaS marketing page this brief explicitly rejects.

     Entrance motion is the hero only, below, in pure CSS — it self-completes,
     cannot strand content, and costs nothing at scroll time. */
}

/* ══ FOOTER ═══════════════════════════════════════════════════════════ */
.foot__top { display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .foot__top { grid-template-columns: 1fr auto; align-items: start; } }
.foot .nav { flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.foot .nav a { color: var(--ivory); text-decoration: none; opacity: .85; }
.foot .nav a:hover, .foot .nav a:focus-visible { opacity: 1; text-decoration: underline; }
.foot__legal { color: #A9ADB4; font-size: var(--size-small); }
.foot__legal p { margin: 0; }
.foot__legal p + p { margin-top: .4rem; }
.foot hr { border: 0; border-top: 1px solid rgba(216,211,201,.22); margin-block: var(--space-4); }

@media (max-width: 899px) {
  .hero { min-height: min(92svh, 860px); }
  .hero__copy { max-width: none; }
}

/* Section anchors clear the fixed navigation bar. */
#why-hiraya, #provider, #community { scroll-margin-top: 72px; }

/* ══ MOBILE FIXES ═════════════════════════════════════════════════════
   Two real defects caught in a 390px render, both mine.

   1. The header did not collapse. The existing mobile rules target
      .site-header; this proposal's header is .nav-shell, so none of them
      applied — the five links stayed inline, wrapped into two rows, and
      pushed the bar wider than the screen. Rules restated for .nav-shell.

   2. The headline and subheadline overflowed horizontally. The display
      clamp's floor (2.6rem) is wider than a 390px viewport can hold for
      "Modern dentistry.", and the lead's 46ch measure exceeds the screen.
      A page that scrolls sideways fails its own acceptance criteria. */
@media (max-width: 640px) {
  .nav-shell .nav { display: none; }
  .nav-shell .nav[data-open] {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--charcoal);
    border-block: 1px solid rgba(216,211,201,.22);
    padding: var(--space-2) var(--gutter);
  }
  .nav-shell .nav[data-open] a { color: var(--ivory); min-height: var(--tap-min); width: 100%; }
  .nav-shell { position: fixed; }
  .nav-shell > div { position: relative; min-height: 64px; }
  .nav-toggle { display: inline-flex; }

  :root { --display: clamp(2.05rem, 1.1rem + 4.6vw, 3rem); }
  .hero h1 { max-width: none; letter-spacing: -0.03em; line-height: 1.0; }
  .hero__lead { max-width: none; }
  .statement { max-width: none; }
  .brand-swap img { height: 32px; }
}

/* Belt and braces: nothing on this page may cause a sideways scroll. */
html, body { overflow-x: hidden; }
.hero h1, .hero__lead, .statement, .why__item h2, .why__item h3, .provider__name {
  overflow-wrap: break-word;
}

/* ══════════════════════════════════════════════════════════════════════
   FINAL REFINEMENT PASS — 2026-08-11
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1 · Hero as an inset panel on desktop, full-bleed on phone ────────
   The radius makes the charcoal read as an architectural panel set into
   the page rather than a band bolted across it. On a phone there is no
   room for an inset to read as intentional, so it goes full-bleed. */
@media (min-width: 900px) {
  .hero {
    border-radius: 26px;
    margin: var(--space-2) var(--gutter) 0;
    width: auto;
  }
}
@media (max-width: 899px) {
  .hero { border-radius: 0; margin: 0; }   /* full-bleed charcoal */
}

/* ── Horizon arc — apex raised, and one entrance ──────────────────────
   Taller box lifts the crest ~55px while the ends stay near the corners,
   so the curve reads as a horizon rising into the frame rather than a
   line skimming the bottom edge. */
.hero__arc { height: clamp(150px, 23vw, 275px); }
.hero { --arc-inset: 26px; }
@media (min-width: 900px) {
  /* Clip the arc to the panel's rounded corners. */
  .hero { overflow: hidden; }
}

@media (prefers-reduced-motion: no-preference) {
  /* One pass. Transform and opacity only. Never loops, never re-triggers,
     and the arc is decorative so nothing is hidden if it fails to run. */
  .hero__arc {
    opacity: 0;
    transform: translateY(26px);
    animation: arc-rise 1.15s cubic-bezier(.22,.61,.36,1) .45s forwards;
  }
  @keyframes arc-rise { to { opacity: .85; transform: none; } }
}

/* ── Logo ~18% larger ─────────────────────────────────────────────────
   44 → 52px. The lockup carries a DENTAL GROUP sub-line that only starts
   reading properly above about 40px. */
.brand-swap img { height: 52px; }
@media (max-width: 640px) { .brand-swap img { height: 38px; } }

/* ── 2 · CTA slot — occupies no space until it holds something ────────── */
.cta-slot:empty { display: none; }

/* ── 3 · Hidden asset hooks ───────────────────────────────────────────
   [hidden] is honoured explicitly because the reset sets display on some
   of these elements. A missing photograph renders as NOTHING — never as a
   grey rectangle, and never as stock or generated imagery. */
[data-asset][hidden] { display: none !important; }

/* ── 4 · Why Hiraya — three balanced editorial columns ────────────────
   With no photograph the media column would leave a hole, so the three
   statements take the full measure as equal columns divided by thin brass
   rules. No cards, no shadows, no icons. When LIB-E arrives, remove
   `hidden` and the .why--text modifier and the media column returns. */
@media (min-width: 900px) {
  .why--text { grid-template-columns: repeat(3, 1fr); gap: 0; align-items: stretch; }
  .why--text .why__list { display: contents; }
  .why--text .why__item { padding: 0 clamp(1.5rem, 1rem + 1.6vw, 3rem); }
  .why--text .why__item:first-child { padding-left: 0; }
  .why--text .why__item:last-child { padding-right: 0; }
  .why--text .why__item + .why__item {
    border-top: 0;
    border-left: 1px solid var(--brass);
  }
  .why--text .why__item h2, .why--text .why__item h3 { font-size: clamp(1.35rem, 1rem + 1.1vw, 2rem); }
  .why--text .why__item p { max-width: 34ch; }
}
@media (max-width: 899px) {
  .why--text .why__item + .why__item { border-top: 1px solid var(--brass); }
}

/* ── 5 · Provider — text-led while WEB-09 does not exist ──────────────
   Centred, generous, and deliberately composed rather than a text column
   sitting beside a hole. Restore the split layout by removing `hidden`
   from the portrait hook and the --text modifier. */
.provider--text { grid-template-columns: 1fr; justify-items: start; }
@media (min-width: 900px) {
  .provider--text { padding-inline: clamp(0rem, -6rem + 12vw, 8rem); }
  .provider--text .provider__name { font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4rem); max-width: 16ch; }
}
.provider--text .provider__eyebrow { margin-bottom: clamp(1.25rem, .8rem + 1.4vw, 2.25rem); }

/* A single brass hairline under the eyebrow gives the band structure that
   the missing portrait used to provide. Decorative, short, not a divider. */
.provider--text .provider__eyebrow::after {
  content: ""; display: block; width: 64px; height: 1px;
  background: var(--brass); margin-top: clamp(.75rem, .5rem + .6vw, 1.1rem);
}

/* ── 6 · Community — single measure, no media hole ────────────────────── */
.community--text { grid-template-columns: 1fr; }
@media (min-width: 900px) { .community--text .statement { max-width: 30ch; } }

/* ══ FINAL DENSITY PASS — 2026-08-11 ══════════════════════════════════
   Two refinements only, then the homepage visual system is FROZEN.

   The statement band and the Community/SGV band are editorial TRANSITIONS
   between major sections. At the full --band rhythm (up to 9.5rem each
   side) they read as large empty areas rather than intentional pauses.
   Tightened to roughly half the full rhythm; the approved wording in both
   is byte-identical and untouched. Spacing and proportion only — no new
   copy, no images, no icons, no second Horizon device. */
.band--transition {
  padding-block: clamp(2.5rem, 1.25rem + 4vw, 4.75rem);
}

/* A hair of extra measure so the statement sits as one deliberate line
   block, not a lost fragment in the tightened band. */
.band--transition .statement { max-width: 26ch; }

/* ══════════════════════════════════════════════════════════════════════
   ⚠ VISUAL SYSTEM FROZEN — 2026-08-11, owner decision.
   The Quiet Future direction as rendered by this file is the approved
   homepage visual system. Do not add sections, effects, icons, imagery,
   alternative heroes or new colour treatments here. Permitted changes:
   activating a hidden [data-asset] hook when a real approved photograph
   exists · dropping the approved CTA into .cta-slot when Package E clears ·
   defect fixes. Anything else needs Raymund to reopen visual work.
   SEO/AEO/GEO is the active workstream from this point.
   ═══════════════════════════════════════════════════════════════════ */


/* ══ SITE-WIDE ADDITIONS FOR THE PROPAGATION — 2026-08-11 ═════════════ */

/* Content that starts below the fixed bar needs its own offset; the hero
   handles this itself on the homepage. */
.below-nav { padding-top: calc(72px + var(--space-2)); }

/* Hidden asset hooks are part of the frozen system: a missing photograph
   renders as NOTHING. [hidden] is enforced against any display value the
   asset-slot classes set. */
.asset-slot[hidden], [data-asset][hidden] { display: none !important; }

/* Brand sizing inside the fixed bar (single-logo inner pages included). */
.nav-shell .brand img { height: 52px; width: auto; display: block; }
@media (max-width: 640px) { .nav-shell .brand img { height: 38px; } }

/* Footer legal slots sit on charcoal — the dashed stone baseline reads
   correctly there; give the block breathing room above the language line. */
.foot__legal .slot--empty { border-bottom-color: rgba(216,211,201,.45); }

/* The visible breadcrumb inherits editorial spacing below the fixed bar. */
.below-nav .breadcrumb { margin: 0; }