/* Serene & Clean. One stylesheet, no framework.
   Palette: "Vanilla & Blush" (Scott 2026-10-05; Crystal did not like sage/olive, this is the third
   test after Coastal Luxury 18adf22 and Quiet Organic 3b54a21): vanilla, blush, warm taupe, deep
   cocoa, soft ivory. Warmer and more feminine, still upscale: mostly vanilla and ivory, light blush
   sections, blush borders and buttons, dark cocoa text for sophistication. The blush reads rosewater
   or nude, never baby pink.
   Colors are ROLE tokens (page, paper, brand, neutral, strong, mark); a palette test is an edit to
   the first block of :root and nothing else.
   The authored device is the label chip, styled like a printed bin label. */

/* Headlines: Marcellus, a flared, carved-roman serif (one weight). Scott 2026-10-05: the luxury lever
   after the Coastal Luxury palette. Calm and engraved rather than high-contrast fashion; deliberately
   not one of the reflex "luxury" serifs. Body and UI stay Nunito Sans. */
@font-face { font-family: "Marcellus"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/marcellus-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/nunito-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/nunito-sans-latin-600-normal.woff2") format("woff2"); }

:root {
  /* Vanilla & Blush (Scott 2026-10-05). The five named colors, by role. */
  --page: #F7F1E7;        /* vanilla: the main background */
  --paper: #FCFAF5;       /* soft ivory: cards and clean sections */
  --brand: #E6C8C4;       /* blush: buttons, the closing panel, the photo panel, the Packing card */
  --neutral: #B8AA9C;     /* warm taupe: grounding panels and marks. Never text */
  --strong: #4A423D;      /* deep cocoa: headlines, text, dark buttons, the footer. 8.74:1 on vanilla */
  /* Derived from those five */
  --brand-pale: #EFDFD7;  /* blush softened into vanilla: the review and booking sections */
  --brand-hover: #DABDB9; /* blush button hover (cocoa text 5.59:1) */
  --mark: #C9A09A;        /* dusty rose: hairlines, chip borders, the brush stroke. Never text */
  --neutral-pale: #E5DDD2;/* taupe softened into vanilla: the work section */
  --strong-dark: #3B3531; /* cocoa hover, and numerals on blush */
  --ink: #4A423D;         /* body text */
  --ink-soft: #625853;    /* secondary text: 6.15:1 on vanilla, 5.33 on pale blush, 5.13 on linen */
  --soft-brand: #5E544F;  /* secondary text on full blush: 4.70:1 */
  --error: #A3382D;
  --line: rgba(201, 160, 154, .42); /* dusty-rose hairline */

  --font-head: "Marcellus", Optima, Candara, "Palatino Linotype", Georgia, serif;
  --font-body: "Nunito Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --radius: 16px;
  --max: 1200px;
  --gutter: 20px;
  --section: 72px;
}
@media (min-width: 700px) { :root { --gutter: 32px; } }
@media (min-width: 1100px) { :root { --gutter: 48px; --section: 112px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font: 400 17px/1.65 var(--font-body); -webkit-font-smoothing: antialiased; caret-color: var(--strong);
}
@media (min-width: 1100px) { body { font-size: 18px; } }
::selection { background: var(--brand); color: var(--ink); }
:focus-visible { outline: 3px solid var(--strong); outline-offset: 3px; border-radius: 4px; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--strong); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
a:hover { text-decoration-thickness: 2px; }

h1, h2, h3 { font-family: var(--font-head); font-weight: 400; line-height: 1.12; margin: 0 0 .5em; text-wrap: balance; color: var(--strong); }
h1 { font-size: clamp(2.5rem, 1.5rem + 3.6vw, 3.85rem); letter-spacing: .01em; }
h2 { font-size: clamp(1.85rem, 1.35rem + 1.8vw, 2.5rem); letter-spacing: .01em; }
h3 { font-size: clamp(1.25rem, 1.15rem + .4vw, 1.4rem); }
p { margin: 0 0 1em; max-width: 64ch; }

.skip { position: absolute; left: 12px; top: -60px; background: var(--paper); padding: 10px 14px; border-radius: 8px; z-index: 30; }
.skip:focus { top: 12px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 760px; }
section { padding: var(--section) 0; }
.lede { font-size: 1.1em; color: var(--ink-soft); max-width: 56ch; }

/* Surfaces: one per section */
.bg-paper { background: var(--paper); }
.bg-brand-pale { background: var(--brand-pale); }
.bg-neutral-pale { background: var(--neutral-pale); }
.bg-brand { background: var(--brand); --ink-soft: var(--soft-brand); }
.card.text-card .face { --ink-soft: var(--soft-brand); }
/* Ivory cards inside a colored section go back to the neutral secondary text */
.card, .story, .reach, .form, .steps li { --ink-soft: #625853; }
/* On full blush the primary button turns cocoa, so it still stands out from its panel */
.bg-brand .btn { background: var(--strong); color: var(--paper); box-shadow: 0 6px 18px rgba(74, 66, 61, .2); }
.bg-brand .btn:hover { background: var(--strong-dark); }
.bg-strong { background: var(--strong); color: var(--page); }
.bg-strong h2, .bg-strong h3 { color: var(--page); }
.bg-strong a { color: var(--brand); }
.bg-strong :focus-visible { outline-color: var(--brand); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 26px; border: 0; border-radius: 999px;
  background: var(--brand); color: var(--strong);
  font: 600 16px/1 var(--font-body); text-decoration: none; cursor: pointer;
  box-shadow: 0 6px 18px rgba(176, 128, 120, .22);
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn:hover { background: var(--brand-hover); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(176, 128, 120, .3); }
.btn[disabled] { opacity: .7; cursor: progress; transform: none; }
.btn-light { background: var(--page); color: var(--strong); box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.btn-light:hover { background: var(--paper); }
.link { font: 600 16px/1.3 var(--font-body); color: var(--strong); }
.support { font-size: 15px; color: var(--ink-soft); margin: 14px 0 0; }

/* The label chip: a printed bin label. On photos and beside things, never above a heading. */
.chip {
  display: inline-block; background: var(--paper);
  border: 1px solid var(--mark); border-radius: 6px;
  color: var(--strong); font: 600 12.5px/1 var(--font-body);
  letter-spacing: .08em; text-transform: uppercase; padding: 7px 10px; white-space: nowrap;
}
.photo { position: relative; margin: 0; }
.photo img { width: 100%; border-radius: var(--radius); object-fit: cover; background: var(--brand-pale); }
.photo .chip { position: absolute; left: 14px; bottom: 14px; box-shadow: 0 2px 10px rgba(74, 66, 61, .16); }

/* Photo frame: a soft blush panel offset behind the photo, and a small dusty-rose circle, the same
   rose as the brush stroke under "serene." (taupe blended into the hero photo's walls, 2026-10-05). */
.framed { isolation: isolate; }
.framed::before {
  content: ""; position: absolute; inset: 22px -22px -22px 22px; z-index: -1;
  border-radius: calc(var(--radius) + 4px); background: var(--brand);
}
.framed.warm::before { background: var(--brand); }
.framed::after {
  content: ""; position: absolute; z-index: -1; width: 96px; height: 96px; border-radius: 50%;
  left: -28px; top: -28px; background: var(--mark);
}
.framed.warm::after { background: var(--page); }
@media (max-width: 699px) {
  .framed::before { inset: 14px -12px -14px 14px; }
  .framed::after { width: 64px; height: 64px; left: -12px; top: -18px; } /* stays inside the 20px gutter */
}

/* Header */
.site-header { position: sticky; top: 0; z-index: 10; background: rgba(247, 241, 231, .96); border-bottom: 1px solid var(--line); }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font: 400 22px/1 var(--font-head); letter-spacing: .02em; color: var(--strong); text-decoration: none; white-space: nowrap; }
.wordmark::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--mark); box-shadow: 9px -6px 0 -2px var(--neutral); }
.site-nav { display: none; }
.site-nav ul { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.site-nav a { position: relative; font: 400 16.5px/1 var(--font-head); letter-spacing: .02em; color: var(--ink); text-decoration: none; padding: 8px 0; }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--mark); transform: scaleX(0); transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.site-nav a:hover { color: var(--strong); }
.site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); }
.site-header .btn { min-height: 44px; padding: 0 20px; font-size: 15px; box-shadow: none; }
@media (min-width: 860px) {
  .site-header .bar { display: grid; grid-template-columns: 1fr auto 1fr; }
  .site-nav { display: block; }
  .site-header .btn { justify-self: end; }
}

