/* ==========================================================================
   ASHLEY FAHIE — LIFE-ORGANIZATION & PLANNING COACH
   Shared stylesheet for every page.

   The palette is lifted directly from Ashley's own brand assets (the banner
   she uses on Facebook/LinkedIn and the compass-with-heart mark), sampled
   pixel-for-pixel rather than eyeballed:

     deep teal  #02383A  "DON'T DO THINGS" headline + dark bands
     rust       #A94C2A  "DO YOUR CALENDAR" headline + buttons
     cream      #FAEFE1  page ground
     mustard    #DEA14E  weave node 2
     coral      #E28962  weave node 3
     slate-teal #314944  weave node 4
     sage       #93A388  compass secondary points

   Type mirrors the banner: a heavy grotesque in caps for display (Archivo
   Black), a clean neutral for body (Inter).

   Contrast (WCAG AA): teal on cream 11.3:1 · body on cream 8.2:1
                       rust on cream 4.9:1 · white on rust 5.6:1
   ========================================================================== */

:root{
  /* ground */
  --cream:      #FAEFE1;
  --cream-deep: #F3E3D0;   /* alternating band */
  --cream-warm: #FDF7EF;   /* card surface */

  /* ink */
  --teal:       #02383A;   /* headings + dark bands */
  --teal-slate: #314944;
  --ink:        #3A4A48;   /* body copy   — 8.2:1 on cream */
  --ink-mute:   #5A6864;   /* meta text   — 5.6:1 on cream */

  /* accents */
  --rust:       #A94C2A;   /* primary accent, buttons, links — 4.9:1 */
  --rust-deep:  #8E3E22;   /* hover / small text on cream */
  --rust-light: #E28962;   /* accent on dark backgrounds */
  --mustard:    #DEA14E;
  --coral:      #E28962;
  --sage:       #93A388;
  --brass:      #C8952F;

  --line:      rgba(2,56,58,.14);
  --line-dark: rgba(250,239,225,.18);

  --font-display: "Archivo Black", "Arial Black", Impact, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --measure: 64ch;
  --shell:   1180px;
  --narrow:  760px;
  --gutter:  clamp(1.25rem, 5vw, 3rem);
  --radius:  6px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{ scroll-behavior:smooth; scroll-padding-top:92px; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Paper grain, matching the watercolour texture of her brand art. */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:1;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

/* --- display type --------------------------------------------------------
   Archivo Black ships a single weight (400 = black), so never set font-weight
   on it — the browser would synthesise a faux-bold and smear the letterforms. */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:400;
  color:var(--teal);
  line-height:1.06;
  letter-spacing:-.02em;
  text-transform:uppercase;
  margin:0 0 .55em;
  text-wrap:balance;
}
h3,h4{ letter-spacing:-.01em; }

p{ margin:0 0 1.15em; max-width:var(--measure); }
p:last-child{ margin-bottom:0; }

a{ color:var(--rust-deep); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:.18em; }

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

/* height:auto is load-bearing, not decoration. The width/height attributes on
   <img> become presentational hints, so without this an image keeps its full
   intrinsic height while CSS shrinks its width — stretching it, and making
   `aspect-ratio` silently do nothing. */
img,svg{ max-width:100%; height:auto; display:block; }

hr{ border:0; border-top:1px solid var(--line); margin:2.5rem 0; }

/* --- layout primitives ---------------------------------------------------- */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); }
.shell--narrow{ max-width:var(--narrow); }
.section{ position:relative; padding-block:clamp(4rem, 9vw, 7rem); }
.section--tight{ padding-block:clamp(2.75rem, 5.5vw, 4rem); }
.band-deep{ background:var(--cream-deep); }
.band-ink{ background:var(--teal); color:rgba(250,239,225,.8); }
.band-ink h1,.band-ink h2,.band-ink h3,.band-ink h4{ color:var(--cream); }
.band-ink a{ color:var(--rust-light); }

.eyebrow{
  display:inline-flex; align-items:flex-start; gap:.6rem;
  font-family:var(--font-body);
  font-size:.75rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-mute);
  margin:0 0 1.35rem;
}
.eyebrow svg{ width:15px; height:15px; margin-top:.2em; color:var(--rust); flex:none; }
.band-ink .eyebrow{ color:rgba(250,239,225,.62); }
.band-ink .eyebrow svg{ color:var(--rust-light); }

.lede{ font-size:clamp(1.09rem,1rem + .45vw,1.28rem); line-height:1.6; color:var(--ink); }
.band-ink .lede{ color:rgba(250,239,225,.82); }

