/* ===========================================================================
   crushlover.com — Huismax Web Studio
   Plain CSS, no build step. Mobile-first; breakpoints go up from there.
   Palette is lifted from the ten artworks in /assets/img.

   Type system, three roles:
     --script  Caveat    display / "artistic" type — h1, h2, wordmark, prices
     --serif   Fraunces  sub-headings, where legibility beats character
     --sans    Inter     everything you actually read
   =========================================================================== */

:root{
  /* paper & sand */
  --paper:      #F8F2E9;
  --paper-lift: #FDFAF5;
  --sand:       #EADCC8;
  --sand-deep:  #DCC7AC;

  /* earth */
  --clay:       #A34823;
  --clay-dk:    #8E3C1B;
  --clay-soft:  #C97F42;
  --amber:      #DE9A4E;
  --blush:      #E8C4B0;

  /* green & ink */
  --sage:       #8D9583;
  --forest:     #3D4B3F;
  --forest-dk:  #2F3A31;
  --forest-dp:  #232C25;
  --ink:        #1F2C39;
  --gold:       #C9963F;

  /* type */
  --text:       #2C2621;
  --muted:      #6E6459;
  --on-dark:    #F3EDE3;
  --on-dark-mu: #B9B3A6;

  --line:       rgba(44,38,33,.13);
  --line-soft:  rgba(44,38,33,.07);

  --script: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;
  --serif:  'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
            'Helvetica Neue', Arial, sans-serif;

  --r-sm: 8px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  --shadow:    0 1px 2px rgba(44,38,33,.05), 0 8px 24px -12px rgba(44,38,33,.18);
  --shadow-lg: 0 2px 4px rgba(44,38,33,.05), 0 24px 60px -24px rgba(44,38,33,.30);
  --shadow-xl: 0 4px 8px rgba(44,38,33,.06), 0 40px 90px -30px rgba(44,38,33,.42);

  --pad: clamp(20px, 5vw, 40px);
  --sec: clamp(68px, 11vw, 132px);
  --pin: 42px;                       /* height of the pinned CrushLover bar */
  --ease: cubic-bezier(.2,.7,.3,1);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:124px;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--sans);
  font-size:clamp(16px, 1.02rem, 17.5px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

h1,h2{
  font-family:var(--script);
  font-weight:700;
  line-height:1.06;
  letter-spacing:0;
  margin:0;
  text-wrap:balance;
}
/* Caveat sits small for its em size, so display sizes run larger than a serif
   would at the same optical weight. */
h1{ font-size:clamp(3rem, 8.6vw, 5.7rem); }
h2{ font-size:clamp(2.4rem, 5.8vw, 3.8rem); }

h3{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.24;
  letter-spacing:-.01em;
  margin:0;
  font-size:clamp(1.13rem, 2.1vw, 1.35rem);
  text-wrap:balance;
}
p{ margin:0; text-wrap:pretty; }

:where(a,button,summary,input,select,textarea):focus-visible{
  outline:2.5px solid var(--clay);
  outline-offset:3px;
  border-radius:4px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--forest); color:var(--on-dark);
  padding:12px 20px; border-radius:0 0 var(--r-sm) 0; text-decoration:none;
}
.skip:focus{ left:0; }


/* ===========================================================================
   Scroll reveal
   Elements are only hidden when JS is confirmed present (html.js), so a
   failed script can never leave the page blank.
   =========================================================================== */
html.js [data-reveal]{
  opacity:0;
  transition:opacity .75s var(--ease), transform .75s var(--ease);
  transition-delay:var(--reveal-delay, 0ms);
}
html.js [data-reveal="up"]    { transform:translateY(24px); }
html.js [data-reveal="scale"] { transform:scale(.955); }
html.js [data-reveal].is-in   { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html.js [data-reveal]{ opacity:1 !important; transform:none !important; }
}


/* ===========================================================================
   Layout primitives
   =========================================================================== */
.wrap{ width:100%; max-width:1180px; margin-inline:auto; padding-inline:var(--pad); }
.wrap--narrow{ max-width:800px; }

.sec{ padding-block:var(--sec); }
.sec--paper{ background:var(--paper-lift); }
.sec--dark{ background:var(--forest); color:var(--on-dark); }
.sec--contact{
  background:
    radial-gradient(120% 90% at 50% 0%, var(--sand) 0%, rgba(234,220,200,0) 62%),
    var(--paper);
}

