/* ================================================================
   ViaLedger
   Page colour sampled from the logo (#f6eeea). DM Serif Display only
   in display moments; Outfit does the readable work everywhere else.
   ================================================================ */

/* Self-hosted fonts. See /fonts/ directory; no third-party requests. */

@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('DM Serif Display'),
       url('/fonts/dmserifdisplay-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('DM Serif Display'),
       url('/fonts/dmserifdisplay-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('DM Serif Display Italic'), local('DM Serif Display'),
       url('/fonts/dmserifdisplay-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('DM Serif Display Italic'), local('DM Serif Display'),
       url('/fonts/dmserifdisplay-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: local('Outfit'),
       url('/fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: local('Outfit'),
       url('/fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --blush:        #f6eeea;
  --blush-deep:   #ece0d7;
  --blush-pale:   #fbf6f3;
  --ink:          #1a1715;
  --ink-soft:     #4a423d;
  --ink-faded:    #8a8077;
  --bronze:       #9c7340;
  --rule:         rgba(26, 23, 21, 0.10);
  --rule-strong:  rgba(26, 23, 21, 0.22);

  --font-display: 'DM Serif Display', 'Didot', Georgia, serif;
  --font-body:    'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --header-h:     116px;
  --container-w:  1320px;
  --reading-w:    680px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--blush);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* OpenType: kerning, common ligatures, contextual alternates,
     proportional figures for readable prose. */
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'pnum' 1;
  font-kerning: normal;
}

/* Tabular figures wherever digits should align in a column or read as a
   number rather than as part of a word — phone numbers, prices, the
   wizard step counter, the Roman numerals' fallback digits. */
.tabular-nums,
.footer-phone a,
.contact-phones a,
.step-counter {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'kern' 1, 'liga' 1, 'tnum' 1, 'lnum' 1;
}

img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }
button { font: inherit; }

::selection { background: var(--ink); color: var(--blush); }

/* Skip-to-content link — visible only when focused via keyboard. */
.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -120%);
  z-index: 10000;
  background: var(--ink);
  color: var(--blush);
  padding: 0.7rem 1.1rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: 0 0 6px 6px;
  transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translate(-50%, 0);
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------
   Typography — display serif kept tight; sans does most of the work
   ---------------------------------------------------------------- */

h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  line-height: 1.08;
  letter-spacing: -0.014em;
  /* Display headings get tighter kerning and the slow but high-quality
     legibility pass. Body text sticks with the default for performance. */
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1, 'dlig' 1, 'calt' 1;
}

h1 {
  font-size: clamp(2.8rem, 6.4vw, 5.6rem);
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h2 {
  font-size: clamp(2.2rem, 4.8vw, 3.7rem);
  letter-spacing: -0.018em;
}

h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  margin: 0;
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--ink);
}

h4 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.15rem;
  margin: 0;
  letter-spacing: -0.005em;
  color: var(--ink);
}

h5 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0;
}

p { margin: 0 0 1em; }

/* ----------------------------------------------------------------
   Layout
   ---------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
}

.reading { max-width: var(--reading-w); margin: 0 auto; }

.center { text-align: center; }

/* ----------------------------------------------------------------
   Header
   ---------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--header-h);
  background: rgba(246, 238, 234, 0.78);
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  transition: background 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}

@media (max-width: 880px) {
  :root { --header-h: 100px; }
}

@media (max-width: 480px) {
  :root { --header-h: 88px; }
}

.site-header.scrolled {
  background: rgba(246, 238, 234, 0.94);
  border-bottom-color: var(--rule);
}

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.brand-logo {
  display: block;
  height: 92px;
  width: auto;
  object-fit: contain;
  user-select: none;
}

@media (max-width: 880px) {
  .brand-logo { height: 76px; }
}

@media (max-width: 480px) {
  .brand-logo { height: 64px; }
}

.primary-nav {
  display: flex;
  gap: clamp(1.25rem, 2vw, 2.25rem);
}

.primary-nav a {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--ink-soft);
  padding: 8px 0;
  position: relative;
  transition: color 0.3s ease;
}

.primary-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 4px;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.primary-nav a:hover,
.primary-nav a.active { color: var(--ink); }

.primary-nav a:hover::after,
.primary-nav a.active::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  cursor: pointer;
  position: relative;
}

.nav-toggle span {
  position: absolute;
  left: 11px;
  right: 11px;
  height: 1.2px;
  background: var(--ink);
  transition: transform 0.35s ease, opacity 0.2s ease;
}

.nav-toggle span:nth-child(1) { top: 17px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 27px; }

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

/* The contact footer inside the mobile menu — hidden on desktop where the
   nav lives inline in the header bar. */
.primary-nav-foot { display: none; }

