/* ==========================================================================
   Sally Hare — Warm Paper
   Mustard, olive and terracotta on a warm printed page. Bitter + Karla.
   Homepage of a normal multi-page practice site: header, hero, what the work
   is, what it helps with, how a session runs, about, fees, questions, proof,
   contact, footer.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root{
  --paper:      #faf5ea;
  --paper-2:    #f3ead8;
  --paper-3:    #fffcf5;
  --ink-solid:  #26231d;
  --mustard:    #c99a2e;
  --olive:      #4c5a3a;
  --olive-deep: #3f4b30;
  --terracotta: #b0563a;
  --terra-ink:  #9c4830;
  --mustard-lit:#e6cf9a;
  --muted:      #6f6759;

  /* base.css reads these as the page shell */
  --ink:        #faf5ea;
  --ink-2:      #f3ead8;
  --ink-3:      #fffcf5;
  --surface:    #f3ead8;
  --surface-2:  #ece0c9;
  --text:       #26231d;
  --muted-2:    #6f6759;
  --ink-text:   #26231d;
  --ink-mute:   #6a6153;
  --accent:     #4c5a3a;
  --accent-lit: #3f4b30;
  --accent-2:   #c99a2e;
  --line:       rgba(38,35,29,.15);
  --line-d:     rgba(38,35,29,.24);
  --radius:     2px;
  --ease:       cubic-bezier(.22,.61,.36,1);
  --wrap-max:   1180px;
  --pad:        clamp(1.2rem, 4vw, 2.75rem);
  --hdr-h:      84px;
  --font-display:"Bitter", Georgia, "Times New Roman", serif;
  --font-body:   "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:   "Karla", ui-monospace, monospace;
}

body{
  background:var(--paper);
  color:var(--ink-solid);
  font-family:var(--font-body);
  font-size:17.5px;
  line-height:1.65;
  letter-spacing:.002em;
}

/* paper grain — a printed surface, not a screen */
body::after{
  content:"";
  position:fixed; inset:0; z-index:2;
  pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxODAnIGhlaWdodD0nMTgwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjg1JyBudW1PY3RhdmVzPSczJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzE4MCcgaGVpZ2h0PScxODAnIGZpbHRlcj0ndXJsKCNuKScgb3BhY2l0eT0nLjU1Jy8+PC9zdmc+");
  mix-blend-mode:multiply;
}

::selection{ background:var(--mustard); color:var(--ink-solid); }
:focus-visible{ outline:2px solid var(--terracotta); outline-offset:3px; }

/* GSAP takes the reveals over: no CSS transition on the same property */
html.gsap-ready [data-reveal]{ transition:none; }

.skip{
  position:fixed; left:1rem; top:-80px; z-index:9998;
  padding:.7rem 1rem; background:var(--ink-solid); color:var(--paper);
  font-size:.85rem; border-radius:2px;
}
.skip:focus{ top:1rem; }

/* ------------------------------------------------------------------ type */
.h2{
  font-family:var(--font-display);
  font-size:clamp(1.95rem, 3.4vw, 2.72rem);
  font-weight:600;
  line-height:1.05;
  letter-spacing:-.016em;
  margin-top:.55rem;
  text-wrap:balance;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:.7rem;
  font-size:.71rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--terra-ink);
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:currentColor; opacity:.7;
}
.lead{
  font-size:clamp(1.02rem, 1.35vw, 1.16rem);
  line-height:1.62;
  color:var(--muted);
  max-width:60ch;
}
.prose p{ max-width:64ch; color:var(--muted); }
.prose p + p{ margin-top:1.05em; }
.prose .lead{ color:var(--ink-solid); font-size:1.16rem; margin-bottom:.9em; }
.prose__small{ font-size:.95rem; }
.prose--cream p{ color:rgba(250,245,234,.9); }
.prose--cream p + p{ margin-top:1.1em; }

