/* ==========================================================================
   PlatePush — design system  (v3, 2026-09)
   --------------------------------------------------------------------------
   A modern, product-grade interface for a UAE restaurant marketing company.

     • The PAGE IS LIGHT. Warm-neutral surfaces, generous whitespace, crisp
       cards. There is no dark mode and no dark-mode media query.
     • Only the HEADER, the FOOTER and the pre-footer CTA band are dark
       (ink #0E0D0C) — that is the brand's black from the logo, and it is what
       makes the gold read as gold. A small number of mid-page accent bands
       (.section--dark) use the same ink deliberately, as punctuation.
     • Gold #D4AF37 is an accent: buttons, rules, icons, numerals, focus.
       It is never a background for long-form text.

   Contrast rules enforced throughout this file:
     • #D4AF37 as TEXT appears only on ink (8.4:1).
     • On light backgrounds, text-weight gold is --gold-ink #8A6A16 (5.2:1).
     • #D4AF37 on light is permitted for rules, borders, icons and fills only.
     • Body copy on white is --body #4A463F (8.9:1); headings are --ink.

   Section order
     1. Tokens              9. Hero + page hero    17. CTA bands
     2. Reset & base       10. Stats & metrics     18. Footer
     3. Layout             11. Cards               19. Sticky CTA
     4. Typography         12. Steps & timeline    20. Blog
     5. Buttons & links    13. Feature rows        21. Utilities
     6. Header & nav       14. Before / after      22. Motion
     7. Breadcrumbs        15. Gallery & showcase  23. Print
     8. Marquee & pills    16. FAQ & forms
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Neutrals — warm-neutral, never blue-grey */
  --white:        #ffffff;
  --paper:        #ffffff;
  --warm-white:   #faf9f7;
  --off-white:    #f6f5f2;
  --cream:        #f1efea;
  --sand:         #e9e6df;
  --sand-deep:    #dbd6cc;

  --ink:          #121110;
  --ink-soft:     #1b1917;
  --charcoal:     #201d1a;
  --charcoal-2:   #2a2622;
  --slate:        #4a463f;
  --body:         #4a463f;
  --muted:        #6d675f;
  --muted-light:  #928b81;

  /* On-dark text ramp */
  --on-dark:      #f7f5f1;
  --on-dark-2:    #c6c0b7;
  --on-dark-3:    #948d84;

  /* Brand gold */
  --gold:         #d4af37;
  --gold-bright:  #f0d47c;
  --gold-deep:    #a8862a;
  --gold-ink:     #8a6a16;   /* accessible gold for text on light */
  --gold-wash:    #fdf8e9;
  --gold-wash-2:  #f8efd6;
  --gold-line:    rgba(212, 175, 55, 0.30);

  --danger:       #a52a2a;
  --success:      #146c43;

  --border:       #e8e5df;
  --border-2:     #d9d5cd;
  --border-dark:  rgba(255, 255, 255, 0.10);
  --border-dark-2:rgba(255, 255, 255, 0.18);

  /* Gradients */
  --grad-gold:      linear-gradient(135deg, #f2dc9a 0%, #d4af37 45%, #b4902c 100%);
  --grad-gold-soft: linear-gradient(135deg, #fdf8e9 0%, #f6ecd2 100%);
  --grad-ink:       linear-gradient(165deg, #1b1917 0%, #121110 55%, #0b0a09 100%);
  --grad-fade:      linear-gradient(180deg, #ffffff 0%, var(--warm-white) 100%);

  /* Type */
  --font-display: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs:    0.8125rem;   /* 13 */
  --fs-sm:    0.9375rem;   /* 15 */
  --fs-base:  1.0625rem;   /* 17 */
  --fs-md:    1.125rem;    /* 18 */
  --fs-lg:    1.25rem;     /* 20 */
  --fs-xl:    1.5rem;      /* 24 */
  --fs-2xl:   1.875rem;    /* 30 */
  --fs-3xl:   2.25rem;     /* 36 */
  --fs-4xl:   2.875rem;    /* 46 */
  --fs-5xl:   3.5rem;      /* 56 */
  --fs-6xl:   4.25rem;     /* 68 */

  /* Spacing */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 2.75rem;  --sp-8: 3.5rem;
  --sp-9: 5rem;     --sp-10: 7rem;

  --container:        1200px;
  --container-wide:   1360px;
  --container-narrow: 780px;
  --gutter:           clamp(1.15rem, 0.6rem + 2.4vw, 2.5rem);
  --header-pad:       0.85rem;
  --pill-h:           60px;
  --header-h:         calc(var(--header-pad) * 2 + var(--pill-h));

  /* Radii */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius:    16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-2xl:36px;
  --radius-pill: 999px;

  /* Shadows — soft, layered, product-grade */
  --shadow-xs:  0 1px 2px rgba(18, 17, 16, 0.05);
  --shadow-sm:  0 1px 2px rgba(18, 17, 16, 0.04), 0 2px 6px rgba(18, 17, 16, 0.05);
  --shadow:     0 1px 2px rgba(18, 17, 16, 0.04), 0 8px 20px -6px rgba(18, 17, 16, 0.10);
  --shadow-md:  0 2px 4px rgba(18, 17, 16, 0.04), 0 14px 34px -10px rgba(18, 17, 16, 0.14);
  --shadow-lg:  0 4px 8px rgba(18, 17, 16, 0.05), 0 28px 64px -16px rgba(18, 17, 16, 0.20);
  --shadow-gold:0 10px 28px -10px rgba(168, 134, 42, 0.55);

  --dur:  180ms;
  --dur-2: 420ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--white);
  color: var(--body);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: "cv05" 1, "cv08" 1, "ss01" 1;
}

body.nav-open { overflow: hidden; }

img, picture, svg, video { max-width: 100%; height: auto; display: block; }
svg { fill: currentColor; }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--sp-7) 0;
}

::selection { background: rgba(212, 175, 55, 0.28); color: var(--ink); }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--ink);
  color: var(--on-dark);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* Spam honeypot — must never be visible or focusable. */
.pp-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

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

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide   { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }

.section {
  position: relative;
  padding-block: clamp(3.5rem, 2rem + 5.5vw, 6.5rem);
}
.section--tight  { padding-block: clamp(2.5rem, 1.6rem + 3vw, 3.75rem); }
.section--white  { background: var(--white); }
.section--light  { background: var(--off-white); }
.section--off    { background: var(--warm-white); }

.section--dark,
.section--charcoal {
  background: var(--ink);
  background-image:
    radial-gradient(58rem 30rem at 85% -10%, rgba(212, 175, 55, 0.13), transparent 62%),
    radial-gradient(44rem 26rem at 0% 108%, rgba(212, 175, 55, 0.07), transparent 60%);
  color: var(--on-dark-2);
}
.section--charcoal { background-color: var(--charcoal); }

.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark h5, .section--dark h6,
.section--charcoal h1, .section--charcoal h2, .section--charcoal h3,
.section--charcoal h4, .section--charcoal h5, .section--charcoal h6 { color: var(--on-dark); }

.section--dark .lede, .section--charcoal .lede { color: var(--on-dark-2); }
.section--dark p, .section--charcoal p { color: var(--on-dark-2); }
.section--dark .eyebrow, .section--charcoal .eyebrow { color: var(--gold); }

.section--rule { border-top: 1px solid var(--border); }

/* Hairline between two consecutive white sections so they do not merge */
.section--white + .section--white { border-top: 1px solid var(--border); }

.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 1.2rem + 2.4vw, 3.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head > :last-child { margin-bottom: 0; }

.grid { display: grid; gap: clamp(1rem, 0.6rem + 1.2vw, 1.75rem); }
.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)); }

@media (max-width: 980px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
/* Copy-led split: a long article beside a short sidebar. The sidebar must
   align to the top, not to the middle of a column ten times its height. */
.split--wide-copy {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  align-items: start;
}
.split--form      { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); align-items: start; }
.split__media     { min-width: 0; }
.split__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width: 100%; }

/* Video ad embed: keeps the 9:16 frame stable before the video loads,
   and centres a max width so an 11-second vertical clip doesn't tower
   over its copy column on wide screens. */
.split__media--video { display: flex; justify-content: center; }
.video-embed {
  display: block;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  background: #0b0b0a;
  object-fit: cover;
}

@media (max-width: 900px) {
  .split, .split--wide-copy, .split--form { grid-template-columns: minmax(0, 1fr); }
  .split--media-first .split__media { order: -1; }
}
@media (min-width: 901px) {
  .split--media-first .split__media { order: -1; }
}

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.028em;
  color: var(--ink);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.35rem, 1.25rem + 4.3vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.036em;
  font-weight: 800;
}
h2 {
  font-size: clamp(1.85rem, 1.2rem + 2.5vw, 2.85rem);
  line-height: 1.09;
  letter-spacing: -0.032em;
  font-weight: 700;
}
h3 { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem); line-height: 1.22; letter-spacing: -0.022em; }
h4 { font-size: var(--fs-lg); letter-spacing: -0.018em; }
h5 { font-size: var(--fs-md); letter-spacing: -0.014em; }
h6 { font-size: var(--fs-base); letter-spacing: 0; }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.2rem);
  line-height: 1.62;
  color: var(--muted);
  max-width: 62ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 var(--sp-4);
}
.eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-gold);
  flex: none;
}
.section-head--center .eyebrow { justify-content: center; }

.h-sm { font-size: var(--fs-lg); }
.text-muted { color: var(--muted); }
.text-xs { font-size: var(--fs-xs); }
.text-center { text-align: center; }
.text-left { text-align: left; }
.mb-0 { margin-bottom: 0 !important; }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.rounded { border-radius: var(--radius); }

.rule-gold {
  width: 3.25rem;
  height: 3px;
  border: 0;
  border-radius: 3px;
  background: var(--grad-gold);
  margin: var(--sp-5) 0;
}

.note {
  font-size: var(--fs-sm);
  color: var(--body);
  background: var(--off-white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: var(--sp-4) var(--sp-5);
}
.note--dark {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-dark);
  border-left-color: var(--gold);
  color: var(--on-dark-2);
}

.hint { font-size: var(--fs-xs); color: var(--muted-light); }

/* Long-form prose */
.prose { max-width: 72ch; }
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 { margin-top: var(--sp-8); }
.prose h3 { margin-top: var(--sp-7); }
.prose ul, .prose ol { padding-left: 1.35rem; }
.prose li { margin-bottom: 0.5rem; }
.prose img { border-radius: var(--radius); box-shadow: var(--shadow); }
.prose blockquote {
  margin: var(--sp-6) 0;
  padding: var(--sp-5) var(--sp-6);
  background: var(--gold-wash);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--fs-md);
  color: var(--ink-soft);
}
.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.1em 0.35em;
}

/* Lists */
.plain-list { list-style: none; padding: 0; margin: 0; }

.tick-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.tick-list li {
  position: relative;
  padding-left: 2rem;
  color: var(--body);
}
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.2em;
  width: 1.3rem; height: 1.3rem;
  border-radius: 50%;
  background: var(--gold-wash-2) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%238a6a16' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.4 4.9 8.8 9.5 3.6'/%3E%3C/svg%3E") center / 0.72rem no-repeat;
  box-shadow: inset 0 0 0 1px var(--gold-line);
}
.section--dark .tick-list li { color: var(--on-dark-2); }
.section--dark .tick-list li::before {
  background-color: rgba(212, 175, 55, 0.16);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23f0d47c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.4 4.9 8.8 9.5 3.6'/%3E%3C/svg%3E");
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.35);
}

