/* =========================================================================
   Hearthlight — inner-child & trauma-informed wellbeing studio
   Design system: Fraunces (display serif) + DM Sans (humanist sans)
   Palette: aubergine-night base, warm "dawn" mesh (coral / apricot / lilac / sage)
   ========================================================================= */

:root{
  /* Dawn palette */
  --night:        #1c1626;   /* deep aubergine base text/dark sections */
  --night-2:      #271f33;
  --plum-deep:    #2c2138;
  --ink:          #211a2c;

  --paper:        #fbf6f2;   /* warm off-white surface */
  --paper-2:      #f4ece6;
  --paper-edge:   #ece0d8;

  --coral:        #ef9b7e;   /* dawn coral */
  --coral-deep:   #d9744f;
  --apricot:      #f4c79b;
  --lilac:        #c8bbe6;
  --lilac-deep:   #8f7bc4;
  --sage:         #9bb89a;
  --sage-deep:    #5f7d63;

  --accent:       #c8623f;   /* locked single accent: terracotta-rose (warm, high-contrast on paper) */
  --accent-soft:  #e89b7d;
  --accent-ink:   #fbf6f2;   /* text on accent */

  --text:         #2b2230;
  --text-soft:    #5d5366;
  --text-muted:   #8a7f92;
  --text-onnight: #f3ebe6;
  --text-onnight-soft: #c9bcc9;

  --line:         #e6dcd5;
  --line-night:   rgba(243,235,230,.14);

  --radius:       18px;
  --radius-sm:    12px;
  --radius-lg:    28px;
  --maxw:         1180px;
  --gutter:       clamp(1.2rem, 4vw, 2.6rem);

  --shadow-sm:    0 1px 2px rgba(44,33,56,.05), 0 6px 16px -8px rgba(44,33,56,.16);
  --shadow:       0 2px 6px rgba(44,33,56,.06), 0 24px 48px -22px rgba(44,33,56,.30);
  --shadow-night: 0 30px 70px -30px rgba(0,0,0,.55);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ease:         cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--paper);
  line-height:1.65;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ---------- Typography ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:560;
  line-height:1.08;
  letter-spacing:-.012em;
  color:var(--text);
  margin:0 0 .55em;
  font-optical-sizing:auto;
}
h1{ font-size:clamp(2.5rem,1.7rem + 4vw,4.6rem); font-weight:540; letter-spacing:-.02em; }
h2{ font-size:clamp(1.9rem,1.4rem + 2.4vw,3.05rem); }
h3{ font-size:clamp(1.3rem,1.1rem + 1vw,1.7rem); }
h4{ font-size:1.15rem; }
p{ margin:0 0 1.1rem; }
a{ color:var(--accent); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--coral-deep); }
em,i{ font-style:italic; }
strong{ font-weight:600; }
.italic-serif{ font-family:var(--font-display); font-style:italic; font-weight:480; }

/* ---------- Layout helpers ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-narrow{ max-width:780px; }
section{ position:relative; }
.section-pad{ padding-block:clamp(4.5rem,3rem + 7vw,9rem); }
.section-pad-sm{ padding-block:clamp(3rem,2rem + 4vw,5.5rem); }
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-body); font-size:.74rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.18em; color:var(--accent);
  margin:0 0 1.1rem;
}
.eyebrow::before{ content:""; width:1.8rem; height:1px; background:currentColor; opacity:.7; }
.lead{ font-size:clamp(1.12rem,1rem + .6vw,1.4rem); color:var(--text-soft); line-height:1.55; max-width:54ch; }
.skip-link{
  position:absolute; left:-999px; top:.5rem; z-index:200;
  background:var(--night); color:#fff; padding:.6rem 1rem; border-radius:8px;
}
.skip-link:focus{ left:.8rem; }

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--accent); --fg:var(--accent-ink);
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-body); font-weight:600; font-size:.98rem;
  padding:.92rem 1.55rem; border-radius:999px;
  background:var(--bg); color:var(--fg); border:1px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .25s, color .25s;
  box-shadow:0 10px 24px -12px rgba(200,98,63,.7);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 18px 34px -14px rgba(200,98,63,.75); color:var(--accent-ink); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn-ghost{
  --bg:transparent; --fg:var(--text);
  border-color:var(--line); box-shadow:none; background:rgba(255,255,255,.4);
}
.btn-ghost:hover{ --fg:var(--text); border-color:var(--accent); background:rgba(255,255,255,.75); box-shadow:none; }
.btn-onnight{ --bg:var(--paper); --fg:var(--night); box-shadow:0 14px 30px -14px rgba(0,0,0,.6); }
.btn-onnight:hover{ --fg:var(--night); }
.btn-ghost-night{
  --bg:transparent; --fg:var(--text-onnight); border-color:var(--line-night); box-shadow:none;
}
.btn-ghost-night:hover{ --fg:var(--text-onnight); border-color:var(--coral); background:rgba(255,255,255,.06); }
.arrow{ transition:transform .3s var(--ease); }
.btn:hover .arrow{ transform:translateX(3px); }

:focus-visible{ outline:3px solid var(--lilac-deep); outline-offset:3px; border-radius:4px; }
.btn:focus-visible{ outline-offset:4px; }

/* =========================================================================
   HEADER / NAV
   ========================================================================= */
