/* ==========================================================================
   Clara Luz Organizing — Design system
   Palette taken from the logo: paper cream, golden arch, roasted brown script,
   sage leaf. Editorial minimalism: hairlines, no shadows, generous air.
   ========================================================================== */

:root {
  /* ---- Color ---- */
  --paper:        #FBF7EF;  /* page ground — the logo's textured card */
  --paper-warm:   #F4EEE1;  /* alternating band */
  --paper-deep:   #EBE2D1;  /* third tone, hairline fills */
  --gold:         #E0A828;  /* the arch */
  --gold-deep:    #C08F2C;  /* rules, hovers */
  --gold-wash:    #F7E9C6;  /* tint blocks */
  --brown:        #4A3728;  /* the script — primary text */
  --brown-deep:   #2E2118;  /* headings, dark sections */
  --brown-soft:   #8A7561;  /* secondary text */
  --sage:         #6E7F63;  /* the leaves */
  --sage-soft:    #A3AF97;
  --line:         #DCD1BC;  /* hairline */
  --line-soft:    #E8DFCE;
  --white:        #FFFDF9;

  /* ---- Type ---- */
  --serif: 'Cormorant Garamond', 'Times New Roman', Times, serif;
  --sans:  'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- Space (8pt) ---- */
  --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem;
  --s5: 3rem; --s6: 4rem; --s7: 6rem; --s8: 9rem; --s9: 12rem;

  /* ---- Layout ---- */
  --shell: 1320px;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --header-h: 84px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --fast: 220ms;
  --slow: 620ms;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

body {
  background: var(--paper);
  color: var(--brown);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1rem, .96rem + .18vw, 1.0625rem);
  line-height: 1.7;
  letter-spacing: .006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }

::selection { background: var(--gold); color: var(--brown-deep); }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brown-deep); color: var(--paper);
  padding: var(--s2) var(--s3); font-size: .875rem;
}
.skip:focus { left: var(--s2); top: var(--s2); }

/* ==========================================================================
   Typography scale
   ========================================================================== */
.display {
  font-family: var(--serif);
  font-weight: 300;
  color: var(--brown-deep);
  line-height: 1.02;
  letter-spacing: -.018em;
  text-wrap: balance;
}
.display--xl { font-size: clamp(3.1rem, 1.4rem + 8.4vw, 9.5rem); line-height: .94; }
.display--lg { font-size: clamp(2.5rem, 1.5rem + 4.4vw, 5.5rem); }
.display--md { font-size: clamp(1.95rem, 1.3rem + 2.6vw, 3.5rem); line-height: 1.06; }
.display--sm { font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2.1rem); line-height: 1.15; letter-spacing: -.01em; }

.display em { font-style: italic; color: var(--brown); }

.eyebrow {
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--brown-soft);
  margin-bottom: var(--s3);
}
.eyebrow--gold { color: var(--gold-deep); }

.lede {
  font-size: clamp(1.05rem, .98rem + .42vw, 1.3rem);
  line-height: 1.62;
  color: var(--brown);
  max-width: 46ch;
  text-wrap: pretty;
}

.muted { color: var(--brown-soft); }
.prose p + p { margin-top: var(--s3); }
.prose p { max-width: 62ch; text-wrap: pretty; }

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: clamp(4rem, 2rem + 8vw, 9.5rem); }
.section--tight { padding-block: clamp(3rem, 1.8rem + 5vw, 6.5rem); }
.section--warm { background: var(--paper-warm); }
.section--dark { background: var(--brown-deep); color: #E7DDCC; }
.section--dark .display, .section--dark .display em { color: var(--paper); }
.section--dark .eyebrow { color: var(--gold); }
.section--dark .lede { color: #D6C9B4; }

.grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 1rem + 5vw, 6rem);
  align-items: start;
}
.grid-2--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-2__aside { position: sticky; top: calc(var(--header-h) + 2rem); }

@media (max-width: 900px) {
  .grid-2, .grid-2--even { grid-template-columns: 1fr; }
  .grid-2__aside { position: static; }
}

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; }

/* ==========================================================================
   Buttons & links
   ========================================================================== */
