/* ===========================================================================
   ATCOM Tel -- site.css
   ---------------------------------------------------------------------------
   The whole stylesheet, in this order:

     1. Design tokens (custom properties)  -- colours, spacing, type, radius
     2. Reset and base elements
     3. Layout helpers                     -- container, section, grid
     4. Typography classes
     5. Buttons
     6. Header and navigation
     7. Page hero
     8. Cards and panels
    8b. Home page components            -- hero, split rows, chat, numbers
    8c. Platform page components        -- prose, diagram, mockup, search, steps
    8d. Intelligence page components    -- light chat, Q&A rows, alert list
     9. CTA band
    10. Footer
    11. Error pages and placeholders
    12. Motion and print

   HOW TO RECOLOUR THE SITE: change the values in section 1 only. Everything
   else refers to those variables, so one edit updates the whole site.
   =========================================================================== */

/* ===========================================================================
   1. DESIGN TOKENS
   =========================================================================== */
:root {
  /* --- brand colours ---------------------------------------------------- */
  --navy: #0f2a44;          /* headings, header background, footer */
  --navy-700: #16395b;      /* lighter navy, for hover states on dark */
  --navy-900: #0a1e32;      /* darkest navy, footer bottom bar */

  /* --- the teal family --------------------------------------------------
     These are split by JOB, not by shade, because the bright brand teal is
     not dark enough to carry white text or to be read as text on cream.
     Measured with scripts/audit.js; do not change one without re-running it.

       --teal       DECORATIVE ONLY. Never behind white text, never as text
                    on a light background. Icon tints, SVG accents, borders.
       --teal-600   TEXT AND BUTTONS. Links, eyebrows, filled buttons with
                    white text. 5.3:1 on cream, 4.9:1 on the tinted section,
                    5.6:1 white-on-it. Passes AA everywhere we use it.
       --teal-800   the hover state for a --teal-600 button.
       --teal-300   accent on navy backgrounds (7.4:1 on --navy).
       --teal-100   pale tint behind icons. Never used for text. */
  --teal: #1a9e8f;
  --teal-600: #0e7568;
  --teal-800: #0a5f55;
  --teal-300: #5fd3c4;
  --teal-100: #e4f4f1;

  --cream: #faf8f5;         /* page background (warm off-white) */
  --cream-200: #f3efe9;     /* alternating section tint */
  --white: #ffffff;

  --ink: #1c2b3a;           /* body text: near-navy, softer than pure navy */
  --ink-muted: #56687c;     /* secondary text. 4.6:1 on cream = AA */
  --line: #e2dcd3;          /* hairline borders on cream */
  --line-dark: rgba(255, 255, 255, 0.14); /* hairlines on navy */

  /* Amber marks placeholders and warnings. Same split as the teal:
     --amber is for borders and dots (non-text, needs only 3:1), and
     --amber-700 for any amber TEXT or amber behind white text (5.6:1). */
  --amber: #c9761a;
  --amber-700: #96530b;
  --danger: #b3261e;        /* form errors */

  /* --- typography -------------------------------------------------------
     The two families are set once here. Milestone 2 self-hosts Inter and
     Manrope in public/fonts and adds them to the front of these stacks. */
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-head: 'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Fluid type: scales between the min and max without a media query. */
  --text-xs: 0.8125rem;   /* 13px -- labels, badges */
  --text-sm: 0.9375rem;   /* 15px -- descriptions, footer */
  --text-base: 1.0625rem; /* 17px -- body copy */
  --text-lg: 1.1875rem;   /* 19px -- lead paragraphs */
  --text-h4: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
  --text-h3: clamp(1.3125rem, 1.1rem + 0.8vw, 1.625rem);
  --text-h2: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
  --text-h1: clamp(2.125rem, 1.6rem + 2.6vw, 3.375rem);

  /* --- spacing scale (a 4px rhythm) ------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --section-y: clamp(3rem, 2rem + 5vw, 5.5rem); /* vertical padding per section */

  /* --- shape and depth -------------------------------------------------- */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 42, 68, 0.06), 0 1px 3px rgba(15, 42, 68, 0.06);
  --shadow: 0 2px 4px rgba(15, 42, 68, 0.05), 0 8px 20px rgba(15, 42, 68, 0.08);
  --shadow-lg: 0 4px 8px rgba(15, 42, 68, 0.06), 0 20px 40px rgba(15, 42, 68, 0.12);

  /* --- layout ----------------------------------------------------------- */
  --container: 1200px;
  --container-narrow: 780px;
  --header-h: 72px;

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --t-fast: 140ms;
  --t: 220ms;
}

/* ===========================================================================
   2. RESET AND BASE
   =========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor links land below the sticky header rather than under it. */
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--navy);
  text-wrap: balance; /* avoids a single word on the last line */
}

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

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--teal-600);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--teal-800);
}

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