.site-header{
  position:sticky; top:0; z-index:100;
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  background:rgba(251,246,242,.78);
  border-bottom:1px solid transparent;
  transition:background .3s, border-color .3s, box-shadow .3s;
}
.site-header.is-scrolled{
  background:rgba(251,246,242,.92);
  border-bottom-color:var(--line);
  box-shadow:0 10px 30px -24px rgba(44,33,56,.5);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:72px; gap:1.5rem; }
.brand{ display:inline-flex; align-items:center; gap:.62rem; text-decoration:none; color:var(--text); flex-shrink:0; }
.brand:hover{ color:var(--text); }
.brand-mark{ width:34px; height:34px; flex:0 0 34px; }
.brand-name{ font-family:var(--font-display); font-weight:600; font-size:1.32rem; letter-spacing:-.01em; }
.brand-name span{ color:var(--accent); }
.nav-links{ display:flex; align-items:center; gap:.4rem; list-style:none; margin:0; padding:0; }
.nav-links a{
  font-family:var(--font-body); font-weight:500; font-size:.96rem; color:var(--text-soft);
  text-decoration:none; padding:.5rem .8rem; border-radius:999px; transition:color .2s, background .2s;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--text); background:rgba(200,98,63,.08); }
.nav-cta{ display:flex; align-items:center; gap:.8rem; flex-shrink:0; }
.nav-toggle{ display:none; }

@media (max-width:920px){
  .nav-cta .btn{ display:none; }
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:46px; height:46px; border:1px solid var(--line); background:rgba(255,255,255,.5);
    border-radius:12px; cursor:pointer; color:var(--text);
  }
  .nav-toggle svg{ width:22px; height:22px; }
  .nav-links{
    position:fixed; inset:72px 0 auto 0; flex-direction:column; align-items:stretch; gap:.2rem;
    background:var(--paper); padding:1rem var(--gutter) 1.6rem; border-bottom:1px solid var(--line);
    box-shadow:var(--shadow); transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:transform .3s var(--ease), opacity .3s;
  }
  .nav-links.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav-links a{ padding:.85rem .6rem; font-size:1.08rem; border-radius:10px; }
  .nav-links li:last-child a{ background:var(--accent); color:var(--accent-ink); text-align:center; margin-top:.5rem; }
}

/* =========================================================================
   HERO — animated dawn mesh
   ========================================================================= */
