/* ==========================================================================
   Loftin Marketing — shared stylesheet
   Loaded by index.html, privacy.html, terms.html
   ========================================================================== */

/* --- design tokens ------------------------------------------------------ */
:root{
  /* surfaces */
  --paper:#F7F1E5;
  --paper-warm:#EFE3CD;
  --olive-mist:#E6E5D2;
  --ochre-mist:#F2E3C6;

  /* ink */
  --ink:#2A2018;
  --ink-soft:#6C5C4C;          /* 5.7:1 on --paper */
  --rule:rgba(42,32,24,.38);

  /* accents
     terracotta  = display sizes, button fills, decorative marks
     clay        = any accent text below 24px (6.7:1 on --paper)
     ochre       = accents on the dark olive band only */
  --terracotta:#B4522F;
  --clay:#8A3D22;
  --ochre:#D69A50;

  /* olive is the ground everything sits on; terracotta is for action */
  --olive:#5E6A45;
  --olive-deep:#333B29;

  /* text that sits on --terracotta or --olive-deep */
  --on-dark:#F8F3E7;
  --on-dark-soft:rgba(246,241,229,.88);
  --on-dark-faint:rgba(246,241,229,.72);

  --display:"Spectral",Georgia,"Times New Roman",serif;
  --body:"Karla",system-ui,-apple-system,"Segoe UI",sans-serif;

  --gutter:clamp(1.5rem,6vw,5.5rem);
  --measure:34rem;
  --head-h:5.5rem;
}

/* --- base --------------------------------------------------------------- */
*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1.08rem,1rem + .35vw,1.22rem);
  font-weight:450;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  overflow-wrap:break-word;
}

/* laid-paper texture: fine horizontal lines, then grain */
body::before{
  content:"";
  position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.5;
  background-image:repeating-linear-gradient(0deg,rgba(51,41,31,.035) 0 1px,transparent 1px 7px);
}
body::after{
  content:"";
  position:fixed;inset:0;z-index:10;pointer-events:none;
  opacity:.13;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* the blended grain layer is the most expensive paint on the page and it
   reads as noise on a small screen, so phones get the paper lines only */
@media (max-width:600px){
  body::after{display:none}
}

section,footer,.vine{position:relative;z-index:1}

h1,h2,h3{
  font-family:var(--display);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.015em;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.2rem,6.2vw,5.1rem);line-height:1;font-weight:800}
h2{font-size:clamp(1.85rem,1.4rem + 2.4vw,3.4rem);font-weight:800}
h3{font-weight:700}
em{font-style:italic}

a{color:var(--clay)}

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

/* --- utilities ---------------------------------------------------------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;left:.75rem;top:.75rem;z-index:100;
  transform:translateY(-160%);
  background:var(--terracotta);color:var(--on-dark);
  font-weight:700;font-size:.95rem;text-decoration:none;
  padding:.7rem 1.1rem;border-radius:3px;
  transition:transform .18s ease;
}
.skip-link:focus{transform:none}

.label{
  font-size:.78rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--clay);margin:0 0 1.1rem;
}
.caption{
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:.9rem;color:var(--ink-soft);
}

section{padding:clamp(3.5rem,7vw,6rem) var(--gutter)}
.wrap{max-width:64rem;margin:0 auto}
.prose{max-width:var(--measure)}

/* editorial two-column: narrow label rail + content */
.cols{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem)}
.cols .rail{padding-top:.35rem}

/* anchor targets clear the sticky bar */
[id]{scroll-margin-top:var(--head-h)}

/* --- header ------------------------------------------------------------- */
.site-head{
  position:sticky;top:0;z-index:20;
  background:rgba(247,241,229,.93);
  backdrop-filter:saturate(1.1) blur(8px);
  border-bottom:1px solid var(--rule);
  padding:.85rem var(--gutter);
  display:flex;align-items:center;gap:1rem;
}
.brand{
  font-family:var(--display);font-weight:700;font-size:1.05rem;
  letter-spacing:.01em;color:var(--ink);text-decoration:none;
  display:flex;align-items:center;gap:.55rem;margin-right:auto;
}
.brand svg{width:34px;height:24px;color:var(--terracotta);flex:none}

