/* ==========================================================================
   Shared site stylesheet.
   Loaded by every page, after header.css (which holds the
   header plus .wrap, .btn and .btn-ink). Page-specific styles live in
   home.css.
   ========================================================================== */

/* ---- Fonts ---- */
@font-face {
    font-family: 'Metropolis';
    src: url('fonts/Metropolis/Metropolis-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Metropolis';
    src: url('fonts/Metropolis/Metropolis-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Metropolis';
    src: url('fonts/Metropolis/Metropolis-RegularItalic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Metropolis';
    src: url('fonts/Metropolis/Metropolis-SemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Metropolis';
    src: url('fonts/Metropolis/Metropolis-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Metropolis';
    src: url('fonts/Metropolis/Metropolis-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ---- Design tokens ---- */
:root {
    --ink: #002533;          /* headings, dark surfaces */
    --text: #0b2431;         /* body text */
    --text-muted: #2a404d;   /* secondary text */
    --text-faint: #6a7b84;
    --orange: #ff800e;
    --orange-dark: #c95f00;  /* orange that passes contrast on light grounds */
    --paper: #fbf9f6;
    --tint: #ebfbf9;         /* brand teal at 8% */
    --hero: #55d9cc;
    --rule: #d9dfe1;
    --ease: cubic-bezier(.22,1,.36,1);
}

/* ---- Base ---- */
html { scroll-behavior: smooth; }
body { margin: 0; padding: 0; background: var(--paper); font-family: 'Metropolis', 'Montserrat', 'Avenir Next', 'Helvetica Neue', sans-serif; color: var(--text); -webkit-font-smoothing: antialiased; font-size: 18px; line-height: 1.55; }
a { color: var(--text); text-decoration: none; }
a:hover { color: var(--orange-dark); }
a:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
img { max-width: 100%; }
.page { width: 100%; background: var(--paper); overflow-x: clip; }

/* ---- Typography ---- */
.h2 { font-weight: 900; font-size: clamp(34px, 4.2vw, 52px); line-height: 1.05; letter-spacing: -0.02em; }
.h3 { font-weight: 700; font-size: 24px; line-height: 1.25; letter-spacing: -0.01em; }
.lede { font-size: 20px; line-height: 1.55; max-width: 62ch; color: var(--text-muted); }
.step-num { font-weight: 900; font-size: 15px; color: var(--orange); letter-spacing: 0.04em; }
.mono { font-family: 'Red Hat Mono', ui-monospace, Menlo, monospace; }

/* ---- Buttons (base .btn and .btn-ink live in header.css) ---- */
.btn-orange { background: var(--orange); color: var(--ink); }
.btn-orange:hover { background: #ff9636; color: var(--ink); }
.btn-outline { height: 48px; padding: 0 22px; font-size: 16px; gap: 10px; background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--paper); }

/* ---- Section backgrounds ---- */
.sec-paper { background: var(--paper); }
.sec-tint-a, .sec-tint-b { background: var(--tint); }

/* ---- Motion ---- */
[data-hero] { opacity: 0; transform: translateY(22px); animation: rise .9s var(--ease) forwards; animation-delay: calc(.15s + var(--i, 0) * .12s); }
@keyframes rise { to { opacity: 1; transform: none; } }
.rv { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.rv.in { opacity: 1; transform: none; }

/* Honeypot: off-screen, never shown to a human */
.honeypot-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ---- Footer ---- */
.site-footer { background: var(--ink); color: #c9d6dc; padding: 56px 0 40px; font-size: 15px; border-top: 1px solid rgba(201,214,220,0.16); }
.site-footer a, .site-footer a:hover { color: #c9d6dc; }
.site-footer-logo { height: 30px; width: auto; display: block; }
/* Brand block on the left; on the right, "Follow us on" sits level with the logo
   and "Get in touch" level with the company details, spanning the same height. */
.site-footer-cols { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: stretch; }
.site-footer-links { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; min-width: 220px; }
.site-footer-brand { align-items: flex-start; gap: 12px; }
.site-footer-legal { margin-top: 36px; }  /* 12px gap + 36px = 48px below the tagline */
.site-footer-col { display: flex; flex-direction: column; gap: 10px; }
.site-footer-tagline { color: var(--paper); font-weight: 700; font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; }
.site-footer-h { color: var(--paper); font-weight: 700; font-size: 18px; line-height: 1.3; }
.site-footer-social { display: inline-flex; align-items: center; gap: 10px; }
.site-footer-icon { flex: none; display: block; }
.site-footer-social:hover .site-footer-icon { color: var(--paper); }
.site-footer-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(201,214,220,0.2); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 14px; }

/* ==========================================================================
   Inner pages (faq/, news/, careers/, privacy/)
   ========================================================================== */

/* ---- Page hero: the homepage's turquoise band, without the chromatogram ---- */
.page-hero { background: var(--hero); color: var(--ink); padding: 112px 0 96px; }
.page-hero .wrap { display: flex; flex-direction: column; gap: 24px; }
.page-hero-title { font-weight: 900; font-size: clamp(44px, 6vw, 82px); line-height: 0.98; letter-spacing: -0.03em; text-wrap: balance; max-width: 16ch; }
.page-hero-lede { font-size: 20px; line-height: 1.5; max-width: 52ch; }
/* Buttons in the hero share one size: every column is as wide as the widest label. */
.page-hero-links { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 16px; align-self: flex-start; margin-top: 8px; }
.page-hero-links .btn { height: 52px; font-size: 16px; padding: 0 24px; }

.page-section { padding: 110px 0; }

/* ---- Split: sticky title on the left, content on the right (FAQ, Careers) ---- */
.split { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: start; }
.split-aside { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 18px; }
.split-aside .h2 { font-size: clamp(30px, 3.2vw, 42px); text-wrap: balance; }

/* ---- FAQ ---- */
.faq-list { border-bottom: 1px solid var(--rule); }
.faq-item h3 { margin: 0; font: inherit; }
.faq-q { appearance: none; background: none; border: 0; border-top: 1px solid var(--rule); margin: 0; width: 100%; text-align: left; color: var(--ink); font: inherit; font-weight: 700; font-size: 21px; line-height: 1.3; letter-spacing: -0.01em; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; cursor: pointer; transition: color .2s ease; }
.faq-q:hover { color: var(--orange-dark); }
.faq-q:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.faq-q svg { flex: none; }
/* Shared by every accordion toggle: the + turns into a − when open. */
[data-accordion] { scroll-margin-top: 96px; }
[data-accordion] .v { transform-origin: 12px 12px; transition: transform .3s var(--ease); }
[data-accordion][aria-expanded="true"] .v { transform: scaleY(0); }
.faq-a { padding: 0 0 28px; max-width: 70ch; color: var(--text-muted); font-size: 18px; }
.faq-a p + p { margin-top: 14px; }

/* ---- News ---- */
.news-kicker { font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.news-featured { display: flex; flex-direction: column; gap: 20px; padding-bottom: 72px; margin-bottom: 72px; border-bottom: 1px solid var(--rule); }
.news-featured-title { font-weight: 900; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -0.025em; color: var(--ink); max-width: 22ch; text-wrap: balance; }
.news-featured-lede { font-size: 20px; line-height: 1.55; color: var(--text-muted); max-width: 60ch; }
.news-featured .btn { align-self: flex-start; margin-top: 8px; }
.news-year { padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.news-rows + .news-year { margin-top: 64px; }
.news-rows { list-style: none; margin: 0; padding: 0; }
.news-row { border-bottom: 1px solid var(--rule); }
.news-q { appearance: none; background: none; border: 0; margin: 0; width: 100%; text-align: left; color: var(--ink); font: inherit; cursor: pointer; display: grid; grid-template-columns: 110px auto minmax(0, 1fr) 24px; align-items: center; gap: 20px; padding: 24px 0; }
.news-q:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.news-q-date { font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.news-tag { justify-self: start; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: #00786c; border-radius: 4px; padding: 5px 9px 4px; white-space: nowrap; line-height: 1.2; }
.news-q-title { font-weight: 700; font-size: 21px; line-height: 1.3; letter-spacing: -0.01em; transition: color .2s ease; }
.news-q:hover .news-q-title { color: var(--orange-dark); }
.news-q svg { flex: none; justify-self: end; }
/* The panel itself has no display rule, so hidden="until-found" keeps working. */
.news-panel-inner { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; padding: 8px 0 56px; }
.news-media img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--rule); box-shadow: 0 30px 60px -30px rgba(0,37,51,0.35), 0 2px 6px rgba(0,37,51,0.06); }
.news-body { display: flex; flex-direction: column; gap: 18px; }
.news-text { color: var(--text-muted); max-width: 60ch; }
.news-text p + p { margin-top: 14px; }
.news-body .btn { align-self: flex-start; margin-top: 6px; }

/* ---- Careers ---- */
.jobs-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--rule); }
.job-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: center; padding: 28px 0; border-top: 1px solid var(--rule); }
.btn[data-reveal] { font-family: inherit; cursor: pointer; }
.reveal-arrow { display: inline-block; transition: transform .3s var(--ease); }
[data-reveal][aria-expanded="true"] .reveal-arrow { transform: rotate(180deg); }
.job-row-title { font-weight: 700; font-size: 24px; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); }
.job-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.job-tags li { font-size: 14px; font-weight: 600; color: var(--ink); background: #fff; border: 1px solid var(--rule); border-radius: 999px; padding: 4px 12px; }
.job-facts { margin: 0; padding-top: 18px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 24px; font-size: 16px; }
.job-facts dt { color: var(--text-faint); font-weight: 600; }
.job-facts dd { margin: 0; color: var(--ink); font-weight: 600; }
.job-apply { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 6px; }
.job-apply-note { font-size: 15px; color: var(--text-muted); }
.job-apply-note a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.job-body { display: flex; flex-direction: column; gap: 44px; }
.job-block { display: flex; flex-direction: column; gap: 14px; }
.job-block p { color: var(--text-muted); max-width: 62ch; }
.job-block p + p { margin-top: 0; }
.job-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; color: var(--text-muted); max-width: 62ch; }
/* Orange-dash bullets: Careers lists and long-form text share them. */
.job-list li, .prose ul li { position: relative; padding-left: 26px; }
.job-list li::before, .prose ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: 12px; height: 2px; background: var(--orange-dark); }

/* ---- Long-form text (Privacy; reusable for any legal or text-heavy page) ---- */
.prose { color: var(--text-muted); max-width: 72ch; }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-weight: 800; font-size: 26px; line-height: 1.2; letter-spacing: -0.015em; color: var(--ink); margin: 56px 0 16px; scroll-margin-top: 96px; }
.prose h3 { font-weight: 700; font-size: 19px; line-height: 1.3; color: var(--ink); margin: 28px 0 10px; }
.prose p { margin: 0 0 14px; }
.prose ul { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--orange-dark); }
.prose-table-wrap { overflow-x: auto; margin: 8px 0 18px; }
.prose-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.prose-table th { text-align: left; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); padding: 0 16px 12px 0; border-bottom: 1px solid var(--ink); }
.prose-table td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose-table td:first-child { color: var(--ink); font-weight: 700; }

/* ---- Table of contents (sticky, in .split-aside) ---- */
.toc { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
.toc a { color: var(--text-muted); }
.toc a:hover { color: var(--orange-dark); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 960px) {
  .g, .g2 { grid-template-columns: 1fr !important; }
  .page-hero { padding: 72px 0 64px; }
  .page-section { padding: 80px 0; }
  .split, .news-panel-inner { grid-template-columns: 1fr; gap: 32px; }
  .split-aside { position: static; }
  .toc-nav { display: none; }  /* contents list is desktop-only */
  .faq-q { font-size: 19px; }
  .news-featured { padding-bottom: 56px; margin-bottom: 56px; }
  .job-row { grid-template-columns: 1fr; }
  .job-row .btn { justify-self: start; }
}
@media (max-width: 600px) {
  .wrap { padding-left: 20px; padding-right: 20px; }  /* sides only: keep each block's own top/bottom spacing */
  body { font-size: 17px; }
  .site-footer-cols { grid-template-columns: 1fr; }
  .site-footer-links { gap: 32px; }
  .prose-table thead { display: none; }
  .prose-table, .prose-table tbody, .prose-table tr, .prose-table td { display: block; }
  .prose-table tr { padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .prose-table td { border: 0; padding: 4px 0; }
  .prose-table td::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
  .news-q { grid-template-columns: auto minmax(0, 1fr) 24px; gap: 10px 14px; padding: 20px 0; }
  .news-q-date { grid-row: 1; grid-column: 1; }
  .news-tag { grid-row: 1; grid-column: 2; }
  .news-q svg { grid-row: 1; grid-column: 3; }
  .news-q-title { grid-row: 2; grid-column: 1 / -1; font-size: 19px; }
  .page-hero-lede { font-size: 18px; }
  .page-hero-links { grid-auto-flow: row; grid-auto-rows: 1fr; align-self: stretch; gap: 12px; }
  .page-hero-links .btn { width: 100%; height: auto; min-height: 52px; padding: 12px 20px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  [data-hero], .rv { animation: none; opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  [data-accordion] .v { transition: none; }
}