/* Self-hosted fonts (SIL Open Font License, see /assets/fonts) - variable files covering the weights the design system uses */
@font-face { font-family: "Google Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/google-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Page-level rules for the live site. Everything else comes from the design system:
   /design-system/tokens.css, then /design-system/components/bundle.css (body has class="tmc"). */
:root { color-scheme: light; box-sizing: border-box; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height) + 16px); }
body { margin: 0; padding: 0; }
[tabindex="-1"]:focus { outline: none; }
/* Footer column titles are h2 for a clean heading outline, styled like the design system's footer h4 */
.footer h2.foot-h { margin: 0 0 var(--space-4); font: 500 12px/16px var(--font-sans); letter-spacing: .5px; text-transform: uppercase; color: var(--on-ink-muted); text-wrap: initial; }
/* About statement: the muted phrase uses line-strong so it passes contrast for large text */
.ab-statement span { color: var(--line-strong); }
.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; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--canvas); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Client work: script cards filled with a muted video loop. 13 cards, so the strip runs longer to keep the original speed. */
.scripts .marquee-track { animation-duration: 98s; }
.reel.work { isolation: isolate; background: var(--flame-dark); }
.reel-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.reel.work::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(10,10,10,.6) 0%, rgba(10,10,10,0) 24%, rgba(10,10,10,0) 60%, rgba(10,10,10,.85) 100%); pointer-events: none; }
.reel.work .reel-top, .reel.work .reel-foot { position: relative; z-index: 2; }
.reel.work .side { z-index: 2; }
.reel.work .reel-foot .cat { opacity: .9; }
.reel.work .reel-foot .bar span { width: 0; transition: width .3s linear; }
/* Mobile and tablet refinements, layered on the design system's 1100 / 1023 / 767 breakpoints */
.tmc p, .tmc li, .tmc dd { overflow-wrap: break-word; }
.logo { min-height: 44px; }
.sheet .wrap { display: block; min-height: 0; }
.sheet .btn.sheet-cta { display: none; padding: 18px 20px; font: 500 16px/18px var(--font-sans); }

/* Tablets and large phones: menu button and the call button, no squeezed inline links */
@media (max-width: 1023px) {
  .nav nav { display: none; }
  .nav > .wrap { grid-template-columns: 1fr auto auto; }
  .nav > .wrap > .btn { grid-column: 2; }
  .menu-btn { display: inline-flex; grid-column: 3; }
  .pillar ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-6); }
}

/* Small tablets and large phones (iPad mini): two-column layouts instead of the phone stack */
@media (min-width: 600px) and (max-width: 767px) {
  .nav > .wrap > .btn { display: inline-flex; }
  .venues { grid-template-columns: repeat(6, 1fr); }
  .venue { grid-column: span 2; }
  .venue.wide { grid-column: span 3; }
  .vals, .values7, .impact, .foot-grid, .toc, .form .two { grid-template-columns: 1fr 1fr; }
  .impact-quote, .value-panel { grid-column: span 2; }
}

/* Two-column value grid (600-1100): the seventh value spans the row instead of sitting alone */
@media (min-width: 600px) and (max-width: 1100px) {
  .values7 .value:last-child { grid-column: span 2; }
}

/* Phones: the call button moves into the menu, hospitality cards get the full width */
@media (max-width: 599px) {
  .sheet .btn.sheet-cta { display: inline-flex; margin-bottom: var(--space-6); }
  .pillar ul { display: block; }
  .venues { grid-template-columns: 1fr; }
  .venue, .venue.wide { grid-column: auto; min-height: 190px; }
  .venue h3 { font-size: 24px; line-height: 28px; }
  .statement .word { font-size: clamp(52px, 17vw, 236px); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid > :first-child, .foot-grid > :last-child { grid-column: span 2; }
}

/* iPad landscape: give the three service cards a little more room */
@media (min-width: 1024px) and (max-width: 1199px) {
  .pillar { padding: 32px 24px 28px; }
  .pillar h3 { font-size: 27px; line-height: 31px; }
}

/* Touch screens: finger-sized tap targets */
@media (max-width: 1023px), (pointer: coarse) {
  .nav-links a { padding-block: 13px; }
  .footer ul { gap: 0; }
  .footer a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer li span { display: block; padding-block: 12px; }
  .toc a { display: flex; align-items: center; min-height: 44px; padding-block: 0; }
  .findus-list a.v { display: inline-block; padding-block: 9px; margin-block: -9px; }
}

@media (prefers-reduced-motion: reduce) {
  .reel.work .reel-foot { display: none; }
  .reel.work::after { background: linear-gradient(to bottom, rgba(10,10,10,.6) 0%, rgba(10,10,10,0) 24%); }
  .reel.work .reel-top { pointer-events: none; }
}