@media (max-width: 880px) {
  /* Drop backdrop-filter on mobile — it makes the header a containing block
     for fixed-positioned descendants in WebKit, which traps the open menu
     inside the header instead of letting it cover the viewport. */
  .site-header {
    background: var(--blush);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: var(--rule);
  }
  .site-header.scrolled { background: var(--blush); }

  .nav-toggle { display: block; }

  /* The mobile menu panel. Fades + lifts gently on open instead of the
     heavy curtain-slide it used to do — softer, matches the rest of the
     site's motion. The visibility toggle keeps tab focus out of the menu
     when it's closed. */
  .primary-nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: var(--blush);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 1.5rem clamp(1.5rem, 6vw, 3rem) 2rem;
    opacity: 0;
    transform: translateY(-8px) scale(0.99);
    transform-origin: 50% 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease,
                transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
                visibility 0s linear 0.3s;
    z-index: 25;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .primary-nav.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.3s ease,
                transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
                visibility 0s linear 0s;
  }

  /* Each menu link is its own row with a hairline below. The link reveals
     fade up sequentially so the menu unfolds rather than appears. */
  .primary-nav a {
    font-family: var(--font-display);
    font-size: clamp(1.95rem, 7vw, 2.4rem);
    color: var(--ink);
    font-weight: 400;
    letter-spacing: -0.012em;
    line-height: 1.1;
    padding: 0.85rem 0;
    width: 100%;
    border-bottom: 1px solid var(--rule);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8em;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
                transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
                color 0.2s ease;
  }

  .primary-nav.open > a,
  .primary-nav.open > .primary-nav-foot {
    opacity: 1;
    transform: none;
  }

  /* Cascade delays — 60ms steps so the whole reveal lands inside ~0.85s. */
  .primary-nav.open > a:nth-child(1) { transition-delay: 0.08s; }
  .primary-nav.open > a:nth-child(2) { transition-delay: 0.14s; }
  .primary-nav.open > a:nth-child(3) { transition-delay: 0.20s; }
  .primary-nav.open > a:nth-child(4) { transition-delay: 0.26s; }
  .primary-nav.open > a:nth-child(5) { transition-delay: 0.32s; }
  .primary-nav.open > a:nth-child(6) { transition-delay: 0.38s; }
  .primary-nav.open > .primary-nav-foot { transition-delay: 0.46s; }

  /* The last <a> direct child of the menu is "Contact" — strip its
     border so it doesn't double up with the contact-footer's top rule. */
  .primary-nav > a:last-of-type { border-bottom: 0; }

  /* The desktop hover-underline ::after is repurposed on mobile as the
     active-section diamond marker on the right of the row. */
  .primary-nav a::after {
    content: '';
    display: inline-block;
    position: static;
    width: 7px;
    height: 7px;
    background: var(--bronze);
    transform: rotate(45deg) scale(0);
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
    flex-shrink: 0;
    margin: 0;
  }

  .primary-nav a.active::after {
    transform: rotate(45deg) scale(1);
  }

  /* Tap feedback — quick bronze flash so the user sees the menu register
     their tap before it closes. */
  .primary-nav a:active {
    color: var(--bronze);
    transition: color 0.05s ease;
  }

  /* Contact footer — emails, phones, eyebrow. Becomes the bottom of the
     menu, doubling it up as a "get in touch" panel. */
  .primary-nav-foot {
    display: block;
    margin-top: auto;
    padding-top: 2.25rem;
    border-top: 1px solid var(--rule);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
                transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .primary-nav-eyebrow {
    margin: 0 0 0.85rem;
    font-family: var(--font-body);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bronze);
  }

  .primary-nav-foot a {
    /* Reset the headline-sized rule above. */
    display: block;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.55;
    color: var(--ink);
    border-bottom: 0;
    padding: 0;
    opacity: 1;
    transform: none;
    transition: color 0.2s ease;
  }
  .primary-nav-foot a::after { display: none; }

  .primary-nav-email {
    margin-bottom: 0.95rem;
    font-size: 1.08rem !important;
  }

  .primary-nav-phone {
    margin: 0.35rem 0;
    display: flex !important;
    align-items: baseline;
    justify-content: flex-start !important;
    gap: 0.7em;
    color: var(--ink-soft) !important;
  }

  .primary-nav-phone .country {
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bronze);
    font-weight: 500;
    width: 1.6rem;
    flex-shrink: 0;
  }

  /* Reduced-motion: collapse the cascade and just fade in. */
  @media (prefers-reduced-motion: reduce) {
    .primary-nav,
    .primary-nav > a,
    .primary-nav > .primary-nav-foot {
      transition: opacity 0.15s linear, visibility 0s linear !important;
      transform: none !important;
    }
    .primary-nav.open > a,
    .primary-nav.open > .primary-nav-foot {
      transition-delay: 0s !important;
    }
  }
}

/* ----------------------------------------------------------------
   Hero
   ---------------------------------------------------------------- */

.hero {
  min-height: clamp(560px, 80vh, 820px);
  display: flex;
  align-items: center;
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 5vw, 5rem);
  position: relative;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  width: 100%;
}

/* Source order has the figure first (so it can float-right on mobile),
   but on desktop the text belongs in the left column and the figure on the right. */
.hero-text   { grid-column: 1; grid-row: 1; max-width: 780px; }
.hero-figure { grid-column: 2; grid-row: 1; }