.link{
  color:inherit;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-size:100% 1px;
  background-position:0 100%;
  padding-bottom:1px;
  transition:background-size .3s var(--ease), color .2s;
}
.link:hover{ background-size:100% 2px; color:var(--terracotta); }
.link--cream:hover{ color:var(--mustard-lit); }

/* ---------------------------------------------------------------- preloader */
.pre{ background:var(--paper); }
.pre__mark{ width:132px; color:var(--olive); }
.pre__mark svg{ width:100%; height:auto; display:block; }
.pre__wave{
  stroke-dasharray:150;
  stroke-dashoffset:150;
  animation:waveDraw 2.2s var(--ease) infinite;
}
@keyframes waveDraw{
  0%{ stroke-dashoffset:150; }
  45%{ stroke-dashoffset:0; }
  75%{ stroke-dashoffset:0; }
  100%{ stroke-dashoffset:-150; }
}
.pre__name{
  font-family:var(--font-display);
  font-size:1.18rem; font-weight:600; letter-spacing:.01em;
  margin-top:1.15rem;
}
.pre__meta{
  display:flex; align-items:baseline; gap:1.1rem;
  font-family:var(--font-body);
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted);
  padding-block:.7rem;
}
.pre__pct{ color:var(--terracotta); letter-spacing:.12em; }
.pre__bar{ width:min(240px,62vw); height:2px; background:rgba(38,35,29,.14); }
.pre__bar i{ background:var(--mustard); }

/* ------------------------------------------------------------------ header */
.hdr{ border-bottom:1px solid var(--line); background:var(--paper); }
@media (min-width:1024px){
  .hdr{ background:color-mix(in srgb, var(--paper) 90%, transparent); }
}
.hdr__in{ min-height:var(--hdr-h); gap:1.4rem; }

.brand{ display:flex; align-items:center; gap:.72rem; }
.brand__mark{ width:36px; height:36px; color:var(--terracotta); flex-shrink:0; }
.brand__mark svg{ width:100%; height:100%; display:block; }
.brand__name{
  display:block;
  font-family:var(--font-display);
  font-size:1.36rem; font-weight:600; line-height:1;
  letter-spacing:-.012em;
  color:var(--ink-solid);
}
.brand__sub{
  display:block; margin-top:.3rem;
  font-size:.6rem; font-weight:600;
  letter-spacing:.155em; text-transform:uppercase;
  color:var(--muted);
}

.nav__link{
  position:relative;
  padding:.55rem .7rem;
  font-size:.9rem; font-weight:500;
  color:var(--ink-solid);
  border-radius:2px;
}
.nav__link::after{
  content:""; position:absolute; left:.7rem; right:.7rem; bottom:.32rem;
  height:1px; background:var(--terracotta);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav__link:hover{ color:var(--terracotta); background:none; }
.nav__link:hover::after{ transform:scaleX(1); }

.nav__item--cta{ margin-left:.7rem; }
.btn--olive{
  background:var(--olive); color:var(--paper);
  padding:.82rem 1.2rem;
  font-size:.85rem; font-weight:600; letter-spacing:.005em;
  border-radius:2px;
}
.btn--olive:hover{ background:var(--olive-deep); color:var(--paper); transform:translateY(-2px); }
.nav__item--cta .btn--olive{ padding:.74rem 1.05rem; font-size:.82rem; }

.burger{ border-color:var(--line-d); }
.burger span{ background:var(--ink-solid); }
.nav__close{ border-color:var(--line-d); }

.nav__foot{ display:none; }

/* -------------------------------------------------------------------- hero */
.hero{
  position:relative;
  min-height:calc(100svh - var(--hdr-h));
  display:flex; align-items:center;
  padding-block:clamp(2.2rem, 6vh, 4rem);
}
.hero__grid{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(200px, 21vw, 300px);
  gap:clamp(2rem, 5vw, 4.6rem);
  align-items:center;
}
.hero__hello{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.02rem, 1.35vw, 1.16rem);
  line-height:1.5;
  color:var(--terracotta);
  max-width:44ch;
  margin-bottom:1.35rem;
}
.hero__hello em{ font-style:normal; color:var(--muted); }