.kicker{
  font-family:var(--sans);
  font-size:.735rem; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--clay);
  margin:0 0 16px;
}
.sec--dark .kicker{ color:var(--amber); }

.sechead{ max-width:60ch; margin-bottom:clamp(38px,5vw,64px); }
.sechead--center{ margin-inline:auto; text-align:center; }
.sechead__lede{ margin-top:20px; font-size:1.06rem; color:var(--muted); max-width:56ch; }
.sechead--center .sechead__lede{ margin-inline:auto; }
.sec--dark .sechead__lede{ color:var(--on-dark-mu); }


/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:14px 26px; min-height:48px;
  background:var(--clay); color:#FFF9F2;
  font-family:var(--sans); font-size:.94rem; font-weight:600;
  text-decoration:none; border:1.5px solid var(--clay); border-radius:var(--r-pill);
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, transform .18s ease,
             color .18s ease, box-shadow .18s ease;
}
.btn:hover{ background:var(--clay-dk); border-color:var(--clay-dk); transform:translateY(-2px); box-shadow:var(--shadow); }
.btn:active{ transform:translateY(0); }

.btn--ghost{ background:transparent; color:var(--text); border-color:var(--line); box-shadow:none; }
.btn--ghost:hover{ background:transparent; border-color:var(--clay); color:var(--clay); box-shadow:none; }

.btn--sm{ padding:10px 20px; min-height:40px; font-size:.875rem; }
.btn--lg{ padding:17px 34px; min-height:56px; font-size:1rem; }
.btn--full{ width:100%; }

.sec--dark .btn--ghost{ color:var(--on-dark); border-color:rgba(243,237,227,.3); }
.sec--dark .btn--ghost:hover{ color:var(--amber); border-color:var(--amber); }


/* ===========================================================================
   CrushLover band — the largest thing on the page, and the first
   =========================================================================== */
.igband{
  position:relative;
  background:linear-gradient(150deg, var(--forest-dp) 0%, var(--forest-dk) 55%, #35422F 100%);
  color:var(--on-dark);
  overflow:hidden;              /* the deco sun hangs past the edges — clip it,
                                   or it widens the document and scrolls sideways */
  isolation:isolate;
}
.igband__deco{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(circle at 82% 26%, rgba(222,154,78,.34) 0%, rgba(222,154,78,0) 46%),
    radial-gradient(circle at 12% 92%, rgba(163,72,35,.28) 0%, rgba(163,72,35,0) 52%);
}
.igband__in{
  display:flex; align-items:center; gap:clamp(24px,5vw,56px);
  padding-block:clamp(34px,6vw,60px);
}
.igband__txt{ flex:1 1 auto; min-width:0; }

.igband__eyebrow{
  font-size:.7rem; font-weight:700; letter-spacing:.19em; text-transform:uppercase;
  color:var(--amber);
  margin:0 0 12px;
}
.igband__h{
  font-family:var(--script); font-weight:700;
  font-size:clamp(2.5rem, 7.4vw, 4.4rem);
  line-height:1.02;
  color:#FFF6E9;
  margin:0 0 14px;
}
.igband__d{
  font-size:clamp(.97rem, 1.6vw, 1.1rem);
  line-height:1.6;
  color:var(--on-dark-mu);
  max-width:46ch;
  margin:0 0 26px;
}
.igbtn{
  display:inline-flex; align-items:center; gap:11px;
  padding:15px 26px; min-height:54px;
  background:linear-gradient(105deg, var(--clay-soft), var(--amber) 52%, var(--gold));
  color:#2E1F0C;
  font-family:var(--sans); font-size:1rem; font-weight:700;
  text-decoration:none; border-radius:var(--r-pill);
  box-shadow:0 10px 30px -12px rgba(222,154,78,.75);
  transition:filter .18s ease, transform .18s ease, box-shadow .18s ease;
}
.igbtn:hover{ filter:brightness(1.07); transform:translateY(-2px); box-shadow:0 16px 38px -12px rgba(222,154,78,.9); }
.igbtn svg{ width:21px; height:21px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.9; }
.igbtn__go{ width:19px; height:19px; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; opacity:.75; transition:transform .2s ease; }
.igbtn:hover .igbtn__go{ transform:translateX(3px); }

.igband__note{
  margin:20px 0 0;
  font-size:.82rem; color:rgba(185,179,166,.75);
  padding-left:14px; border-left:2px solid rgba(222,154,78,.45);
}

.igband__art{
  flex:0 0 auto; width:min(240px, 26vw); margin:0;
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-xl);
  rotate:2.5deg;
}
@media (max-width:760px){
  .igband__art{ display:none; }
  .igbtn{ width:100%; justify-content:center; }
}

