/* tokens.css */
/* Design tokens — "Grand Format" direction.
   Warm cream ground, persimmon as the single loud colour, mustard and sage as
   supporting blocks, near-black ink for type and the darkest panels. The look
   depends on three things: oversized tight display type, generous rounding,
   and large flat colour fields. Weakening any of the three makes it read as a
   generic template. */

/* Bricolage Grotesque — the display voice. A variable grotesque with an optical
   size axis; it stays characterful at 100px+ where neutral grotesques go bland. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-var.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-display: swap;
}

/* Instrument Sans — body and UI. Quiet, slightly condensed, holds up small. */
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-italic-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---- Colour ---- */
  --color-ink: #191512;          /* near-black, warm — type and the darkest panels */
  --color-ink-80: rgba(25, 21, 18, 0.8);
  --color-ink-70: rgba(25, 21, 18, 0.7);
  --color-ink-20: rgba(25, 21, 18, 0.2);
  --color-surface: #ffffff;
  --color-accent: #de5528;       /* persimmon — large display type, fills, icons */
  /* Cream on bright persimmon is only 3.63:1. Any surface carrying text under
     24px uses this deeper shade instead (5.2:1) — buttons, pills, CTA bands. */
  --color-accent-dark: #b93f17;
  --color-cream: #f5ebdd;        /* second cream, for alternating bands */
  --color-shell: #fdf7ee;        /* page ground — never white */
  --color-muted: #7e8f6e;        /* sage — decorative blocks and rules only */

  /* Supporting block colours. Used as large flat fields, not as text. */
  --color-mustard: #e7b23c;
  --color-sage: #7e8f6e;
  --color-forest: #22301f;

  /* Text-safe variants. Persimmon on cream is 3.6:1 and sage is 2.6:1 — both
     fail AA as small text. These clear 4.5:1 while reading as the same hue.
     Use them for anything under 24px; use the raw tokens for fills and display. */
  --color-accent-text: #a93a14;  /* 5.2:1 on shell */
  --color-muted-text: #5a5149;   /* 7.1:1 on shell */

  --color-line: rgba(25, 21, 18, 0.13);
  --color-line-soft: rgba(25, 21, 18, 0.08);
  --color-white-20: rgba(255, 255, 255, 0.2);

  --color-text: var(--color-ink);
  --color-text-soft: #4a423b;
  --color-bg: var(--color-shell);

  /* ---- Type ----
     One contrast carries the whole system: enormous, tightly-tracked display
     against small, plain, near-neutral UI text. */
  --font-display: "Bricolage Grotesque", "Helvetica Neue", Helvetica, sans-serif;
  --font-heading: "Bricolage Grotesque", "Helvetica Neue", Helvetica, sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --font-ui: "Instrument Sans", system-ui, sans-serif;

  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-17: 1.0625rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-25: clamp(1.3rem, 0.6vw + 1.15rem, 1.65rem);
  --fs-30: clamp(1.5rem, 1vw + 1.2rem, 2.05rem);
  --fs-35: clamp(1.7rem, 1.5vw + 1.25rem, 2.5rem);
  --fs-38: clamp(1.85rem, 1.9vw + 1.3rem, 2.9rem);
  --fs-40: clamp(2rem, 2.4vw + 1.35rem, 3.3rem);
  --fs-50: clamp(2.3rem, 4.2vw + 1.1rem, 5rem);
  --fs-hero: clamp(2.9rem, 8.6vw, 11.5rem);

  --lh-tight: 0.9;
  --lh-heading: 0.98;
  --lh-body: 1.6;

  /* Display is set very tight and negative-tracked. Labels are barely tracked —
     this is not a wide-tracked-uppercase system, and widening them flattens it. */
  --track-display: -0.045em;
  --track-label: 0.06em;

  /* ---- Space ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6.25rem;

  --section-y: clamp(3.75rem, 7vw, 7.5rem);

  /* ---- Layout ---- */
  --container: 1560px;
  --container-narrow: 1100px;
  --gutter: clamp(1.125rem, 4vw, 4rem);

  /* ---- Radii ----
     Generous and consistent. The rounding is a load-bearing part of the look. */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 26px;
  --radius-xl: 34px;
  --radius-2xl: 40px;
  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 2px 10px rgba(25, 21, 18, 0.05);
  --shadow-md: 0 12px 34px rgba(25, 21, 18, 0.09);
  --shadow-lg: 0 26px 70px rgba(25, 21, 18, 0.16);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 0.35s;

  /* ---- Z-index ---- */
  --z-base: 1;
  --z-dropdown: 100;
  --z-fixed: 300;
  --z-modal: 500;
}

/* reset.css */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* Inline icons default to text size. Component classes (.btn__icon, .feature__icon
   svg, …) override this — a class selector always beats this element selector. */
svg {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

textarea {
  resize: vertical;
}

table {
  border-collapse: collapse;
  width: 100%;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: var(--z-modal);
  padding: var(--space-3) var(--space-5);
  background: var(--color-ink);
  color: var(--color-surface);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: top var(--dur) var(--ease);
}

.skip-link:focus {
  top: 0;
}

/* typography.css */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "opsz" 96;
  line-height: var(--lh-heading);
  letter-spacing: var(--track-display);
  color: var(--color-ink);
  text-wrap: balance;
}

h1 { font-size: var(--fs-50); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-50); line-height: var(--lh-tight); }
h3 { font-size: var(--fs-38); }
h4 { font-size: var(--fs-30); }
h5 { font-size: var(--fs-25); }
h6 {
  font-family: var(--font-ui);
  font-size: var(--fs-16);
  font-weight: 600;
  letter-spacing: 0;
}

/* Small headings sit below the optical-size threshold — drop opsz so they keep
   their spacing instead of inheriting the display cut's tight fit. */
h4, h5, h6 { font-variation-settings: "opsz" 24; }

p {
  line-height: var(--lh-body);
  text-wrap: pretty;
}

p + p { margin-top: var(--space-4); }

strong, b { font-weight: 600; }

