@font-face{font-family:"Cormorant";src:url("/assets/cormorant-eb92a952.woff2") format("woff2");
  font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Karla";src:url("/assets/karla-34216a51.woff2") format("woff2");
  font-weight:300 700;font-style:normal;font-display:swap}

:root{
  --ground:#F2EDE4;--surface:#FBF8F2;--ink:#26251F;--body-ink:#3B392F;--muted:#645F51;
  --accent:#8A6528;--line:#DFD7C7;--line-strong:#C6BBA3;--well:#FBF8F2;
  /* Oat. Separate from --accent so the small brass text stays legible on ivory. */
  --btn-bg:#E7D4AB;--btn-ink:#30260C;--btn-border:#CDB889;
}
*,*::before,*::after{box-sizing:border-box}
/* This is a committed light design. Declaring the scheme stops Chrome's Auto
   Dark Theme on Android from force-inverting the whole site on a phone set to
   dark mode — which is the main way mobile stops matching desktop — and makes
   native controls (the service dropdown, scrollbars) render light to match. */
:root{color-scheme:light}
/* Also on html, so the iOS rubber-band overscroll area is ivory rather than
   whatever the browser paints behind the page. */
html{-webkit-text-size-adjust:100%;background:var(--ground)}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:"Karla",system-ui,-apple-system,sans-serif;font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.skip{position:absolute;left:-9999px;top:0;background:var(--surface);color:var(--ink);
  padding:12px 18px;z-index:100;border:1px solid var(--line-strong)}
.skip:focus{left:12px;top:12px}

h1,h2,h3{font-family:"Cormorant",Georgia,serif;font-weight:500;color:var(--ink);
  text-wrap:balance;margin:0}
p{margin:0}
.inner{max-width:1040px;margin:0 auto;padding:0 40px}
@media (max-width:700px){.inner{padding:0 22px}}

/* header */
.site-head{display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:24px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:18px;text-decoration:none;color:inherit}
.brand-mark{height:96px;width:auto;display:block;flex:0 0 auto}
.brand-text{font-family:"Cormorant",Georgia,serif;font-size:21px;font-weight:500;line-height:1.2}
.brand-sub{display:block;font-family:"Karla",sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.site-nav{display:flex;gap:26px;font-size:15px;color:var(--muted);flex-wrap:wrap}
.site-nav a{text-decoration:none;padding:4px 0}
.site-nav a:hover{color:var(--ink)}
.site-nav a[aria-current="page"]{color:var(--ink);font-weight:600}

/* type + sections */
.eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:18px}
.hero{padding:72px 0 0}
h1{font-size:60px;line-height:1.02;margin-bottom:22px;letter-spacing:-.01em}
@media (max-width:820px){h1{font-size:44px}}
@media (max-width:500px){h1{font-size:34px}}
.lede{font-size:19px;color:var(--body-ink);max-width:56ch;margin-bottom:28px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px}
.btn{display:inline-block;text-decoration:none;font-family:"Karla",sans-serif;font-size:15px;
  font-weight:600;padding:14px 26px;border-radius:2px;cursor:pointer;
  background:var(--btn-bg);color:var(--btn-ink);border:1px solid var(--btn-border)}
