/* ============================================================
   D'Amico Digital — Components & sections

   RULE: nothing below may reference --oxblood / --cream / --gold
   / --shadow directly. Only --sec-* and --btn-* tokens. That is
   what makes any section flip theme with a single class.
   ============================================================ */

/* ============================================================
   Header
   ============================================================ */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgb(var(--cream-rgb) / .82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.header.is-scrolled { border-bottom-color: rgb(var(--shadow-rgb) / .10); }

/* When the header sits over a dark section, JS flips this attribute. */
.header[data-over="dark"] {
  background: rgb(var(--shadow-rgb) / .72);
  --sec-fg: var(--cream);
  --sec-muted: rgb(var(--cream-rgb) / .72);
  --sec-hairline: rgb(var(--cream-rgb) / .18);
  --focus-ring: var(--gold);
}
.header[data-over="dark"].is-scrolled { border-bottom-color: rgb(var(--cream-rgb) / .16); }

.header__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  width: 100%;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--sec-fg, var(--shadow));
  white-space: nowrap;
}
.wordmark em { font-style: normal; color: var(--gold-ink); }
.header[data-over="dark"] .wordmark em { color: var(--gold); }

/* Monogram. Decorative — the adjacent text carries the name — so it is a
   background image, which lets us swap to the light-on-dark artwork by
   theme. The oxblood mark would be invisible on a dark section. */
.wordmark__mark {
  flex: none;
  width: 30px;
  height: 30px;
  background: url("/assets/img/brand/dd-mark-64.png") center / contain no-repeat;
}
.header[data-over="dark"] .wordmark__mark,
.t-oxblood .wordmark__mark,
.t-shadow .wordmark__mark {
  background-image: url("/assets/img/brand/dd-mark-light-64.png");
}
.footer .wordmark__mark { width: 34px; height: 34px; }

/* ---- Desktop nav ----------------------------------------- */
.nav { display: flex; align-items: center; gap: 4px; margin-inline: auto; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--sec-faint);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav__link:hover,
.nav__link[aria-expanded="true"] {
  color: var(--sec-fg);
  background: rgb(var(--shadow-rgb) / .05);
}
.header[data-over="dark"] .nav__link:hover,
.header[data-over="dark"] .nav__link[aria-expanded="true"] {
  background: rgb(var(--cream-rgb) / .10);
}
.nav__link[aria-current="page"] { color: var(--sec-fg); }
.nav__link svg { transition: transform .25s var(--ease); }
.nav__link[aria-expanded="true"] svg { transform: rotate(180deg); }

.header__actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }

.header__tel {
  font-size: 1rem;
  font-weight: 500;
  color: var(--sec-faint);
  white-space: nowrap;
  transition: color .2s var(--ease);
}
.header__tel:hover { color: var(--sec-fg); }

/* ---- Services dropdown ----------------------------------- */
.has-menu { position: relative; }

.menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  translate: -50% 0;
  width: min(640px, calc(100vw - 2rem));
  padding: 12px;
  background: var(--white);
  border: 1px solid rgb(var(--shadow-rgb) / .10);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s;
}
.has-menu.is-open .menu { opacity: 1; visibility: visible; transform: none; }

.menu__item {
  display: block;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  transition: background-color .2s var(--ease);
}
.menu__item:hover { background: var(--cream); }
.menu__item strong {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--shadow);
  margin-bottom: 2px;
}
.menu__item span {
  display: block;
  font-size: 0.875rem;
  line-height: 1.45;
  color: rgb(var(--shadow-rgb) / .62);
}

/* ---- Mobile drawer --------------------------------------- */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  color: var(--sec-fg);
}
.burger span {
  display: block;
  position: relative;
  width: 20px;
  height: 1.5px;
  background: currentColor;
  transition: background-color .2s var(--ease);
}
.burger span::before,
.burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 1.5px;
  background: currentColor;
  transition: transform .3s var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

.drawer {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 99;
  background: var(--cream);
  padding: 1.5rem var(--gutter) 3rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }

.drawer__group + .drawer__group { margin-top: 1.75rem; }
.drawer__title {
  font-size: 0.75rem;
  color: rgb(var(--shadow-rgb) / .60);
  margin-bottom: .5rem;
}
.drawer__link {
  display: block;
  padding: 13px 0;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--shadow);
  border-bottom: 1px solid rgb(var(--shadow-rgb) / .08);
}
.drawer__actions { margin-top: 2rem; display: grid; gap: 10px; }

@media (max-width: 980px) {
  .nav, .header__tel { display: none; }
  .burger { display: flex; }
}
@media (min-width: 981px) {
  .drawer { display: none; }
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
  padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem));
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: center;
}
.hero h1 { margin: 1.25rem 0 1.5rem; }
.hero .lead { max-width: 34rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }
.hero__trust {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2rem;
  font-size: 0.9375rem;
  color: var(--sec-faint);
}
.hero__trust b { font-weight: 500; color: var(--sec-muted); }

/* Collage panel */
/* No panel behind the tiles — they float straight on the section ground.
   overflow stays visible so the hover enlarge is not clipped; the
   aspect-ratio still reserves the layout box. */
.collage {
  position: relative;
  aspect-ratio: 4 / 3.1;
  overflow: visible;
}
.collage__item {
  position: absolute;
  border-radius: 6px;
  overflow: hidden;
  background: var(--sec-bg);
  box-shadow: var(--sec-shadow-lift);
  border: 1px solid var(--sec-surface-bd);
  /* `scale` as its own property, not inside `transform` — the tiles each carry
     a `rotate`, and the individual properties compose instead of overwriting. */
  transition: scale .35s var(--ease), box-shadow .35s var(--ease);
}
.collage__item:hover {
  scale: 1.18;
  box-shadow: 0 32px 70px -18px rgb(var(--shadow-rgb) / .45);
  z-index: 5;
}
.collage__item img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* Placeholder texture until real screenshots are dropped in. Using :empty
   means the hatch disappears by itself the moment an <img> is added. */
.collage__item:empty {
  background:
    repeating-linear-gradient(-45deg, transparent 0 9px, rgb(var(--shadow-rgb) / .045) 9px 18px),
    var(--sec-bg);
}
.collage__item--a { width: 55%; left: -2%;  top: 11%; aspect-ratio: 4/3; rotate: -6deg; z-index: 2; }
.collage__item--b { width: 55%; right: -2%; top: 4%;  aspect-ratio: 4/3; rotate: 4deg;  z-index: 1; }
.collage__item--c { width: 62%; left: 19%; bottom: 4%; aspect-ratio: 16/10; rotate: -1deg; z-index: 3; }

/* Below ~1200px the column is narrow enough that a hovered outer tile would
   scale past the viewport edge and get clipped by body overflow-x. Pulling
   the bleed back in keeps the whole enlarge visible. */
@media (max-width: 1200px) {
  .collage__item--a { left: 2%; }
  .collage__item--b { right: 2%; }
}

/* Bottom-left is the one region the enlarged tiles leave clear: tile --a
   ends around 64% height and tile --c starts at 19% from the left. */
.collage__tag {
  position: absolute;
  left: 0;
  bottom: 3%;
  z-index: 4;
  padding: 9px 15px;
  border-radius: var(--r-pill);
  /* Token-driven so the chip inverts with the section: on a light hero it
     is an oxblood chip with cream text, on a dark hero the reverse. */
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--sec-rule);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: var(--shadow-lift);
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .collage { order: -1; aspect-ratio: 4 / 3; }
}

/* ============================================================
   Work — horizontal drag track
   ============================================================ */

.work__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.work__nav { display: flex; gap: 8px; }
.track-btn {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--sec-hairline);
  color: var(--sec-fg);
  transition: background-color .2s var(--ease), border-color .2s var(--ease), opacity .2s;
}
.track-btn:hover { background: var(--sec-surface); border-color: var(--sec-hairline-strong); }
.track-btn[disabled] { opacity: .3; cursor: default; }

