/* ==========================================================================
   AN GLOBAL ADVISORY — shared stylesheet
   All design tokens live in :root. Swap these values for your own system.
   ========================================================================== */

:root {
  /* ---- Colour ---- */
  --color-bg:            #000000;
  --color-surface-1:     #181818;
  --color-surface-2:     #202020;
  --color-surface-3:     #494949;
  --color-line:          #202020;
  --color-line-strong:   #3a3a3a;
  --color-text:          #ffffff;
  --color-text-muted:    #9a9a9a;
  --color-text-dim:      #7d7d7d;
  --color-accent:        #ffc000;
  --color-accent-hover:  #917300;
  --color-accent-ink:    #000000;
  --color-link:          #ffc000;
  --color-link-hover:    #ffffff;
  --color-focus:         #ffc000;
  --color-scrim:         rgba(0, 0, 0, 0.72);
  --color-hairline:      rgba(255, 255, 255, 0.22);

  /* ---- Typography ---- */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Archivo", "Helvetica Neue", Arial, sans-serif;

  --fs-display:   clamp(2.75rem, 9vw, 7.5rem);
  --fs-h1:        clamp(2.25rem, 6.5vw, 4.5rem);
  --fs-h2:        clamp(1.75rem, 4.2vw, 3rem);
  --fs-h3:        clamp(1.25rem, 2.4vw, 1.75rem);
  --fs-h4:        clamp(1.0625rem, 1.6vw, 1.25rem);
  --fs-body-lg:   clamp(1.0625rem, 1.5vw, 1.25rem);
  --fs-body:      1rem;
  --fs-small:     0.875rem;
  --fs-micro:     0.75rem;

  --lh-display:   0.94;
  --lh-heading:   1.06;
  --lh-body:      1.62;

  --tracking-display: -0.02em;
  --tracking-label:   0.18em;
  --tracking-micro:   0.08em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* ---- Spacing (8px base) ---- */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  2.5rem;    /* 40px */
  --space-8:  3.5rem;    /* 56px */
  --space-9:  5rem;      /* 80px */
  --space-10: 7.5rem;    /* 120px */

  --gutter:      2px;
  --page-pad:    var(--space-5);
  --container:   1200px;
  --container-narrow: 820px;

  /* ---- Radius ---- */
  --radius-0:     0px;
  --radius-badge: 2px;
  --radius-pill:  20px;

  /* ---- Border ---- */
  --border-hairline: 1px solid var(--color-line);

  /* ---- Motion ---- */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 200ms;
}

@media (min-width: 720px) {
  :root { --page-pad: var(--space-7); }
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

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

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

img, svg, video { display: block; max-width: 100%; }
img {
  height: auto;
  background: var(--color-surface-1);
  /* If a remote photo fails to load, show the dark surface — never the alt text. */
  color: transparent;
  font-size: 0;
  overflow: hidden;
}

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

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--duration) var(--ease),
              background-color var(--duration) var(--ease),
              border-color var(--duration) var(--ease),
              opacity var(--duration) var(--ease);
}
a:hover { color: var(--color-link-hover); }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}
.btn:focus-visible,
.btn-ghost:focus-visible { outline-color: var(--color-text); }

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

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  padding: var(--space-3) var(--space-5);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  border-radius: var(--radius-0);
}
.skip-link:focus { top: var(--space-4); color: var(--color-accent-ink); }

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

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--space-8); }
@media (min-width: 720px)  { .section { padding-block: var(--space-9); } }
@media (min-width: 1100px) { .section { padding-block: var(--space-10); } }

.section--tight { padding-block: var(--space-7); }
.section--rule  { border-top: var(--border-hairline); }
.section--surface { background: var(--color-surface-1); }

.eyebrow {
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-4);
}
.eyebrow--muted { color: var(--color-text-dim); }

.lede {
  font-size: var(--fs-body-lg);
  color: var(--color-text-muted);
  max-width: 62ch;
}

.section-head {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}
@media (min-width: 900px) {
  .section-head--split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--space-8);
  }
}

.rule { height: 1px; background: var(--color-line); border: 0; margin: 0; }

/* ==========================================================================
   Buttons & links
   ========================================================================== */

.btn,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-0);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font-body);
}

.btn {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}
.btn:hover,
.btn:active { background: var(--color-accent-hover); color: var(--color-accent-ink); }

.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-hairline);
}
.btn-ghost:hover { border-color: var(--color-text); color: var(--color-text); }

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

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text);
  min-height: 44px;
}
.arrow-link::after { content: "→"; color: var(--color-accent); }
.arrow-link:hover { color: var(--color-accent); }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  border-bottom: var(--border-hairline);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
}

.brand { display: inline-flex; align-items: center; min-height: 44px; }
.brand img { width: 168px; background: transparent; }
@media (min-width: 900px) { .brand img { width: 200px; } }

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text);
}
.site-nav a:hover { color: var(--color-accent); }
.site-nav a[aria-current="page"] {
  color: var(--color-accent);
  box-shadow: inset 0 -1px 0 0 var(--color-accent);
}

.header-actions { display: none; }
@media (min-width: 1100px) { .header-actions { display: flex; } }

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

