/* ============================================================
   1. TOKENS
   The site is built from Krista's own two greens and nothing
   else. #8D9D77 is the background of her portrait; #2F381D is
   the ink of her logo. Grounds, text, buttons and the trust
   band are all derived from those.

   The sage carries the page: a very light tint as the ground,
   the full strength colour as a solid band under the hero, and
   the deep forest for buttons and the closing section.
   ============================================================ */
:root{
  /* Her green is the site's colour, not an accent on someone else's palette.
     #8D9D77 is the background of her own portrait; #2F381D is the ink of her
     logo. Everything below is built from those two. */
  --sage:#8D9D77;
  --forest:#2F381D;

  --ink:#232B16;
  --ink-2:#3D4830;
  --ink-3:#5F6A4C;

  --ground:#F4F7EF;
  --ground-2:#E4EBD9;
  --ground-3:#D2DCC2;

  --line:rgba(35,43,22,.15);
  --line-2:rgba(35,43,22,.09);

  --accent:#8D9D77;
  /* The sage is 2.75:1 on the ground, so anything that has to be read uses
     this darker version instead. */
  --accent-deep:#5C6A46;

  /* Placeholders stay warm clay on purpose. Against a green site they read as
     foreign, which is exactly what an unconfirmed fact should look like. */
  --ph-ink:#6E523A;
  --ph-bg:rgba(140,110,86,.13);

  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --wrap:69rem;
  --prose:40rem;
  --pad:clamp(1.25rem,5vw,2.5rem);
  --section:clamp(4.5rem,11vw,8.5rem);
  --radius:2px;
  --nav-h:4.5rem;
}

/* ============================================================
   2. RESET AND BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--nav-h) + 1.25rem);
}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  position:relative;
  overflow-x:hidden;
  background:var(--ground);
  color:var(--ink-2);
  font-family:var(--sans);
  font-size:clamp(1.0625rem,.35vw + 1rem,1.1875rem);
  font-weight:400;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
svg{display:block}

h1,h2,h3{
  font-family:var(--serif);
  color:var(--ink);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-.015em;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.4rem,6.2vw,4rem);font-variation-settings:"opsz" 120}
h2{font-size:clamp(1.85rem,4vw,2.75rem);font-variation-settings:"opsz" 72}
h3{font-size:clamp(1.2rem,1.6vw,1.4rem);line-height:1.25;font-variation-settings:"opsz" 24}
p{margin:0}
ul,ol{margin:0;padding:0}

a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{text-decoration-color:var(--accent-deep)}

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

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--pad);
}
.prose{max-width:var(--prose)}

.skip{
  position:absolute;left:.5rem;top:-4rem;z-index:100;
  background:var(--ink);color:var(--ground);
  padding:.7rem 1.1rem;font-size:.95rem;text-decoration:none;
  transition:top .16s ease;
}
.skip:focus{top:.5rem}

/* Small caps label used above most section headings */
.eyebrow{
  font-size:.75rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-weight:600;
  margin-bottom:1.1rem;
  display:flex;
  align-items:center;
  gap:.7rem;
}
.eyebrow::before{
  content:"";
  width:1.75rem;height:1px;
  background:var(--accent);
  flex:none;
}