/* ---- Floating track arrows -------------------------------
   These sit on top of arbitrary client screenshots, light and dark, so they
   are deliberately NOT theme-token driven — a near-opaque alabaster disc with
   an oxblood glyph is the one combination that stays legible over any image. */
.track-btn--float {
  position: absolute;
  z-index: 3;
  /* Centre on the screenshot itself, below the title bar. */
  top: calc(1px + var(--chassis-bar) + var(--shot-h) / 2);
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  background: rgb(var(--cream-rgb) / .94);
  border-color: transparent;
  color: var(--oxblood);
  box-shadow: 0 2px 6px rgb(var(--shadow-rgb) / .18), 0 12px 28px -10px rgb(var(--shadow-rgb) / .40);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: .7;
  transition: background-color .2s var(--ease), transform .2s var(--ease), opacity .25s var(--ease);
}
.track-btn--float:hover,
.track-btn--float:focus-visible {
  background: var(--white);
  border-color: transparent;
  opacity: 1;
  transform: translateY(-50%) scale(1.06);
}
.track-btn--prev { left: calc(var(--gutter) + 14px); }
.track-btn--next { right: calc(var(--gutter) + 14px); }

/* At either end, hide the dead arrow entirely instead of dimming it. One
   visible arrow reads as "there is more this way"; a greyed disc just looks
   broken when it is sitting on top of a photo. */
.track-btn--float[disabled] { opacity: 0; pointer-events: none; }

@media (max-width: 620px) {
  .track-btn--float { width: 44px; height: 44px; }
  .track-btn--prev { left: calc(var(--gutter) + 6px); }
  .track-btn--next { right: calc(var(--gutter) + 6px); }
}

.track-wrap {
  /* One source of truth for card width. Everything else is derived from it:
     the chassis is sized from the SCREENSHOT (1220x800) plus its chrome, so
     the shot is never cropped, and the floating arrows centre on the shot
     rather than the whole card (which is taller because of its caption). */
  --card-w: min(720px, 86vw);
  --chassis-bar: 30px;                                        /* title bar   */
  --chassis-pad: 8px;                                         /* bezel       */
  --shot-w: calc(var(--card-w) - var(--chassis-pad) * 2 - 2px);
  --shot-h: calc(var(--shot-w) * 800 / 1220);
  position: relative;
  margin-top: clamp(2rem, 4vw, 3rem);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  overflow: hidden;
}
.track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
  cursor: grab;
}
.track::-webkit-scrollbar { display: none; }
.track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.track.is-dragging a { pointer-events: none; }

.work-card {
  flex: 0 0 var(--card-w);
  scroll-snap-align: start;
}
/* Obsidian Chassis (brand doc §5.4): client work is framed in a dark
   architectural shell with subtle window controls, so the screenshot reads as
   a device rather than a floating image. The outer aspect stays 610:400 — the
   floating track arrows centre themselves off that ratio. */
.work-card__media {
  position: relative;
  border-radius: var(--r-default);
  overflow: hidden;
  background: var(--chassis);
  border: 1px solid var(--chassis-edge);
  padding: var(--chassis-bar) var(--chassis-pad) var(--chassis-pad);
  box-shadow: var(--sec-shadow);
}

/* Window controls: one dot plus two shadow clones. */
.work-card__media::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 13px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--chassis-ctl);
  box-shadow: 14px 0 0 var(--chassis-ctl), 28px 0 0 var(--chassis-ctl);
}

.work-card__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 1220 / 800;   /* the screenshot ratio drives the frame */
  object-fit: cover;
  object-position: top center;
  border-radius: 3px;
  transition: scale .4s var(--ease);
}

/* The shot zooms inside its frame rather than the whole card growing: the
   track clips its overflow, so a scaled card would be cut off at the edges. */
.work-card:hover .work-card__media img { scale: 1.05; }
.work-card__media { transition: box-shadow .4s var(--ease); }
.work-card:hover .work-card__media { box-shadow: var(--sec-shadow-lift); }