ul, ol {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
}

code {
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
  background: var(--cream-200);
  font-size: 0.9em;
}

/* Visible focus ring everywhere, for keyboard users. Mouse clicks do not
   trigger it because we use :focus-visible. */
:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Hidden until focused: the first thing a keyboard or screen-reader user hits. */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 200;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  background: var(--navy);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform var(--t) var(--ease);
}

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

/* The hidden attribute must win over any display we set elsewhere. Without
   this, an element we style as flex or grid stays visible when JavaScript
   hides it -- which would break the feature search. */
[hidden] {
  display: none !important;
}

/* For text that should be read aloud but not seen. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The shared icon shape. Size is set by font-size on the parent where useful. */
.icon {
  width: 20px;
  height: 20px;
  flex: none;
}

.icon--lg {
  width: 26px;
  height: 26px;
}

/* ===========================================================================
   3. LAYOUT HELPERS
   =========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  /* The side padding that guarantees no content ever touches the screen edge. */
  padding-inline: var(--space-5);
}

.container--narrow {
  max-width: var(--container-narrow);
}

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

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

.section--navy {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.82);
}

.section--navy h1,
.section--navy h2,
.section--navy h3 {
  color: var(--white);
}

.section--centred {
  text-align: center;
}

/* ===========================================================================
   4. TYPOGRAPHY CLASSES
   Use these when an element needs a heading's look but not its level.
   =========================================================================== */
.h1 { font-family: var(--font-head); font-size: var(--text-h1); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; color: var(--navy); margin: 0 0 var(--space-5); }
.h2 { font-family: var(--font-head); font-size: var(--text-h2); font-weight: 700; line-height: 1.18; color: var(--navy); margin: 0 0 var(--space-4); }
.h3 { font-family: var(--font-head); font-size: var(--text-h3); font-weight: 700; color: var(--navy); margin: 0 0 var(--space-3); }
.h4 { font-family: var(--font-head); font-size: var(--text-h4); font-weight: 700; color: var(--navy); margin: 0 0 var(--space-3); }

.lead {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--ink-muted);
}

.eyebrow {
  display: inline-block;
  margin-bottom: var(--space-3);
  color: var(--teal-600);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ===========================================================================
   5. BUTTONS
   =========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.72rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: none;
  color: inherit;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}

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

.btn:active {
  transform: translateY(0);
}

.btn--sm { padding: 0.55rem 1.1rem; font-size: var(--text-sm); }
.btn--lg { padding: 0.9rem 1.7rem; font-size: var(--text-base); }

/* White text needs the darker teal to reach 4.5:1; the brand teal only
   manages 3.3:1 and fails AA. */
.btn--primary {
  background: var(--teal-600);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background: var(--teal-800);
  color: var(--white);
  box-shadow: var(--shadow);
}

.btn--outline {
  border-color: var(--navy);
  color: var(--navy);
}

.btn--outline:hover {
  background: var(--navy);
  color: var(--white);
}

/* For use on the navy CTA band and other dark backgrounds. */
.btn--ghost-light {
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--white);
}

.btn--ghost-light:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
}

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

.button-row--centred {
  justify-content: center;
}

/* ===========================================================================
   6. HEADER AND NAVIGATION
   ---------------------------------------------------------------------------
   One set of markup serves both layouts:
     - narrow screens: a slide-down panel with accordion dropdowns
     - wide screens (>= 900px): a horizontal bar with floating panels
   The mobile rules come first, then the desktop rules override them.
   =========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 248, 245, 0.92);
  border-bottom: 1px solid var(--line);
  /* Content scrolling underneath is softly blurred where supported. */
  backdrop-filter: saturate(140%) blur(10px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
}

.logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none;
}

.logo img {
  display: block;
  width: auto;
  height: 32px;
}

/* --- the Menu button (mobile only) ---------------------------------------- */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

.nav-toggle__icon {
  display: grid;
  place-items: center;
}

/* Swap the hamburger for a cross when the menu is open. Both icons live in
   the same grid cell, so nothing shifts. */
.nav-toggle__icon .icon {
  grid-area: 1 / 1;
}

.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded='true'] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded='true'] .nav-toggle__close { display: block; }

/* --- the navigation itself ------------------------------------------------ */
.site-nav {
  /* Hidden on mobile until the Menu button is pressed. */
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  padding: var(--space-4) var(--space-5) var(--space-6);
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}

/* The button sits immediately before the nav in the markup, so CSS alone can
   show the menu: site.js only flips aria-expanded, it never sets styles.
   The two focus rules are the fallback for a visitor with JavaScript turned
   off: focusing the button reveals the menu, and focus moving into the menu
   keeps it open, so the site stays navigable by keyboard either way. */