.hero {
  position: relative;
  display: grid;
  min-height: 78vh;
  align-content: end;
  overflow: hidden;
  background: var(--color-surface-1);
}
.hero__media,
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__media img { opacity: 0.55; }
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.55) 38%, rgba(0,0,0,0.95) 100%);
}
.hero__inner {
  position: relative;
  padding-block: var(--space-9) var(--space-8);
}
.hero__title {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  text-transform: uppercase;
  max-width: 16ch;
}
.hero__title em {
  font-style: normal;
  color: var(--color-accent);
}
.hero__sub {
  margin-top: var(--space-5);
  font-size: var(--fs-body-lg);
  color: var(--color-text-muted);
  max-width: 54ch;
}

.hero-meta {
  position: relative;
  display: grid;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--page-pad);
  background: var(--color-bg);
  border-top: var(--border-hairline);
}
@media (min-width: 720px) { .hero-meta { grid-template-columns: repeat(4, 1fr); } }
.hero-meta > div {
  padding: var(--space-5);
  text-align: center;
  border-top: var(--border-hairline);
}
@media (min-width: 720px) {
  .hero-meta > div { border-top: 0; border-left: var(--border-hairline); }
  .hero-meta > div:first-child { border-left: 0; }
}
.hero-meta dt {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-dim);
}
.hero-meta dd {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
}

/* Page header (interior pages) */
.page-hero {
  border-bottom: var(--border-hairline);
  padding-block: var(--space-8) var(--space-8);
}
@media (min-width: 900px) { .page-hero { padding-block: var(--space-9); } }
.page-hero__grid { display: grid; gap: var(--space-6); }
@media (min-width: 900px) {
  .page-hero__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: end;
  }
}
.page-hero h1 {
  font-size: var(--fs-h1);
  text-transform: uppercase;
}

/* ==========================================================================
   Cards & grids
   ========================================================================== */

.grid {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card {
  background: var(--color-surface-2);
  border-radius: var(--radius-0);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 100%;
}
.card__index {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  color: var(--color-accent);
}
.card h3 {
  font-size: var(--fs-h4);
  text-transform: uppercase;
}
.card p { color: var(--color-text-muted); font-size: var(--fs-small); }
.card .arrow-link { margin-top: auto; }

.card--media { padding: 0; overflow: hidden; }
.card--media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card--media .card__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }

.icon {
  width: 28px;
  height: 28px;
  stroke: var(--color-accent);
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

/* ==========================================================================
   Process timeline (unique section type 1)
   ========================================================================== */

.timeline {
  display: grid;
  gap: 0;
  border-top: var(--border-hairline);
}
.timeline__step {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-6);
  border-bottom: var(--border-hairline);
}
@media (min-width: 900px) {
  .timeline__step {
    grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1.4fr);
    gap: var(--space-7);
    align-items: start;
    padding-block: var(--space-7);
  }
}
.timeline__num {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--color-accent);
  letter-spacing: var(--tracking-display);
  line-height: 1;
}
.timeline__step h3 { font-size: var(--fs-h3); text-transform: uppercase; }
.timeline__step p { color: var(--color-text-muted); }
.timeline__meta {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-text-dim);
}

/* ==========================================================================
   Testimonial grid (unique section type 2)
   ========================================================================== */

.quote-grid {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: 1fr;
}
@media (min-width: 760px)  { .quote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .quote-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.quote {
  background: var(--color-surface-2);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin: 0;
}
.quote--tall { grid-row: span 2; background: var(--color-surface-3); }
.quote--accent { background: var(--color-accent); color: var(--color-accent-ink); }
.quote--accent .quote__mark,
.quote--accent figcaption { color: var(--color-accent-ink); }
.quote--accent blockquote { color: var(--color-accent-ink); }

.quote__mark {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 0.6;
  color: var(--color-accent);
}
.quote blockquote {
  margin: 0;
  font-size: var(--fs-body-lg);
  line-height: 1.4;
  color: var(--color-text);
}
.quote figcaption {
  margin-top: auto;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-text-dim);
}
.quote figcaption strong { display: block; color: var(--color-text); font-weight: var(--weight-medium); }
.quote--accent figcaption strong { color: var(--color-accent-ink); }

/* ==========================================================================
   Stat band / figures
   ========================================================================== */

.figures {
  display: grid;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--page-pad);
  background: var(--color-bg);
  border-block: var(--border-hairline);
}
@media (min-width: 640px)  { .figures { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .figures { grid-template-columns: repeat(4, 1fr); } }
.figures > div {
  padding: var(--space-6) var(--space-5);
  border-top: var(--border-hairline);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
}
.figures > div:first-child { border-top: 0; }
@media (min-width: 640px) {
  .figures > div { border-top: 0; border-left: var(--border-hairline); }
  .figures > div:nth-child(odd) { border-left: 0; }
}
@media (min-width: 1000px) {
  .figures > div:nth-child(odd) { border-left: var(--border-hairline); }
  .figures > div:first-child { border-left: 0; }
}
.figures dt {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-family: var(--font-display);
  letter-spacing: var(--tracking-display);
  line-height: 1;
}
.figures dd {
  margin: 0;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-dim);
}