.hero{
  position:relative; overflow:hidden; color:var(--text-onnight);
  background:var(--night);
  isolation:isolate;
}
.hero-mesh{ position:absolute; inset:-20% -10%; z-index:-2; filter:blur(8px); }
.hero-mesh span{
  position:absolute; border-radius:50%; opacity:.85; mix-blend-mode:screen;
  filter:blur(60px);
  animation:drift 22s ease-in-out infinite;
  will-change:transform;
}
.blob-1{ width:46vw; height:46vw; left:-6vw; top:-8vw; background:radial-gradient(circle at 30% 30%, var(--coral), transparent 68%); }
.blob-2{ width:42vw; height:42vw; right:-4vw; top:4vw; background:radial-gradient(circle at 50% 50%, var(--lilac-deep), transparent 66%); animation-delay:-7s; animation-duration:26s; }
.blob-3{ width:40vw; height:40vw; left:24vw; bottom:-16vw; background:radial-gradient(circle at 50% 50%, var(--apricot), transparent 64%); animation-delay:-13s; animation-duration:30s; }
.blob-4{ width:30vw; height:30vw; right:14vw; bottom:-10vw; background:radial-gradient(circle at 50% 50%, var(--sage-deep), transparent 66%); animation-delay:-4s; animation-duration:24s; }
.hero-grain{
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero::after{ /* gentle vignette to keep text legible */
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(28,22,38,.34) 0%, rgba(28,22,38,.06) 38%, rgba(28,22,38,.5) 100%);
}
@keyframes drift{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(4%,5%) scale(1.08); }
  66%{ transform:translate(-3%,-4%) scale(.95); }
}

.hero-inner{ padding-block:clamp(5rem,3.5rem + 9vw,9rem) clamp(4rem,3rem + 6vw,7rem); position:relative; }
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,4vw,4.5rem); align-items:center; }
.hero h1{ color:#fff; font-weight:480; max-width:13ch; }
.hero h1 .accent-word{ font-style:italic; font-weight:420; color:var(--apricot); }
.hero .eyebrow{ color:var(--apricot); }
.hero .eyebrow::before{ background:var(--apricot); }
.hero-sub{ color:var(--text-onnight-soft); font-size:clamp(1.08rem,1rem + .5vw,1.3rem); max-width:46ch; margin:1.4rem 0 2rem; line-height:1.55; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; }
.hero-note{ margin:1.6rem 0 0; font-size:.9rem; color:var(--text-onnight-soft); display:flex; align-items:center; gap:.5rem; }
.hero-figure{ position:relative; }
.hero-figure img{
  width:100%; height:clamp(340px,42vw,520px); object-fit:cover;
  border-radius:var(--radius-lg); box-shadow:var(--shadow-night);
  border:1px solid rgba(255,255,255,.1);
}
.hero-card{
  position:absolute; left:-1.5rem; bottom:-1.5rem;
  background:rgba(251,246,242,.94); color:var(--text); backdrop-filter:blur(8px);
  border-radius:var(--radius); padding:1.05rem 1.25rem; box-shadow:var(--shadow);
  max-width:260px; display:flex; gap:.85rem; align-items:flex-start;
  border:1px solid rgba(255,255,255,.5);
}
.hero-card .dot{ width:10px; height:10px; border-radius:50%; background:var(--sage); margin-top:.45rem; flex:0 0 10px; box-shadow:0 0 0 4px rgba(155,184,154,.25); }
.hero-card strong{ display:block; font-family:var(--font-display); font-size:1.05rem; font-weight:560; }
.hero-card span{ font-size:.86rem; color:var(--text-soft); }

@media (max-width:860px){
  .hero-grid{ grid-template-columns:1fr; gap:2.8rem; }
  .hero h1{ max-width:18ch; }
  .hero-figure img{ height:340px; }
  .hero-card{ left:.6rem; bottom:-1.2rem; }
}

/* =========================================================================
   STATS BAR
   ========================================================================= */
.stats{ background:var(--paper); border-block:1px solid var(--line); }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); }
.stat{ background:var(--paper); padding:clamp(1.6rem,1rem + 2vw,2.6rem) clamp(1rem,2vw,1.8rem); text-align:left; }
.stat-value{ font-family:var(--font-display); font-size:clamp(1.7rem,1.3rem + 1.6vw,2.5rem); font-weight:560; color:var(--accent); line-height:1; letter-spacing:-.02em; }
.stat-label{ margin-top:.5rem; font-size:.9rem; color:var(--text-soft); line-height:1.4; }
@media (max-width:680px){ .stats-grid{ grid-template-columns:repeat(2,1fr); } }