/* --- slim variant, used on every page except the home page ---
   Same element and same id, so the pin logic in main.js needs no changes. --- */
.igband--slim .igband__in{ padding-block:12px; }
.igband--slim .igband__eyebrow,
.igband--slim .igband__d,
.igband--slim .igband__note,
.igband--slim .igband__art{ display:none; }
.igband--slim .igband__txt{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:10px 20px;
}
.igband--slim .igband__h{
  font-size:clamp(1.05rem, 3vw, 1.35rem);
  margin:0;
}
.igband--slim .igbtn{
  padding:9px 18px; min-height:42px; font-size:.9rem;
  box-shadow:0 6px 20px -10px rgba(222,154,78,.7);
}
@media (max-width:560px){
  .igband--slim .igbtn{ width:100%; justify-content:center; }
}

/* --- the pinned slim copy --- */
.igpin{
  position:fixed; top:0; left:0; right:0; z-index:90;
  height:var(--pin);
  background:linear-gradient(100deg, var(--forest-dp), #3A472F);
  color:var(--on-dark);
  transform:translateY(-100%);
  transition:transform .32s var(--ease);
  border-bottom:1px solid rgba(222,154,78,.25);
}
.igpin.is-on{ transform:none; }
.igpin__in{
  display:flex; align-items:stretch; justify-content:center; gap:6px;
  height:100%;
  font-size:.85rem;
}
.igpin__t{
  display:flex; align-items:center;
  color:var(--on-dark-mu); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.igpin__a{
  display:inline-flex; align-items:center; gap:7px;
  padding-inline:10px;                 /* fills the bar height, so it stays a
                                          usable tap target on a phone */
  color:var(--amber); font-weight:700; text-decoration:none;
  white-space:nowrap;
}
.igpin__a:hover{ text-decoration:underline; }
.igpin__a svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; }

/* The header sticks below the pin instead of behind it. Because .head is
   sticky rather than fixed, changing `top` moves nothing in the flow. */
html.pinned .head{ top:var(--pin); }

@media (max-width:420px){
  .igpin__t{ font-size:.78rem; }
  .igpin__a{ font-size:.82rem; }
}


/* ===========================================================================
   Header
   =========================================================================== */
.head{
  position:sticky; top:0; z-index:60;
  background:rgba(248,242,233,.88);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, box-shadow .25s ease, top .32s var(--ease);
}
.head.is-stuck{ border-bottom-color:var(--line-soft); box-shadow:0 6px 24px -18px rgba(44,38,33,.5); }

.head__in{ display:flex; align-items:center; gap:16px; min-height:74px; }

.brand{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto; }
.brand__mark{ flex:0 0 auto; width:34px; height:34px; display:block; }
.brand__mark svg{ width:100%; height:100%; fill:none; stroke:var(--clay); stroke-width:2.1; stroke-linecap:round; }
.brand__txt{ display:grid; }
.brand__name{
  font-family:var(--script); font-weight:700;
  font-size:1.62rem; line-height:1;
  color:var(--text);
}
.brand__sub{
  font-size:.66rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); line-height:1.4;
}

.burger{
  display:grid; place-content:center; gap:5px;
  width:44px; height:44px; margin-right:-8px;
  background:none; border:0; cursor:pointer;
}
.burger span{
  display:block; width:21px; height:1.8px; background:var(--text); border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.8px) rotate(-45deg); }

.nav a{ text-decoration:none; }
.nav__end{ display:flex; align-items:center; gap:12px; }

.nav__tel{
  font-weight:600; font-size:.9rem; color:var(--text);
  white-space:nowrap;
  transition:color .18s ease;
}
.nav__tel:hover{ color:var(--clay); }
.nav__tel:empty, .nav__tel[hidden]{ display:none; }

/* --- mobile nav: absolutely positioned inside the sticky header, so it
       tracks the header without any scroll maths in JS --- */