.hero__kicker{
  display:flex; align-items:center; gap:.65rem;
  font-size:.69rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.9rem;
}
.hero__kicker::before{ content:""; width:30px; height:1px; background:var(--mustard); }

.hero__h1{
  font-family:var(--font-display);
  font-size:clamp(2.6rem, 5.6vw, 5rem);
  font-weight:600;
  line-height:1.02;
  letter-spacing:-.022em;
  color:var(--ink-solid);
}
.hero__h1 .line{ overflow:visible; padding-block:.02em; }
.hero__h1 .line > span{ position:relative; }

.uline{
  position:absolute; left:-.02em; right:-.02em; bottom:-.2em;
  height:.16em;
  color:var(--mustard);
  pointer-events:none;
}
.uline svg{ display:block; width:100%; height:100%; overflow:visible; }

.hero__lead{
  margin-top:1.5rem;
  font-size:clamp(1rem, 1.3vw, 1.1rem);
  line-height:1.65;
  color:var(--muted);
  max-width:47ch;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.9rem; }

.btn{
  font-family:var(--font-body);
  border-radius:2px;
  transition:transform .25s var(--ease), background .2s, color .2s, border-color .2s;
}
.btn--line{
  border:1px solid var(--line-d);
  color:var(--ink-solid);
  padding:.82rem 1.2rem;
  font-size:.85rem; font-weight:600;
}
.btn--line:hover{ border-color:var(--ink-solid); background:var(--ink-solid); color:var(--paper); transform:translateY(-2px); }
.btn--cream{
  background:var(--paper); color:var(--olive-deep);
  padding:.9rem 1.3rem;
  font-size:.88rem; font-weight:600;
}
.btn--cream:hover{ background:#fff; color:var(--olive-deep); transform:translateY(-2px); }

.hero__trust{
  display:flex; flex-wrap:wrap; gap:.55rem 1.5rem;
  margin-top:2rem; padding-top:1.2rem;
  border-top:1px solid var(--line);
  font-size:.775rem; letter-spacing:.02em;
  color:var(--muted);
}
.hero__trust li{ display:flex; align-items:center; gap:.52rem; }
.hero__trust li::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--mustard); flex-shrink:0;
}

.hero__portrait{ margin:0; justify-self:end; width:100%; max-width:300px; }
.frame{
  padding:9px;
  background:var(--paper-3);
  border:1px solid rgba(38,35,29,.22);
  box-shadow:10px 10px 0 -1px rgba(201,154,46,.85);
}
.frame img{
  width:100%; height:auto; aspect-ratio:5 / 4;
  object-fit:cover; object-position:50% 0%;
}
.hero__portrait figcaption{
  margin-top:1.15rem;
  font-size:.66rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted);
  line-height:1.5;
}

/* ------------------------------------------------------------------ layout */
section[id]{ scroll-margin-top:calc(var(--hdr-h) + 10px); }
.sect{ padding-block:clamp(3.6rem, 6.8vw, 6.4rem); }
.band-olive{ background:var(--olive); color:var(--paper); }
.band-olive .eyebrow{ color:var(--paper); }
.band-olive .eyebrow::before{ background:var(--mustard); opacity:1; }
.band-olive .h2{ color:var(--paper); }
.band-sand{ background:var(--paper-2); }
.band-terra{ background:var(--terracotta); color:var(--paper); }

.cols{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.8rem, 4.5vw, 4.6rem);
  align-items:start;
}
.cols--top{ align-items:start; }
.shead{ margin-bottom:clamp(1.9rem, 3.4vw, 2.9rem); }
.shead--flush{ margin-bottom:0; }