.nav-toggle[aria-expanded='true'] + .site-nav,
.nav-toggle:focus + .site-nav,
.site-nav:focus-within {
  display: block;
}

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

.nav__item {
  position: relative;
}

/* Top-level links and dropdown triggers share this look. */
.nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-2);
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--navy);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.nav__link:hover {
  background: var(--cream-200);
  color: var(--navy);
}

.nav__chevron {
  width: 18px;
  height: 18px;
  transition: transform var(--t) var(--ease);
}

.nav__trigger[aria-expanded='true'] .nav__chevron {
  transform: rotate(180deg);
}

/* Mark the section you are currently in. */
.nav__item.is-current > .nav__link,
.nav__link[aria-current='page'] {
  color: var(--teal-600);
}

/* --- dropdown panels ----------------------------------------------------- */
.nav__panel {
  display: none;
  padding-left: var(--space-2);
}

.nav__trigger[aria-expanded='true'] + .nav__panel {
  display: block;
}

.nav__panel-list {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__panel-link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease);
}

.nav__panel-link:hover {
  background: var(--cream-200);
  color: var(--ink);
}

/* The page you are on is tinted, so the menu tells you where you are. */
.nav__panel-link[aria-current='page'] {
  background: var(--teal-100);
}

.nav__panel-link[aria-current='page'] .nav__panel-label {
  color: var(--teal-600);
}

.nav__panel-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--teal-100);
  color: var(--teal-600);
}

.nav__panel-text {
  display: block;
}

.nav__panel-label {
  display: block;
  color: var(--navy);
  font-weight: 600;
  line-height: 1.3;
}

.nav__panel-desc {
  display: block;
  margin-top: 2px;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  line-height: 1.4;
}

/* The Contact Us button gets breathing room in the mobile stack. */
.nav__item--button {
  margin-top: var(--space-4);
}

.nav__item--button .btn {
  width: 100%;
}

/* --- DESKTOP LAYOUT ------------------------------------------------------ */
@media (min-width: 900px) {
  .nav-toggle {
    display: none;
  }

  .site-nav {
    /* Back to a normal in-flow element. */
    display: block;
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }

  .nav {
    flex-direction: row;
    align-items: center;
    gap: var(--space-1);
  }

  .nav__link {
    width: auto;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
  }

  .nav__item--button {
    margin-top: 0;
    margin-left: var(--space-3);
  }

  .nav__item--button .btn {
    width: auto;
  }

  /* Floating panel, anchored under its trigger. It stays in the DOM and is
     hidden with visibility so it can fade instead of snapping. */
  .nav__panel {
    display: block;
    position: absolute;
    top: calc(100% + var(--space-3));
    left: 50%;
    z-index: 110;
    width: max-content;
    max-width: min(420px, calc(100vw - 2 * var(--space-5)));
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -6px);
    transition: opacity var(--t) var(--ease),
                transform var(--t) var(--ease),
                visibility var(--t) var(--ease);
  }

  /* Open state, set by site.js (hover, click or keyboard). The :hover and
     :focus-within fallbacks keep the menu usable with JavaScript disabled. */
  .nav__trigger[aria-expanded='true'] + .nav__panel,
  .nav__item--has-panel:hover > .nav__panel,
  .nav__item--has-panel:focus-within > .nav__panel {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }

  /* An invisible bridge across the gap, so the panel does not close while the
     pointer travels from the trigger down to it. */
  .nav__item--has-panel > .nav__panel::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: calc(-1 * var(--space-3) - 2px);
    height: calc(var(--space-3) + 2px);
  }
}

/* ===========================================================================
   7. PAGE HERO (the plain heading block used by inner pages)
   =========================================================================== */
.page-hero {
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(2rem, 1.5rem + 2vw, 3rem);
  background: linear-gradient(180deg, var(--cream-200), var(--cream));
  border-bottom: 1px solid var(--line);
}

/* The heading and intro are kept to a comfortable reading width, but the
   block itself still starts at the page gutter -- so it lines up with the
   content below rather than floating in the middle of the screen. */
.page-hero__title {
  max-width: 20ch;
  font-size: var(--text-h1);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
}

.page-hero__intro {
  max-width: 46rem;
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0;
}

/* ===========================================================================
   8. CARDS AND PANELS
   =========================================================================== */
.card {
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius);
  background: var(--teal-100);
  color: var(--teal-600);
}

.card__title {
  font-size: var(--text-h4);
  margin-bottom: var(--space-2);
}

.card__text {
  color: var(--ink-muted);
  font-size: var(--text-sm);
  margin: 0;
}

/* A responsive card grid that needs no media queries: each column is at least
   260px wide, and the browser fits as many as will comfortably go. */
.grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

