/* Generated by scripts/prerender-bundle.js from the design bundle.
   The hover rules are the runtime's scoped .scp* classes, which it inserts
   through the CSSOM rather than into a <style> element — they are lost if
   the bundle is read as text. */
html, body { height: 100%; margin: 0; }

/* THE SIX ROLES. Desktop values are the ones the design shipped with. */
:root {
  --t-eyebrow: .72rem;
  --t-supporting: .95rem;
  --t-body: 1.0625rem;
  --t-subheading: 1.2rem;
  --t-section: clamp(1.6rem,2.8vw,2.2rem);
  --t-display: clamp(2.1rem,4.6vw,3.6rem);
}

.t-eyebrow { font-size: var(--t-eyebrow); }
.t-supporting { font-size: var(--t-supporting); }
.t-body { font-size: var(--t-body); }
.t-subheading { font-size: var(--t-subheading); }
.t-section { font-size: var(--t-section); }
.t-display { font-size: var(--t-display); }

@media (max-width: 780px) {
  /* Chosen for the device rather than scaled down from the desktop floor. Both
     display clamps are inert below a 730px viewport, so a phone was being served
     a minimum that had been picked as a minimum for desktop. */
  :root {
    --t-eyebrow: 11px;
    --t-supporting: 14px;
    --t-body: 16px;
    --t-subheading: 18px;
    --t-section: 22px;
    --t-display: 28px;
  }

  /* A standing line keeps its isolation and gives up its scale. */
  .t-standalone { font-size: var(--t-section); }

  /* SPACING. Desktop is correct and is not touched. These are the three that
     decide whether a heading and the first line of its body are visible
     together, which is the test the whole of this serves. */
  .sp-section { padding-top: 28px !important; padding-bottom: 28px !important; }
  main h1, main h2, main h3 { margin-bottom: 12px !important; }
  main p:not(:last-child) { margin-bottom: 16px !important; }
}

/* THE ROTATED TIMELINE. Hidden above the breakpoint, where the horizontal one is
   correct; it replaces the scroller below it. Day above, night below, time down. */
.tl { display: none; }

