/* ============================================================
   Pâtisserie Royale — Hero (new design)
   Replaces the original hero with the editorial split design:
   Berita display headline + Ballory "Sweet" accent + curved
   burgundy underline + 3D photo tilt + today-chip parallax.
   ============================================================ */

/* Berita — display serif for the main headline */
@font-face {
  font-family: 'Berita';
  src: url('Berita.otf') format('opentype');
  font-display: swap;
}

/* Ballory — script accent for the "Sweet" word */
@font-face {
  font-family: 'Ballory';
  src: url('Ballory.ttf') format('truetype');
  font-display: swap;
}

/* Keep brand on one line so nav stays tidy */
.site-header .brand { white-space: nowrap; }

/* Berita applies ONLY to section/page titles (large display headings).
   Card titles, menu item names, testimonial names, etc. stay in their
   original typography (Fraunces) for body-level legibility. */
h1,
h2,
.hero h1,
.section-head h2,
.cta-banner h2 {
  font-family: 'Berita', 'Fraunces', Georgia, serif;
  font-variation-settings: normal;
}

/* Restore brand script so the rule above doesn't reach it */
.brand,
.site-header .brand,
.footer-brand {
  font-family: var(--font-script);
}

/* ─── Section-title script accent ──────────────────────────────
   Editorial signature — applied to ONE heading per page only:
   the hero h1 on the homepage, the page-hero h1 on inner pages.
   Mid-section h2s/h3s deliberately stay quiet Berita.
   The .script spans on h2/h3 are kept in the HTML (so we can
   bring the accent back at will) but render as plain Berita. */
/* Responsive size for the standalone "Sweet" accent word in the
   hero h1 — previously hard-coded to font-size:65px inline. */
.hero h1 .word-sweet {
  font-size: clamp(34px, 5.2vw, 72px);
  line-height: 1;
}

.hero h1 .script,
.page-hero h1 .script {
  font-family: 'Ballory', 'Caveat', cursive;
  font-style: normal;
  font-weight: 400;
  color: var(--gold-ink);
  letter-spacing: -0.005em;
  font-size: 1.08em;
  line-height: 0.85;
  display: inline-block;
  padding: 0 0.04em;
  vertical-align: baseline;
  transform: translateY(0.08em);
}

/* Mid-section script spans render as inherited Berita so the
   markup stays editable but the visual rhythm calms down. */
h2 .script,
h3 .script,
.section-head h2 .script,
.cta-banner h2 .script {
  font-family: inherit;
  font-style: inherit;
  color: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  display: inline;
  padding: 0;
  transform: none;
}

/* Override the original hero with the new editorial layout.
   The hero is now a single-column type-led block sitting on top of
   bg.png. Background uses cover + center; a soft cream wash overlay
   keeps the burgundy headline + body text readable across the photo.

   The negative margin-top pulls the hero up behind the floating nav
   island so the bg image fills the entire top of the page, no cream
   gap above the cake. The extra top padding compensates so the
   headline still starts below where the nav floats. */
.hero {
  margin-top: -120px;
  /* Bottom padding gives the social-icon row room to breathe before
     the next section's color block starts. Without it the icons sit
     flush against the section transition. */
  padding: 208px 0 64px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Very light wash — just enough to lift text contrast off the bg
   picture without covering it. The bg.png shows clearly across the
   entire hero. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(247, 244, 237, 0.18) 0%,
      rgba(247, 244, 237, 0.22) 70%,
      rgba(247, 244, 237, 0.55) 100%);
  pointer-events: none;
  z-index: 0;
}
/* Slightly stronger bottom fade on phones so the hero transitions
   cleanly into the cream canvas section below. The picture is still
   fully visible everywhere else. */
@media (max-width: 768px) {
  .hero::after {
    background:
      linear-gradient(180deg,
        rgba(247, 244, 237, 0.18) 0%,
        rgba(247, 244, 237, 0.25) 60%,
        rgba(247, 244, 237, 0.7) 100%);
  }
}
/* Push hero contents above the wash overlay + ambient blob (::before) */
.hero .container { position: relative; z-index: 1; }

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: start;
  /* No max-width override here — the .container's max-width (1240px)
     handles the right edge, so the hero's content right-edge lines up
     with the bento, story sections, footer, etc. below it. */
}
/* No max-width constraint on hero-text — the container's right edge
   (max-width: 1240px from .container) sets the right edge for both
   the hero and every other section, so they line up. */