/* Italic accent inside a display heading. Set in the body face, not the display
   one — the size drop and the change of voice is the point. */
.accent-italic {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 0.8em;
  letter-spacing: -0.01em;
  color: var(--color-accent);
}

/* ---- Eyebrow ----
   A solid pill, not a tracked rule. This is the piece that most obviously
   separates this direction from a serif/hairline treatment. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--fs-12);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--color-shell);
  background: var(--color-ink);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-5);
  line-height: 1.4;
}

.eyebrow--accent { background: var(--color-accent-dark); }
.eyebrow--mustard { background: var(--color-mustard); color: var(--color-ink); }
.eyebrow--sage { background: var(--color-sage); color: var(--color-ink); }

/* On dark and coloured panels the ink pill disappears — flip it to cream. */
.section--ink .eyebrow,
.cta-band .eyebrow,
.appointment__copy .eyebrow,
.story .eyebrow {
  background: var(--color-mustard);
  color: var(--color-ink);
}

/* ---- Section headings ---- */
/* Title left, supporting paragraph right and baseline-aligned with it. The
   asymmetry is what keeps the very large headings from feeling like a poster. */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(var(--space-5), 4vw, var(--space-9));
  align-items: end;
  margin-bottom: clamp(var(--space-8), 5vw, var(--space-10));
}

/* The centred variant is a flex column, so the grid gap above must be zeroed —
   the eyebrow's and paragraph's own margins set the rhythm here. */
.section-head--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  margin-inline: auto;
  max-width: 68rem;
}

.section-head p {
  max-width: 56ch;
  color: var(--color-text-soft);
  font-size: var(--fs-17);
}

.section-head--center p { margin-top: var(--space-5); }

/* Outside .section-head, a title followed directly by copy still needs air. */
.section-title + p { margin-top: var(--space-5); }

@media (max-width: 860px) {
  .section-head {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    align-items: start;
  }
}

.section-title {
  font-size: var(--fs-50);
  font-weight: 600;
  max-width: 15ch;
}

.section-head--center .section-title { max-width: 20ch; }

.display { font-family: var(--font-display); font-weight: 600; }

.lead {
  font-size: var(--fs-18);
  line-height: 1.55;
  color: var(--color-text-soft);
}

.text-small { font-size: var(--fs-14); }

.label {
  font-family: var(--font-ui);
  font-size: var(--fs-12);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--color-muted-text);
}

/* ---- Long-form article body ---- */
.prose { max-width: 72ch; }

.prose > * + * { margin-top: var(--space-5); }

.prose p {
  font-size: var(--fs-17);
  color: var(--color-text-soft);
}

.prose > p:first-child {
  font-size: var(--fs-20);
  line-height: 1.55;
  color: var(--color-ink);
}

.prose h2 {
  font-size: var(--fs-35);
  margin-top: var(--space-9);
}

.prose h3 {
  font-size: var(--fs-25);
  margin-top: var(--space-7);
}

.prose ul,
.prose ol {
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.prose ul li {
  list-style: none;
  position: relative;
  padding-left: var(--space-6);
  color: var(--color-text-soft);
}

/* Persimmon arrow rather than a bullet — it matches the link and list idiom
   used across the rest of the site. */
.prose ul li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-accent);
  font-weight: 600;
}

.prose ol {
  list-style: decimal;
  padding-left: var(--space-5);
}

.prose ol li {
  color: var(--color-text-soft);
  padding-left: var(--space-2);
}

.prose a {
  color: var(--color-ink);
  text-decoration: none;
  box-shadow: inset 0 -2px 0 var(--color-accent);
  transition: box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}

.prose a:hover {
  box-shadow: inset 0 -1.2em 0 var(--color-accent);
  color: #fff;
}

.prose blockquote {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--fs-25);
  font-weight: 600;
  letter-spacing: var(--track-display);
  line-height: 1.15;
  color: var(--color-ink);
}

.prose img { border-radius: var(--radius-lg); }

.prose .btn { box-shadow: none; }
.prose .btn:hover { color: inherit; }

/* atmosphere.css */
/* ============================================================
   Atmosphere — motion and depth.
   This direction gets its warmth from large flat colour fields
   and rounding rather than from texture, so there is deliberately
   no grain overlay here. What lives in this file is the reveal
   system, the marquee, and the sticky card stack.
   ============================================================ */

body {
  background: var(--color-shell);
  position: relative;
}

.hero {
  position: relative;
  isolation: isolate;
}

/* A single warm bloom behind the top of the page so the cream ground has a
   direction of light instead of reading as a flat fill. */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -34%;
  right: -12%;
  width: 74vw;
  height: 74vw;
  max-width: 980px;
  max-height: 980px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(231, 178, 60, 0.22) 0%,
    rgba(222, 85, 40, 0.09) 42%,
    transparent 70%
  );
  pointer-events: none;
}

.section { position: relative; }

/* ---- Scroll reveal ----
   [data-reveal] rises once. [data-reveal-group] sets --i on its children in
   site.js so they stagger. .no-js keeps everything visible if JS never runs. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(30px);
    transition:
      opacity 0.8s var(--ease),
      transform 0.8s var(--ease);
    transition-delay: calc(var(--i, 0) * 70ms);
  }

  [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }

  /* Photographs un-mask rather than slide — it reads as a reveal of the image
     itself instead of the box moving. */
  [data-reveal="image"] {
    transform: none;
    clip-path: inset(0 0 14% 0 round var(--radius-lg));
    transition:
      opacity 1s var(--ease),
      clip-path 1.1s var(--ease);
  }

  [data-reveal="image"].is-in {
    clip-path: inset(0 0 0 0 round var(--radius-lg));
  }

  /* Hero children stagger on load rather than on scroll. */
  .hero__head > *,
  .hero__band,
  .hero__actions {
    animation: rise 0.9s var(--ease) backwards;
    animation-delay: calc(var(--i, 0) * 110ms + 60ms);
  }

  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(28px);
    }
  }
}

.no-js [data-reveal] {
  opacity: 1;
  transform: none;
  clip-path: none;
}