.numbered-list { list-style: none; padding: 0; margin: 0; counter-reset: nl; display: grid; gap: var(--sp-4); }
.numbered-list li {
  counter-increment: nl;
  position: relative;
  padding-left: 3rem;
  min-height: 2rem;
}
.numbered-list li::before {
  content: counter(nl, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0;
  width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold-bright);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0;
}

.link-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.15rem; }
.link-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  font-weight: 550;
  text-decoration: none;
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.link-list a:hover { color: var(--gold-ink); padding-left: 0.35rem; }

/* --------------------------------------------------------------------------
   5. Buttons & links
   -------------------------------------------------------------------------- */
a { color: var(--gold-ink); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--gold-deep); }

.link-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 650;
  font-size: var(--fs-sm);
  color: var(--gold-ink);
  text-decoration: none;
}
.link-gold .arrow, .link-gold svg { transition: transform var(--dur) var(--ease); }
.link-gold:hover .arrow, .link-gold:hover svg { transform: translateX(3px); }
.section--dark .link-gold, .cta-band .link-gold { color: var(--gold-bright); }

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--white);
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.82rem 1.5rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.006em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { flex: none; }

.btn--primary { --btn-bg: var(--ink); --btn-fg: var(--white); box-shadow: var(--shadow-sm); }
.btn--primary:hover { --btn-bg: var(--charcoal-2); box-shadow: var(--shadow); color: var(--white); }

.btn--gold {
  background: var(--grad-gold);
  color: #1a1408;
  border-color: transparent;
  box-shadow: var(--shadow-gold);
  font-weight: 700;
}
.btn--gold:hover { filter: brightness(1.06); color: #1a1408; box-shadow: 0 14px 34px -10px rgba(168, 134, 42, 0.65); }

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

.section--dark .btn--outline,
.cta-band .btn--outline,
.hero--dark .btn--outline,
.site-header .btn--outline,
.mobile-nav .btn--outline {
  color: var(--on-dark);
  border-color: var(--border-dark-2);
  background: rgba(255, 255, 255, 0.04);
}
.section--dark .btn--outline:hover,
.cta-band .btn--outline:hover,
.site-header .btn--outline:hover,
.mobile-nav .btn--outline:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.34);
  color: var(--white);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: transparent;
  padding-inline: 0.9rem;
}
.btn--ghost:hover { background: var(--off-white); color: var(--ink); }

.btn--sm  { padding: 0.6rem 1.1rem; font-size: var(--fs-xs); }
.btn--lg  { padding: 1.02rem 1.9rem; font-size: var(--fs-base); }
.btn--block { display: flex; width: 100%; }
.btn--icon { padding: 0.72rem; width: 2.85rem; height: 2.85rem; }
.btn[data-loading="true"] { opacity: 0.65; pointer-events: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.btn-row--center { justify-content: center; }

/* On a phone a long call-to-action must wrap rather than push the page
   sideways, so nowrap is lifted and the primary actions go full width. */
@media (max-width: 560px) {
  .btn { white-space: normal; text-align: center; }
  .btn--lg { padding-inline: 1.35rem; }
  .hero .btn-row > .btn,
  .page-hero .btn-row > .btn,
  .cta-band .btn { width: 100%; }
  .sticky-cta .btn { white-space: nowrap; }
  .sticky-cta .btn--icon { width: 2.85rem; flex: none; }
}

/* --------------------------------------------------------------------------
   6. Header & nav
   --------------------------------------------------------------------------
   The header is a FLOATING GLASS PILL, not a full-width bar.

     • .site-header is a transparent sticky wrapper. It keeps its own height
       in the document flow, so no page needs a top offset — the pill simply
       floats inside it with breathing room on all four sides.
     • .site-header__inner is the pill: dark smoked glass, a hairline of
       light along the top edge, and a soft drop shadow that lifts it off
       the page. It reads as one object, which is what makes it feel
       expensive rather than like a strip of chrome.
     • On scroll the wrapper's padding and the pill's height tighten, a
       white scrim fades in behind, and the shadow deepens. Nothing jumps —
       every one of those is a transition on the same easing curve.
     • The nav items stretch to the pill's full height. That is what makes
       the mega panels line up at a single, consistent distance below the
       pill no matter which item opened them.
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-block: var(--header-pad);
  transition: padding-block var(--dur-2) var(--ease);
}

/* Scrim. The page is light, so a white-to-transparent fade behind the pill
   is what stops body copy from slicing through the transparent gutters as
   it scrolls past. Invisible at the top of the page — there is nothing
   underneath the header to hide there. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 -2.6rem 0;
  z-index: 0;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.82) 38%,
    rgba(255, 255, 255, 0.42) 72%,
    rgba(255, 255, 255, 0) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease);
}
.site-header.is-scrolled { --header-pad: 0.5rem; --pill-h: 54px; }
.site-header.is-scrolled::before { opacity: 1; }

/* The container wrapper only supplies the page gutters and max width; the
   pill inside it is what carries every visual property. Splitting the two
   is what lets the pill have its own inner padding without fighting the
   container's. */
.site-header__bar { position: relative; z-index: 1; }

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(0.35rem, 0.05rem + 0.9vw, 1rem);
  min-height: var(--pill-h);
  padding-inline: 0.55rem 0.55rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #17160F 0%, #121110 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 2px 6px rgba(18, 17, 16, 0.05),
    0 22px 44px -26px rgba(18, 17, 16, 0.50);
  transition: min-height var(--dur-2) var(--ease),
              background-color var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease);
}
.site-header.is-scrolled .site-header__inner {
  background: linear-gradient(180deg, #131208 0%, #0d0c0b 100%);
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 2px 8px rgba(18, 17, 16, 0.08),
    0 26px 56px -26px rgba(18, 17, 16, 0.62);
}

/* A thread of gold along the pill's top edge, fading out before it reaches
   either end so it reads as a highlight catching the light rather than as
   a border. */
.site-header__inner::before {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  top: -1px;
  height: 1px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.55), transparent);
  pointer-events: none;
}

/* Brand */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.58rem;
  padding: 0.25rem 0.45rem 0.25rem 0.2rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  color: var(--on-dark);
  flex: none;
  min-width: 0;
}

/* This is what pushes the nav and the actions to the right edge, and it sits
   on the brand rather than on .nav because .nav is display:none below the
   desktop breakpoint — an auto margin on a hidden element is no margin at
   all, which is what left the hamburger stuck against the wordmark on every
   phone. Scoped to the header so the footer's copy of .brand is untouched. */
.site-header .brand { margin-right: auto; }
.brand__mark {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(212, 175, 55, 0.30);
  box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
  flex: none;
  transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease-out);
}
.site-header .brand:hover .brand__mark {
  border-color: rgba(212, 175, 55, 0.55);
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.12);
  transform: translateY(-1px);
}
.site-header.is-scrolled .brand__mark { width: 34px; height: 34px; }
.brand__mark img { width: 100%; height: 100%; object-fit: cover; }
.brand__text {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.038em;
  color: var(--white);
  line-height: 1;
}
.brand__text span {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Full legal name under the wordmark, deliberately small so "Plate Push"
   stays the thing people read first. */
.brand__name { display: flex; flex-direction: column; gap: 0.22rem; }
.brand__sub {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-dark-3);
  line-height: 1.2;
  white-space: nowrap;
}

/* Desktop nav
   ----------------------------------------------------------------------
   .nav stretches to the pill's full height and each item with it, so the
   mega panels all hang from the same baseline — the bottom of the pill —
   instead of from the bottom of a text label that happens to sit a few
   pixels higher or lower. */
.nav {
  display: flex;
  margin-inline: auto;
  align-self: stretch;
  align-items: stretch;
  gap: 0.1rem;
}
.nav__item {
  position: relative;
  display: flex;
  align-items: center;
}

.nav__link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.46rem 0.72rem;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 550;
  letter-spacing: -0.006em;
  color: var(--on-dark-2);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav__link:hover { color: var(--white); background: rgba(255, 255, 255, 0.08); }
.nav__link.is-active { color: var(--gold-bright); }
.nav__item.is-open > .nav__link { color: var(--white); }
/* Once JS has positioned the sliding indicator once, it takes over the hover
   feedback and the link's own background steps aside — otherwise the two
   would visibly double up on top of each other. Without JS (or before that
   first move) the plain per-link background above is what the visitor sees,
   so hover is never silently missing. */
.nav--indicator-ready .nav__link:hover { background: transparent; }
.nav__caret { transition: transform var(--dur-2) var(--ease-out); opacity: 0.65; }
.nav__item.is-open .nav__caret,
.nav__item:focus-within .nav__caret { transform: rotate(180deg); opacity: 1; }

/* Sliding nav highlight. Absolutely positioned against .site-header__inner
   (the nearest positioned ancestor — .nav itself is deliberately left
   unpositioned so it never becomes the anchor for .mega--wide, which needs
   to center on the full pill, not just the nav's own box). JS drives its
   left/top/width/height from each link's real geometry, so it works
   whatever the link's text length or the viewport width. */
.nav__indicator {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  opacity: 0;
  pointer-events: none;
  transition: transform 380ms var(--ease-out), width 380ms var(--ease-out),
              height 380ms var(--ease-out), opacity 220ms var(--ease),
              background-color var(--dur) var(--ease);
}
.nav__indicator.is-instant { transition: none; }
.nav__indicator.on-active {
  background: rgba(212, 175, 55, 0.16);
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.22);
}

/* Mega menu
   ----------------------------------------------------------------------
   Dark smoked glass, matching the pill, so an open panel reads as the
   header extending downward rather than as a separate white box dropped
   on top of the page. */
.mega {
  position: absolute;
  top: calc(100% + 0.8rem);
  left: 50%;
  translate: -50% 0;
  width: min(43rem, calc(100vw - 3rem));
  max-height: calc(100vh - var(--header-h) - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Opaque, not glass. A translucent panel let the hero headline read
     straight through the menu, which looked like a rendering fault rather
     than a material. The gold wash in the corner keeps it from being a
     flat rectangle. */
  background:
    radial-gradient(28rem 16rem at 100% 0%, rgba(212, 175, 55, 0.10), transparent 60%),
    linear-gradient(180deg, #17160F 0%, #121110 100%);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: var(--radius-xl);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 40px 80px -34px rgba(18, 17, 16, 0.75),
    0 4px 14px -6px rgba(18, 17, 16, 0.30);
  padding: 0.9rem;
  opacity: 0;
  visibility: hidden;
  transform-origin: top center;
  transform: translateY(-8px) scale(0.982);
  transition: opacity 280ms var(--ease-out), transform 380ms var(--ease-out),
              visibility 380ms var(--ease-out);
  z-index: 30;
}
/* The wide services menu is anchored to the pill, not to its own nav item,
   so it can be as wide as the page without running off the edge. */
.nav__item--mega { position: static; }
.mega--wide { width: min(74rem, calc(100vw - 3rem)); left: 50%; translate: -50% 0; }
/* Three cards that each carry a sentence of description need more room
   than three that carry only a city name. */
.mega--roomy { width: min(54rem, calc(100vw - 3rem)); }

/* Invisible bridge across the gap between the pill and the panel, so the
   pointer can travel down into the menu without passing through dead space
   and closing it. */
.mega::before {
  content: "";
  position: absolute;
  inset: -0.9rem 0 auto 0;
  height: 0.9rem;
}
/* A slim gold thread across the top edge, matching the pill's own
   highlight, so the panel reads as part of the same object. */
.mega::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--grad-gold);
  transform: scaleX(0);
  transition: transform 460ms var(--ease-out);
}