/* Hero */
.hero { padding: 48px 0 calc(var(--section) - 8px); overflow: hidden; }
.hero .grid { display: grid; gap: 52px; align-items: center; }
.hero .lead { font-size: 1.14em; max-width: 34ch; }
.hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 30px; }
.hero .photo { max-width: 470px; width: calc(100% - 22px); }
.hero .photo img { aspect-ratio: 4 / 5; }
.hero .booking-chip { margin-bottom: 22px; }
.areas { margin: 34px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-soft); }
.areas strong { color: var(--strong); font-weight: 600; }
@media (min-width: 900px) {
  .hero { padding-top: 80px; }
  .hero .grid { grid-template-columns: 50fr 50fr; gap: 72px; }
  .hero .photo { justify-self: center; }
}

/* Intro band */
.intro-band { padding: 64px 0; }
.intro-band.bg-paper { border-block: 1px solid var(--line); }
.intro-band p { font: 400 clamp(1.35rem, 1.1rem + 1vw, 1.75rem)/1.5 var(--font-head); max-width: 40ch; margin: 0; }
.three { display: flex; flex-wrap: wrap; gap: 10px 14px; list-style: none; padding: 0; margin: 28px 0 0; }
.three li { font: 400 15px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; padding: 11px 16px; border-radius: 999px; background: transparent; border: 1px solid var(--mark); color: var(--strong); }