.hero .hero-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Remove the original eyebrow and signature treatments */
.hero-overline { display: none; }
.hero-sig { display: none; }

/* ─── HEADLINE ─────────────────────────────────────────────── */
.hero h1.h-anim {
  font-family: 'Berita', 'Fraunces', Georgia, serif;
  font-size: clamp(52px, 7.2vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 400;
  white-space: nowrap;
  display: block;
  margin: 0 0 4px;
}
.hero h1 .line {
  position: relative;
  display: block;
  width: fit-content;
  white-space: nowrap;
}
.hero h1 .accent-line {
  padding-bottom: 0.30em;
  margin-top: -0.02em;
}

/* Per-word fade + blur-to-focus entrance */
.hero h1 .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  filter: blur(10px);
  animation: heroWordFocus 1.15s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--d, 0s);
  will-change: opacity, filter, transform;
}
@keyframes heroWordFocus {
  0%   { opacity: 0; transform: translateY(10px); filter: blur(10px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* "Sweet" — Ballory script accent, sized + baseline-aligned to sit on the
   same line as "Living" with their visual centers matching */
.hero h1 .word.accent {
  font-family: 'Ballory', 'Caveat', cursive;
  font-style: normal;
  font-weight: 400;
  color: var(--gold-ink);
  font-size: 1em;
  letter-spacing: -0.01em;
  vertical-align: baseline;
  margin-right: 0.04em;
  line-height: 1;
  animation-name: heroWordFocusBurgundy;
}
@keyframes heroWordFocusBurgundy {
  0%   { opacity: 0; transform: translateY(10px); filter: blur(10px); color: rgba(154, 110, 10, 0); }
  35%  { color: rgba(154, 110, 10, 0.4); }
  60%  { opacity: 1; color: rgba(154, 110, 10, 0.85); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); color: rgba(154, 110, 10, 1); }
}

/* "Living" wrapper holds the period + curve underline */
.hero h1 .living-wrap {
  position: relative;
  display: inline-block;
}
.hero h1 .word.living { color: var(--ink); }
.hero h1 .word.period {
  color: var(--ink);
  margin-left: 0.02em;
}

/* Hand-drawn curved underline */
.hero h1 .underline-curve {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.04em;
  width: 100%;
  height: 0.22em;
  overflow: visible;
  pointer-events: none;
  clip-path: inset(0 100% 0 0);
  animation: heroCurveDraw 1.4s cubic-bezier(0.65, 0, 0.35, 1) both;
  animation-delay: var(--d, 0s);
}
.hero h1 .underline-curve path {
  fill: none;
  stroke: var(--gold-ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
@keyframes heroCurveDraw {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

/* ─── LEAD + CTAS ──────────────────────────────────────────── */
.hero p.lead {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  /* No max-width — let the lead paragraph extend to the container's
     right edge so it aligns with every other section below. */
  margin: 36px 0 40px;
  opacity: 0;
  transform: translateY(14px);
  animation: heroReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--d, 0s);
}
.hero .lead-mark {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--burgundy);
  font-weight: 600;
  margin-bottom: 14px;
  position: relative;
  padding-left: 44px;
}
.hero .lead-mark::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 32px;
  height: 1px;
  background: var(--burgundy);
}
.hero .hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 56px;
  opacity: 0;
  transform: translateY(14px);
  animation: heroReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--d, 0s);
}
@keyframes heroReveal {
  to { opacity: 1; transform: translateY(0); }
}

/* ─── ICON-ONLY SOCIAL ROW ─────────────────────────────────── */
.hero .hero-socials {
  display: flex;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding-top: 28px;
  margin: 0;
  max-width: 540px;
  width: auto;
  opacity: 0;
  transform: translateY(14px);
  animation: heroReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--d, 0s);
}
.hero .hero-socials::before { content: none; display: none; }
.hero .hero-socials a {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--burgundy);
  transition: background 0.35s var(--ease-out-soft),
              color 0.35s var(--ease-out-soft),
              border-color 0.35s var(--ease-out-soft),
              transform 0.45s var(--ease-out-soft),
              box-shadow 0.45s var(--ease-out-soft);
  transform-style: preserve-3d;
}
.hero .hero-socials a:hover {
  background: var(--burgundy);
  color: #fff;
  border-color: var(--burgundy);
  transform: translate3d(0, -4px, 0) rotateX(-8deg);
  box-shadow: 0 14px 24px -10px rgba(80, 32, 15, 0.4);
}

