/* =========================================================
   Asha Goldstein, LCSW — site stylesheet
   Palette (Goldenrod-inspired: user's chosen colors):
     --lilac     #DAAEC8  pink-lilac
     --coral     #E49670  peach coral
     --sage      #9AA791  sage green
     --goldenrod #D3A747  goldenrod
     --stone     #FBF6EE  background, bright linen white
     --ink       #43302B  body text (warm dark brown)
     --paper     #FFFDF8  brightest warm white
   Type:
     Display: 'Young Serif' (soft rounded serif)
     Body:    'Poppins' (friendly geometric sans)
     Accent italic: 'Fraunces' italic (pull quotes)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Young+Serif&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Fraunces:ital,opsz,wght@1,9..144,400;1,9..144,500&display=swap');

:root{
  --lilac:#DAAEC8;
  --lilac-soft:#EDD3E2;
  --coral:#E49670;
  --coral-soft:#F3C6AC;
  --sage:#9AA791;
  --sage-soft:#C8D1BF;
  --goldenrod:#D3A747;
  --gold-soft:#EBD29A;

  --stone:#FBF6EE;
  --stone-deep:#F4EADC;
  --mist:#F6E9E4;
  --juniper:#43302B;
  --juniper-deep:#332420;
  --ink:#43302B;
  --ink-soft:#7A5D52;
  --ember:#E49670;
  --ember-deep:#BE5E36;
  --plum:#57212E;
  --gold:#D3A747;
  --pink:#DAAEC8;
  --pink-soft:#EDD3E2;
  --line:rgba(67,48,43,0.15);
  --paper:#FFFDF8;

  --max:1140px;
  --gutter:clamp(1.25rem, 4vw, 3rem);
  --radius:2px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

body{
  margin:0;
  background:var(--stone);
  color:var(--ink);
  font-family:'Poppins', system-ui, sans-serif;
  font-weight:400;
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:'Young Serif', Georgia, serif;
  font-weight:400;
  line-height:1.2;
  margin:0 0 0.5em;
  color:var(--juniper-deep);
  letter-spacing:0;
}

h1{font-size:clamp(2.2rem, 4.6vw, 3.3rem); font-weight:400;}
h2{font-size:clamp(1.65rem, 3.1vw, 2.3rem);}
h3{font-size:clamp(1.2rem, 1.9vw, 1.4rem);}

p{margin:0 0 1.1em;}
a{color:var(--ember-deep); text-decoration:none;}
a:hover{text-decoration:underline;}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--ember-deep);
  outline-offset:3px;
}

.eyebrow{
  display:block;
  font-family:'Poppins', sans-serif;
  font-size:0.78rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ember-deep);
  margin-bottom:0.9em;
  font-weight:600;
}
/* Small gold dash before eyebrows for a modern editorial touch */
.eyebrow::before{
  display:none;
}

.lede{
  font-size:1.15rem;
  color:var(--ink-soft);
}

.serif-italic{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-weight:400;
}

/* ---------- layout helpers ---------- */
.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--gutter);
}

section{padding:clamp(3.5rem, 8vw, 6.5rem) 0; position:relative; overflow:hidden;}
section[id]{scroll-margin-top:108px;}
.section-tight{padding:clamp(2.5rem, 5vw, 4rem) 0;}

