/* Layout: header, nav, menu sheet, views, page heads, sections, footer strip.
   Cream since r6: the header has no ground of its own in any state (it sits
   on the page's cream), the menu sheet is paper, the footer a paper band. */

/* ---------- Header ---------- */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  padding-left: var(--edge-l);
  padding-right: var(--edge-r);
  padding-top: env(safe-area-inset-top, 0px);
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  view-transition-name: site-header;
}
html.is-home .site-header { position: fixed; }

.site-header__logo {
  position: relative;
  display: block;
  flex: none;
  /* The round badge needs the height to read in the bar (AUTO legible).
     44 px on phones (a full touch target), 56 at 1440, 72 at 2560. */
  height: clamp(44px, 2.2rem + 1.43vw, 72px);
  border-radius: var(--radius-xs);
}
.site-header__logo img {
  height: 100%;
  width: auto;
  transition: opacity var(--motion-duration-base) var(--ease-out);
}
/* Hover: a glint crosses the letters, masked by the mark itself (the same
   file as everything else, so it follows a swap). */
.site-header__logo::after,
.footer__mark::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(104deg, rgb(255 255 255 / 0) 40%, rgb(255 255 255 / 0.8) 50%, rgb(255 255 255 / 0) 60%) no-repeat;
  background-size: 260% 100%;
  background-position: 130% 0;
  -webkit-mask: url("../assets/mark/mark.svg?v=r5-2") center / contain no-repeat;
  mask: url("../assets/mark/mark.svg?v=r5-2") center / contain no-repeat;
  opacity: 0;
}
@media (hover: hover) {
  .site-header__logo:hover::after,
  .footer__mark:hover::after { animation: logo-glint 900ms var(--motion-ease-in-out) both; }
}
@keyframes logo-glint {
  0% { background-position: 130% 0; opacity: 1; }
  100% { background-position: -30% 0; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header__logo::after, .footer__mark::after { display: none; }
}
html.stage-unparked .site-header__logo::after { display: none; }

/* On Home the big mark is the logo. The header slot stays as the park target. */
html.stage-unparked .site-header__logo img { opacity: 0; }
html.logo-handoff .site-header__logo img { opacity: 1; }
html.is-home .site-header__logo { pointer-events: none; }

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-4), 2vw, var(--space-7));
  margin: 0 clamp(var(--space-5), 1.6vw, var(--space-7)) 0 0;
  padding: 0;
  list-style: none;
}
.site-nav__link {
  position: relative;
  display: inline-flex;
  transition: color var(--hover) var(--ease-out);
  align-items: center;
  min-height: var(--size-touch-min);
  color: var(--color-text);
  text-decoration: none;
  /* The button role (r8): Barlow Semi Condensed 700 in capitals, 0.04em. */
  font-family: var(--type-button-family);
  font-weight: var(--type-button-weight);
  font-size: var(--type-button-size);
  letter-spacing: var(--type-button-tracking);
  text-transform: var(--type-button-case);
  line-height: var(--type-button-leading);
  white-space: nowrap;
}
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: var(--type-button-tracking);
  bottom: 9px;
  height: var(--border-strong);
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--hover) var(--ease-out);
}
.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
/* The current page's underline is navy (13.44:1 on cream), so it reads as a
   state at 3:1 and up. Orange (3.07:1 on cream) clears 3:1 as a shape, but
   states stay navy by rule, so orange stays the hover wipe on the others. */
.site-nav__link[aria-current="page"]::after { background: var(--color-text); }
/* Quote has no nav link: on it, the header's Get a quote (and the menu's)
   carries the same navy current mark, a 2 px line under the button (r7 fix;
   until then nothing showed which page you were on). */
.btn[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: var(--border-strong);
  background: var(--color-text);
  pointer-events: none;
}
/* The other links step back while one is pointed at. */
@media (hover: hover) {
  .site-nav__list:has(.site-nav__link:hover) .site-nav__link:not(:hover) { color: var(--color-text-muted); }
}