/* Opening is driven by JS (.is-open) so it can carry a hover-intent delay
   and so a click can toggle it deliberately. :focus-within keeps keyboard
   tabbing working, and the .nav--js guard — which the script adds only once
   it is actually running — keeps plain CSS hover as the fallback if the
   script never loads or throws. The menu is never unreachable. */
.nav:not(.nav--js) .nav__item:hover > .mega,
.nav__item:focus-within > .mega,
.nav__item.is-open > .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.nav:not(.nav--js) .nav__item:hover > .mega::after,
.nav__item:focus-within > .mega::after,
.nav__item.is-open > .mega::after { transform: scaleX(1); }

.mega__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16.5rem;
  gap: 0.9rem;
}
.mega__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.15rem 0.5rem;
}
.mega__col { min-width: 0; }
.mega__label {
  margin: 0.45rem 0 0.4rem 0.8rem;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
}

.mega__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.15rem;
}
.mega__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.mega__link {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.62rem 0.75rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  border: 1px solid transparent;
  opacity: 0;
  transform: translateY(5px);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}
.mega__link:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.09);
}
.mega__link--compact { align-items: center; }
.mega__body-text { min-width: 0; }

/* Cascading reveal: JS stamps --i (position within its own panel) on each
   link once at load, so they cascade in left-to-right, top-to-bottom the
   instant the panel opens rather than all popping in at once. Falls back to
   0ms — everything together — if JS never ran. */
.nav:not(.nav--js) .nav__item:hover > .mega .mega__link,
.nav__item:focus-within > .mega .mega__link,
.nav__item.is-open > .mega .mega__link {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 24ms);
}
@media (prefers-reduced-motion: reduce) {
  .mega__link { opacity: 1; transform: none; transition-delay: 0ms !important; }
  .mega { transition-duration: 0.01ms; transform: none; }
  .nav__indicator { transition: opacity 0.01ms; }
  .mobile-nav__collapse { transition: none; }
  .mobile-nav__panel a, .mobile-nav__panel-all { opacity: 1; transform: none; transition-delay: 0ms !important; }
  .site-header, .site-header::before, .site-header__inner { transition: none; }
}

.mega__icon {
  display: grid;
  place-items: center;
  width: 2.05rem; height: 2.05rem;
  border-radius: 9px;
  background: rgba(212, 175, 55, 0.11);
  border: 1px solid rgba(212, 175, 55, 0.24);
  color: var(--gold);
  flex: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.mega__link:hover .mega__icon {
  background: var(--grad-gold);
  color: #1a1408;
  border-color: transparent;
  transform: scale(1.04);
}

.mega__title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 620;
  letter-spacing: -0.018em;
  color: var(--on-dark);
  line-height: 1.35;
}
.mega__link:hover .mega__title { color: var(--gold-bright); }
.mega__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 0.12rem;
  font-size: 0.775rem;
  line-height: 1.48;
  color: var(--on-dark-3);
}

.mega__promo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.42rem;
  padding: 1.15rem;
  border-radius: var(--radius);
  background:
    radial-gradient(18rem 11rem at 110% -20%, rgba(212, 175, 55, 0.26), transparent 62%),
    linear-gradient(160deg, rgba(212, 175, 55, 0.10), rgba(212, 175, 55, 0.02));
  border: 1px solid rgba(212, 175, 55, 0.22);
  color: var(--on-dark-2);
}
.mega__promo-eyebrow {
  margin: 0;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
}
.mega__promo-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: -0.026em;
  line-height: 1.25;
  color: var(--white);
}
.mega__promo-text { margin: 0 0 0.45rem; font-size: 0.78rem; line-height: 1.5; color: var(--on-dark-3); }
.mega__promo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gold-bright);
  text-decoration: none;
}
.mega__promo-link:hover .arrow { transform: translateX(3px); }
.mega__promo-link .arrow { transition: transform var(--dur) var(--ease); }

.mega__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: 0.6rem;
  padding: 0.85rem 0.9rem 0.3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-size: var(--fs-xs);
  color: var(--on-dark-3);
}
.mega__foot .link-gold { color: var(--gold-bright); }

@media (max-width: 1340px) {
  .mega__body { grid-template-columns: minmax(0, 1fr); }
  .mega__promo { display: none; }
}

/* Header actions */
.header__actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: none;
}
.header__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--on-dark-2);
  text-decoration: none;
  padding: 0.48rem 0.8rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.04);
  white-space: nowrap;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.header__phone:hover {
  color: var(--gold-bright);
  background: rgba(212, 175, 55, 0.10);
  border-color: rgba(212, 175, 55, 0.32);
}
.header__phone svg { opacity: 0.8; }

/* The header's own CTA is the one gold object in a field of dark glass, so
   it needs no extra weight — just a rounded shape that echoes the pill and
   a lift on hover. */
.site-header .btn--gold {
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 18px -8px rgba(168, 134, 42, 0.65);
}
.site-header .btn--gold:hover { box-shadow: 0 10px 24px -8px rgba(168, 134, 42, 0.8); }

/* Hamburger */
.nav-toggle {
  display: none;
  width: 2.6rem; height: 2.6rem;
  flex: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  cursor: pointer;
  padding: 0;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav-toggle:hover { background: rgba(212, 175, 55, 0.14); border-color: rgba(212, 175, 55, 0.34); }
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 1.05rem;
  height: 2px;
  border-radius: 2px;
  background: var(--on-dark);
  transition: transform var(--dur-2) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer
   ----------------------------------------------------------------------
   A rounded sheet that hangs from the pill rather than a full-bleed panel
   welded to the top of the window, so the floating-header idea survives on
   phones instead of being contradicted the moment the menu opens. */
.mobile-nav {
  position: fixed;
  inset: var(--header-h) var(--gutter) max(1rem, env(safe-area-inset-bottom)) var(--gutter);
  z-index: 95;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.11);
  background:
    radial-gradient(34rem 20rem at 100% 0%, rgba(212, 175, 55, 0.13), transparent 62%),
    linear-gradient(180deg, #17160F 0%, #121110 100%);
  box-shadow: 0 40px 80px -30px rgba(18, 17, 16, 0.8);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-5) var(--sp-5) var(--sp-7);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.99);
  transform-origin: top center;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out),
              visibility var(--dur-2);
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
/* The drawer supplies its own padding, so the container inside it must not
   add a second set of gutters on top. */
.mobile-nav > .container { padding-inline: 0; max-width: none; }

.mobile-nav__group { border-bottom: 1px solid rgba(255, 255, 255, 0.09); }
.mobile-nav__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.95rem 0;
  background: none;
  border: 0;
  color: var(--on-dark);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 650;
  letter-spacing: -0.02em;
  cursor: pointer;
}
.mobile-nav__toggle svg { transition: transform var(--dur-2) var(--ease-out); opacity: 0.6; }
.mobile-nav__toggle[aria-expanded="true"] { color: var(--gold-bright); }
.mobile-nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); color: var(--gold); opacity: 1; }
.mobile-nav__toggle:hover { color: var(--gold-bright); }

/* Collapse wrapper: the grid-template-rows 0fr → 1fr trick animates a
   height that is otherwise impossible to transition (auto ↔ 0). The actual
   content — .mobile-nav__panel — needs overflow:hidden so it clips to
   whatever the row's current size is instead of spilling out of it while
   collapsed or mid-animation. */
.mobile-nav__collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms var(--ease-out);
}
.mobile-nav__collapse.is-open { grid-template-rows: 1fr; }

.mobile-nav__panel {
  overflow: hidden;
  min-height: 0;
  display: grid;
  gap: 0.1rem;
}
/* Padding only while open — on the base rule it would still add its own
   height to the "0fr" track (padding is inside the border-box, but a
   border-box element's auto height is never less than its padding), leaving
   a visible sliver when the accordion is supposed to be fully closed. */
.mobile-nav__collapse.is-open .mobile-nav__panel { padding-bottom: var(--sp-4); }
.mobile-nav__panel a,
.mobile-nav__panel-all {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.62rem 0.85rem;
  border-radius: var(--radius-sm);
  color: var(--on-dark-2);
  font-size: var(--fs-sm);
  text-decoration: none;
  opacity: 0;
  transform: translateX(-6px);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              transform 300ms var(--ease-out), opacity 300ms var(--ease-out);
}
/* The links only need to be visible once their track has actually opened —
   tying the fade to .is-open (rather than to hover, which mobile has none
   of) is what lets each one cascade in on tap instead of popping in as a
   block. */
.mobile-nav__collapse.is-open .mobile-nav__panel a,
.mobile-nav__collapse.is-open .mobile-nav__panel-all {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 22ms);
}
.mobile-nav__panel a:hover { background: rgba(255, 255, 255, 0.07); color: var(--white); }
.mobile-nav__panel a strong { color: var(--gold-bright); font-weight: 650; }

.mobile-nav__icon {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 8px;
  background: rgba(212, 175, 55, 0.11);
  border: 1px solid rgba(212, 175, 55, 0.24);
  color: var(--gold);
  flex: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mobile-nav__panel a:hover .mobile-nav__icon { background: rgba(212, 175, 55, 0.26); color: var(--gold-bright); }

/* The "All N …" row reads as an overview link, not one item among many, so
   it gets its own gold-tinted treatment rather than blending into the list
   it sits above. */
.mobile-nav__panel-all {
  justify-content: space-between;
  margin-bottom: 0.35rem;
  padding: 0.75rem 0.85rem;
  background: rgba(212, 175, 55, 0.09);
  border: 1px solid rgba(212, 175, 55, 0.22);
}
.mobile-nav__panel-all:hover { background: rgba(212, 175, 55, 0.15); }
.mobile-nav__panel-all .arrow { transition: transform var(--dur) var(--ease-out); }
.mobile-nav__panel-all:hover .arrow { transform: translateX(3px); }

.mobile-nav__label {
  margin: 0.85rem 0 0.2rem 0.85rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
}

.mobile-nav__link {
  display: block;
  padding: 0.95rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--on-dark);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 650;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.mobile-nav__link:hover { color: var(--gold-bright); }

.mobile-nav__cta { display: grid; gap: 0.65rem; margin-top: var(--sp-6); }
.mobile-nav__cta .btn { border-radius: var(--radius-pill); }
.mobile-nav__meta {
  margin-top: var(--sp-5);
  font-size: var(--fs-xs);
  line-height: 1.75;
  color: var(--on-dark-3);
}

/* Header breakpoints
   -----------------------------------------------------------------------
   The pill sits inside the wide container (1360px), so the desktop row has
   more room than it did in the old full-width bar. The switch to the drawer
   still happens at 1200px: below that the seven top-level links plus the
   phone number and the CTA start competing for space, and a cramped row
   reads worse than a clean hamburger. */
@media (max-width: 1199px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 720px) {
  .header__phone { display: none; }
  .header__actions .btn--sm { display: none; }
  :root { --header-pad: 0.6rem; --pill-h: 56px; }
  .site-header.is-scrolled { --header-pad: 0.4rem; --pill-h: 52px; }
}
@media (min-width: 1200px) {
  .mobile-nav { display: none; }
}

/* Laptop and up: a full-width bar, not a floating pill
   -----------------------------------------------------------------------
   The pill is the right shape on a phone, where the screen is narrow and an
   inset card reads as an app chrome. On a wide screen the same shape leaves
   a band of page showing above and beside it, and the header stops looking
   anchored. From 1024px the bar therefore spans the window edge to edge —
   solid, no rounding, no glass — while the content inside it stays on the
   same container grid as the rest of the page. */
@media (min-width: 1024px) {
  :root { --header-pad: 0px; --pill-h: 78px; }

  .site-header {
    background: linear-gradient(180deg, #17160F 0%, #121110 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .site-header.is-scrolled {
    --header-pad: 0px;
    --pill-h: 66px;
    border-bottom-color: rgba(255, 255, 255, 0.11);
    box-shadow: 0 14px 34px -20px rgba(18, 17, 16, 0.55);
  }
  /* The white scrim only exists to cover the gutters around a floating
     pill. A full-width bar has no gutters. */
  .site-header::before { display: none; }
  /* A gold thread along the bottom edge instead, which appears once the
     page has moved — the same cue the pill gave, in the bar's language. */
  .site-header::after {
    content: "";
    position: absolute;
    inset: auto 0 -1px 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.5), transparent);
    opacity: 0;
    transition: opacity var(--dur-2) var(--ease);
    pointer-events: none;
  }
  .site-header.is-scrolled::after { opacity: 1; }

  .site-header__inner {
    border-radius: 0;
    background: none;
    border: 0;
    box-shadow: none;
    padding-inline: 0;
  }
  .site-header.is-scrolled .site-header__inner {
    background: none;
    border: 0;
    box-shadow: none;
  }
  .site-header__inner::before { display: none; }

  /* The brand no longer needs its own inset now that the bar supplies the
     page gutter. */
  .brand { padding-left: 0; }
}

