/* ---------- Fonts (self-hosted, latin + latin-ext subsets) ---------- */
@font-face { font-family: 'Gabarito'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/assets/fonts/Gabarito-normal-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: 'Gabarito'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/assets/fonts/Gabarito-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/assets/fonts/Nunito-normal-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: 'Nunito'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/assets/fonts/Nunito-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-style: italic; font-weight: 400 900; font-display: swap; src: url('/assets/fonts/Nunito-italic-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: 'Nunito'; font-style: italic; font-weight: 400 900; font-display: swap; src: url('/assets/fonts/Nunito-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Tokens ----------
   Measurements follow the original site: an 800px content column,
   460px text beside 256px squares, 14px corners, flat blue and orange blocks. */
:root {
  --blue: #00b6ef;
  --orange: #f89f20;
  --ink: #000000;
  --bg: #ffffff;
  --muted: #3d4148;
  --line: #e4e7eb;

  --content: 800px;
  --gutter: clamp(16px, 5vw, 60px);
  --text-col: 57.5%;   /* 460 / 800 */
  --side-col: 32%;     /* 256 / 800 */
  --radius: 14px;
  --slant: 16px;
  --spring: 40px;
  /* Side padding of the content column. With viewport-fit=cover the colour blocks run under a
     landscape phone's side safe areas; content stays out of them (inset + 24px). */
  --pad-l: max(var(--gutter), calc(env(safe-area-inset-left, 0px) + 24px));
  --pad-r: max(var(--gutter), calc(env(safe-area-inset-right, 0px) + 24px));      /* hidden extra room so a block's edge can overshoot (main.js) */
  --display: 'Gabarito', 'Arial Rounded MT Bold', Arial, sans-serif;
  --body: 'Nunito', system-ui, sans-serif;
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Phone browser bars (iOS 26 Safari, tested in the simulator): without fixed elements at the
   screen edges, Safari shows the content under its bars with a fade tinted by the BODY's
   background colour, and fills the rubber-band area past the end of the page with it. (Any
   fixed element at an edge makes Safari mask the content with a solid block instead.) So the
   body colour is driven by main.js: the colour block at the top, white in between, the
   footer's orange near the end, eased. The content itself sits on white (main, and the home
   page's plain header). A block in the page's top colour sits above the page for the bounce
   at the top. main reaches up under the header and down under the footer so the areas next
   to their slanted edges are white. */
html:has(.header-band) { background: var(--blue); }
body { background: var(--bg); position: relative; }
/* Subpages start with the header band's blue, so Safari's status-bar area is blue from the
   first frame and the band springs down out of it (main.js keeps it in step with scrolling). */
body.header-band { background: var(--blue); }
main { background: var(--bg); }
.header-plain .site-header { background: var(--bg); }
.header-plain main { margin-bottom: -80px; padding-bottom: 73px; }
body::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 100vh; background: var(--bg); pointer-events: none; }
body.header-band::before { background: var(--blue); }
/* main reaches up under the header and down under the footer. Its negative margins collapse
   with the header's (-40px) and footer's (-7px): at the top it reaches the full header height
   (--header-h, set by main.js), so main's white starts at the very top of the page and only
   the status-bar area shows the band's blue before the band springs in; at the bottom it
   reaches 80px, 73px of which the padding gives back. */
.header-band main { background: var(--bg); margin-block: calc(-1 * var(--header-h, 80px)) -80px;
  padding-block: calc(var(--header-h, 80px) - 40px) 73px; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 1rem/1.625 var(--body);
  overflow-x: clip; -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
b, strong { font-weight: 800; }
h1, h2, h3, h4 { font-family: var(--display); margin: 0; }
p { margin: 0 0 20px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
svg { width: 1em; height: 1em; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.wrap { width: 100%; max-width: calc(var(--content) + 2 * var(--gutter)); margin-inline: auto;
  padding-inline: var(--pad-l) var(--pad-r); }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; font-weight: 800; }
.skip:focus { top: 12px; }

/* ---------- Header ---------- */
.site-header { position: relative; z-index: 5; padding: 30px 0 16px; }
.header-band .site-header {
  background: var(--blue);
  padding-bottom: calc(14px + var(--slant) + var(--spring));
  margin-bottom: calc(-1 * var(--spring));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant) - var(--spring)), 0 calc(100% - var(--spring)));
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; flex-direction: column; text-decoration: none; font-family: var(--display); text-transform: uppercase; }
.brand-first { font-size: 55px; font-weight: 900; line-height: 40px; }
.brand-last { font-size: 18px; line-height: 14px; letter-spacing: 0.16em; margin: 5px 0 0 1px; }
.brand-last b { font-weight: 900; }
.site-header nav { display: flex; align-items: center; margin-right: -30px; }
.site-header nav a {
  font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 20px; text-transform: uppercase; text-decoration: none;
  padding: 10px 30px; position: relative;
}
.site-header nav a:not(.nav-icon)::after {
  content: ''; position: absolute; left: 30px; right: 30px; bottom: 4px; height: 3px; border-radius: 3px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.site-header nav a:hover::after { transform: scaleX(1); }
.site-header nav a[aria-current="page"] { font-weight: 700; }
.nav-icon svg { width: 26px; height: 26px; display: block; transition: transform .2s ease; }
.nav-icon:hover svg { transform: scale(1.1) rotate(-4deg); }

/* ---------- Titles ---------- */
.section-head { padding: 110px 0 30px; text-align: center; }
/* On skill pages a section that follows another sits a little further down (original). */
.skill-section + .skill-section .section-head { padding-top: 130px; }
/* Project pages, as on the original: contributions title and pager spacing. */
.row-first + section .section-head { padding-top: 135px; }
.row-first + .pager { padding-top: 124px; }
section:has(.row-contrib) + .pager { padding-top: 110px; }
.section-title { font-size: 40px; line-height: 1; font-weight: 400; text-transform: uppercase; text-wrap: balance; }
.section-title b { font-weight: 900; }
/* Hover target is the title itself, not the full-width row. */
.section-title, .page-title { width: fit-content; }
.section-title { margin-inline: auto; }
/* Variable-font weight swap (main.js marks each half .tw-bold or .tw-light). */
.swap-title .tw-bold, .swap-title .tw-light { transition: font-weight .45s cubic-bezier(.45, 0, .25, 1); }
@media (hover: hover) {
  .swap-title:hover .tw-bold { font-weight: 400; }
  .swap-title:hover .tw-light { font-weight: 900; }
}
.swap-title.is-pulse .tw-bold { font-weight: 620; }
.swap-title.is-pulse .tw-light { font-weight: 680; }
.page-head { padding-top: 70px; margin-bottom: 24px; }
.eyebrow { font-family: var(--display); font-size: 18px; line-height: 20px; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 2px; }
.eyebrow b { font-weight: 900; }
.page-title { font-size: 55px; line-height: 46px; font-weight: 900; text-transform: uppercase; }
.page-title:has(b) { font-weight: 400; }
.page-title b { font-weight: 900; }

/* ---------- Text ---------- */
.prose h3 { font-size: 22px; line-height: 30px; font-weight: 700; text-transform: uppercase; margin-bottom: 10px; }
.prose h4, .lead { font-family: var(--display); font-size: 18px; line-height: 24px; font-weight: 700; margin: 10px 0; }
.prose ul { margin: 0 0 20px; padding-left: 22px; }
.row-contrib ul { padding-left: 40px; margin-bottom: 5px; }
.row-contrib li { line-height: 1.5; }
.prose li { margin-bottom: 4px; }
.prose-full { max-width: calc(var(--content) + 2 * var(--gutter)); }

/* ---------- Rows: 460px text beside a 256px square ---------- */
/* ---------- Page intro (title + text, optional image beside them) ---------- */
.intro { padding-top: 70px; display: grid; grid-template-columns: var(--text-col) var(--side-col); justify-content: space-between; align-content: start; }
.intro-head { grid-column: 1; margin-bottom: 24px; }
.intro-head:not(:has(.eyebrow)) { margin-bottom: 26px; }
.intro:not(.has-side) { grid-template-columns: 1fr; }
.intro-text { grid-column: 1; }
.intro-side { grid-column: 2; grid-row: 1 / span 2; display: grid; gap: 19px; align-content: start; }
.intro-side > img:not(.square) { width: 100%; border-radius: var(--radius); object-fit: cover; }
.intro.fit-square .intro-side > img { aspect-ratio: 1; }
/* The image fills the height of the text beside it, without adding height of its own. */
.intro.fit-stretch .intro-side { position: relative; }
.intro.fit-stretch .intro-side > img { position: absolute; inset: 0; height: 100%; }
.intro.fit-large { grid-template-columns: var(--text-col) 40.5%; }
.intro.fit-large .intro-side > img { aspect-ratio: 1; }
.intro.fit-large .intro-text { align-self: center; margin-top: -9px; }
.intro-rest { margin-top: 24px; }
.intro:not(.has-side) + .intro-rest { margin-top: 0; }
.wide-img { padding: 24px 0; }
.wide-img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }

.rows { display: grid; gap: 100px; }
.rows-after-title { margin-top: 20px; }
/* Padding, not margin: a margin would merge with the paragraph's own 20px above it. */
.rows-after-intro { padding-top: 24px; }
.section-intro { margin-top: 20px; }
.text-cols { display: grid; gap: 16px; }
.text-cols.cols-2 { grid-template-columns: 1fr 1fr; }
.row { display: grid; grid-template-columns: var(--text-col) var(--side-col); justify-content: space-between; align-items: start; }
.row > .prose { align-self: center; }
.row-home > .prose, .row-contrib > .prose, .row-first > .prose { align-self: start; }
.row.is-flipped { grid-template-columns: var(--side-col) var(--text-col); }
.row.is-flipped > .prose { order: 2; padding-top: 16px; }
.row-text { grid-template-columns: var(--text-col); }
.row-home, .row-contrib { align-items: start; }
.row-contrib.is-flipped > .prose { padding-top: 0; }
.example-after { margin-top: 24px; }
.row-first { margin-top: 60px; align-items: start; }
.side { display: grid; gap: 20px; align-content: start; }
.square { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 30%; border-radius: var(--radius); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--display); font-weight: 900; text-transform: uppercase; text-decoration: none;
  background: var(--orange); color: var(--ink); border-radius: var(--radius); transition: transform .15s ease, background .2s;
}
.btn svg { width: .8em; height: .8em; transition: transform .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:hover svg { transform: translateX(3px); }
.btn-small { font-size: 16px; line-height: 32px; padding: 4px 15px; margin-top: 12px; }
.btn-block { width: 100%; font-size: 23px; line-height: 46px; padding: 9px 15px; }

/* ---------- Blue info panel (testimonials, project facts) ---------- */
.panel { background: var(--blue); border-radius: var(--radius); padding: 25px 30px; margin: 0; font-family: var(--display); }
.panel-name { font-size: 24px; line-height: 24px; font-weight: 700; text-transform: uppercase; margin: 0 0 33px; }
.panel dt { font-size: 12px; line-height: 12px; letter-spacing: 0.125em; text-transform: uppercase; }
.panel dd { margin: 0 0 23px; font-size: 18px; line-height: 18px; font-weight: 700; text-transform: uppercase; }
.panel dd:last-child { margin-bottom: 0; }

/* ---------- Hero ---------- */
.hero {
  /* As on the original: the slanted edge runs from 50% + 64px (top) to 50% + 48px (bottom). */
  --split: calc(50% + 48px);
  position: relative; background: var(--blue);
  /* Hidden spring room above and below so the edges can bow outward on scroll (main.js). */
  margin-block: calc(-1 * var(--spring)); padding-block: var(--spring);
  clip-path: polygon(0 calc(var(--spring) + var(--slant)), 100% var(--spring),
    100% calc(100% - var(--spring)), 0 calc(100% - var(--spring) - var(--slant)));
}
/* The orange panel. Static slant here; main.js ripples its edge when it scrolls into view. */
.hero-orange {
  position: absolute; top: 0; bottom: 0; left: calc(var(--split) - var(--spring)); right: 0; background: var(--orange);
  clip-path: polygon(calc(16px + var(--spring)) 0, 100% 0, 100% 100%, var(--spring) 100%);
}
.hero-inner { position: relative; display: grid; grid-template-columns: 1fr 285px; gap: 15px; align-items: center; }
.hero-text { padding: 75px 30px 86px 0; }
.hero-title { display: flex; flex-direction: column; text-transform: uppercase; font-weight: 400; }
.hero-title b { font-weight: 900; }
.hero-line-1 { font-size: 39px; line-height: 37px; white-space: nowrap; }
.hero-line-2 { font-size: 27px; line-height: 26px; letter-spacing: 0.01em; }
.hero-facts { list-style: none; padding: 0; margin: 28px 0 0; font-size: 16px; line-height: 33px; }
.hero-tagline { font-family: var(--display); font-weight: 900; font-size: 28px; line-height: 28px; text-transform: uppercase; margin: 28px 0 0; }
.hero-reel { display: flex; flex-direction: column; align-items: flex-end; gap: 22px; padding-block: 40px; }
/* The teaser button: the GIF (269x172) under the orange window graphic (320x210),
   offset exactly as on the original site. It swings in once when the page loads. */
.reel {
  position: relative; display: block; width: 269px; height: 172px; padding: 0; border: 0;
  background: none; cursor: pointer; perspective: 800px;
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.reel-gif { width: 100%; height: 100%; object-fit: cover; }
.reel-window { position: absolute; left: -22px; top: -22px; width: 320px; height: 210px; max-width: none; object-fit: cover; }
.reel:hover { transform: scale(1.04) rotate(-1.5deg); }
.reel-label { width: 269px; margin: 0; padding-left: 6px; text-align: center; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 24px; line-height: 20px; }

/* ---------- Project tiles ---------- */
.project-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.project-tile { display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 1; background: var(--orange); }
.project-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.project-tile:hover img, .project-tile:focus-visible img { transform: scale(1.05); }

/* Tiles ride in like the Switch in the teaser: up from below, tilted, rotating past level, then settling. */
.js .project-tiles.reveal { opacity: 1; transform: none; }
.js .project-tiles .project-tile { opacity: 0; }
.js .project-tiles.is-visible .project-tile { animation: ride-in 1s cubic-bezier(.25, 1, .5, 1) both; }
.js .project-tiles.is-visible .project-tile:nth-child(2) { animation-delay: .12s; }
@keyframes ride-in {
  0% { opacity: 0; transform: translate(40px, 120px) rotate(-9deg); }
  55% { opacity: 1; transform: translate(-4px, -6px) rotate(2.5deg); }
  80% { transform: translate(1px, 2px) rotate(-.8deg); }
  100% { opacity: 1; transform: none; }
}

/* ---------- Testimonials ---------- */
.carousel { margin-top: 44px; height: 336px; position: relative; }
.carousel-next {
  position: absolute; top: 125px; right: calc(var(--pad-r) - 44px); width: 40px; height: 40px; border: 0; background: none;
  display: grid; place-items: center; cursor: pointer; color: var(--ink); transition: transform .2s;
}
.carousel-next svg { width: 20px; height: 20px; }
.carousel-next:hover { transform: translateX(4px); }
.carousel-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 24px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
}
.carousel-track::-webkit-scrollbar { display: none; }
.testimonial {
  scroll-snap-align: start; margin: 0; display: grid; align-items: start;
  grid-template-columns: var(--side-col) var(--text-col); justify-content: space-between;
}
.testimonial blockquote { margin: -16px 0 0; position: relative; }
/* Orange rule centered in the gap between panel and quote. */
.quote-rule {
  position: absolute; top: 10px; left: -45px; width: 6px; height: calc(100% - 10px); overflow: visible; pointer-events: none;
}
.quote-rule path { fill: none; stroke: var(--orange); stroke-width: 6px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.testimonial .lead::before { content: '“'; }
.testimonial blockquote > p:last-child::after { content: '”'; }

/* ---------- Skill tiles ---------- */
.skill-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.skill-tile {
  --tile: var(--orange); background: var(--tile);
  position: relative; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; display: grid; place-items: center;
  text-decoration: none; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
/* Checkerboard: 4 columns on desktop, 2 on phones (see media query). */
.skill-tile:nth-child(8n+1), .skill-tile:nth-child(8n+3), .skill-tile:nth-child(8n+6), .skill-tile:nth-child(8n+8) { --tile: var(--blue); }
.skill-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.12); transition: opacity .3s ease, transform .5s ease; }
.skill-tile span {
  position: relative; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(18px, 2.4vw, 26px); line-height: 20px;
  padding: 6px 10px; border-radius: 8px; transition: background .25s;
}
.skill-tile:hover, .skill-tile:focus-visible { transform: translateY(-4px) rotate(-1.5deg); }
.skill-tile:hover img, .skill-tile:focus-visible img { opacity: 1; transform: none; }
.skill-tile:hover span, .skill-tile:focus-visible span { background: var(--tile); }
/* ---------- Contact ---------- */
.contact-cta { display: flex; justify-content: center; padding: 78px 0 40px; }
.contact {
  display: inline-flex; align-items: stretch; border-radius: var(--radius); overflow: hidden; text-decoration: none;
  font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 24px; line-height: 31px;
  transition: transform .15s ease;
}
.contact span { background: var(--blue); padding: 13px 18px 13px 22px; }
.contact svg { box-sizing: content-box; background: var(--orange); padding: 15px 16px; width: 26px; height: auto; }
.contact:hover { transform: translateY(-3px); }

/* ---------- Media thumbnails ---------- */
.media {
  position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
  border-radius: var(--radius); overflow: hidden; aspect-ratio: 1;
}
.media.is-video { cursor: pointer; }
.media > img:first-child { width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.media-play {
  position: absolute; inset: 0; margin: auto; width: 100px; height: 100px; pointer-events: none;
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.media:hover > img:first-child { transform: scale(1.05); }
.media.is-video:hover .media-play { transform: scale(1.1); }
.media-hero { aspect-ratio: auto; }
.media-hero > img:first-child { height: auto; }
.media-tall { aspect-ratio: auto; }
.media-tall > img:first-child { height: auto; }

/* ---------- About ---------- */
.expertise { display: grid; grid-template-columns: 40.5% 40.5%; justify-content: space-between; align-items: start; margin-block: 20px; }
.expertise h3 { text-transform: none; }
.expertise { position: relative; }
.expertise-rule { position: absolute; left: calc(50% - 14px); top: 0; bottom: 0; width: 6px; border-radius: 3px; background: var(--orange); }
.expertise h3 { font-size: 18px; line-height: 24px; font-weight: 700; margin: 10px 0; }

/* ---------- Pager ---------- */
.pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-block: 140px 0; }
.pager a {
  display: inline-flex; align-items: center; gap: 0; padding: 20px 0;
  font-family: var(--display); font-weight: 700; text-transform: uppercase; text-decoration: none; font-size: 20px; line-height: 20px;
}
.pager svg { width: 20px; height: 20px; color: var(--ink); transition: transform .2s; }
.pager-prev span { padding-left: 20px; }
.pager-next span { padding-right: 20px; }
.pager-prev:hover svg { transform: translateX(-4px); }
.pager-next { justify-self: end; }
.pager-next:hover svg { transform: translateX(4px); }
.pager a:hover span { color: var(--blue); }

/* ---------- Footer ---------- */
.site-footer {
  position: relative; margin-top: calc(33px - var(--spring)); background: var(--orange);
  /* Reach down into the phone's safe area (home indicator), so no white strip shows there. */
  height: calc(70px + var(--spring) + env(safe-area-inset-bottom, 0px));
  margin-bottom: calc(-1 * env(safe-area-inset-bottom, 0px));
  clip-path: polygon(0 calc(20px + var(--spring)), 100% var(--spring), 100% 100%, 0 100%);
}

/* ---------- Lightbox ---------- */
.viewer { border: 0; padding: 0; background: transparent; max-width: min(1100px, 94vw); width: 100%; overflow: visible; }
.viewer::backdrop { background: rgb(8 10 14 / .88); backdrop-filter: blur(4px); }
.viewer-stage { display: grid; place-items: center; }
.viewer-stage iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); background: #000; }
.viewer-stage.is-vertical iframe { width: auto; height: min(85vh, 760px); aspect-ratio: 9 / 16; }
.viewer-stage img { max-height: 86vh; width: auto; border-radius: var(--radius); }
/* Video pop-up without a player (artifact preview): the thumbnail fills the player frame. */
.video-preview {
  position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius);
  overflow: hidden; text-decoration: none; background: #111 var(--thumb) center / cover no-repeat;
}
.video-preview::before { content: ''; position: absolute; inset: 0; background: rgb(0 0 0 / .35); transition: background .2s; }
.viewer-stage.is-vertical .video-preview { width: auto; height: min(85vh, 760px); aspect-ratio: 9 / 16; }
.video-preview-play {
  position: relative; width: 84px; height: 84px; border-radius: 50%; background: var(--orange);
  box-shadow: 0 6px 0 rgb(0 0 0 / .25); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.video-preview-play::after {
  content: ''; position: absolute; left: 32px; top: 26px; border-style: solid; border-width: 16px 0 16px 26px;
  border-color: transparent transparent transparent var(--ink);
}
.video-preview-note {
  position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: #fff;
  font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 18px; letter-spacing: .04em;
}
.video-preview:hover::before { background: rgb(0 0 0 / .2); }
.video-preview:hover .video-preview-play { transform: scale(1.1); }
.viewer-close {
  position: absolute; top: -52px; right: 0; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--orange); color: var(--ink); display: grid; place-items: center; font-size: 22px;
}
.viewer[open] { animation: pop .25s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes pop { from { opacity: 0; transform: scale(.94); } }

/* ---------- Springy blocks: hidden from the first paint ----------
   The html element gets .js-anim in <head> (motion allowed). main.js hides these blocks
   itself, springs them in, and removes .js-anim; this only covers the first paint so
   they don't flash. If main.js never runs, the failsafe shows them after 5 s. */
.js-anim .hero-orange, .js-anim .site-footer, .js-anim .panel, .js-anim .skill-tile {
  clip-path: inset(0 0 100% 0); animation: failsafe-show 0s 5s forwards;
}
/* The subpage header band also fades in while it springs in (main.js). */
.js-anim .header-band .site-header { clip-path: inset(0 0 100% 0); animation: failsafe-show 0s 5s forwards; }
@keyframes failsafe-opacity { to { opacity: 1; } }
@media (max-width: 767px) {
  .js-anim .hero { opacity: 0; animation: failsafe-opacity 0s 5s forwards; } /* fades in (main.js) */
}
@keyframes failsafe-show { to { clip-path: none; } }
/* Desktop: the teaser rides in with the orange block, so it waits off-screen too. */
@media (min-width: 768px) {
  .js-anim .hero-reel { visibility: hidden; animation: failsafe-visible 0s 5s forwards; }
}
@keyframes failsafe-visible { to { visibility: visible; } }

/* ---------- Reveal on scroll (only when JS is running) ---------- */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal, .js .project-tiles .project-tile { opacity: 1; transform: none; }
}

