/* ==========================================================================
   travisgafford.com
   ========================================================================== */

/* --- fonts ----------------------------------------------------------------
   Self-hosted rather than loaded from Google, so the site makes no third-party
   requests at all. Latin subset, woff2 only, one file per weight actually used.
   font-display: swap means text paints immediately in the fallback face and
   swaps when the webfont lands, so nothing is ever invisible while loading.
   Both families are SIL Open Font License. */

@font-face {
  font-family: "Raleway"; font-style: normal; font-weight: 500;
  src: url("/assets/fonts/raleway-500.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Raleway"; font-style: normal; font-weight: 700;
  src: url("/assets/fonts/raleway-700.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Raleway"; font-style: normal; font-weight: 800;
  src: url("/assets/fonts/raleway-800.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400;
  src: url("/assets/fonts/inter-400.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 500;
  src: url("/assets/fonts/inter-500.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 600;
  src: url("/assets/fonts/inter-600.woff2") format("woff2");
  font-display: swap;
}

/* Palette from the 2020 rebrand in the brand style guide. These are the same
   colours the TGI logo is drawn in, so the favicon and the site now agree.
   Navy and teal fail contrast as text on a dark background, so they are used
   only for surfaces and borders. */
:root {
  --bg:        #0b0d12;   /* near-black, faintly navy */
  --bg-alt:    #101620;
  --surface:   #151d29;
  --line:      #24303f;
  --text:      #f4f2ef;   /* guide #FFFFFF, warmed slightly for dark screens */
  --muted:     #97a3b2;

  --accent:       #E64C08;  /* guide deep orange, the logo's dominant tone */
  --accent-hover: #E66B08;  /* guide orange */
  --accent-2:     #85C7BB;  /* guide mint */
  --navy:         #17345C;  /* guide navy   — surfaces only */
  --teal:         #256A84;  /* guide teal   — borders and large text only */
  --on-accent:    #140602;

  --display: "Raleway", "Segoe UI", system-ui, sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1140px;
  --gap: clamp(1.5rem, 4vw, 3rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, picture { max-width: 100%; display: block; }
picture img { width: 100%; height: auto; }

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

.wrap { width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto; }
.wrap.narrow { width: min(720px, 100% - 2.5rem); }

.muted { color: var(--muted); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--on-accent); padding: .75rem 1.25rem;
}
.skip:focus { left: 0; }

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

/* --- header --------------------------------------------------------------- */

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.head-inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 68px; gap: 1rem;
}

.wordmark {
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  letter-spacing: .01em; text-decoration: none; white-space: nowrap;
}

.site-nav { display: flex; gap: 1.75rem; }

.site-nav a {
  font-size: .93rem; font-weight: 500; text-decoration: none;
  color: var(--muted); padding: .35rem 0; position: relative;
  transition: color .15s;
}
.site-nav a:hover { color: var(--text); }
.site-nav a[aria-current="page"] { color: var(--text); }
.site-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--accent);
}

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  padding: .5rem; gap: 5px; flex-direction: column;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text); }

/* --- buttons -------------------------------------------------------------- */

.btn {
  display: inline-block; font-family: var(--display); font-weight: 500;
  font-size: .95rem; text-decoration: none;
  padding: .8rem 1.6rem; border-radius: 2px;
  border: 1px solid var(--line); color: var(--text);
  transition: border-color .15s, background .15s, transform .15s;
}
.btn:hover { border-color: var(--text); transform: translateY(-1px); }

.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* --- hero ----------------------------------------------------------------- */

.hero { padding: clamp(3rem, 8vw, 6.5rem) 0 clamp(2.5rem, 6vw, 4.5rem); }

.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: var(--gap); align-items: center;
}

/* Carries the year ranges on the work page, so it follows the same rule as the
   stat numbers: body face, tabular figures, even digit widths. */
.eyebrow {
  font-family: var(--body); font-size: .78rem; font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 1.1rem;
}
.eyebrow a { text-decoration: none; }

.hero h1 {
  font-size: clamp(2.9rem, 7.5vw, 5rem);
  margin: 0 0 1.4rem;
}