.section__head{ max-width:700px; margin-bottom:clamp(2.25rem,4.5vw,3.5rem); }
.section__head h2{ font-size:clamp(1.6rem,1.15rem + 1.9vw,2.5rem); }
.section__head p{ font-size:1.04rem; }
.section__head--center{ margin-inline:auto; text-align:center; }
.section__head--center p{ margin-inline:auto; }
.section__head--center .eyebrow{ justify-content:center; }

/* --- placeholder marker ---------------------------------------------------
   Visually inert so pages read as finished, but greppable for review:
       grep -rc 'class="ph"' *.html
   Every .ph carries a title="" saying exactly what to confirm.             */
.ph{ cursor:help; }

/* --- buttons -------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--font-body);
  font-size:.95rem; font-weight:600; letter-spacing:.01em;
  padding:.95rem 1.6rem;
  border-radius:var(--radius);
  border:1.5px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:transform .18s var(--ease), background-color .18s var(--ease),
             border-color .18s var(--ease), color .18s var(--ease);
}
.btn:hover{ text-decoration:none; transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn--primary{ background:var(--rust); color:#fff; }
.btn--primary:hover{ background:var(--teal); color:#fff; }
.btn--ghost{ background:transparent; color:var(--teal); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--teal); background:rgba(2,56,58,.04); }
.btn--light{ background:var(--cream); color:var(--teal); }
.btn--light:hover{ background:var(--rust-light); color:var(--teal); }
.btn--sm{ padding:.65rem 1.15rem; font-size:.875rem; }
.band-ink .btn--ghost{ color:var(--cream); border-color:var(--line-dark); }
.band-ink .btn--ghost:hover{ border-color:var(--cream); background:rgba(250,239,225,.07); }

.arrow-link{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:600; font-size:.95rem; color:var(--rust-deep);
}
.arrow-link svg{ width:16px; height:16px; transition:transform .2s var(--ease); }
.arrow-link:hover svg{ transform:translateX(4px); }
.band-ink .arrow-link{ color:var(--rust-light); }

/* ==========================================================================
   NAV
   ========================================================================== */
.skip{ position:absolute; left:-9999px; top:0; z-index:200;
       background:var(--teal); color:var(--cream); padding:.8rem 1.2rem; font-weight:600; }
.skip:focus{ left:0; }

.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(250,239,225,.88);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease), background-color .25s var(--ease);
}
.nav.is-stuck{ border-bottom-color:var(--line); background:rgba(250,239,225,.96); }
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:74px; }

.brand{ display:inline-flex; align-items:center; gap:.7rem; color:var(--teal); }
.brand:hover{ text-decoration:none; }
/* Size by height only — the compass is 4:5, so a square box would letterbox it
   and leave uneven space between the mark and the wordmark. */
.brand__mark{ width:auto; height:34px; flex:none; }
.brand__name{ font-family:var(--font-display); font-size:1.02rem; letter-spacing:-.01em;
              line-height:1.1; text-transform:uppercase; }
.brand__role{ display:block; font-family:var(--font-body); font-size:.64rem; font-weight:600;
              letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); margin-top:.22rem; }

.nav__links{ display:flex; align-items:center; gap:1.7rem; list-style:none; margin:0; padding:0; }
.nav__links a{ font-size:.92rem; font-weight:500; color:var(--ink); position:relative; padding-block:.35rem; }
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--rust);
  transform:scaleX(0); transform-origin:left; transition:transform .22s var(--ease);
}
.nav__links a:hover{ color:var(--teal); text-decoration:none; }
.nav__links a:hover::after{ transform:scaleX(1); }
.nav__links a[aria-current="page"]{ color:var(--teal); font-weight:600; }
.nav__links a[aria-current="page"]::after{ transform:scaleX(1); }

.nav__cta{ display:none; }
@media (min-width:1080px){ .nav__cta{ display:inline-flex; } }

.nav__toggle{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0 10px;
  background:none; border:1px solid var(--line); border-radius:var(--radius); cursor:pointer;
}
.nav__toggle span{ display:block; height:2px; background:var(--teal); border-radius:2px;
                   transition:transform .25s var(--ease), opacity .2s var(--ease); }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:919px){
  .nav__menu{
    position:fixed; inset:74px 0 auto 0;
    background:var(--cream); border-bottom:1px solid var(--line);
    padding:1.25rem var(--gutter) 2rem; display:none;
    max-height:calc(100dvh - 74px); overflow-y:auto;
  }
  .nav__menu.is-open{ display:block; }
  .nav__links{ flex-direction:column; align-items:stretch; gap:0; }
  .nav__links li + li{ border-top:1px solid var(--line); }
  .nav__links a{ display:block; padding:.95rem 0; font-size:1.05rem; }
  .nav__links a::after{ display:none; }
  .nav__menu .btn{ width:100%; margin-top:1.35rem; }
}
@media (min-width:920px){
  .nav__toggle{ display:none; }
  .nav__menu{ display:flex !important; align-items:center; gap:1.7rem; }
  .nav__menu .btn--mobile-only{ display:none; }
}