/* Placeholder frame shown until real screenshots land */
.work-card__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 8px;
  text-align: center;
  padding: 1.5rem;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0 12px,
      rgb(var(--shadow-rgb) / .025) 12px 24px
    );
}
.work-card__ph b {
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--sec-muted);
}
.work-card__ph span { font-size: 0.8125rem; color: var(--sec-faint); }

.work-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}
.work-card__foot h3 { font-size: 1.125rem; }
.work-card__type {
  font-size: 0.75rem;
  color: var(--sec-faint);
  white-space: nowrap;
}

/* Trailing "view all" card */
.work-card--all .work-card__media {
  display: grid;
  place-content: center;
  text-align: center;
  gap: 12px;
  padding: 24px;
  background: transparent;
  border: 1px dashed var(--sec-hairline-strong);
  box-shadow: none;
}
.work-card--all .work-card__media::before { content: none; }

/* ============================================================
   Service & benefit cards
   ============================================================ */

.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px;
  background: var(--sec-surface);
  border: 1px solid var(--sec-surface-bd);
  border-radius: var(--r-xl);
  transition: transform .32s var(--ease), box-shadow .32s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--sec-shadow-lift); }
.card p { font-size: 1rem; line-height: 1.62; flex: 1; }
.card .link-arrow { margin-top: 4px; }

.card__icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--r-default);
  color: var(--sec-accent);
  background: var(--icon-bg);
  border: 1px solid var(--icon-bd);
  margin-bottom: 6px;
}

.card__num {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--sec-accent);
  margin-bottom: 2px;
}

/* ============================================================
   Reviews — stacked slider
   ============================================================ */

.reviews { display: grid; justify-items: center; }

/* Grid stacking rather than absolute positioning: every slide occupies the
   same cell, so the container sizes itself to the TALLEST review instead of a
   fixed height. Real testimonials vary a lot in length and the longest one
   overflowed a fixed 300px card. */
.review-stack {
  display: grid;
  width: min(700px, 100%);
  min-height: 300px;
}
.review {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 40px;
  background: var(--sec-surface);
  border: 1px solid var(--sec-surface-bd);
  border-radius: var(--r-2xl);
  box-shadow: var(--sec-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(.985);
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility .5s;
}
.review.is-active { opacity: 1; visibility: visible; transform: none; }

/* Review cards stay a light island even on a dark section — a client's words
   read better on paper than on oxblood. Same pattern as the booking card:
   restate the light half of the contract, let the component rules do the rest. */
.t-oxblood .review,
.t-shadow .review {
  --sec-fg: var(--shadow);
  --sec-muted: var(--body-ink);
  --sec-faint: var(--muted-ink);
  --sec-hairline: rgb(var(--oxblood-rgb) / .12);
  --sec-surface: var(--cream);
  --sec-surface-bd: rgb(var(--oxblood-rgb) / .10);
  --sec-accent: var(--gold-ink);      /* raw gold is 1.89:1 on cream */
  color: var(--shadow);
}

.review__stars { display: flex; gap: 3px; color: var(--sec-accent); }
.t-cream .review__stars,
.t-white .review__stars { color: var(--gold-ink); }

.review__quote {
  font-size: 1.25rem;
  line-height: 1.62;
  letter-spacing: -0.014em;
  color: var(--sec-fg);
  flex: 1;
  text-wrap: pretty;
}
.review__who { display: flex; align-items: center; gap: 12px; }

/* Selector is .review__who .review__avatar, not .review__avatar, on purpose:
   the avatar IS one of the spans matched by `.review__who span` below, which
   would otherwise force display:block and drop the initials out of the circle
   into its top-left corner. */
.review__who .review__avatar {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  line-height: 1;
  /* The card is a light island in every theme, so an oxblood tint is safe. */
  background: rgb(var(--oxblood-rgb) / .07);
  border: 1px solid rgb(var(--oxblood-rgb) / .14);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--oxblood);
}
.review__who b { display: block; font-weight: 600; font-size: 1rem; color: var(--sec-fg); }
.review__who > span:last-child > span { display: block; font-size: 0.9375rem; color: var(--sec-faint); }

