/* ==========================================================================
   withphylicia — design system
   Palette: deep plum (structure) · olive (calm) · terracotta (accent only)
   Feel: light, airy, warm — depth from layering and space, not from weight.
   ========================================================================== */

/* Canela is a licensed font from Commercial Type — it is not on Google Fonts and
   cannot be loaded from a CDN. Buy the webfont licence, drop the files into
   site/assets/fonts/ with these exact names, and headings switch over with no
   other change. Until the files exist these rules simply fail and Lora is used.
   Cuts needed: Canela Light + Canela Light Italic (the display cut). */
@font-face {
  font-family: "Canela";
  src: url("assets/fonts/Canela-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Canela";
  src: url("assets/fonts/Canela-LightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Canela";
  src: url("assets/fonts/Canela-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- colour --- */
  --cream:        #FBF7F2;
  --cream-2:      #F5EEE5;
  --sand:         #EADFD1;

  --plum-deep:    #331729;
  --plum:         #4E2643;
  --plum-soft:    #7B5871;
  --plum-wash:    #EFE6EC;

  --olive-deep:   #4A5439;
  --olive:        #64704C;
  --olive-soft:   #94A07A;
  --olive-wash:   #EBEDE2;

  --terracotta:   #C56B44;
  --terracotta-soft: #E39A73;

  --ink:          #2C262A;
  --ink-soft:     #5E555B;

  /* --- type --- */
  /* Canela first; Lora holds the position until the licensed files are added. */
  --display: "Canela", "Lora", "Iowan Old Style", Georgia, serif;
  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.88rem);
  --step-0:  clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --step-2:  clamp(1.6rem, 1.4rem + 1vw, 2.2rem);
  /* sized down ~20% from the original scale, still a clear hero/section anchor */
  /* step-4 (hero H1) stays put, that one's meant to be the big moment.
     step-3 (every section H2) comes down further, since it repeats down the
     whole page and was starting to feel like the site never stops shouting. */
  --step-3:  clamp(1.4rem, 1.25rem + 0.9vw, 1.95rem);
  --step-4:  clamp(2rem, 1.7rem + 2.2vw, 3.75rem);

  /* --- space --- */
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --section-y: clamp(4.5rem, 9vw, 9rem);
  --max: 1240px;

  --radius: 4px;
  --radius-pill: 999px;
}

/* --------------------------------------------------------------- reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.7;
  font-weight: 350;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }

/* Fine paper grain over the whole page. Barely perceptible, but it stops the
   flat colour fields from looking like screen-only defaults. */
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23g)'/></svg>");
}
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------------------ primitives --- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
/* keep anchor jumps clear of the sticky header */
section[id] { scroll-margin-top: 5.5rem; }
/* Deliberately uneven vertical rhythm — sections that breathe next to sections
   that don't. Uniform padding everywhere is what makes a page feel generated. */
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section--open  { padding-block: clamp(6rem, 13vw, 13rem); }

/* A single line of type carrying a whole screen, pushed off-centre. */
.statement > * { max-width: 34ch; margin-left: auto; }
@media (max-width: 700px) { .statement > * { margin-left: 0; } }

/* Weight 300 resolves to Canela Light when it's installed, and to Lora 400 (its
   lightest) when it isn't. Lora is the sturdier of the two, so the airiness has
   to come from tight leading and negative tracking rather than a thin weight. */
.display {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -0.022em;
  color: var(--plum);
}
/* small display sizes need less negative tracking to stay readable */
.display-sm {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.008em;
  color: var(--plum);
}
.h1 { font-size: var(--step-4); }
.h2 { font-size: var(--step-3); }
.h3 { font-size: var(--step-2); }

.eyebrow {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 500;
  color: var(--olive);
  margin: 0 0 1.4rem;
}
.eyebrow--light { color: var(--olive-soft); }

.lede { font-size: var(--step-1); line-height: 1.6; color: var(--ink-soft); }
.measure { max-width: 34ch; }
.measure-wide { max-width: 58ch; }