/* ---- Marquee ----
   A tilted persimmon band of the service names. The track holds the list twice
   so the -50% translation loops seamlessly. */
.marquee {
  overflow: hidden;
  background: var(--color-accent);
  color: #fff;
  padding-block: clamp(0.8rem, 1.8vw, 1.5rem);
  transform: rotate(-1.4deg) scale(1.04);
  margin-block: clamp(2.5rem, 5vw, 5rem);
}

.marquee__track {
  display: flex;
  gap: 2.5rem;
  white-space: nowrap;
  width: max-content;
}

@media (prefers-reduced-motion: no-preference) {
  .marquee__track {
    animation: marquee 34s linear infinite;
  }
}

.marquee__track span {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 3.2vw, 3rem);
  letter-spacing: var(--track-display);
}

.marquee__track span::after {
  content: "✳";
  font-size: 0.5em;
  opacity: 0.72;
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ---- Focus ---- */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

.section--ink :focus-visible,
.story :focus-visible,
.cta-band :focus-visible {
  outline-color: var(--color-mustard);
}

/* grid.css */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: calc(var(--container-narrow) + var(--gutter) * 2);
}

.container--wide {
  max-width: 1920px;
}

.section {
  padding-block: var(--section-y);
}

.section--tight {
  padding-block: calc(var(--section-y) * 0.6);
}

.section--ink {
  background: var(--color-ink);
  color: var(--color-surface);
}

.section--ink h1,
.section--ink h2,
.section--ink h3,
.section--ink h4 {
  color: var(--color-surface);
}

.section--cream {
  background: var(--color-cream);
}

.section--shell {
  background: var(--color-shell);
}

.grid {
  display: grid;
  gap: var(--space-6);
}

.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Auto-fitting grid for card lists — collapses without media queries. */
.grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.grid-auto-sm {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

/* Split layouts (image beside copy) */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--space-6), 4vw, var(--space-10));
  align-items: center;
}

.split--top {
  align-items: start;
}

.split--reverse > :first-child {
  order: 2;
}

.stack {
  display: flex;
  flex-direction: column;
}

.stack-2 { gap: var(--space-2); }
.stack-3 { gap: var(--space-3); }
.stack-4 { gap: var(--space-4); }
.stack-5 { gap: var(--space-5); }
.stack-6 { gap: var(--space-6); }

.row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.row--between {
  justify-content: space-between;
}

.row--end {
  justify-content: flex-end;
}

/* buttons.css */
/* Buttons — full pills, solid fills, a small lift on hover.
   No gradients and no border on the primary action: the colour does the work. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--fs-15);
  font-weight: 600;
  line-height: 1;
  padding: 1.05rem 1.85rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); }

.btn__icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  transition: transform var(--dur) var(--ease);
}

.btn:hover .btn__icon { transform: translateX(4px); }

.btn--primary { background: var(--color-accent-dark); color: #fff; }
.btn--primary:hover { background: var(--color-ink); }

.btn--ink { background: var(--color-ink); color: var(--color-shell); }
.btn--ink:hover { background: var(--color-accent-dark); color: #fff; }

.btn--outline {
  border-color: var(--color-ink);
  color: var(--color-ink);
  background: transparent;
}
.btn--outline:hover { background: var(--color-ink); color: var(--color-shell); }

.btn--light { background: var(--color-shell); color: var(--color-ink); }
.btn--light:hover { background: var(--color-mustard); color: var(--color-ink); }

.btn--outline-light {
  border-color: rgba(253, 247, 238, 0.55);
  color: var(--color-shell);
  background: transparent;
}
.btn--outline-light:hover {
  background: var(--color-shell);
  color: var(--color-ink);
  border-color: var(--color-shell);
}

.btn--sm { padding: 0.7rem 1.25rem; font-size: var(--fs-14); }

.btn--block { display: flex; width: 100%; }

.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ---- Circular icon button (carousel rails) ---- */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  border: 1.5px solid var(--color-ink);
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}

.icon-btn svg { width: 1.15rem; height: 1.15rem; }
.icon-btn:hover:not([disabled]) { background: var(--color-ink); color: var(--color-shell); }
.icon-btn[disabled] { opacity: 0.28; cursor: default; }

/* ---- Inline arrow link ---- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--color-accent-text);
  text-decoration: none;
}

.link-arrow svg {
  width: 1.1em;
  height: 1.1em;
  transition: transform var(--dur) var(--ease);
}

.link-arrow:hover svg,
.card:hover .link-arrow svg { transform: translateX(5px); }

/* ---- Floating buttons ---- */
.whatsapp-float {
  position: fixed;
  right: var(--space-6);
  bottom: calc(var(--space-6) + var(--cookie-h, 0px));
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  width: 3.55rem;
  height: 3.55rem;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.4);
  transition: transform var(--dur) var(--ease), bottom var(--dur) var(--ease);
}

.whatsapp-float svg { width: 1.85rem; height: 1.85rem; }
.whatsapp-float:hover { transform: scale(1.07); }

@media (prefers-reduced-motion: no-preference) {
  .whatsapp-float { animation: wa-pulse 2.6s ease-out infinite; }
  @keyframes wa-pulse {
    0% { box-shadow: 0 10px 26px rgba(37, 211, 102, 0.4), 0 0 0 0 rgba(37, 211, 102, 0.5); }
    70% { box-shadow: 0 10px 26px rgba(37, 211, 102, 0.4), 0 0 0 18px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 10px 26px rgba(37, 211, 102, 0.4), 0 0 0 0 rgba(37, 211, 102, 0); }
  }
}

/* Sits above the WhatsApp button so the two never overlap. */
.back-to-top {
  position: fixed;
  right: var(--space-6);
  bottom: calc(var(--space-6) + 70px + var(--cookie-h, 0px));
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1.5px solid var(--color-ink);
  background: var(--color-shell);
  color: var(--color-ink);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    visibility var(--dur),
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    bottom var(--dur) var(--ease);
}

.back-to-top svg { width: 1.15rem; height: 1.15rem; }
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: var(--color-ink); color: var(--color-shell); }