.site-head nav{display:flex;align-items:center;gap:1.15rem}
.site-head nav a{
  font-size:.92rem;font-weight:600;color:var(--ink-soft);text-decoration:none;
  padding-bottom:3px;border-bottom:2px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.site-head nav a:hover{color:var(--ink);border-color:var(--ochre)}
.site-head nav a.nav-cta{
  background:var(--terracotta);color:var(--on-dark);border:0;
  padding:.6rem 1.1rem;border-radius:3px;
}
.site-head nav a.nav-cta:hover{background:var(--clay);color:var(--on-dark)}

/* Mobile menu is a checkbox so it works with scripts blocked; menu.js
   upgrades it to a real button with aria-expanded when scripts run. */
.nav-toggle{
  position:absolute;top:1.15rem;left:.75rem;
  width:1px;height:1px;opacity:0;
}
.nav-btn{
  display:none;cursor:pointer;
  width:44px;height:44px;padding:0;margin:0;
  align-items:center;justify-content:center;
  background:none;border:0;color:inherit;
}
.nav-btn span,.nav-btn span::before,.nav-btn span::after{
  display:block;width:24px;height:2.5px;background:var(--ink);border-radius:2px;content:"";
}
.nav-btn span::before{transform:translateY(-8px)}
.nav-btn span::after{transform:translateY(5.5px)}

@media (max-width:860px){
  .nav-btn{display:flex}
  .site-head{flex-wrap:wrap;padding-top:.5rem;padding-bottom:.5rem}
  .brand{min-height:44px}
  .site-head nav{
    display:none;flex-direction:column;align-items:stretch;gap:0;
    width:100%;order:3;padding-top:.5rem;
  }
  .nav-toggle:checked ~ nav,
  .site-head nav[data-open="true"]{display:flex}
  .site-head nav a{
    padding:.85rem 0;border-bottom:1px solid var(--rule);
    font-size:1.05rem;color:var(--ink);
  }
  .site-head nav a.nav-cta{
    margin:.9rem 0 .4rem;text-align:center;padding:.9rem 1rem;border-bottom:0;
  }
  .nav-toggle:focus-visible ~ .nav-btn{outline:2px solid var(--terracotta);outline-offset:3px}
}

/* --- buttons and links -------------------------------------------------- */
.actions{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;margin-top:2.2rem}
.btn{
  font-family:var(--body);font-size:1.05rem;font-weight:700;
  text-decoration:none;padding:1.05rem 2rem;border-radius:3px;
  border:1px solid var(--terracotta);background:var(--terracotta);color:var(--on-dark);
  display:inline-block;cursor:pointer;
  transition:background .2s ease,border-color .2s ease;
}
.btn:hover{background:var(--clay);border-color:var(--clay)}
.textlink{
  font-size:.98rem;font-weight:600;color:var(--ink);text-decoration:none;
  background-image:linear-gradient(var(--ochre),var(--ochre));
  background-size:100% 2px;background-repeat:no-repeat;background-position:0 100%;
  background-origin:content-box;
  padding-bottom:2px;
  transition:background-size .25s ease;
}
.textlink:hover{background-size:100% 40%}

/* --- hero --------------------------------------------------------------- */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;
  min-height:clamp(25rem,44vw,33rem);
  padding-top:clamp(3rem,6vw,5rem);
  padding-bottom:clamp(3rem,6vw,5rem);
}
.hero .wrap{width:100%}
.hero-copy{max-width:35rem}
/* the photo carries the drama now, so the headline can sit a step smaller and
   keep its two designed lines inside the scrimmed column */
.hero h1{font-size:clamp(2.2rem,4.6vw,4.1rem)}