/* =========================================================================
   GENERIC SECTION HEADERS
   ========================================================================= */
.sec-head{ max-width:60ch; margin-bottom:clamp(2.2rem,1.5rem + 2vw,3.4rem); }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head.center .lead{ margin-inline:auto; }

/* =========================================================================
   APPROACH / WHY-TRUST  (asymmetric cards)
   ========================================================================= */
.approach{ background:var(--paper-2); }
.approach-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.approach-card{
  background:var(--paper); border-radius:var(--radius); padding:2rem 1.7rem;
  border:1px solid var(--line); box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
}
.approach-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg,var(--coral),var(--apricot),var(--lilac));
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease);
}
.approach-card:hover::before{ transform:scaleX(1); }
.approach-icon{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center; margin-bottom:1.1rem;
  background:linear-gradient(140deg, rgba(239,155,126,.22), rgba(200,187,230,.22));
  color:var(--accent);
}
.approach-icon svg{ width:26px; height:26px; }
.approach-card h3{ margin-bottom:.5rem; }
.approach-card p{ color:var(--text-soft); margin:0; font-size:.99rem; }
@media (max-width:820px){ .approach-grid{ grid-template-columns:1fr; } }

/* =========================================================================
   SERVICES / "WAYS WE HELP" — split alternating
   ========================================================================= */
.svc{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,4.5rem); align-items:center; }
.svc + .svc{ margin-top:clamp(3.5rem,2.5rem + 4vw,6.5rem); }
.svc:nth-child(even) .svc-media{ order:2; }
.svc-media{ position:relative; }
.svc-media img{ width:100%; height:clamp(300px,34vw,440px); object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow); }
.svc-tag{
  position:absolute; top:1rem; left:1rem; background:rgba(251,246,242,.92); backdrop-filter:blur(6px);
  font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--accent);
  padding:.42rem .85rem; border-radius:999px; box-shadow:var(--shadow-sm);
}
.svc-body h3{ font-size:clamp(1.6rem,1.2rem + 1.4vw,2.2rem); }
.svc-list{ list-style:none; margin:1.3rem 0 1.6rem; padding:0; display:grid; gap:.7rem; }
.svc-list li{ display:flex; gap:.7rem; align-items:flex-start; color:var(--text-soft); }
.svc-list svg{ width:20px; height:20px; color:var(--sage-deep); flex:0 0 20px; margin-top:.2rem; }
.link-arrow{ display:inline-flex; align-items:center; gap:.45rem; font-weight:600; text-decoration:none; }
.link-arrow:hover{ gap:.7rem; }
@media (max-width:820px){
  .svc{ grid-template-columns:1fr; gap:1.8rem; }
  .svc:nth-child(even) .svc-media{ order:0; }
  .svc-media img{ height:300px; }
}

/* =========================================================================
   QUOTE / FOUNDER NOTE band (night)
   ========================================================================= */