/* ---- Cookie bar ----
   z-index matches the floating buttons so it never sits underneath them. */
.cookie-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-6);
  background: var(--color-ink);
  color: var(--color-shell);
}

.cookie-bar.is-visible { display: flex; }

.cookie-bar p {
  font-size: var(--fs-14);
  max-width: 72ch;
  color: rgba(253, 247, 238, 0.82);
}

/* header.css */
/* Header — a floating rounded bar rather than a full-width band.
   It sits inside the page gutter and reads as an object on the cream ground. */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-fixed);
  padding-top: var(--space-3);
  padding-bottom: var(--space-2);
  transition: padding var(--dur) var(--ease);
}

/* The frosted bar is drawn on a pseudo-element, not on .header__inner itself.
   backdrop-filter makes an element the containing block for its position:fixed
   descendants, which would trap the mobile drawer inside the header bar. */
.header__inner {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0.6rem 0.6rem 0.6rem 1.4rem;
}

.header__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(253, 247, 238, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  transition:
    background-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.site-header.is-stuck { padding-top: var(--space-2); }
.site-header.is-stuck .header__inner::before {
  background: rgba(253, 247, 238, 0.96);
  box-shadow: var(--shadow-md);
}

/* While the drawer is open the header must outrank the floating WhatsApp and
   back-to-top buttons, which sit at --z-modal on the root stacking context. */
.site-header:has(.nav.is-open) { z-index: calc(var(--z-modal) + 10); }

/* ---- Brand ---- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-ink);
  flex: none;
}

.brand__mark {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  flex: none;
}

.brand__mark svg { width: 1.05rem; height: 1.15rem; }

.brand__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.brand__tagline {
  display: block;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-muted-text);
  margin-top: 1px;
}

/* ---- Primary navigation ---- */
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.9vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  position: relative;
  display: inline-block;
  font-size: var(--fs-15);
  font-weight: 500;
  color: var(--color-text-soft);
  text-decoration: none;
  padding-block: 0.35rem;
  transition: color var(--dur) var(--ease);
  white-space: nowrap;
}

.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--color-ink); }

/* A short persimmon underline, drawn from the centre out. */
.nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--color-accent);
  transform: translateX(-50%);
  transition: width var(--dur) var(--ease);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after { width: 100%; }

/* ---- Header right-hand side ---- */
.header__cta { flex: none; }

/* The contact meta row is redundant beside the CTA at this width — it lives in
   the mobile drawer and the footer instead. */
.header__meta { display: none; }

.header__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-15);
  color: var(--color-text-soft);
  text-decoration: none;
}

.header__meta-item svg {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--color-accent);
  flex: none;
}

.nav__mobile-extra { display: none; }

/* ---- Mobile toggle ---- */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  border: 0;
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-shell);
  cursor: pointer;
  flex: none;
}

.nav-toggle svg { width: 1.25rem; height: 1.25rem; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }
  .header__cta { display: none; }

  /* The drawer is fixed and full-screen, so the bar contents must be lifted
     above it or the close button ends up underneath the panel it closes. */
  .brand,
  .nav-toggle {
    position: relative;
    z-index: calc(var(--z-fixed) + 1);
  }

  .nav {
    position: fixed;
    inset: 0;
    z-index: var(--z-fixed);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-8);
    padding: var(--space-10) var(--gutter);
    background: var(--color-shell);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.4s var(--ease), visibility 0.4s;
    overflow-y: auto;
  }

  .nav.is-open { transform: none; visibility: visible; }

  .nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .nav__link {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.75rem, 7vw, 2.75rem);
    letter-spacing: var(--track-display);
    color: var(--color-ink);
  }

  .nav__mobile-extra {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-line);
  }
}

/* footer.css */
/* Footer — light rather than a dark slab, closing the page on the same cream
   ground it opened on. The oversized wordmark does the anchoring instead. */

.site-footer {
  background: var(--color-shell);
  color: var(--color-text-soft);
  border-top: 1px solid var(--color-line);
  padding-top: clamp(var(--space-8), 5vw, var(--space-10));
  padding-bottom: var(--space-6);
}

.footer__top {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.15fr;
  gap: clamp(var(--space-6), 3vw, var(--space-8));
  padding-bottom: clamp(var(--space-8), 4vw, var(--space-9));
}

.footer__brand { max-width: 40ch; }

.footer__logo {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 4vw, 3.6rem);
  line-height: 0.9;
  letter-spacing: var(--track-display);
  color: var(--color-ink);
  text-decoration: none;
  max-width: 11ch;
}

.footer__logo:hover { color: var(--color-accent); }

.footer__about {
  margin-top: var(--space-5);
  font-size: var(--fs-15);
  line-height: 1.65;
  color: var(--color-text-soft);
}

.footer__social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.footer__social a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1.5px solid var(--color-line);
  color: var(--color-ink);
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.footer__social a svg { width: 1.15rem; height: 1.15rem; }

.footer__social a:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: #fff;
  transform: translateY(-3px);
}

.footer__heading {
  font-family: var(--font-ui);
  font-size: var(--fs-12);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--color-accent-text);
  margin-bottom: var(--space-5);
}

.footer__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0;
  margin: 0;
}

.footer__list a {
  color: var(--color-text-soft);
  text-decoration: none;
  font-size: var(--fs-15);
  transition: color var(--dur) var(--ease);
}

.footer__list a:hover { color: var(--color-accent-text); }

.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-15);
  color: var(--color-text-soft);
  text-decoration: none;
}

.footer__contact-item svg {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  margin-top: 0.25em;
  color: var(--color-accent);
}

.footer__divider {
  border: 0;
  border-top: 1px solid var(--color-line);
  margin: 0;
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding-top: var(--space-5);
  font-size: var(--fs-14);
  color: var(--color-muted-text);
}