.hero-bg{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;
  object-fit:cover;object-position:74% 48%;
}
/* Paper wash. Holds near-opaque under the type so contrast never depends on
   what the photo happens to be doing, then falls off fast so the right side
   plays at full strength instead of going grey. The vertical pass softens the
   top under the sticky bar and melts the bottom into the next section. */
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(to bottom,
      rgba(247,241,229,.6) 0%,rgba(247,241,229,0) 15%,
      rgba(247,241,229,0) 66%,rgba(247,241,229,.9) 100%),
    linear-gradient(90deg,
      rgba(247,241,229,.96) 0%,
      rgba(247,241,229,.95) 44%,
      rgba(247,241,229,.9) 53%,
      rgba(247,241,229,.55) 62%,
      rgba(247,241,229,.2) 74%,
      rgba(247,241,229,.05) 88%,
      rgba(247,241,229,0) 100%);
}
.hero h1 span{display:block}
.hero h1 .light{font-weight:300;color:var(--ink-soft)}
.hero h1 .accent{color:var(--terracotta)}
.hero-sub{
  font-size:clamp(1.2rem,1.05rem + .7vw,1.5rem);
  font-weight:450;line-height:1.5;max-width:34rem;
  margin:1.7rem 0 0;color:var(--ink);
}

/* --- growing vine (scroll progress, desktop only) ----------------------- */
.vine{
  position:fixed;left:clamp(.5rem,1.6vw,1.6rem);top:0;
  height:100vh;width:56px;z-index:2;pointer-events:none;
}
.vine .stem{fill:none;stroke:var(--olive);stroke-width:3.2;stroke-linecap:round}
.vine .leaf{fill:var(--olive);opacity:.9}
.js-on .vine .leaf{
  opacity:0;transform:scale(.4);
  transform-box:fill-box;transform-origin:0% 50%;
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.3,1);
}
.js-on .vine .leaf.on{opacity:.9;transform:scale(1)}
.vine .bud{opacity:1}
.js-on .vine .bud{
  opacity:0;transform:scale(.3);
  transform-box:fill-box;transform-origin:50% 50%;
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.3,1);
}
.js-on .vine .bud.on{opacity:1;transform:scale(1)}
@media (max-width:1180px){.vine{display:none}}

/* --- start here (question picker) --------------------------------------- */
.start{background:var(--olive-mist);border-top:2px solid var(--olive);border-bottom:2px solid var(--olive)}

.picker-set{border:0;padding:0;margin:0;min-width:0}
.chips{
  display:flex;flex-direction:column;gap:0;
  margin:1.4rem 0 0;padding:0;border-top:1px solid var(--rule);
}
.chip{
  font-family:var(--body);font-size:1.12rem;font-weight:500;
  text-align:left;color:var(--ink);
  border-bottom:1px solid var(--rule);
  padding:.85rem .4rem .85rem 0;
  cursor:pointer;
  display:flex;align-items:flex-start;gap:.85rem;
  transition:color .2s ease,padding-left .2s ease;
}
.chip .chip-mark{
  flex:none;width:28px;height:20px;margin-top:.18em;
  color:var(--terracotta);opacity:.28;
  transition:opacity .2s ease,transform .2s ease;
}
.q-radio{position:absolute;width:1px;height:1px;opacity:0;margin:0}

.chip:hover{color:var(--clay);padding-left:.4rem}
.chip:hover .chip-mark{opacity:.75}

/* :has() collapses what used to be five near-identical blocks per state */
.chip:has(:checked){color:var(--clay);font-weight:600;padding-left:.4rem}
.chip:has(:checked) .chip-mark{opacity:1;transform:scale(1.15)}
.chip:has(:focus-visible){outline:2px solid var(--terracotta);outline-offset:3px}