/* Below 380px the wordmark, the gutter and a 44px target are competing for
   very little room. Trim the wordmark rather than the touch target. */
@media (max-width: 380px) {
  .brand__text { font-size: 1.05rem; }
  .brand__sub { font-size: 0.5rem; letter-spacing: 0.03em; }
  .brand__mark { width: 32px; height: 32px; }
  .brand { gap: 0.45rem; }
  .site-header__inner { padding-inline: 0.45rem; }
}

/* --------------------------------------------------------------------------
   7. Breadcrumbs
   -------------------------------------------------------------------------- */
.breadcrumbs { font-size: var(--fs-xs); color: var(--muted); margin-bottom: var(--sp-5); }
.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0; margin: 0;
}
.breadcrumbs li { display: inline-flex; align-items: center; gap: 0.4rem; }
.breadcrumbs li + li::before { content: "/"; color: var(--muted-light); }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--gold-ink); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--ink); font-weight: 550; }

.page-hero .breadcrumbs { color: var(--muted); }

/* --------------------------------------------------------------------------
   8. Marquee, pills, chips, badges
   -------------------------------------------------------------------------- */
.marquee {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border-block: 1px solid var(--border);
  padding-block: 0.95rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--fs-sm);
  font-weight: 550;
  color: var(--muted);
  white-space: nowrap;
}
.marquee__item::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }

.pill-row, .chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill);
  background: var(--off-white);
  border: 1px solid var(--border);
  font-size: var(--fs-xs);
  font-weight: 550;
  color: var(--body);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
a.pill:hover { border-color: var(--gold); background: var(--gold-wash); color: var(--gold-ink); }
.section--dark .pill {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border-dark);
  color: var(--on-dark-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.7rem;
  border-radius: 7px;
  background: var(--gold-wash);
  border: 1px solid var(--gold-line);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--gold-ink);
  text-decoration: none;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--gold-bright);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   9. Hero + page hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--white);
  padding-block: clamp(3rem, 1.4rem + 6vw, 6rem) clamp(3rem, 1.5rem + 5vw, 5.5rem);
}
.hero::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 80%;
  z-index: -2;
  background:
    radial-gradient(46rem 26rem at 78% 18%, rgba(212, 175, 55, 0.20), transparent 62%),
    radial-gradient(38rem 22rem at 6% 0%, rgba(212, 175, 55, 0.10), transparent 60%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(18, 17, 16, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 17, 16, 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 78%);
  mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 78%);
  opacity: 0.85;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}
.hero__copy { max-width: 40rem; }
.hero__copy h1 { color: var(--ink); }
.hero__copy h1 em {
  font-style: normal;
  background: linear-gradient(120deg, #a8862a 0%, #d4af37 45%, #8a6a16 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__lede {
  font-size: clamp(1.0625rem, 0.98rem + 0.45vw, 1.22rem);
  line-height: 1.62;
  color: var(--muted);
  max-width: 34rem;
  margin-bottom: var(--sp-6);
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}
.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.4rem;
  list-style: none;
  padding: 0; margin: 0;
}
.hero-points li,
.hero__trust > * {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-xs);
  font-weight: 550;
  color: var(--muted);
}
.hero-points li svg, .hero__trust svg { color: var(--gold-deep); flex: none; }

.hero__media { position: relative; min-width: 0; }
.hero__frame {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--off-white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3.1;
}
.hero__frame img { width: 100%; height: 100%; object-fit: cover; }

.float-card {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1rem;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.float-card--tl { top: 1.1rem; left: -1.1rem; }
.float-card--br { bottom: 1.1rem; right: -1.1rem; }
.float-card__icon {
  display: grid;
  place-items: center;
  width: 2.15rem; height: 2.15rem;
  border-radius: 9px;
  background: var(--grad-gold-soft);
  border: 1px solid var(--gold-line);
  color: var(--gold-deep);
  flex: none;
}
.float-card__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1.1;
}
.float-card__label { display: block; font-size: 0.72rem; color: var(--muted); }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__media { order: -1; }
  .float-card--tl { left: 0.6rem; }
  .float-card--br { right: 0.6rem; }
}
@media (max-width: 520px) {
  .float-card { padding: 0.55rem 0.75rem; }
  .float-card__icon { display: none; }
}

/* Interior page hero — compact, light, with a gold hairline */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--warm-white);
  border-bottom: 1px solid var(--border);
  padding-block: clamp(2.25rem, 1.2rem + 3.6vw, 4rem);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: -60% -10% auto auto;
  width: 46rem; height: 46rem;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(212, 175, 55, 0.16), transparent 70%);
}
.page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  align-items: center;
}
.page-hero__lede {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.18rem);
  color: var(--muted);
  max-width: 58ch;
}
.page-hero__media img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  width: 100%;
}
@media (max-width: 900px) {
  .page-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .page-hero__media { display: none; }
}

/* --------------------------------------------------------------------------
   10. Stats & metrics
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 0.4rem + 1vw, 1.25rem);
}
.stats--stack { grid-template-columns: minmax(0, 1fr); gap: 0; }

.stat {
  position: relative;
  padding: clamp(1.15rem, 0.8rem + 1vw, 1.6rem);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.stat::before {
  content: "";
  position: absolute;
  top: 0; left: clamp(1.15rem, 0.8rem + 1vw, 1.6rem); right: clamp(1.15rem, 0.8rem + 1vw, 1.6rem);
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--grad-gold);
}
.stat:hover { border-color: var(--gold-line); box-shadow: var(--shadow); transform: translateY(-2px); }

.stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.4rem + 1.9vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.042em;
  line-height: 1.02;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.3rem;
}
.stat__label {
  display: block;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--muted);
}

.section--dark .stat, .cta-band .stat {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-dark);
}
.section--dark .stat__value { color: var(--white); }
.section--dark .stat__label { color: var(--on-dark-3); }

.stats-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: var(--sp-5) 0 0;
  font-size: var(--fs-xs);
  color: var(--muted-light);
  text-align: center;
}
.stats-note__icon { color: var(--gold-deep); flex: none; }

/* Dark metric band, e.g. inside a service page */
.metric-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.metric-band > * { background: var(--white); padding: var(--sp-5); }

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

/* --------------------------------------------------------------------------
   11. Cards
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: clamp(1.25rem, 0.9rem + 1.1vw, 1.75rem);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out),
              border-color var(--dur) var(--ease);
}
.card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--grad-gold);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--sand);
}
.card:hover::after { opacity: 1; }

.card__icon {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 12px;
  background: var(--grad-gold-soft);
  border: 1px solid var(--gold-line);
  color: var(--gold-deep);
  margin-bottom: 0.55rem;
  flex: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.card:hover .card__icon { background: var(--grad-gold); color: #1a1408; border-color: transparent; }

.card__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0;
}
.card__text { font-size: var(--fs-sm); color: var(--muted); margin: 0; flex: 1; }
.card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.35rem;
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--gold-ink);
}
.card__more svg, .card__more .arrow { transition: transform var(--dur) var(--ease); }
.card:hover .card__more svg, .card:hover .card__more .arrow { transform: translateX(3px); }

/* Location card — icon sits beside the title, copy runs full width below */
.card--location {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  grid-template-areas:
    "icon title"
    ".    text"
    ".    more";
  align-items: center;
  column-gap: 0.85rem;
  row-gap: 0.5rem;
  padding: clamp(1.1rem, 0.9rem + 0.7vw, 1.45rem);
}
.card--location .card__icon {
  grid-area: icon;
  width: 2.5rem; height: 2.5rem;
  margin: 0;
}
.card--location .card__title { grid-area: title; font-size: var(--fs-base); }
.card--location .card__text  { grid-area: text; }
.card--location .card__more  { grid-area: more; margin-top: 0; }

.section--dark .card, .cta-band .card {
  background: rgba(255, 255, 255, 0.045);
  border-color: var(--border-dark);
}
.section--dark .card:hover { border-color: rgba(212, 175, 55, 0.4); box-shadow: none; }
.section--dark .card__title { color: var(--on-dark); }
.section--dark .card__text { color: var(--on-dark-3); }
.section--dark .card__more { color: var(--gold-bright); }
.section--dark .card__icon {
  background: rgba(212, 175, 55, 0.14);
  border-color: rgba(212, 175, 55, 0.32);
  color: var(--gold-bright);
}