.italic-accent { font-style: italic; color: var(--terracotta); }

/* underline swash under a hero word */
.swash { position: relative; white-space: nowrap; }
.swash svg {
  position: absolute;
  left: 0; right: 0; bottom: -0.16em;
  width: 100%; height: 0.32em;
  overflow: visible;
  color: var(--terracotta);
}
.swash path {
  fill: none; stroke: currentColor; stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
  animation: draw 1.4s .5s cubic-bezier(.5,0,.2,1) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* --------------------------------------------------------------- buttons --- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 0.95rem 1.9rem;
  border-radius: var(--radius-pill);
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, transform .35s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary {
  background: var(--plum); color: var(--cream);
  box-shadow: 0 2px 10px -2px color-mix(in srgb, var(--plum-deep) 45%, transparent);
}
.btn--primary:hover { background: var(--plum-deep); }
.btn--ghost { border-color: color-mix(in srgb, var(--plum) 28%, transparent); color: var(--plum); }
.btn--ghost:hover { background: var(--plum-wash); border-color: var(--plum-soft); }
.btn--onDark { background: var(--cream); color: var(--plum-deep); }
.btn--onDark:hover { background: #fff; }

.arrow-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--plum);
  border-bottom: 1px solid color-mix(in srgb, var(--terracotta) 45%, transparent);
  padding-bottom: 2px;
  transition: color .3s ease, border-color .3s ease, gap .3s ease;
}
.arrow-link:hover { color: var(--terracotta); border-color: var(--terracotta); gap: .85rem; }
.arrow-link--light { color: var(--cream); border-color: color-mix(in srgb, var(--terracotta-soft) 60%, transparent); }
.arrow-link--light:hover { color: var(--terracotta-soft); }

/* ---------------------------------------------------------------- header --- */
.header {
  position: sticky; top: 0; z-index: 50;
  /* High opacity + no saturation boost: the old 86%+saturate(1.4) let
     whatever section was scrolled underneath (esp. the olive bands) bleed
     through and tint the header, muddying the plum button's contrast. */
  background: color-mix(in srgb, var(--cream) 96%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .4s ease, background-color .4s ease;
}
.header[data-stuck="true"] { border-color: color-mix(in srgb, var(--plum) 10%, transparent); }
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
  padding-block: 1.05rem;
}
.wordmark {
  display: flex; align-items: center; gap: .7rem;
  text-decoration: none; color: var(--plum);
  font-family: var(--display);
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: 0.01em;
}
.wordmark span { display: block; }
.wordmark small {
  display: block;
  font-family: var(--sans);
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--olive);
  margin-top: .3rem;
  font-weight: 500;
}
.mark { width: 30px; height: 30px; flex: none; color: var(--olive); }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav a {
  font-size: var(--step--1);
  text-decoration: none;
  color: var(--ink-soft);
  letter-spacing: .01em;
  transition: color .3s ease;
}
.nav a:hover { color: var(--plum); }
/* current page gets a quiet terracotta underline rather than a filled pill */
.nav a[aria-current="page"] {
  color: var(--plum);
  border-bottom: 1px solid var(--terracotta);
  padding-bottom: 3px;
}
.nav__cta, .nav a[aria-current="page"].nav__cta { margin-left: .5rem; border-bottom: 0; padding-bottom: .95rem; }
/* Only the header button gets its own colour: it sits permanently next to the
   plum wordmark and olive mark icon, so it needs a genuinely different hue to
   read as a distinct button rather than more header text. In-page CTAs (hero,
   closing section) stay plain plum, per feedback that the ring there was
   unnecessary. */
.nav__cta.btn--primary { background: var(--terracotta); }
.nav__cta.btn--primary:hover { background: #AD5735; }

.nav-toggle {
  display: none;
  background: none; border: 0; padding: .5rem; cursor: pointer; color: var(--plum);
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 64px 0 auto;
    flex-direction: column; align-items: flex-start;
    gap: 0;
    background: var(--cream);
    padding: 1rem var(--gutter) 2rem;
    border-bottom: 1px solid var(--sand);
    transform: translateY(-120%);
    transition: transform .45s cubic-bezier(.5,0,.2,1);
  }
  .nav[data-open="true"] { transform: translateY(0); }
  .nav a { padding: .8rem 0; font-size: var(--step-0); width: 100%; }
  .nav__cta { margin: .8rem 0 0; }
}