.hero-headline {
  margin: 0 0 1.6rem;
  text-wrap: balance;
}

.hero-sub {
  font-size: clamp(1.05rem, 1.45vw, 1.22rem);
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 0 0 2.4rem;
  line-height: 1.6;
  font-weight: 400;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 2rem;
}

.hero-foot {
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-faded);
  margin: 0;
  font-weight: 400;
}

.hero-figure {
  position: relative;
  justify-self: end;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.hero-figure img {
  display: block;
  width: auto;
  max-width: 60%;
  height: auto;
  max-height: clamp(360px, 58vh, 600px);
  user-select: none;
}

/* On mobile the figure is hidden — hero text owns the fold. */
@media (max-width: 880px) {
  .hero {
    min-height: auto;
    padding-top: clamp(1.5rem, 5vw, 2.5rem);
    padding-bottom: clamp(2.5rem, 6vw, 4rem);
  }
  .hero-grid {
    display: block;
    width: 100%;
  }
  .hero-figure { display: none; }
}

/* ----------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 1.05rem 1.85rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.35s ease,
              color 0.35s ease,
              border-color 0.35s ease,
              transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.25s ease;
  white-space: nowrap;
  will-change: transform;
}

.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.99); transition-duration: 0.06s; }

.btn::after {
  content: '→';
  font-size: 1.05em;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.btn:hover::after { transform: translateX(5px); }

/* The user-agent [hidden] rule has very low specificity, so the .btn
   display:inline-flex above wins. Re-assert it. */
.btn[hidden] { display: none; }

/* Wizard nav buttons use literal arrows in their text for direction
   control — suppress the automatic .btn::after so we don't double up. */
.wizard-back::after,
.wizard-next::after,
.wizard-submit::after { content: none; }

.btn-primary {
  background: var(--ink);
  color: var(--blush);
  border-color: var(--ink);
  box-shadow: 0 1px 0 rgba(26, 23, 21, 0.04);
}
.btn-primary:hover {
  background: transparent;
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(26, 23, 21, 0.10);
}

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-secondary:hover {
  background: var(--ink);
  color: var(--blush);
  box-shadow: 0 4px 14px rgba(26, 23, 21, 0.10);
}

/* ----------------------------------------------------------------
   Sections
   ---------------------------------------------------------------- */

.section {
  padding: clamp(5rem, 10vw, 9.5rem) 0;
  position: relative;
}

/* Soft fold between sections — a 48px gradient at the top edge of each
   section that blends into its background. Reads as a fold rather than
   a cut without adding any visible chrome. */
.section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: linear-gradient(to bottom,
              rgba(26, 23, 21, 0.025) 0%,
              rgba(26, 23, 21, 0) 100%);
  pointer-events: none;
}
.section:first-of-type::before { display: none; }

.section-deep {
  background: var(--blush-deep);
}
.section-deep::before {
  background: linear-gradient(to bottom,
              rgba(26, 23, 21, 0.06) 0%,
              rgba(26, 23, 21, 0) 100%);
}

.section-pale { background: var(--blush-pale); }

.section-head {
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  text-align: center;
}

.section-title { margin: 0; }

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin: 1.25rem auto 0;
}

.ornament::before,
.ornament::after {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--bronze);
}

.ornament .glyph {
  width: 5px;
  height: 5px;
  background: var(--bronze);
  transform: rotate(45deg);
}

/* ----------------------------------------------------------------
   About
   ---------------------------------------------------------------- */

.about-body {
  max-width: var(--reading-w);
  margin: 0 auto;
  text-align: center;
}

.about-body p {
  margin-bottom: 1.4rem;
  font-size: 1.08rem;
  color: var(--ink-soft);
  line-height: 1.75;
}

.about-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.7rem, 3.3vw, 2.5rem);
  line-height: 1.32;
  color: var(--ink);
  text-align: center;
  max-width: 24ch;
  margin: clamp(3rem, 5vw, 5rem) auto 0;
  letter-spacing: -0.012em;
  font-weight: 400;
}

/* ----------------------------------------------------------------
   Services
   ---------------------------------------------------------------- */

.services-intro {
  max-width: var(--reading-w);
  margin: 0 auto 3rem;
  text-align: center;
}

.services-intro h3 { margin-bottom: 1rem; }

.services-intro p {
  color: var(--ink-soft);
  font-size: 1.06rem;
  line-height: 1.7;
}

.services-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 880px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 720px) {
  .services-list {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2rem, 5vw, 4.5rem);
  }
}

.services-list li {
  padding: 1.2rem 0 1.2rem 1.5rem;
  border-bottom: 1px solid var(--rule);
  font-size: 1.05rem;
  color: var(--ink);
  line-height: 1.5;
  position: relative;
}

/* Tiny bronze diamond — same motif as the wordmark divider. Used as the
   list marker so the visual thread carries through without over-decorating.
   Vertical centering: padding-top + half the line-height puts the diamond's
   centre on the FIRST line of text (which behaves correctly for both single
   and multi-line items — the bullet sits beside the first line either way). */
