/* ============================================================
   home.css — Home page only.
   Sparse by design: hero, thesis, offerings directory, CTA.
   SACER is featured once (hero card) and listed once (directory);
   its detail lives on the SACER pages, not here.
   ============================================================ */

/* ---------- Hero ---------- */
.hero{ position:relative; padding-top:var(--sp-6); padding-bottom:var(--sp-7); }
.hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:stretch; }
.hero__copy{ display:flex; flex-direction:column; padding-top:18px; }
.hero h1{ font-size:var(--fs-display); margin-top:22px; max-width:13ch; }
.hero__lead{ margin-top:26px; max-width:38ch; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:22px; align-items:center; margin-top:auto; padding-top:44px; }

/* SACER featured card in hero — the one place SACER is showcased on Home.
   min-height basis: 475px desktop / 400px @980 / 380px @620 is sized to keep
   the mark's clearance band (see .hero__glow below) comfortable at each step,
   not an arbitrary round number. */
.hero__card{
  position:relative; border-radius:var(--radius); overflow:hidden; min-height:475px;
  background:radial-gradient(120% 100% at 70% 20%, var(--panel-lift) 0%, var(--panel) 55%, var(--panel-deep) 100%);
  box-shadow:0 40px 90px -50px rgba(35,38,37,.7); display:flex; flex-direction:column;
  /* Card also carries data-reveal="slide". Two cascade consequences, both
     from base.css's reveal rules being higher specificity than this block:
     1. `.js [data-reveal][data-reveal="slide"]` (0,3,0) owns the `transform`
        transition after reveal, so the hover lift runs at
        --dur-slow/--ease-emphasized rather than the values below — soft,
        not broken; left as-is rather than re-timing the reveal.
     2. `.js [data-reveal].is-visible` (0,3,0) pins `transform:none` forever
        once revealed, which would silently kill a plain (0,2,0)
        `.hero__card:hover` lift — so the hover rule below carries a
        second, higher-specificity selector for the revealed state. */
  transition:transform var(--dur-base) var(--ease-standard);
}
/* First selector = no-JS path (reveal rules never apply without .js);
   second beats the reveal end-state's transform:none (see comment above).
   The hover-state transition override makes the lift respond crisply
   (240ms standard) while release falls back to the reveal rule's soft
   420ms emphasized — transitions read the destination state's timing, so
   this never re-times the reveal itself (its destination is non-hover). */
.hero__card:hover,
.js .hero__card[data-reveal].is-visible:hover{
  transform:translateY(calc(var(--move-sm) * -.375));
  transition:transform var(--dur-base) var(--ease-standard);
}
/* Hover glow deepen. Lives on ::after rather than a box-shadow transition
   (paint-triggering, house rule — see inner.css .pipe__step.is-judg::after).
   .hero__card has overflow:hidden (clips the mark art to the rounded
   corners), which would also clip an outward-spreading shadow on a child
   pseudo-element — so this glow reads INSET, inside the card's own
   silhouette, instead of the outward spread a free-standing card would use.
   Kept deliberately faint per the "very subtle" brief. */