/* ----------------------------------------------------------- photo frames --- */
/* .ph is a placeholder that reads as intentional warm abstract art until real
   photos are dropped in. To use a real photo, swap the element for:
   <img class="frame" src="assets/your-photo.jpg" alt="...">
   Declared before the layout sections below so those can still position it. */
.ph, .frame {
  border-radius: 0;
  overflow: hidden;
  position: relative;
  background: var(--sand);
}
.frame { object-fit: cover; width: 100%; height: 100%; }
/* Flat, quiet holding blocks — deliberately NOT soft mesh gradients, which read
   as generated filler. A centred hairline label says what belongs here. */
/* Label sits top-left so overlapping blocks in the collage don't cover it. */
.ph::after {
  content: attr(data-note);
  position: absolute;
  left: 0; top: 0;
  padding: 1.1rem 1.25rem;
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--plum) 42%, transparent);
}
.ph--olive { background: var(--olive-wash); }
.ph--plum  { background: var(--plum-wash); }

/* Framed block for third-party embeds (e.g. Acuity) — a hairline border at
   the same weight as .rule, no fill. Keeps the embed feeling like part of
   the page's own quiet layout instead of a boxed-in widget. */
.embed-frame {
  border: 1px solid color-mix(in srgb, var(--plum) 14%, transparent);
  padding: clamp(.9rem, 2.5vw, 1.5rem);
}
.embed-frame iframe {
  display: block;
  width: 100%;
  border: 0;
  background: var(--cream);
}

/* ------------------------------------------------------------------ hero --- */
.hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 6.5rem); }
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.hero__copy { position: relative; }
.hero__sub { margin-top: 1.9rem; max-width: 46ch; }
.hero__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
  margin-top: 2.4rem;
}
.hero__credit {
  margin-top: 2.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--sand);
  font-size: var(--step--1);
  color: var(--ink-soft);
  max-width: 44ch;
}
.hero__credit strong { color: var(--plum); font-weight: 500; }

/* layered image collage */
.collage { position: relative; }
.collage--hero { padding-bottom: 3.5rem; }
.collage__a { width: 78%; aspect-ratio: 4/5; }
.collage__b {
  position: absolute;
  right: 0; bottom: 0;
  width: 52%; aspect-ratio: 3/4;
  box-shadow: -14px -14px 0 0 var(--cream);
}
.collage__tint {
  position: absolute;
  left: -1.5rem; top: 12%;
  width: 42%; aspect-ratio: 1;
  background: var(--olive-wash);
  z-index: -1;
}

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__copy { order: -1; }
  .collage--hero { max-width: 520px; margin-inline: auto; }
}

/* --------------------------------------------------------- statement band --- */
.band {
  position: relative;
  background: var(--olive-deep);
  color: var(--cream);
  overflow: clip;
}
.band__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: clamp(360px, 42vw, 560px);
}
.band__copy {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(3rem, 6vw, 5.5rem) clamp(1.25rem, 4vw, 4.5rem);
  position: relative; z-index: 2;
}
.band__copy .display { color: var(--cream); }
.band__quote { font-size: var(--step-3); line-height: 1.12; }
.band__quote em { font-style: italic; color: var(--terracotta-soft); }
.band__attr {
  margin-top: 1.8rem;
  font-size: var(--step--1);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 70%, transparent);
}
.band__media { position: relative; }
.band__media > .ph:not(.band__float) { position: absolute; inset: 0; border-radius: 0; }
.band__float {
  position: absolute;
  left: clamp(-2rem, -3vw, -1rem); top: 50%;
  transform: translateY(-50%);
  width: 40%;
  aspect-ratio: 1/1.15;
  z-index: 3;
  box-shadow: 0 24px 50px -30px rgba(51,23,41,.5);
}
/* .frame sets height:100% for the wide background image; on a real <img> used
   as the float, that clobbers the aspect-ratio box above. Two classes beats
   one, so this wins regardless of source order. */