/* Generic panel */
.panel {
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.panel--gold {
  background: var(--grad-gold-soft);
  border-color: var(--gold-line);
  box-shadow: none;
}
.panel--gold h2, .panel--gold h3, .panel--gold .stat__value { color: var(--ink); }
.panel--gold p, .panel--gold li, .panel--gold .text-muted, .panel--gold .stat__label { color: #56471c; }
.panel--gold .stat { background: transparent; border: 0; padding: 0; }
.panel--gold .stat::before { display: none; }

/* A bare list of links inside a panel reads as a menu, not as prose. */
.panel .plain-list { display: grid; gap: 0; }
.panel .plain-list li + li { border-top: 1px solid var(--border); }
.panel .plain-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 0.6rem 0;
  font-size: var(--fs-sm);
  font-weight: 550;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.panel .plain-list a::after {
  content: "";
  width: 0.4rem; height: 0.4rem;
  border-top: 1.5px solid var(--gold);
  border-right: 1.5px solid var(--gold);
  transform: rotate(45deg);
  flex: none;
  opacity: 0.65;
}
.panel .plain-list a:hover { color: var(--gold-ink); padding-left: 0.25rem; }
.panel .plain-list a:hover::after { opacity: 1; }

.section--dark .panel {
  background: rgba(255, 255, 255, 0.045);
  border-color: var(--border-dark);
  box-shadow: none;
}

/* Case study card — media rail on the left, the story on the right */
.case {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  align-items: start;
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.case + .case { margin-top: clamp(1.5rem, 1rem + 1.6vw, 2.25rem); }
.case img { border-radius: var(--radius); border: 1px solid var(--border); }
.case > div { min-width: 0; }

.case__meta {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--muted);
}
.case__meta strong {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* The related-services list in the media rail reads as a row of tags. */
.case .plain-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.case .plain-list a {
  display: inline-flex;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--off-white);
  border: 1px solid var(--border);
  font-size: var(--fs-xs);
  font-weight: 550;
  color: var(--body);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.case .plain-list a:hover { border-color: var(--gold); background: var(--gold-wash); color: var(--gold-ink); }

.case__stage { border-left: 2px solid var(--gold-line); padding-left: var(--sp-5); }
.case__stage + .case__stage { margin-top: var(--sp-5); }
.case__stage h3,
.case__stage strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 0.35rem;
}
.case__stage p { font-size: var(--fs-sm); color: var(--muted); margin: 0; }

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

/* Use-case grid */
.use-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--sp-4); }
.use-case {
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.use-case h3 { font-size: var(--fs-md); margin-bottom: 0.4rem; }
.use-case p { font-size: var(--fs-sm); color: var(--muted); margin: 0; }

/* Founder / team */
.founder {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2rem);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.founder__photo {
  width: 8.5rem; height: 8.5rem;
  border-radius: var(--radius);
  object-fit: cover;
  /* The source photographs are portrait; anchoring the crop to the top keeps
     faces in frame inside the square. */
  object-position: top center;
  border: 1px solid var(--border);
}
.founder__role {
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 0.4rem;
}
/* Everything except the photo lives in one column, so the card can never
   zigzag between the two grid tracks when a founder has more content. */
.founder__body { min-width: 0; }
.founder__body > *:last-child { margin-bottom: 0; }

.founder__quote {
  margin: var(--sp-4) 0 0;
  padding: 0.15rem 0 0.15rem 1rem;
  border-left: 3px solid var(--gold);
  font-size: var(--fs-md);
  font-style: italic;
  color: var(--ink-soft);
}

.founder__label {
  margin: var(--sp-4) 0 0.6rem;
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Focus areas read as tags rather than a checklist — a checklist of six items
   next to a two-line quote is what unbalanced these two cards. */
.founder__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.founder__tags li {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--off-white);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  white-space: nowrap;
}

@media (max-width: 620px) {
  .founder { grid-template-columns: minmax(0, 1fr); }
  .founder__photo { width: 6rem; height: 6rem; }
}

/* Organisation / NAP */
.org, .about-nap {
  display: grid;
  gap: 0.35rem;
  padding: var(--sp-5);
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-style: normal;
  color: var(--body);
}
.org strong, .about-nap strong { color: var(--ink); }

/* Contact list */
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-4); }
.contact-list li { display: flex; gap: 0.85rem; align-items: flex-start; }
.contact-list__icon {
  display: grid;
  place-items: center;
  width: 2.35rem; height: 2.35rem;
  border-radius: 10px;
  background: var(--grad-gold-soft);
  border: 1px solid var(--gold-line);
  color: var(--gold-deep);
  flex: none;
}
.contact-list a { color: var(--ink); text-decoration: none; font-weight: 550; }
.contact-list a:hover { color: var(--gold-ink); text-decoration: underline; }

/* Aside used on service pages */
.service-aside {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  display: grid;
  gap: var(--sp-4);
}

/* Related links */
.related-block {
  padding: clamp(1.5rem, 1rem + 1.5vw, 2rem);
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.related-block__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: var(--sp-4);
}
.related-strip { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Table of contents */
.toc {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  font-size: var(--fs-sm);
}
.toc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.1rem; }
.toc a {
  display: block;
  padding: 0.4rem 0.75rem;
  border-left: 2px solid var(--border);
  color: var(--muted);
  text-decoration: none;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.toc a:hover { color: var(--ink); border-left-color: var(--sand-deep); }
.toc a.is-active { color: var(--gold-ink); border-left-color: var(--gold); font-weight: 600; }

/* --------------------------------------------------------------------------
   12. Steps & timeline
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: clamp(1rem, 0.6rem + 1.2vw, 1.5rem); counter-reset: step; }
.steps--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.step {
  counter-increment: step;
  position: relative;
  padding: clamp(1.25rem, 0.9rem + 1vw, 1.65rem);
  padding-top: 2.9rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: clamp(1.25rem, 0.9rem + 1vw, 1.65rem);
  left: clamp(1.25rem, 0.9rem + 1vw, 1.65rem);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--gold-ink);
}
.step h3 { font-size: var(--fs-md); margin-bottom: 0.4rem; }
.step p { font-size: var(--fs-sm); color: var(--muted); margin: 0; }

.section--dark .step { background: rgba(255, 255, 255, 0.045); border-color: var(--border-dark); }
.section--dark .step::before { color: var(--gold-bright); }
.section--dark .step h3 { color: var(--on-dark); }
.section--dark .step p { color: var(--on-dark-3); }

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

.timeline { display: grid; gap: 0; position: relative; }
.timeline__item {
  position: relative;
  padding: 0 0 var(--sp-6) var(--sp-7);
  border-left: 2px solid var(--border);
}
.timeline__item:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline__item::before {
  content: "";
  position: absolute;
  left: -0.47rem; top: 0.3rem;
  width: 0.85rem; height: 0.85rem;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--gold);
}
.timeline__item h3 { font-size: var(--fs-md); margin-bottom: 0.3rem; }
.timeline__item p { font-size: var(--fs-sm); color: var(--muted); }

/* --------------------------------------------------------------------------
   13. Feature rows
   -------------------------------------------------------------------------- */
.feature-row { padding-block: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem); }
.feature-row + .feature-row { border-top: 1px solid var(--border); }
.feature-row__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.feature-row:nth-child(even) .feature-row__media { order: -1; }
.feature-row__media { min-width: 0; }
.feature-row__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
@media (max-width: 900px) {
  .feature-row__inner { grid-template-columns: minmax(0, 1fr); }
  .feature-row:nth-child(even) .feature-row__media { order: 0; }
}

/* --------------------------------------------------------------------------
   14. Before / after
   -------------------------------------------------------------------------- */
.ba-figure { margin: 0; }
.ba {
  --pos: 50%;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  touch-action: none;
  cursor: ew-resize;
  aspect-ratio: 4 / 3;
  background: var(--off-white);
}
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__after { clip-path: inset(0 0 0 var(--pos)); }
.ba__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos);
  width: 2px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(18, 17, 16, 0.18);
  pointer-events: none;
}
.ba__grip {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  width: 2.35rem; height: 2.35rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow-md);
}
.ba__label {
  position: absolute;
  bottom: 0.85rem;
  padding: 0.28rem 0.7rem;
  border-radius: var(--radius-pill);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  pointer-events: none;
}
.ba__label--before { left: 0.85rem; background: rgba(18, 17, 16, 0.82); color: var(--white); }
.ba__label--after  { right: 0.85rem; background: var(--grad-gold); color: #1a1408; }
.ba__range {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  opacity: 0;
  height: 100%;
  margin: 0;
  cursor: ew-resize;
}
.ba-figure figcaption {
  margin-top: 0.7rem;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.gallery__caption {
  display: block;
  padding: 0.85rem 1rem 1rem;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 650;
  letter-spacing: -0.018em;
  color: var(--ink);
  background: var(--white);
  border-top: 1px solid var(--border);
}
.gallery__caption span {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}
.section--dark .gallery__caption { background: rgba(255, 255, 255, 0.05); border-color: var(--border-dark); color: var(--on-dark); }
.section--dark .gallery__caption span { color: var(--on-dark-3); }

/* --------------------------------------------------------------------------
   15. Gallery & showcase
   -------------------------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(0.85rem, 0.5rem + 1vw, 1.35rem);
}
.gallery__item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--off-white);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.gallery__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.gallery__item img { width: 100%; height: auto; display: block; }
.gallery figure { margin: 0; }
.section--dark .gallery__item { border-color: var(--border-dark); background: rgba(255, 255, 255, 0.04); }

/* --------------------------------------------------------------------------
   16. FAQ & forms
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: 0; border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__heading { margin: 0; }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  width: 100%;
  padding: 1.15rem 0;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--ink);
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.faq__q:hover { color: var(--gold-ink); }
.faq__icon {
  position: relative;
  flex: none;
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  border: 1px solid var(--border-2);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform var(--dur-2) var(--ease);
}
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  background: currentColor;
  border-radius: 2px;
  transition: opacity var(--dur) var(--ease), transform var(--dur-2) var(--ease);
}
.faq__icon::before { width: 0.65rem; height: 1.6px; }
.faq__icon::after  { width: 1.6px; height: 0.65rem; }
.faq__q[aria-expanded="true"] .faq__icon { background: var(--grad-gold); border-color: transparent; color: #1a1408; transform: rotate(180deg); }
.faq__q[aria-expanded="true"] .faq__icon::after { opacity: 0; }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-2) var(--ease);
}
.faq__a > * { overflow: hidden; }
.faq__a[data-open="true"] { grid-template-rows: 1fr; }
.faq__a p {
  font-size: var(--fs-sm);
  color: var(--muted);
  max-width: 68ch;
  padding-bottom: 1.15rem;
  margin: 0;
}
.faq__a[data-open="true"] p { padding-top: 0; }

.section--dark .faq { border-color: var(--border-dark); }
.section--dark .faq__item { border-color: var(--border-dark); }
.section--dark .faq__q { color: var(--on-dark); }
.section--dark .faq__icon { border-color: var(--border-dark-2); }
.section--dark .faq__a p { color: var(--on-dark-3); }

/* Forms */
.form-card {
  padding: clamp(1.5rem, 1rem + 1.8vw, 2.35rem);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
.form-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.028em;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.form-card__intro { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--sp-5); }
.form-card__foot {
  margin-top: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--muted-light);
  text-align: center;
}

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.field--full { grid-column: 1 / -1; }
@media (max-width: 620px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

.field { display: grid; gap: 0.35rem; }
.field label {
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.req { color: var(--danger); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.72rem 0.9rem;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-xs);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { min-height: 7rem; resize: vertical; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236d675f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.25rem;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--danger); }
.field input::placeholder, .field textarea::placeholder { color: var(--muted-light); }

.error { font-size: var(--fs-xs); color: var(--danger); min-height: 0; }

.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--muted);
}
.consent input { width: 1rem; height: 1rem; margin-top: 0.22rem; accent-color: var(--gold-deep); flex: none; }