.hero-loc {
  font-family: var(--display); font-size: .8rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin: 1.4rem 0 0;
}

.lede {
  font-size: clamp(1.08rem, 1.9vw, 1.32rem);
  line-height: 1.5; color: var(--muted);
  max-width: 34ch; margin: 0;
  /* Spread the lines evenly instead of leaving a single word stranded
     on the last line. Ledes are short, so balance is the right mode. */
  text-wrap: balance;
}
.page-head .lede, .closer .lede { max-width: 52ch; }

.cta-row { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.2rem; }

.hero-media picture img {
  border-radius: 3px;
  aspect-ratio: 4 / 3; object-fit: cover;
  filter: saturate(1.02);
}

/* --- stat band ------------------------------------------------------------ */

.band { border-block: 1px solid var(--line); background: var(--bg-alt); }

.stats {
  list-style: none; margin: 0; padding: 2.4rem 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
}
.stats li { display: flex; flex-direction: column; gap: .3rem; }
/* Numerals use the body face, not the display face. Raleway's digits are
   proportional and it ships no tabular-figure feature, so "1" is 20% narrower
   than "0" and a row of stats reads unevenly. Inter has tabular figures, which
   forces every digit to the same width. That is what makes a row of numbers
   look like a set rather than four unrelated words. */
.stat-v {
  font-family: var(--body); font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  letter-spacing: -.02em;
}
.stat-l { font-size: .85rem; color: var(--muted); }

/* --- sections ------------------------------------------------------------- */

.section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.section-alt { background: var(--bg-alt); border-block: 1px solid var(--line); }

.section-title {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin-bottom: 2.5rem;
}

.two-col { display: grid; grid-template-columns: 260px 1fr; gap: var(--gap); }
.col-head h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }

/* "pretty" is the paragraph-length counterpart to "balance": it only fixes the
   last line, so long copy keeps an even measure but never orphans a word. */
.prose p { margin: 0 0 1.35rem; max-width: 68ch; text-wrap: pretty; }
.prose p:last-child { margin-bottom: 0; }

.card p, .work-copy p, .reasons span, .postlist p, .ticks li { text-wrap: pretty; }

/* --- cards ---------------------------------------------------------------- */

.cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 3px; padding: 1.9rem 1.7rem;
}
.card h3, .card h2 { font-size: 1.25rem; margin-bottom: .8rem; }
.card p { margin: 0; color: var(--muted); font-size: .96rem; }

/* --- brand list ----------------------------------------------------------- */

.brandlist {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .6rem .5rem;
}
.brandlist li {
  font-family: var(--display); font-size: .92rem; font-weight: 500;
  color: var(--muted);
  border: 1px solid var(--line); border-radius: 2px;
  padding: .55rem 1rem;
}

/* --- tick lists ----------------------------------------------------------- */

.ticks { list-style: none; margin: 1.3rem 0 0; padding: 0; }
.ticks li {
  position: relative; padding-left: 1.6rem; margin-bottom: .6rem;
  color: var(--muted); font-size: .95rem;
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 8px; background: var(--accent-2);
  border-radius: 50%;
}
.ticks.big li { font-size: 1.05rem; color: var(--text); margin-bottom: 1rem; }
.card .ticks { margin-top: .4rem; }

/* --- page head ------------------------------------------------------------ */

.page-head {
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line);
}
.page-head h1 { font-size: clamp(2.4rem, 6vw, 3.8rem); margin-bottom: 1.1rem; }

.page-head.has-media { padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }

.head-grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: var(--gap); align-items: center;
}
.head-media picture img {
  border-radius: 3px; aspect-ratio: 4 / 3; object-fit: cover;
}

/* --- work ----------------------------------------------------------------- */

.work-list { display: flex; flex-direction: column; gap: clamp(3.5rem, 7vw, 6rem); }

.work-item {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--gap); align-items: center;
}
.work-item.reverse .work-media { order: 2; }

.work-media picture img {
  border-radius: 3px; aspect-ratio: 3 / 2; object-fit: cover;
}

/* Show artwork and key art whole rather than cropping into the typography.
   The letterbox colour is sampled from the art so the seam is invisible. */