/* Services */
.section-head { display: grid; gap: 8px; margin-bottom: 36px; }
.section-head p { margin: 0; }
.cards { display: grid; gap: 24px; list-style: none; padding: 0; margin: 0; }
.card { background: var(--paper); border-radius: var(--radius); overflow: hidden; box-shadow: 0 0 0 1px var(--line), 0 10px 30px rgba(74, 66, 61, .07); display: flex; flex-direction: column; transition: translate .25s ease, box-shadow .25s ease; }
/* Hover lift uses `translate`, the scroll reveal uses `transform`: separate properties, no fight. */
.card:hover { translate: 0 -4px; box-shadow: 0 0 0 1px var(--line), 0 18px 40px rgba(74, 66, 61, .13); }
.card .photo img { aspect-ratio: 4 / 3; border-radius: 0; }
.card .body { padding: 20px 22px 24px; }
.card .body p { margin: 0; color: var(--ink-soft); }
.card.text-card { background: var(--brand); }
.card.text-card .face { min-height: 180px; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; padding: 22px; }
.card.text-card .face p { font: 400 23px/1.35 var(--font-head); color: var(--strong); margin: 0; max-width: 20ch; }
.card.text-card .face .chip { align-self: flex-start; }
.card.text-card .body { background: var(--paper); }
.also { margin: 30px 0 0; color: var(--ink-soft); }
@media (min-width: 700px) {
  .cards { grid-template-columns: 1fr 1fr; }
  .card.text-card .face { min-height: 0; aspect-ratio: 4 / 3; }
}
/* Four across on wide screens: each photo renders near its real width, so placeholders stay sharp. */
@media (min-width: 1100px) {
  .cards { grid-template-columns: repeat(4, 1fr); gap: 22px; }
  .card.text-card .face p { font-size: 21px; }
}

/* Featured work */
.feature { display: grid; gap: 56px; align-items: center; }
.feature .photo { max-width: 440px; width: calc(100% - 22px); }
.feature .photo img { aspect-ratio: 4 / 5; }
.feature .story { background: var(--paper); border-radius: var(--radius); padding: 28px 26px; box-shadow: 0 10px 30px rgba(74, 66, 61, .10); }
.feature .story p { font-size: 1.04em; }
.feature .story p:last-of-type { margin-bottom: 18px; }
@media (min-width: 900px) { .feature { grid-template-columns: 1fr 1fr; gap: 80px; } .feature .photo { justify-self: center; } }