.review-ctl {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 2rem;
}
.review-dots { display: flex; gap: 8px; }
.review-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sec-hairline-strong);
  transition: background-color .25s var(--ease), width .25s var(--ease);
}
.review-dots button[aria-current="true"] { background: var(--sec-accent); width: 22px; border-radius: 4px; }

@media (max-width: 600px) {
  .review { padding: 28px; }
  .review-stack { min-height: 360px; }
}

/* ============================================================
   Pricing
   ============================================================ */

.price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 980px) { .price-grid { grid-template-columns: minmax(0, 1fr); max-width: 34rem; margin-inline: auto; } }

.price {
  display: flex;
  flex-direction: column;
  padding: 32px;
  background: var(--sec-surface);
  border: 1px solid var(--sec-surface-bd);
  border-radius: var(--r-xl);
}
.price--feature {
  border-color: var(--sec-accent);
  box-shadow: var(--sec-shadow);
}
.t-cream .price--feature,
.t-white .price--feature { background: linear-gradient(180deg, rgb(var(--gold-rgb) / .09), transparent 55%), var(--sec-surface); }

.price__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.price__name { font-size: 0.8125rem; color: var(--sec-muted); }

.price__flag {
  padding: 6px 11px;
  border-radius: var(--r-pill);
  font-size: 0.6875rem;
  background: var(--sec-accent);
  color: var(--sec-bg);
}
.t-cream .price__flag,
.t-white .price__flag { background: var(--gold); color: var(--gold-text); }

.price__fig {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--fs-price);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--sec-fg);
}
.price__fig small { font-size: 1rem; font-weight: 400; color: var(--sec-faint); letter-spacing: -0.01em; }
.price__alt { margin-top: .625rem; font-size: 1rem; color: var(--sec-muted); }
.price__alt b { font-weight: 500; color: var(--sec-fg); }

.price__list {
  display: grid;
  gap: 11px;
  margin: 1.75rem 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--sec-hairline);
  flex: 1;
}
.price__list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--sec-muted);
}
.price__list svg { margin-top: 3px; color: var(--sec-accent); }
.t-cream .price__list svg,
.t-white .price__list svg { color: var(--gold-ink); }
.price__list li.is-head { grid-template-columns: 1fr; font-weight: 500; color: var(--sec-fg); }
.price__note { margin-top: -.5rem; margin-bottom: 1.5rem; font-size: 0.875rem; color: var(--sec-faint); font-style: italic; }

/* Add-on bars */
.addons { display: grid; gap: 12px; margin-top: 20px; }
.addon {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1.25rem;
  padding: 20px 24px;
  background: var(--sec-surface);
  border: 1px solid var(--sec-surface-bd);
  border-radius: var(--r-lg);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.addon:hover { border-color: var(--sec-hairline-strong); transform: translateY(-2px); }
.addon__tag {
  padding: 6px 11px;
  border-radius: var(--r-pill);
  border: 1px solid var(--sec-rule);
  font-size: 0.6875rem;
  color: var(--sec-accent);
  white-space: nowrap;
}
.t-cream .addon__tag,
.t-white .addon__tag { color: var(--gold-ink); }
.addon__body b { display: block; font-weight: 500; font-size: 1.0625rem; letter-spacing: -0.02em; color: var(--sec-fg); }
.addon__body span { display: block; font-size: 1rem; color: var(--sec-muted); margin-top: 2px; }
.addon__price { font-size: 1.0625rem; font-weight: 500; color: var(--sec-fg); white-space: nowrap; }
.addon__price small { font-size: 0.875rem; font-weight: 400; color: var(--sec-faint); }

@media (max-width: 760px) {
  .addon { grid-template-columns: minmax(0, 1fr) auto; gap: .75rem 1rem; }
  .addon__tag { grid-column: 1 / -1; justify-self: start; }
  .addon .link-arrow { display: none; }
}

/* ============================================================
   Booking band
   ============================================================ */

.booking__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.booking h2 { margin: 1.25rem 0 1.25rem; }
.booking__list { display: grid; gap: 14px; margin-top: 2rem; }
.booking__list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--sec-muted);
}
.booking__list svg { margin-top: 2px; color: var(--sec-accent); }