/* ==========================================================================
   HOME HERO
   ========================================================================== */
.hero{ position:relative; padding-block:clamp(2.75rem,5.5vw,4.5rem) clamp(3.5rem,7vw,5.5rem); overflow:hidden; }
.hero__inner{ position:relative; z-index:2; }
.hero__grid{ display:grid; gap:clamp(2rem,5vw,3.5rem); align-items:center; }
@media (min-width:940px){ .hero__grid{ grid-template-columns:1.35fr .65fr; } }

.hero h1{
  font-size:clamp(2.35rem, 1rem + 6.4vw, 5rem);
  line-height:.98; letter-spacing:-.028em;
  margin:0 0 1.35rem;
}
.hero h1 .line{ display:block; }
.hero h1 .accent{ color:var(--rust); }

.hero__sub{ font-size:clamp(1.08rem,1rem + .5vw,1.32rem); line-height:1.55;
            max-width:44ch; margin:0 0 2.1rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:2.5rem; }
.hero__actions .btn{ flex:1 1 auto; min-width:220px; }
@media (min-width:620px){ .hero__actions .btn{ flex:0 0 auto; min-width:0; } }

.hero__compass{ width:min(300px,64vw); margin-inline:auto; filter:drop-shadow(0 22px 40px rgba(2,56,58,.16)); }
@media (max-width:939px){ .hero__compass{ width:min(210px,46vw); } }

.hero__blob{
  position:absolute; z-index:0; left:-20%; top:-34%;
  width:min(760px,105vw); aspect-ratio:1;
  background:radial-gradient(closest-side, rgba(243,227,208,.9), rgba(243,227,208,0));
  border-radius:48% 52% 61% 39% / 44% 39% 61% 56%;
  pointer-events:none;
}

.credentials{
  display:grid; gap:.5rem; margin:0; padding:1.7rem 0 0;
  border-top:1px solid var(--line); max-width:920px;
  font-size:.83rem; letter-spacing:.02em; line-height:1.5; color:var(--ink-mute);
}
.credentials li{ list-style:none; }
@media (min-width:900px){
  .credentials{ grid-template-columns:repeat(3,1fr); gap:1.4rem; }
  .credentials li + li{ padding-left:1.4rem; border-left:1px solid var(--line); }
}

/* ==========================================================================
   PURPOSE STRIP
   ========================================================================== */
.purpose{ background:var(--teal); color:var(--cream); padding-block:1.6rem; }
.purpose__inner{ display:flex; align-items:center; justify-content:center; gap:.85rem;
                 text-align:center; flex-wrap:wrap; }
.purpose p{ margin:0; max-width:none; font-family:var(--font-body);
            font-size:clamp(1rem,.95rem + .35vw,1.24rem); font-weight:500;
            font-style:italic; letter-spacing:.005em; color:var(--cream); }
.purpose svg{ width:18px; height:18px; color:var(--rust-light); flex:none; }

/* ==========================================================================
   PAGE HERO (inner pages)
   ========================================================================== */
.page-hero{ position:relative; overflow:hidden;
            padding-block:clamp(3rem,6vw,5rem) clamp(2.5rem,5vw,4rem); }
.page-hero h1{ font-size:clamp(2rem,1.2rem + 3.6vw,3.6rem); margin-bottom:1rem; }
.page-hero .lede{ max-width:56ch; }
.page-hero__inner{ position:relative; z-index:2; }

/* About: portrait beside the story, portrait sticks while the text scrolls. */
.about__grid{ display:grid; gap:clamp(2rem,5vw,3.5rem); align-items:start; }
@media (min-width:900px){
  .about__grid{ grid-template-columns:.85fr 1.15fr; }
  .about__grid > :first-child{ position:sticky; top:100px; }
}
.about__grid h2{ font-size:clamp(1.35rem,1.1rem + 1.1vw,1.85rem); margin-top:2.25rem; }
.about__grid h2:first-child{ margin-top:0; }
/* The source photo is very tall and starts on ceiling — crop to a portrait
   frame and bias the focal point up so her face sits in the upper third. */
