/* AdorWorks — base styles. Mobile-first, restrained animation, AA contrast. */

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* The header is position:sticky and covers ~64px at the top of the
     viewport, so every #hash jump (nav links, "Post a project" etc.) and
     scrollIntoView() call needs this much clearance or the target's
     heading lands hidden underneath it. */
  scroll-padding-top: 76px;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color: var(--color-ink);
  background: var(--color-surface);
  line-height: 1.6;
}

img { max-width: 100%; display: block; }
/* Safety net for inline icon SVGs: an <svg> with only a viewBox (no
   width/height) defaults to 300x150 CSS px if nothing else sizes it --
   a broken selector or an undefined CSS variable (as happened with the
   hero search icon: color: var(--color-slate), which doesn't exist)
   would otherwise make that one icon balloon to that default instead
   of just losing its color. Low specificity (type selector) so every
   icon-specific width/height rule elsewhere still wins normally. */
svg { width: 1em; height: 1em; }
a { color: var(--color-accent-text); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--color-highlight);
  outline-offset: 2px;
}

h1, h2, h3, h4 {
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight: 800;
  line-height: 1.18;
  margin: 0 0 0.5em;
  color: var(--color-primary);
}
h1 { font-size: clamp(1.75rem, 4.2vw, 2.5rem); }
h2 { font-size: clamp(1.3rem, 2.8vw, 1.85rem); }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }

.container {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.netlify-honeypot { display: none; }

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

.skip-link {
  position: absolute;
  left: 1rem; top: -3rem;
  background: var(--color-primary);
  color: #fff;
  padding: 0.6em 1em;
  border-radius: 4px;
  z-index: 100;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 1rem; }

/* Header / nav */
.site-header {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.6rem;
  gap: 1rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--color-primary);
  font-weight: 800;
  font-size: 1.15rem;
  white-space: nowrap;
}
.brand img { height: 34px; width: auto; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  width: 44px; height: 44px;
  cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }

.site-nav {
  display: none;
  width: 100%;
}
.site-nav.is-open { display: block; }
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0.75rem 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.site-nav a {
  display: block;
  padding: 0.6rem 0.25rem;
  text-decoration: none;
  color: var(--color-ink);
  font-weight: 700;
  border-bottom: 1px solid var(--color-border);
}
.site-nav a[aria-current="page"] { color: var(--color-accent-text); }
.site-nav .nav-cta { margin-top: 0.5rem; }

@media (min-width: 960px) {
  .nav-toggle { display: none; }
  .site-header .container { flex-wrap: nowrap; }
  .site-nav { display: flex !important; flex: 1 1 auto; justify-content: center; }
  .site-nav ul {
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  .site-nav a {
    padding: 0.25rem 0;
    border-bottom: 2px solid transparent;
    font-size: 0.94rem;
    transition: color 0.2s ease;
  }
  /* Current-page state is its own always-on indicator, independent of
     whichever hover animation below happens to sit on that same link --
     a visitor shouldn't have to hover to tell where they are. */
  .site-nav a[aria-current="page"] { border-bottom-color: var(--color-accent); }
  .site-nav .nav-cta {
    margin-top: 0;
    margin-left: 0.5rem;
    padding-left: 1.5rem;
    border-left: 1px solid var(--color-border);
  }

  /* Each primary nav link gets its own hover motion instead of one
     shared underline -- picked by position (nth-child), so it works
     unmodified across every page since the nav markup/order is
     identical everywhere. Kept deliberately varied in *mechanism* (not
     just color) while staying within the same restrained vocabulary as
     the rest of the site: short (200-300ms), small distance, no
     bounce/rotation/looping. */

  /* 1. Home -- underline sweeps in from the left. */
  .site-nav ul li:nth-child(1) a { position: relative; }
  .site-nav ul li:nth-child(1) a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
  }
  .site-nav ul li:nth-child(1) a:hover::after,
  .site-nav ul li:nth-child(1) a:focus-visible::after { transform: scaleX(1); }

  /* 2. Services -- letters spread slightly, like the word "opening up". */
  .site-nav ul li:nth-child(2) a { transition: letter-spacing 0.25s ease, color 0.2s ease; }
  .site-nav ul li:nth-child(2) a:hover,
  .site-nav ul li:nth-child(2) a:focus-visible { letter-spacing: 0.04em; color: var(--color-accent-text); }

  /* 3. For Employers -- a small arrow grows in after the label, hinting
     forward motion toward the employer flow. max-width (not width) so
     an auto-width inline element can still transition smoothly. */
  .site-nav ul li:nth-child(3) a::after {
    content: "\2192";
    display: inline-block;
    max-width: 0;
    margin-left: 0;
    overflow: hidden;
    opacity: 0;
    vertical-align: middle;
    transition: max-width 0.25s ease, opacity 0.2s ease, margin-left 0.25s ease;
  }
  .site-nav ul li:nth-child(3) a:hover::after,
  .site-nav ul li:nth-child(3) a:focus-visible::after { max-width: 1em; opacity: 1; margin-left: 0.3em; }

  /* 4. For Talent -- underline grows outward from the centre, a
     different geometry from Home's left-sweep. */
  .site-nav ul li:nth-child(4) a { position: relative; }
  .site-nav ul li:nth-child(4) a::after {
    content: "";
    position: absolute;
    left: 50%; right: 50%; bottom: -2px;
    height: 2px;
    background: var(--color-secondary);
    transition: left 0.25s ease, right 0.25s ease;
  }
  .site-nav ul li:nth-child(4) a:hover::after,
  .site-nav ul li:nth-child(4) a:focus-visible::after { left: 0; right: 0; }

  /* 5. Trust & Safety -- lifts into a soft badge/pill, evoking the
     verified-badge theme of the page itself. Horizontal padding is
     constant (not just added on hover) so the pill reveal never shifts
     neighbouring links. */
  .site-nav ul li:nth-child(5) a {
    padding-inline: 0.6em;
    border-radius: 999px;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  }
  .site-nav ul li:nth-child(5) a:hover,
  .site-nav ul li:nth-child(5) a:focus-visible {
    background: rgba(0,168,143,0.12);
    color: var(--color-accent-text);
    transform: translateY(-2px);
  }

  /* 6. About -- the softest treatment (lowest-priority link): a gentle
     fade and scale, no underline/pill at all. */
  .site-nav ul li:nth-child(6) a { transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease; }
  .site-nav ul li:nth-child(6) a:hover,
  .site-nav ul li:nth-child(6) a:focus-visible { opacity: 0.72; transform: scale(1.04); color: var(--color-accent-text); }

  /* 7. Post a project -- the CTA button gets a lift distinct from the
     six text links, on top of .btn-primary's existing shadow hover. */
  .site-nav .nav-cta .btn { transition: transform 0.15s ease, box-shadow 0.15s ease; }
  .site-nav .nav-cta .btn:hover,
  .site-nav .nav-cta .btn:focus-visible { transform: translateY(-2px); }

  @media (prefers-reduced-motion: reduce) {
    .site-nav ul li a,
    .site-nav ul li a::after,
    .site-nav .nav-cta .btn {
      transition: none;
    }
    .site-nav ul li:nth-child(1) a:hover::after,
    .site-nav ul li:nth-child(5) a:hover,
    .site-nav ul li:nth-child(6) a:hover,
    .site-nav .nav-cta .btn:hover {
      transform: none;
    }
  }
}

