/* ============================================================
   GeoclearAI — styles.css

   1. Design tokens
   2. Reset
   3. Base typography
   4. Base elements (links, lists, media, forms)
   5. Utilities
   6. Motion preferences

   Section styling (header, vision, problem, solution, footer)
   is added in Phases 4–7. Everything below is foundational and
   should rarely need editing — change a token here and it
   updates consistently across the whole site.
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */

:root {

  /* ---- Brand palette --------------------------------------
     The six approved brand colours. Do not introduce new
     colours here — derive from these instead.                */

  --color-carbon:        #101417;
  --color-deep-slate:    #24323A;
  --color-teal:          #247C78;
  --color-mist:          #E8EFED;
  --color-cloud:         #F6F8F7;
  --color-white:         #FFFFFF;

  /* Derived shades, used only for interaction states and
     borders. Kept deliberately few.                          */

  --color-teal-hover:    #1C6461;   /* darker teal — hover/active */
  --color-teal-subtle:   #E7F0EF;   /* teal-tinted wash for accents */
  --color-slate-muted:   #5C6B73;   /* secondary text — 5.5:1 on white */
  --color-mist-muted:    #9AA9AD;   /* muted text on Carbon — footer only */
  /* Form control borders need 3:1 against their background under
     WCAG 1.4.11 (non-text contrast), which the decorative hairline
     colours above do not meet. Used for inputs only. */
  --color-input-border:  #7F918C;   /* 3.32:1 on white, 3.11:1 on Cloud */
  --color-border:        #DFE7E4;   /* default hairline border */
  --color-border-strong: #C5D2CE;   /* emphasised border / dividers */

  /* ---- Semantic colour aliases ----------------------------
     Use these in component styles rather than the raw brand
     names, so light/dark or theme changes stay centralised.  */

  --color-text:          var(--color-carbon);
  --color-text-secondary: var(--color-deep-slate);
  --color-text-muted:    var(--color-slate-muted);
  --color-text-inverse:  var(--color-white);

  --color-bg:            var(--color-white);
  --color-bg-subtle:     var(--color-cloud);
  --color-bg-muted:      var(--color-mist);
  --color-bg-inverse:    var(--color-carbon);

  --color-accent:        var(--color-teal);
  --color-accent-hover:  var(--color-teal-hover);

  --color-error:         #B3261E;   /* form validation only */

  /* ---- Typography -----------------------------------------
     Manrope for headings (500–600), Inter for body and UI
     (400–500). System stacks mirror the metrics closely
     enough to avoid a jarring shift if webfonts fail.        */

  --font-heading: "Manrope", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* Fluid type scale. Each value interpolates between its
     minimum at ~375px and its maximum at ~1440px viewport.   */

  --text-xs:   0.75rem;                                    /* 12px — meta, captions  */
  --text-sm:   0.875rem;                                   /* 14px — UI labels       */
  --text-ui:   0.9375rem;                                  /* 15px — nav, buttons    */
  --text-base: 1.0625rem;                                  /* 17px — body copy       */
  --text-lead: clamp(1.125rem, 1.04rem + 0.38vw, 1.375rem);/* 18 → 22px — lead paras */
  --text-h4:   clamp(1.0625rem, 1rem + 0.28vw, 1.25rem);   /* 17 → 20px              */
  --text-h3:   clamp(1.25rem, 1.07rem + 0.75vw, 1.75rem);  /* 20 → 28px              */
  --text-h2:   clamp(1.625rem, 1.32rem + 1.31vw, 2.5rem);  /* 26 → 40px              */
  --text-h1:   clamp(2rem, 1.47rem + 2.25vw, 3.5rem);      /* 32 → 56px              */

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;   /* uppercase eyebrows/labels only */

  /* ---- Spacing --------------------------------------------
     4px base unit. Numbers refer to multiples of 4px, so
     --space-6 is 24px. Use these rather than ad-hoc values.  */

  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* Vertical rhythm between major page sections. */
  --section-gap:   clamp(4rem, 2.5rem + 6vw, 8rem);
  --subsection-gap: clamp(2.5rem, 1.75rem + 3vw, 4.5rem);

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

  --container-max:    1200px;   /* standard content width   */
  --container-wide:   1360px;   /* full-bleed-ish sections  */
  --container-narrow: 720px;    /* long-form reading width  */
  --container-pad:    clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);

  --header-height: 72px;

  /* ---- Borders and radii ----------------------------------
     Restrained by design — the brief calls for precision
     over soft, heavily rounded cards.                        */

  --border-hairline: 1px solid var(--color-border);
  --border-strong:   1px solid var(--color-border-strong);

  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   6px;
  --radius-full: 999px;

  /* Buttons are square-cornered, matching the brand reference. Change this
     one value to soften every button on the site at once. */
  --radius-button: 0;

  /* ---- Shadows --------------------------------------------
     Low-opacity, carbon-tinted. Used sparingly for lifting
     the concept visual and the sticky header only.           */

  --shadow-sm: 0 1px 2px rgba(16, 20, 23, 0.04);
  --shadow-md: 0 2px 8px rgba(16, 20, 23, 0.06),
               0 1px 2px rgba(16, 20, 23, 0.04);
  --shadow-lg: 0 8px 28px rgba(16, 20, 23, 0.08),
               0 2px 6px rgba(16, 20, 23, 0.04);

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

  --ease:            cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:   150ms;
  --duration-base:   220ms;

  /* ---- Focus ----------------------------------------------
     A single, visible, consistent focus treatment used
     everywhere. Never remove without a replacement.          */

  --focus-width:  2px;
  --focus-offset: 2px;
  --focus-color:  var(--color-teal);

  /* ---- Breakpoints ----------------------------------------
     Custom properties cannot be used inside media queries,
     so these are documented here and written literally in the
     @media rules throughout this file. Keep them in sync.

       Mobile      up to  639px
       Tablet      640px – 1023px
       Desktop     1024px – 1279px
       Wide        1280px and above

     Target review widths: 1440px, 1024px, 768px, 375px.      */
}


