:root {
    color-scheme: light;

    /* Photo palette — logo bars + accent */
    --bar-coral: #C24638;
    --bar-cream: #E9DDCB;
    --bar-taupe: #9C8163;
    --bar-ink:   #211A15;
    --accent:    #C24638;

    --paper:   #ffffff;
    --paper-2: #f4f4f2;
    --ink:     #16181d;
    --muted:   #6b7078;
    --rule:    rgba(20, 22, 27, 0.12);
    --rule-2:  rgba(20, 22, 27, 0.07);
    --black:   #0b0b0c;
    --char:    #1c1c1e;

    /* Figtree stands in for Proxima Nova (FF's licensed face) until a license is in place */
    --display:  "Figtree", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    --sans:     "Figtree", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    /* Wordmark keeps Titillium — squarer, more technical in the lockup */
    --wordmark: "Titillium Web", "Figtree", system-ui, -apple-system, Helvetica, Arial, sans-serif;
    --mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

    --header-h: 64px;
  }

  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 18px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    display: flex;
    flex-direction: column;
    min-height: 100vh;   /* fallback */
    min-height: 100dvh;  /* tracks the viewport as mobile browser chrome hides */
  }
  /* Home is dark edge-to-edge: no white can peek through on mobile URL-bar collapse */
  body.page-home { background: var(--black); }
  /* Home is a single full-screen view — nothing to scroll to */
  body.page-home { overflow: hidden; }
  img { max-width: 100%; display: block; }
  a { color: inherit; }
  button { font: inherit; }
  [hidden] { display: none !important; }

  /* ---------- Header ---------- */
  .site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 20;
    height: var(--header-h);
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    transition: background 0.25s ease, border-color 0.25s ease;
  }
  .site-header .bar {
    max-width: 76rem;
    height: 100%;
    margin: 0 auto;
    padding: 0 clamp(1.2rem, 4vw, 3rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
  }
  .logo { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; }
  .mark {
    flex: none;
    display: flex;
    flex-direction: column;
    width: 30px;
    height: 30px;
  }
  .mark span { flex: 1; display: block; }
  .mark span:nth-child(1) { background: var(--bar-coral); }
  .mark span:nth-child(2) { background: var(--bar-cream); }
  .mark span:nth-child(3) { background: var(--bar-taupe); }
  .mark span:nth-child(4) { background: var(--bar-ink); }
  .wordmark {
    margin: 0;
    font-family: var(--wordmark);
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-size: 1rem;
    color: var(--ink);
    white-space: nowrap;
    transition: color 0.25s ease;
  }

  /* Hamburger */
  .burger {
    appearance: none;
    background: none;
    border: 0;
    padding: 10px 4px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .burger span {
    display: block;
    width: 34px;
    height: 5px;
    background: var(--ink);
    transition: background 0.25s ease;
  }
  body.page-home .site-header { background: transparent; border-bottom-color: transparent; }
  body.page-home .wordmark { color: rgba(255,255,255,0.92); }
  body.page-home .burger span { background: rgba(255,255,255,0.92); }
  body.page-home .mark span:nth-child(4) { background: #2e2620; }

  main {
    padding-top: var(--header-h);
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
  }
  main > section { flex: 1 0 auto; display: flex; flex-direction: column; }
  footer { flex-shrink: 0; }
  body.page-home main { padding-top: 0; }
  body.page-home footer { display: none; }

  /* ---------- Menu overlay ---------- */
  /* The panel wipes down over the items. The inner block carries the exact
     inverse transform, so the words hold still in the viewport and are
     revealed by the descending edge rather than travelling with it. */
  .menu {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: var(--paper);
    overflow: hidden;
    transform: translateY(-100%);
    pointer-events: none;
    transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }
  .menu.open {
    transform: translateY(0);
    pointer-events: auto;
  }
  .menu-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(2rem, 8vw, 6rem);
    box-sizing: border-box;
    transform: translateY(100%);
    transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .menu.open .menu-inner { transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) {
    .menu, .menu.open, .menu-inner, .menu.open .menu-inner { transition: none; }
  }
  .menu a.item {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.9rem, 5vw, 2.8rem);
    letter-spacing: -0.01em;
    text-decoration: none;
    color: var(--muted);
    padding: 0.35rem 0;
    line-height: 1.15;
    text-align: center;
  }
  .menu a.item:hover { color: var(--ink); }
  .menu a.item[aria-current="page"] { color: var(--ink); }
  .close-x {
    position: absolute;
    top: 1.1rem;
    right: clamp(1.2rem, 4vw, 3rem);
    appearance: none;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 8px;
    line-height: 0;
    color: var(--ink);
  }
  .close-x svg { display: block; }

  .menu-close {
    position: fixed;
    top: 1.1rem;
    right: clamp(1.2rem, 4vw, 3rem);
    z-index: 31;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.16s ease, visibility 0s linear 0.16s;
  }
  body.menu-open .menu-close {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.16s ease 0.04s, visibility 0s;
  }
  /* Burger steps aside for the X */
  .burger { transition: opacity 0.14s ease; }
  body.menu-open .burger { opacity: 0; pointer-events: none; }
  @media (prefers-reduced-motion: reduce) {
    .menu-close, .burger { transition: none; }
  }

  /* ---------- Home slideshow ---------- */
  .stage {
    position: relative;
    height: 100vh;   /* fallback */
    height: 100dvh;
    overflow: hidden;
    background: var(--black);
  }
  .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
  .slide.on { opacity: 1; }
  .slide svg { width: 100%; height: 100%; display: block; }
  .slide video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }
  @media (prefers-reduced-motion: no-preference) {
    .slide.on svg { animation: kenburns 24s ease-in-out infinite alternate; }
    @keyframes kenburns {
      from { transform: scale(1); }
      to   { transform: scale(1.07) translateY(-1.2%); }
    }
    .twinkle { animation: twinkle 3.4s ease-in-out infinite alternate; }
    @keyframes twinkle { from { opacity: 0.25; } to { opacity: 0.9; } }
    .flicker { animation: flicker 0.42s ease-in-out infinite alternate; }
    @keyframes flicker { from { opacity: 0.75; } to { opacity: 1; } }
  }
  .stage .shade {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(11,11,12,0.35) 0%, rgba(11,11,12,0) 30%, rgba(11,11,12,0) 55%, rgba(11,11,12,0.55) 100%);
    pointer-events: none;
  }
  .caption {
    position: absolute;
    left: clamp(1.5rem, 6vw, 5rem);
    bottom: clamp(2.2rem, 7vh, 4.5rem);
    max-width: 30ch;
    color: #fff;
    z-index: 2;
  }
  .caption h2 {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.6rem, 4.2vw, 2.6rem);
    line-height: 1.12;
    margin: 0 0 0.9rem;
    text-shadow: 0 1px 30px rgba(0,0,0,0.45);
    text-wrap: balance;
  }
  .caption a.cta {
    appearance: none;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    color: #fff;
    padding: 0 0 2px;
    border-bottom: 2px solid var(--accent);
  }
  .caption a.cta:hover { color: var(--accent); }
  .dots {
    position: absolute;
    right: clamp(1.5rem, 5vw, 4rem);
    bottom: clamp(2.4rem, 7vh, 4.7rem);
    display: flex;
    gap: 0.65rem;
    z-index: 2;
  }
  .dots button {
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    /* Inactive dots sit small; the active one grows into place, so switching
       slides reads as the size travelling between them. */
    transform: scale(0.62);
    transition: transform 0.4s cubic-bezier(0.34, 1.3, 0.64, 1),
                background-color 0.4s ease;
  }
  .dots button.on { background: #fff; transform: scale(1); }
  .dots button:hover { transform: scale(1.18); background: rgba(255, 255, 255, 0.85); }
  .dots button.on:hover { transform: scale(1.18); background: #fff; }
  @media (prefers-reduced-motion: reduce) {
    .dots button { transition: none; }
  }

  /* ---------- Portfolio grid ---------- */
  .grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Rows share whatever height is available so the grid always reaches the
       footer — no dead band, whatever the viewport does. */
    grid-auto-rows: minmax(108px, 1fr);
    flex: 1;
  }
  .grid li { border-bottom: 1px solid var(--rule-2); display: flex; }
  .grid li:nth-child(odd) { border-right: 1px solid var(--rule-2); }
  .grid button {
    appearance: none;
    background: none;
    border: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    min-height: 108px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
  }
  .grid button:hover { background: var(--paper-2); }
  .grid .co {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.15rem, 3.4vw, 2rem);
    letter-spacing: 0.01em;
    color: var(--ink);
  }
  /* A logo replaces the wordmark once its file exists in /logos.
     Until then the button falls back to the company name. */
  .grid .co-logo { display: none; }
  .grid button.has-logo .co-logo {
    display: block;
    max-width: min(62%, 220px);
    max-height: 44%;
    object-fit: contain;
  }
  .grid button.has-logo .co { display: none; }
  /* Supplied marks are white-on-transparent; the grid is white, so invert them
     to black. They are monochrome, so this is a straight tone flip. */
  .grid .co-logo { filter: invert(1); }

  /* ---------- Company overlay ---------- */
  /* Sits BELOW the header (z 20) so the masthead stays visible over it, like FF */
  .overlay {
    position: fixed;
    inset: 0;
    z-index: 15;
    overflow-y: auto;
    background: var(--paper);
  }
  .overlay .pad {
    max-width: 76rem;
    margin: 0 auto;
    padding: calc(var(--header-h) + clamp(2rem, 6vw, 4rem)) clamp(1.5rem, 6vw, 5rem) clamp(3rem, 8vw, 5rem);
    position: relative;
  }
  .overlay .close-x { top: calc(var(--header-h) + 1.6rem); color: var(--ink); }
  .kicker {
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 0.6rem;
  }
  .overlay h2.big {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(2.6rem, 8vw, 4.6rem);
    letter-spacing: -0.02em;
    line-height: 1.02;
    margin: 0 0 2.2rem;
  }
  .overlay .desc {
    max-width: 46rem;
    font-size: 1.15rem;
    margin: 0 0 3rem;
  }
  .meta-label {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1rem;
    margin: 2.2rem 0 0.5rem;
  }
  .meta-links { display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-start; }
  .meta-links a, .meta-plain {
    font-size: 1.05rem;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 1px;
  }
  .meta-plain { border-bottom: 0; }
  .meta-links a:hover { color: var(--accent); border-color: var(--accent); }
  .bio-social { flex-direction: row; align-items: flex-end; gap: 1.5rem; }
  .bio-social a {
    display: inline-flex;
    align-items: center;
    border-bottom: 1px solid currentColor;
    padding-bottom: 6px;
  }

  /* Bio overlay (dark) */
  .overlay.dark { background: var(--char); color: #f2f2f2; }
  .overlay.dark .close-x { color: #fff; }
  .overlay.dark .desc { color: rgba(255,255,255,0.88); }
  .overlay.dark .meta-links a { color: #fff; border-color: #fff; }
  .overlay.dark .meta-links a:hover { color: var(--accent); border-color: var(--accent); }

  /* ---------- Team ---------- */
  .team { background: var(--black); color: #fff; }
  .team .inner {
    max-width: 76rem;
    width: 100%;
    margin: 0 auto;
    padding: clamp(2rem, 6vw, 4rem) clamp(1.5rem, 5vw, 3.5rem);
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* Team view is dark to the edges too */
  body.page-team { background: var(--black); }
  .team-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(0.75rem, 2.5vw, 2rem);
  }
  .headshot {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--black);
    overflow: hidden;
    cursor: pointer;
    border: 0;
    padding: 0;
    appearance: none;
    display: block;
    text-align: left;
  }
  .headshot.is-open { cursor: default; }
  .headshot .silhouette {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .headshot .qmark {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(2.6rem, 9vw, 5rem);
    line-height: 1;
    color: rgba(255, 255, 255, 0.55);
  }
  /* Photo is pre-cropped square, so it fills the card exactly like the
     silhouette does — that keeps the two cards in register. */
  .headshot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Scrim so the always-on name stays readable over the figure */
  .headshot::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 42%;
    background: linear-gradient(to top, rgba(11, 11, 12, 0.82), rgba(11, 11, 12, 0));
    pointer-events: none;
    z-index: 1;
  }
  .headshot .name {
    position: absolute;
    left: 1.2rem;
    right: 1.2rem;
    bottom: 1.1rem;
    text-align: left;
    color: #fff;
    z-index: 2;
  }
  .headshot .name b {
    display: block;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1rem, 2.6vw, 1.6rem);
    line-height: 1.04;
    letter-spacing: 0.01em;
    text-wrap: balance;
    text-shadow: 0 1px 24px rgba(0,0,0,0.7);
  }
  .headshot .name span {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(0.8rem, 1.5vw, 1rem);
    color: rgba(255,255,255,0.82);
    text-shadow: 0 1px 24px rgba(0,0,0,0.7);
  }

  /* ---------- Footer ---------- */
  footer { border-top: 1px solid var(--rule); }
  footer .inner {
    max-width: 76rem;
    margin: 0 auto;
    padding: 1.3rem clamp(1.5rem, 5vw, 3.5rem);
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 2rem;
    justify-content: space-between;
    font-family: var(--display);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
  }
  footer a { color: var(--muted); text-decoration: none; }
  footer a:hover { color: var(--accent); }
  footer .social { display: inline-flex; align-items: center; gap: 1.2rem; }
  footer .social a { display: inline-flex; align-items: center; gap: 0.4rem; }

  a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

  /* Visually hidden but available to screen readers and crawlers */
  .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }