/* Hero — approved direction A2 (full-bleed pour photo). Extracted from design/hero-a2.html */

    /* Option A2 — "The Pour", full-bleed: the photo IS the page; copy sits on the empty wall (physical left) */
    .site-header {
      position: fixed; inset-inline: 0; top: 0;
      background: transparent; backdrop-filter: none;
      transition: background .3s, backdrop-filter .3s;
    }
    .site-nav { background: rgba(251,246,237,.86); padding: 10px 22px; border-radius: var(--radius-pill); backdrop-filter: blur(6px); }
    .site-header .logo { background: rgba(251,246,237,.86); padding: 8px 14px; border-radius: var(--radius-pill); backdrop-filter: blur(6px); }
    .site-header.scrolled .site-nav, .site-header.scrolled .logo { background: transparent; backdrop-filter: none; }
    .site-header.scrolled { background: color-mix(in srgb, var(--cream) 88%, transparent); backdrop-filter: blur(10px); }

    .hero {
      position: relative; overflow: hidden;
      min-height: 100vh; min-height: 100svh;
      display: flex; align-items: flex-start;
    }
    .hero-photo { position: absolute; inset: 0; }
    .hero-photo img {
      width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%;
      animation: settle 1.8s var(--ease) both;
    }
    @keyframes settle { from { transform: scale(1.06); } to { transform: scale(1); } }

    /* cream scrim only where the copy lives — never a dark overlay */
    .scrim {
      position: absolute; inset: 0;
      background: linear-gradient(to right,
        rgba(251,246,237,.96) 0%, rgba(251,246,237,.88) 24%,
        rgba(251,246,237,.55) 42%, rgba(251,246,237,0) 58%);
    }

    /* Copy is placed physically left (that's where the photo is empty), text direction follows the language */
    .hero-grid {
      direction: ltr;
      position: relative; width: 100%;
      display: grid; grid-template-columns: minmax(0, 520px) 1fr;
      padding: calc(var(--header-h) + 8vh) var(--gutter) 48px;
    }
    .hero-copy { direction: ltr; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
    html[dir="rtl"] .hero-copy { direction: rtl; align-items: flex-end; }   /* flex-end in RTL = physical left */
    .hero-copy > * { text-align: start; }
    .kicker { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.1rem, 1.6vw, 1.5rem); color: var(--ink); opacity: .85; }
    html[lang="en"] .kicker { font-weight: 400; }
    .hero-copy .display { font-size: clamp(3rem, 6.6vw, 6.6rem); line-height: 1.08; }
    .h1-mob { display: none; }
    .hero-copy .cta-row { margin-top: 6px; }


    .hero-copy > * { animation: rise .7s var(--ease) both; }
    .hero-copy > *:nth-child(2) { animation-delay: .08s; }
    .hero-copy > *:nth-child(3) { animation-delay: .16s; }
    .hero-copy > *:nth-child(4) { animation-delay: .24s; }
    @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

    /* Mobile: same idea as desktop — the photo fills the screen, the tagline sits over it (bottom-left) on a light cream rise */
    @media (max-width: 899px) {
      .hero { display: flex; align-items: flex-end; min-height: 100svh; }
      .hero-photo img { object-position: 62% 38%; }
      .scrim { background: linear-gradient(to top, rgba(251,246,237,.97) 0%, rgba(251,246,237,.9) 22%, rgba(251,246,237,.45) 40%, rgba(251,246,237,0) 55%); }
      .hero-grid { grid-template-columns: 1fr; padding: 0 var(--gutter) 40px; }
      .hero-copy, html[dir="rtl"] .hero-copy { align-items: flex-start; gap: 10px; }
      .h1-desk { display: none; } .h1-mob { display: inline; }
      .hero-copy .display { font-size: clamp(2rem, 8.6vw, 2.9rem); line-height: 1.15; white-space: nowrap; }
      .kicker { font-size: 1.05rem; }
      .site-header { padding-inline: 16px; }
    }
  
.hero-links { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 4px; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.hero-links a { display: inline-flex; align-items: center; gap: 8px; border-bottom: 2px solid var(--red); padding-bottom: 2px; transition: gap .25s var(--ease); }
.hero-links a:hover { gap: 14px; }
.hero-links .arr { color: var(--red); }