.btn {
  --btn-bg: transparent; --btn-fg: var(--brown-deep); --btn-line: var(--brown-deep);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px;
  padding: .85em 2em;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-line);
  font-size: .8125rem; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
  white-space: nowrap;
}
.btn--dark { --btn-bg: var(--brown-deep); --btn-fg: var(--paper); --btn-line: var(--brown-deep); }
.btn--dark:hover { --btn-bg: var(--gold); --btn-fg: var(--brown-deep); --btn-line: var(--gold); }
.btn--ghost:hover { --btn-bg: var(--brown-deep); --btn-fg: var(--paper); }
.btn--gold { --btn-bg: var(--gold); --btn-fg: var(--brown-deep); --btn-line: var(--gold); }
.btn--gold:hover { --btn-bg: var(--brown-deep); --btn-fg: var(--paper); --btn-line: var(--brown-deep); }
.btn--light { --btn-fg: var(--paper); --btn-line: rgba(251,247,239,.4); }
.btn--light:hover { --btn-bg: var(--paper); --btn-fg: var(--brown-deep); --btn-line: var(--paper); }
.btn--wide { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .7em;
  font-size: .75rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brown-deep);
  padding-bottom: .45em;
  border-bottom: 1px solid var(--line);
  transition: border-color var(--fast) var(--ease), gap var(--fast) var(--ease);
}
.link-arrow::after { content: '→'; transition: transform var(--fast) var(--ease); }
.link-arrow:hover { border-color: var(--gold-deep); gap: 1.1em; }
.link-arrow:hover::after { transform: translateX(2px); }
.section--dark .link-arrow { color: var(--paper); border-color: rgba(251,247,239,.3); }

.tel {
  font-size: .8125rem; letter-spacing: .1em;
  color: var(--brown); transition: color var(--fast) var(--ease);
}
.tel:hover { color: var(--gold-deep); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--line); }

.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4);
  min-height: var(--header-h);
}

.wordmark { display: inline-flex; align-items: center; gap: .75rem; flex-shrink: 0; }

/* Real logo artwork, when assets/logo/logo.png (or .svg) is present. Sized by
   height so any aspect ratio the file happens to have still fits the header. */
.wordmark--art { gap: 0; }
.wordmark__img { width: auto; height: 46px; max-width: min(280px, 46vw); object-fit: contain; }
.wordmark__mark { width: auto; height: 56px; flex-shrink: 0; }
@media (max-width: 480px) { .wordmark__img { height: 38px; } }
.wordmark .mark { flex-shrink: 0; }
.wordmark__text { display: flex; flex-direction: column; line-height: 1; }
.wordmark__name {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 1.6rem; color: var(--brown-deep); letter-spacing: .005em;
}
.wordmark__sub {
  font-size: .5625rem; letter-spacing: .42em; text-transform: uppercase;
  color: var(--brown-soft); margin-top: .3em; padding-left: .15em;
}

/* --- Primary nav --- */
.nav { display: flex; align-items: center; gap: var(--s4); }
.nav > a, .nav__item > a {
  position: relative;
  font-size: .75rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brown); padding-block: .4em;
  transition: color var(--fast) var(--ease);
}
.nav > a::after, .nav__item > a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--gold-deep);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--fast) var(--ease);
}
.nav > a:hover, .nav__item > a:hover { color: var(--brown-deep); }
.nav > a:hover::after, .nav__item > a:hover::after,
.nav > a[aria-current]::after { transform: scaleX(1); }

.nav__item { position: relative; }

/* --- Mega menu --- */
.mega {
  position: fixed; left: 0; right: 0; top: var(--header-h);
  background: var(--paper);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-8px);
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease), visibility var(--fast);
}
.nav__item--has-menu:hover .mega,
.nav__item--has-menu:focus-within .mega {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.mega__inner {
  display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--s6); padding-block: var(--s5) var(--s6);
}
.mega__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--s5); }
.mega__list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2);
  padding: .85em 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--serif); font-size: 1.35rem; color: var(--brown-deep);
  transition: color var(--fast) var(--ease), padding-left var(--fast) var(--ease);
}
.mega__list a em {
  font-family: var(--sans); font-style: normal; font-size: .6875rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--brown-soft);
}
.mega__list a:hover { color: var(--gold-deep); padding-left: .5em; }
.mega__col--note { border-left: 1px solid var(--line-soft); padding-left: var(--s5); }
.mega__lede { color: var(--brown-soft); font-size: .95rem; margin-bottom: var(--s3); max-width: 34ch; }

.site-header__actions { display: flex; align-items: center; gap: var(--s3); flex-shrink: 0; }