.services-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(1.2rem + 0.75em);
  margin-top: -2px;
  width: 4px;
  height: 4px;
  background: var(--bronze);
  transform: rotate(45deg);
}

.services-outro {
  max-width: var(--reading-w);
  margin: 3rem auto 0;
  text-align: center;
}

.services-outro p {
  color: var(--ink-soft);
  margin-bottom: 1.25rem;
  font-size: 1.05rem;
  line-height: 1.7;
}

/* ----------------------------------------------------------------
   Why us — clean responsive feature grid
   ---------------------------------------------------------------- */

.why-grid {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 1140px;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

@media (min-width: 600px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 880px) {
  .why-grid { grid-template-columns: repeat(3, 1fr); }
}

.why-grid li {
  text-align: center;
  padding: clamp(2rem, 3.5vw, 2.75rem) clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--blush-pale);
  border: 1px solid var(--rule);
  transition: border-color 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.35s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.why-grid li:hover {
  border-color: var(--bronze);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(26, 23, 21, 0.06);
}

.why-grid .accent {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--bronze);
  margin: 0 auto 1.25rem;
}

.why-grid .text {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  max-width: 22ch;
}

/* ----------------------------------------------------------------
   How it works
   ---------------------------------------------------------------- */

.how-lede {
  font-style: italic;
  font-size: clamp(1.1rem, 1.8vw, 1.32rem);
  color: var(--ink-soft);
  text-align: center;
  margin: 0 auto clamp(3rem, 5vw, 4.5rem);
  max-width: 36ch;
  line-height: 1.5;
}

.steps {
  --step-num-size: clamp(1.6rem, 2.6vw, 2.2rem);
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 1100px;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
  position: relative;
}

@media (min-width: 760px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 4rem); }

  /* Connecting hairline behind the "Step N" labels, sitting at the optical
     middle of the text. Stops short of the outer edges so the line reads as
     "between" the steps rather than as a section divider. */
  .steps::before {
    content: '';
    position: absolute;
    top: calc(var(--step-num-size) * 0.55);
    left: 16%;
    right: 16%;
    height: 1px;
    background: var(--rule-strong);
    z-index: 0;
  }
}

.steps li {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step-num {
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--step-num-size);
  line-height: 1;
  color: var(--bronze);
  background: var(--blush-pale);
  padding: 0 0.6rem;
  margin-bottom: 1.25rem;
  font-variant-numeric: lining-nums;
}

.steps h4 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  letter-spacing: -0.012em;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 0.85rem;
  max-width: 18ch;
}

.step-title-edit {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
}

.step-body {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 32ch;
  margin: 0 auto;
}

/* ----------------------------------------------------------------
   Pricing
   ---------------------------------------------------------------- */

.pricing-body {
  margin: 0 auto;
}

.pricing-foot {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 2.5vw, 1.85rem);
  color: var(--ink);
  margin: clamp(2.5rem, 4vw, 3.5rem) auto 0;
  max-width: 38ch;
  line-height: 1.4;
  letter-spacing: -0.012em;
  font-weight: 400;
  text-align: center;
}

/* ----------------------------------------------------------------
   Reassurance
   ---------------------------------------------------------------- */

.reassurance { text-align: center; }

.reassurance .ornament {
  margin: 0 auto 2rem;
}
.reassurance .ornament::before,
.reassurance .ornament::after {
  width: 28px;
  background: var(--bronze-soft, var(--bronze));
  opacity: 0.7;
}
.reassurance .ornament .glyph { opacity: 0.85; }

.reassurance .quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.85rem, 4vw, 2.9rem);
  line-height: 1.32;
  color: var(--ink);
  max-width: 26ch;
  margin: 0 auto 2rem;
  letter-spacing: -0.018em;
}

.reassurance .calm {
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.7;
}

/* ----------------------------------------------------------------
   Contact
   ---------------------------------------------------------------- */

.contact-intro {
  max-width: 56ch;
  margin: 0 auto 2.75rem;
  color: var(--ink-soft);
  font-size: 1.07rem;
  text-align: center;
  line-height: 1.7;
}

.contact-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  margin: 0 auto 3.5rem;
}

.contact-phones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin: 0 auto 1.75rem;
}

.contact-phones a {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-size: 1.08rem;
  color: var(--ink);
  font-weight: 400;
}

.contact-phones .country {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faded);
  font-weight: 500;
  transition: color 0.3s ease;
}

.contact-phones a:hover .country { color: var(--bronze); }

.contact-response {
  font-style: italic;
  color: var(--ink-faded);
  font-size: 1rem;
  text-align: center;
  margin: 0;
}