/* ============================================================
   2. RESET
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  /* Keeps anchor targets clear of the sticky header added in Phase 4. */
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

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

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}


/* ============================================================
   3. BASE TYPOGRAPHY
   ============================================================ */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-text);
  /* Avoids awkward single-word last lines on multi-line headings. */
  text-wrap: balance;
}

/* Weight 500, not 600 — the brand reference sets the main headline
   noticeably lighter than the section headings below it. */
h1 {
  font-size: var(--text-h1);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h2 {
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

h3 {
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}

h4 {
  font-size: var(--text-h4);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}

p {
  text-wrap: pretty;
}

/* Lead paragraph — the supporting line under a major heading. */
.lead {
  font-size: var(--text-lead);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  max-width: 60ch;
}


/* ============================================================
   4. BASE ELEMENTS
   ============================================================ */

/* ---- Links ------------------------------------------------ */

a {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--duration-fast) var(--ease);
}

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

/* ---- Focus -----------------------------------------------
   Applied once, globally. Individual components inherit this
   rather than defining their own.                            */

:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

/* ---- Media ------------------------------------------------ */

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

/* ---- Forms ------------------------------------------------ */

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

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

textarea {
  resize: vertical;
}

/* ---- Selection -------------------------------------------- */

::selection {
  background-color: var(--color-teal-subtle);
  color: var(--color-carbon);
}


/* ============================================================
   5. UTILITIES
   ============================================================ */

/* Visually hidden, but still announced by screen readers. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Keyboard-only shortcut past the header. Hidden until focused. */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-inverse);
  background-color: var(--color-carbon);
  border-radius: var(--radius-md);
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--color-text-inverse);
}


/* ============================================================
   6. MOTION PREFERENCES
   ============================================================ */

/* Smooth anchor scrolling is opt-in for users who accept motion. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

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


/* ============================================================
   7. LAYOUT
   ============================================================ */

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

/* The standard content column, used by every section. */
.section__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}


/* ============================================================
   8. COMPONENTS — buttons and link styles
   ============================================================ */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-ui);
  font-weight: var(--weight-medium);
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  transition: background-color var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}

.button--primary,
.button--primary:hover {
  color: var(--color-text-inverse);
}

.button--primary {
  background-color: var(--color-accent);
}

.button--primary:hover {
  background-color: var(--color-accent-hover);
}

/* Text link with a trailing arrow that advances on hover. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-ui);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  text-decoration: none;
}

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

.link-arrow__icon {
  flex: none;
  transition: transform var(--duration-base) var(--ease);
}

.link-arrow:hover .link-arrow__icon {
  transform: translateX(4px);
}


/* ============================================================
   9. HEADER
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--color-bg);
  /* Transparent until scrolled, so the header sits flush with the hero. */
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-base) var(--ease),
              box-shadow var(--duration-base) var(--ease);
}