.footer__bottom-links {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.footer__bottom-links a {
  color: var(--color-muted-text);
  text-decoration: none;
}

.footer__bottom-links a:hover { color: var(--color-accent-text); }

/* cards.css */
/* ---- Generic media card (services, projects, blog) ----
   A rounded panel with the photograph filling the top. The lift on hover is
   the same 3px used by the buttons so the page has one motion vocabulary. */

.card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--color-cream);
}

.card__media--tall { aspect-ratio: 4 / 5; }

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}

.card:hover .card__media img { transform: scale(1.05); }

.card__tag {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 2;
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  background: var(--color-mustard);
  color: var(--color-ink);
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-pill);
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: clamp(var(--space-5), 2vw, var(--space-6));
  flex: 1;
}

.card__meta {
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-muted-text);
}

.card__title {
  font-size: var(--fs-25);
  font-weight: 600;
  line-height: 1.05;
  transition: color var(--dur) var(--ease);
}

.card:hover .card__title { color: var(--color-accent-text); }

.card__text {
  font-size: var(--fs-15);
  color: var(--color-text-soft);
  flex: 1;
}

.card__body .link-arrow { margin-top: var(--space-2); }

/* ---- Feature (icon + title + text) ---- */
.feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.feature__icon {
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: var(--radius-md);
  background: var(--color-cream);
  color: var(--color-accent-text);
  flex: none;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.feature__icon svg { width: 1.5rem; height: 1.5rem; }

.feature:hover .feature__icon {
  background: var(--color-accent);
  color: #fff;
}

.feature__icon--sm {
  width: 2.9rem;
  height: 2.9rem;
  border-radius: var(--radius-sm);
}

.feature__icon--sm svg { width: 1.2rem; height: 1.2rem; }

.feature__title {
  font-size: var(--fs-25);
  font-weight: 600;
  line-height: 1.1;
}

.feature__text {
  font-size: var(--fs-15);
  color: var(--color-text-soft);
}

/* ---- Numbered process step ---- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--space-5), 2.5vw, var(--space-8));
}

.step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 2px solid var(--color-line);
  counter-increment: step;
  transition: border-color var(--dur) var(--ease);
}

.step:hover { border-top-color: var(--color-accent); }

.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-35);
  line-height: 1;
  letter-spacing: var(--track-display);
  color: var(--color-accent);
}

.steps { counter-reset: step; }

.step__title { font-size: var(--fs-25); font-weight: 600; line-height: 1.1; }
.step__text { font-size: var(--fs-15); color: var(--color-text-soft); }

/* ---- Pricing / formula panel ---- */
.plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: clamp(var(--space-6), 2.6vw, var(--space-8));
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.plan:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }

/* The featured formula is a solid ink block — the one place on the page where
   a card inverts. */
.plan--featured {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-shell);
}

.plan--featured .plan__name,
.plan--featured .plan__price strong { color: var(--color-shell); }
.plan--featured .plan__divider { border-color: rgba(253, 247, 238, 0.2); }
.plan--featured .plan__features li { color: rgba(253, 247, 238, 0.82); }
.plan--featured .plan__features svg { color: var(--color-mustard); }
.plan--featured .plan__price { color: rgba(253, 247, 238, 0.65); }

.plan__name { font-size: var(--fs-35); font-weight: 600; line-height: 1; }

.plan__divider {
  border: 0;
  border-top: 1px solid var(--color-line);
  margin: 0;
}

.plan__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0;
  margin: 0;
  flex: 1;
}

.plan__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-15);
  color: var(--color-text-soft);
}

.plan__features svg {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  margin-top: 0.3em;
  color: var(--color-accent);
}

.plan__price {
  font-size: var(--fs-14);
  color: var(--color-muted-text);
}

.plan__price strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-30);
  letter-spacing: var(--track-display);
  color: var(--color-ink);
  margin-bottom: var(--space-1);
}

/* ---- Stat ---- */
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: clamp(var(--space-5), 2.4vw, var(--space-7));
  border: 1.5px solid var(--color-ink);
  border-radius: var(--radius-lg);
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.stat:hover {
  background: var(--color-ink);
  color: var(--color-shell);
  transform: translateY(-6px);
}

.stat__value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-40);
  line-height: 0.95;
  letter-spacing: var(--track-display);
}

.stat__label { font-size: var(--fs-15); color: var(--color-text-soft); }
.stat:hover .stat__label { color: rgba(253, 247, 238, 0.75); }

/* ---- Gallery item ---- */
.gallery__item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  text-decoration: none;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}

.gallery__item:hover img { transform: scale(1.06); }

.gallery__caption {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  right: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
  max-width: calc(100% - var(--space-8));
  background: rgba(253, 247, 238, 0.95);
  color: var(--color-ink);
  border-radius: var(--radius-pill);
  padding: 0.6rem 1.1rem;
  font-size: var(--fs-14);
  font-weight: 600;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.gallery__item:hover .gallery__caption,
.gallery__item:focus-visible .gallery__caption {
  opacity: 1;
  transform: none;
}

/* Touch devices have no hover — keep captions visible there. */
@media (hover: none) {
  .gallery__caption { opacity: 1; transform: none; }
}

/* accordion.css */
/* Accordion — a plain ruled list with a rotating plus. Built on <details> so it
   works without JS and stays keyboard-operable. */

.accordion {
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--color-ink);
}

.accordion__item {
  border-bottom: 1px solid var(--color-line);
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  width: 100%;
  padding: clamp(var(--space-5), 2.4vw, var(--space-7)) 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 2vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: var(--track-display);
  color: var(--color-ink);
  transition: color var(--dur) var(--ease);
  list-style: none;
}

.accordion__trigger::-webkit-details-marker { display: none; }
.accordion__trigger:hover { color: var(--color-accent-text); }

.accordion__icon {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--color-ink);
  color: var(--color-ink);
  transition:
    transform var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.accordion__icon svg { width: 1rem; height: 1rem; }

.accordion__item[open] .accordion__icon {
  transform: rotate(45deg);
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: #fff;
}

.accordion__panel {
  padding-bottom: clamp(var(--space-5), 2.4vw, var(--space-6));
  max-width: 74ch;
  color: var(--color-text-soft);
  font-size: var(--fs-16);
}