.form-status {
  display: none;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-xs);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
}
.form-status.is-visible { display: block; }
.form-status--success { background: #e8f5ee; color: var(--success); border: 1px solid #bfe3ce; }
.form-status--error   { background: #fceeee; color: var(--danger); border: 1px solid #f0cccc; }

/* Dark-band form: the card stays white so the fields keep their contrast */
.section--dark .form-card { background: var(--white); border-color: rgba(255, 255, 255, 0.14); }
.section--dark .form-card p, .section--dark .form-card__intro { color: var(--muted); }
.section--dark .form-card__foot { color: var(--muted-light); }

/* --------------------------------------------------------------------------
   17. CTA bands
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
  background-image:
    radial-gradient(52rem 26rem at 82% -20%, rgba(212, 175, 55, 0.18), transparent 62%),
    radial-gradient(40rem 22rem at 0% 120%, rgba(212, 175, 55, 0.09), transparent 60%);
  color: var(--on-dark-2);
  padding-block: clamp(3rem, 1.8rem + 4vw, 5rem);
}
.cta-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  align-items: center;
}
.cta-band h2 { color: var(--white); margin-bottom: var(--sp-4); }
.cta-band .lede, .cta-band p { color: var(--on-dark-2); }
.cta-band .eyebrow { color: var(--gold); }
.cta-band__actions { display: grid; gap: 0.7rem; justify-items: stretch; }
.cta-band__actions .btn { width: 100%; }
.cta-band__note { font-size: var(--fs-xs); color: var(--on-dark-3); margin: 0.2rem 0 0; text-align: center; }
.cta-band__note a { color: var(--gold-bright); text-decoration: none; font-weight: 600; }

.cta-band--gold {
  background: var(--grad-gold);
  background-image: none;
  color: #2a2005;
}
.cta-band--gold h2, .cta-band--gold .lede, .cta-band--gold p { color: #1a1408; }
.cta-band--gold .eyebrow { color: #4a3a08; }
.cta-band--gold .eyebrow::before { background: #4a3a08; }
.cta-band--gold .btn--gold { background: var(--ink); color: var(--gold-bright); box-shadow: var(--shadow-md); }
.cta-band--gold .btn--gold:hover { background: var(--charcoal-2); color: var(--gold-bright); }
.cta-band--gold .btn--outline { color: #1a1408; border-color: rgba(26, 20, 8, 0.35); background: transparent; }
.cta-band--gold .btn--outline:hover { background: rgba(26, 20, 8, 0.08); border-color: #1a1408; color: #1a1408; }
.cta-band--gold .cta-band__note { color: #4a3a08; }
.cta-band--gold .cta-band__note a { color: #1a1408; }

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

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  background: #0b0a09;
  color: var(--on-dark-3);
  font-size: var(--fs-sm);
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) var(--sp-6);
  border-top: 1px solid rgba(212, 175, 55, 0.18);
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 0.8rem + 2.4vw, 3rem);
}

.footer__brand .brand { margin-bottom: var(--sp-4); }
.footer__brand p { color: var(--on-dark-3); max-width: 30ch; margin-bottom: var(--sp-5); }

.footer__nap {
  font-style: normal;
  line-height: 1.85;
  font-size: var(--fs-xs);
  color: var(--on-dark-3);
}
.footer__nap strong { display: block; color: var(--on-dark-2); font-weight: 650; margin-bottom: 0.2rem; }
.footer__nap a { color: var(--on-dark-2); text-decoration: none; }
.footer__nap a:hover { color: var(--gold-bright); }

.footer__social {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0;
  margin: var(--sp-5) 0 0;
}
.footer__social a {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.7rem;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  color: var(--on-dark-2);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.footer__social a:hover { border-color: var(--gold); color: var(--gold-bright); }

.footer__top { position: relative; padding-right: 0.9rem; }
.footer__top::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 0.4rem; height: 0.4rem;
  margin-top: -0.1rem;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(-45deg);
}

.footer__col h3 {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-4);
}
.footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.footer__col a {
  color: var(--on-dark-3);
  text-decoration: none;
  font-size: var(--fs-xs);
  line-height: 1.5;
  transition: color var(--dur) var(--ease);
}
.footer__col a:hover { color: var(--white); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: clamp(2rem, 1.4rem + 2vw, 3.25rem);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-dark);
  font-size: var(--fs-xs);
  color: var(--on-dark-3);
}
.footer__bottom p { margin: 0; }
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.footer__legal a { color: var(--on-dark-3); text-decoration: none; }
.footer__legal a:hover { color: var(--gold-bright); }

@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   19. Sticky CTA (mobile)
   -------------------------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(11, 10, 9, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(212, 175, 55, 0.22);
}
.sticky-cta .btn--gold { flex: 1; }
@media (max-width: 720px) {
  .sticky-cta { display: flex; }
  body { padding-bottom: 4.25rem; }
}
body.nav-open .sticky-cta { display: none; }

/* --------------------------------------------------------------------------
   20. Blog
   -------------------------------------------------------------------------- */

/* Post card
   -----------------------------------------------------------------------
   One card, one link. The title carries a stretched anchor over the whole
   card, so the thumbnail is not a second link to the same page and the
   entire surface stays clickable. Depth comes from a layered shadow plus a
   gradient hairline that resolves on hover — not from a heavy border. */
.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  color: inherit;
  box-shadow:
    0 0 0 1px var(--border),
    0 1px 2px rgba(18, 17, 16, 0.04),
    0 10px 24px -14px rgba(18, 17, 16, 0.14);
  transform: translate3d(0, 0, 0);
  transition:
    transform 520ms var(--ease-out),
    box-shadow 520ms var(--ease-out);
  will-change: transform;
}

/* Gradient hairline. Painted as a masked border so it can fade in without
   shifting the layout by a pixel. */
.post-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, var(--gold-bright), var(--gold) 35%, transparent 62%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 380ms var(--ease);
  pointer-events: none;
  z-index: 3;
}

.post-card:hover,
.post-card:focus-within {
  transform: translate3d(0, -6px, 0);
  box-shadow:
    0 0 0 1px transparent,
    0 4px 10px rgba(18, 17, 16, 0.05),
    0 26px 52px -18px rgba(18, 17, 16, 0.26);
}
.post-card:hover::before,
.post-card:focus-within::before { opacity: 1; }

/* Media
   --------------------------------------------------------------------- */
.post-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background:
    linear-gradient(135deg, var(--cream) 0%, var(--off-white) 55%, var(--sand) 100%);
  flex: none;
}
.post-card__media picture { display: block; height: 100%; }
.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.001);
  transition: transform 900ms var(--ease-out), filter 520ms var(--ease);
}
.post-card:hover .post-card__media img,
.post-card:focus-within .post-card__media img {
  transform: scale(1.06);
}

/* A soft scrim at the foot of the image so the card body never appears to
   float away from the photograph, and so the badge stays legible over a
   light or a dark frame. */
.post-card__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(180deg, transparent, rgba(14, 13, 12, 0.42));
  opacity: 0.85;
  transition: opacity 420ms var(--ease);
  pointer-events: none;
}
.post-card:hover .post-card__media::after { opacity: 0.62; }

.post-card__badge {
  position: absolute;
  left: 0.85rem;
  bottom: 0.85rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.7rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
          backdrop-filter: blur(6px) saturate(1.2);
  border: 1px solid rgba(212, 175, 55, 0.42);
  color: var(--gold-ink);
  font-size: 0.6875rem;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(18, 17, 16, 0.18);
  transition: transform 420ms var(--ease-out);
}
.post-card:hover .post-card__badge { transform: translateY(-2px); }

/* Body
   --------------------------------------------------------------------- */
.post-card__body {
  padding: clamp(1.15rem, 0.9rem + 0.7vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}

.post-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -0.024em;
  color: var(--ink);
  margin: 0;
  line-height: 1.3;
  text-wrap: balance;
}
.post-card__link {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 460ms var(--ease-out);
}
/* Stretched hit area — the whole card follows this one link. */
.post-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}
.post-card:hover .post-card__link { background-size: 100% 2px; }
.post-card__link:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 3px;
}

.post-card__excerpt {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin: 0;
  flex: 1;
  line-height: 1.6;
}

.post-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: var(--fs-xs);
  color: var(--muted-light);
  margin: 0;
}
.post-card__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

/* The read cue is decorative reinforcement of the stretched link, not a
   second link. It slides on hover and is hidden from assistive tech. */
.post-card__cue {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.15rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--gold-ink);
}
.post-card__cue .arrow,
.post-card__cue svg { transition: transform 420ms var(--ease-out); }
.post-card:hover .post-card__cue .arrow,
.post-card:hover .post-card__cue svg { transform: translateX(5px); }

/* Post cards on an ink section */
.section--dark .post-card,
.section--charcoal .post-card {
  background: rgba(255, 255, 255, 0.045);
  box-shadow: 0 0 0 1px var(--border-dark);
}
.section--dark .post-card__title { color: var(--on-dark); }
.section--dark .post-card__excerpt { color: var(--on-dark-3); }
.section--dark .post-card__cue { color: var(--gold-bright); border-top-color: var(--border-dark); }

/* Article hero image
   --------------------------------------------------------------------- */
.article-hero {
  display: block;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--sp-6);
  box-shadow:
    0 0 0 1px var(--border),
    0 24px 56px -22px rgba(18, 17, 16, 0.34);
}
.article-hero__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16rem;
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: start;
}
@media (max-width: 980px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .article-layout .toc { position: static; order: -1; }
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.15rem;
  font-size: var(--fs-xs);
  color: var(--muted);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-6);
}
.article-body { font-size: var(--fs-md); }
.article-body > * + * { margin-top: var(--sp-5); }
.article-body h2 { margin-top: var(--sp-8); }
.article-body h3 { margin-top: var(--sp-6); }
.article-body ul, .article-body ol { padding-left: 1.35rem; }
.article-body li { margin-bottom: 0.5rem; }

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: var(--sp-8);
}
.pagination a, .pagination span {
  display: grid;
  place-items: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--body);
  text-decoration: none;
}
.pagination a:hover { border-color: var(--ink); color: var(--ink); }
.pagination .is-current { background: var(--ink); border-color: var(--ink); color: var(--gold-bright); }

/* --------------------------------------------------------------------------
   21. Utility pages (404, thank-you, errors)
   -------------------------------------------------------------------------- */
.error-page { text-align: center; padding-block: clamp(4rem, 2rem + 8vw, 8rem); }
.error-page__code {
  font-family: var(--font-display);
  font-size: clamp(4rem, 2rem + 10vw, 8rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: var(--sp-4);
}
.thank-you { text-align: center; padding-block: clamp(3.5rem, 2rem + 6vw, 6.5rem); }
.thank-you__mark {
  display: grid;
  place-items: center;
  width: 4.5rem; height: 4.5rem;
  margin: 0 auto var(--sp-5);
  border-radius: 50%;
  background: var(--grad-gold);
  color: #1a1408;
  box-shadow: var(--shadow-gold);
}

/* --------------------------------------------------------------------------
   22. Motion
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js [data-reveal]:nth-child(2) { transition-delay: 60ms; }
.js [data-reveal]:nth-child(3) { transition-delay: 120ms; }
.js [data-reveal]:nth-child(4) { transition-delay: 180ms; }
.js [data-reveal]:nth-child(5) { transition-delay: 240ms; }
.js [data-reveal]:nth-child(6) { transition-delay: 300ms; }

@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;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   23. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .mobile-nav, .sticky-cta, .cta-band, .marquee, .site-footer,
  .read-progress { display: none !important; }
  body { color: #000; background: #fff; font-size: 11pt; }
  a { color: #000; text-decoration: underline; }
  .section { padding-block: 1rem; }
  .card, .panel, .step { border: 1px solid #ccc; box-shadow: none; }
}

/* --------------------------------------------------------------------------
   24. Refined surfaces & motion  (v4, 2026-09)
   --------------------------------------------------------------------------
   Everything here is additive polish over sections 1–23. Three rules held
   throughout:

     • Only transform and opacity are animated. No animation touches width,
       height, top/left or box-shadow spread on a scroll handler, so nothing
       here can cause a layout pass while the page is moving.
     • Every effect degrades to a static, complete design. With JavaScript
       off, or with prefers-reduced-motion set, the page is finished — not
       blank, not half-faded.
     • Hover-only flourishes are gated behind (hover: hover), so a touch
       device never gets a state it cannot leave.
   -------------------------------------------------------------------------- */

/* Staggered reveal
   -----------------------------------------------------------------------
   The reveal itself lives in section 22. This adds direction variants and a
   longer, index-driven stagger for grids, set by JS as --i so it survives
   any number of children (the nth-child rules only reached six). */
.js [data-reveal] { transition-delay: calc(var(--i, 0) * 70ms); }

.js [data-reveal="left"]  { transform: translate3d(-22px, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(22px, 0, 0); }
.js [data-reveal="scale"] { transform: scale(0.965); opacity: 0; }
.js [data-reveal="blur"]  { filter: blur(7px); }

.js [data-reveal="left"].is-visible,
.js [data-reveal="right"].is-visible,
.js [data-reveal="scale"].is-visible { transform: none; }
.js [data-reveal="blur"] {
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out),
              filter 700ms var(--ease-out);
}
.js [data-reveal="blur"].is-visible { filter: none; }

/* Grid stagger: a diagonal sweep rather than a strict left-to-right march. */
.grid--stagger > * { --i: 0; }

/* Pointer-tracked spotlight
   -----------------------------------------------------------------------
   JS writes --mx / --my as percentages of the card. The gradient is painted
   on a pseudo-element at opacity 0 and only fades in, so a card that never
   receives a pointer event costs nothing. */
@media (hover: hover) and (pointer: fine) {
  .card,
  .panel,
  .post-card { --mx: 50%; --my: 0%; }

  .card::before,
  .post-card .post-card__body::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
      22rem 22rem at var(--mx) var(--my),
      rgba(212, 175, 55, 0.13),
      transparent 68%
    );
    opacity: 0;
    transition: opacity 420ms var(--ease);
    pointer-events: none;
    z-index: 0;
  }
  .card:hover::before,
  .post-card:hover .post-card__body::before { opacity: 1; }

  .card > *,
  .post-card__body > * { position: relative; z-index: 1; }

  /* Tilt. JS sets --rx / --ry in degrees; the card keeps its hover lift
     through the same transform so the two never fight. */
  [data-tilt] {
    transform:
      perspective(900px)
      rotateX(var(--rx, 0deg))
      rotateY(var(--ry, 0deg))
      translate3d(0, var(--lift, 0px), 0);
    transition: transform 480ms var(--ease-out), box-shadow 520ms var(--ease-out);
  }
  [data-tilt].is-tilting { transition: transform 90ms linear, box-shadow 520ms var(--ease-out); }
  .post-card[data-tilt]:hover { --lift: -6px; transform:
      perspective(900px)
      rotateX(var(--rx, 0deg))
      rotateY(var(--ry, 0deg))
      translate3d(0, -6px, 0); }
}