/* ─── PHOTO COLUMN (removed — replaced by bg.png background) ──
   The original .hero-visual + .visual-card + .today-chip + .frame-shine
   tree is no longer rendered. Force-hide in case any markup remains and
   short-circuit the leftover rules below. */
.hero .hero-visual,
.hero .visual-card,
.hero .today-chip,
.hero .frame-shine { display: none !important; }

.hero .hero-visual--legacy {
  perspective: 1400px;
  perspective-origin: 50% 50%;
  position: relative;
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  aspect-ratio: 1 / 1.12;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}
.hero .hero-visual .visual-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-bezel);
  padding: 8px;
  background: linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.025));
  border: 1px solid rgba(17, 17, 17, 0.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 30px 60px -30px rgba(80, 32, 15, 0.18),
    0 8px 24px -16px rgba(80, 32, 15, 0.12);
  transform-style: preserve-3d;
  will-change: transform;
  animation: heroVisualIn 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}
@keyframes heroVisualIn {
  from { opacity: 0; transform: translate3d(40px, 0, -120px) rotateY(-10deg); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) rotateY(0); }
}
.hero .hero-visual .image-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-bezel-in);
  overflow: hidden;
  background: linear-gradient(135deg, var(--pink-soft) 0%, var(--cream-deep) 100%);
  transform-style: preserve-3d;
}
.hero .hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.04) saturate(0.96);
  transform: scale(1.06);
  will-change: transform;
  transition: none;
}
.hero .hero-visual:hover img { transform: scale(1.06); }
.hero .hero-visual .image-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(26, 20, 16, 0.2) 100%);
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: multiply;
  border-radius: inherit;
}
.hero .frame-shine {
  position: absolute;
  inset: -10%;
  background: linear-gradient(115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.12) 50%,
    transparent 65%);
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: screen;
  animation: heroShine 8s ease-in-out infinite;
}
@keyframes heroShine {
  0%, 100% { transform: translateX(-25%); opacity: 0.4; }
  50%      { transform: translateX(25%);  opacity: 0.9; }
}

/* Today chip — overlapping the photo at lower-left */
.hero .today-chip {
  position: absolute;
  left: -22px;
  bottom: 52px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow:
    0 24px 48px -20px rgba(80, 32, 15, 0.32),
    0 8px 16px -8px rgba(80, 32, 15, 0.18);
  z-index: 3;
  will-change: transform;
  transform-style: preserve-3d;
  animation: heroChipIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.9s both;
}
@keyframes heroChipIn {
  from { opacity: 0; transform: translate3d(-30px, 20px, 70px); }
  to   { opacity: 1; transform: translate3d(0, 0, 70px); }
}
.hero .today-chip .thumb {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background-image: url('https://images.unsplash.com/photo-1488477181946-6428a0291777?w=200&q=80&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.hero .today-chip .meta-eyebrow {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.hero .today-chip .meta-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.2;
  color: var(--ink);
}

/* Subtle ambient blob behind the hero */
.hero::before {
  content: '';
  position: absolute;
  top: -10%;
  right: -15%;
  width: 70%;
  height: 90%;
  background: radial-gradient(circle at 50% 50%,
    rgba(216, 184, 48, 0.10) 0%,
    rgba(248, 230, 176, 0.05) 35%,
    transparent 70%);
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
  animation: heroBlobDrift 22s ease-in-out infinite alternate;
}
@keyframes heroBlobDrift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-6%, 4%) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .hero h1 .word,
  .hero h1 .underline-curve,
  .hero p.lead,
  .hero .hero-actions,
  .hero .hero-socials,
  .hero .hero-visual .visual-card,
  .hero .today-chip,
  .hero .frame-shine,
  .hero::before {
    animation: none !important;
  }
  .hero h1 .word { opacity: 1; transform: none; filter: none; }
  .hero h1 .underline-curve { clip-path: inset(0 0 0 0) !important; }
  .hero p.lead,
  .hero .hero-actions,
  .hero .hero-socials { opacity: 1; transform: none; }
  .hero .hero-visual .visual-card { transform: none !important; }
  .hero .today-chip { transform: translate3d(0, 0, 70px) !important; }
}