.about__photo{
  width:100%; height:auto; aspect-ratio:4/5;
  object-fit:cover; object-position:50% 20%;
  border-radius:var(--radius); border:1px solid var(--line);
}
/* Stop the portrait growing to fill a very tall sticky column on wide screens. */
@media (min-width:900px){ .about__photo{ max-height:min(76vh, 620px); } }

/* ==========================================================================
   PULL QUOTE / INTRO
   ========================================================================== */
.intro__grid{ display:grid; gap:clamp(2rem,5vw,4rem); }
@media (min-width:900px){ .intro__grid{ grid-template-columns:1.05fr .95fr; align-items:start; } }
.pullquote{
  margin:0; font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.5rem,1rem + 2.1vw,2.6rem);
  line-height:1.1; letter-spacing:-.022em; text-transform:uppercase;
  color:var(--teal); text-wrap:balance;
}
.pullquote .accent{ color:var(--rust); }

/* ==========================================================================
   CARDS
   ========================================================================== */
.grid-2{ display:grid; gap:1.25rem; }
@media (min-width:820px){ .grid-2{ grid-template-columns:repeat(2,1fr); gap:1.5rem; } }
.grid-3{ display:grid; gap:1.25rem; }
@media (min-width:700px){ .grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .grid-3{ grid-template-columns:repeat(3,1fr); gap:1.5rem; } }

.card{
  position:relative; background:var(--cream-warm);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(1.6rem,3vw,2.25rem);
  display:flex; flex-direction:column;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.card:hover{ transform:translateY(-4px); border-color:rgba(2,56,58,.24);
             box-shadow:0 18px 44px -28px rgba(2,56,58,.5); }
.card__icon{ width:34px; height:34px; color:var(--rust); margin-bottom:1.35rem; }
.card h3{ font-size:1.14rem; line-height:1.2; margin-bottom:.7rem; }
.card p{ font-size:.975rem; margin-bottom:1.25rem; }
.card p:last-child{ margin-bottom:0; }
/* margin-top:auto pins the note to the bottom so rules align across cards of
   unequal copy length. */
.card__note{ margin-top:auto; padding-top:1.1rem; border-top:1px solid var(--line);
             font-size:.83rem; color:var(--ink-mute); letter-spacing:.01em; }

/* Colour-coded top edge, borrowed from the weave nodes in her banner. */
.card--sage{ border-top:3px solid var(--sage); }
.card--mustard{ border-top:3px solid var(--mustard); }
.card--coral{ border-top:3px solid var(--coral); }
.card--teal{ border-top:3px solid var(--teal-slate); }
.card--sage .card__icon{ color:var(--sage); }
.card--mustard .card__icon{ color:var(--brass); }
.card--coral .card__icon{ color:var(--rust); }
.card--teal .card__icon{ color:var(--teal-slate); }

/* ==========================================================================
   NUMBERED STEPS (how-it-works)
   ========================================================================== */
.steps{ list-style:none; margin:0; padding:0; display:grid; gap:0; counter-reset:step; }
.step{ display:grid; gap:.75rem 1.75rem; padding-block:clamp(1.5rem,3vw,2.15rem);
       border-top:1px solid var(--line); }
.step:last-child{ border-bottom:1px solid var(--line); }
@media (min-width:760px){ .step{ grid-template-columns:auto 1fr; } }
.step__num{
  font-family:var(--font-display); font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);
  line-height:1; color:var(--rust); opacity:.5; letter-spacing:-.02em;
}
.step h3{ font-size:clamp(1.05rem,.98rem + .45vw,1.3rem); margin-bottom:.55rem; }
.step p{ margin:0; }

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services__list{ list-style:none; margin:0 0 clamp(2.25rem,4.5vw,3.25rem); padding:0;
                 border-top:1px solid var(--line-dark); }
.service{ border-bottom:1px solid var(--line-dark); padding-block:clamp(1.4rem,3vw,1.9rem);
          display:grid; gap:.5rem 2rem; }
@media (min-width:820px){
  .service{ grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) auto; align-items:baseline; }
}
.service__name{ font-family:var(--font-display); font-weight:400; text-transform:uppercase;
                font-size:clamp(1.05rem,.95rem + .5vw,1.35rem); letter-spacing:-.015em;
                line-height:1.15; color:var(--cream); margin:0; }
.service__desc{ margin:0; font-size:.975rem; color:rgba(250,239,225,.74); max-width:52ch; }
.service__meta{ display:flex; align-items:baseline; gap:.7rem; white-space:nowrap; }
.service__price{ font-family:var(--font-display); font-weight:400; font-size:1.2rem;
                 color:var(--rust-light); letter-spacing:-.01em; }