.band__float.frame { height: auto; }
@media (max-width: 860px) {
  .band__grid { grid-template-columns: 1fr; min-height: 0; }
  .band__media { min-height: 300px; }
  .band__float { display: none; }
}

/* -------------------------------------------------------------- split rows --- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.split--reverse .split__media { order: 2; }
.split__media { position: relative; }
.split__media .ph { aspect-ratio: 4/5; }
/* offset colour block behind the photo, like the reference layout */
.split__media::before {
  content: "";
  position: absolute;
  inset: 2.2rem -2.2rem -2.2rem 2.2rem;
  background: var(--plum-wash);
  z-index: -1;
}
.split--reverse .split__media::before {
  inset: 2.2rem 2.2rem -2.2rem -2.2rem;
  background: var(--olive-wash);
}
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .split__media { max-width: 460px; }
}

/* ------------------------------------------------------------------ lists --- */
/* Hairline-separated lines rather than bulleted dots — reads like an editorial
   list instead of a UI component. */
.tick-list { margin-top: 2.25rem; display: grid; }
.tick-list li {
  padding: 1.15rem 0;
  border-top: 1px solid color-mix(in srgb, var(--plum) 13%, transparent);
  color: var(--ink-soft);
  max-width: 46ch;
}
.tick-list li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--plum) 13%, transparent); }

.after-note {
  margin-top: 2rem;
  padding-left: 1.4rem;
  border-left: 2px solid var(--olive-soft);
  color: var(--ink-soft);
}

/* ------------------------------------------------------------ credentials --- */
/* Full-bleed tinted field rather than a rounded card floating in the page. */
.panel {
  background: var(--cream-2);
  padding: clamp(2.5rem, 6vw, 5rem) 0;
}
.cred {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.cred__list { display: grid; gap: 0; margin-top: .5rem; }
.cred__list li {
  padding: 1rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--olive) 16%, transparent);
  font-size: var(--step-0);
  color: var(--ink-soft);
}
.cred__list li:last-child { border-bottom: 0; }
.cred__list li b { font-weight: 500; color: var(--plum); }
.cred__list li i { font-style: italic; color: var(--olive); }
@media (max-width: 860px) { .cred { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------- steps --- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 2.75rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 1080px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding-top: 1.5rem; }
.step::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: color-mix(in srgb, var(--plum) 16%, transparent);
}
/* Oversized light numeral set in the display face — an editorial device rather
   than a filled accent chip. */
.step__num {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1;
  color: color-mix(in srgb, var(--olive) 55%, transparent);
  margin-bottom: 1.1rem;
}
.step h3 {
  font-size: var(--step-1);
  color: var(--plum);
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -.008em;
}
.step p { margin-top: .7rem; font-size: var(--step--1); line-height: 1.75; color: var(--ink-soft); }
.step .when {
  display: block;
  margin-top: .9rem;
  font-style: italic;
  color: var(--olive);
}