/* Tablet: the original shrinks the hero type and moves the color split. */
@media (max-width: 991px) {
  .hero-line-1 { font-size: 28px; line-height: 26px; }
  .hero-line-2 { font-size: 20px; line-height: 19px; }
  .hero-tagline { font-size: 20px; line-height: 20px; }
}

/* ---------- Responsive ----------
   Phone layout follows the original: 50px / 40px side margins, a centered hero
   that scales with the screen, one-column rows, and flat 2-column skill tiles. */
@media (max-width: 767px) {
  :root { --gutter: 50px; }
  .brand-first { font-size: 44px; line-height: 31px; }
  .brand-last { font-size: 13px; line-height: 10px; }
  .site-header { padding-bottom: 12px; }
  .header-band .site-header { padding-bottom: calc(24px + var(--slant) + var(--spring)); }
  .site-header nav { margin-right: -24px; }
  .site-header nav a { font-size: 14px; padding: 8px 24px; }
  .site-header nav a:not(.nav-icon)::after { left: 24px; right: 24px; }
  /* As on the original: the name already links home, so phones drop "Overview". */
  .site-header nav a[href="/"], .site-header nav a[href="#home"] { display: none; }
  .brand { flex: none; }
  .nav-icon svg { width: 24px; height: 24px; }

  /* Hero: centered blue block with a slanted bottom, teaser centered on orange below. */
  .hero { --fs: clamp(7px, 2.5vw, 12px); background: var(--orange);
    clip-path: polygon(0 calc(var(--spring) + var(--slant)), 100% var(--spring), 100% calc(100% - var(--spring) - var(--slant)), 0 calc(100% - var(--spring))); }
  .carousel { height: auto; }
  .carousel-next { position: static; margin: 16px 0 0 auto; }
  .expertise-rule { display: none; }
  .hero-orange { display: none; }
  .hero-inner { grid-template-columns: 1fr; gap: 0; padding-inline: 0; }
  .hero-text {
    background: var(--blue); text-align: center; display: flex; flex-direction: column; align-items: center;
    padding: calc(var(--fs) * 5.6) var(--gutter) calc(var(--fs) * 7.6 + var(--spring));
    margin-bottom: calc(-1 * var(--spring)); position: relative; z-index: 1;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--spring)), 0 calc(100% - var(--slant) - var(--spring)));
  }
  .hero-title { align-items: center; }
  .hero-line-1 { font-size: calc(var(--fs) * 2.75); line-height: .95; }
  .hero-line-2 { font-size: calc(var(--fs) * 2); line-height: .95; margin-top: .2em; }
  .hero-facts { font-size: calc(var(--fs) * 1.35); line-height: 2; margin-top: calc(var(--fs) * 2.2); }
  .hero-tagline { font-size: calc(var(--fs) * 2); line-height: 1; margin-top: calc(var(--fs) * 2.4); }
  .hero-reel { align-items: center; padding: 52px 0 79px; }
  .reel, .reel-label { margin-right: 0; }
  .reel-label { padding-right: 0; }

  .section-head { padding: 80px 0 30px; }
  .section-title { font-size: 30px; }
  .section-head.is-long .section-title { font-size: min(30px, 6.3vw); }
  .page-head { padding-top: 50px; }
  .eyebrow { font-size: 14px; line-height: 16px; }
  .page-title { font-size: 43px; }
  .page-title.is-long { font-size: 31px; }

  .intro, .intro.fit-large { grid-template-columns: 1fr; padding-top: 50px; }
  .intro-side { grid-column: 1; grid-row: auto; max-width: 300px; margin-top: 24px; }
  .intro.fit-stretch .intro-side > img { position: static; height: auto; aspect-ratio: 1; }
  .intro.fit-large .intro-text { margin-top: 0; }
  .expertise, .text-cols.cols-2 { grid-template-columns: 1fr; }
  .row, .row.is-flipped { grid-template-columns: 1fr; gap: 24px; }
  .row.is-flipped > .prose { order: 0; padding-top: 0; }
  .row .media, .row .side { max-width: 300px; }
  .row-first { margin-top: 40px; }
  /* Project pages: the facts panel comes before the text on phones. */
  .row-first .side { order: -1; max-width: 100%; }
  .row-first .panel { max-width: 260px; }
  .btn-block { font-size: 18px; line-height: 36px; }
  .rows { gap: 60px; }

  .testimonial { grid-template-columns: 1fr; gap: 36px; }
  .testimonial blockquote { order: -1; margin: 0; padding-left: 26px; }
  .quote-rule { left: 0; top: 0; height: 100%; }
  .testimonial .panel { max-width: 260px; }

  .skill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .skill-tile { aspect-ratio: auto; padding: 26px 0; }
  .skill-tile span { font-size: 16px; line-height: 20px; padding: 0; }
  .skill-tile:nth-child(n) { --tile: var(--orange); }
  .skill-tile:nth-child(4n+1), .skill-tile:nth-child(4n+4) { --tile: var(--blue); }

  .pager a { font-size: 14px; line-height: 14px; }
  .pager, .row-first + .pager, section:has(.row-contrib) + .pager { padding-top: 100px; }
}
@media (max-width: 479px) {
  :root { --gutter: 40px; }
  .brand-first { font-size: 37px; line-height: 26px; }
  .brand-last { font-size: 12px; line-height: 10px; }
  .site-header nav { margin-right: -18px; }
  .site-header nav a { font-size: 13px; padding: 7px 20px; }
  .site-header nav a:not(.nav-icon)::after { left: 20px; right: 20px; }
  .project-tiles { grid-template-columns: 1fr; }
  .page-title { font-size: 43px; }
  .pager { gap: 8px; }
  .pager svg { width: 14px; height: 14px; }
}
/* Very narrow phones: shrink the teaser so its window never crosses the screen edge. */
@media (max-width: 359px) {
  .reel { transform: scale(.85); }
}