/* Every unconfirmed fact wears this so it cannot ship quietly */
.ph{
  background:var(--ph-bg);
  box-shadow:inset 0 -1px 0 rgba(110,82,58,.45);
  color:var(--ph-ink);
  font-family:var(--sans);
  font-size:.85em;
  font-weight:600;
  line-height:1.5;
  padding:.05em .3em;
  border-radius:2px;
  white-space:normal;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

/* ============================================================
   3. BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  font-family:var(--sans);
  font-size:1rem;
  font-weight:600;
  letter-spacing:.01em;
  line-height:1;
  padding:1.1rem 1.9rem;
  border-radius:var(--radius);
  text-decoration:none;
  border:1px solid var(--ink);
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.btn-primary{background:var(--ink);color:var(--ground)}
.btn-primary:hover{background:#36421F;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--ground);transform:translateY(-1px)}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.4rem}

/* ============================================================
   4. HEADER AND NAV
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(244,247,239,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.site-header.is-stuck{
  border-bottom-color:var(--line-2);
  box-shadow:0 1px 22px rgba(35,43,22,.06);
}
.header-inner{
  min-height:var(--nav-h);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.brand{
  display:flex;
  align-items:center;
  gap:.7rem;
  font-family:var(--serif);
  font-size:1.3rem;
  font-variation-settings:"opsz" 30;
  color:var(--ink);
  text-decoration:none;
  line-height:1.1;
  white-space:nowrap;
}
/* Her own logo mark, lifted off her brand card and set on transparency */
.brand img{width:2.5rem;height:auto;flex:none}
.brand-text{display:block}
/* Scoped to .brand-text, not .brand, or it also hits the wrapper span
   and shrinks the wordmark itself. */
.brand-text span{
  display:block;
  font-family:var(--sans);
  font-size:.63rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-top:.2rem;
}

.nav-toggle{
  display:inline-flex;align-items:center;gap:.5rem;
  background:none;border:1px solid var(--line);
  border-radius:var(--radius);
  font:inherit;font-size:.85rem;font-weight:600;
  color:var(--ink);
  padding:.55rem .8rem;cursor:pointer;
}
.nav-toggle svg{width:1rem;height:1rem}

/* On mobile the nav takes its own full width row under the brand and
   toggle. Without the flex-basis it becomes a third item on the header
   row and hangs off the right edge of the screen. */
.nav{display:none;flex:0 0 100%}
.nav ul{list-style:none;display:flex;flex-direction:column;gap:.25rem}
.nav a{
  display:block;
  text-decoration:none;
  font-size:1rem;
  font-weight:500;
  color:var(--ink-2);
  padding:.75rem .25rem;
  border-bottom:1px solid var(--line-2);
}
.nav a:hover{color:var(--ink)}
.nav.is-open{display:block;padding:.4rem 0 .6rem}

/* The booking button lives outside the link list so the links can sit centred
   between the brand and the button on desktop. On mobile it drops onto its own
   row and only appears when the menu is open. */
.header-cta{
  display:none;
  flex:0 0 100%;
  text-align:center;
  background:var(--ink);
  color:var(--ground);
  text-decoration:none;
  font-family:var(--sans);
  font-weight:600;
  font-size:1rem;
  padding:.95rem 1.4rem;
  border-radius:var(--radius);
  margin-bottom:1.2rem;
  transition:background .18s ease;
}
.header-cta:hover{background:#36421F}
.nav.is-open ~ .header-cta{display:block}

/* With JS off the toggle is useless, so show the links outright */
.no-js .nav-toggle{display:none}
.no-js .nav{display:block;padding-bottom:.6rem}
.no-js .header-cta{display:block}

@media (min-width:56rem){
  .nav-toggle{display:none}
  /* Three columns: brand, centred links, booking button. */
  .header-inner{
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:1.75rem;
    align-items:center;
  }
  .nav,.no-js .nav{display:block;padding:0;justify-self:center}
  .header-cta,.no-js .header-cta{
    display:inline-block;
    justify-self:end;
    margin:0;
    padding:.78rem 1.35rem;
    font-size:.92rem;
    white-space:nowrap;
  }
  .nav ul{flex-direction:row;align-items:center;justify-content:center;gap:2.1rem}
  .nav a{padding:.4rem 0;border-bottom:none;font-size:.98rem}
  .nav li a{
    background-image:linear-gradient(var(--accent-deep),var(--accent-deep));
    background-size:0 1px;background-position:0 100%;
    background-repeat:no-repeat;
    transition:background-size .22s ease;
  }
  .nav li a:hover{background-size:100% 1px}
  .nav .nav-cta{margin-top:0;padding:.78rem 1.35rem;font-size:.92rem}
}

/* ============================================================
   5. HERO
   ============================================================ */
.hero{
  position:relative;
  overflow:hidden;
  padding-block:clamp(3.5rem,9vw,6.5rem) clamp(3rem,7vw,5rem);
}
.hero::before{
  content:"";
  position:absolute;
  inset:auto -12% -55% auto;
  right:-14%;
  width:min(46rem,82vw);
  aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,var(--ground-2) 0%,rgba(244,238,230,0) 68%);
  pointer-events:none;
}
.hero-inner{position:relative}
.hero-grid{display:grid;gap:clamp(2.75rem,6vw,4rem)}
.hero h1{margin-bottom:1.6rem}
.hero-name{
  font-family:var(--sans);
  font-size:.78rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--ink-3);
  margin-bottom:1.5rem;
}
.hero-lede{
  font-size:clamp(1.13rem,.5vw + 1rem,1.3rem);
  line-height:1.62;
  color:var(--ink-2);
  max-width:34rem;
}
.hero-lede + .hero-lede{margin-top:1.1rem}