.work-media picture img.fit-contain {
  object-fit: contain;
  background: #081a2c;
}

.work-media video {
  width: 100%; height: auto; display: block;
  border-radius: 3px; aspect-ratio: 16 / 9;
  background: #000; object-fit: cover;
}

/* YouTube facade — poster plus play button, swapped for the real player on click */
.yt { position: relative; }

.yt iframe {
  width: 100%; aspect-ratio: 16 / 9; display: block;
  border: 0; border-radius: 3px; background: #000;
}

.yt-play {
  display: block; width: 100%; padding: 0; border: 0; margin: 0;
  background: none; cursor: pointer; position: relative; border-radius: 3px;
}
.yt-play picture img {
  border-radius: 3px; aspect-ratio: 16 / 9; object-fit: cover;
  transition: filter .18s;
}
.yt-play:hover picture img { filter: brightness(.82); }

.yt-btn {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.yt-btn svg { width: 68px; height: 48px; }
.yt-btn .yt-bg { fill: #212121; fill-opacity: .82; transition: fill-opacity .18s, fill .18s; }
.yt-play:hover .yt-btn .yt-bg { fill: #f00; fill-opacity: 1; }

.work-copy h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom: .5rem; }
.role {
  font-family: var(--display); font-size: .9rem; font-weight: 500;
  color: var(--accent-2); margin: 0 0 1.2rem;
}
.work-copy p { color: var(--muted); margin: 0; }

/* --- closer --------------------------------------------------------------- */

.closer { border-top: 1px solid var(--line); }
.closer-inner { text-align: center; display: grid; justify-items: center; gap: 1.2rem; }
.closer h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); }

/* --- contact -------------------------------------------------------------- */

.contact-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--gap); }

.mailwrap { margin: 0; }

/* Before the click it is unmistakably a button. After the click it becomes the
   address itself, set large, and behaves as an ordinary mailto link. */
.mailto {
  text-decoration: none; cursor: pointer; word-break: break-word;
  font-family: var(--display); font-weight: 700; letter-spacing: -.01em;
}

.mailto:not([data-revealed]) {
  display: inline-flex; align-items: center; gap: .65rem;
  font-size: 1rem;
  background: var(--accent); color: var(--on-accent);
  border: 1px solid var(--accent); border-radius: 2px;
  padding: .85rem 1.5rem;
  transition: background .15s, border-color .15s, transform .15s;
}
.mailto:not([data-revealed]):hover {
  background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-1px);
}
.mailto:not([data-revealed]) svg { width: 18px; height: 18px; flex: none; }

.mailto[data-revealed] {
  display: inline-block;
  font-size: clamp(1.15rem, 2.9vw, 1.85rem);
  letter-spacing: -.02em; color: var(--accent);
  background: none; border: 0; padding: 0;
  border-bottom: 2px solid transparent;
}
.mailto[data-revealed]:hover { border-bottom-color: var(--accent); }

/* Until the script has attached its handler there is nothing to click, so the
   link is inert rather than looking live and going nowhere. */
a.mail:not(.mail-ready) { pointer-events: none; }
.btn.mail:not(.mail-ready) { opacity: .75; }

.reasons { list-style: none; margin: 2.5rem 0 0; padding: 0; }
.reasons li {
  display: grid; gap: .3rem;
  padding: 1.3rem 0; border-top: 1px solid var(--line);
}
.reasons strong { font-family: var(--display); font-size: 1.05rem; }
.reasons span { color: var(--muted); font-size: .95rem; }