.hero__card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
  box-shadow:inset 0 0 46px -14px rgba(154,166,238,.22), inset 0 40px 70px -46px rgba(0,0,0,.55);
  opacity:0; transition:opacity var(--dur-slow) var(--ease-emphasized);
}
.hero__card:hover::after{ opacity:1; }
.hero__card-lab{ position:absolute; top:22px; left:24px; right:24px; display:flex; justify-content:space-between; z-index:3; }
.hero__card-lab .eyebrow{ color:var(--sage); }
.hero__card-lab .tick{ font-family:var(--mono); font-size:var(--fs-label); color:var(--sage); }
.hero__glow{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.hero__glow img{ width:78%; height:78%; object-fit:contain; mix-blend-mode:screen; }
/* Ambient breath — hero mark only, very subtle (opacity dips to .93 at the
   midpoint). Frozen at opacity:1 outside the gate and under reduced motion. */
@media (prefers-reduced-motion:no-preference){
  @keyframes hero-mark-breathe{ 0%,100%{ opacity:1; } 50%{ opacity:.93; } }
  .hero__glow img{ animation:hero-mark-breathe var(--dur-ambient) var(--ease-standard) infinite; }
}
.hero__card-foot{ position:absolute; left:24px; right:24px; bottom:22px; z-index:3; }
/* 30px is a component display size for the wordmark, intentionally fixed
   outside the fluid --fs-* scale — it's sized to the card, not the viewport. */
.hero__card-foot .pname{ font-size:30px; font-weight:300; letter-spacing:.04em; color:var(--text-on-panel); }
.hero__card-foot .pdesc{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.05em; color:var(--peri-mute); margin-top:6px; }
.hero__card-foot .plink{ display:inline-flex; gap:9px; margin-top:18px; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.1em; text-transform:uppercase; color:var(--peri); border-bottom:1px solid var(--peri-deep); padding-bottom:5px; }
.hero__card-foot .plink .arr{ transition:transform var(--dur-base) var(--ease-standard); }
.hero__card:hover .plink .arr{ transform:translateX(calc(var(--move-sm) * .5)); }

/* ---------- Thesis strip (company-level, not a SACER pitch) ---------- */
.manifesto{ background:var(--ink); color:var(--text-on-dark); }
.manifesto .container{ padding-block:var(--sp-7); }
.manifesto__inner{ display:grid; grid-template-columns:auto 1fr; gap:clamp(32px,6vw,90px); align-items:center; }
.manifesto__mark{ width:118px; height:118px; opacity:.92; mix-blend-mode:screen; }
.manifesto blockquote{ margin:0; }
.manifesto .lede{ font-size:var(--fs-h2); font-weight:300; line-height:1.18; letter-spacing:-.015em; max-width:22ch; }
.manifesto .lede em{ color:var(--peri); }
.manifesto cite{ display:block; font-family:var(--mono); font-style:normal; font-size:14px; letter-spacing:.02em; color:var(--text-on-dark-soft); margin-top:24px; max-width:54ch; line-height:1.6; }

/* ---------- Offerings directory ---------- */
.offer__head{ max-width:60ch; margin-bottom:var(--sp-5); }

/* ---------- CTA band ---------- */
.cta{ background:var(--ink); color:var(--text-on-dark); }
.cta .container{ padding-block:var(--sp-7); display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap; }
.cta h2{ font-size:var(--fs-h1); max-width:16ch; color:#fff; }
.cta p{ color:var(--text-on-dark-soft); margin-top:16px; max-width:40ch; }
.cta .btn--solid{ background:var(--paper); color:var(--ink); }
.cta .btn--solid:hover{ background:#fff; }

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero__grid{ grid-template-columns:1fr; }
  /* Stacked single-column layout: the card height — and with it the mark —
     scales fluidly with the viewport (same clamp idiom as the type scale),
     calibrated against reviewed landmarks: ~381px @320, ~405 @375, ~427 @425,
     560 (cap) from ~727px up — so the mark grows with the card instead of
     floating small in an ever-wider dark field. */
  .hero__card{ min-height:clamp(380px, 44vw + 240px, 560px); }
  /* Constrain the glow to the band between the label (bottom edge ~42px) and
     the foot text block (~140px tall including its own bottom offset) so the
     mark's strokes never cross into either. The band inherits the fluid card
     height above. Desktop (inset:0, img 78%x78%) is untouched above 980px. */
  .hero__glow{ top:40px; bottom:150px; }
  .hero__glow img{ width:auto; height:100%; max-width:100%; }
  .manifesto__inner{ grid-template-columns:1fr; gap:30px; justify-items:start; }
  .manifesto__mark{ width:88px; height:88px; }
}
@media (max-width:620px){
  .hero{ padding-top:var(--sp-3); padding-bottom:var(--sp-5); }
  .hero h1{ font-size:clamp(32px,8.4vw,42px); max-width:18ch; margin-top:18px; }
  .hero__lead{ margin-top:18px; }
  .hero__actions{ padding-top:30px; gap:16px; }
  .hero__grid{ gap:var(--sp-5); }
  /* min-height + glow band inherit the fluid ≤980px rules above — no
     tighter override here; the clamp floor (380px) is the phone size. */
  .manifesto .lede{ max-width:none; }
  .offer__head{ margin-bottom:var(--sp-4); }
  .cta .container{ flex-direction:column; align-items:flex-start; gap:24px; }
}