/* Quiet line drawing standing in for the room photo */
.hero-art{
  position:relative;
  background:var(--ground-2);
  border-radius:var(--radius);
  aspect-ratio:4/5;
  overflow:hidden;
}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.art-note{
  position:absolute;
  left:1rem;right:1rem;bottom:1rem;
  font-size:.72rem;
  line-height:1.5;
  text-align:center;
}
@media (min-width:56rem){
  .hero-grid{grid-template-columns:1.15fr .85fr;align-items:center}
}

/* ============================================================
   6. TRUST STRIP
   The three facts her current site is missing. They sit high on
   purpose.
   ============================================================ */
.trust{
  background:var(--sage);
  color:var(--ink);
}
.trust li:not(:last-child){border-color:rgba(35,43,22,.18)}
.trust ul{
  list-style:none;
  display:grid;
  gap:0;
}
.trust li{
  display:flex;
  gap:1rem;
  align-items:flex-start;
  padding:1.6rem 0;
}
.trust li:not(:last-child){border-bottom:1px solid var(--line-2)}
.trust svg{
  width:1.4rem;height:1.4rem;
  flex:none;margin-top:.15rem;
  stroke:var(--ink);
  stroke-width:1.4;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.trust dt{
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(35,43,22,.72);
  font-weight:600;
  margin-bottom:.3rem;
}
.trust dd{
  margin:0;
  font-size:1.02rem;
  line-height:1.5;
  color:var(--ink);
  font-weight:500;
}
.trust dd a{text-decoration:none;border-bottom:1px solid rgba(35,43,22,.4)}
.trust dd a:hover{border-bottom-color:var(--ink)}
@media (min-width:48rem){
  .trust ul{grid-template-columns:repeat(3,1fr);gap:2.5rem}
  .trust li{padding:2.1rem 0}
  .trust li:not(:last-child){
    border-bottom:none;
    border-right:1px solid var(--line-2);
    padding-right:2.5rem;
  }
}

/* ============================================================
   7. GENERIC SECTION
   ============================================================ */
.section{padding-block:var(--section)}
.section-alt{background:var(--ground-2)}
.section-head{max-width:36rem;margin-bottom:clamp(2.5rem,5vw,3.75rem)}
.section-head p{margin-top:1.1rem;color:var(--ink-2)}

/* ============================================================
   8. SERVICES
   ============================================================ */
.cards{
  list-style:none;
  display:grid;
  gap:1.25rem;
}
@media (min-width:44rem){.cards{grid-template-columns:repeat(3,1fr)}}
.card{
  display:flex;
  flex-direction:column;
  background:var(--ground);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(1.6rem,3vw,2.1rem);
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.card:hover{
  border-color:rgba(141,157,119,.75);
  transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(35,43,22,.07);
}
.card h3{margin-bottom:.55rem}
.card-meta{
  font-size:.85rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-weight:600;
  margin-bottom:1.1rem;
}
.card-price{
  font-family:var(--serif);
  font-size:2rem;
  font-variation-settings:"opsz" 40;
  color:var(--ink);
  line-height:1;
  margin-bottom:1.1rem;
}
.card p{font-size:.98rem;line-height:1.65}
.card-link{
  margin-top:auto;
  padding-top:1.5rem;
  font-size:.92rem;
  font-weight:600;
  color:var(--ink);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
}
.card-link span{transition:transform .2s ease;display:inline-block}
.card-link:hover span{transform:translateX(3px)}
.card-link::after{content:none}
.services-foot{margin-top:2.5rem;font-size:.95rem;color:var(--ink-3)}

/* ============================================================
   9. WHAT HAPPENS IN A SESSION
   The highest value block on the page.
   ============================================================ */
.steps{
  list-style:none;
  counter-reset:step;
  max-width:44rem;
}
.steps li{
  counter-increment:step;
  position:relative;
  padding-left:3.4rem;
  padding-bottom:2.6rem;
}
.steps li::before{
  content:counter(step);
  position:absolute;left:0;top:-.1rem;
  width:2.1rem;height:2.1rem;
  display:grid;place-items:center;
  border:1px solid var(--accent-deep);
  border-radius:50%;
  font-family:var(--serif);
  font-size:.95rem;
  color:var(--accent-deep);
  background:var(--ground);
}
.steps li::after{
  content:"";
  position:absolute;left:1.05rem;top:2.4rem;bottom:.4rem;
  width:1px;background:var(--line);
}
.steps li:last-child{padding-bottom:0}
.steps li:last-child::after{display:none}
.steps h3{margin-bottom:.5rem}
.steps p{color:var(--ink-2)}

.honesty{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  max-width:44rem;
  border-left:2px solid var(--accent);
  padding:.3rem 0 .3rem 1.5rem;
  font-size:1rem;
  color:var(--ink-3);
}

/* ============================================================
   10. ABOUT SNIPPET
   ============================================================ */
.about-grid{display:grid;gap:clamp(2.25rem,5vw,3.5rem)}
@media (min-width:52rem){
  .about-grid{grid-template-columns:minmax(0,20rem) 1fr;align-items:start}
}
.portrait{
  position:relative;
  aspect-ratio:4/5;
  background:linear-gradient(160deg,var(--ground) 0%,var(--ground-3) 100%);
  border:1px solid var(--line);
  border-radius:var(--radius);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.portrait svg{width:58%;height:auto;opacity:.35}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.about-body p + p{margin-top:1.15rem}
.about-body .btn-row{margin-top:2rem}
.signature{
  font-family:var(--serif);
  font-size:1.5rem;
  font-variation-settings:"opsz" 40;
  color:var(--ink);
  margin-top:1.6rem;
}

/* ============================================================
   11. CONTACT AND CTA
   ============================================================ */
.contact{background:var(--forest);color:#D8E0CB}
.contact h2{color:var(--ground)}
.contact .eyebrow{color:rgba(244,247,239,.62)}
.contact .eyebrow::before{background:rgba(244,247,239,.45)}
.contact-grid{display:grid;gap:clamp(2.5rem,5vw,4rem)}
@media (min-width:52rem){
  .contact-grid{grid-template-columns:1fr 1fr;align-items:start}
}
.contact-lede{margin-top:1.2rem;color:rgba(244,247,239,.75);max-width:30rem}
.contact .btn-primary{background:var(--ground);color:var(--ink);border-color:var(--ground)}
.contact .btn-primary:hover{background:#fff;border-color:#fff}
.contact .btn-ghost{color:var(--ground);border-color:rgba(244,247,239,.4)}
.contact .btn-ghost:hover{background:var(--ground);color:var(--ink);border-color:var(--ground)}
.contact :focus-visible{outline-color:var(--ground)}
/* Placeholders have to stay loud on the dark section too */
.contact .ph{
  color:#E8CFB4;
  background:rgba(232,207,180,.13);
  box-shadow:inset 0 -1px 0 rgba(232,207,180,.5);
}
.contact .btn-ghost:hover .ph{color:var(--ph-ink);background:var(--ph-bg)}

.details{border-top:1px solid rgba(244,247,239,.16)}
.details div{
  display:grid;
  gap:.3rem;
  padding:1.35rem 0;
  border-bottom:1px solid rgba(244,247,239,.16);
}
@media (min-width:30rem){
  .details div{grid-template-columns:7.5rem 1fr;gap:1.5rem;align-items:baseline}
}
.details dt{
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(244,247,239,.6);
  font-weight:600;
}
.details dd{margin:0;color:var(--ground);font-size:1.02rem}
.details dd a{text-decoration:none;border-bottom:1px solid rgba(244,247,239,.35)}
.details dd a:hover{border-bottom-color:var(--ground)}
.hours-list{list-style:none;font-size:1.02rem}
.hours-list li{display:flex;justify-content:space-between;gap:1.5rem;max-width:22rem}
.hours-list li + li{margin-top:.3rem}

/* ============================================================
   12. FOOTER
   ============================================================ */
.site-footer{
  background:var(--ground-2);
  border-top:1px solid var(--line);
  padding-block:clamp(3rem,6vw,4.5rem) 2rem;
  font-size:.95rem;
}
.footer-grid{display:grid;gap:2.5rem}
@media (min-width:44rem){.footer-grid{grid-template-columns:1.3fr 1fr 1fr}}
.footer-grid h2{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-weight:600;
  margin-bottom:1rem;
}
.footer-mark{width:3.25rem;height:auto;margin-bottom:.9rem}
.footer-brand{
  font-family:var(--serif);
  font-size:1.45rem;
  font-variation-settings:"opsz" 40;
  color:var(--ink);
  margin-bottom:.6rem;
}
.footer-grid ul{list-style:none}
.footer-grid li + li{margin-top:.55rem}
.footer-grid a{text-decoration:none;border-bottom:1px solid transparent}
.footer-grid a:hover{border-bottom-color:var(--accent)}
.footer-hours li{display:flex;justify-content:space-between;gap:1.25rem}
.footer-bottom{
  margin-top:3rem;
  padding-top:1.6rem;
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 1.5rem;
  justify-content:space-between;
  font-size:.85rem;
  color:var(--ink-3);
}
.footer-bottom a{color:inherit}

/* ============================================================
   13. MOTION
   Reveal is opt in via the .js class, so with JavaScript off
   every word is on the page from the first byte. That is the
   whole reason this site exists.
   ============================================================ */
/* The reveal itself is defined in section 15. This is only the escape
   hatch: snap to visible rather than transition, because a backgrounded
   tab suspends the animation clock and would otherwise freeze content at
   opacity 0 forever. Two classes, so it outranks the rules in 15. */
.js .reveal.no-anim,
.js .reveal-photo.no-anim{
  transition:none !important;
  opacity:1 !important;
  transform:none !important;
  clip-path:none !important;
}
@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ============================================================
   14. INNER PAGES
   Everything below is used by services, about, contact and 404.
   The homepage does not need any of it.
   ============================================================ */

/* Current page marker in the nav */
.nav a[aria-current="page"]{color:var(--ink);font-weight:600}
@media (min-width:56rem){
  .nav li a[aria-current="page"]{background-size:100% 1px}
}

/* Compact hero for pages that are not the homepage */
.page-hero{
  padding-block:clamp(2.75rem,7vw,4.5rem) clamp(2.25rem,5vw,3.5rem);
  border-bottom:1px solid var(--line);
}
.page-hero h1{margin-bottom:1.4rem}
.page-hero .lede{
  font-size:clamp(1.1rem,.45vw + 1rem,1.25rem);
  line-height:1.62;
  max-width:38rem;
}
.page-hero .lede + .lede{margin-top:1rem}
.crumb{
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:1.4rem;
}
.crumb a{text-decoration:none;border-bottom:1px solid var(--line)}
.crumb a:hover{border-bottom-color:var(--accent)}
.crumb span{margin-inline:.5rem;opacity:.5}

/* ---- Service detail blocks ---- */
.service{padding-block:clamp(3rem,6vw,4.5rem);border-bottom:1px solid var(--line)}
.service:last-of-type{border-bottom:none}
.service-grid{display:grid;gap:clamp(2rem,4vw,3rem)}
@media (min-width:54rem){
  .service-grid{grid-template-columns:1fr minmax(0,17rem);align-items:start}
}
.service h2{margin-bottom:1.4rem}
.service h3{margin-top:2rem;margin-bottom:.6rem}
.service p + p{margin-top:1rem}

.price-box{
  border:1px solid var(--line);
  background:var(--ground-2);
  border-radius:var(--radius);
  padding:clamp(1.5rem,3vw,1.9rem);
  position:sticky;
  top:calc(var(--nav-h) + 1.5rem);
}
.price-box .amount{
  font-family:var(--serif);
  font-size:clamp(2rem,4vw,2.6rem);
  font-variation-settings:"opsz" 60;
  color:var(--ink);
  line-height:1;
  display:block;
  margin-bottom:.6rem;
}
.price-box .dur{
  font-size:.8rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-weight:600;
  display:block;
  margin-bottom:1.5rem;
}
.price-box .btn{width:100%;margin-bottom:.7rem}
.price-box .note{font-size:.87rem;color:var(--ink-3);line-height:1.55;margin-top:1rem}
@media (max-width:53.99rem){.price-box{position:static}}

/* ---- Plain tick list ---- */
.checks{list-style:none}
.checks li{position:relative;padding-left:1.9rem}
.checks li + li{margin-top:.85rem}
/* Unequal arms, or it rotates into a symmetrical chevron instead of a tick */
.checks li::before{
  content:"";
  position:absolute;left:.15rem;top:.58em;
  width:.72rem;height:.4rem;
  border-left:1.5px solid var(--accent-deep);
  border-bottom:1.5px solid var(--accent-deep);
  transform:rotate(-45deg);
}

/* ---- FAQ ---- */
.faq{max-width:44rem}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1.5rem;
  padding:1.35rem 0;
  font-family:var(--serif);
  font-size:clamp(1.08rem,1.4vw,1.25rem);
  color:var(--ink);
  line-height:1.3;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";
  font-family:var(--sans);
  font-size:1.4rem;
  font-weight:300;
  color:var(--accent-deep);
  flex:none;
  line-height:1;
  transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .answer{padding-bottom:1.5rem;max-width:40rem}
.faq .answer p + p{margin-top:.9rem}

/* ---- Forms ---- */
.form{display:grid;gap:1.3rem;max-width:34rem}
.field label{
  display:block;
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--ink-3);
  margin-bottom:.5rem;
}
.field input,.field textarea,.field select{
  width:100%;
  font:inherit;
  font-size:1rem;
  color:var(--ink);
  background:var(--ground);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:.85rem 1rem;
  transition:border-color .18s ease;
}
.field textarea{min-height:8rem;resize:vertical}
.field input:hover,.field textarea:hover,.field select:hover{border-color:rgba(35,43,22,.3)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent-deep);outline:none}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:2px;
}
.req{color:var(--accent-deep);font-weight:700}
.hint{font-size:.85rem;color:var(--ink-3);margin-top:.45rem;line-height:1.5}
.form-note{
  border-left:2px solid var(--accent);
  padding-left:1.3rem;
  font-size:.95rem;
  color:var(--ink-3);
  max-width:34rem;
  margin-bottom:2rem;
}

/* ---- Contact cards ---- */
.contact-cards{list-style:none;display:grid;gap:1.1rem}
@media (min-width:40rem){.contact-cards{grid-template-columns:repeat(2,1fr)}}
.contact-card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(1.4rem,3vw,1.8rem);
  background:var(--ground);
}
.contact-card dt{
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-weight:600;
  margin-bottom:.6rem;
}
.contact-card dd{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(1.15rem,2vw,1.4rem);
  font-variation-settings:"opsz" 30;
  color:var(--ink);
  line-height:1.3;
  word-break:break-word;
}
.contact-card dd a{text-decoration:none;border-bottom:1px solid var(--line)}
.contact-card dd a:hover{border-bottom-color:var(--accent)}

/* Stand in for the map until we have a real address */
.map-slot{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:
    repeating-linear-gradient(45deg,transparent 0 14px,rgba(35,43,22,.03) 14px 28px),
    var(--ground-2);
  min-height:15rem;
  display:grid;
  place-items:center;
  padding:2rem;
  text-align:center;
}

/* ---- Inline photographs ---- */
.photo{
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--ground-2);
  border:1px solid var(--line);
}
.photo img{width:100%;height:auto;display:block}
figure.photo{margin:0}
figure.photo figcaption{
  font-size:.87rem;
  color:var(--ink-3);
  padding:.9rem 1.1rem;
  line-height:1.55;
  border-top:1px solid var(--line);
  background:var(--ground);
}
.photo-pair{display:grid;gap:1.25rem}
@media (min-width:44rem){.photo-pair{grid-template-columns:repeat(2,1fr);align-items:start}}