/* -------------------------------------------------------------- services --- */
.services {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  align-items: start;
}
/* Rule-topped columns, not bordered boxes. */
.card { border-top: 1.5px solid var(--plum); padding-top: 1.5rem; }
.card--olive { border-top-color: var(--olive); }
.card__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--step-2);
  letter-spacing: -.015em;
  color: var(--plum);
}
.card__price {
  margin-top: .6rem;
  font-size: var(--step--1);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--olive);
}
details.acc {
  border-top: 1px solid color-mix(in srgb, var(--plum) 12%, transparent);
}
details.acc:first-of-type { margin-top: 1.75rem; }
details.acc summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--plum);
}
details.acc summary::-webkit-details-marker { display: none; }
details.acc summary::after {
  content: "";
  width: 10px; height: 10px; flex: none;
  border-right: 1.5px solid var(--terracotta);
  border-bottom: 1.5px solid var(--terracotta);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .3s ease;
}
details.acc[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
details.acc .acc__body {
  padding-bottom: 1.3rem;
  font-size: var(--step--1);
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 60ch;
}
@media (max-width: 860px) { .services { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------- quote --- */
.pullquote { text-align: center; }
.pullquote blockquote {
  margin: 0 auto;
  max-width: 22ch;
  font-family: var(--display);
  font-size: var(--step-3);
  line-height: 1.14;
  letter-spacing: -.018em;
  color: var(--plum);
}
.pullquote blockquote em { font-style: italic; color: var(--terracotta); }
.pullquote cite {
  display: block;
  margin-top: 2rem;
  font-style: normal;
  font-size: var(--step--1);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--olive);
}
.quote-mark { width: 34px; height: 34px; margin: 0 auto 1.75rem; color: var(--olive-soft); }

/* ---------------------------------------------------------- testimonials --- */
/* No cards. Two quotes set large, on the page, with hanging punctuation — the
   asymmetric offset on the second keeps the pair from reading as a grid. */
.testimonials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(3rem, 7vw, 6rem) clamp(3rem, 6vw, 5.5rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
.testimonial { margin: 0; max-width: 40ch; }
.testimonial:nth-child(2) { margin-top: clamp(0rem, 5vw, 4.5rem); }
.testimonial p {
  font-family: var(--display);
  font-weight: 400;
  /* dialed down from --step-2 (up to 35px) to read as a pull-quote, not a
     second headline */
  font-size: clamp(1.05rem, 1rem + 0.6vw, 1.35rem);
  line-height: 1.5;
  letter-spacing: -.012em;
  color: var(--plum);
  text-indent: -.38em;   /* hang the opening quote into the margin */
}
.testimonial footer {
  margin-top: 1.5rem;
  font-size: var(--step--1);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--olive);
}
@media (max-width: 760px) {
  .testimonials { grid-template-columns: 1fr; }
  .testimonial:nth-child(2) { margin-top: 0; }
}

/* ------------------------------------------------------------------- faq --- */
.faq { max-width: 820px; margin-inline: auto; }
.faq details.acc:first-of-type { margin-top: clamp(2rem, 4vw, 3rem); }
.faq details.acc:last-of-type { border-bottom: 1px solid color-mix(in srgb, var(--plum) 12%, transparent); }
.faq details.acc summary { font-size: var(--step-1); font-weight: 400; font-family: var(--display); padding: 1.35rem 0; }

/* --------------------------------------------------------------- closing --- */
.closing {
  background: var(--plum-deep);
  color: var(--cream);
  text-align: center;
}
.closing .display { color: var(--cream); }
.closing .display em { font-style: italic; color: var(--terracotta-soft); }
.closing p { margin-inline: auto; color: color-mix(in srgb, var(--cream) 78%, transparent); }

/* ---------------------------------------------------------------- footer --- */
.footer {
  background: var(--plum-deep);
  color: color-mix(in srgb, var(--cream) 68%, transparent);
  font-size: var(--step--1);
  border-top: 1px solid color-mix(in srgb, var(--cream) 12%, transparent);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.footer h4 {
  font-size: var(--step--1);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--olive-soft);
  margin-bottom: 1.2rem;
  font-weight: 500;
}
.footer a { text-decoration: none; transition: color .3s ease; }
.footer a:hover { color: var(--terracotta-soft); }
.social-icon { width: 18px; height: 18px; vertical-align: -4px; margin-right: .35em; }
.footer ul { display: grid; gap: .75rem; }
.footer .wordmark { color: var(--cream); }
.footer .wordmark .mark { color: var(--olive-soft); }
.footer__note { max-width: 38ch; margin-top: 1.5rem; line-height: 1.7; }
.footer__bar {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  padding-block: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--cream) 12%, transparent);
  font-size: .78rem;
  letter-spacing: .04em;
}
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr; } }