@media (max-width:960px){
  .nav{
    position:absolute; top:100%; left:0; right:0;
    display:grid; gap:2px;
    padding:12px var(--pad) 26px;
    background:var(--paper-lift);
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-lg);
    transform:translateY(-8px);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .nav.is-open{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
  .nav > a{
    padding:14px 2px;
    font-family:var(--serif); font-size:1.2rem;
    border-bottom:1px solid var(--line-soft);
  }
  .nav__end{ margin-top:20px; flex-wrap:wrap; }
  .nav__tel{ flex:1 0 100%; margin-bottom:6px; font-size:1.05rem; }
  .nav__end .btn{ flex:1; }
}
@media (min-width:961px){
  .burger{ display:none; }
  .nav{ display:flex; align-items:center; gap:clamp(16px,2.2vw,30px); }
  .nav > a{
    font-size:.925rem; font-weight:500; color:var(--muted);
    position:relative; padding-block:6px;
    transition:color .18s ease;
  }
  .nav > a::after{
    content:''; position:absolute; left:0; right:0; bottom:0; height:1.5px;
    background:var(--clay); transform:scaleX(0); transform-origin:left;
    transition:transform .22s ease;
  }
  .nav > a:hover{ color:var(--text); }
  .nav > a:hover::after{ transform:scaleX(1); }
  .nav > a[aria-current="page"]{ color:var(--text); font-weight:600; }
  .nav > a[aria-current="page"]::after{ transform:scaleX(1); }
  .nav__end{ margin-left:clamp(8px,1.4vw,18px); }
}
@media (max-width:960px){
  .nav > a[aria-current="page"]{ color:var(--clay); }
}
@media (min-width:961px) and (max-width:1120px){
  .nav__tel{ display:none; }        /* not enough room next to everything else */
}


/* ===========================================================================
   Hero
   =========================================================================== */
.hero{
  position:relative;
  padding-block:clamp(52px,8vw,110px) clamp(60px,9vw,120px);
  background:var(--paper);
  overflow:hidden;
  isolation:isolate;
}
.hero__glow{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(78% 62% at 8% -6%,  rgba(234,220,200,.95) 0%, rgba(234,220,200,0) 62%),
    radial-gradient(52% 46% at 96% 8%,  rgba(232,196,176,.5)  0%, rgba(232,196,176,0) 64%),
    radial-gradient(46% 40% at 64% 104%,rgba(141,149,131,.24) 0%, rgba(141,149,131,0) 68%);
}
.hero__in{ display:grid; gap:clamp(44px,6vw,68px); align-items:center; }
.hero__txt h1{ margin-bottom:24px; }

.lede{ font-size:clamp(1.05rem,1.75vw,1.22rem); color:var(--muted); max-width:52ch; }

.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.hero__cta .btn{ flex:1 1 auto; min-width:min(100%,200px); }

/* stat row — label above, explanation under, like a spec sheet */
.points{
  list-style:none; margin:40px 0 0; padding:26px 0 0;
  border-top:1px solid var(--line);
  display:grid; gap:22px 30px;
  /* Explicit rather than auto-fit: with exactly three items, auto-fit lands on
     a lopsided 2+1 at several widths. Three items want one column or three. */
  grid-template-columns:1fr;
}
@media (min-width:520px){ .points{ grid-template-columns:repeat(3, 1fr); } }

.points strong{
  display:block;
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1rem, 1.35vw, 1.18rem); letter-spacing:-.01em; line-height:1.2;
  color:var(--text);
  margin-bottom:5px;
}
.points span{ display:block; font-size:.845rem; line-height:1.45; color:var(--muted); }

/* overlapping artwork collage */
.hero__art{ position:relative; }
.art{ margin:0; border-radius:var(--r-lg); overflow:hidden; background:var(--sand); }
.art img{ width:100%; }
.art--tall{ box-shadow:var(--shadow-xl); }
.art--float{
  position:absolute; right:-10px; bottom:-34px; width:44%;
  border:7px solid var(--paper); border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}
.art--chip{
  position:absolute; left:-34px; top:16%; width:118px;
  border:6px solid var(--paper); border-radius:var(--r);
  box-shadow:var(--shadow);
  rotate:-6deg;
}

@media (max-width:899px){
  .hero__art{ max-width:440px; margin-inline:auto; width:100%; }
  .art--float{ width:40%; right:-4px; bottom:-24px; border-width:6px; }
  .art--chip{ display:none; }
}
@media (min-width:900px){
  .hero__in{ grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:clamp(48px,6vw,92px); }
  .hero__cta .btn{ flex:0 0 auto; min-width:0; }
  .art--float{ right:-40px; bottom:-48px; width:46%; }
}


/* ===========================================================================
   Trust strip
   =========================================================================== */