/* ==========================================================================
   Split / editorial blocks
   ========================================================================== */

.split { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); }
  .split--wide-left { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .split--wide-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  .split--reverse > :first-child { order: 2; }
}
.split img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split__body > * + * { margin-top: var(--space-4); }

.prose > * + * { margin-top: var(--space-4); }
.prose p { color: var(--color-text-muted); }

.def-list { display: grid; gap: 0; border-top: var(--border-hairline); }
.def-list > div {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-5);
  border-bottom: var(--border-hairline);
}
@media (min-width: 720px) {
  .def-list > div { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-6); }
}
.def-list dt {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent);
}
.def-list dd { margin: 0; color: var(--color-text-muted); }

/* ==========================================================================
   Service index (services page)
   ========================================================================== */

.service-block {
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-7);
  border-bottom: var(--border-hairline);
}
@media (min-width: 900px) {
  .service-block {
    grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--space-7);
    align-items: start;
    padding-block: var(--space-8);
  }
}
.service-block__num {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  color: var(--color-accent);
  padding-top: var(--space-2);
}
.service-block h2 { font-size: var(--fs-h2); text-transform: uppercase; }
.service-block__kicker {
  margin-top: var(--space-3);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-text-dim);
}
.checklist { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.checklist li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}
.checklist li::before {
  content: "";
  width: 8px; height: 8px;
  margin-top: 0.55em;
  background: var(--color-accent);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.tag {
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-badge);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

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

.cta-band {
  background: var(--color-surface-2);
  padding-block: var(--space-8);
}
.cta-band__inner { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 900px) {
  .cta-band__inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-8); }
}
.cta-band h2 { font-size: var(--fs-h2); text-transform: uppercase; }
.cta-band p { color: var(--color-text-muted); margin-top: var(--space-4); }

/* ==========================================================================
   Forms
   ========================================================================== */

.form-grid { display: grid; gap: var(--space-5); }
@media (min-width: 720px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--full { grid-column: 1 / -1; }
}
.field { display: grid; gap: var(--space-2); }
.field label {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text);
}
.field .hint { font-size: var(--fs-micro); color: var(--color-text-dim); letter-spacing: var(--tracking-micro); }
.field .req { color: var(--color-accent); }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="date"],
select,
textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-text-dim);
  border-radius: var(--radius-0);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.4;
}
textarea { min-height: 160px; resize: vertical; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-accent) 50%),
                    linear-gradient(135deg, var(--color-accent) 50%, transparent 50%);
  background-position: calc(100% - 22px) 22px, calc(100% - 16px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--space-8);
}
input::placeholder, textarea::placeholder { color: var(--color-text-dim); }
input:hover, select:hover, textarea:hover { border-color: var(--color-text-muted); }
input:focus, select:focus, textarea:focus {
  border-color: var(--color-text);
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.consent {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}
.consent input[type="checkbox"] {
  width: 20px; height: 20px;
  margin: 2px 0 0;
  accent-color: var(--color-accent);
}
.consent label {
  font-size: var(--fs-small);
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-text-muted);
}

/* ==========================================================================
   Contact dossier
   ========================================================================== */

.contact-layout { display: grid; gap: var(--space-8); }
@media (min-width: 1000px) {
  .contact-layout { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-9); }
}
.dossier { display: grid; gap: 0; border-top: var(--border-hairline); }
.dossier > div { padding-block: var(--space-5); border-bottom: var(--border-hairline); }
.dossier dt {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-bottom: var(--space-2);
}
.dossier dd { margin: 0; font-size: var(--fs-h4); }
.dossier a { color: var(--color-text); }
.dossier a:hover { color: var(--color-accent); }

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

.faq { display: grid; gap: 0; border-top: var(--border-hairline); }
.faq > div { padding-block: var(--space-5); border-bottom: var(--border-hairline); display: grid; gap: var(--space-3); }
@media (min-width: 900px) {
  .faq > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--space-7); }
}
.faq h3 { font-size: var(--fs-h4); text-transform: uppercase; }
.faq p { color: var(--color-text-muted); }

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

.site-footer {
  border-top: var(--border-hairline);
  padding-block: var(--space-8) var(--space-6);
  background: var(--color-bg);
}
.footer-grid { display: grid; gap: var(--space-7); }
@media (min-width: 900px) {
  .footer-grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--space-7); }
}
.footer-brand img { width: 200px; margin-bottom: var(--space-4); background: transparent; }
.footer-brand p { color: var(--color-text-dim); font-size: var(--fs-small); max-width: 38ch; }

.footer-col h2 {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-bottom: var(--space-4);
}
.footer-col ul { display: grid; gap: var(--space-1); }
.footer-col a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--color-text);
  font-size: var(--fs-small);
}
.footer-col a:hover { color: var(--color-accent); }

.social-row { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.social-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-0);
  color: var(--color-text);
}
.social-row a:hover { border-color: var(--color-accent); color: var(--color-accent); }
.social-row svg { width: 18px; height: 18px; fill: currentColor; }

.footer-base {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--border-hairline);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  justify-content: space-between;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-text-dim);
}