/* --------------------------------------------------------- what it helps */
.helps{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:0 clamp(1.4rem, 3vw, 2.8rem);
  margin-top:clamp(2rem, 4vw, 2.8rem);
  border-top:1px solid var(--line);
}
.helps li{
  position:relative;
  padding:.95rem 0 .95rem 1.15rem;
  border-bottom:1px solid var(--line);
  font-family:var(--font-display);
  font-size:1.01rem;
  line-height:1.35;
  color:var(--ink-solid);
}
.helps li::before{
  content:""; position:absolute; left:0; top:1.5rem;
  width:5px; height:5px; background:var(--mustard); border-radius:50%;
}
.note-line{
  margin-top:1.7rem;
  max-width:64ch;
  font-size:.97rem;
  color:var(--muted);
}

/* ------------------------------------------------------------ how it works */
.steps{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(1.5rem, 3vw, 2.6rem);
  margin-top:clamp(2.2rem, 4vw, 3rem);
}
.step{ border-top:2px solid var(--mustard); padding-top:1.15rem; }
.step__n{
  font-size:.66rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--terra-ink);
}
.step h3{
  font-family:var(--font-display);
  font-size:1.22rem; font-weight:600;
  margin:.5rem 0 .55rem;
  letter-spacing:-.008em;
}
.step p{
  font-size:.96rem; line-height:1.62;
  color:var(--muted);
  max-width:36ch;
}
.steps__foot{
  margin-top:clamp(2rem, 3.5vw, 2.6rem);
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.05rem, 1.6vw, 1.2rem);
  color:var(--terra-ink);
}

/* ----------------------------------------------------------------- about */
.cols--about{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }
.creds{
  position:relative;
  border:1px solid var(--line-d);
  background:var(--paper-3);
  padding:clamp(1.4rem, 2.6vw, 2rem);
}
.stamp{
  width:128px; height:128px;
  color:var(--terracotta);
  margin-bottom:1.5rem;
  transform:rotate(-7deg);
}
.stamp svg{ width:100%; height:100%; display:block; }
.stamp__t{
  font-family:var(--font-body);
  font-size:8.6px; font-weight:600;
  letter-spacing:2.5px;
  fill:currentColor;
  text-transform:uppercase;
}
.creds__h{
  font-family:var(--font-display);
  font-size:.95rem; font-weight:600;
  line-height:1.35;
  padding-bottom:.75rem;
  border-bottom:1px solid var(--line);
  margin-bottom:.9rem;
}
.creds__list{ display:grid; gap:.55rem; }
.creds__list li{
  position:relative;
  padding-left:1.05rem;
  font-size:.92rem; line-height:1.45;
  color:var(--muted);
}
.creds__list li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:6px; height:1px; background:var(--mustard);
}

/* ------------------------------------------------------------------ fees */
.fees{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(1rem, 1.6vw, 1.3rem);
  margin-top:clamp(2.2rem, 4vw, 3rem);
}
.fee{
  display:flex; flex-direction:column; gap:.5rem;
  padding:clamp(1.4rem, 2.4vw, 1.8rem);
  background:var(--paper-3);
  border:1px solid var(--line-d);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.fee:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 34px -26px rgba(38,35,29,.65);
}
.fee__amt{
  font-family:var(--font-display);
  font-size:clamp(2rem, 3.4vw, 2.7rem);
  font-weight:600; line-height:1;
  letter-spacing:-.02em;
}
.fee__label{
  font-size:.68rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  line-height:1.5;
  color:var(--terracotta);
}
.fee p:last-child{ font-size:.95rem; line-height:1.6; color:var(--muted); }
.fee--free{
  background:var(--olive);
  border-color:var(--olive);
  color:var(--paper);
}
.fee--free .fee__label{ color:var(--mustard-lit); }
.fee--free p:last-child{ color:rgba(250,245,234,.88); }

.pull{
  margin:clamp(2.2rem, 4vw, 3rem) 0 0;
  border-left:2px solid var(--mustard);
  padding-left:clamp(1rem, 2vw, 1.5rem);
  max-width:58ch;
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.06rem, 1.7vw, 1.26rem);
  line-height:1.55;
  color:var(--ink-solid);
}

