/* ==========================================================================
   Alchemy Therapy — design system
   Palette : pale lichen ground, forest ink, deep petrol "chambers", brass
   Type    : Newsreader (display) / Karla (body + utility)
   ========================================================================== */

:root{
  /* light ground */
  --ground:        #E9EBE4;
  --ground-raised: #F3F4EF;
  --ground-sunk:   #DFE2D9;
  --ink:           #161F1B;
  --ink-soft:      #4C574F;
  --ink-faint:     #78827A;
  --rule:          #CDD2C7;
  --rule-soft:     #DBDFD4;

  /* dark chambers */
  --night:         #111917;
  --night-raised:  #1A2320;
  --night-rule:    #2C3733;
  --bone:          #E7E4DA;
  --bone-soft:     #9EA79D;

  /* accents */
  --brass:         #A87E3C;
  --brass-deep:    #7F5D26;
  --brass-lift:    #C9A25C;
  --verdigris:     #7FA08D;

  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans:  "Karla", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --measure: 62ch;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --shell: 1180px;

  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.86rem);
  --step-0:  clamp(1rem, 0.97rem + 0.15vw, 1.08rem);
  --step-1:  clamp(1.15rem, 1.09rem + 0.3vw, 1.3rem);
  --step-2:  clamp(1.4rem, 1.28rem + 0.6vw, 1.75rem);
  --step-3:  clamp(1.85rem, 1.6rem + 1.2vw, 2.6rem);
  --step-4:  clamp(2.4rem, 1.9rem + 2.4vw, 3.9rem);
  --step-5:  clamp(2.9rem, 2.1rem + 3.6vw, 5rem);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--step-0);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:380;
  line-height:1.08;
  letter-spacing:-0.012em;
  text-wrap:balance;
  margin:0;
}
h1{ font-size:var(--step-5); }
h2{ font-size:var(--step-4); }
h3{ font-size:var(--step-2); }
p{ margin:0; }
em{ font-style:italic; }

a{ color:inherit; }

img{ max-width:100%; display:block; }