/* The homepage navigation is outcome-led, so every text link uses one
   consistent interaction instead of relying on a link's position. This
   also keeps the treatment correct if the navigation order changes. */
@media (min-width: 960px) {
  .site-nav ul li:not(.nav-cta) a {
    position: relative !important;
    padding-inline: 0 !important;
    border-radius: 0 !important;
    letter-spacing: normal !important;
    opacity: 1 !important;
    transform: none !important;
    background: transparent !important;
  }
  .site-nav ul li:not(.nav-cta) a::after {
    content: "" !important;
    position: absolute !important;
    display: block !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -2px !important;
    width: auto !important;
    max-width: none !important;
    height: 2px !important;
    margin: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    background: var(--color-accent) !important;
    transform: scaleX(0) !important;
    transform-origin: center !important;
    transition: transform 0.2s ease !important;
  }
  .site-nav ul li:not(.nav-cta) a:hover,
  .site-nav ul li:not(.nav-cta) a:focus-visible { color: var(--color-accent-text); }
  .site-nav ul li:not(.nav-cta) a:hover::after,
  .site-nav ul li:not(.nav-cta) a:focus-visible::after,
  .site-nav ul li:not(.nav-cta) a[aria-current="page"]::after { transform: scaleX(1) !important; }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.75em 1.4em;
  border-radius: 8px;
  font-weight: 800;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  font-size: 1rem;
  text-align: center;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
.btn-primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn-primary:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.18); }
.btn-secondary {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn-outline-light {
  background: transparent;
  border-color: rgba(255,255,255,0.7);
  color: #fff;
}
.btn-outline-light:hover { background: rgba(255,255,255,0.12); }
.btn-block { display: block; width: 100%; }

/* Hero */
.hero { background: var(--color-primary); color: #fff; }
.hero .container { padding-block: 3rem 3.5rem; }
.hero-kicker {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
}
.hero h1 { color: #fff; }
.hero p.lede { font-size: 1rem; max-width: 60ch; color: rgba(255,255,255,0.9); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1.5rem; }
.hero-ctas .btn { min-height: 38px; padding: 0.55em 1.1em; font-size: 0.88rem; }
.hero-login-note { color: rgba(255,255,255,0.85); }
.hero-login-note a { color: #fff; text-decoration: underline; font-weight: 700; }
.hero-login-note a:hover { color: var(--color-accent); }

/* Hero audience toggle, search and category chips (competitive-research
   pattern: a clear two-path entry point above a real search input, with
   quick category chips underneath -- replaces three flat, equal-weight
   CTA buttons with one primary interaction per audience). */
.hero-audience { margin-top: 1.75rem; max-width: 640px; }
.hero-audience-toggle {
  display: inline-flex;
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 0.25rem;
  gap: 0.25rem;
  margin-bottom: 0.85rem;
}
.hero-audience-toggle button {
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.85);
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  cursor: pointer;
}
.hero-audience-toggle button[aria-selected="true"] { background: #fff; color: var(--color-primary); }

.hero-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  border-radius: 999px;
  padding: 0.4rem 0.4rem 0.4rem 1rem;
}
.hero-search svg { flex: none; width: 20px; height: 20px; color: var(--color-muted); }
.hero-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 0.95rem;
  color: var(--color-primary);
  padding: 0.6rem 0;
}
/* The input itself sits flush against the pill's rounded edge, so its
   default focus ring would render half-clipped -- move the visible
   focus indicator to the whole pill via :focus-within instead of just
   suppressing it (suppressing with no replacement would fail WCAG 2.2). */
.hero-search input:focus { outline: none; }
.hero-search:focus-within { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.hero-search .btn { min-height: 40px; padding: 0.55em 1.3em; font-size: 0.88rem; border-radius: 999px; }

.hero-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.85rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(255,255,255,0.14);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s ease;
}
.chip:hover { background: rgba(255,255,255,0.24); }
.chip.is-match { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Landing highlight for a category card matched from the homepage's hero
   search (js/main.js reads ?q= and adds this class) -- confirms the
   search actually went somewhere, rather than dropping the visitor on
   the page with no sign anything happened. */
.category-card.is-match { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(0,168,143,0.25); }

.hero-trustline { margin-top: 1.85rem; margin-bottom: 0; font-size: 0.85rem; color: rgba(255,255,255,0.65); }

/* Hero entrance: each top-level block fades/rises in on load, cascading
   top to bottom -- restrained (no bounce, short distance/duration), and
   generic by design (targets .hero .container's direct children by
   position, not specific classes) so it works unmodified across every
   hero variant on the site -- plain, photo+search, and the About page's
   text+portrait split. Wrapped in the no-preference query rather than
   added-then-cancelled, so a reduced-motion visitor never gets a
   flash of animated content -- see also .reveal below and this file's
   header note on restrained animation. */
@media (prefers-reduced-motion: no-preference) {
  .hero .container > * { animation: hero-fade-up 0.7s ease both; }
  .hero .container > *:nth-child(1) { animation-delay: 0.05s; }
  .hero .container > *:nth-child(2) { animation-delay: 0.15s; }
  .hero .container > *:nth-child(3) { animation-delay: 0.25s; }
  .hero .container > *:nth-child(4) { animation-delay: 0.35s; }
  .hero .container > *:nth-child(5) { animation-delay: 0.45s; }
  .hero .container > *:nth-child(6) { animation-delay: 0.55s; }
}
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* .hero-chips (flex) and .btn (inline-flex) both set their own `display`,
   which otherwise beats the browser's default `[hidden]{display:none}` at
   equal specificity by source order -- this rule comes later, so hidden
   audience-toggle elements actually disappear instead of just losing
   their box model. */
.hero-audience [hidden] { display: none; }

/* The homepage audience switch changes the actual story—not only the
   search placeholder. Employer and talent imagery is kept in the HTML as
   responsive pictures, so both experiences remain fast and accessible. */
.hero-audience-image { position: absolute; inset: 0; display: block; }
.hero-audience-image[hidden] { display: none; }
.hero-home .container { padding-block: clamp(3.25rem, 7vw, 5.75rem); }
.hero-home h1 { max-width: 16ch; font-size: clamp(2.15rem, 5.5vw, 3.9rem); }
.hero-home .lede { max-width: 58ch; }
.hero-home::before {
  background: linear-gradient(90deg, rgba(24,34,48,0.96) 0%, rgba(24,34,48,0.86) 48%, rgba(24,34,48,0.42) 100%);
}
@media (max-width: 699px) {
  .hero-home::before { background: linear-gradient(180deg, rgba(24,34,48,0.80), rgba(24,34,48,0.96)); }
  .hero-home h1 { max-width: 13ch; }
}

/* Hero with a real photo behind the text (visual redesign) -- the <img>
   is a real element (not a CSS background), positioned behind the text,
   so it still gets WebP+srcset+lazy-loading benefits. The gradient
   overlay keeps white hero text readable over any photo without
   needing per-image contrast tuning. */
.hero-photo { position: relative; overflow: hidden; }
.hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(24,34,48,0.82), rgba(24,34,48,0.90));
  z-index: 1;
}
.hero-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-photo .container { position: relative; z-index: 2; }

/* Hero split layout (about.html): copy alongside a portrait rather than
   a full-bleed background photo -- a plain .hero has no dark overlay to
   protect text contrast, so a background photo isn't appropriate here. */
.hero-split { display: flex; flex-direction: column-reverse; gap: 2rem; align-items: center; }
.hero-split-photo { flex: none; width: 60%; max-width: 220px; }
.hero-split-photo img { width: 100%; height: auto; border-radius: 16px; border: 3px solid rgba(255,255,255,0.18); }
@media (min-width: 880px) {
  .hero-split { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 3rem; }
  .hero-split-photo { width: 320px; max-width: 320px; }
}

/* Card with a photo strip above its content (visual redesign). Negative
   margin matches .card's own 1.5rem padding so the image bleeds flush to
   the card's edges, then the rounded corners are clipped to the top only
   so the card's own border-radius still applies at the bottom. */
.card-photo-img {
  display: block;
  width: calc(100% + 3rem);
  aspect-ratio: 16 / 10;
  object-fit: cover;
  margin: -1.5rem -1.5rem 1rem;
  border-radius: 12px 12px 0 0;
}

/* Jump nav — quick anchor links under a hero, for a page long enough to
   benefit from an at-a-glance table of contents (e.g. For Employers).
   top:64px (not 0) because .site-header is ALSO position:sticky top:0
   and roughly that tall — without this offset the two would overlap
   instead of stacking. Pages using this must also raise html's
   scroll-padding-top (see for-employers.html's inline override) so
   in-page anchors land below BOTH sticky bars, not just the header. */
.jump-nav {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 64px;
  z-index: 40;
}
.jump-nav-inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.7rem;
  overflow-x: auto;
}
.jump-nav a {
  flex: none;
  padding: 0.4em 0.9em;
  border-radius: 999px;
  background: var(--color-surface-alt);
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
}
.jump-nav a:hover { background: var(--color-border); }
.jump-nav a.jump-nav-cta { background: var(--color-accent); color: var(--color-accent-ink); margin-left: auto; }