/* ----------------------------------------------------------------
   Footer
   ---------------------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: var(--blush);
  padding: clamp(4.5rem, 8vw, 7.5rem) 0 1.75rem;
  position: relative;
  overflow: hidden;
}

.footer-logo {
  display: block;
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: clamp(110px, 13vw, 165px);
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
  user-select: none;
}

@media (max-width: 480px) {
  .footer-logo { max-height: 96px; }
}

.footer-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  padding-top: 3rem;
  border-top: 1px solid rgba(246, 238, 234, 0.15);
}

@media (min-width: 760px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
  }
}

.footer-grid h5 {
  color: var(--bronze);
  margin-bottom: 1rem;
}

.footer-grid p {
  margin: 0 0 0.7rem;
  font-size: 0.93rem;
  color: rgba(246, 238, 234, 0.72);
  line-height: 1.65;
}

.footer-grid a {
  color: rgba(246, 238, 234, 0.88);
  transition: color 0.3s ease;
  /* Animated underline that grows from the left on hover. Layered as a
     gradient on the same axis as the text so it doesn't shift the layout. */
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: color 0.3s ease, background-size 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.footer-grid a:hover {
  color: var(--bronze);
  background-size: 100% 1px;
}

.footer-grid .footer-phone {
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  margin-bottom: 0.55rem;
  font-size: 0.96rem;
}

.footer-grid .footer-phone .country {
  color: var(--bronze);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  width: 1.6rem;
}

.footer-signature {
  margin: clamp(3rem, 5vw, 4.5rem) 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(246, 238, 234, 0.08);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: rgba(246, 238, 234, 0.55);
  text-align: center;
  letter-spacing: 0.005em;
}

.copyright {
  margin-top: 1rem;
  padding-top: 0;
  border-top: 0;
  font-size: 0.83rem;
  color: rgba(246, 238, 234, 0.45);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ----------------------------------------------------------------
   Motion
   ---------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.85s cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 0.85s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

.hero .stagger > * {
  opacity: 0;
  transform: translateY(16px);
  animation: rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.hero .stagger > *:nth-child(1) { animation-delay: 0.10s; }
.hero .stagger > *:nth-child(2) { animation-delay: 0.24s; }
.hero .stagger > *:nth-child(3) { animation-delay: 0.38s; }
.hero .stagger > *:nth-child(4) { animation-delay: 0.52s; }
.hero .stagger > *:nth-child(5) { animation-delay: 0.66s; }

/* The figure lands AFTER the headline + sub + CTAs are settled, with a
   slower curve and a tiny scale to read as a deliberate placement rather
   than a snap-in. The 5-step stagger above completes around 0.66s + 1s
   = 1.66s; we begin the figure at 0.45s and let it run 1.6s so it lands
   slightly behind the text (about 2.05s total). */
.hero-figure {
  opacity: 0;
  transform: translateY(22px) scale(0.94);
  transform-origin: 50% 80%;
  animation: figure-in 1.6s cubic-bezier(0.18, 0.7, 0.2, 1) 0.45s forwards;
}

.why-grid.in li {
  animation: rise-tile 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  opacity: 0;
  transform: translateY(16px);
}
.why-grid.in li:nth-child(1) { animation-delay: 0.05s; }
.why-grid.in li:nth-child(2) { animation-delay: 0.13s; }
.why-grid.in li:nth-child(3) { animation-delay: 0.21s; }
.why-grid.in li:nth-child(4) { animation-delay: 0.29s; }
.why-grid.in li:nth-child(5) { animation-delay: 0.37s; }
.why-grid.in li:nth-child(6) { animation-delay: 0.45s; }

@keyframes rise        { to { opacity: 1; transform: none; } }
@keyframes figure-in   { to { opacity: 1; transform: none; } }
@keyframes rise-tile   { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal,
  .hero .stagger > *,
  .hero-figure,
  .why-grid.in li {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ----------------------------------------------------------------
   Enquiry wizard (/enquiry)
   ---------------------------------------------------------------- */

.wizard-main {
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(4rem, 7vw, 7rem);
}

.wizard-head {
  max-width: 720px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
}

.wizard-eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bronze);
  margin: 0 0 1rem;
}

.wizard-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.4vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin: 0 0 1rem;
  color: var(--ink);
}

.wizard-lede {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 0 auto;
}

.wizard-banner {
  max-width: 720px;
  margin: 0 auto 2rem;
  padding: 1.1rem 1.4rem;
  background: #fbede9;
  border-left: 3px solid #b04a3c;
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--ink);
}
.wizard-banner-error strong { color: #8a3528; display: block; margin-bottom: 0.2rem; }
.wizard-banner a { color: var(--bronze-deep, var(--bronze)); text-decoration: underline; text-underline-offset: 2px; }

/* Progress indicator -- numbered steps separated by hairlines */
.wizard-progress {
  list-style: none;
  margin: 0 auto 2.5rem;
  padding: 0;
  max-width: 720px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  counter-reset: wp;
}

.wizard-progress-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.25rem 0;
  position: relative;
  text-align: center;
  min-width: 0;
}

.wizard-progress-item .num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--rule-strong);
  background: var(--blush);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-faded);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.wizard-progress-item .label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--ink-faded);
  text-align: center;
  line-height: 1.2;
  transition: color 0.3s ease;
}

