/*
Theme Name: Maite Fontenele WP
Theme URI: https://maitefontenele.com.br
Author: Lucas Piamolini
Description: Tema WordPress importavel para a landing page da psicologa Maite Fontenele, com paginas Home e Obrigado.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: maite-fontenele-wp
*/

/* ─── TOKENS ──────────────────────────────── */
    :root {
      --c-bg: #F6F2F5;
      --c-bg2: #EAE3E8;
      --c-dark: #2F242C;
      --c-light: #F6F2F5;
      --c-border: #D1C4CD;
      --c-muted: #856A7D;
      --c-border-dk: #3D2E3A;

      --c-purple: #9B6FA0;
      --c-purple-deep: #7B4F82;
      --c-purple-soft: rgba(155, 111, 160, .25);
      --c-purple-glow: rgba(155, 111, 160, .35);

      --f-serif: 'Fraunces', Georgia, serif;
      --f-sans: 'DM Sans', system-ui, sans-serif;

      --ease: cubic-bezier(.25, .46, .45, .94);
      --ease-out: cubic-bezier(.16, 1, .3, 1);

      --pad-x: clamp(12px, 4vw, 80px);
      --max-w: 1200px;
    }

    /* ─── RESET ───────────────────────────────── */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
      font-size: 16px;
      overflow-x: hidden;
    }

    body {
      background: var(--c-bg);
      color: var(--c-dark);
      font-family: var(--f-sans);
      font-size: 1rem;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      width: 100%;
    }

    section {
      overflow: hidden;
    }

    img {
      max-width: 100%;
      display: block;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    :focus-visible {
      outline: 2px solid var(--c-dark);
      outline-offset: 3px;
      border-radius: 3px;
    }

    /* ─── TYPOGRAPHY ──────────────────────────── */
    h1,
    h2,
    h3 {
      font-family: var(--f-serif);
      font-weight: 400;
      line-height: 1.1;
    }

    .label {
      font-family: var(--f-sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--c-muted);
    }

    .label--light {
      color: rgba(246, 242, 245, .45);
    }

    /* ─── SCROLL REVEAL ───────────────────────── */
    .sr {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
    }

    .sr.sr--left {
      transform: translateX(-36px);
    }

    .sr.sr--right {
      transform: translateX(36px);
    }

    .sr.sr--scale {
      transform: translateY(28px) scale(.97);
    }

    .sr.in {
      opacity: 1;
      transform: none;
    }

    .sr[data-d="1"] {
      transition-delay: .12s;
    }

    .sr[data-d="2"] {
      transition-delay: .24s;
    }

    .sr[data-d="3"] {
      transition-delay: .36s;
    }

    .sr[data-d="4"] {
      transition-delay: .48s;
    }

    /* ─── BUTTONS ─────────────────────────────── */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      font-family: var(--f-sans);
      font-size: 13.5px;
      font-weight: 500;
      letter-spacing: .025em;
      border-radius: 100px;
      padding: 0 28px;
      height: 52px;
      min-height: 48px;
      cursor: pointer;
      text-decoration: none;
      white-space: nowrap;
      border: 1px solid transparent;
      transition:
        background .25s var(--ease),
        color .25s var(--ease),
        border-color .25s var(--ease),
        transform .25s var(--ease),
        box-shadow .25s var(--ease);
      position: relative;
      overflow: hidden;
    }

    /* filled dark */
    .btn-dark {
      background: var(--c-dark);
      color: var(--c-light);
      border-color: var(--c-dark);
    }

    .btn-dark:hover {
      background: #231920;
      border-color: #231920;
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(47, 36, 44, .24);
    }

    /* ghost dark */
    .btn-ghost {
      background: transparent;
      color: var(--c-dark);
      border-color: var(--c-dark);
      height: 40px;
      padding: 0 20px;
      font-size: 13px;
    }

    .btn-ghost:hover {
      background: var(--c-dark);
      color: var(--c-light);
    }

    /* light (on dark bg) */
    .btn-light {
      background: var(--c-light);
      color: var(--c-dark);
      border-color: var(--c-light);
      font-size: 15px;
      height: 58px;
      padding: 0 40px;
    }

    .btn-light:hover {
      background: #fff;
      border-color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 10px 32px rgba(123, 79, 130, .35);
    }

    .btn svg {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }

    /* pulse */
    .btn-pulse {
      animation: pulse 3s ease-in-out 2s infinite;
    }

    @keyframes pulse {

      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(155, 111, 160, 0);
      }

      50% {
        box-shadow: 0 0 0 14px rgba(155, 111, 160, .2);
      }
    }

    /* ─── LAYOUT ──────────────────────────────── */
    .wrap {
      max-width: var(--max-w);
      margin-inline: auto;
      padding-inline: var(--pad-x);
    }

    /* =========================================
       MODULE 1 — NAV
    ========================================= */
    #nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 200;
      padding: 10px var(--pad-x);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      background: rgba(246, 242, 245, 0);
      color: var(--c-light);
      border-bottom: 1px solid rgba(211, 206, 188, 0);
      transition: background .35s var(--ease), border-color .35s var(--ease), padding .35s var(--ease), color .35s var(--ease);
      will-change: background;
      overflow: hidden;
    }

    @media (min-width: 768px) {
      #nav {
        padding: 14px var(--pad-x);
        gap: 12px;
      }
    }

    @media (min-width: 900px) {
      #nav {
        padding: 22px var(--pad-x);
        gap: 16px;
      }
    }

    #nav.stuck {
      background: rgba(246, 242, 245, .96);
      border-color: var(--c-border);
      color: var(--c-dark);
      padding-top: 14px;
      padding-bottom: 14px;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    #nav:not(.stuck) .btn-ghost {
      color: var(--c-light);
      border-color: rgba(246, 242, 245, .6);
    }

    #nav:not(.stuck) .btn-ghost:hover {
      background: var(--c-light);
      color: var(--c-dark);
      border-color: var(--c-light);
    }

    .nav-logo {
      font-family: var(--f-serif);
      font-size: 16px;
      font-weight: 400;
      letter-spacing: -.02em;
      line-height: 1;
      white-space: nowrap;
    }

    @media (min-width: 400px) {
      .nav-logo {
        font-size: 18px;
      }
    }

    @media (min-width: 768px) {
      .nav-logo {
        font-size: 22px;
      }
    }

    .nav-logo span {
      opacity: 0.7;
    }

    /* =========================================
       MODULE 2 — HERO
    ========================================= */
    #hero {
      min-height: 100svh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding-top: 80px;
      padding-inline: var(--pad-x);
      position: relative;
      overflow: hidden;
      z-index: 1;
      color: var(--c-light);
    }

    @media (min-width: 900px) {
      #hero {
        align-items: flex-start;
        text-align: left;
        padding-top: 100px;
      }
    }

    .hero-video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: -2;
      /* Otimização de performance: indica ao navegador para renderizar o vídeo separadamente se possível */
      will-change: transform;
    }

    .hero-overlay {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(135deg, rgba(123, 79, 130, .3) 0%, transparent 50%),
        linear-gradient(to bottom, rgba(30, 22, 28, 0.35) 0%, rgba(60, 35, 65, 0.55) 50%, var(--c-dark) 100%);
      z-index: -1;
    }

    .hero-content {
      max-width: 900px;
      padding-bottom: 40px;
      will-change: transform;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    @media (min-width: 900px) {
      .hero-content {
        max-width: 750px;
        padding-bottom: 60px;
        align-items: flex-start;
      }
    }

    .hero-tag {
      font-family: var(--f-sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: #fff;
      background: rgba(155, 111, 160, .25);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      border: 1px solid rgba(200, 170, 210, .3);
      border-radius: 100px;
      padding: 8px 18px;
      display: inline-flex;
      justify-content: center;
      text-align: center;
      max-width: 100%;
      margin-bottom: 24px;
      opacity: 0;
      transform: translateY(16px);
      transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
    }

    @media (min-width: 768px) {
      .hero-tag {
        font-size: 12px;
        padding: 10px 22px;
        margin-bottom: 28px;
        letter-spacing: .18em;
      }
    }

    .hero-h1 {
      font-size: clamp(32px, 5.5vw, 64px);
      line-height: 1.15;
      letter-spacing: -.02em;
      margin-bottom: 24px;
      text-align: center;
      width: 100%;
      max-width: 100%;
    }

    @media (min-width: 900px) {
      .hero-h1 {
        text-align: left;
        line-height: 1.08;
      }
    }

    .hero-h1 .line {
      display: block;
      overflow: hidden;
    }

    .hero-h1 .line-inner {
      display: inline-block;
      opacity: 0;
      transform: translateY(100%);
      transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
    }

    .hero-h1 em {
      font-style: italic;
      background: linear-gradient(135deg, #F6F2F5 30%, #C8AAD2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .hero-body {
      font-size: clamp(15px, 1.7vw, 17px);
      color: rgba(246, 242, 245, .85);
      line-height: 1.75;
      max-width: 460px;
      margin-bottom: 32px;
      opacity: 0;
      transform: translateY(16px);
      transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
    }

    .hero-cta-wrap {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
    }

    /* right decorative element desktop */
    .hero-graphic {
      display: none;
      position: absolute;
      right: var(--pad-x);
      top: 50%;
      translate: 0 -50%;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    @media (min-width: 1024px) {
      .hero-graphic {
        display: flex;
      }
    }

    .hero-graphic-line {
      width: 1px;
      height: 200px;
      background: linear-gradient(to bottom, transparent, var(--c-purple-soft), transparent);
    }

    .hero-graphic-text {
      font-family: var(--f-serif);
      font-size: 11px;
      font-style: italic;
      color: rgba(246, 242, 245, .7);
      writing-mode: vertical-rl;
      letter-spacing: .12em;
    }

    /* ── STRIP ── */
    .info-strip {
      background: var(--c-dark);
      color: rgba(246, 242, 245, .8);
      padding: 40px var(--pad-x);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 24px 48px;
      font-size: 14px;
      font-family: var(--f-sans);
      letter-spacing: .02em;
      border-top: 1px solid rgba(246, 242, 245, .05);
    }

    .strip-item {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .strip-item svg {
      color: var(--c-purple);
      opacity: .7;
    }

    /* =========================================
       MODULE 3 — ESPELHO
    ========================================= */
    #espelho {
      padding-block: clamp(96px, 13vw, 160px);
      background: var(--c-bg);
    }

    .espelho-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 64px;
    }

    @media (min-width: 900px) {
      .espelho-grid {
        grid-template-columns: 1fr 1.1fr;
        gap: 80px;
        align-items: start;
      }
    }

    .espelho-quote-wrap {
      padding-top: 8px;
    }

    .espelho-office-photo {
      width: 100%;
      aspect-ratio: 16/9;
      background: var(--c-border);
      border-radius: 6px;
      margin-bottom: 40px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding-bottom: 16px;
    }

    .espelho-office-photo::after {
      content: '';
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(-48deg,
          transparent 0,
          transparent 5px,
          rgba(133, 106, 125, .06) 5px,
          rgba(133, 106, 125, .06) 6px);
    }

    .espelho-office-tag {
      font-size: 10px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--c-muted);
      position: relative;
      z-index: 1;
    }

    .espelho-quote {
      font-family: var(--f-serif);
      font-style: italic;
      font-size: clamp(26px, 3.2vw, 38px);
      font-weight: 300;
      line-height: 1.35;
      color: var(--c-dark);
      padding-left: 28px;
      border-left: 2px solid var(--c-purple);
      margin-top: 28px;
    }

    .espelho-illust {
      display: block;
      margin-top: 48px;
      margin-left: 30px;
      width: 100%;
      max-width: 180px;
      color: var(--c-dark);
      opacity: 0.6;
    }

    .espelho-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-top: 28px;
    }

    .espelho-item {
      display: flex;
      gap: clamp(32px, 8vw, 64px);
      align-items: flex-start;
      padding-block: 28px;
      border-bottom: 1px solid var(--c-border);
    }

    .espelho-item:first-child {
      border-top: 1px solid var(--c-border);
    }

    .espelho-num {
      font-family: var(--f-serif);
      font-size: 13px;
      color: var(--c-purple-deep);
      padding-top: 3px;
      min-width: 28px;
      flex-shrink: 0;
    }

    .espelho-item p {
      font-size: clamp(15px, 1.6vw, 17px);
      line-height: 1.7;
      color: var(--c-dark);
    }

    /* =========================================
       MODULE 4 — COMO EU TRABALHO
    ========================================= */
    #trabalho {
      padding-block: clamp(96px, 13vw, 160px);
      background: var(--c-bg2);
    }

    .trabalho-top {
      display: grid;
      grid-template-columns: 1fr;
      gap: 32px;
      margin-bottom: clamp(60px, 8vw, 96px);
      text-align: center;
    }

    @media (min-width: 900px) {
      .trabalho-top {
        grid-template-columns: 1.1fr 1fr;
        align-items: end;
        gap: 80px;
        text-align: left;
      }
    }

    .trabalho-h2 {
      font-size: clamp(34px, 4.5vw, 54px);
      line-height: 1.08;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 24px;
    }

    @media (min-width: 640px) {
      .trabalho-h2 {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 32px;
      }
    }

    .trabalho-illust {
      width: clamp(130px, 28vw, 160px);
      height: clamp(130px, 28vw, 160px);
      flex-shrink: 0;
      color: var(--c-dark);
      opacity: 0.8;
    }

    .trabalho-body {
      font-size: clamp(15px, 1.65vw, 18px);
      color: var(--c-muted);
      line-height: 1.75;
      max-width: 420px;
      margin-inline: auto;
    }

    @media (min-width: 900px) {
      .trabalho-body {
        margin-inline: 0;
      }
    }

    .cards-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
    }

    @media (min-width: 640px) {
      .cards-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    .tcard {
      background: var(--c-bg);
      border: 1px solid var(--c-border);
      border-radius: 10px;
      padding: clamp(30px, 3.5vw, 48px);
      transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
    }

    .tcard:hover {
      transform: translateY(-5px);
      border-color: var(--c-purple);
      box-shadow: 0 16px 40px rgba(123, 79, 130, .12);
    }

    .tcard-num {
      font-family: var(--f-serif);
      font-style: italic;
      font-size: 13px;
      color: var(--c-purple-deep);
      margin-bottom: 36px;
      display: block;
    }

    .tcard-text {
      font-size: clamp(15px, 1.6vw, 17px);
      line-height: 1.72;
    }

    /* =========================================
       MODULE 5 — SOBRE
    ========================================= */
    #sobre {
      padding-block: clamp(96px, 13vw, 160px);
      background: var(--c-bg);
    }

    .sobre-inner {
      display: grid;
      grid-template-columns: 1fr;
      gap: clamp(48px, 7vw, 100px);
      align-items: center;
    }

    @media (min-width: 768px) {
      .sobre-inner {
        grid-template-columns: 400px 1fr;
      }
    }

    .sobre-photo {
      aspect-ratio: 3/4;
      background: var(--c-border);
      border-radius: 6px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding-bottom: 24px;
    }

    .sobre-photo::after {
      content: '';
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(-48deg,
          transparent 0,
          transparent 5px,
          rgba(133, 106, 125, .06) 5px,
          rgba(133, 106, 125, .06) 6px);
    }

    .sobre-photo-tag {
      font-size: 10px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--c-muted);
      position: relative;
      z-index: 1;
    }

    .sobre-text {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    @media (min-width: 768px) {
      .sobre-text {
        text-align: left;
        align-items: flex-start;
      }
    }

    .sobre-name {
      font-size: clamp(30px, 4vw, 44px);
      letter-spacing: -.015em;
      margin-bottom: 8px;
    }

    .sobre-crp {
      font-size: 11px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--c-muted);
      margin-bottom: 36px;
    }

    .sobre-body {
      font-size: clamp(15px, 1.65vw, 18px);
      line-height: 1.8;
      margin-bottom: 40px;
    }

    .sobre-quote {
      font-family: var(--f-serif);
      font-style: italic;
      font-size: clamp(18px, 2.1vw, 24px);
      font-weight: 300;
      line-height: 1.5;
      color: var(--c-muted);
      border-left: none;
      padding-left: 0;
    }

    @media (min-width: 768px) {
      .sobre-quote {
        border-left: 1.5px solid var(--c-purple);
        padding-left: 24px;
      }
    }

    /* =========================================
       MODULE 6 — ATENDIMENTO
    ========================================= */
    #atendimento {
      padding-block: clamp(96px, 13vw, 160px);
      background: var(--c-bg2);
    }

    .atend-head {
      margin-bottom: clamp(56px, 8vw, 88px);
      text-align: center;
    }

    .atend-h2 {
      font-size: clamp(30px, 4vw, 46px);
      margin-top: 20px;
    }

    .atend-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2px;
      border: 1px solid var(--c-border);
      border-radius: 10px;
      overflow: hidden;
    }

    @media (min-width: 640px) {
      .atend-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    .acard {
      background: var(--c-bg);
      padding: clamp(36px, 4vw, 56px);
      transition: background .22s var(--ease);
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .acard:hover {
      background: #f0ece3;
    }

    .acard-icon {
      width: 36px;
      height: 36px;
      opacity: .4;
      margin-bottom: 8px;
    }

    .acard-label {
      font-size: 10px;
      font-weight: 500;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--c-muted);
    }

    .acard-text {
      font-size: clamp(15px, 1.65vw, 18px);
      line-height: 1.65;
    }

    /* =========================================
       MODULE 7 — CTA FINAL
    ========================================= */
    #cta {
      padding-block: clamp(120px, 16vw, 200px);
      padding-inline: var(--pad-x);
      background: var(--c-dark);
      color: var(--c-light);
      position: relative;
      overflow: hidden;
    }


    .cta-inner {
      max-width: 640px;
      margin-inline: auto;
      text-align: center;
      position: relative;
      z-index: 1;
    }

    .cta-h2 {
      font-size: clamp(40px, 6.5vw, 72px);
      font-style: italic;
      line-height: 1.08;
      margin-bottom: 28px;
    }

    .cta-body {
      font-size: clamp(15px, 1.8vw, 19px);
      color: rgba(246, 242, 245, .55);
      line-height: 1.75;
      margin-bottom: 56px;
    }

    .cta-note {
      margin-top: 24px;
      font-size: 11px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(246, 242, 245, .3);
    }

    /* =========================================
       MODULE 7.5 — CONTATO
    ========================================= */
    @media (min-width: 640px) {
      .contato-cards {
        grid-template-columns: 1fr 1fr !important;
      }
    }

    /* =========================================
       MODULE 8 — FOOTER
    ========================================= */
    #footer {
      background: var(--c-dark);
      border-top: 1px solid var(--c-border-dk);
      padding: 30px var(--pad-x);
    }

    .footer-inner {
      max-width: var(--max-w);
      margin-inline: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .footer-name {
      font-family: var(--f-serif);
      font-size: 15px;
      color: rgba(246, 242, 245, .55);
    }

    .footer-meta {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 20px;
      flex-wrap: wrap;
    }

    .footer-crp {
      font-size: 11px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(246, 242, 245, .28);
    }

    .footer-credit {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 10px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(246, 242, 245, .28);
    }

    .footer-loop-logo {
      display: block;
      width: 38px;
      height: auto;
      opacity: .72;
    }


    /* =========================================
       MODULE 9 — MODAL
    ========================================= */
    .modal {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--pad-x);
      visibility: hidden;
      opacity: 0;
      transition: visibility 0s .4s, opacity .4s var(--ease);
    }

    .modal.is-open {
      visibility: visible;
      opacity: 1;
      transition: opacity .4s var(--ease);
    }

    .modal-overlay {
      position: absolute;
      inset: 0;
      background: rgba(47, 36, 44, .8);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .modal-box {
      position: relative;
      background: var(--c-bg);
      width: 100%;
      max-width: 480px;
      padding: 56px 40px 48px;
      border-radius: 4px;
      box-shadow: 0 24px 64px rgba(0, 0, 0, .2);
      transform: translateY(20px);
      opacity: 0;
      transition: opacity .4s var(--ease-out) .1s, transform .4s var(--ease-out) .1s;
    }

    .modal.is-open .modal-box {
      transform: none;
      opacity: 1;
    }

    .modal-close {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 40px;
      height: 40px;
      border: none;
      background: transparent;
      color: var(--c-muted);
      font-size: 28px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color .2s ease;
    }

    .modal-close:hover {
      color: var(--c-dark);
    }

    .modal-title {
      font-family: var(--f-serif);
      font-size: 32px;
      line-height: 1.1;
      margin-bottom: 12px;
      color: var(--c-dark);
    }

    .modal-desc {
      font-size: 15px;
      color: var(--c-muted);
      margin-bottom: 32px;
      line-height: 1.6;
    }

    .form-group {
      margin-bottom: 20px;
      text-align: left;
    }

    .form-group label {
      display: block;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--c-muted);
      margin-bottom: 8px;
    }

    .form-group input {
      width: 100%;
      height: 52px;
      padding: 0 16px;
      background: transparent;
      border: 1px solid var(--c-border);
      border-radius: 2px;
      font-family: var(--f-sans);
      font-size: 15px;
      color: var(--c-dark);
      transition: border-color .2s ease;
    }

    .form-group input:focus {
      outline: none;
      border-color: var(--c-dark);
    }

    .modal-submit {
      width: 100%;
      justify-content: center;
      margin-top: 12px;
    }

    /* ─── MOTION REDUCE ───────────────────────── */
    @media (prefers-reduced-motion: reduce) {

      .sr,
      .hero-tag,
      .hero-h1 .line-inner,
      .hero-body,
      .hero-cta-wrap,
      .hero-strip {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
      }

      .btn-pulse {
        animation: none !important;
      }

      html {
        scroll-behavior: auto;
      }
    }