.menu-toggle {
  display: none;
  align-items: center;
  gap: 0.6em;
  min-height: var(--size-touch-min);
  padding: 0 var(--space-3);
  border-radius: var(--radius-control);
  font-family: var(--type-button-family);
  font-weight: var(--type-button-weight);
  font-size: var(--type-button-size);
  letter-spacing: var(--type-button-tracking);
  text-transform: var(--type-button-case);
  line-height: var(--type-button-leading);
}
.menu-toggle__bars {
  position: relative;
  width: 18px;
  height: 10px;
}
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--border-strong);
  background: currentColor;
  transition: transform var(--motion-duration-base) var(--ease-out), top var(--motion-duration-base) var(--ease-out), right 240ms var(--ease-out);
}
.menu-toggle__bars::before { top: 0; }
.menu-toggle__bars::after { top: 8px; }
@media (hover: hover) {
  .menu-toggle[aria-expanded="false"]:hover .menu-toggle__bars::after { right: 6px; }
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { top: 4px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { top: 4px; transform: rotate(-45deg); }

@media (max-width: 899px) {
  .site-nav__list { display: none; }
  .menu-toggle { display: inline-flex; }
  .site-nav__cta { padding: 0 var(--space-3); }
}
/* The narrowest phones (320 px, Display Zoom): the menu button shows only its
   bars, so "Get a quote" stays on one line. The word stays for screen readers. */
@media (max-width: 359px) {
  .site-nav__cta { white-space: nowrap; }
  .menu-toggle { justify-content: center; min-width: var(--size-touch-min); }
  .menu-toggle [data-label] {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ---------- Menu sheet (phones and small tablets) ---------- */
/* Opens with the site's wipe, right to left (640 ms), the links pushing in
   behind it 70 ms apart. Closes back to the right, a little quicker.
   Laid out like a page (r7): the four links large and navy at the top, right
   under the header and opened by the chapter rule, and Get a quote with the
   corner line anchored at the bottom on a hairline. */
.menu-sheet {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  /* When the sheet is taller than the screen (landscape phones) it scrolls
     from the top, so nothing hides under the header. */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(var(--header-h) + env(safe-area-inset-top, 0px) + var(--space-4)) var(--gutter-r) calc(var(--space-6) + env(safe-area-inset-bottom, 0px)) var(--gutter-l);
  /* Paper, a step up from the page, so the wipe's edge reads as it crosses. */
  background: var(--color-surface);
  clip-path: inset(0 0 0 100%);
  visibility: hidden;
  transition: clip-path 440ms var(--motion-ease-in-out), visibility 0s linear 440ms;
}
.menu-sheet.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path 640ms var(--vt-ease), visibility 0s;
}
.menu-sheet > nav { display: flex; flex-direction: column; flex: 1 0 auto; }
.menu-sheet__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--rule-width) solid var(--line-rule);
}
.menu-sheet__list li { border-bottom: var(--border-hairline) solid var(--color-line); }
.menu-sheet__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: clamp(76px, 3.5rem + 5vw, 104px);
  color: var(--color-text);
  text-decoration: none;
  /* The display family in capitals at the menu's own sizes (r8). A step up
     from r7's (36 to 68 px), because the capitals of Barlow Semi Condensed
     set narrower than the old font's wide lowercase: 44 px on a 390 phone,
     65 at 768, 76 at most. */
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.4rem + 5.6vw, 4.75rem);
  font-weight: var(--font-weight-extrabold);
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1;
  transform: translateX(32px);
  opacity: 0;
  transition: transform 640ms var(--ease-expo), opacity 480ms var(--ease-out), color var(--hover) var(--ease-out);
}
.menu-sheet__link svg { flex: none; width: 24px; height: 24px; color: var(--color-text-muted); transition: transform var(--hover) var(--ease-out), color var(--hover) var(--ease-out); }
/* Pointed at: the arrow turns orange and nudges (a mark, like the nav's hover
   wipe). The current page: a navy underline under the word, like the nav's,
   and a navy arrow (13.44:1 on cream, 14.14 on paper), so the state reads at
   3:1 and up without orange. */