@media (prefers-reduced-motion: no-preference) {
  .accordion__item[open] .accordion__panel {
    animation: accordion-open 0.4s var(--ease);
  }

  @keyframes accordion-open {
    from { opacity: 0; transform: translateY(-8px); }
  }
}

/* forms.css */
/* Forms — soft rounded fields on the cream ground, persimmon focus ring. */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field--full { grid-column: 1 / -1; }

/* Honeypot — visually gone but still submitted, so bots fill it and humans
   never see it. Not display:none, which some bots skip. */
.field--honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field__label {
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--color-ink);
}

.field__required { color: var(--color-accent-text); }

.input,
.textarea,
.select {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-16);
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 0.95rem 1.15rem;
  transition:
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.textarea {
  min-height: 11rem;
  resize: vertical;
  line-height: 1.6;
}

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23191512' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  background-size: 1.05rem;
  padding-right: 2.8rem;
}

.input::placeholder,
.textarea::placeholder { color: var(--color-muted-text); opacity: 0.7; }

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(222, 85, 40, 0.18);
}

.form__note {
  font-size: var(--fs-14);
  color: var(--color-muted-text);
}

.form__status {
  display: none;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--fs-15);
}

.form__status.is-visible { display: block; }

.form__status--success {
  background: rgba(126, 143, 110, 0.16);
  color: #3d4a33;
  border: 1px solid rgba(126, 143, 110, 0.4);
}

.form__status--error {
  background: rgba(222, 85, 40, 0.12);
  color: var(--color-accent-dark);
  border: 1px solid rgba(222, 85, 40, 0.35);
}

/* sections.css */
/* ============================================================
   Hero — a tag, an oversized headline, then a band made of one
   large photograph beside two stacked colour cards.
   ============================================================ */

.hero {
  padding-top: clamp(var(--space-5), 3vw, var(--space-8));
  padding-bottom: clamp(var(--space-8), 5vw, var(--space-10));
}

.hero__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.hero__intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.hero__title {
  font-size: var(--fs-hero);
  font-weight: 600;
  line-height: 0.86;
  letter-spacing: -0.05em;
  max-width: 18ch;
  text-wrap: balance;
}

/* The phrase picked out of the headline. Persimmon, same weight and size —
   a colour change only, so the line stays one continuous piece of typography. */
.hero__title .accent-fill {
  color: var(--color-accent);
  font-style: normal;
  font-size: inherit;
  font-family: inherit;
  letter-spacing: inherit;
}

/* Copy and actions share a row under the photo band: the paragraph explains,
   the buttons act, and neither pushes the headline down the page. */
.hero__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(var(--space-5), 3vw, var(--space-9));
  flex-wrap: wrap;
  margin-top: clamp(var(--space-6), 3vw, var(--space-8));
}

.hero__text {
  font-size: var(--fs-17);
  color: var(--color-text-soft);
  max-width: 54ch;
}

.hero__band {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr);
  gap: clamp(var(--space-4), 1.6vw, var(--space-5));
  margin-top: clamp(var(--space-6), 3vw, var(--space-8));
}

.hero__panel {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-cream);
}

.hero__panel img {
  width: 100%;
  height: 100%;
  min-height: clamp(280px, 42vw, 560px);
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}

.hero__panel:hover img { transform: scale(1.035); }

.hero__side {
  display: grid;
  gap: clamp(var(--space-4), 1.6vw, var(--space-5));
}

.hero__card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space-4);
  padding: clamp(var(--space-5), 2.2vw, var(--space-7));
  border-radius: var(--radius-xl);
  min-height: 9rem;
}

.hero__card--ink { background: var(--color-ink); color: var(--color-shell); }
.hero__card--sage { background: var(--color-sage); color: var(--color-ink); }

.hero__card b {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.9rem);
  line-height: 0.95;
  letter-spacing: var(--track-display);
}

.hero__card p { font-size: var(--fs-15); opacity: 0.86; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  flex: none;
}

/* Hotspot pills over the hero photograph — they name what the client is
   actually looking at, which a caption underneath cannot do. */
.hotspot {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-pill);
  background: rgba(253, 247, 238, 0.94);
  color: var(--color-ink);
  font-size: var(--fs-12);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

.hotspot__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-accent);
  flex: none;
}

@media (prefers-reduced-motion: no-preference) {
  .hotspot { animation: rise 0.7s var(--ease) backwards; }
}

/* ---- Stat row under the hero ---- */
.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--space-4), 1.6vw, var(--space-5));
  margin-top: clamp(var(--space-6), 3vw, var(--space-8));
}

/* ============================================================
   Sticky card stack — the six services on the homepage.
   Each card sticks a little lower than the last, so they pile
   up as the page scrolls instead of scrolling past.
   ============================================================ */

.stack-cards {
  display: grid;
  gap: clamp(var(--space-4), 1.6vw, var(--space-5));
}

.stack-card {
  position: sticky;
  top: calc(6rem + var(--n, 0) * 1rem);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(var(--space-4), 2.4vw, var(--space-7));
  align-items: center;
  padding: clamp(var(--space-6), 3.2vw, var(--space-9));
  border-radius: var(--radius-xl);
  text-decoration: none;
  color: inherit;
  box-shadow: 0 -6px 40px -18px rgba(25, 21, 18, 0.28);
}

.stack-card__n {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 4vw, 3.9rem);
  line-height: 1;
  letter-spacing: -0.05em;
  opacity: 0.34;
}

.stack-card__title {
  font-size: clamp(1.5rem, 3.1vw, 3rem);
  font-weight: 600;
  line-height: 1;
  margin-bottom: var(--space-3);
  color: inherit;
}

.stack-card__text {
  font-size: var(--fs-16);
  opacity: 0.82;
}

.stack-card__media {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.stack-card__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}

.stack-card:hover .stack-card__media img { transform: scale(1.05); }

.stack-card .link-arrow { margin-top: var(--space-4); color: inherit; }