.site-header.is-scrolled {
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  width: 100%;
  max-width: var(--container-max);
  min-height: var(--header-height);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Pushes the nav and actions to the right of the bar. */
.site-header__logo {
  display: block;
  margin-right: auto;
}

.site-header__logo img {
  width: clamp(128px, 12vw, 158px);
}

.site-header__panel {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.primary-nav a {
  font-size: var(--text-ui);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
}

.primary-nav a:hover {
  color: var(--color-accent);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

/* ---- Menu toggle ------------------------------------------
   Hidden by default; revealed only on small screens and only
   when JavaScript is available.                              */

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  /* Optically aligns the icon with the container edge. */
  margin-right: calc(var(--space-3) * -1);
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 20px;
  height: 1.5px;
  background-color: var(--color-text);
  transition: transform var(--duration-base) var(--ease),
              top var(--duration-base) var(--ease),
              background-color var(--duration-fast) 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; }

/* Bars cross into an X while the panel is open. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
  background-color: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ---- Header: small screens -------------------------------- */

@media (max-width: 879px) {

  :root {
    --header-height: 64px;
  }

  .js .nav-toggle {
    display: inline-flex;
  }

  /* Without JavaScript the panel simply wraps onto its own row
     and stays open, so every link remains reachable. */
  .site-header__inner {
    flex-wrap: wrap;
  }

  .site-header__panel {
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    padding-bottom: var(--space-6);
  }

  .js .site-header__panel {
    display: none;
  }

  /* Anchored to .site-header, so the open panel spans the full width. */
  .js .site-header__panel.is-open {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: var(--space-4) var(--container-pad) var(--space-8);
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
  }

  .primary-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .primary-nav a {
    display: block;
    padding-block: var(--space-3);
    font-size: var(--text-base);
    color: var(--color-text);
  }

  .site-header__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    margin-top: var(--space-3);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
  }
}


/* ============================================================
   10. VISION (hero)
   ============================================================ */

.section--vision {
  padding-block: clamp(var(--space-12), 1.5rem + 5vw, var(--space-20)) var(--section-gap);
}

.section--vision .section__inner {
  display: grid;
  gap: clamp(var(--space-10), 5vw, var(--space-16));
}

/* Even split — copy left, concept visual right. Reviewed against a
   5fr/7fr variant; the narrower copy column broke the headline over
   four lines, so the columns are equal. */
@media (min-width: 1024px) {
  .section--vision .section__inner {
    display: flex;
    align-items: center;
  }
}

.vision__copy .lead {
  margin-top: var(--space-6);
  max-width: 46ch;
}

.vision__visual {
  overflow: hidden;
  background-color: var(--color-carbon);
  border: 0;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
}

.vision__visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (min-width: 1024px) {
  .section--vision {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 620px;
    padding-block: 0;
    background-color: var(--color-bg);
  }

  .section--vision .section__inner {
    position: relative;
    min-height: clamp(620px, calc(100svh - var(--header-height)), 780px);
  }

  .vision__copy {
    position: relative;
    z-index: 1;
    width: min(51%, 620px);
    padding-block: var(--space-16);
  }

  .vision__visual {
    position: absolute;
    z-index: -1;
    inset-block: 0;
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    border-radius: 0;
    box-shadow: none;
  }

  .vision__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.98) 20%,
        rgba(255, 255, 255, 0.84) 33%,
        rgba(255, 255, 255, 0.34) 48%,
        rgba(255, 255, 255, 0.04) 64%),
      linear-gradient(180deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0) 34%,
        rgba(255, 255, 255, 0.08) 100%);
    pointer-events: none;
  }

  .vision__visual img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-position: center center;
  }
}

.cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-8);
  margin-top: var(--space-10);
}


/* ============================================================
   10b. SHARED SECTION FURNITURE
   ------------------------------------------------------------
   Applies to every content section below the hero, so spacing
   and heading treatment stay identical from one to the next.
   ============================================================ */

/* Alternating tone rather than borders or cards separates one
   section from the next. Mist is deliberately not used behind
   body copy — teal only reaches 4.26:1 on it. */
.section--problem {
  background-color: var(--color-bg-subtle);
}

/* The short teal rule from the brand reference, used once per
   major section heading as a consistent brand marker. */
.section__inner > h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin-top: var(--space-5);
  background-color: var(--color-accent);
}

.section__inner > .lead {
  margin-top: var(--space-6);
}

.subsection {
  margin-top: var(--subsection-gap);
}