@media (max-width: 600px) {
  .wizard-progress-item .label { display: none; }
}

/* Connector lines between dots */
.wizard-progress-item:not(:first-child)::before {
  content: '';
  position: absolute;
  top: calc(0.5rem + 14px);
  right: 50%;
  left: -50%;
  height: 1px;
  background: var(--rule-strong);
  z-index: 0;
}
.wizard-progress-item .num,
.wizard-progress-item .label { position: relative; z-index: 1; }

.wizard-progress-item.is-done .num {
  background: var(--ink);
  color: var(--blush);
  border-color: var(--ink);
}
.wizard-progress-item.is-done::before { background: var(--ink); }

.wizard-progress-item.is-active .num {
  background: var(--bronze);
  color: var(--blush);
  border-color: var(--bronze);
  transform: scale(1.08);
}

.wizard-progress-item.is-active .label {
  color: var(--ink);
  font-weight: 500;
}

/* The form panel itself */
.wizard {
  max-width: 720px;
  margin: 0 auto;
  background: var(--blush-pale);
  border: 1px solid var(--rule);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  position: relative;
}

.wizard .hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.wizard-step[hidden] { display: none; }

.wizard-step.is-active {
  animation: wizard-fade 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes wizard-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.wizard-step-head {
  margin: 0 0 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
}

.wizard-step-num {
  font-family: var(--font-body);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze);
  margin: 0 0 0.6rem;
  font-weight: 500;
}

.wizard-step-num .optional {
  color: var(--ink-faded);
  font-style: italic;
  letter-spacing: 0.12em;
  text-transform: none;
}

.wizard-step-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.15;
  margin: 0 0 0.5rem;
  color: var(--ink);
  outline: none;
}

.wizard-step-title:focus { outline: none; }

.wizard-step-help {
  font-size: 0.97rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.55;
}

.field {
  border: 0;
  padding: 0;
  margin: 0 0 1.4rem;
  display: block;
}
fieldset.field { display: block; }

.field > label,
fieldset.field > legend {
  display: block;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 0.55rem;
  padding: 0;
}

.req {
  color: var(--bronze);
  font-weight: 500;
  margin-left: 0.15em;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea,
.wizard .other-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 0.75rem 0.9rem;
  line-height: 1.5;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
  /* Bronze underline that grows from centre on focus, drawn via background
     image so it doesn't shift layout. The base input border stays as-is
     so unfocused fields read the same. */
  background-image: linear-gradient(var(--bronze), var(--bronze));
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: border-color 0.2s ease,
              background-color 0.2s ease,
              background-size 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.2s ease;
}

.field input::placeholder,
.field textarea::placeholder,
.wizard .other-input::placeholder { color: var(--ink-faded); }

.field input:focus,
.field textarea:focus,
.wizard .other-input:focus {
  outline: 0;
  border-color: var(--ink-soft);
  background-color: var(--blush-pale);
  background-size: 100% 2px;
  box-shadow: none;
}

/* Hover hints at interactivity without committing to focus styling. */
.field input:hover:not(:focus),
.field textarea:hover:not(:focus),
.wizard .other-input:hover:not(:focus) {
  border-color: var(--ink-faded);
}

/* Suppress browser-native invalid styling (Firefox draws a red glow on
   required empty fields the moment the page renders). We control the
   look ourselves via :user-invalid below. */
.field input:invalid,
.field textarea:invalid { box-shadow: none; }

/* :user-invalid only matches after the user has interacted with the
   field (typed and blurred, or attempted to submit) — so a freshly
   loaded form doesn't immediately flag empty required inputs. */
.field input:user-invalid,
.field textarea:user-invalid {
  border-color: #b04a3c;
}

.field textarea {
  resize: vertical;
  min-height: 100px;
}

.wizard .other-input {
  margin-top: 0.85rem;
  background: var(--blush);
  font-size: 0.95rem;
}

/* Radio + checkbox groups */
.radio-group,
.check-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}

@media (min-width: 720px) {
  .check-group { grid-template-columns: 1fr 1fr; gap: 0.55rem clamp(1rem, 2vw, 1.5rem); }
  .radio-group-inline { grid-template-columns: repeat(auto-fit, minmax(110px, max-content)); gap: 0.5rem 1.4rem; }
}

.radio,
.check {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 0;
  font-size: 0.97rem;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}

.radio input[type="radio"],
.check input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid var(--ink-faded);
  background: #fff;
  flex: 0 0 auto;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  position: relative;
}

.radio input[type="radio"] { border-radius: 50%; }

.radio input[type="radio"]:checked,
.check input[type="checkbox"]:checked {
  border-color: var(--ink);
  background-color: var(--ink);
}

.radio input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--blush);
}

/* Tick rendered as an inline SVG background — sized to 60% of the box,
   centered, so it never escapes the bounds at any zoom. */
.check input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6eeea' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 70% 70%;
}

.radio input:focus-visible,
.check input:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(156, 115, 64, 0.3);
}

/* Wizard nav row */
.wizard-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

.wizard-nav-spacer { flex: 1; }

