/* ===========================================================================
   HALO · card system v2
   Portrait format, per the supplied design sheet. Four finishes per moment.
   Structure is identical across every finish; only the surface changes.
   =========================================================================== */

.hcard{
  --pad: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  --hc-fg:      oklch(0.205 0.012 262);
  --hc-mut:     oklch(0.470 0.011 262);
  --hc-line:    oklch(0.885 0.004 262);
  --hc-accent:  oklch(0.700 0.140 62);
  --hc-surface: linear-gradient(168deg, #FDFCFA 0%, #F4F2EE 100%);

  position:relative; display:flex; flex-direction:column;
  width:100%; aspect-ratio:41/64; overflow:hidden;
  padding:var(--pad);
  border-radius:14px;
  background:var(--hc-surface);
  color:var(--hc-fg);
  box-shadow:
    0 1px 2px color-mix(in oklab, var(--void) 10%, transparent),
    0 14px 34px -18px color-mix(in oklab, var(--void) 40%, transparent),
    0 40px 80px -50px color-mix(in oklab, var(--void) 55%, transparent);
  text-align:left;
}

/* header ---------------------------------------------------------------- */
.hcard-top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.hcard-brand{ display:flex; align-items:center; gap:.4rem; font-size:.8125rem; font-weight:500; letter-spacing:-0.01em; }
.hcard-brand svg{ width:14px; height:14px; overflow:visible; }
.hcard-brand .ring{
  fill:none; stroke:currentColor; stroke-width:9; stroke-linecap:round;
  stroke-dasharray:183.6 26.9; transform:rotate(113deg); transform-origin:50% 50%;
}
.hcard-mark{ width:15px; height:15px; color:var(--hc-accent); flex:none; }

/* body ------------------------------------------------------------------ */
.hcard-kicker{
  margin-top:auto; padding-top:1.5rem;
  font-size:.625rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--hc-mut);
}
.hcard--moment .hcard-kicker{ color:var(--hc-accent); }
.hcard-title{
  font-family:var(--serif); font-weight:360; font-optical-sizing:auto;
  font-size:clamp(1.25rem, 1.05rem + 0.85vw, 1.6rem);
  line-height:1.14; letter-spacing:-0.018em; margin-top:.45rem; text-wrap:balance;
}
.hcard-rule{ height:1px; border:0; background:var(--hc-line); margin:.875rem 0; }
.hcard-body{
  font-size:.8125rem; line-height:1.5; color:var(--hc-mut);
  text-wrap:pretty; margin-bottom:auto;
}

/* footer ---------------------------------------------------------------- */
.hcard-foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; padding-top:1.25rem; }
.hcard-from{ display:flex; align-items:center; gap:.5rem; min-width:0; }
.hcard-from .avatar{
  width:24px; height:24px; flex:none; border-radius:999px; display:grid; place-items:center;
  background:color-mix(in oklab, var(--hc-fg) 88%, transparent);
  color:var(--paper-raised); font-size:.5625rem; font-weight:600;
}
.hcard-from b{ display:block; font-size:.75rem; font-weight:500; }
.hcard-from span{ display:block; font-size:.6875rem; color:var(--hc-mut); }

/* The seal is the one ornamental element, and it earns its place: it is the
   physical stamp that marks the card as issued rather than drafted. */
.hcard-seal{ width:3.25rem; height:3.25rem; flex:none; color:var(--hc-accent); opacity:.85; }
.hcard-seal svg{ width:100%; height:100%; animation:seal 44s linear infinite; }
.hcard-seal text{ font-size:8.4px; font-weight:600; letter-spacing:.22em; fill:currentColor; }
@keyframes seal{ to{ transform:rotate(360deg); } }

/* ------------------------------------------------------------- finishes -- */