.answers{margin-top:2rem}
.answers .answer{display:none}
.picker:has(#q1:checked) .a-q1,
.picker:has(#q2:checked) .a-q2,
.picker:has(#q3:checked) .a-q3,
.picker:has(#q4:checked) .a-q4,
.picker:has(#q5:checked) .a-q5{display:block}
.picker:has(:checked) .idle{display:none}

.answers .answer,
.answers .idle{
  border-left:2px solid var(--terracotta);
  padding:.2rem 0 .2rem 1.6rem;
  max-width:38rem;
}
.answers .idle{
  margin:0;color:var(--ink-soft);
  font-family:var(--display);font-style:italic;font-weight:400;
}
.answer h3{font-size:clamp(1.25rem,1.1rem + .6vw,1.55rem);margin-bottom:.6rem}
.answer p{margin:0 0 1.1rem;color:var(--ink)}
.answer .first-step{margin:0;color:var(--ink);font-size:1rem}
.answer .first-step b{
  display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--clay);margin-bottom:.25rem;
}

/* --- about -------------------------------------------------------------- */
/* Mirror of the hero: the photo holds the left, paper takes over on the right.
   The wash is anchored to the copy column itself rather than to viewport
   percentages, so the type sits on ~96% paper at every width without needing a
   breakpoint per layout. */
.about{position:relative;isolation:isolate;overflow:hidden}
.about-bg{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;
  object-fit:cover;object-position:20% 50%;
}
.about::after{                       /* vertical softening only */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(247,241,229,.6) 0%,rgba(247,241,229,0) 13%,
    rgba(247,241,229,0) 72%,rgba(247,241,229,.94) 100%);
}
.about-copy{
  position:relative;z-index:1;
  margin-left:auto;max-width:34rem;
}
.about-copy::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:-2.5rem;bottom:-2.5rem;left:-9rem;right:-50vw;
  background:linear-gradient(90deg,
    rgba(247,241,229,0) 0,
    rgba(247,241,229,.5) 3.5rem,
    rgba(247,241,229,.9) 7rem,
    rgba(247,241,229,.96) 9rem,
    rgba(247,241,229,.96) 100%);
}

.creed{
  margin:2rem 0 0;padding:1.4rem 0 0 1.6rem;
  border-left:3px solid var(--terracotta);max-width:34rem;
}
.creed p{
  margin:0 0 .8rem;
  font-family:var(--display);font-size:clamp(1.25rem,1.1rem + .8vw,1.6rem);
  font-weight:500;font-style:italic;line-height:1.32;
}
.creed p:last-child{margin-bottom:0}

/* definition rows: credentials, contact details, business facts */
.factlist{margin:2rem 0 0;border-top:1px solid var(--rule);max-width:32rem}
.factlist div{
  display:flex;justify-content:space-between;gap:1.5rem;
  padding:.7rem 0;border-bottom:1px solid var(--rule);
}
.factlist dt{
  font-weight:600;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);padding-top:.32em;flex:none;
}
.factlist dd{margin:0;font-size:1.02rem;color:var(--ink);text-align:right}

/* --- honest ------------------------------------------------------------- */
.honest{background:var(--olive-mist);border-top:2px solid var(--olive);border-bottom:2px solid var(--olive)}
.honest-list{margin:1.6rem 0 0;padding:0;list-style:none;display:grid;gap:1.4rem;max-width:40rem}
.honest-list li{padding-left:3rem;position:relative}
.honest-list svg{position:absolute;left:0;top:.3em;width:26px;height:19px;color:var(--terracotta)}
.honest-list strong{
  display:block;font-family:var(--display);font-weight:700;
  font-size:1.25rem;line-height:1.25;margin-bottom:.2rem;
}

/* --- proof -------------------------------------------------------------- */
.proof{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.proof-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:clamp(1.5rem,4vw,3rem);margin-top:2rem}
.stat .num{
  font-family:var(--display);font-weight:700;
  font-size:clamp(3.2rem,2.2rem + 4.5vw,5.6rem);
  line-height:.9;color:var(--terracotta);display:block;letter-spacing:-.03em;
}
.stat .num.alt{color:var(--olive)}
.stat p{margin:.8rem 0 0;font-size:1.02rem;font-weight:500;color:var(--ink);max-width:17rem;line-height:1.45}

/* --- services (the dark spine of the page) ------------------------------ */
.services{background:var(--olive-deep);color:var(--on-dark-soft)}
.services h2,.services h3{color:var(--on-dark)}
.services .label{color:var(--ochre)}
.services .rail-mark{width:96px;height:auto;margin-top:.6rem;color:var(--ochre)}
.services-note{margin:1rem 0 0;max-width:34rem;font-size:1.05rem;color:var(--on-dark-soft)}
.service-list + .services-note{margin-top:1.6rem}
.services-note a{
  color:var(--ochre);font-weight:700;text-decoration:none;
  box-shadow:inset 0 -2px 0 rgba(214,154,80,.5);
  transition:box-shadow .2s ease;
}
.services-note a:hover{box-shadow:inset 0 -1.1em 0 rgba(214,154,80,.22)}

.service-list{margin-top:1.5rem;border-top:2px solid rgba(246,241,229,.5)}
.service{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,13rem);
  gap:clamp(1rem,3vw,3rem);padding:1.9rem 0;
  border-bottom:1px solid rgba(246,241,229,.26);
  align-items:start;
  transition:padding-left .25s ease;
}
.service:hover{padding-left:.6rem}
.service h3{font-size:clamp(1.3rem,1.1rem + .9vw,1.8rem)}
.service p{margin:.55rem 0 0;color:var(--on-dark-soft);max-width:33rem;font-size:1.05rem}
.price{
  margin:0;
  font-family:var(--display);font-weight:700;font-size:2.1rem;
  color:var(--ochre);text-align:right;line-height:1;
}
.price .price-label{
  display:block;font-family:var(--body);font-size:.66rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-faint);margin-bottom:.4rem;
}
.price .price-note{
  display:block;margin-top:.5rem;font-family:var(--body);font-size:.8rem;
  font-weight:400;color:var(--on-dark-faint);line-height:1.4;
}