/* ====================================================================== */
/*  INNER PAGES                                                            */
/* ====================================================================== */

/* ------------------------------------------------------------ page hero --- */
/* Smaller than the homepage hero — states the subject and moves on. */
.page-hero { padding-block: clamp(2.75rem, 6vw, 5rem) clamp(1.75rem, 4vw, 3rem); }
.page-hero h1 { font-size: var(--step-3); max-width: 30ch; }
.page-hero .lede { margin-top: 1.7rem; max-width: 56ch; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; margin-top: 2.2rem; }

/* --------------------------------------------------------------- prose --- */
.prose { max-width: 64ch; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 {
  font-family: var(--display);
  font-weight: 300;
  font-size: var(--step-2);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--plum);
  margin-top: 2.5em;
  max-width: 32ch;
}
.prose h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--step-1);
  letter-spacing: -0.008em;
  color: var(--plum);
  margin-top: 2em;
}
.prose h2 + *, .prose h3 + * { margin-top: 1.1em; }
.prose strong { font-weight: 500; color: var(--plum); }
.prose em { font-style: italic; }
.prose a { color: var(--plum); text-decoration-color: color-mix(in srgb, var(--terracotta) 55%, transparent); text-underline-offset: 3px; }
.prose a:hover { color: var(--terracotta); }
/* em-dash markers rather than bullet dots */
.prose ul { display: grid; gap: 1rem; margin-top: 1.6em; }
.prose ul li { position: relative; padding-left: 1.6rem; }
.prose ul li::before {
  content: "—";
  position: absolute; left: 0;
  color: var(--olive-soft);
}
.prose > .pull {
  margin-block: 2.2em;
  padding-left: 1.5rem;
  border-left: 2px solid var(--olive-soft);
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--plum);
}

/* article + aside, with the booking prompt held in view on long pages */
.article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: start;
}
.aside { position: sticky; top: 7rem; }
.aside__box { border-top: 1.5px solid var(--plum); padding-top: 1.3rem; }
.aside h4 {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--step-1);
  letter-spacing: -.008em;
  color: var(--plum);
  margin-bottom: .8rem;
}
.aside p { font-size: var(--step--1); line-height: 1.7; color: var(--ink-soft); }
.aside .btn { margin-top: 1.4rem; }
@media (max-width: 900px) {
  .article { grid-template-columns: 1fr; }
  .aside { position: static; max-width: 34rem; }
}

/* ---------------------------------------------------- full-bleed slabs --- */
/* Colour blocks that break a long page into readable stretches. Alternate
   them against plain cream sections — never two slabs in a row. */
.slab { background: var(--olive-deep); color: color-mix(in srgb, var(--cream) 84%, transparent); }
.slab .display, .slab h2, .slab h3 { color: var(--cream); }
.slab .eyebrow { color: var(--olive-soft); }
.slab em { font-style: italic; color: var(--terracotta-soft); }
.slab strong { color: var(--cream); font-weight: 500; }

.slab--plum { background: var(--plum-deep); }
.slab--plum .eyebrow { color: color-mix(in srgb, var(--terracotta-soft) 85%, transparent); }

.slab--sand { background: var(--cream-2); color: var(--ink-soft); }
.slab--sand .display, .slab--sand h2, .slab--sand h3 { color: var(--plum); }
.slab--sand .eyebrow { color: var(--olive); }
.slab--sand em { color: var(--terracotta); }
.slab--sand strong { color: var(--plum); font-weight: 500; }

/* ------------------------------------------------- two-up short blocks --- */
.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
}
.duo h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--step-1);
  letter-spacing: -.008em;
  margin-bottom: .8rem;
}