.contact-side picture img { border-radius: 3px; aspect-ratio: 4 / 5; object-fit: cover; }
.contact-side picture img.portrait { background: var(--text); }
.social-col { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.social-col a {
  font-size: .88rem; color: var(--muted); text-decoration: none;
  border: 1px solid var(--line); border-radius: 2px; padding: .45rem .9rem;
}
.social-col a:hover { color: var(--text); border-color: var(--text); }

/* --- blog ----------------------------------------------------------------- */

.postlist { list-style: none; margin: 0; padding: 0; }
.postlist li { border-bottom: 1px solid var(--line); }
.postlist a {
  display: block; padding: 2rem 0; text-decoration: none;
  transition: opacity .15s;
}
.postlist a:hover { opacity: .72; }
.postlist time {
  font-family: var(--body); font-size: .8rem; letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase; color: var(--accent);
}
.postlist h2 { font-size: clamp(1.35rem, 3vw, 1.85rem); margin: .5rem 0 .6rem; }
.postlist p { margin: 0; color: var(--muted); font-size: .97rem; }

.post { padding: clamp(3rem, 7vw, 5rem) 0 clamp(3rem, 6vw, 5rem); }
.post h1 { font-size: clamp(2rem, 5vw, 3.1rem); margin-bottom: .9rem; }
.post-meta {
  font-family: var(--body); font-size: .85rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin: 0 0 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line);
}

.post .prose { font-size: 1.06rem; }
.post .prose h2 { font-size: 1.55rem; margin: 2.6rem 0 1rem; }
.post .prose h3 { font-size: 1.25rem; margin: 2rem 0 .8rem; }
.post .prose ul, .post .prose ol { color: var(--muted); padding-left: 1.3rem; }
.post .prose li { margin-bottom: .5rem; }
.post .prose a { color: var(--accent); text-underline-offset: 3px; }
.post .prose img { border-radius: 3px; margin: 2rem 0; }
.post .prose blockquote {
  margin: 2rem 0; padding-left: 1.4rem;
  border-left: 3px solid var(--accent-2); color: var(--muted); font-style: italic;
}
.post .prose pre {
  background: var(--surface); border: 1px solid var(--line); border-radius: 3px;
  padding: 1.1rem; overflow-x: auto; font-size: .88rem;
}
.post .prose code { font-size: .9em; }
.post .prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

.post-back { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.post-back a { color: var(--muted); text-decoration: none; font-size: .93rem; }
.post-back a:hover { color: var(--text); }

/* --- footer --------------------------------------------------------------- */

.site-foot { border-top: 1px solid var(--line); background: var(--bg-alt); }

.foot-inner {
  display: flex; flex-wrap: wrap; gap: 2rem;
  justify-content: space-between; padding: 3rem 0 2rem;
}
.foot-name { font-family: var(--display); font-weight: 700; font-size: 1.1rem; margin: 0 0 .4rem; }
.foot-brand p { margin: 0; font-size: .92rem; }

.foot-links { display: flex; flex-wrap: wrap; gap: .5rem; align-content: flex-start; }
.foot-links a {
  font-size: .88rem; color: var(--muted); text-decoration: none;
  border: 1px solid var(--line); border-radius: 2px; padding: .4rem .85rem;
}
.foot-links a:hover { color: var(--text); border-color: var(--text); }

.foot-legal { padding-bottom: 2.5rem; }
.foot-legal p { margin: 0; font-size: .85rem; }
.foot-legal a { color: var(--muted); }

/* --- links page (the Linktree replacement) -------------------------------- */

.links-page { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 6vw, 5rem); }
.links-wrap { width: min(540px, 100% - 2.5rem); position: relative; }

/* The whole panel sits in an ambient halo, rather than each button glowing.
   Two large blurred colour fields bleed out past the panel edges. */
.links-wrap::before {
  content: "";
  position: absolute; inset: -8% -12%;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(42% 34% at 76% 8%,  color-mix(in srgb, var(--accent) 55%, transparent), transparent 72%),
    radial-gradient(46% 36% at 14% 88%, color-mix(in srgb, var(--accent-2) 34%, transparent), transparent 72%),
    radial-gradient(50% 40% at 50% 50%, color-mix(in srgb, var(--teal) 34%, transparent), transparent 76%);
  filter: blur(60px);
  opacity: .6;
}

.links-panel {
  position: relative; z-index: 1;
  border-radius: 22px;
  padding: clamp(1.6rem, 4vw, 2.4rem) clamp(1rem, 3vw, 1.6rem) clamp(1.4rem, 3vw, 2rem);
  background: color-mix(in srgb, var(--bg-alt) 88%, transparent);
  border: 1px solid var(--line);
  backdrop-filter: blur(6px);
}