/* Sections */
.section { padding-block: 3rem; }
.section-alt { background: var(--color-surface-alt); }
.section-header { max-width: 70ch; margin-bottom: 2rem; }
.section-header p { color: var(--color-muted); font-size: 1.05rem; }
.eyebrow {
  margin: 0 0 0.55rem;
  color: var(--color-accent-text);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Service deck (services.html) -- one gradient panel per category, each
   stacked in the page (all three visible, like any other section) with
   its 4 services shown full-size in a single horizontal row -- never
   shrunk, stacked or fanned. Each row scrolls independently: the arrows
   flanking it move it by exactly one card and disable at either end;
   past that, the row is a native scroll-snap container so drag/swipe/
   trackpad scrolling and keyboard scrolling all work without extra JS. */
.service-deck-panel {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.75rem;
  align-items: center;
  margin-bottom: 2rem;
}
.service-deck-panel:last-child { margin-bottom: 0; }
.service-deck-creative { background: linear-gradient(135deg, var(--color-primary) 0%, #00786A 100%); }
.service-deck-digital { background: linear-gradient(135deg, var(--color-primary) 0%, #5B4BDB 100%); }
.service-deck-business { background: linear-gradient(135deg, var(--color-primary) 0%, #FF6B4A 100%); }

/* Purely atmospheric blurred circle -- decorative only, so it's not
   part of the DOM as a real element; each panel gets one. */
.service-deck-panel::before {
  content: "";
  position: absolute;
  top: -70px; right: -70px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  z-index: 0;
  pointer-events: none;
}

.service-deck-intro { position: relative; z-index: 1; text-align: center; }
.service-deck-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 10px;
  background: rgba(255,255,255,0.16);
  margin-bottom: 0.85rem;
}
.service-deck-icon svg { width: 22px; height: 22px; }
.service-deck-kicker {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
  font-weight: 800;
  color: rgba(255,255,255,0.75);
  margin-bottom: 0.4em;
}
.service-deck-intro h2 { color: #fff; margin-bottom: 0.45em; }
.service-deck-desc { color: rgba(255,255,255,0.88); max-width: 42ch; margin: 0 auto 1rem; }
.service-deck-stats { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.service-deck-stats li {
  font-size: 0.78rem;
  font-weight: 800;
  background: rgba(255,255,255,0.16);
  padding: 0.4em 0.75em;
  border-radius: 999px;
}

/* Service coverflow (services.html #services-deck) -- the 3D depth
   effect belongs ONLY here, on each category's own four service tiles,
   never on the category panel itself or the homepage (see
   .work-path-carousel there for the plain flat carousel that replaced
   an earlier, incorrect attempt to put this effect on the homepage).
   Same index-driven, --offset-custom-property mechanism: JS
   (initServiceCoverflows() in js/main.js) tracks one activeIndex per
   panel independently and writes it to each .service-coverflow-slide;
   every visual property here is a pure calc() function of that number.
   --abs-offset is CSS's max(x, -x) trick for absolute value. Rotation
   uses --clamped-offset (the offset clamped to [-1, 1] before applying
   the angle) instead of --abs-offset, so a card 2 or 3 away rotates the
   same capped ~16deg as one 1 away, rather than spinning further with
   distance -- keeping every inactive card recognisable, never fully
   invisible (opacity is floored, not just faded to 0). */
.service-coverflow { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; width: 100%; min-width: 0; }
.service-coverflow-stage {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 230px;
  overflow: hidden;
  perspective: 900px;
}
.service-coverflow-stage:focus-visible { outline: 3px solid var(--color-highlight); outline-offset: 2px; }
.service-coverflow-slide {
  --offset: 0;
  --abs-offset: max(var(--offset), calc(-1 * var(--offset)));
  --clamped-offset: max(-1, min(1, var(--offset)));
  position: absolute;
  top: 0;
  left: 50%;
  opacity: max(0.28, calc(1 - var(--abs-offset) * 0.38));
  z-index: calc(10 - var(--abs-offset));
}
.service-coverflow-slide[data-active="false"] .service-tile { cursor: pointer; }
.service-coverflow-slide .service-tile { width: 150px; border: none; box-shadow: 0 8px 18px rgba(0,0,0,0.25); }
.service-coverflow-slide .service-tile img { aspect-ratio: 4 / 5; }
/* The step is not a free aesthetic choice -- it's bounded by the scale
   curve above. The active card is 150px wide at scale 1.06 (half-width
   ~80px) and sits in front of everything; if the step is smaller than
   that half-width, the active card physically covers the *centre* of
   its own neighbour, so "click an inactive card to centre it" becomes
   unreachable with a pointer. 100px keeps each neighbour's centre ~20px
   clear of the active card's edge, with ~88px of it exposed. */
@media (prefers-reduced-motion: no-preference) {
  .service-coverflow-slide {
    transition: transform 0.52s cubic-bezier(.22,.61,.36,1), opacity 0.52s ease, filter 0.52s ease;
    transform:
      translateX(-50%)
      translateX(calc(var(--offset) * 100px))
      translateZ(calc(var(--abs-offset) * -50px))
      rotateY(calc(var(--clamped-offset) * -16deg))
      scale(max(0.72, calc(1.06 - var(--abs-offset) * 0.16)));
    filter: blur(calc(min(var(--abs-offset), 2) * 0.9px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .service-coverflow-slide {
    transition: none;
    transform: translateX(-50%) translateX(calc(var(--offset) * 104px)) scale(max(0.85, calc(1.06 - var(--abs-offset) * 0.08)));
    filter: none;
  }
}
.service-coverflow-arrow {
  flex: none;
  width: 34px; height: 34px;
  border: none;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.service-coverflow-arrow:hover { background: rgba(255,255,255,0.3); }
.service-coverflow-arrow svg { width: 16px; height: 16px; }
.service-coverflow-arrow:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
/* flex-basis: 100% forces the dots onto their own line below the
   prev/stage/next row in the wrapping flex container above, without
   needing a separate layout wrapper. */
.service-coverflow-dots { flex-basis: 100%; display: flex; justify-content: center; gap: 0.4rem; margin-top: 0.4rem; }
.service-coverflow-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(255,255,255,0.3);
  cursor: pointer;
  transition: background 0.2s ease, width 0.2s ease;
}
.service-coverflow-dot[aria-selected="true"] { width: 20px; background: #fff; }
@media (prefers-reduced-motion: reduce) { .service-coverflow-dot { transition: none; } }

/* Tablet keeps the same two-part (info left / carousel right) layout as
   desktop rather than falling all the way back to mobile's stacked
   arrangement -- just with a narrower intro column, tighter padding and
   a shorter horizontal step between coverflow cards (700px matches this
   site's established tablet breakpoint: .grid-3, .steps-3, .tier-grid).
   960px matches its desktop one (same as the header nav's own switch),
   where the roomier desktop sizing kicks in. */
@media (min-width: 700px) {
  .service-deck-panel { flex-direction: row; align-items: center; padding: 1.75rem 2rem; gap: 1.75rem; text-align: left; }
  .service-deck-intro { flex: none; width: 210px; text-align: left; }
  .service-deck-desc { margin-inline: 0; }
  .service-deck-stats { justify-content: flex-start; margin-bottom: 0; }
  .service-coverflow { flex: 1 1 auto; width: auto; }
  @media (prefers-reduced-motion: no-preference) {
    .service-coverflow-slide { transform: translateX(-50%) translateX(calc(var(--offset) * 92px)) translateZ(calc(var(--abs-offset) * -50px)) rotateY(calc(var(--clamped-offset) * -16deg)) scale(max(0.72, calc(1.06 - var(--abs-offset) * 0.16))); }
  }
  @media (prefers-reduced-motion: reduce) {
    .service-coverflow-slide { transform: translateX(-50%) translateX(calc(var(--offset) * 96px)) scale(max(0.85, calc(1.06 - var(--abs-offset) * 0.08))); }
  }
}
@media (min-width: 960px) {
  /* Vertical padding trimmed from the original 2.5rem: the panel's
     total height is governed by the (untouched) intro column's content,
     not the coverflow -- coverflow tops out around 250px tall, well
     inside the panel height budget on its own. This is a spacing-only
     change, not a content one, aimed at bringing the panel back toward
     that budget without touching intro copy/stats/padding-inline. */
  .service-deck-panel { padding: 1.75rem 3rem; gap: 2.5rem; }
  .service-deck-intro { width: 280px; }
}
/* Mobile: a shorter step so the neighbouring cards read as small
   previews proportionate to the narrower stage, not the same desktop
   spacing just mostly clipped. overflow:hidden on the stage already
   guarantees no horizontal page overflow at any step value, but this
   keeps the peek intentional-looking rather than incidental. */
@media (max-width: 560px) {
  .service-coverflow-stage { height: 210px; }
  @media (prefers-reduced-motion: no-preference) {
    .service-coverflow-slide { transform: translateX(-50%) translateX(calc(var(--offset) * 86px)) translateZ(calc(var(--abs-offset) * -50px)) rotateY(calc(var(--clamped-offset) * -16deg)) scale(max(0.72, calc(1.06 - var(--abs-offset) * 0.16))); }
  }
  @media (prefers-reduced-motion: reduce) {
    .service-coverflow-slide { transform: translateX(-50%) translateX(calc(var(--offset) * 90px)) scale(max(0.85, calc(1.06 - var(--abs-offset) * 0.08))); }
  }
}

.service-tile {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.service-tile:hover, .service-tile:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(24,34,48,0.14);
  border-color: var(--color-accent);
}
@media (prefers-reduced-motion: reduce) { .service-tile { transition: none; } .service-tile:hover { transform: none; } }
/* Clickability indicator -- always visible (not just on :hover), since
   hover never fires for touch users and this is the only cue a tile
   opens something. Reuses the same arrow-in-circle language as the
   homepage's path-cards, not a Terawork element. */
.service-tile::before {
  content: "\2197";
  position: absolute;
  top: 0.5rem; right: 0.5rem;
  z-index: 2;
  width: 26px; height: 26px;
  border-radius: 999px;
  background: rgba(24,34,48,0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 700;
  transition: background 0.15s ease, transform 0.15s ease;
}
.service-tile:hover::before,
.service-tile:focus-visible::before { background: var(--color-accent); color: var(--color-accent-ink); transform: scale(1.1); }
@media (prefers-reduced-motion: reduce) { .service-tile::before { transition: none; } .service-tile:hover::before { transform: none; } }
.service-tile img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.service-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(24,34,48,0.85));
}
.service-tile-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 0.6rem 0.7rem;
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
  line-height: 1.25;
}

/* Service detail modal -- native <dialog> for built-in focus trap,
   Escape-to-close and top-layer stacking. Prev/next cycle within the
   category the opened tile belongs to (see the JS "service group"
   logic), not across the whole page. */
.service-modal {
  border: none;
  border-radius: 16px;
  padding: 0;
  width: min(560px, calc(100vw - 2rem));
  max-height: min(680px, calc(100vh - 2rem));
  overflow-y: auto;
}
.service-modal::backdrop { background: rgba(24,34,48,0.72); }
.service-modal-photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.service-modal-close {
  position: absolute;
  top: 0.75rem; right: 0.75rem;
  z-index: 2;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none;
  border-radius: 999px;
  background: rgba(24,34,48,0.55);
  color: #fff;
  cursor: pointer;
}
.service-modal-close svg { width: 18px; height: 18px; }
.service-modal-body { padding: 1.5rem; }
.service-modal-eyebrow {
  margin: 0 0 0.35em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--color-accent-text);
}
.service-modal-body h3 { margin-bottom: 0.6em; }
.service-modal-facts dt {
  margin-top: 0.75em;
  color: var(--color-primary);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 800;
}
.service-modal-facts dt:first-child { margin-top: 0; }
.service-modal-facts dd { margin: 0.15em 0 0; }
.service-modal-pricing { margin: 1rem 0 0; font-size: 0.85rem; color: var(--color-muted); }
.service-modal-body .btn { margin-top: 1.25rem; }
.service-modal-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.5rem;
  border-top: 1px solid var(--color-border);
}
.service-modal-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: none;
  background: none;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  padding: 0.4rem;
}
.service-modal-nav svg { width: 18px; height: 18px; }
.service-modal-nav:disabled { color: var(--color-border); cursor: default; }
.service-modal-position { color: var(--color-muted); font-size: 0.85rem; }

/* Cards / grid */
.grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
/* .grid-3 used to jump straight from 1 column to 3 at 880px -- every
   tablet in between (iPad portrait at 768px included) fell through to a
   single column, so every 3-up section on the site (card grids,
   category grids, etc.) rendered as one long stacked list instead of a
   grid. A 2-column tablet step (matching .steps-3/.tier-grid's existing
   700px convention) closes that gap; 3 columns only once there's
   actually room for them, at the same 960px the header nav already
   switches to its desktop layout. */
@media (min-width: 700px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(24,34,48,0.1);
  border-color: var(--color-accent);
}
@media (prefers-reduced-motion: reduce) { .card { transition: none; } .card:hover { transform: none; } }

/* Scroll reveal (js/main.js adds .reveal to cards/steps/tiers/notices as
   they mount, then .is-revealed via IntersectionObserver once each one
   enters the viewport) -- a gentle fade/rise, same restrained distance
   and easing as the hero entrance above. The transition list here
   deliberately repeats .card/.service-tile's own transform/box-shadow/
   border-color properties (not just opacity/transform) so adding
   .reveal doesn't clobber their existing hover transition once revealed.
   No JS = no .reveal class = content simply visible; see main.js for
   the prefers-reduced-motion guard that skips this path entirely. */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.4s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.reveal.is-revealed { opacity: 1; transform: none; }

.card h3 { margin-bottom: 0.4em; }

/* Homepage trust strip: brief proof points with small line icons. */
.trust-strip { gap: 1rem; }
.trust-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
}
.trust-card-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(0,168,143,0.12);
  color: var(--color-accent-text);
}
.trust-card-icon svg { width: 21px; height: 21px; }
.trust-card h3 { margin-bottom: 0.25rem; font-size: 1rem; }
.trust-card p { margin: 0; color: var(--color-muted); font-size: 0.88rem; line-height: 1.55; }

/* Image-led service categories on the homepage. The full card is one
   clear target, with a fixed media ratio to avoid layout shifts. */
.category-feature-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  color: var(--color-ink);
  text-decoration: none;
  box-shadow: 0 6px 22px rgba(24,34,48,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.category-feature-card:hover,
.category-feature-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--color-accent);
  box-shadow: 0 16px 34px rgba(24,34,48,0.13);
}
/* Explicit height (not aspect-ratio) is deliberate: this <img> also
   carries width/height content attributes for layout-shift prevention,
   and this browser's replaced-element sizing keeps using that
   attribute-derived intrinsic height even when aspect-ratio is set in
   CSS to something else -- an explicit height has no such ambiguity to
   resolve, and object-fit: cover crops any source image to fill it
   regardless of its own dimensions. ~210px at the ~345-360px card
   widths this grid actually renders is approximately the requested
   5:3 look without depending on that computation. */
.category-feature-media { display: block; overflow: hidden; background: var(--color-surface-alt); height: 210px; }
.category-feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.category-feature-card:hover .category-feature-media img { transform: scale(1.035); }
@media (min-width: 960px) {
  .category-feature-media { height: 230px; }
}
.category-feature-body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem; }
.category-feature-body > span:last-child { color: var(--color-muted); font-size: 0.91rem; line-height: 1.55; }
.category-feature-meta {
  margin-bottom: 0.45rem;
  color: var(--color-accent-text);
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.category-feature-title {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.55rem;
  color: var(--color-primary);
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.3;
}
.category-feature-title span { color: var(--color-accent-text); }
@media (prefers-reduced-motion: reduce) {
  .category-feature-card,
  .category-feature-media img { transition: none; }
  .category-feature-card:hover,
  .category-feature-card:hover .category-feature-media img { transform: none; }
}

/* Path cards ("five ways to work" on the homepage) -- title + a circular
   arrow link at top, description, a text CTA, then a photo bled flush to
   the card's bottom/side edges (mirrors .card-photo-img's top-bleed
   technique, just inverted). One card can carry .path-card-highlight for
   a solid-navy "primary path" treatment, same navy+white pairing already
   used in .hero and .cta-band so it reads as consistent, not a one-off.
   Fixed at 264px wide (within the 250-280px target) with the description
   clamped to 3 lines, so all five stay the same height (340-390px) no
   matter how long each one's copy runs -- never the card that grows. */
.path-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 0 0 auto;
  width: 246px;
  padding: 1.5rem 1.25rem 0;
}
.path-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.path-card-head h3 { margin: 0; font-size: 1.05rem; }
.path-card-arrow {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1.5px solid var(--color-accent);
  color: var(--color-accent-text);
  transition: background 0.15s ease, color 0.15s ease;
}
.path-card-arrow svg { width: 15px; height: 15px; }
.path-card-arrow:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.path-card p {
  color: var(--color-muted);
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0 0 0.75rem;
  height: calc(1.5em * 3);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.path-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--color-accent-text);
  text-decoration: none;
  margin-bottom: 1.5rem;
}
.path-card-cta:hover { text-decoration: underline; }
.path-card-photo {
  display: block;
  width: calc(100% + 2.5rem);
  height: 165px;
  object-fit: cover;
  margin: auto -1.25rem 0;
  border-radius: 0 0 12px 12px;
}
.path-card-highlight { background: var(--color-primary); border-color: var(--color-primary); }
.path-card-highlight h3,
.path-card-highlight p { color: #fff; }
.path-card-highlight .path-card-arrow { border-color: rgba(255,255,255,0.5); color: #fff; }
.path-card-highlight .path-card-arrow:hover { background: #fff; color: var(--color-primary); }
.path-card-highlight .path-card-cta { color: #fff; }

/* Work-path carousel (homepage "five ways to work") -- a plain flat
   horizontal scroll-snap row, deliberately NOT the 3D coverflow effect
   (that belongs only to services.html's per-category service tiles --
   see .service-coverflow there). Every card stays flush, sharp, fully
   opaque and un-rotated; .work-path-viewport is the actual scrollable
   element (overflow-x), .work-path-track is just the flex row of cards
   inside it. The two .work-path-arrow buttons sit outside the
   viewport as plain flex siblings so they never overlap a card, and
   move it by exactly one card per click (js/main.js), disabling at
   either end. Trackpad/touch scrolling and keyboard scrolling (the
   viewport itself is focusable) work natively via overflow-x;
   click-and-drag with a mouse is added in JS. */
.work-path-carousel { display: flex; align-items: center; gap: 0.5rem; margin-inline: -1.25rem; }
.work-path-viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  min-width: 0;
  flex: 1 1 auto;
  padding: 0.2rem 0.2rem 0.5rem;
  margin: -0.2rem -0.2rem -0.3rem;
  cursor: grab;
}
.work-path-viewport:active { cursor: grabbing; }
.work-path-viewport::-webkit-scrollbar { display: none; }
.work-path-viewport:focus-visible { outline: 3px solid var(--color-highlight); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .work-path-viewport { scroll-behavior: auto; } }
.work-path-track { display: flex; gap: 18px; }
.work-path-card { flex: 0 0 auto; scroll-snap-align: start; }
.work-path-arrow {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-primary);
  cursor: pointer;
}
.work-path-arrow svg { width: 17px; height: 17px; }
.work-path-arrow:hover { border-color: var(--color-accent); color: var(--color-accent-text); }
.work-path-arrow:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
/* Service/detail cards write their facts as "<strong>Label:</strong>
   value<br>" -- turning each label into its own block (instead of
   running inline into the previous line) reads as a clean stacked
   fact-sheet instead of one dense paragraph, with no HTML/content
   change needed. */
.card p strong {
  display: block;
  margin-top: 0.65em;
  color: var(--color-primary);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.card p strong:first-child { margin-top: 0; }

/* Small icon badge above a section heading -- a quick visual anchor for
   scanning a page with several similarly-structured sections (e.g. the
   three service categories), not decoration for its own sake. */
.section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  margin-bottom: 0.85rem;
}
.section-icon svg { width: 22px; height: 22px; }
.section-icon-teal { background: rgba(0,168,143,0.12); color: var(--color-accent-text); }
.section-icon-violet { background: rgba(91,75,219,0.12); color: var(--color-secondary); }
.section-icon-coral { background: rgba(255,107,74,0.14); color: var(--color-highlight); }
.card a { text-decoration: none; }
/* When a card's whole content is one link (e.g. the 404/offline shortcut
   cards), make the entire card tappable rather than just the heading
   text — negative-margin the link out to the card's edge, then restore
   the padding inside it so the visible layout doesn't change. */
.card > a:only-child {
  display: block;
  margin: -1.5rem;
  padding: 1.5rem;
  min-height: 44px;
}
.card p:last-child { margin-bottom: 0; }
.card-accent-top { border-top: 4px solid var(--color-accent); }
.card-accent-violet { border-top: 4px solid var(--color-secondary); }

/* Lists with accent markers */
.check-list, .marker-list { list-style: none; margin: 0 0 1em; padding: 0; }
.check-list li, .marker-list li { position: relative; padding-left: 1.4em; margin-bottom: 0.6em; }
.check-list li::before, .marker-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* Table */
/* Scrollable on narrow screens (table.compare below sets a min-width
   wider than a phone viewport) — the fade cues that there's more to
   the right, since nothing else here hints the table scrolls at all. */
.table-wrap { position: relative; overflow-x: auto; }
.table-wrap::after {
  content: "";
  position: sticky;
  top: 0;
  right: 0;
  float: right;
  width: 1.5rem;
  height: 100%;
  margin-left: -1.5rem;
  background: linear-gradient(to right, transparent, var(--color-surface));
  pointer-events: none;
}
table.compare { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 0.95rem; }
table.compare th, table.compare td {
  text-align: left;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
table.compare thead th { background: var(--color-surface-alt); color: var(--color-primary); }

/* Placeholder / content-pending block */
.pending {
  border: 2px dashed var(--color-muted);
  background: var(--color-surface-alt);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  color: var(--color-muted);
}
.pending-label {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--color-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-secondary);
  border-radius: 999px;
  padding: 0.2em 0.7em;
  margin-bottom: 0.6em;
}

/* Notice / callout box (fair expectation, regulatory rule, launch rule etc.) */
.notice {
  border-left: 4px solid var(--color-accent);
  background: var(--color-surface-alt);
  border-radius: 8px;
  padding: 1.1rem 1.35rem;
  margin-block: 1.5rem;
}
.notice-violet { border-left-color: var(--color-secondary); }
.notice-label {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--color-accent-text);
  margin-bottom: 0.4em;
}
.notice-violet .notice-label { color: var(--color-secondary); }
.notice p:last-child { margin-bottom: 0; }

/* Numbered step list */
.steps { display: grid; gap: 1.5rem; grid-template-columns: 1fr; counter-reset: step; list-style: none; margin: 0; padding: 0; }
@media (min-width: 700px) { .steps-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px) { .steps-4 { grid-template-columns: repeat(2, 1fr); } }
.step-number {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-secondary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  margin-bottom: 0.75rem;
  flex: none;
}
.step h3 { margin-bottom: 0.3em; }

/* Homepage "How it works" -- each audience (employers/talent) gets its
   own bordered card holding a connected vertical timeline, instead of
   two unstyled columns of numbered items that read as one flat run of
   six steps. Deliberately its own component (not a .steps/.step
   variant) since those classes are shared with how-it-works.html's
   different 4-across grid layout. Inherently responsive: the timeline
   is vertical by construction, so .grid-2 stacking the cards to one
   column on narrow screens needs no extra rule here. */
.journey-card { display: flex; flex-direction: column; }
.journey-card-heading { display: flex; align-items: center; gap: 0.9rem; }
.journey-card-heading h3,
.journey-card-heading .eyebrow { margin-bottom: 0; }
.journey-card-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(91,75,219,0.10);
  color: var(--color-secondary);
}
.journey-card-talent .journey-card-icon { background: rgba(0,168,143,0.12); color: var(--color-accent-text); }
.journey-card-icon svg { width: 22px; height: 22px; }
.journey-steps {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.journey-steps li { position: relative; display: flex; gap: 0.9rem; }
.journey-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 36px;
  height: 1.25rem;
  width: 2px;
  background: var(--color-border);
}
.journey-steps .step-number { margin-bottom: 0; }
.journey-steps strong { display: block; color: var(--color-primary); margin-bottom: 0.2em; }
.journey-steps p { margin: 0; color: var(--color-muted); font-size: 0.92rem; }

/* Honest pilot-stage trust story: image and proof points replace the
   previous internal-status notice without inventing marketplace figures. */
.trust-story-section { background: linear-gradient(180deg, #fff 0%, var(--color-surface-alt) 100%); }
.trust-story-grid {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: var(--color-surface);
  box-shadow: 0 18px 48px rgba(24,34,48,0.09);
}
.trust-story-media { display: block; min-height: 250px; background: var(--color-surface-alt); }
.trust-story-media img { width: 100%; height: 100%; min-height: 250px; object-fit: cover; }
.trust-story-copy { padding: clamp(1.5rem, 4vw, 3rem); align-self: center; }
.trust-story-copy h2 { max-width: 18ch; }
.trust-story-copy > p:not(.eyebrow) { color: var(--color-muted); }
.trust-story-list { list-style: none; margin: 1.25rem 0 1.5rem; padding: 0; display: grid; gap: 0.7rem; }
.trust-story-list li { position: relative; padding-left: 1.8rem; font-weight: 700; }
.trust-story-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.05em;
  color: var(--color-accent-text);
  font-weight: 800;
}
.trust-story-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.trust-story-actions > a:not(.btn) { font-weight: 800; text-decoration: none; }
@media (min-width: 760px) {
  .trust-story-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .trust-story-media img { min-height: 100%; }
}

/* Verification tier cards */
.tier-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .tier-grid { grid-template-columns: repeat(2, 1fr); } }
.tier-card { border: 1px solid var(--color-border); border-radius: 12px; padding: 1.25rem 1.4rem; }
.tier-name {
  display: inline-block;
  font-weight: 800;
  color: var(--color-primary);
  background: var(--color-surface-alt);
  border-radius: 999px;
  padding: 0.25em 0.85em;
  font-size: 0.85rem;
  margin-bottom: 0.6em;
}
.tier-card p:last-child { margin-bottom: 0; }

/* FAQ */
.faq details { border-bottom: 1px solid var(--color-border); padding: 0.9rem 0; }
.faq summary { cursor: pointer; font-weight: 800; color: var(--color-primary); }
.faq summary::-webkit-details-marker { color: var(--color-accent); }
.faq p { margin-top: 0.6em; }

/* Final CTA band */
.cta-band { background: var(--color-secondary); color: #fff; }
.cta-band .container { padding-block: 2.5rem; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { max-width: 60ch; margin-inline: auto; color: rgba(255,255,255,0.9); }
.final-cta-actions { margin-top: 1.5rem; align-items: center; }
.final-cta-link { color: #fff; font-weight: 800; text-decoration: none; padding: 0.65rem 0.25rem; }
.final-cta-link:hover { text-decoration: underline; }

/* Footer */
.site-footer { background: var(--color-primary); color: rgba(255,255,255,0.85); font-size: 0.92rem; }
.site-footer .container { padding-block: 2rem; }
.footer-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; } }
@media (min-width: 960px) { .footer-grid { grid-template-columns: 1.5fr 0.9fr 0.9fr 1.1fr; } }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .brand { color: #fff; font-size: 1.05rem; }
.footer-heading { color: #fff; font-size: 0.92rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.75em; }
.footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.footer-about { max-width: 36ch; margin-top: 0.75rem; color: rgba(255,255,255,0.7); font-size: 0.88rem; }
.footer-muted { color: rgba(255,255,255,0.7); }

.footer-contact { margin-bottom: 1rem; }
.footer-contact li { display: flex; align-items: center; gap: 0.5rem; color: rgba(255,255,255,0.85); }
.footer-contact svg { flex: none; width: 16px; height: 16px; color: var(--color-accent); }
.footer-social-label { font-size: 0.8rem; color: rgba(255,255,255,0.55); margin-bottom: 0.5em; }
.footer-social { display: flex; gap: 0.3rem; }
.footer-social .social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  cursor: default;
}
.footer-social .social-btn svg { width: 9px; height: 9px; }

.footer-bottom {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.2);
  font-size: 0.78rem;
  color: rgba(255,255,255,0.65);
}

/* Sticky mobile contact bar — padding-bottom accounts for the iOS home
   indicator / Android gesture bar via env(safe-area-inset-bottom), which
   is only nonzero when the viewport meta includes viewport-fit=cover. */
.mobile-contact-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mobile-contact-bar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  text-align: center;
  padding: 0.6rem 0.5rem;
  text-decoration: none;
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--color-primary);
  border-right: 1px solid var(--color-border);
}
.mobile-contact-bar a:last-child { border-right: none; }
.mobile-contact-bar a.is-primary { background: var(--color-accent); color: var(--color-accent-ink); }
body { padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 960px) {
  .mobile-contact-bar { display: none; }
  body { padding-bottom: 0; }
}

/* Install-app banner (injected by js/main.js on beforeinstallprompt) */
.install-banner {
  position: fixed;
  left: 0.75rem; right: 0.75rem;
  bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--color-primary);
  color: #fff;
  border-radius: 12px;
  padding: 0.85rem 1rem;
  box-shadow: 0 6px 24px rgba(0,0,0,0.22);
}
.install-banner-text { flex: 1; font-size: 0.88rem; line-height: 1.35; }
.install-banner-actions { display: flex; align-items: center; gap: 0.4rem; flex: none; }
.install-banner .btn { padding: 0.55em 1em; font-size: 0.88rem; }
.install-banner-dismiss {
  background: none;
  border: none;
  color: rgba(255,255,255,0.75);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25em 0.4em;
}
.install-banner-dismiss:hover { color: #fff; }
@media (min-width: 960px) {
  .install-banner { bottom: 1.25rem; left: auto; right: 1.25rem; max-width: 420px; }
}

/* Forms */
.form-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-grid-2 { grid-template-columns: 1fr 1fr; } }
label { display: block; font-weight: 700; margin-bottom: 0.35em; font-size: 0.92rem; }
input, select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.7em 0.8em;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font: inherit;
  font-size: 16px; /* not 1rem: iOS Safari auto-zooms on focus below 16px */
  color: var(--color-ink);
  background: var(--color-surface);
}
textarea { resize: vertical; min-height: 6rem; }
input[type="checkbox"], input[type="radio"] {
  width: 1.15em;
  height: 1.15em;
  min-height: 0;
  flex: none;
  accent-color: var(--color-accent);
}
.field-hint { font-size: 0.82rem; color: var(--color-muted); margin-top: 0.3em; }
.form-status {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  display: none;
}
.form-status.is-visible { display: block; }
.form-status.success { background: #e2f6f2; color: #0a4f44; }
.form-status.error { background: #fdecea; color: #611a15; }

/* Direct contact tiles */
.direct-options { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .direct-options { grid-template-columns: repeat(2, 1fr); } }
.direct-option {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--color-ink);
}
.direct-option .icon {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}
.direct-option strong { display: block; color: var(--color-primary); }

/* Utility */
.muted { color: var(--color-muted); }
.text-center { text-align: center; }
.text-sm { font-size: 0.9rem; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 1rem; }
.mb-0 { margin-bottom: 0; }
.max-40ch { max-width: 40ch; }
.max-60ch { max-width: 60ch; }
.max-65ch { max-width: 65ch; }
.max-70ch { max-width: 70ch; }
.justify-center { justify-content: center; }
.accent-text { font-weight: 700; color: var(--color-accent-text); }
.text-lede { max-width: 60ch; color: var(--color-muted); font-size: 1.15rem; }
.stack { display: flex; flex-direction: column; gap: 0.75rem; }
.stack label {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  font-weight: 400;
  padding-block: 0.3em;
  min-height: 44px;
}
.stack label input[type="checkbox"] { margin-top: 0.2em; }
.contact-grid { align-items: start; grid-template-columns: 1fr; }
@media (min-width: 640px) { .contact-grid { grid-template-columns: 1.4fr 1fr; } }
.badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25em 0.7em;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-accent-ink);
}
.badge-violet { background: var(--color-secondary); color: #fff; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.filter-chip {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 999px;
  padding: 0.4em 0.9em;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--color-ink);
}
.filter-chip[aria-pressed="true"] { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* Cookie consent banner (js/analytics.js) -- an unobtrusive corner card
   rather than a full-width bar (competitive research: a bottom bar reads
   as more intrusive and blocks more content than a corner card saying
   the same thing). Presentation only; the consent logic in analytics.js
   is untouched. */
.cookie-consent-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 22rem;
  padding: 1.1rem 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(24,34,48,0.18);
}
.cookie-consent-banner__text { margin: 0; font-size: 0.88rem; color: var(--color-ink); }
.cookie-consent-banner__actions { display: flex; gap: 0.6rem; }
.cookie-consent-banner__actions .btn { min-height: 40px; padding: 0.55em 1.1em; font-size: 0.9rem; }
@media (min-width: 480px) {
  /* Anchored bottom-left so it never overlaps Netlify's own fixed
     bottom-right "Powered by Netlify" badge (not ours to reposition). */
  .cookie-consent-banner { left: 1rem; right: auto; }
}