.subsection > p {
  max-width: 62ch;
  margin-top: var(--space-4);
  color: var(--color-text-secondary);
}


/* ============================================================
   12. PROBLEM
   ============================================================ */

.problem__points {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-12);
}

@media (min-width: 768px) {
  .problem__points {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-10);
  }
}

.problem__points > li {
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-strong);
}

.problem__points h3 {
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
}

.problem__points p {
  margin-top: var(--space-3);
  color: var(--color-text-secondary);
}


/* ============================================================
   13. SOLUTION — how it works
   ------------------------------------------------------------
   Numbered editorial columns rather than icon cards. The brief
   rules out generic AI iconography, and there is no icon set in
   the brand reference to draw from.
   ============================================================ */

.stages {
  counter-reset: stage;
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-10);
}

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

.stage {
  counter-increment: stage;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-strong);
}

/* Renders as 01, 02, 03 — one of the few places teal is used. */
.stage::before {
  content: counter(stage, decimal-leading-zero);
  display: block;
  margin-bottom: var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  line-height: 1;
  color: var(--color-accent);
}

.stage p {
  margin-top: var(--space-3);
  color: var(--color-text-secondary);
}


/* ============================================================
   14. SOLUTION — why it matters
   ============================================================ */

.benefits {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-8);
}

@media (min-width: 768px) {
  .benefits {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5) var(--space-12);
  }
}

.benefits > li {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* Quieter closing note, set apart from the benefits list.
   Scoped to beat the generic `.subsection > p` rule above. */
.subsection > .nz-context {
  max-width: 64ch;
  margin-top: var(--space-12);
  padding-left: var(--space-6);
  border-left: 2px solid var(--color-accent);
  color: var(--color-text-secondary);
}


/* ============================================================
   15. SOLUTION — contact
   ============================================================ */

/* A tinted panel gives the call to action presence without
   resorting to a rounded card. */
.subsection--panel {
  padding: clamp(var(--space-8), 4vw, var(--space-16));
  background-color: var(--color-bg-subtle);
}

.contact-panel {
  display: grid;
  gap: var(--space-8);
}

.contact-panel__copy p {
  max-width: 58ch;
  margin-top: var(--space-4);
  color: var(--color-text-secondary);
}

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

.contact-panel__email {
  font-size: var(--text-ui);
}

@media (min-width: 900px) {
  .contact-panel {
    grid-template-columns: 7fr 5fr;
    align-items: center;
    gap: var(--space-16);
  }

  .contact-panel__action {
    align-items: flex-end;
  }
}

.privacy-page {
  min-height: 70vh;
}

.privacy-page .section__inner {
  max-width: 860px;
}

.privacy-page__eyebrow {
  margin-bottom: var(--space-4);
  font-size: var(--text-ui);
  font-weight: var(--weight-medium);
  color: var(--color-accent-hover);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.privacy-page__content {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-10);
}

.privacy-page__content h2 {
  margin-bottom: var(--space-3);
  font-size: var(--text-h3);
}

.privacy-page__content p {
  max-width: 72ch;
  color: var(--color-text-secondary);
}

.privacy-page__updated {
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
}


/* ============================================================
   16. FOOTER
   ============================================================ */

.site-footer {
  padding-block: var(--space-16) var(--space-10);
  background-color: var(--color-bg-inverse);
  color: var(--color-mist);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-10);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

@media (min-width: 768px) {
  .site-footer__inner {
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  .site-footer__copyright {
    grid-column: 1 / -1;
  }
}

.site-footer__brand img {
  width: 158px;
  filter: invert(1);
}

.site-footer__tagline {
  margin-top: var(--space-5);
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--weight-medium);
  color: var(--color-white);
}

/* The brand reference's short rule. Decorative, so the low teal
   contrast on Carbon does not apply. */
.site-footer__tagline::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin-top: var(--space-5);
  background-color: var(--color-accent);
}

.site-footer__details {
  display: grid;
  gap: var(--space-3);
  font-size: var(--text-ui);
}

.site-footer__details a {
  color: var(--color-mist);
  text-decoration: none;
}

.site-footer__details a:hover {
  color: var(--color-white);
  text-decoration: underline;
}

.site-footer__copyright {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(232, 239, 237, 0.18);
  font-size: var(--text-sm);
  /* Deliberately a solid muted tone rather than reduced opacity,
     so the contrast ratio stays measurable. */
  color: var(--color-mist-muted);
}