.booking__card {
  background: var(--cream);
  border-radius: var(--r-xl);
  padding: 10px;
  box-shadow: 0 30px 70px -30px rgb(0 0 0 / .55);
}
/* overflow stays visible: Cal auto-resizes its iframe to fit the month view,
   and clipping here would cut the bottom row of dates off. */
.booking__slot { min-height: 560px; border-radius: var(--r-lg); }
.booking__mount { width: 100%; }
.booking__mount iframe { border-radius: var(--r-default); }

.booking__loading {
  min-height: 520px;
  display: grid;
  place-content: center;
  gap: 14px;
  text-align: center;
  padding: 2rem;
  color: rgb(var(--shadow-rgb) / .55);
  font-size: 1rem;
}
.spinner {
  width: 26px;
  height: 26px;
  margin-inline: auto;
  border: 2px solid rgb(var(--shadow-rgb) / .15);
  border-top-color: var(--oxblood);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Fallback / secondary form, rendered on a cream card => light tokens */
/* A light card sitting inside the dark booking band, so it has to restate the
   light contract. It must also restate --btn-bd: it inherits the dark theme's
   transparent border, and gold on this cream card is only 1.89:1 — the button
   would have no visible edge. */
.booking__fallback,
.callback {
  --sec-fg: var(--shadow);
  --sec-muted: var(--body-ink);
  --sec-dim: var(--muted-ink);
  --sec-faint: var(--muted-ink);
  --sec-hairline: rgb(var(--oxblood-rgb) / .12);
  --sec-accent: var(--oxblood);
  --btn-bg: var(--gold);
  --btn-fg: var(--gold-text);
  --btn-bg-hover: var(--gold-hover);
  --btn-bd: rgb(var(--oxblood-rgb) / .18);
  --btn-shadow: var(--shadow-gold);
  --btn-shadow-hover: var(--shadow-gold-hover);
  --field-bg: var(--white);
  --field-bd: rgb(var(--oxblood-rgb) / .18);
  --field-fg: var(--body-ink);
  --focus-ring: var(--oxblood);
  color: var(--body-ink);
}
.booking__fallback { display: grid; place-content: center; gap: 1rem; text-align: center; padding: 3rem 2rem; min-height: 520px; }

.callback { border-top: 1px solid rgb(var(--shadow-rgb) / .10); margin-top: 10px; padding: 6px 6px 2px; }
.callback__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 14px 12px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--oxblood);
}
.callback__toggle svg { transition: transform .3s var(--ease); }
.callback__toggle[aria-expanded="true"] svg { transform: rotate(90deg); }

.callback__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .38s var(--ease);
}
.callback__body > div { overflow: hidden; }
.callback.is-open .callback__body { grid-template-rows: 1fr; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 6px 12px 16px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 520px) { .form-grid { grid-template-columns: 1fr; } }

.field { display: grid; gap: 6px; }
.field label { font-size: 0.8125rem; color: var(--sec-faint); }
.field input,
.field select {
  width: 100%;
  padding: 12px 14px;
  min-height: 44px;
  background: var(--field-bg);
  border: 1px solid var(--field-bd);
  border-radius: var(--r-sm);
  color: var(--field-fg);
  font-size: 1rem;
  transition: border-color .2s var(--ease);
}
.field input:focus { border-color: var(--sec-accent); }
.field input::placeholder { color: rgb(var(--shadow-rgb) / .35); }

.form-status { grid-column: 1 / -1; font-size: 0.9375rem; min-height: 1.25rem; }
.form-status[data-state="error"] { color: #A5252B; }
.form-status[data-state="ok"] { color: #1F6B4A; }

@media (max-width: 960px) {
  .booking__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   FAQ
   ============================================================ */

.faq { max-width: 60rem; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--sec-hairline); }
.faq__item:first-child { border-top: 1px solid var(--sec-hairline); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 26px 4px;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--sec-fg);
  cursor: pointer;
  list-style: none;
  text-align: left;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--sec-accent); }

