/* ==========================================================================
   Sandra Wilson Clinical Hypnotherapy — The Quiet Hour
   --------------------------------------------------------------------------
   base.css owns: reset, wrap, header/nav mechanics, buttons, footer skeleton,
   reveals, preloader shell, hero-headline contract, responsive nav.
   This file owns: tokens, the hero, the ledger stack, the 60-minute measure,
   tiles, fees, questions, proof, contact.

   Palette: navy / ivory / brass. Navy is from her real logo.
   Type: Petrona (display) + Assistant (body).
   ========================================================================== */

:root{
  /* --- brand --- */
  --navy:      #121c33;
  --navy-2:    #0d1526;
  --navy-3:    #1b2740;
  --ivory:     #f7f2e7;
  --ivory-2:   #efe7d5;
  --brass:     #a8874e;
  --brass-lit: #c9a86c;
  --brass-deep:#7a5f33;
  --ink-deep:  #1c1a17;
  --warm-mute: #6a6458;

  /* --- base.css token map --- */
  --ink:        var(--navy);
  --ink-2:      var(--navy-2);
  --ink-3:      var(--navy-3);
  --surface:    var(--ivory);
  --surface-2:  var(--ivory-2);
  --text:       var(--ivory);
  --muted:      #a8b1c4;
  --ink-text:   var(--ink-deep);
  --ink-mute:   var(--warm-mute);
  --accent:     var(--brass);
  --accent-lit: var(--brass-lit);
  --accent-2:   var(--brass-lit);
  --line:       rgba(247,242,231,.16);
  --line-d:     rgba(28,26,23,.14);

  /* --- type --- */
  --font-display: "Petrona", "Iowan Old Style", Georgia, serif;
  --font-body:    "Assistant", system-ui, -apple-system, sans-serif;
  --font-mono:    "Assistant", system-ui, sans-serif;

  --wrap-max: 1240px;
  --panel-max: 1180px;
  --radius: 3px;

  --label: .66rem;
  --lead: 1.06rem;
}

/* ---------- page ---------- */
body{
  font-size:17.5px;
  font-weight:300;
  line-height:1.72;
  background:var(--navy);
  letter-spacing:.002em;
}
::selection{ background:var(--brass); color:var(--navy); }
:focus-visible{ outline:2px solid var(--brass-lit); outline-offset:3px; }
.panel :focus-visible,
.band :focus-visible{ outline-color:var(--brass-deep); }

/* no fixed overlays: the hero carries its own light, the panels stay paper-clean */

.skip{
  position:absolute; left:-9999px; top:0; z-index:1000;
  padding:.8rem 1.1rem; background:var(--ivory); color:var(--navy);
  font-size:.85rem; font-weight:600;
}
.skip:focus{ left:.8rem; top:.8rem; }

/* no JS at all: no stuck preloader, no hidden blocks */
.no-js .pre{ display:none; }
.no-js [data-reveal]{ opacity:1; transform:none; }

/* ---------- preloader ---------- */
.pre{ background:var(--navy-2); }
.pre__mark{ display:grid; justify-items:center; gap:1.4rem; }
.pre__mark svg{
  width:clamp(74px,10vw,104px); height:auto;
  color:var(--brass-lit);
  overflow:visible;
}
.pre__arc{
  stroke-dasharray:210;
  stroke-dashoffset:210;
  animation:arc-draw 2s cubic-bezier(.45,.02,.28,1) .1s forwards;
}
@keyframes arc-draw{ to{ stroke-dashoffset:0; } }
.pre__word{
  font-family:var(--font-display);
  font-size:.82rem; letter-spacing:.34em; text-transform:uppercase;
  color:rgba(247,242,231,.7);
}
.pre__meta{ color:rgba(247,242,231,.55); letter-spacing:.24em; font-size:.64rem; }
.pre__pct{ color:var(--brass-lit); }
.pre__bar{ background:rgba(247,242,231,.16); width:min(240px,58vw); }
.pre__bar i{ background:var(--brass-lit); }

/* ---------- header ---------- */
.hdr{ background:var(--navy); border-bottom:1px solid rgba(247,242,231,.1); }
.brand{ display:block; line-height:1.1; }
.brand__name{
  display:block;
  font-family:var(--font-display); font-weight:500;
  font-size:1.32rem; letter-spacing:-.015em;
  color:var(--ivory);
}
.brand__sub{
  display:block; margin-top:.34rem;
  font-size:.585rem; font-weight:400; letter-spacing:.215em;
  text-transform:uppercase; color:rgba(247,242,231,.6);
}
.nav__link{ color:rgba(247,242,231,.86); font-weight:400; font-size:.845rem; padding:.62rem .66rem; }
.nav__link:hover{ color:var(--brass-lit); background:rgba(247,242,231,.055); }
.nav__cta{ margin-left:.7rem; }
.nav__cta .btn{ padding:.7rem 1.05rem; font-size:.8rem; letter-spacing:.01em; }
.nav__foot{ display:none; }

@media (min-width:1024px){
  .hdr__in{ min-height:84px; gap:.8rem; }
  .nav{ display:flex; align-items:center; }
}
@media (max-width:1023px){
  .nav__foot{ display:grid; }
}

/* ---------- buttons ---------- */
.btn{
  border-radius:2px;
  font-weight:600;
  letter-spacing:.012em;
  padding:.92rem 1.4rem;
}
.btn--solid{ background:var(--brass-lit); color:var(--navy); }
.btn--solid:hover{ transform:translateY(-2px); background:#d7b87c; filter:none; }
.btn--ghost{ border:1px solid rgba(247,242,231,.32); color:var(--ivory); }
.btn--ghost:hover{ border-color:var(--brass-lit); color:var(--brass-lit); background:rgba(247,242,231,.04); }

/* ==========================================================================
   HERO — navy field, framed inset portrait
   ========================================================================== */
.hero{
  position:relative;
  --hero-pad-t: clamp(2.4rem,6vw,5rem);
  --hero-pad-b: clamp(2rem,3.6vw,3rem);
  background:
    radial-gradient(90% 70% at 8% 0%, rgba(201,168,108,.13) 0%, transparent 62%),
    radial-gradient(70% 60% at 100% 100%, rgba(27,39,64,.9) 0%, transparent 70%),
    var(--navy);
  color:var(--ivory);
  min-height:calc(100svh - 84px);
  display:flex; align-items:flex-end;
  padding-block:var(--hero-pad-t) var(--hero-pad-b);
}
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);
  gap:clamp(2rem,4.5vw,4rem);
  align-items:end;
  min-height:calc(100svh - 84px - var(--hero-pad-t) - var(--hero-pad-b));
  width:100%;
}
.hero__copy{
  padding-bottom:clamp(.4rem,1.6vw,1.6rem);
  align-self:center;
}
.hero__eyebrow{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem;
  font-size:.655rem; font-weight:400; letter-spacing:.22em; text-transform:uppercase;
  color:var(--brass-lit);
  margin-bottom:clamp(1.1rem,2vw,1.7rem);
}
.hero__eyebrow-sep{ opacity:.55; }
.hero__h1{
  --h1-size:clamp(2.3rem, 6.6vw, 4.5rem);
  font-weight:500;
  line-height:1.02;
  letter-spacing:-.024em;
  color:var(--ivory);
}
.hero__h1 .line{ padding-block:.06em; }
.hero__lead{
  margin-top:clamp(1.2rem,2.2vw,1.8rem);
  font-size:clamp(1rem,1.25vw,1.09rem);
  line-height:1.7;
  font-weight:300;
  color:rgba(247,242,231,.82);
  max-width:44ch;
}
.hero__actions{
  display:flex; flex-wrap:wrap; gap:.7rem;
  margin-top:clamp(1.6rem,3vw,2.2rem);
}
.hero__marks{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  margin-top:clamp(2rem,4vw,3rem);
  border-top:1px solid rgba(247,242,231,.16);
  padding-top:clamp(1rem,2vw,1.4rem);
}
.hero__marks li{
  padding-right:.9rem;
  border-right:1px solid rgba(247,242,231,.13);
}
.hero__marks li:last-child{ border-right:0; }
.hero__marks li + li{ padding-left:clamp(.6rem,1.2vw,1.1rem); }
.mark__k{
  display:block;
  font-family:var(--font-display);
  font-size:.95rem; font-weight:500; letter-spacing:.005em;
  color:var(--ivory);
  line-height:1.25;
}
.mark__v{
  display:block; margin-top:.25rem;
  font-size:.66rem; letter-spacing:.11em; text-transform:uppercase;
  color:rgba(247,242,231,.55);
  line-height:1.4;
}

/* framed portrait — overlaps the panel below */
.hero__portrait{
  position:relative; z-index:3;
  justify-self:end;
  width:100%; max-width:400px;
  margin:0 0 calc(-1 * clamp(4.5rem,10vw,8.5rem));
  background:var(--ivory);
  color:var(--ink-deep);
  padding:clamp(.55rem,1vw,.8rem) clamp(.55rem,1vw,.8rem) 0;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.75), 0 2px 0 rgba(247,242,231,.16);
}
.frame{ position:relative; overflow:hidden; background:var(--navy-2); }
.frame::after{
  content:""; position:absolute; inset:clamp(.42rem,.8vw,.62rem);
  border:1px solid rgba(168,135,78,.5);
  pointer-events:none;
}
.frame img{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; }
.hero__portrait figcaption{
  padding:.7rem .2rem .85rem;
  font-size:.62rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--warm-mute);
}

/* ==========================================================================
   LEDGER STACK — centred ivory panels, navy tabs
   ========================================================================== */
.stack{
  position:relative; z-index:1;
  --gutter: var(--pad);
  background:var(--navy);
  padding:clamp(1.6rem,3.4vw,3rem) var(--gutter) clamp(1.6rem,3vw,2.6rem);
}
.panel{
  position:relative;
  max-width:var(--panel-max);
  margin:0 auto clamp(1.6rem,2.8vw,2.4rem);
  background:var(--ivory);
  color:var(--ink-deep);
  border:1px solid rgba(168,135,78,.26);
  scroll-margin-top:96px;
}
.panel--tint{ background:var(--ivory-2); }
.panel__tab{
  position:absolute; left:-1px; top:0;
  transform:translateY(-100%);
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.52rem .9rem .5rem;
  background:var(--navy);
  color:var(--ivory);
  font-size:.63rem; letter-spacing:.2em; text-transform:uppercase;
  white-space:nowrap;
}
.tab__n{ color:var(--brass-lit); font-size:.6rem; letter-spacing:.12em; }
.panel__in{
  padding:clamp(2rem,4.2vw,4.2rem) clamp(1.3rem,4vw,3.6rem);
}
.panel__h2{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.75rem,4vw,2.85rem);
  line-height:1.08; letter-spacing:-.02em;
  max-width:20ch;
}
.panel__lead{
  font-size:var(--lead); line-height:1.7; font-weight:300;
  color:var(--warm-mute);
  max-width:46ch;
}
.panel__head{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.9fr);
  gap:clamp(1.2rem,3vw,3rem);
  align-items:end;
  margin-bottom:clamp(1.8rem,3.4vw,2.9rem);
  padding-bottom:clamp(1.4rem,2.6vw,2rem);
  border-bottom:1px solid var(--line-d);
}
.panel__note{
  margin-top:clamp(1.3rem,2.4vw,1.9rem);
  font-size:.82rem; letter-spacing:.03em;
  color:var(--warm-mute);
  padding-top:1rem;
  border-top:1px solid var(--line-d);
}
.panel__note--wide{ max-width:none; }

/* ---------- nine tiles ---------- */
.tiles{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:rgba(28,26,23,.16);
  border:1px solid rgba(28,26,23,.16);
}
.tile{
  background:var(--ivory);
  padding:clamp(1.15rem,2vw,1.6rem) clamp(.95rem,1.6vw,1.35rem) clamp(1.25rem,2.2vw,1.75rem);
  transition:transform .32s var(--ease), background .32s var(--ease), box-shadow .32s var(--ease);
}
.tile:hover{
  transform:translateY(-4px);
  background:#fbf7ec;
  box-shadow:0 18px 34px -26px rgba(28,26,23,.55);
}
.tile__n{
  display:block;
  font-size:.62rem; letter-spacing:.16em;
  color:var(--brass-deep);
  margin-bottom:.75rem;
}
.tile__h{
  font-family:var(--font-display); font-weight:500;
  font-size:1.06rem; line-height:1.24; letter-spacing:-.005em;
  margin-bottom:.5rem;
}
.tile p{
  font-size:.9rem; line-height:1.62;
  color:var(--warm-mute);
}

/* ==========================================================================
   NAVY BAND — how it works + the 60-minute measure
   ========================================================================== */
.band{
  position:relative;
  margin:0 calc(-1 * var(--gutter)) clamp(1.6rem,2.8vw,2.4rem);
  background:var(--navy-2);
  color:var(--ivory);
  scroll-margin-top:96px;
  border-block:1px solid rgba(168,135,78,.24);
}
.band__in{
  max-width:var(--panel-max);
  margin-inline:auto;
  padding:clamp(2.6rem,5vw,4.8rem) clamp(1.3rem,4vw,3.6rem);
  display:grid;
  grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);
  gap:clamp(2rem,5vw,4.2rem);
  align-items:center;
}
.band__eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.63rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass-lit);
  margin-bottom:1.2rem;
}
.band__h2{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.8rem,4vw,2.9rem);
  line-height:1.06; letter-spacing:-.02em;
  color:var(--ivory);
  max-width:18ch;
}
.band__lead{
  margin-top:1.2rem;
  font-size:var(--lead); line-height:1.72; font-weight:300;
  color:rgba(247,242,231,.8);
  max-width:46ch;
}
.steps{
  margin-top:clamp(1.5rem,3vw,2.2rem);
  display:grid; gap:.95rem;
}
.steps li{
  display:grid;
  grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);
  gap:.2rem 1.2rem;
  padding-top:.95rem;
  border-top:1px solid rgba(247,242,231,.14);
}
.steps__k{
  font-size:.68rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--brass-lit);
  padding-top:.18rem;
}
.steps__v{ font-size:.93rem; line-height:1.6; color:rgba(247,242,231,.78); }

/* the signature detail: 40 minutes talking, 20 in trance */
.measure{
  padding:clamp(1.2rem,2.4vw,1.8rem);
  border:1px solid rgba(247,242,231,.2);
  background:linear-gradient(180deg, rgba(247,242,231,.055), rgba(247,242,231,.015));
}
.measure__label{
  font-size:.63rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass-lit);
  margin-bottom:1rem;
}
.measure__bar{
  display:flex;
  height:clamp(4rem,7vw,4.7rem);
  border:1px solid rgba(247,242,231,.34);
}
.measure__talk{
  width:66.6667%;
  background:var(--ivory);
  color:var(--navy);
  display:flex; flex-direction:column; justify-content:center; gap:.18rem;
  padding-left:clamp(.55rem,1.4vw,.95rem);
}
.measure__trance{
  width:33.3333%;
  border-left:1px solid rgba(247,242,231,.34);
  background:repeating-linear-gradient(135deg, rgba(201,168,108,.32) 0 5px, rgba(201,168,108,0) 5px 11px);
  color:var(--ivory);
  display:flex; flex-direction:column; justify-content:center; gap:.18rem;
  padding-left:clamp(.5rem,1.2vw,.8rem);
}
.measure__bar i{
  font-style:normal;
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.1rem,1.8vw,1.35rem); line-height:1;
}
.measure__bar em{
  font-style:normal;
  font-size:.565rem; letter-spacing:.115em; text-transform:uppercase;
  line-height:1.3;
  color:inherit;
  opacity:.85;
}
.measure__talk em{ color:var(--warm-mute); opacity:1; }
.measure__scale{
  display:flex; justify-content:space-between;
  margin-top:.45rem;
  font-size:.6rem; letter-spacing:.1em;
  color:rgba(247,242,231,.58);
}
.measure__note{
  margin-top:1.15rem;
  font-size:.82rem; line-height:1.6;
  color:rgba(247,242,231,.62);
  border-top:1px solid rgba(247,242,231,.14);
  padding-top:.9rem;
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(1.6rem,4vw,3.6rem);
  align-items:start;
}
.about__portrait{ margin:0; }
.about__portrait .frame{
  background:var(--navy-2);
  box-shadow:0 24px 48px -36px rgba(28,26,23,.7);
  outline:1px solid rgba(28,26,23,.12);
}
.about__portrait figcaption{
  padding-top:.75rem;
  font-size:.63rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--warm-mute);
}
.about__copy .panel__h2{ margin-bottom:clamp(1.1rem,2vw,1.5rem); }
.prose p{
  font-size:1.02rem; line-height:1.78; font-weight:300;
  color:#2e2a24;
  max-width:62ch;
}
.prose p + p{ margin-top:.95rem; }
.prose p:first-child::first-letter{
  font-family:var(--font-display);
  font-weight:500;
  font-size:2.5rem; line-height:.9;
  float:left; margin:.3rem .5rem 0 0;
  color:var(--brass-deep);
}
.creds{
  margin-top:clamp(1.6rem,3vw,2.3rem);
  padding-top:clamp(1.2rem,2.2vw,1.6rem);
  border-top:1px solid var(--line-d);
}
.creds__h{
  font-size:.645rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass-deep);
  margin-bottom:.9rem;
}
.creds__list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.4rem 1.6rem;
}
.creds__list li{
  position:relative;
  padding-left:1rem;
  font-size:.855rem; line-height:1.55;
  color:var(--warm-mute);
}
.creds__list li::before{
  content:"";
  position:absolute; left:0; top:.62em;
  width:5px; height:5px;
  border:1px solid var(--brass);
  transform:rotate(45deg);
}

/* ==========================================================================
   FEES
   ========================================================================== */
.fees{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.85rem,1.8vw,1.4rem);
  align-items:stretch;
}
.fee{
  position:relative;
  display:flex; flex-direction:column;
  padding:clamp(1.3rem,2.2vw,1.9rem);
  background:#fdfaf2;
  border:1px solid rgba(28,26,23,.16);
}
.fee--feature{
  background:var(--navy);
  color:var(--ivory);
  border-color:var(--navy);
  box-shadow:0 26px 50px -34px rgba(13,21,38,.8);
}
.fee__flag{
  position:absolute; top:0; right:0;
  padding:.34rem .6rem;
  background:var(--brass);
  color:var(--navy);
  font-size:.55rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
}
.fee__kicker{
  font-size:.63rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass-deep);
  margin-bottom:.75rem;
}
.fee--feature .fee__kicker{ color:var(--brass-lit); }
.fee__price{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(2.2rem,4vw,2.9rem); line-height:1;
  letter-spacing:-.02em;
  color:var(--brass-deep);
}
.fee--feature .fee__price{ color:var(--brass-lit); }
.fee__price span{ font-size:1em; }
.fee__len{
  margin-top:.5rem;
  font-size:.78rem; letter-spacing:.06em;
  color:var(--warm-mute);
}
.fee--feature .fee__len{ color:rgba(247,242,231,.6); }
.fee__body{
  margin-top:1rem; padding-top:1rem;
  border-top:1px solid rgba(28,26,23,.14);
  font-size:.9rem; line-height:1.65;
  color:var(--warm-mute);
}
.fee--feature .fee__body{
  border-top-color:rgba(247,242,231,.18);
  color:rgba(247,242,231,.78);
}

/* ==========================================================================
   QUESTIONS
   ========================================================================== */
.questions{
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(1.6rem,4vw,3.6rem);
  align-items:start;
}
.questions__head .panel__h2{ max-width:14ch; margin-bottom:1.1rem; }
.qa{ border-top:1px solid rgba(28,26,23,.18); }
.qa__item{ border-bottom:1px solid rgba(28,26,23,.18); }
.qa__q{
  display:flex; align-items:center; justify-content:space-between; gap:1.4rem;
  padding:1.05rem 0;
  font-family:var(--font-display); font-weight:500;
  font-size:1.02rem; line-height:1.35; letter-spacing:-.005em;
  cursor:pointer;
  list-style:none;
}
.qa__q::-webkit-details-marker{ display:none; }
.qa__q:hover{ color:var(--brass-deep); }
.qa__i{
  position:relative; flex:0 0 auto;
  width:14px; height:14px;
}
.qa__i::before,
.qa__i::after{
  content:""; position:absolute; background:var(--brass-deep);
  transition:transform .28s var(--ease), opacity .28s var(--ease);
}
.qa__i::before{ left:0; top:6.5px; width:14px; height:1px; }
.qa__i::after{ left:6.5px; top:0; width:1px; height:14px; }
.qa__item[open] .qa__i::after{ transform:scaleY(0); opacity:0; }
.qa__a{ padding:0 0 1.2rem; max-width:56ch; }
.qa__a p{
  font-size:.95rem; line-height:1.72;
  color:var(--warm-mute);
}

/* ==========================================================================
   PROOF
   ========================================================================== */
.proof{
  display:grid;
  grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,3.6rem);
  align-items:center;
}
.proof__rating{
  padding-right:clamp(1rem,2vw,2rem);
  border-right:1px solid rgba(28,26,23,.16);
}
.proof__num{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(3.4rem,7vw,5rem); line-height:.92;
  letter-spacing:-.03em;
  color:var(--brass-deep);
}
.proof__stars{ display:flex; gap:.22rem; margin-top:.65rem; color:var(--brass); }
.proof__meta{
  margin-top:.7rem;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--warm-mute);
}
.quote{ margin:0; }
.quote blockquote{ margin:0; }
.quote blockquote p{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.15rem,2.1vw,1.55rem);
  line-height:1.52; letter-spacing:-.008em;
  color:var(--ink-deep);
  max-width:34ch;
}
.quote figcaption{ margin-top:1.1rem; padding-top:.9rem; border-top:1px solid rgba(28,26,23,.16); }
.quote__name{
  display:block;
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brass-deep);
}
.quote__note{
  display:block; margin-top:.45rem;
  font-size:.76rem; line-height:1.55;
  color:var(--warm-mute);
  max-width:52ch;
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.panel--contact{
  background:var(--navy);
  color:var(--ivory);
  border-color:rgba(201,168,108,.28);
}
.panel--contact .panel__tab{
  background:var(--navy-2);
  color:var(--ivory);
  border-bottom:1px solid rgba(201,168,108,.55);
}
.panel--contact .tab__n{ color:var(--brass-lit); }
.contact{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.8rem,4vw,3.6rem);
  align-items:start;
}
.contact__copy .panel__h2{ color:var(--ivory); max-width:16ch; }
.contact__lead{
  margin-top:1.1rem;
  font-size:var(--lead); line-height:1.72; font-weight:300;
  color:rgba(247,242,231,.78);
  max-width:44ch;
}
.contact__actions{
  display:flex; flex-wrap:wrap; gap:.7rem;
  margin-top:clamp(1.4rem,2.6vw,2rem);
}
.contact__details{
  padding:clamp(1.2rem,2.2vw,1.7rem);
  border:1px solid rgba(247,242,231,.18);
  background:rgba(247,242,231,.035);
}
.details{ display:grid; gap:1rem; }
.details div{
  display:grid;
  grid-template-columns:5.6rem minmax(0,1fr);
  gap:1rem;
  padding-bottom:.9rem;
  border-bottom:1px solid rgba(247,242,231,.12);
}
.details div:last-child{ border-bottom:0; padding-bottom:0; }
.details dt{
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass-lit);
  padding-top:.2rem;
}
.details dd{
  font-size:.95rem; line-height:1.6;
  color:rgba(247,242,231,.85);
}
.details a{
  border-bottom:1px solid rgba(201,168,108,.45);
  padding-bottom:.06em;
  transition:color .2s, border-color .2s;
}
.details a:hover{ color:var(--brass-lit); border-color:var(--brass-lit); }
.link-ext::after{
  content:"↗";
  font-size:.8em; margin-left:.32em;
  color:var(--brass-lit);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{
  background:var(--navy);
  border-top:1px solid rgba(247,242,231,.1);
  padding-top:clamp(2.4rem,4.4vw,3.6rem);
}
@media (min-width:1024px){
  .foot__top{ grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr); }
  .foot__nav{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
.brand__name--foot{ font-size:1.4rem; }
.foot__brand .brand__sub{ margin-top:.45rem; }
.foot__blurb{
  margin-top:1.1rem;
  font-size:.86rem; line-height:1.68;
  color:rgba(247,242,231,.55);
  max-width:38ch;
}
.foot__h{ color:rgba(247,242,231,.42); }
.foot__nav a{ color:rgba(247,242,231,.72); font-size:.855rem; }
.foot__nav a:hover{ color:var(--brass-lit); }
.foot__bottom{
  color:rgba(247,242,231,.56);
  font-family:var(--font-body);
  font-size:.68rem; letter-spacing:.05em;
  border-top:1px solid rgba(247,242,231,.1);
  margin-top:2.2rem;
}

/* ==========================================================================
   RESPONSIVE — 1024 / 860 / 640
   ========================================================================== */
@media (max-width:1180px){
  .nav__cta .btn{ padding:.62rem .85rem; font-size:.76rem; }
  .nav__link{ font-size:.81rem; padding:.6rem .58rem; }
  .mark__k{ font-size:.88rem; }
}

@media (max-width:1023px){
  .hero{ min-height:auto; padding-block:clamp(2.4rem,6vw,3.4rem) clamp(2rem,4vw,3rem); }
  .hero__grid{
    grid-template-columns:minmax(0,1fr) minmax(0,.78fr);
    gap:clamp(1.4rem,3vw,2.4rem);
    min-height:0;
  }
  .hero__copy{ align-self:end; }
  .hero__portrait{ margin-bottom:0; }
  .hero__marks{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:1rem; }
  .hero__marks li:nth-child(2){ border-right:0; }
  .hero__marks li:nth-child(3){ padding-left:0; }
  .hero__marks li:nth-child(odd){ padding-left:0; }

  .nav__cta{ margin:1.1rem 0 .4rem; }
  .nav__cta .btn{ display:flex; width:100%; justify-content:center; padding:.95rem 1rem; font-size:.9rem; }

  .panel__head{ grid-template-columns:minmax(0,1fr); align-items:start; gap:.9rem; }
  .about{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
  .questions{ grid-template-columns:minmax(0,1fr); gap:1.6rem; }
  .questions__head .panel__h2{ max-width:24ch; }
  .band__in{ grid-template-columns:minmax(0,1fr); gap:clamp(1.8rem,4vw,2.6rem); }
  .measure{ max-width:560px; }
  .proof{ grid-template-columns:minmax(0,1fr); gap:1.6rem; }
  .proof__rating{
    display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem 1rem;
    border-right:0; border-bottom:1px solid rgba(28,26,23,.16);
    padding:0 0 1.1rem;
  }
  .proof__stars{ margin-top:.3rem; }
  .proof__meta{ margin-top:.3rem; }
  .contact{ grid-template-columns:minmax(0,1fr); }
  .contact__details{ max-width:560px; }
  .fees{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fee--feature{ grid-column:span 2; }
}

@media (max-width:859px){
  .hero{ display:block; min-height:0; }
  .hero__grid{ grid-template-columns:minmax(0,1fr); gap:clamp(1.8rem,4vw,2.4rem); }
  .hero__copy{ padding-bottom:0; }
  .hero__portrait{
    justify-self:start;
    max-width:min(100%,400px);
    margin-bottom:0;
  }
  .hero__lead{ max-width:none; }
  .hero__marks{ margin-top:1.8rem; }
  .about{ grid-template-columns:minmax(0,1fr); }
  .about__portrait{ max-width:380px; }
  .creds__list{ grid-template-columns:minmax(0,1fr); gap:.45rem; }
  .panel__in{ padding-inline:clamp(1.15rem,5vw,2rem); }
}

@media (max-width:640px){
  body{ font-size:17px; }
  .hdr__in{ min-height:70px; }
  .brand__name{ font-size:1.16rem; }
  .brand__sub{ font-size:.52rem; letter-spacing:.18em; }

  .hero__eyebrow{ font-size:.6rem; letter-spacing:.16em; gap:.45rem; }
  .hero__h1{ --h1-size:clamp(1.85rem,8.4vw,2.6rem); }
  .hero__lead{ font-size:1rem; }
  .hero__actions .btn{ width:100%; justify-content:center; }
  .hero__marks{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mark__k{ font-size:.88rem; }

  .stack{ --gutter: clamp(.6rem,3vw,1rem); }
  .panel__tab{ font-size:.57rem; letter-spacing:.15em; padding:.46rem .62rem .44rem; }
  .panel__h2{ font-size:clamp(1.6rem,7.4vw,2.05rem); max-width:none; }
  .panel__lead{ font-size:1rem; }

  .tiles{ grid-template-columns:minmax(0,1fr); }
  .tile{ padding:1.1rem 1.05rem 1.25rem; }

  .band__in{ padding-inline:clamp(1.15rem,5vw,2rem); }
  .steps li{ grid-template-columns:minmax(0,1fr); gap:.3rem; }
  .steps__k{ padding-top:0; }

  .fees{ grid-template-columns:minmax(0,1fr); }
  .fee--feature{ grid-column:auto; }
  .fee__flag{ position:static; display:inline-block; margin-bottom:.9rem; }

  .prose p:first-child::first-letter{ font-size:2.1rem; }
  .quote blockquote p{ max-width:none; }

  .contact__actions .btn{ width:100%; justify-content:center; }
  .details div{ grid-template-columns:minmax(0,1fr); gap:.2rem; }

  .foot__nav{ grid-template-columns:minmax(0,1fr); gap:1.6rem; }
  .foot__bottom{ gap:.35rem; }
}

/* nobody wants to sit through the arc twice */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .tile:hover{ transform:none; }
  .btn--solid:hover{ transform:none; }
}