.band-night{ background:var(--night); color:var(--text-onnight); position:relative; overflow:hidden; }
.band-night::before{
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:radial-gradient(70% 120% at 15% 0%, rgba(239,155,126,.22), transparent 60%),
             radial-gradient(60% 120% at 100% 100%, rgba(143,123,196,.25), transparent 60%);
}
.band-night .wrap{ position:relative; }
.pullquote{ font-family:var(--font-display); font-weight:440; font-style:italic; font-size:clamp(1.6rem,1.2rem + 2vw,2.7rem); line-height:1.28; color:#fff; max-width:24ch; letter-spacing:-.01em; }
.pullquote .markq{ color:var(--coral); }
.band-sign{ margin-top:1.8rem; display:flex; align-items:center; gap:.9rem; color:var(--text-onnight-soft); }
.band-sign .avatar{ width:48px; height:48px; border-radius:50%; background:linear-gradient(140deg,var(--coral),var(--lilac-deep)); display:grid; place-items:center; font-family:var(--font-display); font-weight:600; color:#fff; }
.band-sign b{ color:#fff; font-weight:600; display:block; font-size:1rem; }
.band-sign span{ font-size:.88rem; }

/* =========================================================================
   TESTIMONIALS
   ========================================================================= */
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.testi{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem 1.6rem;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:1.1rem;
}
.testi .stars{ display:flex; gap:.18rem; color:var(--coral-deep); }
.testi .stars svg{ width:18px; height:18px; }
.testi blockquote{ margin:0; font-family:var(--font-display); font-size:1.18rem; line-height:1.45; font-weight:440; color:var(--text); font-style:normal; }
.testi figcaption{ display:flex; align-items:center; gap:.75rem; margin-top:auto; }
.testi .av{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-weight:600; font-size:.95rem; color:#fff; }
.testi .av.a{ background:linear-gradient(140deg,var(--coral),var(--coral-deep)); }
.testi .av.b{ background:linear-gradient(140deg,var(--lilac),var(--lilac-deep)); }
.testi .av.c{ background:linear-gradient(140deg,var(--sage),var(--sage-deep)); }
.testi cite{ font-style:normal; }
.testi cite b{ display:block; font-weight:600; color:var(--text); }
.testi cite span{ font-size:.85rem; color:var(--text-muted); }
@media (max-width:820px){ .testi-grid{ grid-template-columns:1fr; } }

/* =========================================================================
   INSIGHTS (homepage small) + blog cards
   ========================================================================= */
.insights{ background:var(--paper-2); }
.insights-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-bottom:2.4rem; }
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:1.6rem; }
.card{
  display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; text-decoration:none; color:inherit;
  box-shadow:var(--shadow-sm); transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--paper-edge); color:inherit; }
.card-media{ aspect-ratio:16/10; overflow:hidden; background:var(--paper-2); }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.card:hover .card-media img{ transform:scale(1.05); }
.card-body{ padding:1.4rem 1.4rem 1.6rem; display:flex; flex-direction:column; gap:.7rem; flex:1; }
.card-meta{ display:flex; align-items:center; gap:.7rem; font-size:.78rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; font-weight:600; }
.pill{ color:var(--accent); }
.card h3{ font-size:1.28rem; margin:0; line-height:1.18; }
.card p{ color:var(--text-soft); font-size:.95rem; margin:0; }
.card-more{ margin-top:auto; padding-top:.4rem; font-weight:600; color:var(--accent); display:inline-flex; gap:.4rem; align-items:center; }
.card:hover .card-more{ gap:.6rem; }

/* featured insight (first card spans) */
.insights-feature{ display:grid; grid-template-columns:1.1fr .9fr; gap:1.6rem; margin-bottom:1.6rem; }
.insights-feature .card{ flex-direction:row; }
.insights-feature .card .card-media{ aspect-ratio:auto; width:46%; min-height:260px; }
.insights-feature .card .card-media img{ height:100%; }
.feature-side{ display:flex; flex-direction:column; gap:1.6rem; }
.feature-side .card{ flex-direction:row; }
.feature-side .card .card-media{ aspect-ratio:auto; width:40%; min-height:0; }
@media (max-width:860px){
  .insights-feature{ grid-template-columns:1fr; }
  .insights-feature .card, .feature-side .card{ flex-direction:column; }
  .insights-feature .card .card-media, .feature-side .card .card-media{ width:100%; aspect-ratio:16/10; min-height:0; }
}

/* =========================================================================
   RESOURCES / BLOGROLL  (homepage dofollow section)
   ========================================================================= */
.resources{ background:var(--paper); }
.resource-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.1rem; margin-top:2rem; }
.resource{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.15rem 1.3rem; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--paper); text-decoration:none; color:var(--text);
  transition:border-color .25s, transform .3s var(--ease), background .25s;
}
.resource:hover{ border-color:var(--accent); transform:translateY(-3px); background:var(--paper-2); color:var(--text); }
.resource b{ font-family:var(--font-display); font-weight:560; font-size:1.05rem; display:block; }
.resource span{ font-size:.84rem; color:var(--text-muted); }
.resource svg{ width:20px; height:20px; color:var(--accent); flex:0 0 20px; }

/* =========================================================================
   CTA band
   ========================================================================= */
