/* ── Hero ──────────────────────────────────────────── */
    .hero {
      height: 100svh;
      min-height: 44rem;
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr;
      background: var(--ink);
      overflow: hidden;
    }

    .hero-text {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 0 var(--gutter) clamp(4rem, 9vw, 9rem);
      position: relative;
      z-index: 2;
    }

    .hero-text .eyebrow {
      margin-bottom: 2.5rem;
      animation-delay: .1s;
    }

    .hero-text .rule-link {
      margin-top: clamp(2.5rem, 5vw, 4rem);
      animation-delay: .3s;
    }

    .line {
      font-size: clamp(3.8rem, 7.5vw, 8.5rem);
      margin: 0;
      animation-delay: .2s;
    }
    .line em { font-weight: 300; color: var(--dim); font-style: italic; }

    .hero-image {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(5rem, 10vw, 10rem) clamp(2rem, 5vw, 5rem);
      position: relative;
    }

    .hero-image::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(168,148,112,.06) 0%, transparent 70%);
      pointer-events: none;
    }

    .hero-image img {
      width: auto;
      max-width: 100%;
      max-height: 78vh;
      object-fit: contain;
      animation: img-rise 2s cubic-bezier(.2, .7, .2, 1) both;
      animation-delay: .1s;
    }

    @keyframes img-rise {
      from { opacity: 0; transform: translateY(16px) scale(.99); }
      to   { opacity: 1; transform: none; }
    }

    /* ── Statement ─────────────────────────────────────── */
    .statement {
      padding: var(--section) var(--gutter);
      border-top: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .statement-inner {
      max-width: 56rem;
      text-align: center;
    }

    .statement h1 {
      font-size: clamp(2.8rem, 6vw, 6.5rem);
      margin: 0 0 clamp(2rem, 4vw, 4rem);
    }
    .statement h1 i { color: var(--dim); font-style: italic; }

    .statement p {
      font-family: var(--serif);
      font-size: clamp(1.1rem, 1.8vw, 1.6rem);
      color: var(--dim);
      max-width: 38rem;
      margin: 0 auto clamp(2rem, 4vw, 3.5rem);
      line-height: 1.5;
    }

    /* ── Closing ────────────────────────────────────────── */
    .closing {
      padding: var(--section) var(--gutter);
      border-top: 1px solid var(--line);
      text-align: center;
    }

    .closing .eyebrow { margin-bottom: 3rem; display: block; }

    .closing p {
      font-size: clamp(3.5rem, 9vw, 9.5rem);
      line-height: .92;
      margin: 0 0 clamp(2.5rem, 5vw, 4.5rem);
    }
    .closing p i { color: var(--dim); font-style: italic; }

    /* ── Tablet / intermediate ───────────────────────────── */
    @media (min-width: 701px) and (max-width: 1180px) {
      .hero { grid-template-columns: 48% 52%; }
      .hero-image {
        align-items: flex-end;
        padding: clamp(5rem, 8vw, 6rem) clamp(1.5rem, 3vw, 3rem)
          clamp(4rem, 7vw, 6rem);
      }
    }

    @media (min-width: 701px) and (max-width: 900px) and (orientation: portrait) {
      .hero { height: min(100svh, 100vw); }
      .hero-text { justify-content: center; }
      .hero-image { align-items: center; }
    }

    /* ── Mobile ─────────────────────────────────────────── */
    @media (max-width: 700px) {
      .hero {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
      }
      .hero-image {
        order: -1;
        padding: 7rem var(--gutter) 0;
        max-height: 55svh;
      }
      .hero-image img { max-height: 50svh; }
      .hero-text {
        padding: 2rem var(--gutter) 4rem;
      }
      .line { font-size: clamp(3rem, 12vw, 4.5rem); }
    }