:root {
  --focus-ring: 2px solid currentColor;
  --motion-standard: cubic-bezier(.22, 1, .36, 1);
  --type-page-hero: clamp(3.8rem, 6vw, 6.5rem);
}

html { scroll-padding-top: 6.5rem; }

body { overflow-x: clip; }

img { max-width: 100%; }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: .75rem;
  left: .75rem;
  padding: .7rem 1rem;
  background: var(--ink);
  color: var(--cream);
  font-weight: 700;
  transform: translateY(calc(-100% - 1.5rem));
  transition: transform .2s ease;
}

.skip-link:focus { transform: none; }

.wordmark,
.footer-info a,
.journal-back,
.journal-card-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 4px;
}

.site-nav a[aria-current="page"] {
  position: relative;
  color: var(--ink) !important;
}

.site-nav a[aria-current="page"]::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -.45rem;
  left: 0;
  height: 2px;
  background: var(--orange);
}

.mobile-menu a[aria-current="page"] {
  color: var(--ink) !important;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
  text-underline-offset: .35rem;
}

.contact-form button:disabled {
  cursor: wait;
  opacity: .58;
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible,
.work-gate__form input:focus-visible {
  outline-color: var(--orange);
}

.services-hero h1,
.work-gate h1,
.philosophy-hero h1,
.journal-hero h1 {
  font-size: var(--type-page-hero);
}

/* Services: keep the editorial selector, but make every choice legible and immediate. */
.capability-tab,
.capability-stage.is-visible .capability-tab,
.working-model__option,
.working-model.is-visible .working-model__option {
  opacity: 1;
  transform: none;
}

.capability-tab { color: rgba(245, 242, 234, .74); }
.capability-tab:hover,
.capability-tab:focus-visible { color: var(--cream); }

.working-model__option {
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

/* Philosophy: the ideas should be present, not hidden behind repeated reveals. */
.philosophy-page .reveal-on-scroll {
  opacity: 1;
  transform: none;
  transition: none;
}

.philosophy-hero__intro {
  align-self: start;
  margin-top: clamp(7rem, 12vw, 10.5rem);
}

.journal-card {
  transition: border-color .2s ease, color .2s ease;
}

.journal-card:focus-within,
.journal-card:hover { border-color: var(--ink); }

@media (max-width: 900px) and (min-width: 721px) {
  .capability-tab strong { font-size: clamp(1.15rem, 2.25vw, 1.55rem); }
}

@media (max-width: 720px) {
  :root { --type-page-hero: clamp(4rem, 17vw, 6.1rem); }

  html { scroll-padding-top: 5.75rem; }

  .site-header { min-height: 88px; }

  .mobile-menu a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /* Preserve the homepage story and content, but remove the mobile scroll trap. */
  .story-sequence { height: auto; }

  .story-sequence-stage {
    position: relative;
    top: auto;
    height: auto;
    overflow: visible;
  }

  .story-visual { position: relative; }

  .drift-tempo-stage {
    min-height: auto;
    padding: 1.5rem 0 3.25rem;
  }

  .drift-word,
  .drift-tempo-title b,
  .tempo-word,
  .drift-tempo[data-stage] .drift-word,
  .drift-tempo[data-stage] .drift-tempo-title b,
  .drift-tempo[data-stage] .tempo-word,
  .dt-mobile-summary,
  .drift-tempo[data-stage] .dt-mobile-summary,
  .drift-tempo .process-flow,
  .drift-tempo.process-ready .process-flow {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  .drift-tempo .process-flow .step,
  .drift-tempo .process-flow .step.is-revealed:not(.is-active),
  .drift-tempo .process-flow .step.is-active {
    color: rgba(13, 13, 12, .68);
  }

  .drift-tempo .process-flow .step:last-child { color: var(--ink); }

  .drift-tempo .process-flow small,
  .drift-tempo .process-flow .step.is-revealed small,
  .drift-tempo .process-flow .step.is-active small {
    opacity: .72;
    transform: none;
    transition: none;
  }

  .working-model {
    padding-block: 4.25rem 5rem;
  }

  .working-model__heading { margin-bottom: 2.75rem; }

  .working-model__option + .working-model__option { margin-top: 2.75rem; }

  .working-model__option h3 {
    font-size: clamp(2.65rem, 12vw, 3.8rem);
  }

  .services-collage {
    margin-inline: 0;
    overflow: clip;
  }

  .services-collage__image--strategy,
  .services-collage.is-visible .services-collage__image--strategy {
    left: 0;
    transform: translate3d(0, var(--collage-strategy-y, 0px), 0) rotate(-2.5deg);
  }

  .services-collage__image--production,
  .services-collage.is-visible .services-collage__image--production {
    right: 0;
    transform: translate3d(0, var(--collage-production-y, 0px), 0) rotate(2deg);
  }

  .work-gate__visual { overflow: clip; }

  .work-gate__image--strategy {
    left: 0;
    transform: translate(0, 2rem) rotate(-2deg);
  }

  .work-gate__image--set {
    right: 0;
    transform: translate(0, 2rem) rotate(1.5deg);
  }

  .capability-accordion__trigger { color: rgba(245, 242, 234, .68); }
  .capability-accordion__trigger[aria-expanded="true"] { color: var(--orange); }

  .philosophy-hero__intro { margin-top: 0; }

  .journal-hero h1 { font-size: clamp(3.5rem, 15vw, 4.8rem); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Footer email (secondary pages): replaces the separate "Get in touch" block. */
.site-footer .footer-email { color: var(--ink); font-size: .9rem; font-weight: 500; text-decoration: underline; text-underline-offset: .18em; }
@media (min-width: 721px) { .site-footer .footer-email { margin-left: auto; } .site-footer .footer-email + small { margin-left: 2rem; } }

/* One footer on every page: logo, email, copyright, centered and stacked on phones. */
@media (max-width: 720px) {
  .site-footer.shell {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .75rem;
    padding-block: 1.75rem;
    text-align: center;
  }
  .site-footer.shell .logo-mark img { margin-left: 0; }
  .site-footer.shell small:last-child,
  .site-footer.shell .footer-email + small { margin: 0; width: auto; align-self: center; }
}

/* Larger tap and click areas for small text links. Invisible, no layout change. */
.site-nav a, .site-footer .footer-email { position: relative; }
.site-nav a::before { content: ''; position: absolute; inset: -.5rem -.45rem; }
.site-footer .footer-email::before { content: ''; position: absolute; inset: -.85rem -.6rem; }

/* Smooth page-to-page navigation. Browsers that support cross-document view
   transitions fade between pages; others navigate as before. */
@view-transition { navigation: auto; }
html { background: var(--cream); }
::view-transition-old(root) { animation: tempo-page-out .16s ease-in both; }
::view-transition-new(root) { animation: tempo-page-in .32s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes tempo-page-out { to { opacity: 0; } }
@keyframes tempo-page-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Footer page links: the same four pages as the header, so every page is reachable from the bottom of any page. */
.site-footer .footer-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.5rem; }
.site-footer .footer-nav a { position: relative; color: var(--ink); font-size: .9rem; font-weight: 500; text-decoration: none; }
.site-footer .footer-nav a::before { content: ''; position: absolute; inset: -.85rem -.5rem; }
.site-footer .footer-nav a:hover, .site-footer .footer-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: .18em; }
@media (min-width: 721px) {
  /* Logo left, email and copyright centered, page links right. */
  .site-footer.shell { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto; align-items: center; align-content: center; column-gap: 2rem; row-gap: .25rem; }
  .site-footer.shell .logo-mark { grid-column: 1; grid-row: 1 / 3; justify-self: start; }
  .site-footer.shell .footer-email { grid-column: 2; grid-row: 1; margin: 0; justify-self: center; }
  .site-footer.shell .footer-email + small, .site-footer.shell small:last-child { grid-column: 2; grid-row: 2; margin: 0; justify-self: center; text-align: center; }
  .site-footer .footer-nav { grid-column: 3; grid-row: 1 / 3; justify-self: end; margin: 0; flex-wrap: nowrap; }
}
@media (max-width: 720px) { .site-footer .footer-nav { justify-content: center; gap: .35rem 1.25rem; } }

/* Footer: a little more breathing room on every page */
.site-footer.shell { min-height: 128px; padding-block: 2.25rem; }
@media (max-width: 720px) { .site-footer.shell { min-height: 0; padding-block: 2.25rem 2.5rem; row-gap: 1rem; } }

/* Docked menu: a light panel, and the page behind it softly blurs while it is open */
body::after { content: ""; position: fixed; inset: 0; z-index: 39; background: rgba(245,242,234,.35); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s ease, visibility 0s linear .35s; }
/* The blur only exists while the menu is open, so it costs nothing during scrolling */
body.pill-menu-open::after { opacity: 1; visibility: visible; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: opacity .35s ease; }
.chapter-pill .chapter-menu { background: var(--cream); border: 1px solid rgba(13,13,12,.12); box-shadow: 0 18px 50px rgba(13,13,12,.18); }
.chapter-pill .chapter-menu a { color: var(--ink); }
.chapter-pill .chapter-menu a:hover, .chapter-pill .chapter-menu a:focus-visible { background: rgba(13,13,12,.07); }
.chapter-pill .chapter-menu .chapter-menu__cta { background: var(--orange); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { body::after { transition: none; } }

/* Page load: hold the page back (invisible, animations paused) until fonts and images have arrived, then let it in
   together. Nothing is half-loaded, swapping fonts or popping in while it animates. A 2.5s timer in the page head
   guarantees it can never stay hidden. */
html.is-loading body { opacity: 0; }
html.is-loading *, html.is-loading *::before, html.is-loading *::after { animation-play-state: paused !important; }
body { transition: opacity .35s ease; }
.chapter-pill { contain: layout style; }
@media (prefers-reduced-motion: reduce) { body { transition: none; } }
/* The docked menu is invisible until opened, but it used to still catch taps over whatever sat behind it (the team photos, links). */
.chapter-pill .chapter-menu:not(.is-shown) { pointer-events: none; }
.chapter-pill .chapter-menu[hidden] { display: none !important; }



/* Phone bars (iPhone Safari 26). Safari looks at the top and bottom edge of the screen for anything position: sticky or fixed.
   If it finds one, it stops letting the page run under its bars and paints a solid bar in that element's colour instead,
   and it can keep that colour afterwards. The four move cards were the only sticky thing on Home at phone size, which is
   why only Home did it. On phones they now scroll as a normal list (see nds-flow.css), so Home matches Philosophy.
   Do not add fixed or sticky strips, fades or colour samplers at the screen edges: each one brings the solid bar back. */
.bar-tint { display: none !important; }

/* Skip link: hidden until keyboard focus. It used to sit off-screen with a transform and could show up in the corner of the phone. */
.skip-link { position: absolute; transform: none; opacity: 0; pointer-events: none; top: .75rem; left: .75rem; }
.skip-link:focus-visible { opacity: 1; pointer-events: auto; }
.skip-link:focus:not(:focus-visible) { opacity: 0; }

/* Edge to edge on iPhone (same setup as america.gov). The viewport meta has viewport-fit=cover, so the page is laid out
   under the clock and under Safari's address pill instead of Safari adding its own off-white band and fade there.
   These rules keep the things you tap clear of the clock and the home bar. env() is 0 everywhere else. */
@media (max-width: 720px) {
  body .site-header { padding-top: env(safe-area-inset-top, 0px); height: calc(88px + env(safe-area-inset-top, 0px)); }
  body .chapter-pill { bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
  body .site-footer { margin-bottom: env(safe-area-inset-bottom, 0px); }
  body .mobile-menu { padding-top: calc(88px + 3.5rem + env(safe-area-inset-top, 0px)); padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 960px) and (orientation: landscape) {
  .shell { max-width: calc(100% - max(4vw, env(safe-area-inset-left, 0px)) - max(4vw, env(safe-area-inset-right, 0px))); }
}

/* Arrows are drawn shapes, not the "→" character. The character is not in our web fonts, so every device swapped in its
   own (a solid block arrow on a Mac, a thin line arrow on an iPhone). These shapes are traced from the Mac ones at the
   same size and position, so every device shows the same arrow. Use the same markup for any new arrow. */
.arrow-glyph { display: inline-block; flex: none; width: .787em; height: .45em; margin-inline: .107em; vertical-align: .137em; fill: currentColor; }
.arrow-glyph--regular { width: .82em; height: .493em; margin-inline: .09em; vertical-align: .113em; }
.arrow-glyph--left { transform: scaleX(-1); }

/* Forms use the site font. Buttons, inputs and text areas do not inherit a font on their own, so the Send button and
   anything typed into a field were showing in each device's default font. */
button, input, textarea, select { font-family: inherit; }

/* One size for every small label and caption: .85rem (13.6px), the minimum in DESIGN-NOTES. */
body .field label, body .work-gate label, body .team .experience .eyebrow, body .person p, body .site-footer small,
body .journal-article .eyebrow, body .journal-more .eyebrow { font-size: .85rem !important; }

/* Text links get an invisible, larger tap area (the footer links already had one). Nothing moves on screen. */
.dt-more, .svc-step__more { position: relative; }
.dt-more::before, .svc-step__more::before { content: ''; position: absolute; inset: -.7rem -.5rem; }