::selection{ background:var(--brass); color:#fff; }

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

/* --------------------------------------------------------------- shell -- */

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{ padding-block:clamp(3.5rem, 8vw, 7rem); }
.section--tight{ padding-block:clamp(2.5rem, 5vw, 4rem); }

.night{
  background:var(--night);
  color:var(--bone);
}
.night h1,.night h2,.night h3{ color:var(--bone); }

/* --------------------------------------------------------------- type --- */

.label{
  font-family:var(--sans);
  font-size:clamp(0.82rem, 0.78rem + 0.2vw, 0.95rem);
  font-weight:600;
  letter-spacing:0.12em;
  line-height:1.4;
  text-wrap:balance;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0;
}
.night .label{ color:var(--verdigris); }

.lede{
  font-family:var(--serif);
  font-size:var(--step-2);
  line-height:1.42;
  font-weight:300;
  color:var(--ink-soft);
  max-width:34ch;
}
.night .lede{ color:var(--bone-soft); }

.prose{ max-width:var(--measure); }
.prose p + p{ margin-top:1.1em; }

.muted{ color:var(--ink-soft); }
.night .muted{ color:var(--bone-soft); }

.small{ font-size:var(--step--1); line-height:1.55; }

.rule{
  border:0;
  border-top:1px solid var(--rule);
  margin:0;
}
.night .rule{ border-color:var(--night-rule); }

/* ------------------------------------------------------------- buttons -- */

.btn{
  --btn-bg:var(--ink);
  --btn-fg:var(--ground-raised);
  display:inline-flex;
  align-items:center;
  gap:0.6em;
  padding:0.85em 1.5em;
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-family:var(--sans);
  font-size:0.92rem;
  font-weight:600;
  letter-spacing:0.02em;
  border:1px solid var(--btn-bg);
  border-radius:2px;
  text-decoration:none;
  cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn--brass{ --btn-bg:var(--brass); --btn-fg:#fff; }
.btn--brass:hover{ --btn-bg:var(--brass-deep); }
.btn--ghost{
  --btn-bg:transparent; --btn-fg:var(--ink);
  border-color:var(--rule);
}
.btn--ghost:hover{ border-color:var(--ink); }
.night .btn--ghost{ --btn-fg:var(--bone); border-color:var(--night-rule); }
.night .btn--ghost:hover{ border-color:var(--bone-soft); }
.btn[disabled]{ opacity:.4; cursor:not-allowed; transform:none; }

.btn__arrow{ transition:transform .25s ease; }
.btn:hover .btn__arrow{ transform:translateX(3px); }

.textlink{
  display:inline-flex;
  align-items:center;
  gap:.45em;
  font-weight:600;
  font-size:0.92rem;
  text-decoration:none;
  color:var(--brass-deep);
  border-bottom:1px solid color-mix(in srgb, var(--brass) 45%, transparent);
  padding-bottom:1px;
  transition:border-color .2s ease;
}
.textlink:hover{ border-color:var(--brass); }
.night .textlink{ color:var(--brass-lift); }

/* -------------------------------------------------------------- header -- */

.masthead{
  position:sticky;
  top:0;
  z-index:60;
  background:color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule-soft);
}
.masthead__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  min-height:74px;
}

.wordmark{
  display:inline-flex;
  flex-direction:column;
  line-height:1;
  text-decoration:none;
  color:var(--ink);
}
.wordmark__a{
  font-family:var(--serif);
  font-size:1.32rem;
  font-weight:400;
  letter-spacing:0.14em;
  text-transform:uppercase;
}
.wordmark__b{
  font-family:var(--sans);
  font-size:0.6rem;
  font-weight:600;
  letter-spacing:0.42em;
  text-transform:uppercase;
  color:var(--brass-deep);
  margin-top:.32em;
  padding-left:.18em;
}

.nav{ display:flex; align-items:center; gap:clamp(1rem,2.2vw,2rem); }
.nav__link{
  font-size:0.86rem;
  font-weight:500;
  letter-spacing:0.01em;
  text-decoration:none;
  color:var(--ink-soft);
  padding-block:.4rem;
  border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.nav__link:hover{ color:var(--ink); }
.nav__link[aria-current="page"]{ color:var(--ink); border-color:var(--brass); }

.masthead .btn{ padding:0.65em 1.1em; font-size:0.82rem; }

.navtoggle{
  display:none;
  background:none;
  border:1px solid var(--rule);
  border-radius:2px;
  padding:.5rem .7rem;
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink);
  cursor:pointer;
}

@media (max-width: 900px){
  .navtoggle{ display:block; }
  .masthead__inner{ flex-wrap:wrap; }
  .nav{
    order:3;
    width:100%;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    border-top:1px solid var(--rule-soft);
    padding-block:.5rem 1rem;
  }
  .nav[hidden]{ display:none; }
  .nav__link{ width:100%; padding-block:.7rem; border-bottom:1px solid var(--rule-soft); }
  .nav .btn{ margin-top:.9rem; }
}

/* ---------------------------------------------------------------- hero -- */

.hero{
  padding-block:clamp(3rem, 7vw, 6rem) clamp(3rem, 7vw, 5.5rem);
}
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,0.92fr);
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:center;
}
.hero__eyebrow{ margin-bottom:1.6rem; }
.hero h1{ margin-bottom:1.5rem; }
.hero h1 em{ color:var(--brass-deep); font-weight:300; }
.hero__lede{ margin-bottom:2rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:2.4rem; }
.hero__meta{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem 1.4rem;
  padding-top:1.4rem;
  border-top:1px solid var(--rule);
  font-size:var(--step--1);
  color:var(--ink-soft);
}
.hero__meta strong{ color:var(--ink); font-weight:600; }

@media (max-width: 860px){
  .hero__grid{ grid-template-columns:1fr; }
}

.bio-pull{
  font-family:var(--serif);
  font-style:italic;
  font-weight:300;
  font-size:var(--step-2);
  line-height:1.3;
  color:var(--brass-deep);
  max-width:16ch;
  text-wrap:balance;
}
@media (max-width: 780px){
  .bio-pull{ max-width:none; }
}

/* ------------------------------------------------------------- photos -- */

.photo{
  position:relative;
  overflow:hidden;
  border-radius:2px;
  background:var(--ground-sunk);
  line-height:0;
}
.photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.photo--tall{ aspect-ratio:3/4; }
.photo--portrait{ aspect-ratio:4/5; }
.photo--wide{ aspect-ratio:16/10; }
.photo--square{ aspect-ratio:1; }

.reel{
  display:grid;
  grid-template-columns:1fr 1.45fr 1fr;
  gap:clamp(.55rem, 1.5vw, .9rem);
}
.reel .photo{ height:clamp(260px, 36vw, 470px); }
.reel__cap{
  margin-top:1rem;
  font-size:var(--step--1);
  color:var(--ink-soft);
}
@media (max-width: 700px){
  .reel{ grid-template-columns:1fr 1fr; }
  .reel .photo{ height:clamp(200px, 62vw, 340px); }
  .reel .photo:nth-child(2){ grid-column:span 2; order:-1; height:clamp(200px, 56vw, 320px); }
}