.service__dur{ font-size:.78rem; letter-spacing:.11em; text-transform:uppercase;
               color:rgba(250,239,225,.58); }
.services__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem 2rem;
                 justify-content:space-between; }
.services__foot p{ margin:0; font-size:.9rem; color:rgba(250,239,225,.62); max-width:46ch; }

/* Full service cards (services.html) */
.svc{ background:var(--cream-warm); border:1px solid var(--line); border-radius:var(--radius);
      padding:clamp(1.75rem,3.5vw,2.5rem); display:flex; flex-direction:column; }
.svc--feature{ border-color:var(--rust); box-shadow:0 0 0 1px var(--rust); }
.svc__tag{ display:inline-block; align-self:flex-start; font-size:.68rem; font-weight:700;
           letter-spacing:.14em; text-transform:uppercase; color:#fff; background:var(--rust);
           padding:.3rem .6rem; border-radius:3px; margin-bottom:1rem; }
.svc h2{ font-size:1.3rem; margin-bottom:.5rem; }
.svc__meta{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem .9rem;
            margin-bottom:1.25rem; padding-bottom:1.25rem; border-bottom:1px solid var(--line); }
.svc__price{ font-family:var(--font-display); font-weight:400; font-size:1.8rem; color:var(--rust); }
.svc__dur{ font-size:.78rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
           color:var(--ink-mute); }
.svc ul{ list-style:none; margin:0 0 1.75rem; padding:0; display:grid; gap:.7rem; }
.svc ul li{ position:relative; padding-left:1.6rem; font-size:.96rem; }
.svc ul li::before{
  content:""; position:absolute; left:0; top:.55em; width:9px; height:9px;
  border-radius:50%; background:var(--mustard);
}
.svc .btn{ margin-top:auto; align-self:flex-start; }

/* ==========================================================================
   FAQ (native details/summary — no JS needed)
   ========================================================================== */
.faq{ display:grid; gap:.75rem; }
.faq details{ background:var(--cream-warm); border:1px solid var(--line);
              border-radius:var(--radius); overflow:hidden; }
.faq summary{
  cursor:pointer; list-style:none; padding:1.15rem 3rem 1.15rem 1.35rem;
  font-family:var(--font-body); font-weight:600; font-size:1.02rem; color:var(--teal);
  position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:1.35rem; top:1.5rem;
  width:11px; height:11px; border-right:2px solid var(--rust); border-bottom:2px solid var(--rust);
  transform:rotate(45deg); transition:transform .22s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(-135deg); top:1.75rem; }
.faq summary:hover{ background:rgba(2,56,58,.03); }
.faq .faq__body{ padding:0 1.35rem 1.35rem; }
.faq .faq__body p{ font-size:.98rem; }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.quote-card{
  background:var(--cream-warm); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(1.75rem,3.5vw,2.4rem); display:flex; flex-direction:column;
}
.quote-card__mark{ font-family:var(--font-display); font-size:2.6rem; line-height:.7;
                   color:var(--coral); margin-bottom:.75rem; }
.quote-card blockquote{ margin:0 0 1.5rem; font-size:1.04rem; line-height:1.6; color:var(--ink); }
.quote-card__by{ margin-top:auto; padding-top:1.15rem; border-top:1px solid var(--line);
                 font-size:.85rem; color:var(--ink-mute); }
.quote-card--empty{ border-style:dashed; background:transparent; }
.quote-card--empty blockquote{ color:var(--ink-mute); font-style:italic; }

/* ==========================================================================
   BLOG
   ========================================================================== */