/* --- Burger + mobile nav --- */
.burger { display: none; width: 44px; height: 44px; flex-direction: column; justify-content: center; gap: 6px; }
.burger span { display: block; height: 1px; width: 24px; background: var(--brown-deep); transition: transform var(--fast) var(--ease), opacity var(--fast); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.mobile-nav {
  border-top: 1px solid var(--line-soft);
  background: var(--paper);
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
}
.mobile-nav nav { display: flex; flex-direction: column; padding-block: var(--s3) var(--s5); }
.mobile-nav a {
  font-family: var(--serif); font-size: 1.5rem; color: var(--brown-deep);
  padding: .55em 0; border-bottom: 1px solid var(--line-soft);
}
.mobile-nav__sub {
  font-family: var(--sans) !important; font-size: .9rem !important;
  color: var(--brown-soft) !important; padding-left: var(--s2) !important;
}
.mobile-nav__cta { margin-top: var(--s4); font-family: var(--sans) !important; font-size: .8125rem !important; color: var(--paper) !important; border-bottom: 0 !important; }

@media (max-width: 1080px) {
  .nav, .site-header__actions { display: none; }
  .burger { display: flex; }
}

/* ==========================================================================
   Sticky call bar (mobile / tablet)
   ========================================================================== */
.callbar { display: none; }

@media (max-width: 1080px) {
  .callbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: flex; gap: 1px;
    background: var(--line);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .callbar a {
    display: flex; align-items: center; justify-content: center; gap: .6em;
    min-height: 58px; flex: 1;
    font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase;
    transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
  }
  .callbar__call { flex: 2.2; background: var(--brown-deep); color: var(--paper); }
  .callbar__call:active { background: var(--gold); color: var(--brown-deep); }
  .callbar__book { background: var(--gold); color: var(--brown-deep); }
  .callbar__book:active { background: var(--brown-deep); color: var(--paper); }

  /* Keep the bar from covering the last of the footer. */
  body { padding-bottom: 58px; }
  /* The mobile menu overlays the bar rather than fighting it for the tap. */
  .mobile-nav { padding-bottom: 58px; }
}

@media (max-width: 380px) {
  .callbar a { font-size: .75rem; letter-spacing: .08em; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; padding-block: clamp(3rem, 1rem + 7vw, 7rem) 0; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: end;
}
.hero__title { margin-bottom: var(--s4); }
.hero__lede { max-width: 52ch; }
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span { display: block; }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  margin-top: var(--s5); padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.hero__meta div { min-width: 8rem; }
.hero__meta dt { font-size: .625rem; letter-spacing: .24em; text-transform: uppercase; color: var(--brown-soft); margin-bottom: .35em; }
.hero__meta dd { font-family: var(--serif); font-size: 1.5rem; color: var(--brown-deep); }

.hero__figure { position: relative; }
.hero__figure .fig { --ratio: 3 / 4; }
.hero__badge {
  position: absolute; left: -2.5rem; bottom: 2.5rem;
  width: 132px; height: 132px; border-radius: 50%;
  background: var(--gold); color: var(--brown-deep);
  display: grid; place-content: center; text-align: center;
  font-size: .625rem; letter-spacing: .2em; text-transform: uppercase; line-height: 1.9;
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__badge { left: auto; right: 1rem; bottom: 1rem; width: 104px; height: 104px; font-size: .5625rem; }
}

/* Full-bleed band under the hero */
.bleed { width: 100%; }
.bleed img { width: 100%; height: clamp(280px, 46vh, 620px); object-fit: cover; }

/* ==========================================================================
   Figures (image slots)
   ========================================================================== */
.fig { position: relative; margin: 0; }
.fig > img {
  width: 100%;
  aspect-ratio: var(--ratio, 4 / 5);
  object-fit: cover;
  background:
    radial-gradient(120% 90% at 30% 10%, var(--gold-wash) 0%, transparent 60%),
    linear-gradient(150deg, var(--paper-warm) 0%, var(--paper-deep) 100%);
  color: transparent;               /* hide broken-image alt text */
  font-size: 0;
}
.fig figcaption {
  margin-top: var(--s2);
  font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brown-soft);
}
.fig--framed > img { border: 1px solid var(--line); }
.fig--offset { margin-top: clamp(2rem, 6vw, 5rem); }

/* ==========================================================================
   Marquee strip
   ========================================================================== */
.strip {
  border-block: 1px solid var(--line);
  padding-block: var(--s3);
  overflow: hidden;
  background: var(--paper);
}
.strip__track {
  display: flex; gap: var(--s6); width: max-content;
  animation: drift 46s linear infinite;
}
.strip:hover .strip__track { animation-play-state: paused; }
.strip__track span {
  font-family: var(--serif); font-size: clamp(1.1rem, .9rem + .7vw, 1.6rem);
  color: var(--brown-soft); white-space: nowrap;
  display: inline-flex; align-items: center; gap: var(--s6);
}
.strip__track span::after { content: '·'; color: var(--gold); }
@keyframes drift { to { transform: translateX(-50%); } }

/* ==========================================================================
   Numbered / process list
   ========================================================================== */
.steps { border-top: 1px solid var(--line); }
.step {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1.3fr) auto;
  gap: var(--s4);
  align-items: baseline;
  padding-block: clamp(1.5rem, 1rem + 1.6vw, 2.6rem);
  border-bottom: 1px solid var(--line);
  transition: background var(--fast) var(--ease);
}
.step:hover { background: color-mix(in srgb, var(--gold-wash) 45%, transparent); }
.step__num { font-family: var(--serif); font-size: 1.1rem; color: var(--gold-deep); }
.step__title { font-family: var(--serif); font-size: clamp(1.4rem, 1.1rem + 1vw, 2.1rem); color: var(--brown-deep); line-height: 1.1; }
.step__body { color: var(--brown-soft); max-width: 46ch; }
.step__note { font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sage); white-space: nowrap; }
@media (max-width: 860px) {
  .step { grid-template-columns: 3rem 1fr; }
  .step__body, .step__note { grid-column: 2; }
}

