/* ════════════════════════════════════════════════════════════════
   Aligned Attachments — ELEVATION PASS
   Atmosphere, depth, and refined typography layered over site.css.
   Loaded last, so it overrides where it needs to. Safe to tweak.
   ════════════════════════════════════════════════════════════════ */

/* ---- Typography: confident tracking, not blown-out ------------- */
/* The nav was so widely letter-spaced that "Work With Me" blurred
   into one word. Pulled back to a refined editorial track.         */
.nav-link      { letter-spacing: 0.13em; font-size: 11px; white-space: nowrap; }
.brand-wordmark{ white-space: nowrap; }
.hero-eyebrow  { letter-spacing: 0.2em; }
.announce-bar  { letter-spacing: 0.22em; }
.marquee-strip { letter-spacing: 0.26em; }

/* ---- Warm deep teal-ink replaces harsh pure black -------------- */
.btn-dark            { background: var(--aa-teal-900); border-color: var(--aa-teal-900); }
.btn-dark:hover      { background: var(--aa-teal-700); border-color: var(--aa-teal-700); }
.btn-outline         { color: var(--aa-teal-900); border-color: var(--aa-teal-900); }
.btn-outline:hover   { background: var(--aa-teal-900); color: var(--aa-cream-50); border-color: var(--aa-teal-900); }
.subscribe-row       { border-color: var(--aa-teal-900); }
.subscribe-row button{ background: var(--aa-teal-900); }
.subscribe-row button:hover { background: var(--aa-teal-700); }

/* ---- Atmospheric backgrounds: no more flat cream slabs --------- */
.hero {
  background:
    radial-gradient(820px 560px at 86% 14%, rgba(166,243,240,0.55), transparent 64%),
    radial-gradient(620px 480px at -4% 98%, rgba(241,227,188,0.50), transparent 62%),
    var(--aa-cream-100);
}
.page-header {
  background:
    radial-gradient(720px 380px at 50% -12%, rgba(183,240,240,0.42), transparent 66%),
    var(--aa-cream-100);
}
.section-cream {
  background:
    radial-gradient(880px 480px at 100% 0%, rgba(183,240,240,0.20), transparent 60%),
    var(--aa-cream-100);
}
.section-mint,
.mint-cta {
  background: linear-gradient(162deg, var(--aa-mint-300), var(--aa-mint-100) 82%);
}

/* ---- Dark sections: deep teal-black with a glow, not a slab ---- */
.section-dark,
.testimonial-dark {
  background:
    radial-gradient(680px 420px at 76% 0%, rgba(79,200,203,0.26), transparent 62%),
    linear-gradient(168deg, #143436 0%, #0B2122 62%, #081A1B 100%);
}
.announce-bar,
.marquee-strip { background: #102B2C; }

/* ---- Hero image: richer block + deeper, warmer shadow ---------- */
.hero-img-bg {
  inset: -5% -7% -8% 7%;
  background: linear-gradient(150deg, var(--aa-mint-300), var(--aa-mint-100) 80%);
  border-radius: 34px;
}
.hero-img {
  border-radius: 24px;
  box-shadow: 0 36px 72px -26px rgba(20,57,58,0.46);
}

/* ---- Buttons: a touch more presence ---------------------------- */
.btn {
  padding: 17px 34px;
  letter-spacing: 0.16em;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -12px rgba(20,57,58,0.42);
}

/* ---- Cards: warmer, deeper, more dimensional shadow ------------ */
.card-soft,
.step-card,
.svc-card,
.tcard,
.session-row,
.blog-card .img-wrap,
.workbook-card {
  box-shadow:
    0 20px 44px -26px rgba(20,57,58,0.40),
    0 4px 12px -6px rgba(20,57,58,0.12);
}

/* ---- Header: glassier, with a hairline of depth ---------------- */
.site-header .header-row {
  background: var(--aa-cream-50);
  border-bottom: 1px solid rgba(20,57,58,0.12);
}

/* ---- Film-grain texture: tactile, premium, barely-there -------- */
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ════════════════════════════════════════════════════════════════
   MOBILE FIXES
   ════════════════════════════════════════════════════════════════ */

/* The two-column page grids (Contact, Work With Me, About, Services,
   and the homepage "why choose" band) are set with inline styles, so
   the normal responsive CSS can't touch them. This collapses them to
   a single column on phones. !important is required to win over the
   inline grid declaration.                                          */
@media (max-width: 860px) {
  .split-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
}

/* iOS Safari zooms the page in whenever a form field smaller than
   16px is focused — which then needs sideways scrolling. Pinning
   every field to 16px stops the zoom entirely.                      */
.field input,
.field textarea,
.field select,
.subscribe-row input {
  font-size: 16px;
}

/* Clip any stray horizontal overflow (e.g. the scrolling marquee) so a
   phone never scrolls sideways. Applied to body, not html: the root
   element's overflow propagates to the viewport and can break paint. */
body { overflow-x: clip; }

/* Blog post body sits directly inside a <section>, not a padded
   container, so its text ran flush to the screen edge on mobile.
   Give the article its own side gutters. */
.post-article {
  padding-left: 24px;
  padding-right: 24px;
}