.wizard-nav .btn {
  min-width: 120px;
  justify-content: center;
}

.wizard-nav .btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.wizard-fineprint {
  max-width: 720px;
  margin: 1.25rem auto 0;
  font-size: 0.84rem;
  color: var(--ink-faded);
  text-align: center;
  line-height: 1.5;
}
.wizard-fineprint a {
  color: var(--bronze-deep, var(--bronze));
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wizard-fineprint a:hover { color: var(--ink); }

/* Thank-you state */
.wizard-thanks {
  max-width: 640px;
  margin: clamp(3rem, 6vw, 5rem) auto;
  text-align: center;
}

.wizard-thanks-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 1.25rem;
  color: var(--ink);
}

.wizard-thanks-body {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 0 auto 2.5rem;
}

.wizard-thanks-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
}

@media (max-width: 480px) {
  .wizard-nav { flex-wrap: wrap; }
  .wizard-nav .btn { min-width: 0; flex: 1 1 130px; }
  .wizard-nav-spacer { display: none; }
}

/* ----------------------------------------------------------------
   Legal pages (/privacy, /terms) and 404
   ---------------------------------------------------------------- */

.legal {
  padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(4rem, 7vw, 7rem);
}

.legal-page {
  max-width: 760px;
}

.legal-head {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--rule);
}

.legal-eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bronze);
  margin: 0 0 1rem;
}

.legal-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 0.75rem;
  color: var(--ink);
}

.legal-meta {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--ink-faded);
  margin: 0;
}

.legal-page section {
  margin-bottom: 2.5rem;
}

.legal-page h2 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 1.7rem);
  letter-spacing: -0.012em;
  margin: 0 0 1rem;
  color: var(--ink);
}

.legal-page p {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}

.legal-page p strong {
  color: var(--ink);
  font-weight: 600;
}

.legal-page a {
  color: var(--bronze-deep, var(--bronze));
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.legal-page a:hover { color: var(--ink); }

.legal-page ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
}

.legal-page ul li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.55rem;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

.legal-page ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 1px;
  background: var(--bronze);
}

.legal-page .legal-lead {
  font-size: 1.08rem;
  color: var(--ink-soft);
  line-height: 1.75;
  padding: 1.25rem 1.5rem;
  background: var(--blush-pale);
  border-left: 2px solid var(--bronze);
  margin: 0 0 1.5rem;
}

.legal-back {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-body);
  font-size: 0.95rem;
}

.legal-back a {
  color: var(--ink-soft);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: color 0.2s ease, background-size 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.legal-back a:hover {
  color: var(--ink);
  background-size: 100% 1px;
}

/* In-prose links inside legal copy + the wizard's privacy notice ref. */
.legal a:not(.legal-back a):not([class]),
.wizard-foot a {
  color: var(--ink);
  background-image: linear-gradient(var(--bronze), var(--bronze));
  background-position: 0 95%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  transition: background-size 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.2s ease;
}
.legal a:not(.legal-back a):not([class]):hover,
.wizard-foot a:hover {
  color: var(--bronze);
  background-size: 100% 2px;
}

/* ----------------------------------------------------------------
   404
   ---------------------------------------------------------------- */

.not-found {
  padding: clamp(4rem, 10vw, 8rem) 0 clamp(6rem, 12vw, 10rem);
}

.nf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 720px) {
  .nf-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.nf-figure {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.nf-figure img {
  max-width: 280px;
  height: auto;
  /* Subtle "she's lost" tilt — small enough to read as character not a bug. */
  transform: rotate(-4deg);
  transform-origin: 50% 90%;
  animation: nf-sway 6s ease-in-out infinite;
}

/* Speech-bubble question mark above her head. */
.nf-bubble {
  position: absolute;
  top: 5%;
  right: 12%;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blush-pale);
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2rem;
  color: var(--bronze);
  box-shadow: 0 6px 18px rgba(26, 23, 21, 0.06);
  animation: nf-pulse 2.4s ease-in-out infinite;
}
.nf-bubble::after {
  /* Bubble tail, drawn as a tiny rotated square that overlaps the circle. */
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--blush-pale);
  border-right: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  bottom: -6px;
  left: 18%;
  transform: rotate(45deg);
}

@keyframes nf-sway {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(-1deg) translateY(-3px); }
}
@keyframes nf-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .nf-figure img,
  .nf-bubble { animation: none; }
}

.nf-eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--bronze);
  margin: 0 0 1.2rem;
}

.nf-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin: 0 0 1.5rem;
  color: var(--ink);
  text-wrap: balance;
}

.nf-body {
  max-width: 50ch;
  margin: 0 0 2.5rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
@media (max-width: 720px) {
  .nf-body { margin: 0 auto 2.5rem; }
}

.nf-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}
@media (max-width: 720px) {
  .nf-cta { justify-content: center; }
}

/* ----------------------------------------------------------------
   Visual editor overlay
   Styles only activate when the page is loaded via the admin's
   "Visual editor" — body.is-editing is set by editor.js. They are
   inert otherwise.
   ---------------------------------------------------------------- */