.menu-sheet__link:hover svg { color: var(--color-accent); transform: translateX(4px); }
.menu-sheet__link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--color-text);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.16em;
}
.menu-sheet__link[aria-current="page"] svg { color: var(--color-text); transform: translateX(4px); }
.menu-sheet.is-open .menu-sheet__link { transform: none; opacity: 1; transition-delay: 80ms; }
.menu-sheet.is-open li:nth-child(2) .menu-sheet__link { transition-delay: 150ms; }
.menu-sheet.is-open li:nth-child(3) .menu-sheet__link { transition-delay: 220ms; }
.menu-sheet.is-open li:nth-child(4) .menu-sheet__link { transition-delay: 290ms; }
.menu-sheet__foot { transition: opacity 480ms var(--ease-out), transform 640ms var(--ease-expo); opacity: 0; transform: translateX(32px); }
.menu-sheet.is-open .menu-sheet__foot { opacity: 1; transform: none; transition-delay: 360ms; }
.menu-sheet__foot {
  display: grid;
  gap: var(--space-4);
  margin-top: auto;
  padding-top: var(--space-7);
}
.menu-sheet__foot > p { padding-top: var(--space-4); border-top: var(--border-hairline) solid var(--color-line); }
/* Reduced motion: the sheet fades in place. No wipe, and the links and the
   foot don't push in from the right. */
@media (prefers-reduced-motion: reduce) {
  .menu-sheet { clip-path: none; opacity: 0; transition: opacity 160ms linear, visibility 0s linear 160ms; }
  .menu-sheet.is-open { clip-path: none; opacity: 1; transition: opacity 160ms linear, visibility 0s; }
  .menu-sheet__link, .menu-sheet__foot { transform: none; }
}
.menu-sheet__foot .btn { width: 100%; }
@media (max-height: 520px) {
  .menu-sheet { padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + var(--space-3)); padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); }
  .menu-sheet__link { min-height: 52px; font-size: 2rem; }
  .menu-sheet__foot { grid-template-columns: auto 1fr; align-items: center; column-gap: var(--space-5); padding-top: var(--space-4); }
  .menu-sheet__foot > p { padding-top: 0; border-top: 0; }
  .menu-sheet__foot .btn { width: auto; }
}
/* Small tablets (600 to 899 px wide, portrait): Get a quote keeps its own
   width, with the corner line beside it over one hairline, instead of a
   700 px orange bar across the foot (r7 fix). */
@media (min-width: 600px) and (min-height: 521px) {
  .menu-sheet__foot { grid-template-columns: auto 1fr; align-items: center; column-gap: var(--space-6); padding-top: var(--space-5); border-top: var(--border-hairline) solid var(--color-line); margin-top: auto; }
  .menu-sheet__foot > p { padding-top: 0; border-top: 0; }
  .menu-sheet__foot .btn { width: auto; }
}
/* Portrait tablets (600 to 899 px wide, 860 px tall and up): the links step
   up to the page head's size (display-2) on taller rows, so they take the
   top of the sheet the way they do on a phone instead of leaving half of it
   empty Paper above the foot (45 to 52% at 600x960 to 834x1194; now about
   30%, like a 390 phone). r7 fix round 2. */
@media (min-width: 600px) and (min-height: 860px) {
  .menu-sheet__link { font-size: var(--type-display-2-size); min-height: 13vh; }
  .menu-sheet__link svg { width: 32px; height: 32px; }
}
/* Landscape phones: the four links two by two, so the whole menu, Get a
   quote included, fits a 320 px tall screen without scrolling. */
@media (max-height: 520px) and (orientation: landscape) {
  .menu-sheet__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-6); }
}
@media (min-width: 900px) { .menu-sheet { display: none; } }

html.menu-open, html.menu-open body { overflow: hidden; }

/* ---------- Views ---------- */
main { position: relative; z-index: 1; display: block; outline: none; }
.view { display: block; }
.view--scroll {
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
}

/* Page head shared by every scrolling view. The top space is capped by the
   screen height too, so a landscape phone sees more than the headline. svh
   (the height with the browser's bars showing) holds still while the bars
   slide away, so the page never shifts mid-scroll. */