.strip{
  background:var(--forest-dk);
  color:var(--on-dark-mu);
  padding-block:18px;
}
.strip__in{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:10px clamp(18px,3vw,38px);
  font-size:.855rem; font-weight:500; text-align:center;
}
.strip__in span{ position:relative; }
.strip__in span + span::before{
  content:''; position:absolute; left:clamp(-10px,-1.5vw,-19px); top:50%;
  width:4px; height:4px; margin-top:-2px;
  background:var(--amber); border-radius:50%; opacity:.7;
}
@media (max-width:640px){
  .strip__in{ flex-direction:column; align-items:center; gap:7px; }
  .strip__in span + span::before{ display:none; }
}


/* ===========================================================================
   Service cards
   =========================================================================== */
.cards{
  display:grid; gap:clamp(20px,2.6vw,28px);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.card{
  background:var(--paper);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  padding:0 0 28px;
  overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.card__art{ position:relative; margin:0; aspect-ratio:16/10; overflow:hidden; background:var(--sand); }
.card__art img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; transition:transform .5s var(--ease); }
.card:hover .card__art img{ transform:scale(1.045); }
.card__no{
  position:absolute; left:14px; top:14px;
  display:grid; place-content:center;
  width:34px; height:34px;
  background:rgba(248,242,233,.92);
  border-radius:50%;
  font-family:var(--serif); font-size:.78rem; font-weight:600; color:var(--clay);
}
.card h3{ margin:24px 26px 10px; }
.card p{ margin:0 26px; color:var(--muted); font-size:.95rem; }


/* ===========================================================================
   Pricing
   =========================================================================== */
.tiers{
  display:grid; gap:clamp(20px,2.6vw,26px);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  align-items:start;
}
.tier{
  position:relative;
  display:flex; flex-direction:column;
  background:var(--paper-lift);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  padding:0 clamp(22px,2.6vw,30px) clamp(26px,3vw,32px);
  overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.tier:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.tier__art{ margin:0 calc(-1 * clamp(22px,2.6vw,30px)); height:124px; overflow:hidden; background:var(--sand); }
.tier__art img{ width:100%; height:100%; object-fit:cover; object-position:center 40%; }

.tier--flag{ border-color:rgba(163,72,35,.32); box-shadow:var(--shadow); background:var(--paper); }
.tier__flag{
  position:absolute; z-index:2; top:14px; right:14px;
  margin:0; padding:6px 13px;
  background:var(--clay); color:#FFF9F2;
  font-size:.685rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  border-radius:var(--r-pill);
}
.tier h3{ margin:26px 0 4px; }
.tier__price{
  font-family:var(--script); font-weight:700;
  font-size:clamp(3.4rem,6.6vw,4.2rem); line-height:1;
  margin:0 0 18px;
  color:var(--clay);
}
.tier__price .cur{ font-size:.45em; vertical-align:.72em; margin-right:.02em; color:var(--muted); }
.tier__for{
  color:var(--muted); font-size:.94rem;
  padding-bottom:22px; margin-bottom:22px;
  border-bottom:1px solid var(--line-soft);
}
.tier .btn{ margin-top:auto; }

.ticks{ list-style:none; margin:0 0 26px; padding:0; display:grid; gap:11px; }
.ticks li{ position:relative; padding-left:27px; font-size:.93rem; line-height:1.52; }
.ticks li::before{
  content:''; position:absolute; left:2px; top:.52em;
  width:11px; height:6px;
  border-left:2px solid var(--clay); border-bottom:2px solid var(--clay);
  transform:rotate(-45deg);
}

/* --- care plan --- */
.care{
  margin-top:clamp(30px,4vw,48px);
  display:grid;
  background:var(--forest);
  color:var(--on-dark);
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.care__body{ padding:clamp(32px,4.4vw,58px); }
.care .kicker{ color:var(--amber); }
.care h3{
  font-family:var(--script); font-weight:700;
  font-size:clamp(1.95rem,4vw,2.7rem); line-height:1.1; letter-spacing:0;
  margin-bottom:18px;
}
.care h3 .cur{ font-size:.6em; vertical-align:.4em; }
.care__body > p{ color:var(--on-dark-mu); max-width:56ch; }
.care .ticks{ margin:28px 0; }
.care .ticks li::before{ border-color:var(--amber); }
.ticks--row{ grid-template-columns:repeat(auto-fit, minmax(min(100%,230px), 1fr)); gap:11px 22px; }
.care__alt{
  padding:18px 22px;
  background:rgba(0,0,0,.2);
  border-radius:var(--r);
  font-size:.94rem; color:var(--on-dark-mu);
}
.care__alt strong{ color:var(--on-dark); }
.care__art{ margin:0; min-height:230px; }
.care__art img{ width:100%; height:100%; object-fit:cover; }

@media (min-width:900px){
  .care{ grid-template-columns:1.42fr .95fr; }
  .care__art{ min-height:100%; }
}


/* ===========================================================================
   Process
   =========================================================================== */
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(28px,3.4vw,36px);
  grid-template-columns:repeat(auto-fit, minmax(min(100%,235px), 1fr));
}
.steps li{ position:relative; padding-top:28px; border-top:1px solid rgba(243,237,227,.2); }
.steps li::after{                     /* the dot that sits on the rule */
  content:''; position:absolute; left:0; top:-5px;
  width:9px; height:9px; border-radius:50%; background:var(--amber);
}
.steps__n{
  display:block;
  font-family:var(--script); font-size:1.5rem; font-weight:700; line-height:1;
  color:var(--amber);
  margin-bottom:12px;
}
.steps h3{ margin-bottom:12px; }
.steps p{ color:var(--on-dark-mu); font-size:.95rem; }


/* ===========================================================================
   Who it's for
   =========================================================================== */
.fit{ display:grid; gap:clamp(34px,5vw,64px); align-items:center; }
.fit__art{
  margin:0; border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--shadow-lg); background:var(--sand);
  max-width:460px; width:100%;
}
.fit__body h2{ margin-bottom:20px; }
.fit__body > p{ color:var(--muted); max-width:48ch; }

.tags{ list-style:none; display:flex; flex-wrap:wrap; gap:9px; margin:30px 0 0; padding:0; }
.tags li{
  font-size:.86rem; font-weight:500;
  padding:8px 16px;
  background:var(--paper-lift);
  border:1px solid var(--line); border-radius:var(--r-pill);
}
.fit__note{
  margin-top:30px; padding-left:18px;
  border-left:2.5px solid var(--sand-deep);
  font-size:.92rem; color:var(--muted); max-width:52ch;
}

@media (min-width:900px){ .fit{ grid-template-columns:.85fr 1.15fr; } }


/* ===========================================================================
   Inner page header
   =========================================================================== */
.pagehead{
  position:relative;
  padding-block:clamp(44px,7vw,86px) clamp(32px,4.5vw,52px);
  background:var(--paper);
  overflow:hidden; isolation:isolate;
}
.pagehead__glow{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(72% 60% at 6% -12%, rgba(234,220,200,.9) 0%, rgba(234,220,200,0) 62%),
    radial-gradient(46% 44% at 94% 6%, rgba(232,196,176,.42) 0%, rgba(232,196,176,0) 66%);
}
.pagehead h1{ font-size:clamp(2.5rem, 7vw, 4.4rem); margin-bottom:20px; }
.pagehead__lede{
  font-size:clamp(1.04rem, 1.7vw, 1.2rem);
  color:var(--muted); max-width:56ch;
}


/* ===========================================================================
   Pricing teaser (home page) — links through to the pricing page
   =========================================================================== */
.teaser{
  display:grid; gap:clamp(16px,2.2vw,22px);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.tease{
  display:flex; flex-direction:column;
  padding:clamp(24px,3vw,32px);
  background:var(--paper-lift);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  text-decoration:none;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s ease;
}
.tease:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:rgba(163,72,35,.3); }
.tease__n{ font-family:var(--serif); font-weight:600; font-size:1.1rem; margin-bottom:4px; }
.tease__p{
  font-family:var(--script); font-weight:700; line-height:1;
  font-size:clamp(2.9rem,6vw,3.6rem); color:var(--clay);
  margin:0 0 14px;
}
.tease__p .cur{ font-size:.44em; vertical-align:.72em; color:var(--muted); }
.tease__d{ color:var(--muted); font-size:.93rem; margin-bottom:20px; }
.tease__go{
  margin-top:auto;
  display:inline-flex; align-items:center; gap:7px;
  font-size:.88rem; font-weight:600; color:var(--clay);
}
.tease__go svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; }
.tease:hover .tease__go svg{ transform:translateX(3px); }