/* ===========================================================================
   8b. HOME PAGE COMPONENTS
   ---------------------------------------------------------------------------
   These are written to be reusable on the inner pages too: .split, .tick-list,
   .section-head and .text-link are all used again in later milestones.
   =========================================================================== */

/* --- the introduction above a group of cards ----------------------------- */
.section-head {
  max-width: 44rem;
  margin-bottom: var(--space-7);
}

.section-head .lead {
  margin-bottom: 0;
}

/* --- hero ---------------------------------------------------------------- */
.hero {
  padding-block: clamp(2.5rem, 2rem + 4vw, 5rem);
  /* A very soft warm wash, so the hero lifts off the page without a hard edge. */
  background:
    radial-gradient(70rem 40rem at 85% -10%, rgba(26, 158, 143, 0.1), transparent 60%),
    linear-gradient(180deg, var(--cream-200), var(--cream));
}

.hero__inner {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: 1.05fr 1fr;
    gap: var(--space-9);
  }
}

.hero__title {
  font-family: var(--font-head);
  font-size: var(--text-h1);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin: 0 0 var(--space-4);
}

.hero__sub {
  max-width: 34rem;
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0;
}

.hero__points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--navy);
}

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

.hero__tick {
  width: 17px;
  height: 17px;
  color: var(--teal-600);
}

.hero__media {
  position: relative;
}

/* A soft accent shape tucked behind the photo, purely decorative. */
.hero__media::before {
  content: '';
  position: absolute;
  inset: auto -4% -5% 12%;
  height: 70%;
  border-radius: var(--radius-xl);
  background: var(--teal-100);
  z-index: 0;
}

.hero__photo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

/* --- alternating image / text rows --------------------------------------- */
.split {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-9);
  }

  /* Puts the text first and the picture second, for an alternating rhythm
     down the page. On mobile the source order applies and the picture leads. */
  .split--reverse .split__media {
    order: 2;
  }
}

.split__text > :last-child {
  margin-bottom: 0;
}

.framed-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

/* --- tick lists ---------------------------------------------------------- */
.tick-list {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-5) 0;
  padding: 0;
  list-style: none;
}

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

.tick-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.tick-list__icon {
  width: 18px;
  height: 18px;
  margin-top: 0.2em; /* optically centres the tick on the first line */
  color: var(--teal-600);
  flex: none;
}

/* --- inline "read more" link with an arrow ------------------------------- */
.text-link-row {
  margin-top: var(--space-5);
  margin-bottom: 0;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--teal-600);
  font-weight: 600;
  text-decoration: none;
}

.text-link .icon {
  width: 18px;
  height: 18px;
  transition: transform var(--t) var(--ease);
}

.text-link:hover {
  text-decoration: underline;
}

.text-link:hover .icon {
  transform: translateX(3px);
}

.text-link--light {
  color: var(--teal-300);
}

.text-link--light:hover {
  color: var(--white);
}

/* --- extra card variants used on the Home page --------------------------- */
.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

/* Wider columns, so a six-card group settles into two rows of three rather
   than a lopsided four-and-two. */
.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

.card--compact {
  padding: var(--space-4);
}

.card__icon--sm {
  width: 36px;
  height: 36px;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-sm);
}

.card__title--sm {
  font-size: var(--text-base);
}

/* --- AI voice agents teaser (on navy) ----------------------------------- */
.ai-teaser {
  background:
    radial-gradient(50rem 30rem at 15% 0%, rgba(26, 158, 143, 0.28), transparent 60%),
    var(--navy);
  color: rgba(255, 255, 255, 0.8);
}

.h2--light {
  color: var(--white);
}

.eyebrow--light {
  color: var(--teal-300);
}

.ai-teaser__text {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0;
}

/* --- the sample conversation -------------------------------------------- */
.chat {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-5);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.05);
}

.chat__caption {
  margin-bottom: var(--space-2);
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.chat__line {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  max-width: 92%;
}

/* The caller's lines sit on the right, mirroring a familiar chat layout. */
.chat__line--caller {
  margin-left: auto;
  flex-direction: row-reverse;
}

.chat__who {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12);
  color: var(--teal-300);
}

.chat__bubble {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.chat__line--agent .chat__bubble {
  border-bottom-left-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
}

.chat__line--caller .chat__bubble {
  border-bottom-right-radius: var(--radius-sm);
  background: var(--teal-600);
  color: var(--white);
}

/* --- who we help cards -------------------------------------------------- */
.grid--sectors {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.sector-card {
  display: flex;
  flex-direction: column;
  overflow: hidden; /* keeps the photo inside the rounded corners */
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.sector-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.sector-card__media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.sector-card__body {
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.sector-card__title {
  font-size: var(--text-h4);
  margin-bottom: var(--space-2);
}

.sector-card__text {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

/* --- numbers band ------------------------------------------------------- */
.numbers__grid {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

.numbers__item {
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
}

/* A figure we have not been given yet is shown as an obvious placeholder, so
   nobody can mistake it for a real published number. */
.numbers__item--todo {
  border-style: dashed;
  border-color: var(--amber);
  background: transparent;
}

.numbers__value {
  font-family: var(--font-head);
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--navy);
}

.numbers__todo {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--amber-700);
  letter-spacing: 0;
}

.numbers__label {
  margin: var(--space-2) 0 0;
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

.numbers__note {
  margin-top: var(--space-5);
  color: var(--ink-muted);
  font-size: var(--text-sm);
  font-style: italic;
}

/* Only ever seen in development: partials/photo.ejs was given a name that is
   not in content/photos.js. */
.photo-missing {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  border: 2px dashed var(--danger);
  border-radius: var(--radius);
  color: var(--danger);
  font-weight: 700;
}

/* ===========================================================================
   8c. PLATFORM PAGE COMPONENTS
   ---------------------------------------------------------------------------
   Running text, the multi-tenancy diagram, placeholder screenshots, the
   feature search, and the numbered steps. The mockup and step styles get
   reused on the Intelligence pages.
   =========================================================================== */

/* --- running text at a comfortable reading width ------------------------- */
.prose {
  max-width: 62ch;
}

.prose__p {
  font-size: var(--text-lg);
  line-height: 1.65;
  color: var(--ink-muted);
}

.prose__p:last-child {
  margin-bottom: 0;
}

/* Used for the honest "here are the downsides" box. */
.prose--bordered {
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: var(--radius-lg);
  background: var(--white);
}

/* --- a titled row: icon and heading on the left, detail on the right ----- */
.feature-row {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 900px) {
  .feature-row {
    grid-template-columns: 1fr 1.45fr;
    gap: var(--space-8);
  }
}

.feature-row__head .card__icon {
  margin-bottom: var(--space-4);
}

.feature-row__head .h3 {
  margin-bottom: 0;
}

.feature-row__body > :last-child {
  margin-bottom: 0;
}

.feature-row__body .tick-list {
  margin-bottom: 0;
}

/* --- the multi-tenancy diagram ------------------------------------------ */
.diagram {
  margin: 0;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.diagram__caption {
  margin-bottom: var(--space-4);
  color: var(--ink-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* The outer box stands for the platform; the tenants sit inside it. */
.diagram__platform {
  padding: var(--space-4);
  border: 2px dashed rgba(15, 42, 68, 0.22);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(26, 158, 143, 0.06), transparent);
}

.diagram__platform-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  color: var(--navy);
  font-size: var(--text-sm);
  font-weight: 700;
}

.diagram__platform-label .icon {
  color: var(--teal-600);
}

.diagram__tenants {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.diagram__tenant {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius);
  background: var(--white);
}

.diagram__tenant-name {
  color: var(--navy);
  font-weight: 600;
}

.diagram__tenant-detail {
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

.diagram__note {
  margin: var(--space-4) 0 0;
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

/* --- placeholder product screenshots ------------------------------------ */
.mockup {
  margin: 0;
}

.mockup__frame {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-lg);
}

.mockup__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  background: var(--cream-200);
}

.mockup__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: rgba(15, 42, 68, 0.16);
}

.mockup__address {
  flex: 1;
  max-width: 280px;
  margin-inline: auto;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink-muted);
  font-size: var(--text-xs);
  text-align: center;
}

.mockup__svg {
  display: block;
  width: 100%;
  height: auto;
}

/* The fills used inside the mockup drawings. */
.mk-panel { fill: var(--navy); }
.mk-panel-light { fill: var(--cream-200); }
.mk-row { fill: var(--cream); }
.mk-line { fill: rgba(15, 42, 68, 0.16); }
/* For bars drawn on top of the navy sidebar, where mk-line would vanish. */
.mk-line-light { fill: rgba(255, 255, 255, 0.22); }
.mk-line-dim { fill: rgba(255, 255, 255, 0.12); }
.mk-tile { fill: rgba(255, 255, 255, 0.07); }
/* Amber, for the one tile or row that is drawn as needing attention. */
.mk-warn { fill: #e0913f; }
.mk-line-strong { fill: rgba(15, 42, 68, 0.3); }
.mk-accent { fill: var(--teal); }
.mk-accent-soft { fill: rgba(26, 158, 143, 0.35); }

.mockup__todo {
  margin-top: var(--space-3);
  color: var(--amber-700);
  font-size: var(--text-xs);
  font-weight: 700;
  text-align: center;
}

/* --- the feature search ------------------------------------------------- */
.feature-search {
  margin-bottom: var(--space-7);
}

.feature-search__field {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 34rem;
  padding: 0 var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

/* The ring goes on the whole field, not just the bare input. */
.feature-search__field:focus-within {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
  border-color: var(--teal);
}

.feature-search__icon {
  display: grid;
  place-items: center;
  color: var(--ink-muted);
}

.feature-search__input {
  flex: 1;
  min-width: 0; /* lets the input shrink inside the flex row on small screens */
  padding: 0.8rem 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
}

.feature-search__input:focus {
  outline: none; /* the ring is on the field instead */
}

/* Hide the browser's own clear button; we provide our own. */
.feature-search__input::-webkit-search-cancel-button {
  display: none;
}

.feature-search__clear {
  display: grid;
  place-items: center;
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
}

.feature-search__clear:hover {
  color: var(--navy);
}

.feature-search__count {
  margin: var(--space-3) 0 0;
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

/* --- the feature list --------------------------------------------------- */
.feature-group + .feature-group {
  margin-top: var(--space-8);
}

.feature-group__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.feature-group__head .card__icon {
  margin-bottom: 0;
}

.feature-group__head .h3 {
  margin-bottom: var(--space-1);
}

.feature-group__blurb {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

.feature-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.feature-item__tick {
  display: grid;
  place-items: center;
  flex: none;
  margin-top: 2px;
  color: var(--teal-600);
}

.feature-item__title {
  display: block;
  color: var(--navy);
  font-weight: 600;
  line-height: 1.35;
}

.feature-item__desc {
  display: block;
  margin-top: 2px;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.feature-empty {
  max-width: 34rem;
  padding: var(--space-6);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.feature-empty .h4 {
  margin-bottom: var(--space-2);
}

.feature-empty p:last-child {
  margin-bottom: 0;
  color: var(--ink-muted);
}

/* --- the numbered steps (on navy) --------------------------------------- */
.steps-section__intro {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--text-lg);
}

.steps {
  display: grid;
  gap: var(--space-6);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

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

.step {
  position: relative;
  padding: var(--space-6) var(--space-5) var(--space-5);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.05);
}

.step__number {
  position: absolute;
  top: calc(-1 * var(--space-4));
  left: var(--space-5);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  background: var(--teal-600); /* carries white text, so it must be the dark one */
  color: var(--white);
  font-family: var(--font-head);
  font-size: var(--text-base);
  font-weight: 800;
}

.step__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.1);
  color: var(--teal-300);
}

.step__title {
  margin-bottom: var(--space-2);
  color: var(--white);
  font-size: var(--text-h4);
}

.step__text {
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--text-sm);
}

/* A dotted connector between the steps, at the height of the number badges.
   Decorative only, and only where there is room for it. */
@media (min-width: 900px) {
  .step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 0;
    right: calc(-1 * var(--space-7));
    width: var(--space-7);
    border-top: 2px dotted rgba(95, 211, 196, 0.45);
  }
}

/* ===========================================================================
   8d. INTELLIGENCE PAGE COMPONENTS
   ---------------------------------------------------------------------------
   The chat panel on a light background, a four-step variant of the steps, the
   question-and-answer rows on Analytics, the alert examples on Monitoring, and
   the sub-points inside an integration card.
   =========================================================================== */

/* --- the sample conversation, on a light section -------------------------
   The base .chat is designed to sit on navy. On cream it needs a white card,
   and the agent's bubble has to stop being white or it disappears. */
.chat--light {
  border-color: var(--line);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.chat--light .chat__who {
  background: var(--teal-100);
  color: var(--teal-600);
}

.chat--light .chat__line--agent .chat__bubble {
  background: var(--cream-200);
  color: var(--ink);
}

.chat__caption--dark {
  color: var(--ink-muted);
}

.chat__note {
  margin: var(--space-2) 0 0;
  color: var(--ink-muted);
  font-size: var(--text-xs);
  font-style: italic;
}

/* --- four steps instead of three ----------------------------------------
   Two across on a medium screen, four only when there is genuinely room. */
@media (min-width: 700px) {
  .steps--four {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* In the two-across layout the connectors would point into empty space at the
   end of each row, so they are switched off until the row is complete. */
@media (min-width: 900px) and (max-width: 1099px) {
  .steps--four .step:not(:last-child)::after {
    display: none;
  }
}

@media (min-width: 1100px) {
  .steps--four {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --- question-and-answer rows ------------------------------------------- */
.qa-list {
  display: grid;
  gap: var(--space-5);
}

.qa {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.qa__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: var(--radius);
  background: var(--teal-100);
  color: var(--teal-600);
}

.qa__title {
  margin-bottom: var(--space-2);
  font-size: var(--text-h4);
}

.qa__text {
  margin: 0;
  color: var(--ink-muted);
}

/* --- example alert conditions ------------------------------------------- */
.alert-list {
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.alert-list__caption {
  margin: 0 0 var(--space-4);
  color: var(--ink-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.alert-list ul {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.alert-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

/* A small amber light, echoing the alert tiles in the wallboard drawing. */
.alert-list__dot {
  width: 9px;
  height: 9px;
  flex: none;
  margin-top: 0.45em;
  border-radius: var(--radius-pill);
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(201, 118, 26, 0.14);
}

/* --- sub-points inside an integration card ------------------------------ */
.integration-card__points {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.integration-card__points li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--ink-muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

/* ===========================================================================
   8e. RESOURCES AND CONTACT COMPONENTS
   ---------------------------------------------------------------------------
   Link cards, "coming soon" badges, the help panel, the contact form and its
   sidebar, and the notice box used on the privacy and terms pages.
   =========================================================================== */

/* --- a row-shaped card that is usually a link ---------------------------- */
.link-cards {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.link-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  transition: transform var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}

a.link-card:hover {
  transform: translateY(-2px);
  border-color: var(--teal);
  box-shadow: var(--shadow);
  color: inherit;
}

/* A guide with no link yet: dashed and flat, so it reads as "not ready"
   rather than as something that failed to work. */
.link-card--soon {
  border-style: dashed;
  background: transparent;
  box-shadow: none;
}

.link-card__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--radius);
  background: var(--teal-100);
  color: var(--teal-600);
}

.link-card--soon .link-card__icon {
  background: var(--cream-200);
  color: var(--ink-muted);
}

.link-card__body {
  flex: 1;
  min-width: 0;
}

.link-card__title {
  display: block;
  color: var(--navy);
  font-weight: 700;
  line-height: 1.35;
}

.link-card__desc {
  display: block;
  margin-top: 2px;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.link-card__action {
  flex: none;
  color: var(--teal-600);
}

.link-card__action .icon {
  transition: transform var(--t) var(--ease);
}

a.link-card:hover .link-card__action .icon {
  transform: translateX(3px);
}

/* --- "coming soon" badge ------------------------------------------------- */
.badge {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.badge--soon {
  border: 1px solid var(--line);
  background: var(--cream-200);
  color: var(--ink-muted);
}

/* --- the "need help?" panel --------------------------------------------- */
.help-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.help-panel__text {
  max-width: 46ch;
  margin: 0;
  color: var(--ink-muted);
}

.help-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* --- download cards ------------------------------------------------------ */
.download-card {
  display: flex;
  flex-direction: column;
}

/* Pushes the button to the bottom so every card in a row lines up. */
.download-card__action {
  margin-top: auto;
  padding-top: var(--space-5);
}

.downloads-note {
  max-width: 60ch;
  margin-top: var(--space-6);
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

/* --- contact page layout ------------------------------------------------- */
.contact-layout {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .contact-layout {
    grid-template-columns: 1.35fr 1fr;
    gap: var(--space-8);
    align-items: start;
  }
}

.contact-form-panel {
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

/* --- the form ------------------------------------------------------------ */
.form-note {
  margin-bottom: var(--space-5);
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

.form__row {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

@media (min-width: 560px) {
  .form__row {
    grid-template-columns: 1fr 1fr;
  }
}

.form__field {
  margin-bottom: var(--space-4);
}

/* Fields inside a row are spaced by the row's own gap. */
.form__row .form__field {
  margin-bottom: 0;
}

.form__label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--navy);
  font-size: var(--text-sm);
  font-weight: 600;
}

.form__req {
  color: var(--teal-600);
}

.form__input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.4;
}

.form__input:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
  border-color: var(--teal);
}

/* A field the server rejected. The colour is backed up by the message
   underneath, so it never relies on colour alone. */
.form__input.is-invalid {
  border-color: var(--danger);
  background: #fff8f7;
}

.form__textarea {
  min-height: 8.5rem;
  resize: vertical;
}

/* Our own chevron, so the select matches the inputs across browsers. */
.form__select {
  appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356687c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 18px 18px;
}

.form__error {
  margin: 0.4rem 0 0;
  color: var(--danger);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* The honeypot: off-screen for people, hidden from screen readers by
   aria-hidden in the markup, but still fillable by a bot. Not display:none,
   because some bots skip fields that are display:none. */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream);
}

.form__consent input {
  width: 18px;
  height: 18px;
  margin-top: 0.2rem;
  flex: none;
  accent-color: var(--teal);
}

.form__consent label {
  font-size: var(--text-sm);
  line-height: 1.5;
}

.form__consent-note {
  margin: 0.35rem 0 0;
  color: var(--ink-muted);
  font-size: var(--text-xs);
}

.form__submit {
  width: 100%;
}

@media (min-width: 560px) {
  .form__submit {
    width: auto;
  }
}

/* --- the banner above the form ------------------------------------------ */
.form-message {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.form-message .icon {
  flex: none;
  margin-top: 0.1em;
}

.form-message--success {
  border: 1px solid rgba(26, 158, 143, 0.35);
  background: var(--teal-100);
  color: var(--navy);
}

.form-message--error {
  border: 1px solid rgba(179, 38, 30, 0.3);
  background: #fdecea;
  color: #7a1c17;
}

/* --- the contact sidebar ------------------------------------------------- */
.contact-aside {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.contact-aside__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.contact-aside__body {
  padding: var(--space-5);
}

.contact-aside__text {
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

.contact-details {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-5) 0;
  padding: 0;
  list-style: none;
}

.contact-details li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.contact-details__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--teal-100);
  color: var(--teal-600);
}

.contact-details__label {
  display: block;
  margin-bottom: 2px;
  color: var(--ink-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.contact-details__line {
  display: block;
  font-size: var(--text-sm);
}

.contact-details a {
  font-weight: 600;
}

.contact-expect {
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.contact-expect__heading {
  margin-bottom: var(--space-3);
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.contact-expect__list {
  margin: 0;
}

/* --- the "not written yet" notice on privacy and terms ------------------- */
.notice {
  margin-bottom: var(--space-7);
  padding: var(--space-5);
  border: 1px dashed var(--amber);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.notice p {
  margin-bottom: var(--space-3);
}

.notice__badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--amber-700);
  color: var(--white);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.notice__small {
  margin-bottom: 0;
  color: var(--amber-700);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* ===========================================================================
   9. CTA BAND
   =========================================================================== */
.cta-band {
  padding-block: clamp(2.5rem, 2rem + 3vw, 4rem);
  background: var(--navy);
  color: rgba(255, 255, 255, 0.85);
}

.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.cta-band__text {
  max-width: 34rem;
}

.cta-band__title {
  color: var(--white);
  font-size: var(--text-h2);
  margin-bottom: var(--space-2);
}

.cta-band__desc {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ===========================================================================
   10. FOOTER
   =========================================================================== */
.site-footer {
  background: var(--navy-900);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--text-sm);
}

.site-footer__top {
  display: grid;
  gap: var(--space-8);
  padding-block: var(--space-9) var(--space-7);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .site-footer__top {
    grid-template-columns: minmax(260px, 1fr) 2fr;
    gap: var(--space-9);
  }
}

.site-footer__tagline {
  margin: var(--space-4) 0 var(--space-5);
  max-width: 30rem;
}

.site-footer__contact {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__contact li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* "Canada" / "Europe" beside each number in the footer. */
.site-footer__phone-label {
  color: rgba(255, 255, 255, 0.45);
  font-size: var(--text-xs);
}

.site-footer__links {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.site-footer__heading {
  margin-bottom: var(--space-3);
  color: var(--white);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-footer__links ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}

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

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-5);
  border-top: 1px solid var(--line-dark);
  font-size: var(--text-xs);
}

.site-footer__copyright,
.site-footer__powered {
  margin: 0;
}

.site-footer__powered {
  color: rgba(255, 255, 255, 0.5);
}

/* ===========================================================================
   11. ERROR PAGES AND PLACEHOLDERS
   =========================================================================== */
.error-art {
  width: min(240px, 60vw);
  margin: 0 auto var(--space-6);
  display: block;
}

.error-art__handset {
  fill: none;
  stroke: var(--navy);
  stroke-width: 4;
  stroke-linecap: round;
}

.error-art__line {
  fill: none;
  stroke: var(--teal);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 6 8;
}

.error-art__waves {
  fill: none;
  stroke: var(--teal);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.7;
}

.error-art__shadow {
  fill: rgba(15, 42, 68, 0.07);
}

.error-links {
  margin-top: var(--space-9);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}

.error-links__list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  text-align: left;
}

.error-links__list a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
}

.error-links__list a:hover {
  border-color: var(--teal);
  color: var(--teal-600);
}

/* ===========================================================================
   12. MOTION AND PRINT
   =========================================================================== */

/* Fade-in on scroll. public/js/site.js adds "reveal--armed" to any element
   with class "reveal", then "is-visible" once it scrolls into view. If
   JavaScript never runs, the element is simply visible from the start. */
.reveal--armed {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}

.reveal--armed.is-visible {
  opacity: 1;
  transform: none;
}

/* Anyone who has asked their system to reduce motion gets no animation. */
@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;
    scroll-behavior: auto !important;
  }

  .btn:hover {
    transform: none;
  }

  /* Belt and braces: site.js already skips the fade-in, but if the preference
     changes after load, nothing stays stuck invisible. */
  .reveal--armed {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media print {
  .site-header,
  .cta-band,
  .site-footer,
  .skip-link {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}