/* ---------- section backgrounds: fluid gradients ---------- */
.bg-mist{
  background:linear-gradient(125deg, var(--lilac-soft) 0%, var(--stone) 42%, var(--coral-soft) 100%);
}
/* Bright celebratory gradient — replaces the old dark wine section */
.bg-juniper{
  background:linear-gradient(130deg, var(--sage-soft) 0%, var(--gold-soft) 48%, var(--coral-soft) 100%);
  color:var(--ink);
}
.bg-juniper h2, .bg-juniper h3{color:var(--juniper-deep);}
/* Saturated sunset gradient — replaces the old plum section */
.bg-plum{
  background:linear-gradient(120deg, var(--lilac) 0%, var(--coral) 52%, var(--goldenrod) 100%);
  color:var(--juniper-deep);
}
.bg-plum h2, .bg-plum h3{color:var(--juniper-deep);}
.bg-paper{
  background:linear-gradient(130deg, #FFFDF8 0%, #FCF3E2 48%, #F9EAE2 100%);
}

/* Soft dawn gradient: sage → linen → coral */
.bg-dawn{
  background:linear-gradient(115deg, var(--sage-soft) 0%, var(--stone) 46%, var(--coral-soft) 100%);
}

/* ---------- doodle decorations (flower, tulip, moon, spiral, vine) ---------- */
.bg-mist::before{
  content:"";
  position:absolute;
  top:36px; right:5%;
  width:64px; height:64px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M42 6 A 27 27 0 1 0 58 40 A 22 22 0 1 1 42 6 Z' fill='%239AA791'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity:0.8;
  pointer-events:none;
}
.bg-juniper::before{
  content:"";
  position:absolute;
  top:40px; right:6%;
  width:64px; height:64px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M42 6 A 27 27 0 1 0 58 40 A 22 22 0 1 1 42 6 Z' fill='%23DAAEC8'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity:0.9;
  pointer-events:none;
}
.bg-plum::after{
  content:"";
  position:absolute;
  bottom:30px; left:5%;
  width:56px; height:56px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M42 6 A 27 27 0 1 0 58 40 A 22 22 0 1 1 42 6 Z' fill='%23FBF6EE'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity:0.7;
  pointer-events:none;
}
.bg-paper::before{
  content:"";
  position:absolute;
  top:44px; right:5%;
  width:44px; height:44px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 24 m0 -2 a2 2 0 0 1 2 2 a4 4 0 0 1 -4 4 a7 7 0 0 1 -7 -7 a10 10 0 0 1 10 -10 a13 13 0 0 1 13 13 a16 16 0 0 1 -16 16' fill='none' stroke='%23E49670' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity:0.75;
  pointer-events:none;
}
.bg-paper::after{
  content:"";
  position:absolute;
  bottom:38px; left:4%;
  width:52px; height:52px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cdefs%3E%3Cpath id='q' d='M40 32 Q 33 16 40 5 Q 47 16 40 32' fill='none' stroke='%23DAAEC8' stroke-width='3.4' stroke-linejoin='round'/%3E%3C/defs%3E%3Cuse href='%23q'/%3E%3Cuse href='%23q' transform='rotate(72 40 40)'/%3E%3Cuse href='%23q' transform='rotate(144 40 40)'/%3E%3Cuse href='%23q' transform='rotate(216 40 40)'/%3E%3Cuse href='%23q' transform='rotate(288 40 40)'/%3E%3Ccircle cx='40' cy='40' r='6' fill='none' stroke='%23DAAEC8' stroke-width='3.4'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity:0.8;
  pointer-events:none;
}
.bg-dawn::before{
  content:none;
}


/* Sections need their content above the decorative layers */
section > .wrap{position:relative; z-index:1;}

.grid-2{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:clamp(2rem, 5vw, 4rem);
  align-items:center;
}
.grid-3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(1.5rem, 3vw, 2.25rem);
}

/* Two-column bullets inside a feature card (wide screens only) */
@media (min-width:720px){
  .list-2col-inner{columns:2; column-gap:2.5rem;}
  .list-2col-inner li{break-inside:avoid; margin-bottom:0.6em;}
}