/* Meet Crystal */
.meet .grid { display: grid; gap: 40px; align-items: center; }
.logo-disc { width: min(300px, 80vw); aspect-ratio: 1; border-radius: 50%; background: var(--paper); display: grid; place-items: center; box-shadow: 0 0 0 14px var(--brand), 0 0 0 15px var(--mark); margin: 15px; }
.logo-disc img { width: 76%; }
.meet .copy p { font-size: 1.04em; }
.meet .signoff { font: 400 1.3rem/1.4 var(--font-head); color: var(--strong); }
/* Her bio: her own words, paragraph by paragraph. The portrait stays in view beside it on wide
   screens while the text scrolls. */
.bio p { margin-bottom: .85em; max-width: 60ch; }
.bio .signoff { margin: .2em 0 1em; }
.bio .sig { font: 400 1.8rem/1 var(--font-head); color: var(--strong); margin: 18px 0 0; display: flex; align-items: center; gap: 14px; }
.bio .sig::before { content: ""; width: 36px; height: 2px; border-radius: 2px; background: var(--mark); }
.logo-disc.portrait { overflow: hidden; background: var(--brand-pale); }
.logo-disc.portrait img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
@media (min-width: 820px) {
  .meet .grid { align-items: start; }
  .meet .logo-disc { position: sticky; top: 110px; }
}
@media (min-width: 820px) { .meet .grid { grid-template-columns: 340px 1fr; gap: 64px; } }

/* Steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.steps li { background: var(--page); box-shadow: 0 0 0 1px var(--line); border-radius: var(--radius); padding: 26px 24px; display: grid; gap: 14px; align-content: start; }
.steps .num { width: 46px; height: 46px; border-radius: 50%; background: var(--brand); color: var(--strong-dark); display: grid; place-items: center; font: 400 20px/1 var(--font-head); }
.steps h3 { margin: 0; }
.steps p { margin: 0; color: var(--ink-soft); }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }

/* Testimonial */
.quote { margin: 0; padding: 0; max-width: 900px; position: relative; }
/* A classic Georgia curl reads as a quote mark at display size. */
.quote .mark { font: 400 120px/1 Georgia, "Times New Roman", serif; color: var(--mark); display: block; height: 64px; margin-top: 8px; }
.quote blockquote { margin: 0; }
.quote blockquote p { font: 400 clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem)/1.45 var(--font-head); max-width: 38ch; margin: 0; color: var(--ink); }
.quote figcaption { margin-top: 22px; color: var(--ink-soft); font-size: 16px; letter-spacing: .02em; }
.quote figcaption::before { content: ""; display: inline-block; width: 32px; height: 2px; background: var(--mark); vertical-align: middle; margin-right: 12px; }

/* FAQ */
.faq-layout { display: grid; gap: 28px; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font: 400 19px/1.35 var(--font-head); color: var(--ink); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--brand-pale); color: var(--strong); display: grid; place-items: center; font: 400 22px/1 var(--font-head); transition: transform .15s ease, background-color .15s ease; }
.faq-list details[open] summary::after { transform: rotate(45deg); background: var(--brand); color: var(--strong-dark); }
.faq-list details p { color: var(--ink-soft); margin: 0 0 20px; }
@media (min-width: 960px) { .faq-layout { grid-template-columns: 320px 1fr; gap: 64px; } }

/* Closing call to action */
.cta-band { text-align: center; padding: 88px 0; }
.cta-band h2 { max-width: 20ch; margin: 0 auto .4em; }
.cta-band p { margin: 0 auto 28px; color: var(--ink-soft); }
/* One line wherever it fits (Scott 2026-10-05: "pm" was wrapping alone). The time range is joined
   with no-break spaces in the HTML, so on a phone the break falls before it, never inside it. */
.cta-band .support { margin-top: 16px; max-width: none; text-wrap: balance; }