/* Card — deeper, quieter, more product-like
   --------------------------------------------------------------------- */
.card {
  isolation: isolate;
  background:
    linear-gradient(180deg, #ffffff 0%, var(--warm-white) 100%);
  box-shadow:
    0 1px 2px rgba(18, 17, 16, 0.035),
    0 8px 20px -14px rgba(18, 17, 16, 0.16);
  transform: translate3d(0, 0, 0);
}
.card:hover {
  transform: translate3d(0, -4px, 0);
  border-color: var(--gold-line);
  box-shadow:
    0 3px 8px rgba(18, 17, 16, 0.05),
    0 22px 44px -20px rgba(18, 17, 16, 0.26);
}
/* The existing ::after gold rule at the top of the card now wipes in from the
   left instead of simply fading — reads as deliberate rather than as a state
   change that got missed. */
.card::after {
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 1;
  transition: transform 520ms var(--ease-out);
}
.card:hover::after { transform: scaleX(1); opacity: 1; }

.card__icon { transition: background 320ms var(--ease), color 320ms var(--ease), transform 520ms var(--ease-out); }
.card:hover .card__icon { transform: translateY(-2px) rotate(-3deg); }

/* Panel gets the same layered depth so panels and cards read as one family. */
.panel {
  position: relative;
  isolation: isolate;
  box-shadow:
    0 1px 2px rgba(18, 17, 16, 0.035),
    0 10px 26px -18px rgba(18, 17, 16, 0.18);
  transition: box-shadow 520ms var(--ease-out), transform 520ms var(--ease-out);
}

/* Reading progress
   -----------------------------------------------------------------------
   Fixed bar under the header on article pages. scaleX only, driven from a
   rAF-throttled scroll listener. */
.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 60;
  background: transparent;
  pointer-events: none;
}
.read-progress__bar {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--grad-gold);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.55);
  will-change: transform;
}

/* Section entrance rule
   -----------------------------------------------------------------------
   A hairline that draws itself across the top of a section as it arrives.
   Purely decorative; absent without JS. */
.section--rule::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--gold-line) 22%, var(--gold) 50%, var(--gold-line) 78%, transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 1100ms var(--ease-out);
}
.section--rule.is-visible::before { transform: scaleX(1); }

/* Image loading state
   -----------------------------------------------------------------------
   A quiet shimmer on the media frame until the image decodes, so a slow
   connection shows a considered placeholder rather than a grey hole. JS adds
   .is-loaded; the shimmer is on the container, so nothing shifts. */
.js .post-card__media::before,
.js .media-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    var(--off-white) 20%,
    var(--cream) 38%,
    var(--off-white) 56%
  );
  background-size: 220% 100%;
  animation: shimmer 1.5s linear infinite;
  opacity: 1;
  transition: opacity 480ms var(--ease);
  pointer-events: none;
}
.js .post-card__media.is-loaded::before,
.js .media-frame.is-loaded::before { opacity: 0; }

@keyframes shimmer {
  from { background-position: 130% 0; }
  to   { background-position: -30% 0; }
}

/* Images fade up as they decode rather than snapping in.
   Scoped to .js — the class is written by an inline script in <head>, so a
   browser that never runs the site script leaves every image fully opaque
   and nothing can hide behind a state that will not arrive. */
.js .post-card__media img,
.js .article-hero__img {
  opacity: 0;
  transition: opacity 620ms var(--ease-out), transform 900ms var(--ease-out);
  animation: force-visible 0s linear 2.5s forwards;
}
.js .post-card__media.is-loaded img,
.js .article-hero.is-loaded .article-hero__img { opacity: 1; animation: none; }

/* Belt and braces: if the load event is missed entirely — a cached image that
   decoded before the listener attached — the keyframe above reveals it anyway. */
@keyframes force-visible { to { opacity: 1; } }

/* Chips — active state and hover motion
   --------------------------------------------------------------------- */
.chip {
  transition: transform 320ms var(--ease-out), background-color 240ms var(--ease),
              border-color 240ms var(--ease), color 240ms var(--ease);
}
.chip:hover { transform: translateY(-2px); }

/* Buttons — a light sheen that sweeps once on hover
   --------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  .btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.42) 50%, transparent 65%);
    transform: translateX(-120%);
    transition: transform 780ms var(--ease-out);
  }
  .btn:hover::after { transform: translateX(120%); }
  .btn { transition: transform 260ms var(--ease-out), background-color 240ms var(--ease),
                     border-color 240ms var(--ease), color 240ms var(--ease),
                     box-shadow 320ms var(--ease); }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0); }
}

/* Article body polish
   --------------------------------------------------------------------- */
.article-body h2 {
  position: relative;
  padding-top: 0.35rem;
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.article-body h3 { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

.article-body > p:first-of-type {
  font-size: var(--fs-lg);
  line-height: 1.65;
  color: var(--slate);
}
.article-body a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 200ms var(--ease);
}
.article-body img,
.article-body picture {
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--border), 0 14px 32px -20px rgba(18, 17, 16, 0.3);
}
.article-body blockquote {
  position: relative;
  margin-inline: 0;
  padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6);
  border-radius: var(--radius);
  background: var(--grad-gold-soft);
  border-left: 3px solid var(--gold);
  color: #56471c;
  font-size: var(--fs-md);
}
.article-body blockquote p:last-child { margin-bottom: 0; }

/* Table of contents — active tracking already exists in JS; this gives it a
   visible rail so the reader can see where they are at a glance. */
.toc { position: sticky; top: calc(var(--header-h) + 1.25rem); }
.toc ol { border-left: 1px solid var(--border); }
.toc a {
  display: block;
  padding: 0.3rem 0 0.3rem 0.85rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  transition: border-color 260ms var(--ease), color 260ms var(--ease),
              transform 260ms var(--ease-out);
}
.toc a:hover { transform: translateX(2px); }
.toc a.is-active { border-left-color: var(--gold); color: var(--ink); font-weight: 600; }

/* Focus visibility — one consistent ring everywhere
   --------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Reduced motion — hard stop
   -----------------------------------------------------------------------
   Section 22 already neutralises durations. These rules additionally strip
   the transforms and the infinite shimmer, which a duration override alone
   would leave running. */
@media (prefers-reduced-motion: reduce) {
  [data-tilt] { transform: none !important; }
  .post-card:hover, .card:hover, .btn:hover, .chip:hover { transform: none !important; }
  .post-card__media::before, .media-frame::before { animation: none; opacity: 0; }
  .post-card__media img, .article-hero__img { opacity: 1 !important; }
  .card::after { transform: scaleX(1); }
  .section--rule::before { transform: scaleX(1); }
  .read-progress { display: none; }
}

/* No JavaScript — nothing may stay hidden
   --------------------------------------------------------------------- */
html:not(.js) [data-reveal] { opacity: 1; transform: none; }
html:not(.js) .post-card__media img,
html:not(.js) .article-hero__img { opacity: 1; }

/* --------------------------------------------------------------------------
   25. Home section refresh  (v5, 2026-09)
   --------------------------------------------------------------------------
   The three lead-in sections on the home page — Services, Solutions and
   Locations — were correct but flat: a pale gold square, a title, two lines
   and a text link, repeated nine times on an off-white field. Nothing in
   that composition told the eye where to start.

   What changes here, and why:

     • The eyebrow becomes a badge rather than a rule-and-caps label. A
       bordered pill gives the section head an anchor, and it survives on a
       dark background where a hairline rule disappears.
     • Card icons invert. A dark tile with a gold glyph carries the brand's
       own contrast — the same black-and-gold the header runs on — where the
       old cream tile on a white card had almost none.
     • Every card gets a footer rule, so nine cards of unequal copy length
       still line up along a shared baseline instead of drifting.
     • The arrow moves into a circle. It reads as a control rather than as
       punctuation, and it gives the hover state somewhere to land.
     • The Solutions band goes dark. Three sections of light surface in a
       row flatten the page; the products are the company's own software and
       deserve to be punctuated rather than listed.
   -------------------------------------------------------------------------- */

/* Eyebrow → badge
   ----------------------------------------------------------------------- */
.eyebrow {
  gap: 0.5rem;
  padding: 0.34rem 0.85rem 0.34rem 0.7rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--gold-line);
  background: var(--gold-wash);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  line-height: 1.4;
  margin-bottom: var(--sp-4);
}
.eyebrow::before {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--grad-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.16);
}
.section--dark .eyebrow,
.section--charcoal .eyebrow,
.cta-band .eyebrow {
  background: rgba(212, 175, 55, 0.10);
  border-color: rgba(212, 175, 55, 0.28);
  color: var(--gold);
}

/* Section head rhythm
   -----------------------------------------------------------------------
   A centred lede that runs to 62ch reads as three ragged lines under a
   two-line heading. Narrower is calmer. */
.section-head--center .lede { margin-inline: auto; max-width: 54ch; }
.section-head--center { max-width: 46rem; }

/* An optional wash behind a section, for the one or two places on a page
   that should feel like a moment rather than a list. */
.section--glow { position: relative; isolation: isolate; }
.section--glow::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 70%;
  background: radial-gradient(58rem 24rem at 50% -6%, rgba(212, 175, 55, 0.14), transparent 66%);
  pointer-events: none;
  z-index: -1;
}

/* Cards
   ----------------------------------------------------------------------- */
.card { padding: clamp(1.35rem, 0.95rem + 1.2vw, 1.85rem); }

/* Warm light pooling in the top corner on hover — the card catches the
   light rather than simply changing colour. */
.card::before {
  content: "";
  position: absolute;
  top: -6rem;
  right: -5rem;
  width: 16rem;
  height: 13rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(212, 175, 55, 0.20), transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 460ms var(--ease-out);
  z-index: 0;
}
.card:hover::before { opacity: 1; }
.card > * { position: relative; z-index: 1; }