.share-btn {
  position: absolute; top: .9rem; right: .9rem;
  width: 38px; height: 38px; padding: 0;
  display: grid; place-items: center;
  background: none; border: 1px solid var(--line); border-radius: 50%;
  color: var(--muted); cursor: pointer;
  transition: color .15s, border-color .15s;
}
.share-btn:hover { color: var(--text); border-color: var(--text); }
.share-btn svg { width: 17px; height: 17px; }

.share-toast {
  position: absolute; top: 3.5rem; right: .9rem;
  font-size: .78rem; color: var(--accent-2);
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
.share-toast.on { opacity: 1; }

.links-head { text-align: center; margin-bottom: 2rem; }
.links-head h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); margin: 1.2rem 0 .5rem; }
.links-head p { margin: 0; font-size: .95rem; }

.links-head picture img.avatar {
  width: 116px; height: 116px; margin: 0 auto;
  border-radius: 50%; object-fit: cover;
  border: 2px solid var(--line);
}

.linklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }

/* Buttons stay flat and uniform — the panel carries the glow, not these.
   A shared min-height keeps every card the same size whether or not it has a
   subtitle; content is centred so single-line cards simply get more air. */
.linklist a {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 78px;
  text-align: center;
  padding: .8rem 1.25rem;
  background: #07090d;
  border: 1px solid transparent;
  border-radius: 10px;
  text-decoration: none;
  transition: border-color .18s, transform .18s, background .18s;
}
.linklist a:hover, .linklist a:focus-visible {
  border-color: var(--accent);
  background: #0c1017;
  transform: translateY(-2px);
}

.link-label {
  display: block;
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  color: var(--text);
}
.link-note {
  display: block; margin-top: .2rem;
  font-size: .82rem; color: var(--muted); line-height: 1.35;
  max-width: 34ch; text-wrap: balance;
}

/* --- lightbox ------------------------------------------------------------- */

img.zoomable { cursor: zoom-in; }

body.lb-open { overflow: hidden; }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(6, 6, 8, .94);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox[hidden] { display: none; }

.lb-fig {
  margin: 0; max-width: 100%; max-height: 100%;
  display: flex; flex-direction: column; gap: .9rem; align-items: center;
}
.lb-fig img {
  max-width: 100%; max-height: 80vh;
  width: auto; height: auto; object-fit: contain;
  border-radius: 3px;
}
.lb-fig figcaption {
  color: var(--muted); font-size: .88rem; text-align: center;
  max-width: 62ch;
}

.lightbox button {
  position: absolute; background: none; border: 0; color: var(--text);
  cursor: pointer; line-height: 1; padding: .5rem;
}
.lightbox button:hover { color: var(--accent); }

.lb-close { top: .75rem; right: 1rem; font-size: 2.4rem; }

.lb-nav {
  top: 50%; transform: translateY(-50%);
  font-size: 3rem; padding: 1rem;
}
.lb-prev { left: .25rem; }
.lb-next { right: .25rem; }
.lb-nav[hidden] { display: none; }

@media (max-width: 720px) {
  .lb-nav { font-size: 2.2rem; padding: .5rem; }
  .lb-fig img { max-height: 70vh; }
}

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { order: -1; }
  .hero-media picture img { aspect-ratio: 16 / 10; }
  .lede { max-width: none; }
  .two-col { grid-template-columns: 1fr; gap: 1.5rem; }
  .head-grid { grid-template-columns: 1fr; }
  .head-media picture img { aspect-ratio: 16 / 10; }
  .work-item { grid-template-columns: 1fr; gap: 1.75rem; }
  .work-item.reverse .work-media { order: 0; }
  .contact-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1rem; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }

  .nav-toggle { display: flex; }

  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: .5rem 0;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: .85rem 1.25rem; width: 100%; }
  .site-nav a[aria-current="page"]::after { display: none; }
  .site-nav a[aria-current="page"] { color: var(--accent); }

  .head-inner { position: relative; }
  .cta-row .btn { flex: 1 1 auto; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}