/* Booking (the /book page and the pop-out share the form) */
.book .grid { display: grid; gap: 40px; align-items: start; }
.fit { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.fit li { display: flex; gap: 12px; align-items: baseline; }
.fit li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--strong); flex: none; transform: translateY(-1px); }
.reach { background: var(--paper); border-radius: var(--radius); padding: 24px 24px 10px; margin-top: 30px; max-width: 460px; }
.reach h2, .reach h3 { font-size: 20px; }
.reach p { color: var(--ink-soft); }
.reach a { font-weight: 600; }
@media (min-width: 900px) { .book .grid { grid-template-columns: 1fr 1fr; gap: 72px; } }

/* Form */
.form { background: var(--paper); border-radius: var(--radius); padding: 28px 24px; box-shadow: 0 10px 30px rgba(74, 66, 61, .10); }
.form h2, .form h3 { margin-bottom: 4px; }
.form .hint { color: var(--ink-soft); font-size: 15px; margin-bottom: 20px; }
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font: 600 15px/1.3 var(--font-body); color: var(--ink); }
.field .opt { font-weight: 400; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px;
  border: 1px solid var(--neutral); border-radius: 12px; background: var(--page);
  font: 400 16px/1.4 var(--font-body); color: var(--ink);
  transition: border-color .15s ease, background-color .15s ease;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--strong); }