.cta-band{ position:relative; overflow:hidden; background:var(--night); color:var(--text-onnight); }
.cta-band .mesh{ position:absolute; inset:0; z-index:0; opacity:.9; }
.cta-band .mesh span{ position:absolute; border-radius:50%; filter:blur(70px); mix-blend-mode:screen; }
.cta-band .m1{ width:30vw; height:30vw; left:-5vw; top:-10vw; background:radial-gradient(circle,var(--coral),transparent 70%); }
.cta-band .m2{ width:34vw; height:34vw; right:-8vw; bottom:-14vw; background:radial-gradient(circle,var(--lilac-deep),transparent 70%); }
.cta-inner{ position:relative; z-index:1; text-align:center; max-width:680px; margin-inline:auto; }
.cta-inner h2{ color:#fff; }
.cta-inner p{ color:var(--text-onnight-soft); font-size:1.15rem; max-width:46ch; margin-inline:auto; }
.cta-actions{ margin-top:2rem; display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer{ background:var(--ink); color:var(--text-onnight-soft); padding-block:clamp(3rem,2rem + 3vw,4.5rem) 2rem; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem; padding-bottom:2.5rem; border-bottom:1px solid var(--line-night); }
.footer-brand .brand-name{ color:#fff; }
.footer-brand p{ margin:1rem 0 0; max-width:34ch; font-size:.94rem; }
.footer-col h4{ color:#fff; font-family:var(--font-body); font-size:.82rem; text-transform:uppercase; letter-spacing:.14em; font-weight:600; margin:0 0 1rem; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.footer-col a{ color:var(--text-onnight-soft); text-decoration:none; font-size:.95rem; transition:color .2s; }
.footer-col a:hover{ color:var(--coral); }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:1.6rem; font-size:.85rem; }
.footer-bottom a{ color:var(--text-onnight-soft); }
@media (max-width:780px){ .footer-top{ grid-template-columns:1fr 1fr; } .footer-brand{ grid-column:1/-1; } }

/* =========================================================================
   ABOUT / TEAM / VALUES
   ========================================================================= */
.split-feature{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,4.5rem); align-items:center; }
.split-feature img{ width:100%; height:clamp(360px,40vw,520px); object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow); }
@media (max-width:820px){ .split-feature{ grid-template-columns:1fr; } }

.values-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.value{ padding:1.6rem 1.4rem; border-radius:var(--radius); background:var(--paper); border:1px solid var(--line); }
.value .num{ font-family:var(--font-display); font-size:1rem; color:var(--accent); font-weight:600; }
.value h4{ margin:.5rem 0 .4rem; font-size:1.15rem; }
.value p{ margin:0; font-size:.93rem; color:var(--text-soft); }
@media (max-width:900px){ .values-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .values-grid{ grid-template-columns:1fr; } }

.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.member{ text-align:left; }
.member .av{ width:72px; height:72px; border-radius:20px; display:grid; place-items:center; font-family:var(--font-display); font-size:1.6rem; font-weight:600; color:#fff; margin-bottom:1rem; }
.member .av.a{ background:linear-gradient(140deg,var(--coral),var(--coral-deep)); }
.member .av.b{ background:linear-gradient(140deg,var(--lilac),var(--lilac-deep)); }
.member .av.c{ background:linear-gradient(140deg,var(--sage),var(--sage-deep)); }
.member h4{ margin:0; font-size:1.2rem; }
.member .role{ color:var(--accent); font-size:.88rem; font-weight:600; margin:.2rem 0 .7rem; }
.member p{ color:var(--text-soft); font-size:.94rem; margin:0; }
@media (max-width:820px){ .team-grid{ grid-template-columns:1fr; gap:1.8rem; } }

/* =========================================================================
   FAQ
   ========================================================================= */
.faq{ max-width:820px; margin-inline:auto; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.4rem 0; font-family:var(--font-display); font-size:1.22rem; font-weight:520; color:var(--text);
}
.faq-q:hover{ color:var(--accent); }
.faq-icon{ flex:0 0 24px; width:24px; height:24px; transition:transform .35s var(--ease); color:var(--accent); }
.faq-q[aria-expanded="true"] .faq-icon{ transform:rotate(45deg); }
.faq-a{ overflow:hidden; max-height:0; transition:max-height .4s var(--ease); }
.faq-a-inner{ padding:0 0 1.4rem; color:var(--text-soft); max-width:64ch; }

/* =========================================================================
   CONTACT
   ========================================================================= */
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,4vw,4rem); align-items:start; }
.contact-info .info-item{ display:flex; gap:.9rem; padding:1.1rem 0; border-bottom:1px solid var(--line); }
.contact-info .info-item:last-child{ border-bottom:0; }
.contact-info svg{ width:22px; height:22px; color:var(--accent); flex:0 0 22px; margin-top:.2rem; }
.contact-info b{ display:block; font-family:var(--font-display); font-size:1.05rem; }
.contact-info a{ color:var(--text-soft); text-decoration:none; }
.contact-info a:hover{ color:var(--accent); }
.contact-info span{ color:var(--text-soft); font-size:.95rem; }
.form-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(1.6rem,1rem + 2vw,2.6rem); box-shadow:var(--shadow); }
.field{ margin-bottom:1.3rem; }
.field label{ display:block; font-weight:600; font-size:.92rem; margin-bottom:.5rem; color:var(--text); }
.field input, .field textarea{
  width:100%; font-family:inherit; font-size:1rem; color:var(--text);
  padding:.85rem 1rem; border:1px solid var(--line); border-radius:12px; background:#fff;
  transition:border-color .2s, box-shadow .2s;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--text-muted); }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(200,98,63,.16); }