/* --- sliding scale ------------------------------------------------------ */
.starting{background:var(--ochre-mist);border-top:2px solid var(--terracotta);border-bottom:2px solid var(--terracotta)}
.starting-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:center;max-width:56rem}
.starting .rail-mark{width:clamp(110px,14vw,168px);height:auto;color:var(--terracotta);flex:none}
.starting h2{font-size:clamp(1.9rem,1.5rem + 1.8vw,2.8rem)}
.starting p{margin:1rem 0 0;font-size:clamp(1.1rem,1rem + .4vw,1.28rem)}
.starting .actions{margin-top:1.6rem}

/* --- free resources ----------------------------------------------------- */
.pack{background:var(--paper-warm);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.pack-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.pack ul{margin:1.3rem 0 1.4rem;padding:0;list-style:none}
.pack li{padding-left:1.5rem;position:relative;margin-bottom:.5rem}
.pack li::before{content:"";position:absolute;left:0;top:.78em;width:8px;height:8px;border-radius:999px;background:var(--olive)}

/* shared card used by the resource list and the booking block */
.card{
  border:1.5px solid var(--olive);background:var(--paper);
  padding:clamp(1.6rem,3.5vw,2.2rem);text-align:center;
}
.card .card-mark{width:96px;height:auto;margin:0 auto .6rem;display:block;color:var(--olive)}
.card h3{font-size:1.3rem;margin-bottom:.6rem}
.card p{margin:0 0 1.5rem;color:var(--ink);font-size:1.02rem}
.card .meta{
  font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 1rem;
}
.card .fine{margin:.9rem 0 0;font-size:.85rem}

/* --- faq ---------------------------------------------------------------- */
.faq-list{margin-top:2rem;border-top:2px solid var(--olive);max-width:48rem}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  list-style:none;cursor:pointer;
  padding:1.25rem 0;
  transition:color .2s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.15rem,1.05rem + .55vw,1.5rem);
  line-height:1.25;margin:0;color:inherit;
  display:flex;align-items:flex-start;gap:1rem;
}
.faq summary:hover{color:var(--clay)}
.faq summary .sign{flex:none;width:24px;height:24px;margin-top:.15em;position:relative}
.faq summary .sign::before,
.faq summary .sign::after{
  content:"";position:absolute;left:50%;top:50%;
  background:var(--terracotta);border-radius:2px;
  transform:translate(-50%,-50%);
  transition:transform .25s ease,opacity .25s ease;
}
.faq summary .sign::before{width:16px;height:3px}
.faq summary .sign::after{width:3px;height:16px}
.faq details[open] summary{color:var(--clay)}
.faq details[open] summary .sign::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq .body{padding:0 0 1.5rem 2.4rem;max-width:40rem}
.faq .body p{margin:0 0 .9rem}
.faq .body p:last-child{margin-bottom:0}