.page-head {
  /* The plain vw value first, for browsers without svh (Safari before 15.4,
     Chrome before 108). The svh line has no var() in it (2rem is --space-6),
     so such a browser drops it while parsing and keeps the line above. With a
     var() in it, the unknown unit would only fail at computed time and the
     padding would fall to 0. */
  padding-top: clamp(var(--space-6), 2rem + 5vw, 10rem);
  padding-top: clamp(2rem, min(2rem + 5vw, 14svh), 10rem);
  padding-bottom: var(--space-block);
}
/* Headline boxes (r8): a ch of Barlow Semi Condensed is about 0.65 of the
   old font's at display width, so 16ch became 24ch and 17ch 26ch, the same
   boxes in px (SYSTEM.md's factor 1.53). Written in the web font's ch
   (--ch-display, base.css) so the box holds while the fallback draws. */
.page-head__title { margin-top: var(--space-5); max-width: calc(24 * var(--ch-display)); }
.page-head__lead { margin-top: var(--space-6); color: var(--color-text); }
.page-head__lead + .page-head__lead { margin-top: var(--space-4); }
/* Wide columns: a 12-column head. The headline holds the top left, the lead
   steps down to the right half and ends on the column's right edge, so the
   first screen uses the whole width. Its lines are balanced, so it never ends
   on a word or two alone, and main.js (fitLeads) narrows the box to the
   longest line so the text itself ends on that edge. Without scripts the box
   keeps the full measure. */
@container col (min-width: 1150px) {
  .page-head {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-grid-gap);
    align-items: start;
  }
  .page-head > * { grid-column: 1 / -1; }
  .page-head > .eyebrow { justify-self: start; }
  /* The whole row, so a display-2 sentence like Services' "Pick what you
     need." holds one line; max-width (24ch) still stops shorter heads. */
  .page-head__title { grid-column: 1 / -1; }
  .page-head__lead { grid-column: 7 / -1; justify-self: end; width: 100%; text-wrap: balance; }
}

/* ---------- Section rhythm (r7) ----------
   The long pages read as chapters, built only from cream-legal means (no
   navy, ink or charcoal grounds, no gradients, no shadows):
   - .sec is a chapter, full width, cream. .band makes it a Paper band from
     edge to edge between navy hairlines. Bands alternate with cream chapters,
     and the chapter before the footer (itself a Paper band) stays cream.
   - .sec-head opens every chapter: a full navy rule across the column, then
     the chapter's navy numeral (.sec-num, decorative), and its label
     (.eyebrow) where the copy has one (AI + VFX, About's Made work for).
   - .sec-title is the chapter's statement at display size (display-3), one
     step under the page head (display-2): AI + VFX 01, 02 and 04 and About
     01 to 03. The other chapters open on their own big line instead: each
     service's name at heading-1, About 04's line at heading-1, and AI 03
     goes straight to its cards.
   The rule, the numeral and the Paper and cream alternation are the same on
   every long page; what opens under the numeral follows the copy. */
.sec { padding-block: var(--space-chapter); }
.band {
  background: var(--color-surface);
  border-block: var(--border-hairline) solid var(--line-panel);
}
.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-6);
  padding-top: var(--space-4);
  border-top: var(--rule-width) solid var(--line-rule);
  margin-bottom: var(--space-sec-head);
}
/* Numerals (r8): Barlow Semi Condensed 800, tabular. */
.sec-num {
  font-family: var(--font-display);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--type-heading-4-size);
  letter-spacing: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.sec-title { max-width: calc(26 * var(--ch-display)); margin-bottom: var(--space-block); }
/* The statement stays at least a quarter under the page head. Both clamp to
   their phone sizes, so on phones display-3 (38 px) sat almost level with
   display-2 (44 px) and the step between them was lost (r7 fix round 2).
   Now 33 px on a 390 phone and 51 px at 768; from about 1000 px wide it is
   display-3 as before (80 at 1440, 120 at 2560). */
.sec-title.t-display-3 { font-size: min(var(--type-display-3-size), calc(var(--type-display-2-size) * 0.75)); }

/* Two-column split used across views. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7) clamp(var(--space-7), 4vw, 10rem);
}
@container col (min-width: 880px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .split--even { grid-template-columns: 1fr 1fr; }
}
/* Wide: a third and two thirds, the same left column as the crew on About
   and the three-column service sections. */
@container col (min-width: 1500px) {
  .split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}