/* ─── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 960px) {
  .hero h1.h-anim { white-space: normal; }
  .hero h1 .line { white-space: normal; }
  .hero .hero-visual {
    max-width: 100%;
    margin: 0 auto;
    aspect-ratio: 4 / 3;
  }
  .hero .today-chip { left: 12px; bottom: 12px; }
}

/* ─── TABLET + MOBILE — centered editorial composition ──────
   The mobile hero is a calm cream stage with a big centered three-line
   headline ("The Art Of" / "Sweet" / "Living.") as the focal point.
   The bg.png cake photo anchors at center-bottom and blooms up under
   the CTAs, giving the composition warmth without competing with the
   type. Buttons and social row are all centered. */
@media (max-width: 768px) {
  .hero {
    margin-top: -110px;
    /* Top padding clears the floating nav island. Bottom padding
       gives the social-icon row breathing room before the next
       section's color block starts. */
    padding: 152px 0 48px;
    overflow: hidden;
    /* Cake centered at the bottom — blooms up under the CTA area
       without crowding the headline at the top. */
    background-position: center 100%;
    background-size: cover;
  }
  /* Heavy cream wash up top so the big headline never has to fight
     the photo. The wash opens up around 60% so the cake breathes back
     in beneath the buttons + social row. */
  .hero::after {
    background:
      linear-gradient(180deg,
        rgba(247, 244, 237, 0.94) 0%,
        rgba(247, 244, 237, 0.92) 42%,
        rgba(247, 244, 237, 0.62) 60%,
        rgba(247, 244, 237, 0.30) 80%,
        rgba(247, 244, 237, 0.55) 100%);
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 0;
    align-items: stretch;
  }
  /* ── EVERYTHING IN THE TEXT COLUMN IS CENTERED ── */
  .hero .hero-text {
    order: 1;
    text-align: center;
    align-items: center;
  }

  /* ── HEADLINE — big, centered, three editorial lines:
        "The Art Of"   (Berita display)
           "Sweet"     (Ballory script, burgundy)
         "Living."     (Berita display + curve underline) ── */
  .hero h1.h-anim {
    font-size: clamp(56px, 15vw, 80px);
    line-height: 0.98;
    letter-spacing: -0.025em;
    white-space: normal;
    text-align: center;
    margin: 0 auto 8px;
    width: 100%;
  }
  .hero h1 .line {
    display: block;
    width: auto;
    white-space: normal;
    text-align: center;
  }
  .hero h1 .accent-line {
    padding-bottom: 0.22em;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0;
    row-gap: 0.08em;
    text-align: center;
  }
  /* "Sweet" gets its own dedicated row in the flex line so the
     three-line editorial composition holds at every mobile width.
     The script word sits centered, sized slightly smaller, with its
     baseline tucked against the "Living." row below. */
  .hero h1 .word.accent {
    font-size: 0.92em;
    flex-basis: 100%;
    max-width: 100%;
    text-align: center;
    margin: 0;
    line-height: 0.95;
  }
  .hero h1 .living-wrap {
    display: inline-block;
    text-align: center;
  }
  /* Underline-curve — thinner stroke so it reads as a hand-drawn
     accent under "Living." rather than a heavy bar */
  .hero h1 .underline-curve { height: 0.15em; }
  .hero h1 .underline-curve path { stroke-width: 2.2; }

  /* ── LEAD — hidden on mobile. Headline carries the message. ── */
  .hero p.lead { display: none; }

  /* ── BUTTONS — centered vertical stack, fit-to-content pills ── */
  .hero .hero-actions {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 40px auto 44px;
  }
  /* Primary pill — auto-width, content centered */
  .hero .hero-actions > .btn-primary {
    width: auto;
    max-width: 100%;
    align-self: center;
    padding: 16px 28px;
    justify-content: center;
    gap: 14px;
  }
  /* Secondary CTA — text link, centered */
  .hero .hero-actions > a:not(.btn-primary),
  .hero .hero-actions > .btn-text {
    width: auto;
    max-width: 100%;
    align-self: center;
    justify-content: center;
    padding: 4px 0;
    gap: 8px;
  }

  /* ── SOCIAL ROW — centered icons with full-width leading line ── */
  .hero .hero-socials {
    padding-top: 22px;
    padding-bottom: 28px;
    gap: 14px;
    border-top: 1px solid var(--line);
    width: 100%;
    max-width: none;
    margin: 0;
    justify-content: center;
  }
  .hero .hero-socials a { width: 42px; height: 42px; }
}