/* --------------------------------------------- recognition line-up ------ */
/* Short punchy lines, two columns, hairline-separated. Scans in seconds. */
.recog {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  column-gap: clamp(2rem, 5vw, 4.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.recog li {
  padding: 1.1rem 0;
  border-top: 1px solid color-mix(in srgb, var(--plum) 14%, transparent);
  color: var(--ink-soft);
}

/* ----------------------------------------------------------- compare --- */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.compare > * {
  padding: 1.1rem 0;
  border-top: 1px solid color-mix(in srgb, var(--plum) 14%, transparent);
  color: var(--ink-soft);
}
.compare__head {
  border-top: 0;
  padding-top: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--step-1);
  letter-spacing: -.008em;
  color: var(--plum);
}
.compare__head--accent { color: var(--terracotta); }
.compare .c2 { color: var(--plum); }

/* --------------------------------------------------------- fact row --- */
/* 2x2 by default so it sits neatly beside a photo; 4-across only when the
   row has a full-width column to itself. */
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1rem, 3vw, 2.5rem);
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
}
.facts div {
  padding: 1.15rem 0;
  border-top: 1px solid color-mix(in srgb, var(--plum) 16%, transparent);
}
.facts--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 560px) { .facts--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.facts b {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--step-1);
  letter-spacing: -.012em;
  color: var(--plum);
}
.facts small {
  display: block;
  margin-top: .25rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* ------------------------------------------------------------- pricing --- */
.price__group + .price__group { margin-top: clamp(2.5rem, 5vw, 4rem); }
.price__rows { margin-top: 1.25rem; }
.price__row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1.5rem;
  padding: 1.2rem 0;
  border-top: 1px solid color-mix(in srgb, var(--plum) 13%, transparent);
}
.price__row:last-child { border-bottom: 1px solid color-mix(in srgb, var(--plum) 13%, transparent); }
.price__row span { color: var(--ink-soft); }
.price__row b {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--step-1);
  letter-spacing: -.015em;
  color: var(--plum);
  white-space: nowrap;
}
.price__row--feature b { color: var(--terracotta); }

/* --------------------------------------------------------- steps, plain --- */
.numbered { counter-reset: n; display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); margin-top: 2.5rem; }
.numbered > li { counter-increment: n; display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; }
.numbered > li::before {
  content: counter(n);
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.1;
  color: color-mix(in srgb, var(--olive) 55%, transparent);
}
.numbered h3 { font-family: var(--display); font-weight: 500; font-size: var(--step-1); color: var(--plum); letter-spacing: -.008em; }
.numbered p { margin-top: .5rem; color: var(--ink-soft); max-width: 52ch; }

/* -------------------------------------------------------------- contact --- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.contact-item { border-top: 1.5px solid var(--plum); padding-top: 1.3rem; }
.contact-item h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--step-1);
  letter-spacing: -.008em;
  color: var(--plum);
}
.contact-item p { margin-top: .7rem; font-size: var(--step--1); color: var(--ink-soft); }
.contact-item a { color: var(--plum); }

/* ------------------------------------------------------ crisis notice --- */
/* Sits in the footer on every page. Deliberately plain and easy to scan —
   this is the one block on the site that has to work in a hurry. */
.crisis {
  border-top: 1px solid color-mix(in srgb, var(--cream) 14%, transparent);
  padding-block: 1.9rem;
}
.crisis h4 { margin-bottom: 1rem; }
.crisis__intro { max-width: 62ch; margin-bottom: 1.2rem; line-height: 1.7; }
.crisis__lines { display: flex; flex-wrap: wrap; gap: .8rem 2.5rem; }
.crisis__lines li { line-height: 1.5; }
.crisis__lines b { display: block; color: var(--cream); font-weight: 500; }
.crisis__lines a { color: var(--terracotta-soft); text-decoration: none; }
.crisis__lines a:hover { text-decoration: underline; }
.crisis__lines small { display: block; opacity: .7; font-size: .75rem; }

/* --------------------------------------------------------- misc helpers --- */
.center { text-align: center; }
.center .measure-wide { margin-inline: auto; }
.stack-sm > * + * { margin-top: 1.5rem; }
.mt-lg { margin-top: clamp(2rem, 4vw, 3rem); }
.rule {
  height: 1px; border: 0; margin: 0;
  background: color-mix(in srgb, var(--plum) 12%, transparent);
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; border-radius: 2px; }