@media (max-width: 780px) {
  /* !important because the row carries an inline display: flex, which a class
     cannot outrank. The same reason every stage rule below needs it. */
  .dc-scroller, .tl-wide-only { display: none !important; }
  .tl {
    display: block;
    border-radius: 10px;
    overflow: hidden;
    padding: 14px 10px 16px;
    background: linear-gradient(to bottom,
      #FBF6EC 0%, #FBF6EC 46%, #E7E4DC 56%, #D6DCE1 68%, #D6DCE1 100%);
  }
  .tl__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .tl__dept { margin: 0 0 2px; font-weight: 600; color: #171715; line-height: 1.25; }
  .tl__head { padding-bottom: 8px; border-bottom: 1px solid rgba(23,23,21,.08); }

  /* The marks are the clock. They read as the boundary between day and night,
     which is the division the whole element exists to make. */
  .tl__mark { display: flex; align-items: center; gap: 6px; padding: 12px 0 8px; color: #68665F; }
  .tl__mark svg { flex: 0 0 auto; }
  .tl__mark--end { justify-content: flex-end; padding-bottom: 0; }

  .tl__col { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
  /* Day work: short discrete pieces. */
  .tl__task {
    display: block; width: 100%; box-sizing: border-box;
    padding: 5px 8px; border-radius: 999px; background: #F6F3ED; color: #68665F;
    line-height: 1.3; transition: background .3s ease, color .3s ease, opacity .3s ease;
  }
  /* Night work: one continuous bar, its length the length of the job. */
  .tl__band--night .tl__col { align-items: center; }
  .tl__bar {
    width: 9px; border-radius: 999px; background: #AEB9BE; min-height: 10px;
    transition: height .6s ease, background .5s ease;
  }
  .tl__nlabel { margin: 6px 0 0; text-align: center; color: #4A5A5F; line-height: 1.25; }
}

/* BOUNDARIES. Alternating, so a section change is unmistakable rather than
   merely spacious, and identical at both widths so the site has one grammar. */
.bg-paper { background: #FFFDFA; }
.bg-warm { background: #F6F3ED; }

/* The timeline's own wrapper. Flex at every width so the desktop layout is the
   one the design intends; it only becomes a scroller below the breakpoint.

   The scroller has to grow and the inner has to fill it, because the stage is
   flex: 1 1 0% and takes its width from its parent. Wrapping it without these
   two rules gave the stage a zero basis inside a shrink-to-fit box and the whole
   timeline vanished on desktop while every check still passed. */
.dc-scroller { flex: 1 1 auto; min-width: 0; }
.dc-scroller__inner { display: flex; gap: 16px; align-items: flex-start; width: 100%; }

/* Text that exists for a screen reader and for anything reading the page, but is
   not painted. The six meeting scenarios on the home page are drawn into a canvas
   and are otherwise absent from the DOM entirely; see scripts/apply-copy-brief.js.
   Not display:none, which removes it from the accessibility tree as well. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

@media (max-width: 1100px) {
  .dc-stage:not(.dc-stage--timeline) { position: static !important; height: auto !important; display: flex !important; flex-direction: column; gap: 18px; }
  .dc-scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dc-scroller__inner { min-width: 820px; }
  .dc-scroller .dc-row__item {
    width: auto !important; flex-shrink: 0 !important; margin-left: 0 !important;
    /* Pinned, because the labels are the only thing saying which row is which.
       Swiping to the night region without them leaves five unlabelled bars. */
    position: sticky; left: 0; z-index: 1; background: #FFFDFA; padding-right: 4px;
  }

  .dc-stage:not(.dc-stage--timeline) .dc-stage__item, .dc-stage__canvas {
    position: static !important; inset: auto !important;
    left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
    transform: none !important; width: auto !important; max-width: 100% !important; text-align: left !important;
  }
  .dc-stage__canvas { position: relative !important; min-height: 260px; }

  .dc-row { flex-wrap: wrap !important; }
  .dc-row__item { width: 100% !important; flex-shrink: 1 !important; margin-left: 0 !important; }
}
@font-face {font-family: 'General Sans'; src: url('/fonts/general-sans-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap;}
@font-face {font-family: 'General Sans'; src: url('/fonts/general-sans-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap;}
@font-face {font-family: 'Satoshi'; src: url('/fonts/satoshi-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap;}
body {margin: 0; background: #FFFDFA; color: #171715; font-family: 'Satoshi', ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-wrap: pretty;}
* {box-sizing: border-box;}
a {color: #16A394; text-decoration-color: #A9DED6; text-underline-offset: 3px;}
:focus-visible {outline: 2px solid #16A394; outline-offset: 3px; border-radius: 2px;}
button {font: inherit; color: inherit;}
input, textarea {font: inherit; color: inherit;}
@media (prefers-reduced-motion: reduce) {*, *::before, *::after {animation-duration: .001ms !important; animation-delay: 0ms !important; transition-duration: .001ms !important;}}
.scp0:hover {background: #0E7A6D !important;}
.scp1:hover {color: #16A394 !important; border-color: #16A394 !important;}
.scp2:hover {color: #171715 !important;}
.scp3:hover {color: #16A394 !important;}

/* MOBILE NAV, WITHOUT JAVASCRIPT.
   The hamburger the single-page site had was driven by the client-side router,
   which the static build removes. Replaced 2026-08-11.

   This was a <details> disclosure first, and that was wrong. A closed <details>
   hides its contents at the browser level, below any stylesheet, so above the
   breakpoint - where the summary is display:none and nothing can open it - the
   nav vanished on desktop as well. A checkbox holds the same state with no
   script and leaves the nav an ordinary element that CSS fully controls.

   The nav carries no inline style, deliberately. Inline declarations outrank a
   stylesheet, so the compiler's inline display/align-items/gap would have
   defeated every rule here - which is what the first attempt did, centring the
   links and holding the desktop gap on a phone. Both widths are defined below. */

/* Off-screen but still in the tab order: the menu has to open from a keyboard,
   and display:none or visibility:hidden would take that away. */
.nav-checkbox {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0;
  opacity: 0; pointer-events: none;
}
.nav-links {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(14px,2.2vw,30px); margin-left: auto;
}
.nav-toggle { display: none; }

@media (max-width: 980px) {
  .nav-toggle {
    display: block; cursor: pointer;
    padding: 10px; margin: -10px -10px -10px auto; border-radius: 5px;
  }
  /* The focus ring belongs on the label, because that is the control a visitor
     can see. The checkbox itself is what actually holds focus. */
  .nav-checkbox:focus-visible ~ .nav-toggle {
    outline: 2px solid #16A394; outline-offset: 2px;
  }
  .nav-links { display: none; }
  .nav-checkbox:checked ~ .nav-links {
    display: flex;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0; margin-left: 0;
    padding: 6px clamp(20px,5vw,48px) 20px;
    background: #FFFDFA; border-bottom: 1px solid #DCD7CD;
    box-shadow: 0 18px 30px -22px rgba(23,23,21,.4);
  }
  /* Every item is a full-width row with a comfortable target, and each is
     separated by a hairline so the list reads as a list rather than as text. */
  /* !important is load-bearing here and not laziness. Each anchor carries the
     design's own inline padding (4px 0), and an inline declaration outranks any
     selector, so without this the rows stay 31px tall - below the 44px minimum
     comfortable touch target. The header markup is byte-identical across all
     thirteen pages and is not ours to restyle, so the override lives here,
     scoped to the open mobile menu only. */
  .nav-checkbox:checked ~ .nav-links > a {
    padding: 15px 2px !important; font-size: 1.0625rem;
    border-bottom: 1px solid #EFEAE1 !important; border-radius: 0;
  }
  .nav-checkbox:checked ~ .nav-links > a:last-child {
    margin-top: 16px; padding: 16px 20px !important; text-align: center;
    border-bottom: 0 !important;
  }
}