/* ==========================================================================
   Service cards
   ========================================================================== */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(1.5rem, 1rem + 2vw, 3.5rem) clamp(1.25rem, 1rem + 1.5vw, 2.5rem); }
.card { display: flex; flex-direction: column; }
.card .fig { overflow: hidden; }
.card .fig > img { transition: transform var(--slow) var(--ease); }
.card:hover .fig > img { transform: scale(1.035); }
.card__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2);
  margin-top: var(--s3); padding-bottom: .6em;
  border-bottom: 1px solid var(--line);
  min-height: calc(1.15em * 2 + .6em);   /* two title lines, so rows stay aligned */
}
.card__title { font-family: var(--serif); font-size: 1.45rem; color: var(--brown-deep); line-height: 1.15; }
.card__price { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brown-soft); white-space: nowrap; }
.card__body { margin-top: var(--s2); color: var(--brown-soft); font-size: .95rem; flex: 1; }
.card__cta { margin-top: var(--s3); }

/* ==========================================================================
   Founder byline + pull quote (About)
   ========================================================================== */
.byline {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5em .9em;
  font-family: var(--serif); font-size: 1.5rem; color: var(--brown-deep);
  padding-bottom: .7em; border-bottom: 1px solid var(--line);
}
.byline span {
  font-family: var(--sans); font-size: .6875rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brown-soft);
}

.pull {
  max-width: 22ch;
  margin: var(--s4) auto 0;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.9rem, 1.2rem + 3.2vw, 4rem);
  line-height: 1.12; letter-spacing: -.015em;
  color: var(--paper);
  text-wrap: balance;
}
.pull__by {
  margin-top: var(--s4);
  font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
}
.eyebrow.center { text-align: center; }

/* ==========================================================================
   Quote / testimonials
   ========================================================================== */
.quote { max-width: 34ch; }
.quote__text { font-family: var(--serif); font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.4rem); line-height: 1.24; color: var(--brown-deep); letter-spacing: -.01em; }
.section--dark .quote__text { color: var(--paper); }
.quote__by { margin-top: var(--s3); font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brown-soft); }
.section--dark .quote__by { color: var(--gold); }

/* Dark pull-quote + stats: bottom-align the two columns so the stat row sits on
   the quote's baseline instead of floating at the top of a tall row.
   (Must not change `display` on the child — .stats is a grid and collapses to a
   single column if it becomes a flex item.) */
.section--dark .grid-2 { align-items: end; }
@media (max-width: 900px) { .section--dark .grid-2 { align-items: start; } }

.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(2rem, 1rem + 3vw, 4rem); }
.quotes .quote { max-width: none; }
.quotes .quote__text { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); }

/* ==========================================================================
   Stats
   ========================================================================== */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--s4); border-top: 1px solid var(--line); }