/* ===========================================================================
   "Not included" list — honest scope boundaries
   =========================================================================== */
.notinc{ list-style:none; margin:0; padding:0; display:grid; gap:13px; }
.notinc li{
  position:relative; padding-left:30px;
  color:var(--muted); font-size:.95rem; line-height:1.55;
}
.notinc li::before{
  content:''; position:absolute; left:3px; top:.72em;
  width:13px; height:2px; border-radius:2px;
  background:var(--sand-deep);
}


/* ===========================================================================
   "What happens next" — numbered, on the contact page
   =========================================================================== */
.next{
  list-style:none; counter-reset:n; margin:0; padding:0;
  display:grid; gap:clamp(22px,3vw,30px);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.next li{ counter-increment:n; padding-top:22px; border-top:2px solid var(--sand-deep); }
.next li::before{
  content:counter(n);
  display:block;
  font-family:var(--script); font-weight:700; font-size:1.7rem; line-height:1;
  color:var(--clay); margin-bottom:10px;
}
.next h3{ margin-bottom:8px; }
.next p{ color:var(--muted); font-size:.94rem; }


/* ===========================================================================
   About page: the personal block
   =========================================================================== */
.about{ display:grid; gap:clamp(32px,5vw,60px); align-items:start; }
.about__art{
  margin:0; border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--shadow-lg); background:var(--sand);
  max-width:440px; width:100%;
}
.about__body > p{ margin-bottom:18px; max-width:60ch; }
.about__body > p:last-child{ margin-bottom:0; }
.about__body strong{ color:var(--text); }
@media (min-width:900px){ .about{ grid-template-columns:.8fr 1.2fr; } }