/* Six fixed colourways, cycling cream → mustard → sage → persimmon → forest →
   ink. The order is deliberate: it darkens as you scroll. */
.stack-card:nth-child(1) { background: var(--color-cream); }
.stack-card:nth-child(2) { background: var(--color-mustard); }
.stack-card:nth-child(3) { background: var(--color-sage); color: var(--color-ink); }
.stack-card:nth-child(4) { background: var(--color-accent-dark); color: #fff; }
.stack-card:nth-child(5) { background: var(--color-forest); color: var(--color-shell); }
.stack-card:nth-child(6) { background: var(--color-ink); color: var(--color-shell); }

.stack-card:nth-child(1) .stack-card__title,
.stack-card:nth-child(2) .stack-card__title,
.stack-card:nth-child(3) .stack-card__title { color: var(--color-ink); }

/* ============================================================
   Story block — the expertise section, as one dark rounded panel
   split between copy and a full-bleed photograph.
   ============================================================ */

.story {
  background: var(--color-forest);
  color: var(--color-shell);
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

.story__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.story__copy { padding: clamp(var(--space-6), 4vw, var(--space-11)); }

.story__copy h2,
.story__copy h3 { color: var(--color-shell); }

.story__copy .section-title { margin-bottom: var(--space-5); max-width: 14ch; }

.story__copy p { color: rgba(253, 247, 238, 0.76); }

.story__copy .accent-italic { color: var(--color-mustard); }

.story__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0;
  margin: var(--space-6) 0;
}

.story__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-16);
  color: rgba(253, 247, 238, 0.88);
}

.story__list li::before {
  content: "→";
  color: var(--color-mustard);
  font-weight: 600;
}

.story__media img {
  width: 100%;
  height: 100%;
  min-height: 22rem;
  object-fit: cover;
}

/* Feature icons sitting on the dark panel need to invert. */
.story .feature__icon {
  background: rgba(253, 247, 238, 0.12);
  color: var(--color-mustard);
}

.story .feature__title { color: var(--color-shell); }
.section--ink .feature__icon { background: rgba(253, 247, 238, 0.12); color: var(--color-mustard); }
.section--ink .feature__title { color: var(--color-shell); }
.section--ink .feature__text { color: rgba(253, 247, 238, 0.72); }
.story .feature__text { color: rgba(253, 247, 238, 0.7); }

/* ---- Dark section (process) ---- */
.section--ink {
  background: var(--color-ink);
  color: var(--color-shell);
}

.section--ink h1,
.section--ink h2,
.section--ink h3,
.section--ink h4 { color: var(--color-shell); }

.section--ink p { color: rgba(253, 247, 238, 0.75); }
.section--ink .step { border-top-color: rgba(253, 247, 238, 0.22); }
.section--ink .step:hover { border-top-color: var(--color-mustard); }
.section--ink .step::before { color: var(--color-mustard); }
.section--ink .step__title { color: var(--color-shell); }
.section--ink .step__text { color: rgba(253, 247, 238, 0.7); }

/* ============================================================
   Carousel rail (projects)
   ============================================================ */

.rail {
  display: flex;
  gap: clamp(var(--space-4), 1.6vw, var(--space-5));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--space-2);
}

.rail::-webkit-scrollbar { display: none; }

.rail > * {
  flex: 0 0 clamp(255px, 27vw, 380px);
  scroll-snap-align: start;
}

/* ============================================================
   Before / after comparison
   ============================================================ */

.before-after {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  --pos: 50%;
}

.before-after img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.before-after__after { clip-path: inset(0 0 0 var(--pos)); }

.before-after__label {
  position: absolute;
  bottom: var(--space-5);
  z-index: 3;
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  background: rgba(253, 247, 238, 0.94);
  color: var(--color-ink);
}

.before-after__label--before { left: var(--space-5); }
.before-after__label--after {
  right: var(--space-5);
  background: var(--color-accent-dark);
  color: #fff;
}

.before-after__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 3px;
  margin-left: -1.5px;
  background: var(--color-shell);
  z-index: 3;
  pointer-events: none;
}

.before-after__grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: var(--color-shell);
  color: var(--color-ink);
  box-shadow: var(--shadow-md);
}

.before-after__grip svg { width: 1.3rem; height: 1.3rem; }

/* The range input is the actual control — kept full-size and transparent over
   the image so it stays keyboard- and touch-operable. */
.before-after__range {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

.before-after__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 3.4rem;
  height: 100%;
  cursor: ew-resize;
}

.before-after__range::-moz-range-thumb {
  width: 3.4rem;
  height: 100%;
  border: 0;
  background: transparent;
  cursor: ew-resize;
}

.before-after__range:focus-visible + * { outline: none; }
.before-after:focus-within { outline: 3px solid var(--color-accent); outline-offset: 3px; }

/* ============================================================
   CTA band
   ============================================================ */

.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background: var(--color-accent-dark);
  color: #fff;
  padding: clamp(var(--space-7), 5vw, var(--space-11)) clamp(var(--space-5), 4vw, var(--space-10));
}

/* A mustard bloom, not a photograph — the flat colour is the point. */
.cta-band::before {
  content: "";
  position: absolute;
  width: 760px;
  height: 760px;
  border-radius: 50%;
  top: -46%;
  left: -14%;
  background: radial-gradient(circle, rgba(231, 178, 60, 0.5), transparent 66%);
  pointer-events: none;
}

.cta-band__bg { display: none; }

.cta-band__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.cta-band h2 {
  color: #fff;
  font-size: var(--fs-50);
  max-width: 14ch;
}

.cta-band p {
  color: rgba(255, 255, 255, 0.88);
  max-width: 48ch;
  margin-top: var(--space-5);
}

/* ============================================================
   Appointment block
   ============================================================ */

.appointment {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background: var(--color-ink);
  color: var(--color-shell);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(var(--space-6), 4vw, var(--space-9));
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  align-items: center;
}

/* The photograph sits behind the copy at low opacity so the block still reads
   as a flat colour field rather than a photo card. */
.appointment__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.18;
  z-index: 0;
}