/* ---- Story page ---- */
.story{max-width:var(--prose)}
.story p + p{margin-top:1.15rem}
.story h2{margin-top:clamp(2.75rem,5vw,3.75rem);margin-bottom:1.1rem}
.pull{
  font-family:var(--serif);
  font-size:clamp(1.35rem,2.6vw,1.75rem);
  line-height:1.38;
  color:var(--ink);
  border-left:2px solid var(--accent);
  padding-left:clamp(1.1rem,3vw,1.6rem);
  margin-block:clamp(2rem,4vw,3rem);
}
.about-hero-grid{display:grid;gap:clamp(2rem,5vw,3.5rem)}
@media (min-width:54rem){
  .about-hero-grid{grid-template-columns:minmax(0,22rem) 1fr;align-items:start}
}
/* Portrait sits left on a wide screen but must not shove the h1 below
   the fold on a phone, so it comes second in the markup and is pulled
   back to the first column only once there are two columns. */
@media (min-width:54rem){
  .about-hero-grid.portrait-left > .portrait{order:-1}
}

/* ---- 404 ---- */
.error{text-align:center;padding-block:clamp(4rem,13vw,9rem)}
.error .code{
  font-family:var(--serif);
  font-size:clamp(4.5rem,17vw,9rem);
  font-variation-settings:"opsz" 144;
  line-height:.9;
  color:var(--ground-3);
  margin-bottom:1.5rem;
}
.error h1{margin-bottom:1.3rem}
.error p{max-width:32rem;margin-inline:auto}
.error .btn-row{justify-content:center}
.error-links{list-style:none;margin-top:3rem;display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:center}
.error-links a{font-weight:600;color:var(--ink)}