.field textarea{ resize:vertical; min-height:140px; }
.form-card .btn{ width:100%; justify-content:center; }
.form-note{ font-size:.84rem; color:var(--text-muted); margin-top:1rem; text-align:center; }
.form-success{
  display:none; margin-top:1.1rem; padding:.9rem 1.1rem; border-radius:12px;
  background:rgba(155,184,154,.18); border:1px solid var(--sage); color:var(--sage-deep); font-size:.95rem;
}
.form-success.show{ display:block; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }

/* =========================================================================
   PAGE HERO (interior)
   ========================================================================= */
.page-hero{ background:var(--night); color:var(--text-onnight); position:relative; overflow:hidden; }
.page-hero::before{
  content:""; position:absolute; inset:0; opacity:.8; pointer-events:none;
  background:radial-gradient(60% 130% at 12% -10%, rgba(239,155,126,.3), transparent 55%),
             radial-gradient(70% 130% at 100% 120%, rgba(143,123,196,.3), transparent 55%);
}
.page-hero .wrap{ position:relative; padding-block:clamp(4rem,3rem + 5vw,7rem) clamp(3rem,2rem + 3vw,4.5rem); }
.page-hero .eyebrow{ color:var(--apricot); }
.page-hero .eyebrow::before{ background:var(--apricot); }
.page-hero h1{ color:#fff; max-width:18ch; }
.page-hero p{ color:var(--text-onnight-soft); font-size:clamp(1.05rem,1rem + .5vw,1.3rem); max-width:54ch; margin-top:1rem; }
.crumbs{ font-size:.85rem; color:var(--text-onnight-soft); margin-bottom:1.4rem; }
.crumbs a{ color:var(--text-onnight-soft); text-decoration:none; }
.crumbs a:hover{ color:var(--coral); }

/* =========================================================================
   ARTICLE
   ========================================================================= */
.article-wrap{ max-width:760px; margin-inline:auto; }
.article-hero-img{ width:100%; height:clamp(280px,34vw,440px); object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow); margin-bottom:clamp(2rem,3vw,3rem); }
.prose{ font-size:1.08rem; line-height:1.72; color:var(--text); }
.prose > p:first-of-type{ font-size:1.2rem; color:var(--text); line-height:1.6; }
.prose h2{ font-size:clamp(1.5rem,1.2rem + 1.4vw,2rem); margin:2.4rem 0 .9rem; }
.prose h3{ font-size:clamp(1.2rem,1rem + .8vw,1.5rem); margin:1.9rem 0 .7rem; }
.prose p{ margin:0 0 1.2rem; }
.prose a{ color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(200,98,63,.4); }
.prose a:hover{ text-decoration-color:var(--accent); }
.prose ul, .prose ol{ margin:0 0 1.4rem; padding-left:1.3rem; }
.prose li{ margin-bottom:.55rem; }
.prose ul li::marker{ color:var(--accent); }
.prose img{ width:100%; height:auto; border-radius:var(--radius); margin:1.6rem 0; box-shadow:var(--shadow-sm); }
.prose blockquote{
  margin:1.8rem 0; padding:1.2rem 1.5rem; border-left:3px solid var(--accent);
  background:var(--paper-2); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-family:var(--font-display); font-style:italic; font-size:1.15rem; color:var(--text);
}
.prose blockquote p{ margin:0; }
.prose table{ width:100%; border-collapse:collapse; margin:1.6rem 0; font-size:.95rem; }
.prose th, .prose td{ text-align:left; padding:.75rem .9rem; border:1px solid var(--line); vertical-align:top; }
.prose th{ background:var(--paper-2); font-family:var(--font-body); font-weight:600; color:var(--text); }
.prose figure{ margin:1.6rem 0; }
.prose section{ margin-top:1.5rem; }
.article-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.2rem; margin-bottom:1.6rem; color:var(--text-soft); font-size:.92rem; }
.article-meta .pill{ font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:.76rem; }
.article-meta .sep{ width:4px; height:4px; border-radius:50%; background:var(--text-muted); }