.stat { padding-top: var(--s3); border-right: 1px solid var(--line); padding-right: var(--s3); }
.stat:last-child { border-right: 0; }
.stat__n { font-family: var(--serif); font-size: clamp(2.4rem, 1.6rem + 3vw, 4.2rem); line-height: 1; color: var(--brown-deep); }
.stat__l { margin-top: .5em; font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brown-soft); }
.section--dark .stat { border-color: rgba(251,247,239,.18); }
.section--dark .stat__n { color: var(--gold); }
.section--dark .stat__l { color: #B8A891; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding-block: clamp(1rem, .8rem + .6vw, 1.5rem);
  font-family: var(--serif); font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
  color: var(--brown-deep); cursor: pointer; list-style: none;
  transition: color var(--fast) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--gold-deep); }
.faq__icon { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.faq__icon::before, .faq__icon::after {
  content: ''; position: absolute; inset: 50% 0 auto 0; height: 1px;
  background: var(--gold-deep); transition: transform var(--fast) var(--ease);
}
.faq__icon::after { transform: rotate(90deg); }
.faq[open] .faq__icon::after { transform: rotate(0); }
.faq__body { padding-bottom: var(--s4); }
.faq__body p { max-width: 62ch; color: var(--brown-soft); }

/* ==========================================================================
   Checklist
   ========================================================================== */
.checklist li {
  position: relative; padding: .75em 0 .75em 2.2em;
  border-bottom: 1px solid var(--line-soft);
  color: var(--brown);
}
.checklist li::before {
  content: ''; position: absolute; left: .4em; top: 1.35em;
  width: 9px; height: 9px; border: 1px solid var(--gold-deep);
  border-radius: 50%;
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.crumbs { padding-top: var(--s4); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .6em; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brown-soft); }
.crumbs li + li::before { content: '/'; margin-right: .6em; color: var(--line); }
.crumbs a:hover { color: var(--gold-deep); }

/* ==========================================================================
   Page head (interior pages)
   ========================================================================== */
.page-head { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) clamp(2rem, 1.5rem + 3vw, 4rem); }
.page-head__meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brown-soft); }
.page-head__meta strong { font-weight: 400; color: var(--brown-deep); }

/* A page head already carries its own breathing room — don't double it up
   when the next section follows immediately. */
.page-head + .section--tight,
.page-head + .section { padding-top: clamp(1rem, .5rem + 1.6vw, 2.75rem); }
.page-head + .bleed { margin-top: clamp(.5rem, .25rem + 1vw, 1.5rem); }

/* ==========================================================================
   Areas
   ========================================================================== */
.area-list { border-top: 1px solid var(--line); }
.area {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) auto;
  gap: var(--s4); align-items: baseline;
  padding-block: clamp(1.25rem, 1rem + 1.2vw, 2.2rem);
  border-bottom: 1px solid var(--line);
  transition: background var(--fast) var(--ease), padding-left var(--fast) var(--ease);
}
.area:hover { background: color-mix(in srgb, var(--gold-wash) 45%, transparent); padding-left: var(--s2); }
.area__name { font-family: var(--serif); font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.4rem); color: var(--brown-deep); line-height: 1.1; }
.area__blurb { color: var(--brown-soft); max-width: 54ch; }
@media (max-width: 860px) { .area { grid-template-columns: 1fr; gap: var(--s1); } }

/* ==========================================================================
   Gallery
   ========================================================================== */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
.gallery-item .fig > img { transition: transform var(--slow) var(--ease); }
.gallery-item:hover .fig > img { transform: scale(1.03); }
.gallery-item .fig { overflow: hidden; }
.gallery-item__meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); margin-top: var(--s2); padding-bottom: .5em; border-bottom: 1px solid var(--line); }
.gallery-item__title { font-family: var(--serif); font-size: 1.3rem; color: var(--brown-deep); }
.gallery-item__tag { font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); }
.gallery-item__note { margin-top: .6em; font-size: .9rem; color: var(--brown-soft); }

/* ==========================================================================
   Forms
   ========================================================================== */