/* ─── Small phones (≤ 480px) — refine the centered composition ── */
@media (max-width: 480px) {
  .hero {
    padding: 140px 0 40px;
    background-position: center 100%;
  }
  .hero h1.h-anim {
    font-size: clamp(52px, 17vw, 72px);
    line-height: 0.98;
  }
  .hero .hero-actions {
    gap: 14px;
    margin: 36px auto 40px;
  }
  .hero .hero-socials a { width: 40px; height: 40px; }
}

/* ============================================================
   HERO v2 — café-style split layout with arched image.
   Text left (script eyebrow, display headline, lead, two CTAs)
   + arched photo right, on a flat warm-beige room.
   Supersedes the old full-bleed .hero rules above (now unused).
   ============================================================ */
.hero-v2{
  background:#E7DCC8;
  margin-top:-110px;
  padding:150px 0 96px;
  position:relative;
  overflow:visible;
}
.hero-v2-grid{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:clamp(40px,6vw,72px);
  align-items:center;
}
.hero-v2-text{min-width:0}
.hero-v2-eyebrow{
  display:block;
  font-family:'Ballory','Caveat',cursive;
  font-size:clamp(26px,3vw,34px);
  line-height:1.35;
  color:var(--burgundy);
  margin-bottom:14px;
  padding-top:4px;
}
.hero-v2-title{
  font-family:'Berita','Fraunces',Georgia,serif;
  font-weight:400;
  font-size:clamp(48px,6.4vw,88px);
  line-height:1.0;
  letter-spacing:-0.02em;
  color:var(--ink);
  margin:0 0 26px;
}
.hero-v2-title .sweet{color:var(--gold-ink)}
.hero-v2-lead{
  font-family:var(--font-sans);
  font-size:18px;
  line-height:1.7;
  color:var(--ink-soft);
  max-width:46ch;
  margin:0 0 38px;
}
.hero-v2-cta{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.hero-v2-cta .btn-outline{
  background:transparent;
  color:var(--ink);
  border:1.5px solid var(--burgundy);
}
.hero-v2-cta .btn-outline:hover{
  background:var(--burgundy);
  color:var(--cream);
  border-color:var(--burgundy);
}
.hero-v2-visual{display:flex;justify-content:center}
.hero-v2-arch{
  position:relative;
  width:100%;
  max-width:480px;
  aspect-ratio:4/5;
  border-radius:9999px 9999px 22px 22px;
  overflow:hidden;
  box-shadow:0 40px 70px -30px rgba(72,40,24,.45);
}
.hero-v2-arch img{width:100%;height:100%;object-fit:cover;display:block}

.hero-v2-eyebrow,.hero-v2-title,.hero-v2-lead,.hero-v2-cta,.hero-v2-arch{
  opacity:0;transform:translateY(16px);
  animation:heroV2In .8s cubic-bezier(.22,1,.36,1) both;
}
.hero-v2-arch{animation-delay:.12s}
.hero-v2-title{animation-delay:.10s}
.hero-v2-lead{animation-delay:.18s}
.hero-v2-cta{animation-delay:.26s}
@keyframes heroV2In{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .hero-v2-eyebrow,.hero-v2-title,.hero-v2-lead,.hero-v2-cta,.hero-v2-arch{animation:none;opacity:1;transform:none}
}

@media (max-width:900px){
  .hero-v2{margin-top:-100px;padding:132px 0 64px}
  /* Stack into one column and flatten the text block (display:contents)
     so the order reads: eyebrow → title → image → lead → CTAs. */
  .hero-v2-grid{display:flex;flex-direction:column;gap:0;text-align:center}
  .hero-v2-text{display:contents}
  .hero-v2-eyebrow{order:1}
  .hero-v2-title{order:2}
  .hero-v2-visual{order:3;margin:8px auto 30px}
  .hero-v2-lead{order:4;margin-left:auto;margin-right:auto}
  .hero-v2-cta{order:5;justify-content:center}
  .hero-v2-arch{max-width:360px}
}
@media (max-width:480px){
  .hero-v2{padding:120px 0 52px}
  .hero-v2-title{font-size:clamp(40px,12vw,56px)}
  .hero-v2-arch{max-width:300px}
  .hero-v2-cta .btn{width:auto}
}