.btn:hover{background:#DFC99A}
.btn-quiet{display:inline-block;text-decoration:none;font-family:"Karla",sans-serif;font-size:15px;
  font-weight:500;padding:14px 24px;border-radius:2px;border:1px solid var(--line-strong);
  color:var(--ink);background:transparent}
.btn-quiet:hover{border-color:var(--muted)}
.cred{font-size:14px;color:var(--muted);max-width:54ch}
.figure{margin:44px 0 0}
/* Same 1px --line-strong edge as .btn-quiet, so photographs and outlined
   buttons share one visual language. box-sizing:border-box keeps width:100%
   honest, so the border cannot push an image past its column. */
.figure img{width:100%;height:auto;display:block;border-radius:2px;
  border:1px solid var(--line-strong)}
/* 2:1 at 84% keeps the whole chair, the blanket fringe and the legs in frame */
.figure-hero img{aspect-ratio:2/1;object-fit:cover;object-position:center 84%}
.figure-wide img{aspect-ratio:2/1;object-fit:cover}
/* The contact photograph is square, so a 2:1 frame shows only half its height.
   Centred that lands at 25%-75% and slices through the cups; 80% shifts the
   window down, which keeps the cups whole and includes the table edge. */
.page-contact .figure-wide img{object-position:center 80%}
/* Let the photograph take its height from the copy beside it instead of a fixed
   ratio that leaves it short. Stretching the row means it stays matched however
   the text reflows. Below the breakpoint the columns stack, so there is no
   sibling to match and it falls back to a fixed ratio. */
.page-contact .hero .split{align-items:stretch}
.page-contact .hero .figure-wide{display:flex}
.page-contact .hero .figure-wide img{aspect-ratio:auto;height:100%;width:100%}
@media (max-width:860px){
  .page-contact .hero .figure-wide img{aspect-ratio:2/1;height:auto}
}

.section{padding:72px 0;border-top:1px solid var(--line)}
/* Every page now reads as one continuous piece: no rules between sections, with
   whitespace doing the separating, tightened so their removal does not leave
   things loose. The base .section rule above still carries the border for any
   page added later that wants it. */
/* 38px top and bottom, so the gap between two sections lands near 76px rather
   than the ~104-126px that a measured scan found across Home and About. */
.page-home .section,.page-about .section,.page-services .section,.page-contact .section{
  border-top:0;padding:38px 0}
.page-home .hero,.page-about .hero,.page-services .hero,.page-contact .hero{padding:56px 0 0}
.page-home .figure,.page-about .figure,.page-services .figure,.page-contact .figure{margin-top:28px}
.page-home .section-head,.page-about .section-head,.page-services .section-head,
.page-contact .section-head{margin-bottom:22px}
.page-services .grid-2,.page-services .grid-3{gap:26px}
/* .actions carries bottom margin so the hero's credentials line clears the
   buttons. When a button ends a section that margin just stacks onto the
   section padding — which is what made the Home gap 126px. */
.actions:last-child{margin-bottom:0}
.section-head{margin-bottom:38px;max-width:56ch}
/* The closing invitation runs the full width so it reads as a line under the
   section rather than a narrow column stranded on the left. Compound selectors
   on purpose: ".section-head p" is declared further down with equal weight and
   would otherwise win on source order and reimpose the 56ch cap. */
.section-head.section-head-wide{max-width:none}
.section-head.section-head-wide p{max-width:none}
h2{font-size:38px;line-height:1.12;margin-bottom:14px}
@media (max-width:700px){h2{font-size:29px}}
.section-head p{color:var(--muted);max-width:56ch}
.prose p{color:var(--body-ink);max-width:60ch}
.prose p+p{margin-top:18px}

/* cards + lists */
.grid-3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.grid-2{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:34px}
@media (max-width:860px){.grid-3,.grid-2{grid-template-columns:1fr}}
h3{font-size:22px;line-height:1.25;margin-bottom:10px}
.card p{color:var(--muted);font-size:16px}
.tick{display:block;width:26px;height:2px;background:var(--accent);margin-bottom:18px;border-radius:2px}
.taglist{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.taglist li{font-size:12.5px;color:var(--muted);border:1px solid var(--line);
  border-radius:2px;padding:3px 9px;background:transparent}

/* Six services rendered identically read as one wall of text. Cards give each
   its own edge, and a distinct mark per service gives the eye something to
   navigate by instead of six interchangeable dashes. */
.card-service{background:var(--surface);border:1px solid var(--line);
  border-radius:2px;padding:28px 26px}
.svc-icon{display:block;width:32px;height:32px;color:var(--accent);margin-bottom:18px}
.svc-icon svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}

/* "What to expect" is an actual sequence — first call, then weekly sessions,
   then review — so numbering it encodes something true rather than decorating. */
.step{display:grid;grid-template-columns:auto 1fr;gap:0 16px;align-items:start}
.step-n{grid-row:span 2;font-family:"Cormorant",Georgia,serif;font-size:30px;
  line-height:1;color:var(--accent);font-variant-numeric:tabular-nums;
  border-right:1px solid var(--line);padding-right:16px}
.step h3{margin-bottom:8px}

.split{display:grid;grid-template-columns:1.1fr .9fr;gap:54px;align-items:center}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:34px}}
/* Mirror of .split: image on the left, text on the right. Used on About so the
   page is not weighted entirely to one side by the portrait in the hero.
   Needs its own breakpoint — .split.figure-left outranks the .split media rule. */
.split.figure-left{grid-template-columns:.9fr 1.1fr}
@media (max-width:860px){.split.figure-left{grid-template-columns:1fr}}
.split .figure{margin:0}
/* About runs long, so the portrait floats right and the copy wraps down its
   left and then closes underneath it. The per-paragraph 60ch cap is removed
   inside this block on purpose — with it, the lines below the image stopped
   short and left a dead area to the right. The flow is capped instead, which
   keeps the full-width lines under the image to a tolerable length.
   Needs a clearfix, or the float escapes into the next section. */
.about-flow{max-width:900px}
.about-flow p{max-width:none}
.page-about .figure-float{float:right;width:36%;max-width:360px;margin:4px 0 24px 38px}
.about-flow::after{content:"";display:block;clear:both}
.about-flow .lede{margin-bottom:0}
@media (max-width:760px){
  .page-about .figure-float{float:none;width:100%;max-width:none;margin:0 0 26px}
}
.quote{margin:28px 0 0;padding:28px 0 0;border-top:1px solid var(--line)}
.quote blockquote{margin:0 0 10px;font-family:"Cormorant",Georgia,serif;font-size:23px;
  line-height:1.4;font-style:italic;color:var(--ink)}