/* ============================================================
   15. MOTION
   Scroll driven, and all of it optional. Every effect starts
   from a visible resting state so that with JavaScript off, or
   with reduced motion on, the page is simply the finished page.
   ============================================================ */

/* Every band that carries a background sits above the vine, so the line
   disappears behind it cleanly instead of being drawn over the top. */
.hero,.trust,.section-alt,.contact,.site-footer,.service,.page-hero,.error{
  position:relative;
  z-index:1;
}
main > .section{position:relative;z-index:1}

/* ---- The vine ----
   Her logo has a leafy branch in it. This is the same idea drawn
   down the margin, growing as you scroll. It is injected by JS,
   so with JS off it is simply absent, which costs nothing. */
.vine{
  position:absolute;
  top:0;
  left:.5rem;
  /* Width is set by the script from the measured gutter. */
  width:4.5rem;
  /* Behind everything. Sections that carry a background pass over the top
     of it, so the line is occluded by them rather than drawn across them. */
  z-index:0;
  pointer-events:none;
  color:var(--sage);
  /* Must stay laid out, not display:none, or its width measures 0 and the
     builder cannot size the geometry. Hidden with opacity instead. */
  opacity:0;
}
.vine-svg{display:block;width:100%;height:auto}
.vine-stem{
  stroke-dasharray:var(--len,4000);
  stroke-dashoffset:var(--draw,0);
}
.vine-leaf{
  fill:currentColor;
  opacity:0;
  transform-box:fill-box;
  transform-origin:0 50%;
}
.vine.is-on{opacity:.55;transition:opacity 1s ease}
/* Overshoot on the scale so the leaf unfurls rather than fades in. */
.vine.is-on .vine-leaf{transition:opacity .55s ease,scale .7s cubic-bezier(.34,1.56,.64,1)}
.vine-leaf.is-out{scale:.12 1}
.vine-leaf.is-in{opacity:.8;scale:1 1}