body.is-editing { padding-bottom: 0; }

/* Outline-based highlights split into separate boxes when an inline span
   wraps across multiple lines. Use background instead — it flows line-by-line
   and reads as a single continuous highlighted region. box-decoration-break
   keeps padding/radius applied to every line fragment. */
.is-editing .ed-text {
  cursor: text;
  border-radius: 3px;
  padding: 0.05em 0.15em;
  margin: 0 -0.15em;
  background-color: transparent;
  transition: background-color 0.12s, box-shadow 0.12s;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

.is-editing .ed-text:hover {
  background-color: rgba(156, 115, 64, 0.08);
}

.is-editing .ed-text:focus,
.is-editing .ed-text:focus-visible {
  background-color: rgba(156, 115, 64, 0.16);
  outline: none;
  box-shadow: inset 0 -1px 0 var(--bronze);
}

/* Suppress hover transitions on buttons / links so the page doesn't
   feel "alive" when the admin is just navigating around the editor. */
.is-editing .btn:hover,
.is-editing a:hover {
  transform: none !important;
}

/* Skip the reveal-on-scroll animations while editing so every editable
   span is immediately visible and stable. */
.is-editing .reveal,
.is-editing .hero .stagger > *,
.is-editing .hero-figure,
.is-editing .why-grid.in li {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ----------------------------------------------------------------
   Services — grouped (Bookkeeping / Admin / Documents)
   Each group has a heading and a single-column bullet list. The
   three groups arrange responsively into a 3-up grid on desktop.
   ---------------------------------------------------------------- */

.services-groups {
  margin: 0 auto;
  max-width: 1180px;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 760px) {
  .services-groups { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1080px) {
  .services-groups { grid-template-columns: repeat(3, 1fr); }
}

.services-group {
  display: flex;
  flex-direction: column;
}

.services-group-title {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze);
  margin: 0 0 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--rule);
}

/* Single-column bullets inside each group, overriding the global
   2-column rule that the flat list previously relied on. */
.services-group .services-list {
  grid-template-columns: 1fr;
  max-width: none;
  column-gap: 0;
}

.services-group .services-list li {
  font-size: 1rem;
  padding: 0.85rem 0 0.85rem 1.4rem;
}

.services-group .services-list li:last-child {
  border-bottom: 0;
}

.services-group .services-list li::before {
  top: calc(0.85rem + 0.75em);
}

/* ----------------------------------------------------------------
   Pricing — lead heading + rate list + italic closing note
   ---------------------------------------------------------------- */

.pricing-lead {
  text-align: center;
  max-width: 38rem;
  margin: 0 auto 2rem;
}

.pricing-lead-heading {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}

.pricing-rates {
  max-width: 38rem;
  margin: 0 auto;
  text-align: center;
}

.pricing-rates p {
  font-size: clamp(1.05rem, 1.5vw, 1.18rem);
  color: var(--ink-soft);
  line-height: 1.65;
  margin: 0 0 0.85rem;
}

.pricing-rates p:last-child { margin-bottom: 0; }

.pricing-rates strong {
  color: var(--ink);
  font-weight: 600;
}

.pricing-closing-note {
  max-width: 38rem;
  margin: 1.75rem auto 0;
  text-align: center;
  font-style: italic;
  color: var(--ink-faded);
  font-size: 1rem;
}

/* ----------------------------------------------------------------
   FAQ — accordion with chevron
   ---------------------------------------------------------------- */

.faq-list {
  max-width: 780px;
  margin: 0 auto;
  border-top: 1px solid var(--rule);
}

.faq-item {
  border-bottom: 1px solid var(--rule);
}

.faq-item[open] {
  background: rgba(255, 255, 255, 0.35);
}

.faq-question {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 0.5rem 1.25rem 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1.02rem, 1.6vw, 1.12rem);
  color: var(--ink);
  line-height: 1.5;
  transition: color 0.25s ease;
}

.faq-question::-webkit-details-marker { display: none; }

.faq-question:hover { color: var(--bronze); }

.faq-question-text { flex: 1; }

.faq-chevron {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-top: 0.4rem;
  border-right: 1.5px solid var(--ink-soft);
  border-bottom: 1.5px solid var(--ink-soft);
  transform: rotate(45deg);
  transition: transform 0.3s ease, border-color 0.25s ease;
}

.faq-question:hover .faq-chevron { border-color: var(--bronze); }

.faq-item[open] .faq-chevron {
  transform: rotate(-135deg);
  margin-top: 0.7rem;
}

.faq-answer {
  padding: 0 0.5rem 1.4rem 0;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 65ch;
}

.faq-answer p { margin: 0; }

.faq-answer strong {
  color: var(--ink);
  font-weight: 600;
}

/* Open all FAQs while editing so every span is reachable. */
.is-editing .faq-item { background: transparent; }
.is-editing .faq-item .faq-answer { display: block; }
.is-editing .faq-item:not([open]) .faq-answer { display: block; }