/* --- client portal ------------------------------------------------------ */
.portal-card{border:1px solid var(--rule);padding:clamp(1.6rem,4vw,2.4rem);max-width:44rem;background:var(--paper-warm)}
.portal-card h2{font-size:clamp(1.45rem,1.25rem + 1vw,2rem)}
.portal-card ul{margin:1.1rem 0 1.7rem;padding:0;list-style:none}
.portal-card li{padding-left:1.5rem;position:relative;margin-bottom:.5rem}
.portal-card li::before{content:"";position:absolute;left:0;top:.78em;width:7px;height:7px;border-radius:999px;background:var(--terracotta)}

/* --- photo band --------------------------------------------------------- */
.band-photo{
  position:relative;overflow:hidden;z-index:1;
  border-top:2px solid var(--olive);border-bottom:2px solid var(--olive);
  background:var(--olive-mist);
}
.band-photo img{
  display:block;width:100%;
  height:clamp(200px,30vw,460px);
  object-fit:cover;object-position:center 48%;
  filter:saturate(.96) sepia(.05) contrast(1.02);
}
/* warm wash plus a cream edge so the photo melts into the page */
.band-photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(247,241,229,.5) 0%,rgba(247,241,229,0) 22%,rgba(247,241,229,0) 78%,rgba(247,241,229,.45) 100%),
    linear-gradient(rgba(180,82,47,.07),rgba(51,59,41,.1));
}

/* --- book a call -------------------------------------------------------- */
.call{background:var(--paper-warm);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.call-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.agenda{margin:1.6rem 0 0;padding:0;list-style:none;counter-reset:agenda;border-top:1px solid var(--rule);max-width:32rem}
.agenda li{
  counter-increment:agenda;position:relative;
  padding:.8rem 0 .8rem 2.4rem;border-bottom:1px solid var(--rule);color:var(--ink);
}
.agenda li::before{
  content:counter(agenda,lower-roman) ".";
  position:absolute;left:0;top:.75rem;
  font-family:var(--display);font-style:italic;font-weight:400;color:var(--olive);
}

/* --- business information (payments, terms, refunds) -------------------- */
.bizinfo{background:var(--paper-warm);border-top:1px solid var(--rule)}
.bizinfo-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:clamp(1.5rem,3.5vw,2.75rem);margin-top:2rem;
}
.bizinfo-grid section{padding:0}
.bizinfo h3{
  font-family:var(--body);font-size:.7rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--clay);
  margin:0 0 .5rem;
}
.bizinfo p{margin:0;font-size:1rem;line-height:1.55}
.bizinfo a{color:var(--clay);font-weight:600}

/* --- footer ------------------------------------------------------------- */
footer{
  padding:2.5rem var(--gutter) 3rem;
  border-top:1px solid var(--rule);
  font-size:.85rem;color:var(--ink-soft);
  display:flex;justify-content:space-between;gap:1.25rem;flex-wrap:wrap;align-items:center;
}
footer svg{width:34px;height:24px;color:var(--terracotta);flex:none}
footer a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--rule)}
footer a:hover{color:var(--clay)}
.foot-legal{display:flex;flex-wrap:wrap;gap:.4rem .9rem;align-items:center}

/* --- legal pages (privacy, terms) --------------------------------------- */
.legal{max-width:44rem}
.legal .updated{
  font-family:var(--display);font-style:italic;font-weight:400;
  color:var(--ink-soft);margin:.75rem 0 0;
}
.legal h2{font-size:clamp(1.4rem,1.2rem + 1vw,1.95rem);margin:2.75rem 0 .75rem}
.legal h3{font-size:1.15rem;margin:1.75rem 0 .5rem}
.legal p,.legal li{font-size:1.05rem}
.legal ul{padding-left:1.25rem;margin:.75rem 0}
.legal li{margin-bottom:.5rem}
.legal .callout{
  border-left:3px solid var(--terracotta);
  background:var(--paper-warm);
  padding:1.1rem 1.4rem;margin:1.5rem 0;
}
.legal .callout p{margin:0}
.legal .callout p + p{margin-top:.6rem}
.legal a{font-weight:600}