.faq__ico { position: relative; flex: none; width: 18px; height: 18px; color: var(--sec-accent); }
.faq__ico::before,
.faq__ico::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: currentColor;
  transition: transform .3s var(--ease);
}
.faq__ico::after { transform: rotate(90deg); }
.faq__item[open] .faq__ico::after { transform: rotate(0deg); }

.faq__a { padding: 0 4px 28px; max-width: 52rem; }
.faq__a p { font-size: 1rem; line-height: 1.72; }

/* ============================================================
   Closing CTA
   ============================================================ */

.closer { text-align: center; }
.closer h2 { margin-bottom: 1.25rem; }
.closer .lead { margin-inline: auto; max-width: 34rem; }
.closer__cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }

/* ============================================================
   Footer
   ============================================================ */

.footer { padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem; }
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--sec-hairline);
}
.footer__brand p { font-size: 1rem; line-height: 1.65; margin-top: 1rem; max-width: 22rem; }
.footer .wordmark { color: var(--sec-fg); font-size: 1.0625rem; }
.footer .wordmark em { color: var(--sec-accent); }

.footer__col h3 {
  font-size: 0.75rem;
  color: var(--sec-faint);
  margin-bottom: 1rem;
}
.footer__col li + li { margin-top: 9px; }
.footer__col a {
  font-size: 1rem;
  color: var(--sec-muted);
  transition: color .2s var(--ease);
}
.footer__col a:hover { color: var(--sec-fg); }

.footer__nap {
  display: grid;
  gap: 6px;
  margin-top: 1.5rem;
  font-size: 1rem;
  color: var(--sec-muted);
  font-style: normal;
}
.footer__nap a:hover { color: var(--sec-accent); }
.footer__nap b { font-weight: 500; color: var(--sec-fg); }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 2rem;
}
.footer__bottom p { font-size: 0.875rem; color: var(--sec-faint); }
.footer__social { display: flex; gap: 8px; }
.footer__social a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--sec-hairline);
  color: var(--sec-accent);
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.footer__social a:hover { background: rgb(var(--cream-rgb) / .08); border-color: var(--sec-hairline-strong); }

@media (max-width: 860px) {
  .footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer__top { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   Stub pages ("coming soon" skeleton)
   ============================================================ */

.stub { padding-top: calc(var(--header-h) + clamp(3rem, 8vw, 6rem)); }
.stub__inner { max-width: 44rem; }
.stub h1 { margin: 1.25rem 0 1.5rem; }
.stub__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2.25rem; }
.crumbs { display: flex; gap: 8px; font-size: 0.875rem; color: var(--sec-faint); }
.crumbs a:hover { color: var(--sec-accent); }

/* ---- Two-up project grid (location pages) -----------------
   Reuses .work-card / the Obsidian chassis outside the scroll track.
   No size vars needed: the chassis takes its height from the image. */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 820px) {
  .work-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Numbered process steps -------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: step; }
.step {
  padding: 28px 24px;
  background: var(--sec-surface);
  border: 1px solid var(--sec-surface-bd);
  border-radius: var(--r-default);
}
.step__n {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  color: var(--sec-accent);
  margin-bottom: 10px;
}
.step h3 { margin-bottom: 8px; }
.step p { font-size: 1rem; line-height: 1.6; }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* ---- Service-area chip list -------------------------------- */
.areas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.5rem; }
.areas span {
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--sec-hairline);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--sec-muted);
}

/* ---- Legal / long-form prose ------------------------------- */
.prose { max-width: 46rem; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 2.5rem 0 .75rem; }
.prose > h2:first-child { margin-top: 0; }   /* only when it really is first */
.prose p, .prose li { font-size: 1rem; line-height: 1.75; color: var(--sec-muted); }
.prose p + p { margin-top: .9rem; }
.prose ul { margin: .9rem 0; display: grid; gap: .5rem; }
.prose li { padding-left: 1.1rem; position: relative; }
.prose li::before { content: "—"; position: absolute; left: 0; color: var(--sec-accent); }
.prose a { color: var(--sec-accent); text-decoration: underline; text-underline-offset: 3px; }
.prose__updated { font-size: 0.875rem; color: var(--sec-faint); margin-bottom: 2rem; }