/* Whether there is room is measured in the script, not guessed with a
   breakpoint. This only hides it on small screens as a belt and braces. */
@media (max-width:64rem){ .vine{display:none !important} }

/* ---- Photographs wipe up as they arrive ---- */
.js .photo,
.js .hero-art,
.js .portrait{clip-path:inset(0 0 0 0)}
.js .reveal-photo{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.1s cubic-bezier(.22,.61,.36,1);
}
.js .reveal-photo.is-in{clip-path:inset(0 0 0 0)}

/* ---- Staggered entrances ---- */
.js .reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .75s cubic-bezier(.22,.61,.36,1),
             transform .75s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--stagger,0) * 90ms);
}
.js .reveal.is-in{opacity:1;transform:none}

/* ---- The hero photograph drifts a little slower than the page ---- */
.js .hero-art img{will-change:transform}

@media (prefers-reduced-motion:reduce){
  .vine{display:none !important}
  .js .reveal,.js .reveal-photo{
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
    transition:none !important;
  }
  .js .hero-art img{transform:none !important}
}

/* ============================================================
   16. SECTION SEPARATORS

   Borrowed in approach from the Ashley Fahie build and redrawn
   for Krista: a sprig that grows across the gap between two
   sections as it scrolls into view.

   Two reasons this pattern is better than the margin vine for
   the joins between sections. It lives in the flow, so it can
   never cut across a band, and where the browser supports
   scroll driven animations it needs no JavaScript at all.

   THE RULE THAT MATTERS: nothing here sets opacity:0 as an
   element's own style. animation-fill-mode:both already paints
   the "from" keyframe before the range begins, so a hidden
   start state would be duplication. It would also be the one
   state that survives if the animation never runs: an engine
   without timelines, a dropped keyframe, a print stylesheet.
   Written this way, every one of those failures leaves a whole
   sprig sitting there, drawn and still. Do not tidy an
   opacity:0 back in.
   ============================================================ */