.post-card{
  background:var(--cream-warm); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.post-card:hover{ transform:translateY(-4px); border-color:rgba(2,56,58,.24);
                  box-shadow:0 18px 44px -28px rgba(2,56,58,.5); }
.post-card__media{ background:var(--cream-deep); aspect-ratio:16/10; display:grid; place-items:center;
                   border-bottom:1px solid var(--line); overflow:hidden; }
.post-card__media img,.post-card__media svg{ width:100%; height:100%; object-fit:cover; }
.post-card__body{ padding:clamp(1.35rem,3vw,1.85rem); display:flex; flex-direction:column; flex:1; }
.post-card__meta{ font-size:.74rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
                  color:var(--ink-mute); margin-bottom:.8rem; }
.post-card h3{ font-size:1.18rem; line-height:1.18; margin-bottom:.7rem; }
.post-card p{ font-size:.96rem; margin-bottom:1.4rem; }
.post-card .arrow-link{ margin-top:auto; }

/* Featured post (blog index) */
.feature-post{
  background:var(--cream-warm); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(1.35rem,3vw,2.25rem);
  display:grid; gap:clamp(1.5rem,4vw,3rem); align-items:center;
}
@media (min-width:900px){ .feature-post{ grid-template-columns:1.05fr .95fr; } }
.feature-post__media{ min-width:0; }
.feature-post h2{ font-size:clamp(1.4rem,1.1rem + 1.5vw,2.1rem); margin-bottom:.9rem; }
.feature-post .btn{ margin-top:1.5rem; }

/* Contact: form beside the consultation summary */
.contact__grid{ display:grid; gap:clamp(2rem,5vw,3.5rem); align-items:start; }
@media (min-width:940px){
  .contact__grid{ grid-template-columns:1.25fr .75fr; }
  .contact__grid aside{ position:sticky; top:100px; }
}

/* Long-form article */
.prose{ max-width:70ch; }
.prose h2{ font-size:clamp(1.4rem,1.1rem + 1.2vw,1.95rem); margin-top:2.75rem; }
.prose h3{ font-size:clamp(1.1rem,1rem + .5vw,1.3rem); margin-top:2rem; }
.prose > :first-child{ margin-top:0; }
.prose ul,.prose ol{ margin:0 0 1.3rem; padding-left:1.3rem; }
.prose li{ margin-bottom:.55rem; }
.prose blockquote{
  margin:2rem 0; padding:1.25rem 0 1.25rem 1.5rem;
  border-left:3px solid var(--rust);
  font-size:1.1rem; line-height:1.55; color:var(--teal);
}
.prose blockquote p{ margin:0; }
.article__meta{ font-size:.78rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
                color:var(--ink-mute); margin-bottom:1.2rem; }

/* Callout box */
.callout{
  background:var(--cream-warm); border:1px solid var(--line); border-left:4px solid var(--mustard);
  border-radius:var(--radius); padding:1.4rem 1.6rem; margin:2rem 0;
}
/* Callout titles are emphasis labels, not document sections — a heading tag
   here would skip levels in the page outline. */
.callout__title{ font-family:var(--font-display); font-weight:400; text-transform:uppercase;
                 letter-spacing:-.01em; line-height:1.15; color:var(--teal);
                 font-size:.95rem; margin:0 0 .6rem; }
.callout p{ font-size:.96rem; margin-bottom:0; }

/* ==========================================================================
   RESOURCE WEAVE  (Ashley's own tool — see blog-resource-weave.html)
   Node colours come straight from the weave strip in her brand banner.
   ========================================================================== */
.weave{ background:var(--cream-warm); border:1px solid var(--line); border-radius:var(--radius);
        padding:clamp(1rem,3vw,2rem); margin:2rem 0; }
.weave svg{ width:100%; height:auto; }
.weave__legend{ display:flex; flex-wrap:wrap; gap:.9rem 1.75rem; margin-top:1.5rem;
                padding-top:1.35rem; border-top:1px solid var(--line);
                font-size:.86rem; color:var(--ink); }
.weave__legend div{ display:flex; align-items:center; gap:.6rem; }
.weave__legend svg{ width:44px; height:12px; flex:none; }

/* ==========================================================================
   FORM
   ========================================================================== */
.form{ display:grid; gap:1.25rem; }
.form__row{ display:grid; gap:1.25rem; }
@media (min-width:680px){ .form__row{ grid-template-columns:repeat(2,1fr); } }
.field{ display:grid; gap:.45rem; }
.field label{ font-size:.88rem; font-weight:600; color:var(--teal); }
.field .hint{ font-size:.8rem; color:var(--ink-mute); font-weight:400; }
.field input,.field select,.field textarea{
  font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:var(--cream-warm); border:1.5px solid var(--line); border-radius:var(--radius);
  padding:.8rem .95rem; width:100%;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea{ min-height:118px; resize:vertical; line-height:1.6; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--rust); box-shadow:0 0 0 3px rgba(169,76,42,.15);
}
.field select{ appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A94C2A' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .95rem center; background-size:12px;
  padding-right:2.6rem;
}
.form__note{ font-size:.85rem; color:var(--ink-mute); }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.cta{ position:relative; overflow:hidden; text-align:center; }
.cta__inner{ position:relative; z-index:2; max-width:720px; margin-inline:auto; }
.cta__inner p{ margin-inline:auto; }
.cta h1,.cta h2{ font-size:clamp(1.75rem,1.2rem + 2.3vw,2.9rem); margin-bottom:1rem; }
.cta__compass{ width:min(120px,26vw); margin:0 auto 1.75rem; opacity:.95; }
.cta__actions{ display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center; margin-top:2rem; }
.cta__fine{ margin-top:2.1rem; font-size:.85rem; color:var(--ink-mute);
            max-width:52ch; margin-inline:auto; }
.band-ink .cta__fine{ color:rgba(250,239,225,.6); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ background:var(--teal); color:rgba(250,239,225,.66);
         padding-block:clamp(3rem,5.5vw,4.25rem) 2rem; }
.footer a{ color:rgba(250,239,225,.84); }
.footer a:hover{ color:var(--rust-light); text-decoration:none; }
.footer__grid{ display:grid; gap:2.5rem; margin-bottom:2.75rem; }
@media (min-width:760px){ .footer__grid{ grid-template-columns:1.5fr 1fr 1fr; gap:3rem; } }
.footer .brand{ color:var(--cream); margin-bottom:1.1rem; }
.footer .brand__role{ color:rgba(250,239,225,.55); }
.footer__blurb{ font-size:.93rem; max-width:34ch; margin:0; }
.footer h2{ font-family:var(--font-body); font-size:.72rem; font-weight:700; letter-spacing:.16em;
            text-transform:uppercase; color:rgba(250,239,225,.5); margin:0 0 1.1rem; }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.65rem; }