/* Bullet list between hairlines. The marker is a small orange square (a bar
   here would read as a leading dash). It hangs in the indent and sits inline
   on the first line, so vertical-align: middle centers it on that line's
   x-height at any type size. */
.ticks { list-style: none; margin: 0; padding: 0; border-top: var(--border-hairline) solid var(--color-line); }
.ticks li {
  position: relative;
  padding: var(--space-4) 0 var(--space-4) calc(6px + var(--space-4));
  border-bottom: var(--border-hairline) solid var(--color-line);
  /* Balanced, not pretty: the items are one to three lines, and pretty still
     left a long last word alone ("pre-approval", "in-house") on phones. */
  text-wrap: balance;
}
.ticks li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 var(--space-4) 0 calc(-6px - var(--space-4));
  vertical-align: middle;
  background: var(--gist-orange);
}

/* ---------- Footer strip ---------- */
/* A paper band under a navy hairline, so every page ends on a surface of its
   own (r6; on ink the hairline alone did that). */
.footer {
  margin-top: var(--space-block);
  border-top: var(--border-hairline) solid var(--line-panel);
  background: var(--color-surface);
  padding-top: var(--space-block);
  padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
}
.footer__grid {
  display: grid;
  gap: var(--space-7) var(--space-6);
}
/* Sized for the round badge, so it signs off the page without taking it over.
   104 px on phones, 144 at 1440, 200 at 2560. */
.footer__mark { position: relative; display: block; width: clamp(104px, 5.5rem + 3vw, 144px); }
@media (min-width: 1440px) { .footer__mark { width: min(200px, calc(72px + 5vw)); } }
.footer__mark img { width: 100%; height: auto; }
.footer__about { margin-top: var(--space-5); max-width: 38ch; color: var(--color-text-muted); }
.footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--color-text);
  text-decoration: none;
  /* The button role (r8), like the header's nav links. */
  font-family: var(--type-button-family);
  font-weight: var(--type-button-weight);
  font-size: var(--type-button-size);
  letter-spacing: var(--type-button-tracking);
  text-transform: var(--type-button-case);
  line-height: var(--type-button-leading);
  background: linear-gradient(var(--color-accent), var(--color-accent)) calc(100% - var(--type-button-tracking)) calc(100% - 6px) / 0 var(--border-strong) no-repeat;
  transition: background-size var(--hover) var(--ease-out);
}
.footer__links a:hover { background-size: calc(100% - var(--type-button-tracking)) var(--border-strong); background-position: 0 calc(100% - 6px); }
.footer__head { margin-bottom: var(--space-4); color: var(--color-text-muted); }
.footer__base {
  margin-top: var(--space-block);
  padding-top: var(--space-5);
  border-top: var(--border-hairline) solid var(--color-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  color: var(--color-text-muted);
}
.footer__legal { display: grid; gap: var(--space-2); max-width: 70ch; text-wrap: balance; }
.back-to-top { color: var(--color-text); }
.back-to-top svg { transform: rotate(-90deg); }
.back-to-top:hover svg { transform: rotate(-90deg) translateX(3px); }

/* Phones: the six links in two columns. */
@container col (max-width: 679px) {
  .footer__links { grid-template-columns: 1fr 1fr; column-gap: var(--space-5); }
}
@container col (min-width: 680px) {
  .footer__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 1fr); }
}
/* Wide: the mark and line on the left, the links in the middle, the email
   flush with the right edge on one line. */
@container col (min-width: 1150px) {
  .footer__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); }
  .footer__contact { justify-self: end; text-align: right; }
  .footer__contact .email { flex-wrap: nowrap; }
}
/* Big screens: the line under the mark at body size and the email address
   at a heading size, so the footer holds its own under 200 px headlines. */
@container col (min-width: 1500px) {
  .footer__about { font-size: var(--type-body-size); line-height: var(--type-body-leading); max-width: 34ch; }
  .footer__contact .email__addr { font-size: var(--type-heading-4-size); }
  .footer__links { gap: var(--space-2); }
}
@media (pointer: coarse), (max-width: 759px) {
  .footer__links a { min-height: var(--size-touch-min); }
}