.separator{
  display:flex;
  justify-content:center;
  color:var(--sage);
  padding-block:clamp(1.5rem,4vw,3rem);
  position:relative;
  z-index:1;
}
.separator__vine{width:min(16rem,58%);height:auto;overflow:visible}
.separator__stem{fill:none}
.separator__leaf{
  fill:currentColor;
  /* fill-box or the scale resolves against the whole SVG and every leaf
     flies in from the corner instead of unfurling where it sits. The origin
     is the leaf's stem end, which is its own left edge. */
  transform-box:fill-box;
  transform-origin:0% 50%;
}

@supports (animation-timeline: view()){
  /* Named on the .separator, which has a layout box. An SVG child has none,
     so a timeline cannot be hung on the path itself. */
  .separator{view-timeline-name:--sep}
  .js .separator__stem{
    stroke-dasharray:1;          /* pathLength="1" makes this a fraction */
    animation:sepGrow 1s linear both;
    animation-timeline:--sep;
    animation-range:cover 12% cover 52%;
  }
  .js .separator__leaf{
    animation:sepLeaf 1s linear both;
    animation-timeline:--sep;
    /* Each leaf opens just after the stem tip has passed its anchor. */
    animation-range:cover calc(18% + var(--i) * 7%)
                    cover calc(30% + var(--i) * 7%);
  }
}