.form { display: grid; gap: var(--s3); }
.field { display: grid; gap: .5em; }
.field label { font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brown-soft); }
.field input, .field textarea, .field select {
  width: 100%;
  font: inherit; font-size: 1rem;
  color: var(--brown-deep);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line);
  padding: .75em 0;
  border-radius: 0;
  transition: border-color var(--fast) var(--ease);
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--brown-soft) 50%), linear-gradient(135deg, var(--brown-soft) 50%, transparent 50%); background-position: calc(100% - 12px) center, calc(100% - 7px) center; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2rem; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 0; border-bottom-color: var(--gold-deep); }
.field textarea { resize: vertical; min-height: 7rem; }
.field input::placeholder, .field textarea::placeholder { color: var(--sage-soft); }
.field--2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
@media (max-width: 620px) { .field--2 { grid-template-columns: 1fr; } }
.form__note { font-size: .8125rem; color: var(--brown-soft); }
.hp { position: absolute; left: -9999px; opacity: 0; }

.form-status { padding: var(--s3); border: 1px solid var(--gold-deep); background: var(--gold-wash); color: var(--brown-deep); font-size: .95rem; }
.form-status[hidden] { display: none; }

/* ==========================================================================
   Contact rail
   ========================================================================== */
.rail { display: grid; gap: var(--s4); }
.rail__row { padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.rail__row dt { font-size: .625rem; letter-spacing: .24em; text-transform: uppercase; color: var(--brown-soft); margin-bottom: .4em; }
.rail__row dd { font-family: var(--serif); font-size: 1.5rem; color: var(--brown-deep); }
.rail__row dd a:hover { color: var(--gold-deep); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--brown-deep); color: #C9BBA6; padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) var(--s5); }
.site-footer .eyebrow { color: var(--gold); }
.site-footer .wordmark__name { color: var(--paper); }
.site-footer .wordmark__sub { color: #A08F79; }
.site-footer .mark path[stroke="#FBF7EF"] { stroke: #2E2118; }

.footer-cta { max-width: 40ch; padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem); border-bottom: 1px solid rgba(251,247,239,.16); }
.footer-cta .display { color: var(--paper); }
.footer-cta__lede { margin-block: var(--s3) var(--s4); color: #B8A891; }

.footer-grid {
  display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: var(--s5) var(--s4);
  padding-block: clamp(3rem, 2rem + 4vw, 5rem);
}
.footer-grid__brand { max-width: 34ch; }
.footer-note { margin-top: var(--s3); font-size: .9rem; color: #A08F79; }
.footer-list { display: grid; gap: .55em; font-size: .875rem; }
.footer-list a { color: #C9BBA6; transition: color var(--fast) var(--ease); }
.footer-list a:hover { color: var(--gold); }

.footer-base {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); justify-content: space-between;
  padding-top: var(--s4); border-top: 1px solid rgba(251,247,239,.16);
  font-size: .75rem; color: #8A7A66;
}
.footer-base p { display: flex; gap: var(--s3); flex-wrap: wrap; }
.footer-base a:hover { color: var(--gold); }

@media (max-width: 860px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }

/* ==========================================================================
   Utilities
   ========================================================================== */
.mt-2 { margin-top: var(--s2); } .mt-3 { margin-top: var(--s3); }
.mt-4 { margin-top: var(--s4); } .mt-5 { margin-top: var(--s5); }
.mt-6 { margin-top: var(--s6); }
.mb-4 { margin-bottom: var(--s4); } .mb-5 { margin-bottom: var(--s5); }
.rule { height: 1px; background: var(--line); border: 0; }
.center { text-align: center; margin-inline: auto; }
.narrow { max-width: 68ch; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ==========================================================================
   Mobile refinements
   Driven by an audit at 390x844 with touch emulation. Three findings:
   one-up cards made the page ~40% longer than desktop, the stat row collapsed
   into full-width rows with orphaned dividers, and a lot of the small
   letterspaced type fell to 9-11px, which is not readable at arm's length.
   ========================================================================== */
@media (max-width: 700px) {

  /* ---- Vertical rhythm: the desktop scale is too generous on a phone ---- */
  .section { padding-block: 3.5rem; }
  .section--tight { padding-block: 2.75rem; }
  .page-head { padding-block: 2rem 1.5rem; }
  .page-head + .section,
  .page-head + .section--tight { padding-top: 1.25rem; }
  .hero { padding-top: 2rem; }

  /* ---- Two-up card grids, the way an editorial shop does it on mobile.
         Halves the scroll and lets the eye compare rooms side by side. ---- */
  .cards,
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }

  .card__head,
  .gallery-item__meta { flex-direction: column; align-items: flex-start; gap: .2em; min-height: 0; }
  .card__title { font-size: 1.0625rem; line-height: 1.2; }
  .gallery-item__title { font-size: 1rem; line-height: 1.2; }
  .card__price,
  .gallery-item__tag { font-size: .6875rem; letter-spacing: .12em; }
  .card__body,
  .gallery-item__note { font-size: .875rem; line-height: 1.55; }
  .card__cta { margin-top: 1rem; }

  /* ---- Legibility: 12px is the floor for every piece of text ----
         Uppercase set at 0.2em tracking is already hard work at arm's length;
         below 12px it stops being readable on a phone. ---- */
  .eyebrow,
  .hero__meta dt,
  .rail__row dt,
  .page-head__meta dt,
  .page-head__meta dd,
  .step__note,
  .card__price,
  .gallery-item__tag,
  .fig figcaption,
  .page-head__meta,
  .quote__by,
  .stat__l,
  .field label,
  .crumbs ol { font-size: .75rem; }
  .eyebrow { letter-spacing: .2em; }
  .hero__badge { font-size: .75rem; letter-spacing: .1em; line-height: 1.6; }
  .hero__badge { width: 118px; height: 118px; }
  .wordmark__sub { font-size: .625rem; letter-spacing: .34em; }
  .footer-list { font-size: .9375rem; }
  .footer-note { font-size: .9375rem; }
  .form__note { font-size: .875rem; }

  /* ---- Tap targets: 44px is the floor for anything you can press ---- */
  .link-arrow { min-height: 44px; align-items: center; }
  .footer-list a { display: inline-flex; align-items: center; min-height: 40px; }
  .footer-list { gap: 0; }
  .mobile-nav a { min-height: 54px; display: flex; align-items: center; }
  .mobile-nav__sub { min-height: 46px; }
  .area { padding-block: 1.25rem; }
  .faq summary { padding-block: 1.1rem; }
  /* Breadcrumbs, the contact rail and the logo were all under 40px tall. */
  .crumbs ol a { display: inline-flex; align-items: center; min-height: 40px; }
  .crumbs ol { align-items: center; }
  .rail__row dd a { display: inline-flex; align-items: center; min-height: 44px; }
  .wordmark { min-height: 46px; align-items: center; }

  /* ---- Stats: keep the three across, so the dividers read as a unit ---- */
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
  .stat { padding-right: .75rem; }
  .stat__n { font-size: 1.85rem; }
  /* Tight enough that "Day follow-up" stays on one line instead of breaking
     at the hyphen. */
  .stat__l { letter-spacing: .06em; line-height: 1.4; }   /* size set above */

  /* ---- Hero meta: three across rather than an awkward 2 + 1 wrap ---- */
  .hero__meta { gap: 1rem; }
  .hero__meta div { min-width: 0; flex: 1 1 0; }
  .hero__meta dd { font-size: 1.2rem; }
  /* "Homes organized" wraps to two lines where the other labels do not, which
     dropped its value out of line with them. Reserve two lines for all three. */
  .hero__meta dt { min-height: 2.7em; letter-spacing: .12em; }

  /* ---- Process steps ---- */
  .step { grid-template-columns: 2.25rem minmax(0, 1fr); gap: .35rem .75rem; padding-block: 1.5rem; }
  .step__title { font-size: 1.5rem; }
  .step__body { font-size: .9375rem; }
  .step__note { white-space: normal; }

  /* ---- Odds and ends ---- */
  .btn { width: 100%; }
  .btn-row { gap: .75rem; }
  .hero__figure .fig { --ratio: 4 / 5; }
  .quote__text { font-size: 1.35rem; }
  .byline { font-size: 1.25rem; }
  .byline span { font-size: .75rem; }
  .pull { max-width: none; font-size: 1.75rem; }
  .pull__by { font-size: .75rem; }
  .footer-cta { max-width: none; }
}

/* Only genuinely tiny screens fall back to one card per row. iPhone SE (375)
   and iPhone 14 (390) both stay two-up — a 400px cutoff would have caught
   almost every phone in use and undone the change above. */
@media (max-width: 340px) {
  .cards, .gallery-grid { grid-template-columns: 1fr; gap: 2rem; }
  .card__head, .gallery-item__meta { flex-direction: row; align-items: baseline; justify-content: space-between; }
  .card__title { font-size: 1.25rem; }
}

@media print {
  .site-header, .site-footer, .burger, .strip { display: none; }
  body { background: #fff; color: #000; }
}