/* ============================================================================
   forME Lagree — shared styling
   ----------------------------------------------------------------------------
   The brand foundation: colors, fonts, spacing, buttons, forms, the top bar
   and the footer. Every page except the home page loads this file.

   WHERE THIS CAME FROM, AND THE ONE THING TO WATCH
   This is a copy of the styling written inside index.html, lifted out so the
   founding, intro-offer and careers pages all look identical to the home page
   without anyone re-typing it three times.

   The home page still carries its own copy inside the file. That was on purpose:
   pulling the styling out of a page that is live, working and already approved
   is a risk with no reward. The trade is that the two can drift apart.

   So: a color, font or button change made here has to be made in index.html
   too, or the home page will stop matching the rest of the site. If the home
   page is ever being reworked for another reason, that is the moment to delete
   its inline styling and point it at this file instead.
   ============================================================================ */

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

  /* Makes the hidden attribute actually hide things. A browser's built-in rule for
     [hidden] is the weakest rule there is, so any display rule written here beats it.
     That is what broke the waitlist form: .contact-form sets display:flex, so after a
     signup the form never disappeared and its button sat frozen on "Sending…".
     Keep this rule. Anything marked hidden in the HTML depends on it. */
  [hidden] { display: none !important; }

  :root {
    /* warm gold */
    --clay:     #B8972A;
    --clay-lt:  #CDA94F;
    --gold-glow:rgba(205,169,79,0.18);

    /* warm neutrals (de-greyed for softness) */
    --cream:    #FAF6EF;
    --linen:    #F3ECE1;
    --sand:     #E8DCCB;
    --blush:    #EADbcc;
    --blush-dp: #Dcc1ad;

    /* warm darks */
    --bark:     #1A1714;
    --bark-2:   #2C2620;

    /* warm text */
    --ink:      #221E19;
    --stone:    #6B6056;
    --stone-lt: #A89B8C;
    --white:    #FFFFFF;

    /* shape language */
    --r-sm:  14px;
    --r-md:  24px;
    --r-lg:  34px;
    --r-pill: 999px;
    --arch: 52% 52% var(--r-md) var(--r-md) / 32% 32% 5% 5%;

    /* soft warm shadows */
    --shadow-soft: 0 20px 55px -28px rgba(120,86,28,0.40);
    --shadow-lift: 0 32px 70px -30px rgba(120,86,28,0.50);
  }

  /* scroll-padding-top keeps the fixed nav from covering the top of any
     section you jump to from a link. Roughly nav height + a little breathing room. */
  html { scroll-behavior: smooth; scroll-padding-top: 92px; }

  body {
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.8;
    background:
      radial-gradient(1100px 700px at 88% -8%, var(--gold-glow), transparent 60%),
      radial-gradient(900px 600px at -6% 32%, rgba(220,193,173,0.20), transparent 55%),
      var(--cream);
  }

  /* scroll reveal */
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.95s cubic-bezier(.22,.61,.36,1), transform 0.95s cubic-bezier(.22,.61,.36,1);
  }
  .reveal.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; }
    html { scroll-behavior: auto; }
  }

  /* ── NAV ── */
  nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.1rem 3rem;
    margin: 0.8rem;
    border-radius: var(--r-pill);
    background: rgba(250,246,239,0.78);
    border: 1px solid rgba(184,151,42,0.16);
    box-shadow: 0 10px 30px -22px rgba(120,86,28,0.5);
    backdrop-filter: blur(12px);
  }

  .nav-logo {
    font-family: 'Playfair Display', serif;
    font-size: 1.45rem;
    font-weight: 400;
    color: var(--ink);
    text-decoration: none;
    letter-spacing: 0.02em;
  }

  .nav-logo span {
    font-style: italic;
    background: linear-gradient(120deg, var(--clay), var(--clay-lt));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  nav ul { list-style: none; display: flex; gap: 2.4rem; }

  nav ul a {
    font-size: 0.76rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--stone);
    text-decoration: none;
    transition: color 0.2s;
  }

  nav ul a:hover { color: var(--clay); }

  .nav-cta {
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: linear-gradient(120deg, var(--clay), var(--clay-lt));
    color: var(--white);
    padding: 0.68rem 1.6rem;
    text-decoration: none;
    border-radius: var(--r-pill);
    box-shadow: 0 12px 26px -14px rgba(184,151,42,0.8);
    transition: transform 0.2s, box-shadow 0.2s;
  }

  .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(184,151,42,0.9); }

  /* ── HERO ── */
  #home {
    min-height: 100vh;
    padding: calc(72px + 1.5rem) 1.5rem 1.5rem;
  }

  .hero-box {
    display: grid;
    grid-template-columns: 1.04fr 1fr;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lift);
    min-height: calc(100vh - 72px - 3rem);
  }

  .hero-left {
    position: relative;
    overflow: hidden;
    border-right: 1px solid rgba(205,169,79,0.45);
    background: linear-gradient(158deg, var(--bark-2) 0%, var(--bark) 70%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4.5rem 3.5rem;
  }

  .hero-left::after {
    content: '';
    position: absolute;
    top: -30%; right: -20%;
    width: 70%; height: 80%;
    background: radial-gradient(circle, rgba(205,169,79,0.22), transparent 65%);
    pointer-events: none;
  }

  .hero-eyebrow {
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--clay-lt);
    margin-bottom: 1.75rem;
    position: relative;
  }

  .hero-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.7rem, 4.6vw, 4.3rem);
    font-weight: 400;
    line-height: 1.08;
    color: var(--linen);
    margin-bottom: 1.4rem;
    position: relative;
  }

  .hero-locline {
    margin-top: 2rem;
    padding-top: 1.2rem;
    position: relative;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--clay-lt);
  }

  .hero-locline::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 38px; height: 1px;
    background: rgba(205,169,79,0.55);
  }

  .hero-title em {
    font-style: italic;
    background: linear-gradient(120deg, var(--clay-lt), #E7D29A);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .hero-desc {
    font-size: 0.96rem;
    color: rgba(238,228,214,0.72);
    max-width: 390px;
    line-height: 1.9;
    margin-bottom: 2.4rem;
    position: relative;
  }

  .hero-desc strong { color: var(--sand); font-weight: 400; }

  .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; position: relative; }

  .btn-primary {
    font-size: 0.77rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: linear-gradient(120deg, var(--clay), var(--clay-lt));
    color: var(--white);
    padding: 0.95rem 2.1rem;
    text-decoration: none;
    border-radius: var(--r-pill);
    box-shadow: 0 16px 32px -16px rgba(184,151,42,0.9);
    transition: transform 0.2s, box-shadow 0.2s;
  }

  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 22px 40px -16px rgba(184,151,42,1); }

  .btn-outline {
    font-size: 0.77rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid rgba(238,228,214,0.4);
    color: rgba(238,228,214,0.78);
    padding: 0.95rem 2.1rem;
    text-decoration: none;
    border-radius: var(--r-pill);
    transition: all 0.2s;
  }

  .btn-outline:hover { border-color: var(--clay-lt); color: var(--linen); }

  .hero-right {
    position: relative;
    overflow: hidden;
    background: var(--blush);
  }

  .hero-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .hero-stat-block {
    position: absolute;
    z-index: 2;
    bottom: 2.5rem; left: 2.5rem;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(6px);
    padding: 1.6rem 1.9rem;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-soft);
  }

  .hero-stat-num {
    font-family: 'Playfair Display', serif;
    font-size: 2.7rem;
    font-weight: 400;
    color: var(--clay);
    line-height: 1;
  }

  .hero-stat-label {
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--stone);
    margin-top: 0.4rem;
  }

  .hero-img-placeholder {
    width: 100%; height: 100%;
    background:
      radial-gradient(circle at 70% 30%, rgba(255,255,255,0.5), transparent 55%),
      linear-gradient(160deg, var(--blush) 0%, var(--blush-dp) 100%);
    display: flex; align-items: center; justify-content: center;
  }

  .hero-img-placeholder span {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(120,96,70,0.55);
  }

  /* ── OPENING BANNER ── */
  .opening-banner {
    background: linear-gradient(120deg, var(--clay), var(--clay-lt));
    color: var(--white);
    text-align: center;
    padding: 0.75rem 1.5rem;
    margin: 0 1.5rem;
    border-radius: var(--r-pill);
    font-size: 0.76rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
    box-shadow: var(--shadow-soft);
  }
  .opening-banner a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }

  /* ── SHAKE STRIP ── */
  .shake-strip {
    margin: 1.75rem 1.5rem 0;
    border-radius: var(--r-pill);
    background: linear-gradient(150deg, var(--bark-2), var(--bark));
    padding: 1.35rem 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    overflow: hidden;
    flex-wrap: wrap;
  }

  .shake-text {
    font-family: 'Playfair Display', serif;
    font-size: 1.12rem;
    font-style: italic;
    color: var(--clay-lt);
    white-space: nowrap;
    opacity: 0.96;
  }

  .shake-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(205,169,79,0.5); flex-shrink: 0; }

  /* ── SECTIONS COMMON ── */
  section { padding: 7rem 5rem; }

  .eyebrow {
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--clay);
    margin-bottom: 1rem;
  }

  .section-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.9rem, 3vw, 2.7rem);
    font-weight: 400;
    line-height: 1.22;
    color: var(--ink);
    margin-bottom: 1.5rem;
  }

  .rule {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--clay), transparent);
    margin: 1.25rem 0 2rem;
    border: none;
  }

  /* ── ABOUT ── */
  #about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: center;
  }

  .about-image {
    aspect-ratio: 4/5;
    background: linear-gradient(160deg, var(--blush) 0%, var(--blush-dp) 100%);
    position: relative;
    border-radius: var(--arch);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-soft);
  }

  .about-image::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 22%, rgba(255,255,255,0.45), transparent 55%);
  }

  .about-image span {
    font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(120,96,70,0.55); position: relative; z-index: 1;
  }

  /* photos inside the arched About / Class frames */
  .frame-photo {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .about-text p { font-size: 0.95rem; color: var(--stone); line-height: 1.95; margin-bottom: 1.25rem; }

  .about-sig {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    font-style: italic;
    color: var(--clay);
    margin-top: 1.75rem;
  }

  /* ── CLASS ── */
  #class {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: center;
  }

  .class-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-top: 2rem;
  }

  .class-chip {
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(184,151,42,0.18);
    padding: 1.25rem 1.5rem;
    border-radius: var(--r-md);
    transition: transform 0.25s, box-shadow 0.25s;
  }
  .class-chip:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }

  .class-chip-label {
    font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--clay); margin-bottom: 0.4rem;
  }

  .class-chip-value { font-family: 'Playfair Display', serif; font-size: 1.12rem; color: var(--ink); }

  .class-image {
    aspect-ratio: 3/4;
    background:
      radial-gradient(circle at 30% 25%, rgba(255,255,255,0.4), transparent 55%),
      linear-gradient(160deg, var(--blush) 0%, var(--blush-dp) 100%);
    border-radius: var(--arch);
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
    box-shadow: var(--shadow-soft);
  }

  .class-image span {
    font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(120,96,70,0.5);
  }

  .class-callout {
    background: linear-gradient(150deg, var(--bark-2), var(--bark));
    color: var(--linen);
    padding: 2rem 2.25rem;
    margin-top: 2.5rem;
    border-radius: var(--r-md);
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    font-style: italic;
    line-height: 1.6;
    box-shadow: var(--shadow-soft);
  }

  .class-callout strong {
    color: var(--clay-lt);
    font-style: normal;
    font-size: 0.78rem;
    font-family: 'DM Sans', sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.6rem;
  }

  /* ── FOUNDING / WAITLIST OFFER ── */
  .intro-offer {
    margin: 1.5rem;
    border-radius: var(--r-lg);
    background:
      radial-gradient(700px 300px at 12% 0%, rgba(255,255,255,0.22), transparent 60%),
      linear-gradient(125deg, #C7A640 0%, var(--clay) 60%, #A6871F 100%);
    padding: 4rem 4.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    flex-wrap: wrap;
    box-shadow: var(--shadow-lift);
  }

  .intro-offer-text .eyebrow { color: rgba(255,255,255,0.8); }

  .intro-offer-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    font-weight: 400;
    color: var(--white);
    line-height: 1.22;
  }

  .intro-offer-sub { font-size: 0.9rem; color: rgba(255,255,255,0.82); margin-top: 0.8rem; max-width: 440px; }

  .intro-price-badge {
    background: rgba(255,255,255,0.96);
    border-radius: var(--r-md);
    padding: 2.1rem 2.6rem;
    text-align: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-soft);
  }

  .intro-price-small {
    font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--stone); margin-bottom: 0.6rem;
  }

  .intro-price-num {
    font-family: 'Playfair Display', serif;
    font-size: 2.4rem; font-weight: 400; color: var(--clay); line-height: 1.15;
  }

  .intro-price-period {
    font-size: 0.72rem; color: var(--stone-lt); letter-spacing: 0.05em;
    margin-top: 0.5rem; max-width: 190px;
  }

  .intro-price-cta {
    display: block; margin-top: 1.4rem;
    font-size: 0.74rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
    background: linear-gradient(120deg, var(--clay), var(--clay-lt));
    color: var(--white); padding: 0.8rem 1.5rem; text-decoration: none;
    border-radius: var(--r-pill);
    box-shadow: 0 14px 28px -14px rgba(184,151,42,0.9);
    transition: transform 0.2s;
  }
  .intro-price-cta:hover { transform: translateY(-2px); }

  /* ── PRICING ── */
  #pricing { text-align: center; }
  #pricing .rule { margin: 1.25rem auto 2.5rem; }

  .pricing-intro { font-size: 0.94rem; color: var(--stone); max-width: 540px; margin: 0 auto 3.25rem; line-height: 1.9; }

  .pricing-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem; max-width: 940px; margin: 0 auto;
  }

  .pricing-card {
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(184,151,42,0.16);
    padding: 2.75rem 2.1rem;
    border-radius: var(--r-lg);
    text-align: left;
    transition: transform 0.28s, box-shadow 0.28s;
    position: relative;
  }

  .pricing-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }

  .pricing-card.featured {
    background: linear-gradient(160deg, var(--bark-2), var(--bark));
    border-color: transparent;
    box-shadow: var(--shadow-soft);
  }

  .featured-badge {
    display: inline-block;
    font-size: 0.6rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
    background: linear-gradient(120deg, var(--clay), var(--clay-lt));
    color: var(--white); padding: 0.35rem 0.85rem; border-radius: var(--r-pill);
    margin-bottom: 1.5rem;
  }

  .pricing-plan {
    font-family: 'Playfair Display', serif; font-size: 1.25rem; font-weight: 400;
    color: var(--ink); margin-bottom: 0.25rem;
  }
  .pricing-card.featured .pricing-plan { color: var(--linen); }

  .pricing-price {
    font-family: 'Playfair Display', serif; font-size: 3rem; font-weight: 400;
    color: var(--clay); line-height: 1; margin: 1rem 0 0.2rem;
  }
  .pricing-card.featured .pricing-price { color: var(--clay-lt); }
  .pricing-price sup { font-size: 1.2rem; vertical-align: super; }

  .pricing-period {
    font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--stone-lt); margin-bottom: 1.75rem;
  }
  .pricing-card.featured .pricing-period { color: rgba(200,190,178,0.7); }

  .pricing-features { list-style: none; margin-bottom: 2rem; }

  .pricing-features li {
    font-size: 0.85rem; color: var(--stone);
    padding: 0.6rem 0 0.6rem 1.2rem;
    border-bottom: 1px solid rgba(184,151,42,0.14);
    position: relative;
  }
  .pricing-card.featured .pricing-features li { color: rgba(238,228,214,0.72); border-color: rgba(255,255,255,0.08); }

  .pricing-features li::before {
    content: '·'; color: var(--clay); position: absolute; left: 0; font-size: 1.3rem; line-height: 1.4;
  }
  .pricing-card.featured .pricing-features li::before { color: var(--clay-lt); }

  .pricing-btn {
    display: block; text-align: center;
    font-size: 0.74rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 0.9rem; text-decoration: none; border-radius: var(--r-pill);
    transition: all 0.22s;
  }

  .pricing-btn-dark { background: var(--bark); color: var(--linen); }
  .pricing-btn-dark:hover { background: linear-gradient(120deg, var(--clay), var(--clay-lt)); }

  .pricing-card.featured .pricing-btn-dark { background: linear-gradient(120deg, var(--clay), var(--clay-lt)); color: var(--white); }
  .pricing-card.featured .pricing-btn-dark:hover { filter: brightness(1.06); }

  .pricing-note {
    font-size: 0.78rem; color: var(--stone-lt); max-width: 560px;
    margin: 2.75rem auto 0; font-style: italic;
  }

  /* ── FAQ ── */
  .faq-head { text-align: center; margin-bottom: 3.25rem; }
  #faq .rule { margin: 1.25rem auto 0; }
  .faq-grid { max-width: 840px; margin: 0 auto; display: grid; gap: 1.25rem; }

  .faq-item {
    background: rgba(255,255,255,0.66);
    border: 1px solid rgba(184,151,42,0.15);
    border-radius: var(--r-md);
    padding: 1.7rem 2rem;
    transition: transform 0.25s, box-shadow 0.25s;
  }
  .faq-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }

  .faq-q { font-family: 'Playfair Display', serif; font-size: 1.12rem; color: var(--ink); margin-bottom: 0.6rem; }
  .faq-a { font-size: 0.9rem; color: var(--stone); line-height: 1.85; }

  /* ── CONTACT ── */
  #contact {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: start;
  }

  /* The waitlist form is first in the HTML so that on a phone it stacks above the
     map. On a wide screen we pull "Visit Us" back into the left column, which keeps
     the desktop layout exactly as it was. The mobile rule below undoes this. */
  #visit { order: -1; }

  .contact-card {
    background: rgba(255,255,255,0.62);
    border: 1px solid rgba(184,151,42,0.15);
    border-radius: var(--r-lg);
    padding: 2.75rem;
    box-shadow: var(--shadow-soft);
  }

  .contact-info-item { margin-bottom: 1.9rem; }
  .contact-info-item:last-child { margin-bottom: 0; }

  .contact-label {
    font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--clay); margin-bottom: 0.45rem;
  }

  .contact-value { font-size: 0.92rem; color: var(--stone); line-height: 1.8; }
  .contact-value a { color: var(--stone); text-decoration: none; transition: color 0.2s; }
  .contact-value a:hover { color: var(--clay); }

  .contact-image {
    aspect-ratio: 16 / 10;
    border-radius: var(--r-md);
    overflow: hidden;
    margin-bottom: 1.9rem;
    box-shadow: var(--shadow-soft);
  }
  .contact-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .map-embed {
    width: 100%; height: 210px; border: none;
    border-radius: var(--r-md); margin-top: 0.85rem;
    box-shadow: var(--shadow-soft); filter: grayscale(0.25) sepia(0.08);
  }

  .contact-form { display: flex; flex-direction: column; gap: 1.6rem; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
  .form-field { display: flex; flex-direction: column; gap: 0.45rem; }

  .form-field label {
    font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone);
  }

  .form-field input, .form-field textarea {
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(184,151,42,0.2);
    border-radius: var(--r-sm);
    padding: 0.85rem 1rem;
    font-family: 'DM Sans', sans-serif; font-size: 0.92rem; font-weight: 300;
    color: var(--ink); outline: none; transition: border-color 0.2s, box-shadow 0.2s; resize: none;
  }

  .form-field input:focus, .form-field textarea:focus {
    border-color: var(--clay);
    box-shadow: 0 0 0 3px rgba(205,169,79,0.16);
  }

  .form-submit {
    font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
    background: linear-gradient(120deg, var(--clay), var(--clay-lt));
    color: var(--white); border: none; padding: 1rem 2.4rem; cursor: pointer;
    font-family: 'DM Sans', sans-serif; border-radius: var(--r-pill); align-self: flex-start;
    box-shadow: 0 16px 32px -16px rgba(184,151,42,0.9);
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .form-submit:hover { transform: translateY(-2px); box-shadow: 0 22px 40px -16px rgba(184,151,42,1); }

  .form-fineprint { font-size: 0.72rem; color: var(--stone-lt); }

  /* Only appears if a signup fails. Warm brick, not a harsh red, so it still reads
     as forME. Kept dark enough to stay easy to read on the cream card. */
  .form-error {
    font-size: 0.85rem; line-height: 1.7; color: #A03D2F;
    background: rgba(160,61,47,0.06);
    border: 1px solid rgba(160,61,47,0.22);
    border-radius: var(--r-sm);
    padding: 0.9rem 1.1rem;
  }
  .form-error a { color: #A03D2F; text-decoration: underline; }

  /* ── FOOTER ── */
  footer {
    background: linear-gradient(150deg, var(--bark-2), var(--bark));
    margin: 1.5rem;
    border-radius: var(--r-lg);
    padding: 2.75rem 3.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .footer-logo { font-family: 'Playfair Display', serif; font-size: 1.25rem; color: var(--linen); letter-spacing: 0.04em; }
  .footer-logo span { color: var(--clay-lt); font-style: italic; }

  .footer-nap {
    font-size: 0.72rem; color: rgba(238,228,214,0.55); letter-spacing: 0.04em;
    text-align: center; line-height: 1.8;
  }
  .footer-nap a { color: rgba(238,228,214,0.55); text-decoration: none; }

  .footer-copy { font-size: 0.72rem; color: rgba(238,228,214,0.4); letter-spacing: 0.06em; }


  /* ── BOOKING PAGES (Mariana Tek) ──────────────────────────────────────────
     Mariana will not render its iframes over a dark background, and they asked
     for white rather than the site cream. So the widget sits on a white card
     that floats on the cream page. Brand stays intact, Mariana gets its white. */

  .booking-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: calc(92px + 3.25rem) 1.5rem 4rem;
  }

  .booking-head { text-align: center; margin-bottom: 2.5rem; }
  .booking-head .rule { margin: 1.5rem auto; }

  .booking-lede {
    max-width: 560px;
    margin: 0 auto;
    color: var(--stone);
    font-size: 0.95rem;
    line-height: 1.9;
  }

  .booking-frame {
    background: var(--white);
    border: 1px solid rgba(184,151,42,0.16);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-soft);
    padding: 1.75rem;
    min-height: 620px;
    overflow: hidden;
  }

  .booking-frame [data-mariana-integrations] { min-height: 560px; }

  .booking-note {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.82rem;
    color: var(--stone-lt);
    letter-spacing: 0.02em;
  }
  .booking-note a { color: var(--clay); text-decoration: none; }
  .booking-note a:hover { text-decoration: underline; }

  /* ── LEGAL PAGES (privacy, terms) ─────────────────────────────────────────
     Long-form reading. Narrower measure, larger line height, quiet headings. */

  .legal-page {
    max-width: 760px;
    margin: 0 auto;
    padding: calc(92px + 3.25rem) 1.5rem 4rem;
  }

  .legal-head { text-align: center; margin-bottom: 3rem; }
  .legal-head .rule { margin: 1.5rem auto; }

  .legal-updated {
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--stone-lt);
  }

  .legal-body { color: var(--stone); font-size: 0.95rem; line-height: 1.95; }

  .legal-body h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--ink);
    margin: 2.75rem 0 0.9rem;
  }

  .legal-body h3 {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--clay);
    margin: 1.9rem 0 0.65rem;
  }

  .legal-body p { margin-bottom: 1.1rem; }
  .legal-body ul, .legal-body ol { margin: 0 0 1.1rem 1.35rem; }
  .legal-body li { margin-bottom: 0.55rem; }
  .legal-body a { color: var(--clay); text-decoration: none; }
  .legal-body a:hover { text-decoration: underline; }
  .legal-body strong { color: var(--ink); font-weight: 500; }

  /* The boxed callouts: the SMS consent block and the Ohio cancellation notice.
     Both are quoted requirements, so they read as set apart from our own words. */
  .legal-callout {
    background: var(--linen);
    border-left: 2px solid var(--clay);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    padding: 1.35rem 1.6rem;
    margin: 1.5rem 0;
    font-size: 0.9rem;
  }
  .legal-callout p:last-child { margin-bottom: 0; }

  .legal-toc {
    background: var(--linen);
    border-radius: var(--r-sm);
    padding: 1.5rem 1.75rem;
    margin-bottom: 2.5rem;
  }
  .legal-toc ol { margin: 0 0 0 1.1rem; }
  .legal-toc li { margin-bottom: 0.4rem; font-size: 0.88rem; }

  .back-home {
    display: inline-block;
    margin-top: 3rem;
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--stone);
    text-decoration: none;
  }
  .back-home:hover { color: var(--clay); }

  /* ── FOOTER LEGAL LINKS ── */
  .footer-legal {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: rgba(238,228,214,0.4);
  }
  .footer-legal a { color: rgba(238,228,214,0.55); text-decoration: none; }
  .footer-legal a:hover { color: var(--clay-lt); }

  /* ── RESPONSIVE ── */
  @media (max-width: 900px) {
    nav { padding: 0.9rem 1.4rem; margin: 0.6rem; }
    nav ul { display: none; }
    section { padding: 4.5rem 1.5rem; }
    .intro-offer { padding: 3rem 2rem; margin: 1.25rem; }
    #home { padding: calc(70px + 1rem) 1rem 1rem; }
    .hero-box { grid-template-columns: 1fr; min-height: 0; }
    .hero-left { padding: 3.25rem 2rem; border-right: none; border-bottom: 1px solid rgba(205,169,79,0.45); }
    .hero-right { min-height: 0; aspect-ratio: 1022 / 784; }
    .hero-photo { display: block; }
    .hero-stat-block { bottom: 1.5rem; left: 1.5rem; padding: 1.25rem 1.5rem; }
    #about, #class, #contact { grid-template-columns: 1fr; gap: 2.75rem; }
    /* Phone: fall back to the HTML order — waitlist form on top, map at the bottom. */
    #visit { order: 0; }
    .pricing-grid { grid-template-columns: 1fr; max-width: 380px; }
    .form-row { grid-template-columns: 1fr; }
    footer { padding: 2.25rem 1.75rem; flex-direction: column; text-align: center; margin: 1rem; }
    .booking-page, .legal-page { padding: calc(70px + 2.25rem) 1.1rem 3rem; }
    .booking-frame { padding: 0.85rem; min-height: 540px; border-radius: var(--r-sm); }
    .shake-strip { padding: 1.2rem 1.5rem; margin: 1.25rem 1rem 0; }
    .opening-banner { margin: 0 1rem; }
    .contact-card { padding: 2rem; }
    /* On narrow phones the nav bar wraps onto two lines, so it is taller than on
       desktop. Extra scroll padding keeps it from covering the top of whatever
       section you just tapped through to — the waitlist form especially. */
    html { scroll-padding-top: 145px; }
  }