.footer li{ font-size:.93rem; }
.footer__base{ border-top:1px solid var(--line-dark); padding-top:1.85rem;
               display:grid; gap:1.1rem; font-size:.8rem; line-height:1.6; }
@media (min-width:860px){ .footer__base{ grid-template-columns:1fr auto; align-items:start; gap:2.5rem; } }
.footer__disclaimer{ max-width:72ch; color:rgba(250,239,225,.52); margin:0; }

/* ==========================================================================
   SCROLL REVEAL
   Progressive enhancement: `.js` is set by script, so with JS disabled (or in
   a throttled background tab) everything stays visible.
   ========================================================================== */
.js .reveal{ opacity:0; transform:translateY(20px); }
.js .reveal.is-in{ opacity:1; transform:none;
                   transition:opacity .7s var(--ease), transform .7s var(--ease); }
@media (prefers-reduced-motion: reduce){ .js .reveal{ opacity:1; transform:none; } }

/* utilities */
.center{ text-align:center; }
.mt-0{ margin-top:0; }
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ==========================================================================
   MOTION
   ==========================================================================
   Principles, so this stays coherent as the site grows:

   1. Only opacity / transform / clip are animated — never layout properties,
      so nothing triggers reflow while scrolling.
   2. Motion is progressive enhancement. Every animated element is fully
      visible with JS off, and the `.js` guard means a script failure can
      never leave a blank page.
   3. The compass and the resource weave are Ashley's brand marks, so they get
      the character (float, draw-in). Everything else stays restrained — this
      is a coaching site, not a product launch.
   4. prefers-reduced-motion switches everything off, including the ambient
      loops. That is handled once, at the bottom of this section.
   ========================================================================== */

:root{
  --ease-out:  cubic-bezier(.16,.84,.44,1);   /* entrances — decisive, settles fast */
  --ease-soft: cubic-bezier(.37,0,.63,1);     /* ambient loops — symmetrical drift */
}

/* --- scroll reveal (refined) --------------------------------------------- */
.js .reveal{ opacity:0; transform:translateY(24px); }
.js .reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}

/* --- hero / page-hero entrance ------------------------------------------- */
.js [data-seq] > .seq-item,
.js .seq-item{ opacity:0; transform:translateY(18px); }
.js .seq-item.is-in{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}

/* Headline lines rise out of a mask. Vertical padding stops the caps being
   clipped by overflow:hidden at this tight line-height. */
.hero h1 .line{
  display:block; overflow:hidden;
  padding-bottom:.08em; margin-bottom:-.08em;
}
.js .hero h1 .line__inner{
  display:block; transform:translateY(108%);
  transition:transform 1s var(--ease-out);
}
.js .hero h1 .line.is-in .line__inner{ transform:none; }

/* --- the compass: her mark, so it breathes -------------------------------
   Two chained animations: an entrance, then a slow float that takes over the
   transform once the entrance has finished. */
@keyframes compassIn{
  from{ opacity:0; transform:translateY(26px) scale(.93) rotate(-6deg); }
  to  { opacity:1; transform:none; }
}
@keyframes compassFloat{
  0%,100%{ transform:translateY(0)      rotate(-1.4deg); }
  50%    { transform:translateY(-13px)  rotate(1.4deg); }
}
.js .hero__compass{
  opacity:0;
  animation:compassIn .95s var(--ease-out) .35s forwards,
            compassFloat 7s var(--ease-soft) 1.5s infinite;
}
.js .cta__compass{ animation:compassFloat 8s var(--ease-soft) infinite; }