/* --- scroll reveal ------------------------------------------------------ */
/* visible by default so the page still reads with scripts blocked */
.reveal{opacity:1;transform:none}
.js-on .reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.js-on .reveal.in{opacity:1;transform:none}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1024px){
  .cols{grid-template-columns:minmax(0,10rem) minmax(0,1fr)}
  .call-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
}

@media (max-width:900px){
  .about{padding-top:clamp(12rem,46vw,17rem)}
  .about-bg{
    top:0;left:0;right:0;bottom:auto;
    height:clamp(15rem,58vw,21rem);
    object-position:50% 46%;
  }
  .about-copy{max-width:none}
  .about-copy::before{
    top:-3rem;bottom:-3rem;
    left:calc(var(--gutter) * -1);right:calc(var(--gutter) * -1);
    background:linear-gradient(to bottom,
      rgba(247,241,229,0) 0,
      rgba(247,241,229,.86) 2.25rem,
      rgba(247,241,229,.96) 3.25rem,
      rgba(247,241,229,.96) 100%);
  }
  .hero{display:block;min-height:0;padding-bottom:0}
  .hero-copy{max-width:none;padding-bottom:clamp(11rem,44vw,17rem)}
  .hero-bg{object-position:72% 64%}
  .hero::after{
    background:linear-gradient(to bottom,
      rgba(247,241,229,.6) 0%,
      rgba(247,241,229,.97) 6%,
      rgba(247,241,229,.95) 52%,
      rgba(247,241,229,.72) 64%,
      rgba(247,241,229,.2) 82%,
      rgba(247,241,229,.04) 93%,
      rgba(247,241,229,.55) 100%);
  }
  .pack-grid,.cols,.call-grid{grid-template-columns:1fr}
  .cols .rail{padding-top:0}
  .service{grid-template-columns:1fr;gap:.9rem}
  .price{text-align:left}
  .answers .answer{max-width:none}
}

@media (max-width:720px){
  .starting-grid{grid-template-columns:1fr}
}

@media (max-width:600px){
  :root{--head-h:4.25rem}
  section{padding:clamp(2.75rem,9vw,3.5rem) var(--gutter)}
  .actions{gap:1rem}
  .btn{display:block;width:100%;text-align:center;padding:1.05rem 1.2rem}
  .textlink{padding-block:.7rem}
  .chip{font-size:1.05rem;padding:.9rem .2rem}
  .chip .chip-mark{width:22px;height:16px}
  .answers .answer,.answers .idle{padding-left:1.1rem}
  .factlist div{flex-direction:column;gap:.15rem;padding:.8rem 0}
  .factlist dt{padding-top:0}
  .factlist dd{text-align:left}
  .proof-grid{grid-template-columns:1fr;gap:1.75rem}
  .stat p{max-width:none}
  .starting-grid{gap:1.25rem}
  .starting .rail-mark{width:96px}
  .honest-list li{padding-left:2.4rem}
  .honest-list svg{width:22px;height:16px}
  .faq summary h3{gap:.75rem}
  .faq .body{padding-left:0}
  footer{flex-direction:column;text-align:center;gap:.75rem}
  .foot-legal{justify-content:center}
}

/* landscape phones and short windows: don't let the hero eat the screen */
@media (max-height:520px) and (orientation:landscape){
  .hero{padding-top:1rem;min-height:0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .reveal,.js-on .reveal{opacity:1;transform:none}
  .vine .leaf,.vine .bud{opacity:.9;transform:none}
}

@media print{
  .site-head,.vine,.skip-link,.band-photo,.hero-bg{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  body::before,body::after{display:none}
  .reveal{opacity:1!important;transform:none!important}
  .faq details{border-bottom:1px solid #999}
  .faq .body{display:block!important}
  a{color:#000}
}