@keyframes sepGrow{ from{stroke-dashoffset:1} to{stroke-dashoffset:0} }
@keyframes sepLeaf{
  from{ opacity:0; transform:scale(.12) rotate(-12deg) }
  70% { opacity:1; transform:scale(1.07) rotate(2deg) }
  to  { opacity:1; transform:scale(1) rotate(0) }
}

@media (prefers-reduced-motion:reduce){
  .js .separator__stem{animation:none;stroke-dasharray:none;stroke-dashoffset:0}
  .js .separator__leaf{animation:none}
}

/* ============================================================
   17. SMALL MOVEMENTS
   Hover only, so nothing here can affect a first impression.
   ============================================================ */
.brand img{transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.brand:hover img{transform:rotate(-9deg) scale(1.06)}

.card{transition:transform .3s cubic-bezier(.22,.61,.36,1),
                 box-shadow .3s ease,border-color .3s ease}
.card:hover{transform:translateY(-4px)}

.card-link span{display:inline-block;transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.card-link:hover span{transform:translateX(5px)}

.footer-mark{transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.site-footer:hover .footer-mark{transform:rotate(6deg)}

@media (prefers-reduced-motion:reduce){
  .brand:hover img,.card:hover,.card-link:hover span,
  .site-footer:hover .footer-mark{transform:none}
}