.sister{
  display:flex; flex-wrap:wrap; align-items:center; gap:18px 24px;
  margin-top:clamp(30px,4vw,42px);
  padding:clamp(22px,3vw,30px);
  background:var(--paper-lift);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
}
.sister__t{ flex:1 1 260px; }
.sister__t h3{ margin-bottom:8px; }
.sister__t p{ color:var(--muted); font-size:.94rem; }


/* ===========================================================================
   CTA band
   =========================================================================== */
.ctaband{
  position:relative;
  padding-block:clamp(56px,8vw,96px);
  background:linear-gradient(140deg, var(--clay) 0%, #8E3C1B 58%, #6E2E14 100%);
  color:#FFF6EE;
  overflow:hidden; isolation:isolate;
  text-align:center;
}
.ctaband__deco{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(circle at 84% 14%, rgba(222,154,78,.4) 0%, rgba(222,154,78,0) 44%),
    radial-gradient(circle at 10% 96%, rgba(255,246,238,.18) 0%, rgba(255,246,238,0) 46%);
}
.ctaband h2{ margin-bottom:18px; }
.ctaband > .wrap > p{
  max-width:52ch; margin:0 auto;
  color:rgba(255,246,238,.85); font-size:1.05rem;
}
.ctaband__btns{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:34px; }
.ctaband__btns:empty{ display:none; }
.ctabtn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 28px; min-height:54px;
  border-radius:var(--r-pill);
  font-weight:600; font-size:.97rem; text-decoration:none;
  border:1.5px solid rgba(255,246,238,.45);
  color:#FFF6EE;
  transition:background .18s ease, color .18s ease, transform .18s ease, border-color .18s ease;
}
.ctabtn svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ctabtn:hover{ transform:translateY(-2px); background:rgba(255,246,238,.12); border-color:#FFF6EE; }
.ctabtn--solid{ background:#FFF6EE; color:var(--clay); border-color:#FFF6EE; }
.ctabtn--solid:hover{ background:#fff; color:var(--clay-dk); }


/* ===========================================================================
   FAQ
   =========================================================================== */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  display:flex; align-items:flex-start; gap:16px;
  padding:22px 0; min-height:56px;
  font-family:var(--serif); font-size:clamp(1.04rem,2vw,1.2rem); font-weight:600;
  letter-spacing:-.01em;
  cursor:pointer; list-style:none;
  transition:color .18s ease;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--clay); }
.faq summary::after{
  content:''; flex:0 0 auto; margin-left:auto;
  width:13px; height:13px; margin-top:.42em;
  border-right:2px solid var(--clay); border-bottom:2px solid var(--clay);
  transform:rotate(45deg); transform-origin:60% 60%;
  transition:transform .25s ease;
}
.faq details[open] summary::after{ transform:rotate(-135deg); }
.faq p{ margin:0; padding:0 clamp(0px,4vw,44px) 26px 0; color:var(--muted); font-size:.97rem; }


/* ===========================================================================
   Contact
   =========================================================================== */
.ways{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,200px), 1fr));
  margin-bottom:clamp(30px,4vw,44px);
}
.ways:empty{ display:none; }
.way{
  display:flex; align-items:center; gap:14px;
  padding:17px 20px;
  background:var(--paper-lift);
  border:1px solid var(--line);
  border-radius:var(--r);
  text-decoration:none;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.way:hover{ border-color:var(--clay); transform:translateY(-2px); box-shadow:var(--shadow); }
.way svg{ flex:0 0 auto; width:21px; height:21px; fill:none; stroke:var(--clay); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.way__t{ display:block; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); }
.way__v{ display:block; font-weight:600; font-size:.95rem; overflow-wrap:anywhere; }

.cform{ display:grid; gap:16px; }
.cform__row{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(min(100%,200px), 1fr)); }
.cform label{ display:grid; gap:7px; }
.cform label > span{ font-size:.84rem; font-weight:600; }
.cform input,.cform select,.cform textarea{
  width:100%; padding:14px 15px;
  font:inherit; font-size:.96rem; color:var(--text);
  background:var(--paper-lift);
  border:1.5px solid var(--line); border-radius:var(--r-sm);
  transition:border-color .18s ease, background .18s ease;
}
.cform textarea{ resize:vertical; min-height:120px; }
.cform input:focus,.cform select:focus,.cform textarea:focus{ border-color:var(--clay); background:#fff; outline-offset:1px; }
.cform button{ margin-top:8px; }
.cform__note{ font-size:.9rem; color:var(--muted); min-height:1.2em; margin:0; }
.cform__note.is-err{ color:var(--clay); }


/* ===========================================================================
   Footer
   =========================================================================== */
.foot{
  background:var(--forest-dp);
  color:var(--on-dark-mu);
  padding-block:clamp(52px,7vw,80px) clamp(28px,4vw,38px);
  font-size:.92rem;
}
.foot__top{
  display:grid; gap:clamp(32px,4vw,44px);
  padding-bottom:clamp(34px,4vw,46px);
  border-bottom:1px solid rgba(243,237,227,.13);
}
.foot__brand{
  display:flex; align-items:center; gap:11px;
  font-family:var(--script); font-size:1.62rem; font-weight:700; line-height:1;
  color:var(--on-dark);
  margin-bottom:16px;
}
.foot__brand .brand__mark{ width:30px; height:30px; }
.foot__brand svg{ stroke:var(--amber); }
.foot__blurb{ max-width:36ch; margin-bottom:20px; }
.foot__sister{
  display:inline-grid; gap:2px;
  padding:13px 18px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(243,237,227,.12);
  border-radius:var(--r);
  text-decoration:none; font-size:.82rem;
  transition:border-color .18s ease, background .18s ease;
}
.foot__sister:hover{ border-color:var(--amber); background:rgba(255,255,255,.08); }
.foot__sister strong{ color:var(--on-dark); font-size:.92rem; }
.foot__sister:empty, .foot__sister[hidden]{ display:none; }

.foot__col h3{
  font-family:var(--sans);
  font-size:.72rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--on-dark);
  margin-bottom:16px;
}
/* :not(.foot__iga) matters — without it this rule outranks .foot__iga on
   specificity, forces display:block, and the Instagram icon drops to the text
   baseline instead of centring. */
.foot__col > a:not(.foot__iga), .foot__links a{
  display:block; padding-block:6px;
  color:var(--on-dark-mu); text-decoration:none;
  transition:color .18s ease;
}
.foot__col > a:not(.foot__iga):hover, .foot__links a:hover{ color:var(--amber); }

.foot__col--ig p{ margin-bottom:14px; font-size:.87rem; }
.foot__iga{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px;
  background:linear-gradient(105deg, var(--clay-soft), var(--amber) 55%, var(--gold));
  color:#2E1F0C; font-weight:700; font-size:.87rem;
  border-radius:var(--r-pill); text-decoration:none;
  transition:filter .18s ease, transform .18s ease;
}
.foot__iga:hover{ filter:brightness(1.07); transform:translateY(-1px); }
.foot__iga svg{
  display:block;                 /* kill the inline baseline gap under the icon */
  flex:0 0 auto;
  width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2;
}

.foot__legal{
  display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:space-between;
  padding-top:24px;
  font-size:.83rem;
}

@media (min-width:720px){
  .foot__top{ grid-template-columns:repeat(2, 1fr); }
}
@media (min-width:1000px){
  .foot__top{ grid-template-columns:1.5fr .8fr .9fr 1.1fr; }
}