.card__icon {
  width: 3rem; height: 3rem;
  border-radius: 14px;
  background: linear-gradient(150deg, #2a2620 0%, #141310 100%);
  border: 1px solid rgba(212, 175, 55, 0.30);
  color: var(--gold);
  box-shadow: 0 6px 16px -10px rgba(18, 17, 16, 0.55);
  margin-bottom: 0.7rem;
}
.card:hover .card__icon {
  background: var(--grad-gold);
  color: #1a1408;
  border-color: transparent;
  box-shadow: 0 10px 22px -10px rgba(168, 134, 42, 0.65);
}

.card__title { font-size: 1.075rem; line-height: 1.3; }
.card__text { line-height: 1.6; }

/* Footer rule + circular arrow. margin-top:auto is what holds the footers
   of nine cards on one line when their copy is different lengths. */
.card__more {
  margin-top: auto;
  padding-top: 0.95rem;
  width: 100%;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--gold-ink);
}
.card__arrow {
  display: grid;
  place-items: center;
  width: 1.7rem; height: 1.7rem;
  border-radius: 50%;
  border: 1px solid var(--gold-line);
  background: var(--gold-wash);
  color: var(--gold-deep);
  flex: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur-2) var(--ease-out);
}
.card:hover .card__arrow {
  background: var(--grad-gold);
  border-color: transparent;
  color: #1a1408;
  transform: translateX(3px);
}
/* The arrow no longer slides on its own — the circle carries the movement. */
.card:hover .card__more svg,
.card:hover .card__more .arrow { transform: none; }

/* Dark bands
   ----------------------------------------------------------------------- */
.section--dark .card,
.cta-band .card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.022));
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: none;
}
.section--dark .card:hover {
  border-color: rgba(212, 175, 55, 0.38);
  box-shadow: 0 24px 48px -26px rgba(0, 0, 0, 0.75);
}
.section--dark .card__icon {
  background: rgba(212, 175, 55, 0.12);
  border-color: rgba(212, 175, 55, 0.28);
  color: var(--gold);
  box-shadow: none;
}
.section--dark .card:hover .card__icon { background: var(--grad-gold); color: #1a1408; }
.section--dark .card__more {
  border-top-color: rgba(255, 255, 255, 0.10);
  color: var(--gold-bright);
}
.section--dark .card__arrow {
  border-color: rgba(212, 175, 55, 0.32);
  background: rgba(212, 175, 55, 0.10);
  color: var(--gold-bright);
}

/* Location cards
   -----------------------------------------------------------------------
   The city is the word being scanned for, so it is the biggest thing in the
   card; "Restaurant marketing in" becomes the caption above it. */
.card--location {
  display: flex;
  flex-direction: column;
  /* The grid version of this card centred its items; in a column flex box
     that reads as centred text, which is not what this card wants. */
  align-items: stretch;
  text-align: left;
  gap: 0.5rem;
  padding: clamp(1.35rem, 0.95rem + 1.2vw, 1.85rem);
}
.card--location .card__icon {
  width: 3rem; height: 3rem;
  margin-bottom: 0.7rem;
}
.card--location .card__title {
  font-size: var(--fs-xl);
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.card--location .card__eyebrow {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-light);
  margin-bottom: 0.1rem;
}
.card--location .card__more { margin-top: auto; }

/* The nine-city list reads as a row of destinations rather than a stack of
   table rows. */
.chip-row--cities { justify-content: center; gap: 0.55rem; margin-top: var(--sp-6); }
.chip-row--cities .pill {
  padding: 0.5rem 0.9rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  background: var(--white);
  color: var(--ink);
}
.chip-row--cities .pill svg { color: var(--gold-deep); opacity: 0.9; }
.chip-row--cities a.pill:hover {
  border-color: var(--gold);
  background: var(--gold-wash);
  color: var(--gold-ink);
  transform: translateY(-1px);
}
.chip-row--cities .pill { transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .card::before { transition: none; }
  .card__arrow, .chip-row--cities .pill { transition: none; }
}

/* ==========================================================================
   Arabic (RTL)
   --------------------------------------------------------------------------
   The Arabic pages render with <html dir="rtl">. Flex and grid layouts
   mirror on their own; this block mirrors everything the stylesheet places
   with physical left/right, swaps in the Arabic type stack, and resets the
   tight Latin letter-spacing that breaks Arabic letter joining.
   ========================================================================== */
[dir="rtl"] {
  --font-display: "IBM Plex Sans Arabic", "Plus Jakarta Sans", "Inter", -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
  --font-sans:    "IBM Plex Sans Arabic", "Inter", -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
}
[dir="rtl"] body { line-height: 1.8; }
[dir="rtl"] :is(h1, h2, h3, h4, h5, h6, .eyebrow, .btn, .nav__link, .mega__label, .mega__title,
  .brand__text, .stat__value, .card__title, .faq__q, .footer__col h3, .mobile-nav__label) {
  letter-spacing: 0;
}
[dir="rtl"] :is(h1, h2, h3) { line-height: 1.4; }
/* Latin-only runs (brand name, email, phone) keep their own direction. */
[dir="rtl"] :is(.brand__name, a[href^="mailto:"], a[href^="tel:"], input[type="email"], input[type="tel"]) { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .brand__name { text-align: right; }

/* Arrows point the way the text reads. `scale` composes with the existing
   hover `transform: translateX()`, so the hover nudge mirrors too. */
[dir="rtl"] svg.arrow,
[dir="rtl"] .card__arrow svg,
[dir="rtl"] .post-card__cue svg { scale: -1 1; }

/* Off-screen elements must leave on the right in RTL: overflow on the left
   side of an RTL page is scrollable and would add ~10,000px of blank page. */
[dir="rtl"] .skip-link { left: auto; right: -9999px; }
[dir="rtl"] .skip-link:focus { right: 0; }
[dir="rtl"] .pp-hp { left: auto !important; right: -9999px !important; }
[dir="rtl"] .text-left { text-align: right; }

[dir="rtl"] .note,
[dir="rtl"] .prose blockquote,
[dir="rtl"] .founder__quote,
[dir="rtl"] .article-body blockquote { border-left: 0; border-right: 3px solid var(--gold); }

[dir="rtl"] .prose ul, [dir="rtl"] .prose ol,
[dir="rtl"] .article-body ul, [dir="rtl"] .article-body ol { padding-left: 0; padding-right: 1.35rem; }

[dir="rtl"] .tick-list li { padding-left: 0; padding-right: 2rem; }
[dir="rtl"] .tick-list li::before { left: auto; right: 0; }
[dir="rtl"] .numbered-list li { padding-left: 0; padding-right: 3rem; }
[dir="rtl"] .numbered-list li::before { left: auto; right: 0; }

[dir="rtl"] .link-list a:hover { padding-left: 0; padding-right: 0.35rem; }
[dir="rtl"] .link-list a { transition: color var(--dur) var(--ease), padding-right var(--dur) var(--ease); }

[dir="rtl"] .site-header .brand { margin-right: 0; margin-left: auto; }
@media (max-width: 1100px) { [dir="rtl"] .brand { padding-right: 0; } }

/* Mega menus are centred with left:50% + translate; mirror the anchor. */
[dir="rtl"] .mega, [dir="rtl"] .mega--wide { left: auto; right: 50%; translate: 50% 0; }

[dir="rtl"] .nav-toggle__bars::before, [dir="rtl"] .nav-toggle__bars::after { left: auto; right: 0; }
[dir="rtl"] .mobile-nav__panel-all { transform: translateX(6px); }

[dir="rtl"] .float-card--tl { left: auto; right: -1.1rem; }
[dir="rtl"] .float-card--br { right: auto; left: -1.1rem; }
@media (max-width: 640px) {
  [dir="rtl"] .float-card--tl { right: 0.6rem; }
  [dir="rtl"] .float-card--br { left: 0.6rem; }
}

[dir="rtl"] .panel .plain-list a:hover { padding-left: 0; padding-right: 0.25rem; }
[dir="rtl"] .panel .plain-list a { transition: color var(--dur) var(--ease), padding-right var(--dur) var(--ease); }
[dir="rtl"] .panel .plain-list a::after { border-right: 0; border-left: 1.5px solid var(--gold); transform: rotate(-45deg); }

[dir="rtl"] .case__stage { border-left: 0; padding-left: 0; border-right: 2px solid var(--gold-line); padding-right: var(--sp-5); }

[dir="rtl"] .toc ol { border-left: 0; border-right: 1px solid var(--border); }
[dir="rtl"] .toc a {
  border-left: 0; border-right: 2px solid transparent;
  margin-left: 0; margin-right: -1px;
  padding: 0.3rem 0.85rem 0.3rem 0;
}
[dir="rtl"] .toc a:hover { transform: translateX(-2px); border-right-color: var(--sand-deep); }
[dir="rtl"] .toc a.is-active { border-right-color: var(--gold); }

[dir="rtl"] .step::before { left: auto; right: clamp(1.25rem, 0.9rem + 1vw, 1.65rem); }

[dir="rtl"] .timeline__item { border-left: 0; border-right: 2px solid var(--border); }
[dir="rtl"] .timeline__item:last-child { border-right-color: transparent; }
[dir="rtl"] .timeline__item::before { left: auto; right: -0.47rem; }

[dir="rtl"] .faq__q { text-align: right; }
[dir="rtl"] .card--location { text-align: right; }

[dir="rtl"] .field select { background-position: left 0.85rem center; padding-right: 0.9rem; padding-left: 2.25rem; }

[dir="rtl"] .footer__top { padding-right: 0; padding-left: 0.9rem; }
[dir="rtl"] .footer__top::after { right: auto; left: 0; }

[dir="rtl"] .post-card__badge { left: auto; right: 0.85rem; }
[dir="rtl"] .card::before { right: auto; left: -5rem; }

/* Reading progress fills from the right, where Arabic text starts. */
[dir="rtl"] .read-progress__bar { transform-origin: 100% 50%; }

/* The button sheen sweeps in reading direction. */
[dir="rtl"] .btn::after { transform: translateX(120%); }
[dir="rtl"] .btn:hover::after { transform: translateX(-120%); }

/* Components whose geometry is physical by nature stay left-to-right:
   the before/after slider (pointer maths and range input) and the logo
   marquee (its keyframes scroll leftwards). */
[dir="rtl"] .ba, [dir="rtl"] .marquee { direction: ltr; }
[dir="rtl"] .ba__label { direction: rtl; }

/* Language switcher */
.lang-switch {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: var(--fs-sm); font-weight: 600;
  color: inherit; text-decoration: none;
  padding: 0.35rem 0.6rem; border-radius: 999px;
  border: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lang-switch:hover, .lang-switch:focus-visible { border-color: var(--gold-line); color: var(--gold-ink); }
.lang-switch span[lang="ar"] { font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif; }
.lang-switch--mobile { margin: 0.75rem 0; }
.lang-switch--footer { color: var(--on-dark-2); padding: 0; border: 0; }
.lang-switch--footer:hover { color: var(--gold-bright); }
.lang-switch--header { color: var(--on-dark-2); border-color: rgba(255, 255, 255, 0.14); }
.lang-switch--header:hover, .lang-switch--header:focus-visible { color: var(--gold-bright); border-color: var(--gold-line); }
/* The drawer carries its own switcher, so the header copy only drops its
   label on the narrowest screens where the action row is tight. */
@media (max-width: 560px) {
  /* Visually hidden, still the link's accessible name. */
  .lang-switch--header span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}