/* --------------------------------------------------------- photo slots -- */
/* Placeholder plates: replace each .plate with a real photograph.          */

.plate{
  position:relative;
  aspect-ratio:4/5;
  border-radius:2px;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 22% 10%, #E4EADD 0%, transparent 58%),
    radial-gradient(95% 75% at 84% 30%, #EBD9B6 0%, transparent 62%),
    linear-gradient(168deg, #A9BCA5 0%, #6C8378 48%, #384943 100%);
  box-shadow:0 1px 0 rgba(22,31,27,.06);
}
.plate--wide{ aspect-ratio:16/10; }
.plate--tall{ aspect-ratio:3/4; }
.plate--dusk{
  background:
    radial-gradient(110% 80% at 78% 18%, #D7B27C 0%, transparent 52%),
    radial-gradient(120% 90% at 12% 80%, #4A6B63 0%, transparent 58%),
    linear-gradient(160deg, #2C3B38 0%, #16211E 100%);
}
.plate--stone{
  background:
    radial-gradient(100% 85% at 30% 20%, #EFEBE0 0%, transparent 60%),
    linear-gradient(150deg, #C6CCBE 0%, #9AA79A 55%, #6E7D74 100%);
}
.plate::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.5;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}
.plate__tag{
  position:absolute;
  left:0; bottom:0;
  z-index:2;
  margin:.75rem;
  padding:.32rem .55rem;
  background:rgba(17,25,23,.62);
  color:#E7E4DA;
  font-family:var(--sans);
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  border-radius:2px;
}

/* ------------------------------------------------------- section header -- */

.shead{
  display:grid;
  grid-template-columns:minmax(0,0.42fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4rem);
  align-items:end;
  margin-bottom:clamp(2rem,4vw,3.25rem);
}
.shead__side{ display:flex; flex-direction:column; gap:.9rem; }
@media (max-width: 780px){
  .shead{ grid-template-columns:1fr; align-items:start; gap:1.1rem; }
}

/* ----------------------------------------------------------- ledger list -- */
/* "What brings people here" — a quiet indexed list, not a grid of cards.   */

.ledger{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap:0 clamp(2rem,5vw,4rem);
  border-top:1px solid var(--rule);
}
.ledger__row{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.35rem 1.1rem;
  padding-block:1.15rem;
  border-bottom:1px solid var(--rule-soft);
}
.ledger__term{
  grid-column:2;
  font-family:var(--serif);
  font-size:var(--step-1);
  line-height:1.2;
}
.ledger__mark{
  grid-row:1 / span 2;
  width:.4rem; height:.4rem;
  margin-top:.7rem;
  border-radius:50%;
  background:var(--brass);
  flex:none;
}
.ledger__desc{
  grid-column:2;
  font-size:var(--step--1);
  color:var(--ink-soft);
  max-width:44ch;
}

/* ------------------------------------------------------------ approach -- */

.approach{
  display:grid;
  gap:0;
  border-top:1px solid var(--rule);
}
.approach__item{
  display:grid;
  grid-template-columns:5.5rem minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(1rem,3vw,3rem);
  padding-block:clamp(1.6rem,3vw,2.4rem);
  border-bottom:1px solid var(--rule-soft);
  align-items:baseline;
}
.approach__idx{
  font-family:var(--serif);
  font-size:var(--step-1);
  color:var(--brass);
  font-variant-numeric:tabular-nums;
}
.approach__body{ color:var(--ink-soft); max-width:52ch; }
.approach__body .term{
  color:var(--ink);
  font-style:italic;
  font-family:var(--serif);
  font-size:1.06em;
}
@media (max-width: 820px){
  .approach__item{ grid-template-columns:2.6rem 1fr; }
  .approach__body{ grid-column:2; margin-top:.6rem; }
}

/* -------------------------------------------------------- breath pacer -- */

.pacer{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.4rem;
  padding:clamp(1.5rem,4vw,2.5rem) 0;
}
.pacer__stage{
  position:relative;
  width:clamp(170px, 26vw, 240px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
}
.pacer__halo,
.pacer__ring{
  position:absolute;
  inset:0;
  border-radius:50%;
}
.pacer__halo{
  background:radial-gradient(circle, color-mix(in srgb, var(--verdigris) 34%, transparent) 0%, transparent 66%);
  animation:breathe 11s ease-in-out infinite;
}
.pacer__ring{
  border:1px solid color-mix(in srgb, var(--verdigris) 85%, transparent);
  box-shadow:0 0 0 1px rgba(127,160,141,.12), inset 0 0 30px rgba(127,160,141,.14);
  animation:breathe 11s ease-in-out infinite;
}
.pacer__ring--fixed{
  border-color:var(--night-rule);
  border-style:dashed;
  animation:none;
}
.pacer__count{
  position:relative;
  z-index:2;
  font-family:var(--serif);
  font-size:var(--step-2);
  color:var(--bone);
  font-variant-numeric:tabular-nums;
}
.pacer__caption{
  text-align:center;
  font-size:var(--step--1);
  color:var(--bone-soft);
  max-width:34ch;
}
.pacer__phase{
  color:var(--verdigris);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.7rem;
}

@keyframes breathe{
  0%   { transform:scale(.56); opacity:.55; }
  50%  { transform:scale(1);   opacity:1; }
  100% { transform:scale(.56); opacity:.55; }
}
@media (prefers-reduced-motion: reduce){
  .pacer__halo,.pacer__ring{ animation:none; transform:scale(.85); opacity:.8; }
}

/* -------------------------------------------------------- retreat teaser -- */

.teaser__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
@media (max-width: 860px){
  .teaser__grid{ grid-template-columns:1fr; }
}

.teaser__date{
  font-family:var(--serif);
  font-size:var(--step-2);
  line-height:1.2;
  color:var(--bone);
}

/* ------------------------------------------------------------- timeline -- */

.timeline{
  border-top:1px solid var(--night-rule);
}
.timeline__row{
  display:grid;
  grid-template-columns:6.5rem minmax(0,1fr);
  gap:1rem clamp(1rem,3vw,2.5rem);
  padding-block:1.15rem;
  border-bottom:1px solid var(--night-rule);
}
.timeline__time{
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--verdigris);
  font-variant-numeric:tabular-nums;
  padding-top:.28em;
}
.timeline__title{
  font-family:var(--serif);
  font-size:var(--step-1);
  color:var(--bone);
  line-height:1.25;
}
.timeline__note{
  font-size:var(--step--1);
  color:var(--bone-soft);
  max-width:56ch;
  margin-top:.3rem;
}
@media (max-width:600px){
  .timeline__row{ grid-template-columns:1fr; gap:.25rem; }
}

/* ------------------------------------------------------------- two-col -- */

.duo{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(1.5rem,4vw,3.5rem);
}
.panel{
  padding:clamp(1.4rem,3vw,2rem);
  border:1px solid var(--rule);
  border-radius:2px;
  background:var(--ground-raised);
}
.panel h3{ margin-bottom:.9rem; }
.panel--night{
  background:var(--night-raised);
  border-color:var(--night-rule);
}
.panel__list{
  list-style:none;
  margin:0; padding:0;
  display:flex; flex-direction:column; gap:.7rem;
  font-size:var(--step--1);
  color:var(--ink-soft);
}
.panel--night .panel__list{ color:var(--bone-soft); }
.panel__list li{
  display:grid;
  grid-template-columns:1.1rem 1fr;
  gap:.6rem;
  align-items:start;
}
.panel__list li::before{
  content:"—";
  color:var(--brass);
  line-height:1.6;
}

/* -------------------------------------------------------------- booking -- */

.booking{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,340px);
  gap:clamp(1.5rem,4vw,3rem);
  align-items:start;
}
@media (max-width: 900px){
  .booking{ grid-template-columns:1fr; }
}

.step{ margin-bottom:2.4rem; }
.step__head{
  display:flex;
  align-items:baseline;
  gap:.8rem;
  margin-bottom:1.1rem;
}
.step__n{
  font-family:var(--serif);
  font-size:1.05rem;
  color:var(--brass);
  font-variant-numeric:tabular-nums;
}
.step__title{
  font-family:var(--serif);
  font-size:var(--step-2);
}

.dates{ display:flex; flex-direction:column; gap:.65rem; }

.date{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:.4rem 1rem;
  align-items:center;
  padding:1.05rem 1.2rem;
  border:1px solid var(--rule);
  border-radius:2px;
  background:var(--ground-raised);
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.date:hover{ border-color:var(--ink-faint); }
.date input{
  position:absolute;
  opacity:0;
  width:1px;height:1px;
}
.date__dot{
  width:.85rem;height:.85rem;
  border:1px solid var(--ink-faint);
  border-radius:50%;
  flex:none;
  display:grid; place-items:center;
}
.date__dot::after{
  content:"";
  width:.42rem;height:.42rem;
  border-radius:50%;
  background:var(--brass);
  transform:scale(0);
  transition:transform .18s ease;
}
.date input:checked ~ .date__dot::after{ transform:scale(1); }
.date:has(input:checked){
  border-color:var(--brass);
  background:color-mix(in srgb, var(--brass) 7%, var(--ground-raised));
}
.date:has(input:focus-visible){
  outline:2px solid var(--brass);
  outline-offset:3px;
}
.date__main{ display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.date__when{
  font-family:var(--serif);
  font-size:var(--step-1);
  line-height:1.2;
}
.date__meta{
  grid-column:2;
  font-size:var(--step--1);
  color:var(--ink-soft);
}
.date__right{
  text-align:right;
  display:flex;
  flex-direction:column;
  gap:.15rem;
  align-items:flex-end;
}
.date__price{
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.date__spaces{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--verdigris);
}
.date__spaces--low{ color:var(--brass-deep); }
.date__spaces--out{ color:var(--ink-faint); }
.date--out{
  cursor:not-allowed;
  opacity:.55;
  background:var(--ground-sunk);
}
.date--out:hover{ border-color:var(--rule); }
@media (max-width:560px){
  .date{ grid-template-columns:auto 1fr; }
  .date__right{ grid-column:2; align-items:flex-start; text-align:left; margin-top:.4rem; }
}

.options{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.65rem; }
.option{
  position:relative;
  display:block;
  padding:1.05rem 1.2rem;
  border:1px solid var(--rule);
  border-radius:2px;
  background:var(--ground-raised);
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.option input{ position:absolute; opacity:0; width:1px;height:1px; }
.option:has(input:checked){
  border-color:var(--brass);
  background:color-mix(in srgb, var(--brass) 7%, var(--ground-raised));
}
.option:has(input:focus-visible){ outline:2px solid var(--brass); outline-offset:3px; }
.option__name{ font-weight:600; display:block; margin-bottom:.15rem; }
.option__amt{
  font-family:var(--serif);
  font-size:var(--step-2);
  display:block;
  line-height:1.1;
  margin-bottom:.3rem;
  font-variant-numeric:tabular-nums;
}
.option__note{ font-size:var(--step--1); color:var(--ink-soft); display:block; }

/* summary rail */

.summary{
  position:sticky;
  top:98px;
  border:1px solid var(--rule);
  border-radius:2px;
  background:var(--ground-raised);
  padding:clamp(1.25rem,3vw,1.6rem);
}
.summary h3{ font-size:var(--step-1); margin-bottom:1rem; }
.summary__line{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding-block:.55rem;
  border-bottom:1px solid var(--rule-soft);
  font-size:var(--step--1);
}
.summary__line dt{ color:var(--ink-soft); }
.summary__line dd{ margin:0; text-align:right; font-weight:600; font-variant-numeric:tabular-nums; }
.summary__total{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem;
  padding-block:1rem .25rem;
}
.summary__total dt{ font-size:var(--step--1); color:var(--ink-soft); }
.summary__total dd{
  margin:0;
  font-family:var(--serif);
  font-size:var(--step-3);
  font-variant-numeric:tabular-nums;
}
.summary .btn{ width:100%; justify-content:center; margin-top:1rem; }
.summary__fine{
  margin-top:.9rem;
  font-size:.75rem;
  line-height:1.5;
  color:var(--ink-faint);
}
.summary__secure{
  display:flex; align-items:center; gap:.45rem;
  margin-top:.75rem;
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--ink-faint);
}

/* --------------------------------------------------------------- forms -- */

.field{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.1rem; }
.field label{
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.field input,
.field select,
.field textarea{
  font-family:var(--sans);
  font-size:var(--step-0);
  color:var(--ink);
  background:var(--ground-raised);
  border:1px solid var(--rule);
  border-radius:2px;
  padding:.75rem .85rem;
  width:100%;
}
.field textarea{ min-height:8rem; resize:vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus{ outline:2px solid var(--brass); outline-offset:0; border-color:var(--brass); }
.field__hint{ font-size:.76rem; color:var(--ink-faint); text-transform:none; letter-spacing:0; font-weight:400; }

.checkline{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.7rem;
  align-items:start;
  font-size:var(--step--1);
  color:var(--ink-soft);
  margin-bottom:1.2rem;
}
.checkline input{ margin-top:.28em; accent-color:var(--brass); width:1rem; height:1rem; }

.grid2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0 1.1rem; }

/* ----------------------------------------------------------------- faq -- */

.faq{ border-top:1px solid var(--rule); }
.faq details{
  border-bottom:1px solid var(--rule-soft);
}
.faq summary{
  list-style:none;
  cursor:pointer;
  padding-block:1.15rem;
  display:flex;
  justify-content:space-between;
  gap:1.5rem;
  align-items:center;
  font-family:var(--serif);
  font-size:var(--step-1);
  line-height:1.3;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+";
  font-family:var(--sans);
  font-size:1.15rem;
  color:var(--brass);
  flex:none;
  transition:transform .2s ease;
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq__body{
  padding-bottom:1.3rem;
  font-size:var(--step--1);
  color:var(--ink-soft);
  max-width:60ch;
}
.faq__body p + p{ margin-top:.8em; }

/* --------------------------------------------------------- contact bar -- */

.contactbar{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1.5rem clamp(1.5rem,4vw,3rem);
  padding-block:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.contactbar__item{ display:flex; flex-direction:column; gap:.35rem; }
.contactbar__val{
  font-family:var(--serif);
  font-size:var(--step-1);
  text-decoration:none;
  line-height:1.25;
}
.contactbar__val:hover{ color:var(--brass-deep); }

/* -------------------------------------------------------------- footer -- */

.footer{
  background:var(--night);
  color:var(--bone-soft);
  padding-block:clamp(3rem,6vw,4.5rem) 2rem;
  font-size:var(--step--1);
}
.footer__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  grid-auto-flow:row dense;
  gap:2.25rem 1.5rem;
  padding-bottom:2.5rem;
  border-bottom:1px solid var(--night-rule);
}
/* phone: logo full width, then Site | Practice, then Contact full width
   so the email address has room                                         */
.footer__brand,
.footer__contact{ grid-column:1 / -1; }

@media (min-width: 640px){
  .footer__grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .footer__contact{ grid-column:auto; }
}
@media (min-width: 960px){
  .footer__grid{
    grid-template-columns:minmax(0,1.3fr) repeat(3, minmax(0,1fr));
    gap:2.5rem clamp(1.5rem,4vw,3rem);
  }
  .footer__brand{ grid-column:auto; }
}
.footer__list a{ overflow-wrap:anywhere; }
.footer .wordmark{ color:var(--bone); }
.footer__blurb{ margin-top:1.1rem; max-width:34ch; }
.footer__h{
  font-family:var(--sans);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--verdigris);
  margin-bottom:1rem;
}
.footer__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.footer__list a{ text-decoration:none; }
.footer__list a:hover{ color:var(--bone); }
.footer__base{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:1rem;
  padding-top:1.5rem;
  font-size:.76rem;
  color:#78827A;
}

/* --------------------------------------------------------------- notes -- */
/* Visible build notes for the client review only. Removed before launch.   */

.todo{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.12rem .45rem;
  margin-left:.35rem;
  border:1px dashed var(--brass);
  border-radius:2px;
  font-family:var(--sans);
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--brass-deep);
  vertical-align:middle;
  white-space:nowrap;
}
.night .todo{ color:var(--brass-lift); border-color:var(--brass-deep); }

/* --------------------------------------------------------------- modal -- */

.modal[hidden]{ display:none; }
.modal{
  position:fixed;
  inset:0;
  z-index:200;
  display:grid;
  place-items:center;
  padding:1.5rem;
  background:rgba(17,25,23,.6);
  backdrop-filter:blur(3px);
}
.modal__card{
  width:min(520px,100%);
  background:var(--ground-raised);
  border:1px solid var(--rule);
  border-radius:2px;
  padding:clamp(1.5rem,4vw,2.25rem);
  max-height:85vh;
  overflow-y:auto;
}
.modal__card h3{ margin-bottom:.9rem; }
.modal__card p{ font-size:var(--step--1); color:var(--ink-soft); }
.modal__card p + p{ margin-top:.8em; }
.modal__actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.5rem; }

/* ------------------------------------------------------- preview router -- */

.route[hidden]{ display:none; }

.previewbar{
  background:var(--night-raised);
  color:var(--bone-soft);
  font-size:.74rem;
  letter-spacing:.04em;
  padding:.55rem var(--gutter);
  text-align:center;
  border-bottom:1px solid var(--night-rule);
}
.previewbar strong{ color:var(--bone); font-weight:600; }