/* ------------------------------------------------------------- questions */
.faq{ margin-top:.4rem; max-width:72ch; }
.faq details{ border-top:1px solid var(--line); }
.faq details:last-child{ border-bottom:1px solid var(--line); }
.faq summary{
  position:relative;
  list-style:none;
  cursor:pointer;
  padding:1.05rem 2rem 1.05rem 0;
  font-family:var(--font-display);
  font-size:1.05rem; font-weight:600;
  line-height:1.4;
  transition:color .2s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+";
  position:absolute; right:.2rem; top:.9rem;
  font-family:var(--font-body);
  font-size:1.3rem; font-weight:400;
  color:var(--terracotta);
  transition:transform .25s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq summary:hover{ color:var(--terracotta); }
.faq details p{
  padding:0 3rem 1.35rem 0;
  font-size:.99rem;
  color:var(--muted);
  max-width:66ch;
}

/* ----------------------------------------------------------------- proof */
.proof{
  display:grid;
  grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  gap:clamp(2rem, 5vw, 4rem);
  align-items:center;
}
.eyebrow--cream{ color:var(--paper); }
.eyebrow--cream::before{ background:var(--paper); }
.proof__num{
  font-family:var(--font-display);
  font-size:clamp(3.6rem, 8vw, 5.6rem);
  font-weight:600; line-height:.9;
  letter-spacing:-.03em;
  margin-top:.9rem;
}
.proof__stars{ display:flex; gap:.22rem; margin-top:.75rem; }
.proof__stars svg{ width:17px; height:17px; fill:var(--paper); }
.proof__count{
  margin-top:.6rem;
  font-size:.78rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
}
.proof__quote{ margin:0; max-width:52ch; }
.proof__quote blockquote{
  font-family:var(--font-display);
  font-size:clamp(1.16rem, 2.1vw, 1.5rem);
  line-height:1.45;
  letter-spacing:-.006em;
}
.proof__quote figcaption{
  margin-top:1.2rem;
  font-size:.74rem;
  letter-spacing:.06em;
  color:var(--paper);
}

/* --------------------------------------------------------------- contact */
.cols--contact{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; }
.lead--cream{ color:rgba(250,245,234,.9); }
.contact__cta{ margin-top:1.8rem; }
.contact__details{ width:100%; }
.crow{ border-top:1px solid rgba(250,245,234,.28); padding:.95rem 0; }
.crow:last-of-type{ border-bottom:1px solid rgba(250,245,234,.28); }
.crow dt{
  font-size:.66rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(250,245,234,.78);
  margin-bottom:.28rem;
}
.crow dd{
  font-family:var(--font-display);
  font-size:clamp(1.12rem, 1.9vw, 1.42rem);
  line-height:1.35;
  overflow-wrap:anywhere;
}
.crow dd a{ transition:color .2s; }
.crow dd a:hover{ color:var(--mustard-lit); }
.crow__small{
  font-family:var(--font-body) !important;
  font-size:.94rem !important;
  line-height:1.5;
}
.arrow{ display:inline-block; margin-left:.4rem; transition:transform .25s var(--ease); }
.crow__small a:hover .arrow{ transform:translateX(4px); }
.contact__note{
  margin-top:1.1rem;
  font-size:.86rem;
  color:rgba(250,245,234,.8);
}

/* ---------------------------------------------------------------- footer */
.foot{
  background:var(--ink-solid);
  color:var(--paper);
  border-top:0;
}
.foot__top{
  grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
  border-bottom-color:rgba(250,245,234,.16);
}
.foot__name{
  font-family:var(--font-display);
  font-size:1.5rem; font-weight:600;
  letter-spacing:-.012em;
}
.foot__tag{
  margin-top:.5rem;
  max-width:28ch;
  font-size:.92rem;
  color:rgba(250,245,234,.72);
}
.foot__creds{
  margin-top:1.2rem;
  font-size:.68rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(250,245,234,.55);
}
.foot__nav{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.foot__h{ color:rgba(250,245,234,.55); font-family:var(--font-body); font-size:.66rem; font-weight:600; }
.foot__nav a{ color:rgba(250,245,234,.82); }
.foot__nav a:hover{ color:var(--mustard); }
.foot__nav ul{ gap:.5rem; }
.foot__bottom{
  color:rgba(250,245,234,.58);
  font-family:var(--font-body);
  font-size:.7rem;
  letter-spacing:.04em;
  border-top:0;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1023px){
  :root{ --hdr-h:68px; }

  .brand__name{ font-size:1.22rem; }
  .brand__sub{ font-size:.55rem; letter-spacing:.13em; }
  .brand__mark{ width:32px; height:32px; }

  .nav__link{ padding:.95rem .1rem; font-size:1.08rem; font-family:var(--font-display); }
  .nav__link::after{ display:none; }
  .nav__item--cta{ margin:1.1rem 0 0; border-bottom:0; padding:0; }
  .nav__item--cta .btn--olive{ width:100%; justify-content:center; padding:1rem; font-size:.95rem; }
  .nav__foot{ display:grid; gap:.45rem; font-size:.86rem; color:var(--muted); padding-top:1.6rem; }
  .nav__headlabel{ color:var(--muted); }
  .nav__close{ color:var(--ink-solid); }

  .cols,
  .cols--about,
  .cols--contact{ grid-template-columns:minmax(0,1fr); gap:clamp(1.4rem, 3vw, 2.2rem); }
  .shead{ margin-bottom:1.4rem; }
  .shead--flush{ margin-bottom:0; }

  .helps{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .steps{ grid-template-columns:minmax(0,1fr); gap:1.1rem; }
  .step p{ max-width:56ch; }
  .proof{ grid-template-columns:minmax(0,1fr); gap:2rem; align-items:start; }
  .proof__quote{ margin-top:.4rem; }
  .fees{ grid-template-columns:minmax(0,1fr); }
  .foot__top{ grid-template-columns:minmax(0,1fr); }
  .faq summary{ font-size:1rem; }
  .faq details p{ padding-right:1.4rem; }
}

@media (max-width:720px){
  .hero{ min-height:0; padding-block:clamp(2rem, 6vw, 3rem) clamp(2.6rem, 7vw, 4rem); }
  .hero__grid{ grid-template-columns:minmax(0,1fr); gap:clamp(1.8rem, 4vw, 2.4rem); }
  .hero__portrait{ justify-self:start; max-width:220px; }
}

@media (max-width:640px){
  body{ font-size:17px; }
  .h2{ font-size:clamp(1.8rem, 7.4vw, 2.2rem); }
  .hero__hello{ font-size:1rem; margin-bottom:1.1rem; }
  .hero__h1{ font-size:clamp(2.4rem, 10.4vw, 3rem); }
  .hero__lead{ font-size:1rem; margin-top:1.2rem; }
  .hero__cta{ margin-top:1.5rem; }
  .hero__cta .btn{ flex:1 1 auto; justify-content:center; }
  .hero__trust{ gap:.5rem .9rem; font-size:.72rem; margin-top:1.6rem; }
  .hero__portrait{ max-width:190px; }
  .frame{ padding:7px; box-shadow:7px 7px 0 -1px rgba(201,154,46,.85); }
  .hero__portrait figcaption{ font-size:.6rem; margin-top:.9rem; }
  .helps{ grid-template-columns:minmax(0,1fr); }
  .step p{ max-width:none; }
  .creds{ padding:1.3rem; }
  .stamp{ width:108px; height:108px; }
  .fee{ padding:1.25rem; }
  .pull{ font-size:1.02rem; }
  .faq summary{ padding:1rem 1.8rem 1rem 0; font-size:.98rem; }
  .faq summary::after{ right:0; top:.85rem; }
  .faq details p{ padding:0 .6rem 1.2rem 0; font-size:.95rem; }
  .proof__num{ font-size:3.4rem; }
  .proof__quote blockquote{ font-size:1.1rem; }
  .crow dd{ font-size:1.06rem; }
  .foot__top{ gap:2rem; }
  .foot__nav{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.6rem; }
  .foot__bottom{ flex-direction:column; gap:.35rem; }
}