/* ---------- Articles ---------- */
.article-list{display:flex; flex-direction:column; gap:1.5rem; max-width:820px;}
.article-card{
  display:block;
  background:var(--paper);
  border-radius:16px;
  padding:1.75rem 2rem;
  box-shadow:0 6px 20px rgba(51,38,31,0.08);
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.article-card:hover{transform:translateY(-2px); box-shadow:0 10px 28px rgba(51,38,31,0.13); text-decoration:none;}
.article-card h2{margin:0 0 0.5rem; font-size:1.5rem; color:var(--plum);}
.article-card p{margin:0 0 0.75rem; color:var(--ink);}
.article-card .read-more{font-family:Poppins,sans-serif; font-size:0.9rem; font-weight:600; letter-spacing:0.03em; color:var(--ember-deep);}

/* Single article body */
.article-body{max-width:720px;}
.article-body p{margin:0 0 1.3rem; line-height:1.8;}
.article-body h2{margin:2.5rem 0 1rem; font-size:1.6rem;}
.article-body h3{margin:2rem 0 0.75rem; font-size:1.25rem;}
.article-body ul, .article-body ol{margin:0 0 1.3rem 1.2rem; line-height:1.8;}
.article-body li{margin-bottom:0.5rem;}
.article-body blockquote{
  margin:1.8rem 0; padding:0.5rem 0 0.5rem 1.5rem;
  border-left:3px solid var(--goldenrod);
  font-family:Fraunces,Georgia,serif; font-style:italic; font-size:1.2rem; color:var(--plum);
}
.article-back{display:inline-block; margin-top:2.5rem; font-family:Poppins,sans-serif; font-weight:600; font-size:0.9rem; color:var(--ember-deep);}

/* NARM/Shadow/Mindfulness numbered alignment list */
.aligned-list{list-style:none; margin:2.5rem 0 0; padding:0; max-width:820px;}
.aligned-list li{display:flex; gap:1.1rem; align-items:flex-start; margin-bottom:1.4rem;}
.aligned-list li:last-child{margin-bottom:0;}
.aligned-num{
  flex:0 0 auto;
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  font-family:'Young Serif', serif;
  font-size:1.1rem;
  color:#FBF3E8;
  background:var(--goldenrod);
}
.aligned-list li:nth-child(1) .aligned-num{background:var(--coral);}
.aligned-list li:nth-child(2) .aligned-num{background:var(--goldenrod);}
.aligned-list li:nth-child(3) .aligned-num{background:var(--sage);}
.aligned-list li:nth-child(4) .aligned-num{background:#8D5981;}
.aligned-list li:nth-child(5) .aligned-num{background:var(--ember-deep);}
.aligned-list p{margin:0; padding-top:0.35rem; line-height:1.6;}

/* Five developmental needs: healthy need vs. survival strategy when unmet */
.needs-grid{display:flex; flex-direction:column; gap:1.1rem;}
.need-row{
  display:grid;
  grid-template-columns:150px 1fr 1fr;
  gap:0;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(51,38,31,0.10);
}
.need-name{
  display:flex; align-items:center;
  padding:1.1rem 1.25rem;
  background:#8D5981;
}
.need-name h3{margin:0; color:#FBF3E8; font-size:1.15rem; line-height:1.2;}
.need-healthy, .need-unmet{padding:1.1rem 1.4rem;}
.need-healthy{background:var(--paper);}
.need-unmet{background:#EFE4D6;}
.need-label{
  display:block;
  font-family:'Poppins', sans-serif;
  font-size:0.68rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  font-weight:600;
  margin-bottom:0.35rem;
}
.need-healthy .need-label{color:var(--sage-deep, #5E6B54);}
.need-unmet .need-label{color:var(--ember-deep);}
.need-healthy p, .need-unmet p{margin:0; color:#43302B; font-size:0.95rem; line-height:1.5;}
@media (max-width:760px){
  .need-row{grid-template-columns:1fr;}
  .need-name{padding:0.9rem 1.25rem;}
}

@media (max-width:880px){
  .grid-2{grid-template-columns:1fr;}
  .grid-3{grid-template-columns:1fr;}
}

/* ---------- horizon motif (signature element) ----------
   A thin arcing line, used as a recurring divider —
   evokes a flat desert horizon meeting the sky, and the
   shape of a moon moving from dark to full. */
.horizon{
  display:block;
  width:100%;
  height:auto;
  margin:0 auto;
}
.horizon-divider{
  display:flex;
  justify-content:center;
  margin:clamp(2.5rem, 5vw, 4rem) 0;
}
.horizon-divider svg{width:140px; height:28px;}

/* ---------- header / nav ---------- */
header.site-header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(90deg, rgba(110,66,96,0.96) 0%, rgba(150,98,127,0.92) 22%, rgba(228,150,112,0.55) 52%, rgba(244,205,191,0.75) 76%, rgba(251,246,238,0.95) 100%), rgba(251,246,238,0.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.1rem var(--gutter);
  max-width:var(--max);
  margin:0 auto;
}
.brand{
  font-family:'Young Serif', serif;
  font-size:1.35rem;
  font-weight:600;
  color:#FBF3E8;
  letter-spacing:0.01em;
}
.brand span{display:block; font-family:'Poppins',sans-serif; font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:#FCEEDD; font-weight:600; margin-top:2px;}

nav.primary-nav{display:flex; align-items:center; gap:1.5rem;}
nav.primary-nav ul{display:flex; gap:1.4rem; list-style:none; margin:0; padding:0;}
nav.primary-nav a{
  font-size:0.96rem;
  letter-spacing:0.03em;
  color:var(--ink);
  font-weight:500;
}
nav.primary-nav a:hover{color:var(--ember-deep); text-decoration:none;}
nav.primary-nav a.active{color:var(--ember-deep); border-bottom:1px solid var(--ember-deep); padding-bottom:3px;}

/* ---------- Specialties dropdown ---------- */
.has-dropdown{position:relative;}
.has-dropdown > a{display:inline-flex; align-items:center; gap:0.4em;}
.caret{
  width:0; height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid currentColor;
  opacity:0.65;
  transition:transform 0.2s ease;
}
.has-dropdown:hover .caret, .has-dropdown:focus-within .caret{transform:rotate(180deg);}

.dropdown{
  position:absolute;
  top:calc(100% + 1.15rem);
  left:-1.1rem;
  min-width:300px;
  width:max-content;
  max-width:340px;
  list-style:none;
  display:block;
  gap:0;
  margin:0;
  padding:0.45rem 0;
  background:var(--paper);
  border:1px solid var(--line);
  border-top:3px solid var(--goldenrod);
  border-radius:8px;
  box-shadow:0 12px 34px rgba(67,48,43,0.16);
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index:70;
}
/* override the horizontal flex inherited from `nav.primary-nav ul` */
nav.primary-nav ul.dropdown{display:block; gap:0;}

/* invisible bridge so the menu doesn't close while moving the cursor to it */
.dropdown::before{
  content:"";
  position:absolute;
  top:-1.25rem; left:0; right:0;
  height:1.25rem;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown{
  opacity:1; visibility:visible; transform:translateY(0);
}
.dropdown li{margin:0;}
.dropdown a{
  display:block;
  padding:0.62rem 1.25rem;
  font-size:0.88rem;
  line-height:1.45;
  font-weight:400;
  color:var(--ink);
  border-bottom:none;
}
.dropdown a:hover{background:var(--mist); color:var(--ember-deep); text-decoration:none;}
.dropdown a.active{border-bottom:none; padding-bottom:0.62rem;}

@media (max-width:1024px){
  .has-dropdown{width:100%;}
  .caret{display:none;}
  /* On mobile, Specialties is a single link to the Specialties page.
     The sub-links are hidden here (they remain a hover dropdown on desktop). */
  nav.primary-nav ul.dropdown{display:none;}
}

.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:4px;}
.nav-toggle span{display:block; width:24px; height:2px; background:var(--juniper-deep); margin:5px 0;}

@media (max-width:1024px){
  nav.primary-nav{
    position:fixed; top:89px; left:0; right:0; height:calc(100vh - 89px); background:var(--stone);
    flex-direction:column; align-items:flex-start; padding:1.5rem var(--gutter);
    visibility:hidden; opacity:0; pointer-events:none;
    transition:opacity 0.2s ease;
    z-index:60;
    overflow-y:auto;
  }
  nav.primary-nav.open{visibility:visible; opacity:1; pointer-events:auto;}
  nav.primary-nav ul{flex-direction:column; gap:1.25rem; width:100%;}
  nav.primary-nav .btn{margin-top:0.5rem;}
  .nav-toggle{display:block;}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.5em;
  padding:0.78em 1.6em;
  border-radius:999px;
  font-size:0.92rem;
  font-weight:600;
  letter-spacing:0.02em;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  text-decoration:none;
}
.btn-primary{background:var(--ember); color:var(--juniper-deep);}
.btn-primary:hover{background:var(--ember-deep); color:#fff; text-decoration:none; transform:translateY(-1px);}
.btn-ghost{background:transparent; border:1px solid var(--juniper-deep); color:var(--juniper-deep);}
.btn-ghost:hover{background:var(--juniper-deep); color:#fff; text-decoration:none;}
.btn-on-dark{background:#4A2B42; color:var(--paper);}
.btn-on-dark:hover{background:var(--ember-deep); color:#fff; text-decoration:none;}

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding:clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5rem);
  overflow:hidden;
}
.hero-art{
  width:100%;
  aspect-ratio:5/6;
  border-radius:6px;
  display:block;
  object-fit:cover;
}
.hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2.5rem;
  align-items:center;
}
@media (min-width:880px){
  .hero-grid{grid-template-columns:1.1fr 0.9fr;}
}
.hero h1{max-width:14ch;}
.hero .lede{max-width:46ch;}
.hero-cta-row{display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.5rem;}

/* ---------- full-bleed photo hero with text overlay ---------- */
.hero-photo{
  position:relative;
  min-height:min(86vh, 760px);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  text-align:center;
  padding:clamp(2rem, 6vw, 4rem) var(--gutter);
}
.hero-photo-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  z-index:0;
}
.hero-photo-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(130deg, rgba(218,174,200,0.42) 0%, rgba(228,150,112,0.36) 48%, rgba(211,167,71,0.34) 100%),
    linear-gradient(180deg, rgba(67,48,43,0.18) 0%, rgba(67,48,43,0.5) 100%);
  z-index:1;
}
.hero-photo-content{
  position:relative;
  z-index:2;
  max-width:1040px;
  margin:0 auto;
}
.hero-photo-content .eyebrow{color:#F3DFA8; font-size:0.88rem;}
.hero-photo-content h1{color:#FFFDF8; max-width:none; font-size:clamp(2.5rem, 5.2vw, 3.7rem);}
.hero-photo-content .lede{color:#FBF0E2; max-width:1040px; margin-left:auto; margin-right:auto; font-size:1.3rem;}
.hero-photo-content .hero-cta-row{justify-content:center;}
.btn-ghost-light{background:transparent; border:1px solid #F9EDE0; color:#F9EDE0;}
.btn-ghost-light:hover{background:#F9EDE0; color:var(--juniper-deep); text-decoration:none;}
@media (max-width:780px){
  .hero-photo{min-height:70vh;}
}

/* ---------- cards ---------- */
.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:6px;
  padding:clamp(1.75rem, 3vw, 2.25rem);
  border-top:4px solid var(--gold);
}
.card-feature{
  background:var(--sage);
  color:var(--juniper-deep);
  border:none;
  border-top:4px solid var(--goldenrod);
}
.card-feature h3{color:var(--juniper-deep);}
.card .icon{margin-bottom:1rem;}

/* Cards rotate through the four palette colors */
.grid-3 > .card:nth-child(4n+1){border-top-color:var(--goldenrod);}
.grid-3 > .card:nth-child(4n+2){border-top-color:var(--lilac);}
.grid-3 > .card:nth-child(4n+3){border-top-color:var(--coral);}
.grid-3 > .card:nth-child(4n+4){border-top-color:var(--sage);}

/* ---------- bullet lists ---------- */
.check-list{list-style:none; margin:0; padding:0;}
.check-list li{
  position:relative;
  padding-left:1.7em;
  margin-bottom:0.85em;
  color:var(--ink);
}
.check-list li::before{
  content:"";
  position:absolute; left:0; top:0.5em;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--ember);
}
/* Alternating bullet colors for liveliness */
.check-list li:nth-child(4n+1)::before{background:var(--coral);}
.check-list li:nth-child(4n+2)::before{background:var(--goldenrod);}
.check-list li:nth-child(4n+3)::before{background:var(--sage);}
.check-list li:nth-child(4n+4)::before{background:var(--lilac);}
/* on-dark now sits on bright gradients or sage cards: dark text */
.check-list.on-dark li{color:var(--juniper-deep);}
.check-list.on-dark li::before{background:var(--paper);}
.check-list.on-dark li:nth-child(4n+2)::before{background:var(--gold-soft);}
.check-list.on-dark li:nth-child(4n+3)::before{background:var(--lilac-soft);}
.check-list.on-dark li:nth-child(4n+4)::before{background:var(--coral-soft);}

/* Two-column bullet layout that collapses to one column on small screens */
.list-2col{
  margin-top:2rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem 3rem;
}
@media (max-width:780px){
  .list-2col{grid-template-columns:1fr; gap:0;}
  .list-2col .check-list:not(:first-child){margin-top:0.85em;}
}

.x-list{list-style:none; margin:0; padding:0;}
.x-list li{
  position:relative;
  padding-left:1.7em;
  margin-bottom:0.85em;
  color:var(--ink-soft);
}
.x-list li::before{
  content:"";
  position:absolute; left:0; top:0.55em;
  width:8px; height:1.5px;
  background:var(--ink-soft);
}

/* ---------- steps ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem; counter-reset:step;}
@media (min-width:881px){.steps-2{grid-template-columns:repeat(2,1fr);}}
@media (max-width:880px){.steps{grid-template-columns:1fr;}}
.step{position:relative; padding-top:0.25rem;}
.step .step-num{
  font-family:'Young Serif', serif;
  font-size:2.6rem;
  font-weight:300;
  color:var(--ember);
  display:block;
  margin-bottom:0.4rem;
  line-height:1;
}
/* Rotating step number colors */
.steps > .step:nth-child(4n+1) .step-num{color:var(--coral);}
.steps > .step:nth-child(4n+2) .step-num{color:var(--goldenrod);}
.steps > .step:nth-child(4n+3) .step-num{color:var(--sage);}
.steps > .step:nth-child(4n+4) .step-num{color:var(--lilac);}

/* ---------- quote block ---------- */
blockquote.pull-quote{
  margin:0;
  padding:0;
  border:none;
  font-family:'Fraunces', serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.4rem, 2.6vw, 2rem);
  line-height:1.4;
  max-width:38ch;
  position:relative;
}
blockquote.pull-quote::before{
  content:"\201C";
  display:block;
  font-family:'Young Serif', serif;
  font-style:normal;
  font-size:4.5rem;
  line-height:0.6;
  color:var(--paper);
  margin-bottom:0.35em;
}
/* small squiggle standing in for the attribution dash */
.attr-mark{
  display:inline-block;
  width:26px; height:8px;
  margin-right:0.55em;
  vertical-align:middle;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 8'%3E%3Cpath d='M1 5 Q 5 1 9 4 T 17 4 T 25 3' fill='none' stroke='%23D3A747' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity:0.9;
}
.quote-attr{
  display:block;
  margin-top:1rem;
  font-family:'Poppins', sans-serif;
  font-style:normal;
  font-size:0.85rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--juniper-deep);
  opacity:0.75;
}

/* ---------- accordion (FAQ) ---------- */
.accordion{border-top:1px solid var(--line);}
.acc-item{border-bottom:1px solid var(--line);}
.acc-q{
  width:100%;
  text-align:left;
  background:none;
  border:none;
  cursor:pointer;
  padding:1.4rem 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  font-family:'Young Serif', serif;
  font-size:1.05rem;
  font-weight:400;
  color:var(--juniper-deep);
}
.acc-q .plus{
  flex:none;
  width:22px; height:22px;
  position:relative;
}
.acc-q .plus::before, .acc-q .plus::after{
  content:""; position:absolute; background:var(--ember);
  left:50%; top:50%; transform:translate(-50%,-50%);
}
.acc-q .plus::before{width:14px; height:2px;}
.acc-q .plus::after{width:2px; height:14px; transition:transform 0.2s ease;}
.acc-item.open .plus::after{transform:translate(-50%,-50%) rotate(90deg); opacity:0;}
.acc-a{
  max-height:0;
  overflow:hidden;
  transition:max-height 0.3s ease;
}
.acc-a-inner{padding:0 0 1.5rem; color:var(--ink-soft); max-width:64ch;}

/* ---------- footer ---------- */
footer{
  background:#4A2B42;
  color:#D9C3D2;
  padding:clamp(3rem, 6vw, 4.5rem) 0 2rem;
  border-top:5px solid;
  border-image:linear-gradient(90deg, var(--goldenrod) 0%, var(--coral) 33%, var(--lilac) 66%, var(--sage) 100%) 1;
}
footer h4{color:#F9EDE0; font-size:1rem; letter-spacing:0.04em; text-transform:uppercase; font-family:'Poppins',sans-serif; font-weight:600;}
footer a{color:#D9C3D2;}
footer a:hover{color:#fff;}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:2.5rem;
  padding-bottom:2.5rem;
  border-bottom:1px solid rgba(255,255,255,0.12);
}
@media (max-width:780px){.footer-grid{grid-template-columns:1fr; gap:2rem;}}
.footer-grid ul{list-style:none; margin:0; padding:0;}
.footer-grid li{margin-bottom:0.6em;}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  padding-top:1.5rem; font-size:0.82rem; color:#B69AAB;
}

/* ---------- contact form ---------- */
.form-row{margin-bottom:1.2rem;}
.form-row label{display:block; font-size:0.85rem; font-weight:600; letter-spacing:0.02em; margin-bottom:0.4em; color:var(--juniper-deep);}
.form-row input, .form-row textarea{
  width:100%;
  padding:0.8em 1em;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--paper);
  font-family:'Poppins', sans-serif;
  font-size:1rem;
  color:var(--ink);
}
.form-row input:focus, .form-row textarea:focus{outline:2px solid var(--ember); outline-offset:1px;}
.form-note{font-size:0.85rem; color:var(--ink-soft); margin-top:1rem;}

/* ---------- misc utility ---------- */
.center{text-align:center;}
.mt-0{margin-top:0;}
.mb-0{margin-bottom:0;}
.narrow{max-width:62ch;}
.tag{
  display:inline-block;
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  font-weight:600;
  padding:0.35em 0.8em;
  border-radius:999px;
  background:var(--mist);
  color:var(--juniper-deep);
  margin-bottom:0.75rem;
}
.tag-plum{background:rgba(74,53,80,0.14); color:var(--plum);}
.tag-gold{background:rgba(201,154,62,0.18); color:#8a6a25;}

.page-hero{
  padding-top:clamp(3rem,7vw,5rem);
  padding-bottom:clamp(2rem,4vw,3rem);
  background-color:var(--stone);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center 55%;
  position:relative;
  overflow:hidden;
}
/* Per-page sunset photos (Asha's own) */
.page-hero.sky-about{background-image:url("images/sky-about.jpg");}
.page-hero.sky-approach{background-image:url("images/sky-approach.jpg");}
.page-hero.sky-specialties{background-image:url("images/sky-specialties.jpg"); background-position:30% 25%;}
.page-hero.sky-faq{background-image:url("images/sky-faq.jpg");}
.page-hero.sky-contact{background-image:url("images/sky-contact.jpg");}
.page-hero > .wrap{position:relative; z-index:1;}
/* Leaf mark used in page-hero subheads in place of an em-dash */
.leaf-mark{
  display:inline-block;
  width:30px; height:14px;
  margin:0 0.15em;
  vertical-align:middle;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 18'%3E%3Cpath d='M4 9 L 36 9' stroke='%236B2F14' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M20 9 Q 16 3 12 9 Q 16 15 20 9 Z' fill='%236B2F14'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity:0.85;
}
/* Sunset photos are bright and warm, so the muted body tone loses contrast.
   Darken hero text here only (no overlay wash on the photos themselves). */
.page-hero .lede{color:var(--juniper-deep);}
.page-hero .eyebrow{color:#48190A;}
.page-hero .eyebrow::before{background:#48190A; opacity:0.7;}
.page-hero h1{max-width:20ch;}

.photo-frame{
  border-radius:6px;
  overflow:hidden;
  border:1px solid var(--line);
}
.photo-frame img{display:block; width:100%; height:100%; object-fit:cover;}

.note-box{
  border-left:3px solid var(--ember);
  background:var(--paper);
  padding:1.25rem 1.5rem;
  border-radius:0 4px 4px 0;
  font-size:0.92rem;
  color:var(--ink-soft);
}