.appointment__copy { position: relative; z-index: 2; }
.appointment__copy h2 { color: var(--color-shell); }
.appointment__copy .section-title { margin-bottom: var(--space-5); }
.appointment__copy p { color: rgba(253, 247, 238, 0.8); }
.appointment__copy .text-small { color: rgba(253, 247, 238, 0.62); }

.appointment__card {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: clamp(var(--space-5), 2.6vw, var(--space-7));
  border-radius: var(--radius-lg);
  background: rgba(253, 247, 238, 0.08);
  border: 1px solid rgba(253, 247, 238, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.appointment__card h3 { color: var(--color-shell); font-size: var(--fs-30); }
.appointment__card p { color: rgba(253, 247, 238, 0.78); }
.appointment__card a { color: var(--color-shell); text-decoration: underline; }
.appointment__card hr {
  border: 0;
  border-top: 1px solid rgba(253, 247, 238, 0.18);
  margin: 0;
}

/* ============================================================
   Inner page header
   ============================================================ */

.page-header {
  position: relative;
  padding-top: clamp(var(--space-6), 3vw, var(--space-8));
  padding-bottom: clamp(var(--space-7), 4vw, var(--space-9));
}

.page-header__title {
  font-size: var(--fs-50);
  font-weight: 600;
  max-width: 18ch;
  margin-top: var(--space-5);
}

.page-header__text {
  margin-top: var(--space-5);
  max-width: 60ch;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--fs-14);
  color: var(--color-muted-text);
}

.breadcrumb li { display: flex; align-items: center; gap: var(--space-2); }

.breadcrumb li + li::before {
  content: "/";
  color: var(--color-line);
}

.breadcrumb a { color: var(--color-muted-text); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-accent-text); }
.breadcrumb [aria-current="page"] { color: var(--color-ink); font-weight: 600; }

/* ============================================================
   Gallery grid
   ============================================================ */

.gallery {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(var(--space-3), 1.4vw, var(--space-5));
}

.gallery__item { grid-column: span 2; aspect-ratio: 1 / 1; }
.gallery__item:nth-child(6n + 1) { grid-column: span 4; aspect-ratio: 16 / 9; }
.gallery__item:nth-child(6n + 2) { grid-column: span 2; aspect-ratio: 4 / 4.6; }

/* ============================================================
   404
   ============================================================ */

.error-page {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-5);
}

.error-page__code {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(6rem, 22vw, 18rem);
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: var(--color-accent);
}

/* ---- Skip link ---- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--color-ink);
  color: var(--color-shell);
  padding: var(--space-4) var(--space-5);
  border-radius: 0 0 var(--radius-md) 0;
}

.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.no-orphan { white-space: nowrap; }

/* responsive.css */
/* The layout scales through clamp() and auto-fit grids; these breakpoints
   handle the structural collapses that cannot be expressed that way. */

@media (max-width: 1200px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .hero__title { max-width: 100%; }
}

@media (max-width: 1080px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .hero__band { grid-template-columns: 1fr; }
  .hero__side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__stats { grid-template-columns: 1fr; }

  .story__inner { grid-template-columns: 1fr; }
  .story__media { order: -1; }
  .story__media img { min-height: 16rem; max-height: 24rem; }

  .appointment { grid-template-columns: 1fr; }

  .split { grid-template-columns: 1fr; }
  .split--reverse > :first-child { order: 0; }

  .grid-3,
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* The stack stops being a stack — sticky offsets have nowhere to go on a
     short viewport, so the cards simply follow one another. */
  .stack-card {
    position: static;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-5);
    box-shadow: none;
  }

  .stack-card__media { grid-column: 1 / -1; order: -1; }
}

/* Hotspot pills are anchored by percentage, so on a narrow image they run past
   the edge. They are an enhancement, not content — drop them rather than
   reflow them into something unreadable. */
@media (max-width: 900px) {
  .hotspot--hide-sm { display: none; }
}

@media (max-width: 640px) {
  .hotspot { display: none; }
}

@media (max-width: 820px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery__item,
  .gallery__item:nth-child(6n + 1),
  .gallery__item:nth-child(6n + 2) {
    grid-column: span 1;
    aspect-ratio: 4 / 3;
  }

  .cta-band__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 720px) {
  .hero__foot { flex-direction: column; align-items: stretch; }
  .form__grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr; }

  .footer__top { grid-template-columns: 1fr; }

  .hero__side { grid-template-columns: 1fr; }

  .before-after { aspect-ratio: 4 / 3; }

  .stack-card { grid-template-columns: 1fr; }
  .stack-card__n { font-size: 2rem; }

  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .whatsapp-float,
  .back-to-top { right: var(--space-4); }
  .whatsapp-float { bottom: calc(var(--space-4) + var(--cookie-h, 0px)); }
  .back-to-top { bottom: calc(var(--space-4) + 66px + var(--cookie-h, 0px)); }

  .btn { padding: 0.95rem 1.5rem; }
  .page-header__title { max-width: 100%; }
}

/* Long-form pages keep a comfortable measure regardless of viewport. */
@media (min-width: 1400px) {
  .prose { max-width: 74ch; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .marquee { transform: none; }
}

/* utilities.css */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-accent { color: var(--color-accent); }
.text-muted { color: var(--color-muted); }
.text-soft { color: var(--color-text-soft); }
.text-white { color: var(--color-surface); }

.bg-ink { background: var(--color-ink); color: var(--color-surface); }
.bg-cream { background: var(--color-cream); }
.bg-shell { background: var(--color-shell); }

.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.mx-auto { margin-inline: auto; }

.w-full { width: 100%; }
.max-60 { max-width: 60ch; }
.max-70 { max-width: 70ch; }

.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }

.shadow-md { box-shadow: var(--shadow-md); }

.flex-1 { flex: 1; }
.no-wrap { white-space: nowrap; }

.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ratio-4-3 { aspect-ratio: 4 / 3; }
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-3-4 { aspect-ratio: 3 / 4; }
.ratio-1-1 { aspect-ratio: 1 / 1; }