/* 02 · Bold modern */
.hcard--bold{
  --hc-fg:      oklch(0.975 0.003 262);
  --hc-mut:     oklch(0.700 0.010 262);
  --hc-line:    oklch(0.300 0.010 262);
  --hc-accent:  oklch(0.720 0.150 45);
  --hc-surface: linear-gradient(168deg, #171C25 0%, #0D1116 100%);
}
.hcard--bold .hcard-from .avatar{ color:oklch(0.155 0.009 262); }

/* 03 · Refined texture — an embossed shape catching a raking light */
.hcard--texture{
  --hc-surface: linear-gradient(168deg, #F1F0ED 0%, #E7E6E2 100%);
  --hc-accent:  oklch(0.400 0.020 262);
}
.hcard--texture::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 46% at 78% 26%, rgba(255,255,255,.95), transparent 62%),
    radial-gradient(46% 40% at 22% 74%, rgba(0,0,0,.055), transparent 66%),
    conic-gradient(from 210deg at 66% 40%, rgba(0,0,0,.05), rgba(255,255,255,.7) 22%, rgba(0,0,0,.045) 46%, transparent 62%);
  mix-blend-mode:soft-light; opacity:.9;
}

/* 04 · Gradient warm */
.hcard--gradient{
  --hc-line:    rgba(60,50,70,.14);
  --hc-accent:  oklch(0.640 0.160 42);
  --hc-surface: linear-gradient(150deg, #D9D8EC 0%, #E6DEE9 42%, #F7E1CE 78%, #FAD9C2 100%);
}

/* Birthday 03 · Confetti */
.hcard--confetti{ --hc-accent: oklch(0.620 0.190 22); }
.hcard--confetti::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.9;
  background-image:
    linear-gradient(35deg, #E4B7C4 0 100%), linear-gradient(-20deg, #B9CBE8 0 100%),
    linear-gradient(70deg, #E8D5A8 0 100%), linear-gradient(-55deg, #B6D6C2 0 100%),
    linear-gradient(15deg, #D9BCE4 0 100%), linear-gradient(-40deg, #E9C0A6 0 100%),
    linear-gradient(60deg, #BBD3E6 0 100%), linear-gradient(-10deg, #E5C2CE 0 100%),
    linear-gradient(45deg, #D3C6E8 0 100%);
  background-repeat:no-repeat;
  background-size:7px 3px, 6px 3px, 8px 3px, 5px 3px, 7px 3px, 6px 3px, 8px 3px, 5px 3px, 7px 3px;
  background-position:14% 9%, 78% 6%, 41% 15%, 90% 22%, 8% 28%, 62% 11%, 27% 5%, 84% 34%, 52% 24%;
}

/* Birthday 04 · Minimal balloon */
.hcard--balloon{ --hc-accent: oklch(0.620 0.190 22); }
.hcard--balloon::before{
  content:""; position:absolute; right:16%; top:11%; width:34%; aspect-ratio:5/6;
  border-radius:50% 50% 46% 46%; pointer-events:none;
  background:
    radial-gradient(38% 32% at 34% 26%, rgba(255,255,255,.98), transparent 62%),
    linear-gradient(155deg, #F6EDE2 0%, #E4D3C2 55%, #CDB8A4 100%);
  box-shadow:0 16px 26px -18px rgba(60,44,30,.5);
}
.hcard--balloon::after{
  content:""; position:absolute; right:32.4%; top:calc(11% + 40%); width:1px; height:16%;
  background:linear-gradient(rgba(120,100,84,.5), transparent); pointer-events:none;
}

/* Interactive card — used inside the carousel and the wall */
.hcard-btn{
  border:0; padding:0; background:none; cursor:pointer; display:block; width:100%;
  transition:translate 520ms var(--ease), box-shadow 520ms var(--ease);
}
.hcard-btn:hover{ translate:0 -5px; }
.hcard-label{
  display:flex; gap:.625rem; margin-top:.875rem;
  font-size:.6875rem; letter-spacing:.11em; text-transform:uppercase; color:var(--on-paper-mut);
}
.hcard-label i{ font-style:normal; font-variant-numeric:tabular-nums; opacity:.6; }
.band--dark .hcard-label,.band--void .hcard-label{ color:var(--on-ink-dim); }

@media (prefers-reduced-motion: reduce){ .hcard-seal svg{ animation:none; } }

/* ===========================================================================
   LIGHT HERO — matched to the reference frame
   Every rule here is scoped under .hero--light and loaded after pages.css,
   so it wins over the dark .hero defaults without !important.
   =========================================================================== */
.hero--light{
  background:
    radial-gradient(58% 52% at 72% 40%, rgba(255,244,226,.55) 0%, transparent 62%),
    linear-gradient(152deg, #FCFCFC 0%, #F6F6F7 38%, #EFEFF1 72%, #E9E9EC 100%);
  color:#141618;
  min-height:auto;
  padding-block:calc(var(--nav-h) + clamp(3rem, 9vh, 7rem)) clamp(3rem, 7vh, 5rem);
}
.hero--light .lede{ color:#5A5F66; }
.hero--light .eyebrow{ color:var(--glow-ink); }

.hero--light .hero-grid{
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:clamp(2rem, 5vw, 4rem);
  align-items:center;
  min-height:clamp(30rem, 66vh, 42rem);
}
@media (max-width:64rem){ .hero--light .hero-grid{ grid-template-columns:1fr; } }

.hero--light h1{
  font-size:clamp(2.6rem, 4.7vw, 4.75rem);
  line-height:1.02; letter-spacing:-0.028em; font-weight:400;
  margin-bottom:1.75rem;
}
.hero--light h1 em{ font-weight:380; }
.hero--light .lede{
  font-size:1.0625rem; line-height:1.62; max-width:26rem; margin-bottom:2.25rem;
}
.hero--light .hero-cta{ gap:.625rem; }

/* --- the light ---------------------------------------------------------- */
.light-stage{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.light-ring{
  position:absolute; left:var(--lx, 71.5%); top:var(--ly, 41%); translate:-50% -50%;
  width:var(--rsize, min(34vw, 40rem)); aspect-ratio:1; min-width:20rem;
  transform:translate3d(calc(var(--mx, 0) * 8px), calc(var(--my, 0) * 6px), 0);
  transition:transform 900ms var(--ease-soft);
}
.light-ring svg{ width:100%; height:100%; overflow:visible; }
.light-ring circle{ fill:none; }
.lr-wide{ stroke:#F0C489; stroke-width:5.4; filter:blur(15px); opacity:.85; }
.lr-mid { stroke:#F9DFB4; stroke-width:2.2; filter:blur(4px); }
.lr-core{ stroke:#FFF9EE; stroke-width:.85; }

.light-bloom{
  position:absolute;
  left:calc(var(--lx, 71.5%) + var(--mx, 0) * 10px);
  top:calc(var(--ly, 41%) + var(--my, 0) * 8px);
  width:min(96vh, 82vw); aspect-ratio:1; translate:-50% -50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(255,235,198,.50) 0%, rgba(250,218,170,.24) 26%,
    rgba(242,206,160,.09) 46%, transparent 68%);
  filter:blur(14px);
  transition:left 900ms var(--ease-soft), top 900ms var(--ease-soft);
}
.light-floor{
  position:absolute; left:var(--lx, 71.5%); bottom:4%; translate:-50% 0;
  width:min(52vw, 46rem); height:16vh;
  background:radial-gradient(ellipse 50% 50% at 50% 100%, rgba(96,86,74,.11), transparent 72%);
  filter:blur(22px);
}
/* Keeps the headline column clean where the bloom would wash it out. */
.light-scrim{
  position:absolute; inset:0;
  background:linear-gradient(94deg,
    rgba(252,252,252,.94) 2%, rgba(250,250,251,.55) 28%, transparent 52%);
}

/* --- the card stack ----------------------------------------------------- */
.hero-stack{
  position:relative; z-index:2;
  display:grid; place-items:center;
  min-height:clamp(24rem, 56vh, 34rem);
}
.hero-stack .hs{
  position:absolute; width:min(19.5rem, 76vw);
  transform:translate3d(calc(var(--mx, 0) * var(--depth, 1) * 14px), calc(var(--my, 0) * var(--depth, 1) * 10px), 0);
  transition:transform 1100ms var(--ease-soft);
}
.hero-stack .hs-1{ --depth:1;   z-index:3; }
.hero-stack .hs-2{ --depth:.6;  z-index:2; translate:3.25rem -2.25rem; }
.hero-stack .hs-3{ --depth:.34; z-index:1; translate:5.75rem -4rem; }

/* The hero card is its own thing: the reference shows a short quote card,
   not the six-field portrait card used everywhere else on the site. */
.qcard{
  position:relative; display:flex; flex-direction:column;
  aspect-ratio:31/43; padding:1.375rem 1.5rem 1.25rem;
  border-radius:18px; color:#141618;
  background:linear-gradient(160deg, rgba(255,255,255,.93) 0%, rgba(250,250,251,.80) 100%);
  backdrop-filter:blur(16px) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:
    0 1px 1px rgba(60,54,46,.05),
    0 22px 46px -24px rgba(62,55,46,.30),
    0 66px 120px -66px rgba(62,55,46,.40);
}
.qcard-top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.qcard-kicker{
  display:flex; align-items:center; gap:.5rem;
  font-size:.6875rem; font-weight:600; letter-spacing:.115em; text-transform:uppercase;
}
.qcard-kicker svg{ width:15px; height:15px; color:#E9A63C; }
.qcard-dots{ display:flex; gap:3px; opacity:.35; }
.qcard-dots i{ width:3px; height:3px; border-radius:999px; background:currentColor; }
.qcard-msg{
  margin-top:auto; padding-block:1.5rem;
  font-size:1.0625rem; line-height:1.6; letter-spacing:-0.006em;
}
.qcard-foot{ display:flex; align-items:center; gap:.75rem; margin-top:auto; }
.qcard-foot .avatar{
  width:38px; height:38px; flex:none; border-radius:999px; display:grid; place-items:center;
  background:#16181B; color:#fff; font-size:.75rem; font-weight:600;
}
.qcard-foot b{ display:block; font-size:.8125rem; font-weight:600; }
.qcard-foot span{ display:block; font-size:.8125rem; color:#7B8087; }
/* The cards behind are only surfaces catching the ring light. */
.qcard--ghost{ background:linear-gradient(160deg, rgba(255,255,255,.55), rgba(250,250,251,.32)); }
.qcard--ghost > *{ opacity:.28; }

/* --- trusted by --------------------------------------------------------- */
.hero--light .trustline{ position:relative; z-index:2; margin-top:clamp(2.5rem, 6vh, 4.5rem); display:grid; gap:1.5rem; }
.hero--light .trustline > p{
  font-size:.75rem; letter-spacing:.13em; text-transform:uppercase; color:#8A8F96; font-weight:500;
}
.logorow{ display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem clamp(1.75rem, 4vw, 3.25rem); }
.logorow li{ display:flex; align-items:center; gap:.625rem; font-size:1.0625rem; font-weight:500; color:#2A2E33; letter-spacing:-0.012em; }
.logorow svg{ width:21px; height:21px; flex:none; }

@media (max-width:64rem){
  .hero--light{ --lx:76%; --ly:32%; }
  .hero--light .light-ring{ --rsize:min(78vw, 30rem); }
  .light-scrim{ background:linear-gradient(to top, #F7F7F8 12%, rgba(247,247,248,.5) 48%, transparent 80%); }
  .hero-stack{ min-height:26rem; margin-top:1.5rem; }
  .hero-stack .hs-3{ display:none; }
  .logorow li{ font-size:.9375rem; }
}