.share-row{ display:flex; align-items:center; gap:.7rem; margin:2.5rem 0; padding-top:1.8rem; border-top:1px solid var(--line); flex-wrap:wrap; }
.share-row span{ font-weight:600; font-size:.92rem; }
.tag{ font-size:.82rem; padding:.35rem .8rem; border-radius:999px; background:var(--paper-2); border:1px solid var(--line); color:var(--text-soft); text-decoration:none; }
.tag:hover{ border-color:var(--accent); color:var(--accent); }

.article-source{
  margin:2.4rem 0; padding:1.4rem 1.6rem; border-radius:var(--radius);
  background:linear-gradient(135deg, rgba(239,155,126,.1), rgba(200,187,230,.1));
  border:1px solid var(--line);
}
.article-source h4{ margin:0 0 .4rem; font-size:1rem; font-family:var(--font-body); text-transform:uppercase; letter-spacing:.1em; color:var(--text-soft); }
.article-source ul{ margin:.4rem 0 0; padding-left:1.2rem; }
.article-source a{ font-weight:600; }

/* related */
.related{ background:var(--paper-2); }

/* =========================================================================
   REVEAL ANIMATIONS
   ========================================================================= */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); will-change:opacity,transform; }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal-stagger] > *{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal-stagger].in > *{ opacity:1; transform:none; }
[data-reveal-stagger].in > *:nth-child(1){ transition-delay:.04s; }
[data-reveal-stagger].in > *:nth-child(2){ transition-delay:.12s; }
[data-reveal-stagger].in > *:nth-child(3){ transition-delay:.2s; }
[data-reveal-stagger].in > *:nth-child(4){ transition-delay:.28s; }
[data-reveal-stagger].in > *:nth-child(5){ transition-delay:.36s; }
[data-reveal-stagger].in > *:nth-child(6){ transition-delay:.44s; }

/* hero load-in */
.hero [data-hero]{ opacity:0; transform:translateY(30px); }
.hero.loaded [data-hero]{ animation:heroIn .9s var(--ease) forwards; }
.hero.loaded [data-hero="1"]{ animation-delay:.1s; }
.hero.loaded [data-hero="2"]{ animation-delay:.22s; }
.hero.loaded [data-hero="3"]{ animation-delay:.34s; }
.hero.loaded [data-hero="4"]{ animation-delay:.46s; }
.hero.loaded [data-hero="5"]{ animation-delay:.6s; }
@keyframes heroIn{ to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .hero-mesh span{ animation:none; }
  [data-reveal], [data-reveal-stagger] > *{ opacity:1 !important; transform:none !important; }
  .hero [data-hero]{ opacity:1 !important; transform:none !important; }
}