.quote figcaption{font-size:13.5px;color:var(--muted)}

/* credentials */
.creds{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px 34px}
.creds h3{font-size:17px;font-family:"Karla",sans-serif;font-weight:600;margin-bottom:3px}
.creds p{font-size:14.5px;color:var(--muted)}

/* fees */
.fee-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.fee-table th{text-align:left;font-family:"Karla",sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  padding:0 0 12px;border-bottom:1px solid var(--line-strong)}
.fee-table th.num,.fee-table td.num{text-align:right}
.fee-table td{padding:15px 0;border-bottom:1px solid var(--line);font-size:17px}
.fee-table td.len{color:var(--muted);font-size:14.5px;width:22%}
.fee-table td.num{font-weight:600;width:22%}
.fee-table tr.free td{color:var(--accent)}
.fee-table tr.free td.num{font-weight:700}
/* Spans the full table width rather than a text measure — capped at 56ch it sat
   under the Session column alone and read as a footnote to that column instead
   of to the whole table. */
.fees-note{margin-top:20px;font-size:14.5px;color:var(--muted);max-width:none}
/* Softer prices on the home page: lighter weight and the body ink rather than
   full-strength heading ink, so cost reads as information instead of emphasis.
   The free consultation keeps its brass — it is the invitation, not a price. */
.page-home .fee-table td.num{font-weight:500;color:var(--body-ink)}
.page-home .fee-table tr.free td{color:var(--accent)}
.page-home .fee-table tr.free td.num{font-weight:600;color:var(--accent)}

/* details + form */
.detail-list{margin:0;display:grid;gap:19px}
.detail-list div{display:grid;gap:3px}
.detail-list dt{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.detail-list dd{margin:0;font-size:17.5px}
.detail-list a{text-decoration:underline;text-underline-offset:3px}
.well{padding:19px 21px;background:var(--well);border:1px solid var(--line);
  border-radius:2px;font-size:15.5px;color:var(--body-ink)}
.field{display:grid;gap:7px;margin-bottom:20px}
.field label{font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--ink)}
.field input,.field select,.field textarea{
  font:inherit;font-size:16px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:2px;padding:12px 14px;width:100%}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.form-msg{margin-top:16px;padding:16px 18px;border-radius:2px;font-size:15.5px;display:none}
.form-msg.err{display:block;background:#F6E7E2;border:1px solid #D8B5A8;color:#6B2F1B}
.form-done{display:none;padding:30px 28px;background:var(--surface);
  border:1px solid var(--line);border-radius:2px}
.form-done h2{font-size:27px;margin-bottom:12px}
.form-done p{color:var(--body-ink);max-width:52ch}
.form-done p+p{margin-top:14px;font-size:15px;color:var(--muted)}

/* footer */
.site-foot{padding:40px 0;border-top:1px solid var(--line);display:flex;
  justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  font-size:13.5px;color:var(--muted)}
/* 380px so the baked-in tagline is actually readable; at 300px it was ~7px tall.
   The tagline ink was also darkened in the source PNG — see
   scripts/darken-tagline.ps1. */
.foot-logo{width:380px;max-width:100%;height:auto;display:block}
.foot-nav{display:flex;gap:20px;flex-wrap:wrap}
.foot-nav a{text-decoration:none}
.foot-nav a:hover{color:var(--ink)}

/* ------------------------------------------------------- touch and phone
   Kept at the END of the stylesheet on purpose. These override rules such as
   ".site-nav a" that have identical specificity, so they only win on source
   order — placed mid-file they are silently beaten and the nav keeps its
   desktop 34px hit area. Verified by measurement, not by eye. */

/* Tablets are touch devices too, so hit areas grow well before phone width.
   44px is the Apple/Android minimum; at desktop padding these measured 34px. */
@media (max-width:900px){
  .site-nav a{padding:12px 4px}
  .foot-nav a{padding:12px 4px}
}

/* Phone layout: the mark and padding shrink so the header stops taking a fifth
   of the first screen, and both navs spread the full width. */
@media (max-width:600px){
  .brand-mark{height:56px}
  .site-head{padding:16px 0;gap:12px}
  .brand{gap:14px}
  .site-nav{width:100%;justify-content:space-between;gap:4px;font-size:15.5px}
  /* Footer stacks and centres. space-between here pinned "Home" to the left
     edge and "Contact" to the right with big gaps between, which read as four
     scattered links rather than one nav group. Centred and grouped instead,
     and the logo comes down so the footer stops taking a third of the screen. */
  .site-foot{flex-direction:column;align-items:center;text-align:center;
    padding:26px 0;gap:14px}
  .foot-logo{width:230px}
  .foot-nav{width:auto;justify-content:center;flex-wrap:wrap;gap:2px 10px}
}