/* ============================================================
   Page components (service / pricing / work / about pages)
   All token-driven, so they keep working in every section theme.
   ============================================================ */

/* ---- Checkmark list, usable outside a pricing card ---------- */
.checks { display: grid; gap: 12px; }
.checks li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--sec-muted);
}
.checks svg { margin-top: 4px; color: var(--sec-accent); }
.t-cream .checks svg,
.t-white .checks svg { color: var(--gold-ink); }
.checks b { font-weight: 600; color: var(--sec-fg); }
.checks--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; }
@media (max-width: 760px) { .checks--2col { grid-template-columns: minmax(0, 1fr); } }

/* ---- Bordered aside (what costs extra / what we won't do) ---- */
.callout {
  padding: 28px 30px;
  border: 1px solid var(--sec-hairline);
  border-left: 3px solid var(--sec-accent);
  border-radius: var(--r-default);
  background: var(--sec-surface);
}
.callout h3 { margin-bottom: 10px; }
.callout p { font-size: 1rem; line-height: 1.7; }
.callout > * + * { margin-top: .75rem; }

/* ---- Two-up comparison (monthly vs one-time) ---------------- */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.compare__col {
  padding: 30px;
  background: var(--sec-surface);
  border: 1px solid var(--sec-surface-bd);
  border-radius: var(--r-default);
}
.compare__col h3 { margin-bottom: 4px; }
.compare__price {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--sec-accent);
  margin-bottom: 1rem;
  display: block;
}
.t-cream .compare__price,
.t-white .compare__price { color: var(--gold-ink); }
.compare__who {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--sec-hairline);
  font-size: 1rem;
  line-height: 1.65;
}
.compare__who b { color: var(--sec-fg); font-weight: 600; }
@media (max-width: 820px) { .compare { grid-template-columns: minmax(0, 1fr); } }

/* ---- Featured case study ------------------------------------ */
.case { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.case__body h3 { font-size: clamp(1.5rem, 2.4vw, 1.875rem); margin-bottom: 1rem; }
.case__body p { font-size: 1rem; line-height: 1.7; }
.case__body p + p { margin-top: .9rem; }
.case__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--sec-accent);
  display: block;
  margin-bottom: .75rem;
}
.t-cream .case__label,
.t-white .case__label { color: var(--gold-ink); }
.case__quote {
  margin-top: 1.5rem;
  padding: 20px 24px;
  border-left: 3px solid var(--sec-accent);
  background: var(--sec-surface);
  border-radius: 0 var(--r-default) var(--r-default) 0;
}
.case__quote p { font-size: 1.0625rem; line-height: 1.6; color: var(--sec-fg); }
.case__quote cite { display: block; margin-top: .75rem; font-style: normal; font-size: 0.9375rem; color: var(--sec-faint); }
@media (max-width: 900px) { .case { grid-template-columns: minmax(0, 1fr); } }

/* ---- Founder block (about page) ----------------------------- */
.founder { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.founder__photo {
  aspect-ratio: 1;
  border-radius: var(--r-default);
  overflow: hidden;
  background: var(--sec-surface);
  border: 1px solid var(--sec-surface-bd);
  display: grid;
  place-items: center;
}
.founder__photo img { width: 100%; height: 100%; object-fit: cover; }
.founder__mono {
  width: 96px;
  height: 96px;
  background: url("/assets/img/brand/dd-mark-64.png") center / contain no-repeat;
  opacity: .5;
}
.t-oxblood .founder__mono,
.t-shadow .founder__mono { background-image: url("/assets/img/brand/dd-mark-light-64.png"); }
@media (max-width: 760px) { .founder { grid-template-columns: minmax(0, 1fr); } .founder__photo { max-width: 260px; } }