.field textarea { min-height: 120px; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--strong) 50%), linear-gradient(135deg, var(--strong) 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--brand); outline-offset: 0; border-color: var(--strong); background: var(--paper); }
.two { display: grid; gap: 0 16px; }
@media (min-width: 560px) { .two { grid-template-columns: 1fr 1fr; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .btn { width: 100%; margin-top: 4px; }
@media (min-width: 560px) { .form .btn { width: auto; } }
.form-status { margin: 16px 0 0; padding: 14px 16px; border-radius: 12px; font-size: 15px; }
.form-status[data-state="sent"] { background: var(--brand-pale); color: var(--ink); }
.form-status[data-state="error"] { background: #FBEDEB; color: var(--error); }
.form-status[data-state="sending"] { background: var(--page); color: var(--ink-soft); }
.form-status ul { margin: 8px 0 0; padding-left: 20px; }

/* Pop-out (native <dialog>) */
.book-dialog {
  width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0;
  border-radius: 20px; background: var(--paper); color: var(--ink); overflow: auto;
  box-shadow: 0 30px 80px rgba(59, 53, 49, .35);
}
.book-dialog::backdrop { background: rgba(59, 53, 49, .55); }
.book-dialog .head { background: var(--brand-pale); padding: 26px 24px 22px; position: relative; }
.book-dialog .head h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); margin: 0 48px 6px 0; }
.book-dialog .head p { margin: 0; color: var(--ink); font-size: 15px; }
.book-dialog .close {
  position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: var(--paper); color: var(--strong); font: 400 26px/1 var(--font-head); cursor: pointer;
}
.book-dialog .close:hover { background: var(--brand); }
.book-dialog .form { box-shadow: none; border-radius: 0; padding: 22px 24px 26px; }
.book-dialog .alt { margin: 0; padding: 0 24px 24px; font-size: 15px; color: var(--ink-soft); }
@media (prefers-reduced-motion: no-preference) {
  .book-dialog[open] { animation: rise .22s cubic-bezier(.16, 1, .3, 1); }
  @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
}
body.dialog-open { overflow: hidden; }

/* Her Google Calendar booking page, embedded. The card frames it like the rest of the site. */
.booking-frame { background: var(--paper); border-radius: var(--radius); overflow: hidden; box-shadow: 0 10px 30px rgba(74, 66, 61, .10); }
.booking-frame iframe { display: block; width: 100%; height: 720px; border: 0; }
.book-dialog.wide { width: min(980px, calc(100vw - 24px)); }
.book-dialog .booking-frame { border-radius: 0; box-shadow: none; }
.book-dialog .booking-frame iframe { height: min(620px, calc(100dvh - 230px)); }
.book-dialog .alt { padding-top: 14px; }
.book-stack { display: grid; gap: 28px; }
.book-stack .grid { display: grid; gap: 20px 64px; align-items: end; }
.book-stack .fit { margin-top: 0; }
.reach-line, .alt-line { color: var(--ink-soft); font-size: 15px; margin: 16px 0 0; }
.reach-line a, .alt-line a { font-weight: 600; }
@media (min-width: 900px) { .book-stack .grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 699px) { .booking-frame iframe { height: 860px; } }

/* Footer */
.site-footer { padding: 56px 0 60px; font-size: 15px; }
.site-footer.bg-strong { color: var(--page); }
.site-footer .cols { display: grid; gap: 30px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; align-content: start; }
.site-footer a { color: var(--page); text-decoration: none; }
.site-footer a:hover { color: var(--brand); text-decoration: underline; }
.site-footer .wordmark { color: var(--page); margin-bottom: 14px; }
.site-footer .tag { font: 400 19px/1.4 var(--font-head); color: var(--brand); margin: 0 0 10px; }
.footer-brand { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.footer-brand .wordmark { margin-bottom: 6px; }
.footer-brand .tag { margin: 0; }
.footer-logo { flex: none; width: 104px; height: 104px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; box-shadow: 0 0 0 4px rgba(230, 200, 196, .6); }
.footer-logo img { width: 84%; }
/* Instagram and Facebook: the platform glyph beside the name, in the footer's text color. */
.site-footer a.social { display: inline-flex; align-items: center; gap: 10px; }
.site-footer a.social svg { width: 18px; height: 18px; flex: none; fill: currentColor; }
@media (min-width: 760px) { .site-footer .cols { grid-template-columns: 2fr 1fr 1fr; } }

/* Simple pages: privacy, thank-you, 404, and the Worker's no-JS replies */
.simple { padding: 64px 0 var(--section); }
.simple h2 { font-size: 1.6rem; margin-top: 1.6em; }
.simple .updated { color: var(--ink-soft); }
.page-hero { padding: 56px 0 64px; }
.page-hero p { max-width: 54ch; }

[data-placeholder="true"] { filter: saturate(.98); }

/* ─── Motion ───────────────────────────────────────────────────────────────────────────────
   One language: things SETTLE into place, the way a labelled bin settles onto a shelf. Exponential
   ease-out, nothing bounces except the small round marks, nothing loops.
   Rules that keep it safe:
   - Every hidden start state sits behind BOTH `html.js` (set by an inline script, so no JS means
     everything simply shows) AND prefers-reduced-motion: no-preference (so reduced motion means
     no animation at all, not a slower one).
   - Scroll reveals are driven by site.js with a safety net that reveals everything if the observer
     never fires. Content can never stay hidden.
   - Only transform, opacity, filter and clip-path animate. */

/* No overshoot anywhere: the "pop" marks decelerate smoothly too (quint out), just faster. */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-pop: cubic-bezier(.22, 1, .36, 1); }

/* Header lifts once the page scrolls (class set by site.js). Shadow and colour only: its height
   never changes, so nothing below it reflows mid-scroll. */
.site-header { transition: box-shadow .3s var(--ease-out), background-color .3s; }
.site-header.scrolled { box-shadow: 0 8px 24px rgba(74, 66, 61, .12); background: rgba(247, 241, 231, .98); }

/* The brush stroke under "serene." */
.h1-line { display: block; }
.swash { position: relative; display: inline-block; white-space: nowrap; }
.swash svg { position: absolute; left: -2%; width: 104%; bottom: -.16em; height: .3em; overflow: visible; pointer-events: none; }
.swash path { fill: none; stroke: var(--mark); stroke-width: 6; stroke-linecap: round; }

/* Links with an arrow that leans forward on hover */
.link-arrow { display: inline-flex; align-items: center; gap: 8px; }
.link-arrow svg { width: 18px; height: 18px; flex: none; transition: transform .25s var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }

/* Service photos lean in on hover; the card already lifts. */
.card .photo img { transition: transform .7s var(--ease-out); }
.card:hover .photo img { transform: scale(1.05); }

/* Gentle parallax: the colored panel and the clay circle behind a framed photo drift at
   different rates. --shift is set by site.js; individual `translate` composes with the
   entrance `transform` so the two never fight. */
.framed::before { translate: 0 calc(var(--shift, 0) * 1px); }
.framed::after { translate: 0 calc(var(--shift, 0) * -1.6px); }

/* FAQ answers open instantly (no height animation) and the answer text eases in. */

.book-dialog::backdrop { transition: opacity .25s; }

@media (prefers-reduced-motion: no-preference) {
  /* Opening sequence: headline lines rise out of a soft blur, the stroke draws, the photo opens
     from its center and settles, then its panel and circle arrive. */
  .js .hero .h1-line { animation: rise-blur 1s var(--ease-out) both; }
  .js .hero .h1-line:nth-child(2) { animation-delay: .14s; }
  .js .hero .lead { animation: rise 1s var(--ease-out) .32s both; }
  .js .hero .actions { animation: rise 1s var(--ease-out) .44s both; }
  .js .hero .support, .js .hero .areas { animation: rise 1s var(--ease-out) .56s both; }
  .js .swash path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.1s var(--ease-out) .75s forwards; }
  .js .hero .photo img { animation: open-photo 1.4s var(--ease-out) .18s both; }
  .js .hero .photo .chip { animation: rise .8s var(--ease-out) 1.1s both; }
  .js .hero .framed::before { animation: settle-panel 1.3s var(--ease-out) .55s both; }
  .js .hero .framed::after { animation: pop 0.9s var(--ease-pop) .95s both; }

  @keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  @keyframes rise-blur { from { opacity: 0; transform: translateY(.45em); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes open-photo {
    from { opacity: 0; clip-path: inset(14% 14% 14% 14% round var(--radius)); transform: scale(1.12); }
    to { opacity: 1; clip-path: inset(0 round var(--radius)); transform: none; }
  }
  @keyframes settle-panel { from { opacity: 0; transform: translate(-22px, -22px); } to { opacity: 1; transform: none; } }
  @keyframes pop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }

  /* Scroll reveals. --i staggers siblings. */
  .js [data-reveal] {
    --d: calc(var(--i, 0) * 90ms);
    opacity: 0;
    /* The reveal staggers; the hover properties (translate, shadow) stay instant to respond. */
    transition: opacity .9s var(--ease-out) var(--d), transform .9s var(--ease-out) var(--d),
      filter .9s var(--ease-out) var(--d), translate .25s ease, box-shadow .25s ease;
  }
  .js [data-reveal="up"] { transform: translateY(30px); }
  .js [data-reveal="left"] { transform: translateX(-26px); }
  .js [data-reveal="right"] { transform: translateX(34px); }
  .js [data-reveal="soft"] { transform: translateY(18px); filter: blur(6px); }
  .js [data-reveal="turn"] { transform: scale(.9) rotate(-8deg); }
  .js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }

  /* The featured photo settles inside its frame after the frame arrives. */
  .js .feature .photo img { transform: scale(1.14); transition: transform 1.6s var(--ease-out) .1s; }
  .js .feature .photo.is-in img { transform: none; }

  /* Step numbers pop in one after another once their card lands. */
  .js .steps .num { transform: scale(.3); opacity: 0; transition: transform .7s var(--ease-pop), opacity .4s; transition-delay: calc(var(--i, 0) * 120ms + 250ms); }
  .js .steps li.is-in .num { transform: none; opacity: 1; }

  /* The review: the quote mark drops in, the rule under it grows. */
  .js .quote .mark { opacity: 0; transform: translateY(-14px) scale(.8); transition: opacity .8s var(--ease-out), transform .8s var(--ease-pop); }
  .js .quote.is-in .mark { opacity: 1; transform: none; }
  .js .quote figcaption::before { transform: scaleX(0); transform-origin: left center; transition: transform .9s var(--ease-out) .5s; }
  .js .quote.is-in figcaption::before { transform: none; }

  /* An opened FAQ answer eases in. */
  .faq-list details[open] p { animation: rise .45s var(--ease-out) both; }

  /* The pop-out rises; its backdrop fades. */
  .book-dialog[open]::backdrop { animation: fade .3s ease-out; }
}