/* --- ambient background drift -------------------------------------------- */
@keyframes blobDrift{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%    { transform:translate(3%,2.5%) scale(1.07); }
}
.js .hero__blob{ animation:blobDrift 20s var(--ease-soft) infinite; }

/* --- nav ------------------------------------------------------------------ */
.nav__inner{ transition:min-height .32s var(--ease-out); }
.nav.is-stuck .nav__inner{ min-height:62px; }
.brand__mark{ transition:transform .55s var(--ease-out); }
.brand:hover .brand__mark{ transform:rotate(20deg); }

/* --- cards ---------------------------------------------------------------- */
.card__icon,.svc__price{ transition:transform .35s var(--ease-out); }
.card:hover .card__icon{ transform:translateY(-3px) scale(1.07); }
.svc:hover .svc__price{ transform:translateY(-2px); }
.btn--primary{ box-shadow:0 0 0 0 rgba(169,76,42,0); }
.btn--primary:hover{ box-shadow:0 12px 26px -14px rgba(169,76,42,.8); }
.post-card__media img,.post-card__media svg{ transition:transform .6s var(--ease-out); }
.post-card:hover .post-card__media img,
.post-card:hover .post-card__media svg{ transform:scale(1.04); }

/* --- numbered steps: the rule draws across as each step arrives ----------- */
.js .step{ position:relative; }
.js .step::after{
  content:""; position:absolute; top:-1px; left:0; right:0; height:2px;
  background:var(--rust); transform:scaleX(0); transform-origin:left;
  transition:transform 1s var(--ease-out) .1s;
}
.js .step.is-in::after{ transform:scaleX(1); }

/* --- FAQ ------------------------------------------------------------------ */
@keyframes faqIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.faq details[open] .faq__body{ animation:faqIn .32s var(--ease-out) both; }

/* --- resource weave: edges draw, then nodes land -------------------------- */
.js .weave [data-edge]{ stroke-dashoffset:var(--len); stroke-dasharray:var(--len); }
.js .weave.is-drawn [data-edge]{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 1.1s var(--ease-out) var(--d,0ms);
}
.js .weave [data-node]{
  opacity:0; transform:scale(.7);
  transform-box:fill-box; transform-origin:center;
}
.js .weave.is-drawn [data-node]{
  opacity:1; transform:none;
  transition:opacity .5s var(--ease-out) var(--d,0ms),
             transform .6s var(--ease-out) var(--d,0ms);
}
.js .weave [data-core]{
  opacity:0; transform:scale(.6);
  transform-box:fill-box; transform-origin:center;
}
.js .weave.is-drawn [data-core]{
  opacity:1; transform:none;
  transition:opacity .5s var(--ease-out), transform .7s var(--ease-out);
}

/* --- reading progress (article pages only) -------------------------------- */
.progress{
  position:fixed; top:0; left:0; height:3px; width:100%;
  transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,var(--rust),var(--mustard));
  z-index:150; pointer-events:none;
}

/* --- hard off-switch ------------------------------------------------------
   `.motion-off` on <html> forces every animated element to its final state
   with transitions disabled. Two uses:
     - a last-resort fallback if the motion machinery ever fails to run, so a
       visitor can never be left looking at opacity:0 content;
     - a stable target for screenshot/visual testing, since transitions do not
       advance in a backgrounded tab.
   ------------------------------------------------------------------------- */
.motion-off .reveal,
.motion-off .seq-item,
.motion-off .hero h1 .line__inner,
.motion-off .weave [data-edge],
.motion-off .weave [data-node],
.motion-off .weave [data-core]{
  opacity:1 !important; transform:none !important;
  stroke-dashoffset:0 !important; transition:none !important;
}
.motion-off .hero__compass,
.motion-off .cta__compass,
.motion-off .hero__blob{ opacity:1 !important; animation:none !important; }
.motion-off .step::after{ transform:scaleX(1) !important; transition:none !important; }

/* --- reduced motion: switch the whole system off -------------------------- */
@media (prefers-reduced-motion: reduce){
  .js .reveal,
  .js .seq-item,
  .js .hero h1 .line__inner,
  .js .weave [data-edge],
  .js .weave [data-node],
  .js .weave [data-core]{
    opacity:1 !important; transform:none !important; stroke-dashoffset:0 !important;
  }
  .js .hero__compass,.js .cta__compass,.js .hero__blob{ animation:none !important; opacity:1 !important; }
  .js .step::after{ transform:scaleX(1) !important; }
  .progress{ display:none; }
}