/* ==========================================================================
   Slate, global system.

   Layout, type scale, spacing and motion follow clay.global, measured in the
   DOM on 15 October 2026 (74 / 52 / 30px headlines, 28px intro, 22px gray
   body, 110px header, 75px gutters at 1440, square image frames, slow
   expo-out reveals). The face, the mark, the copy and the photography are
   Slate's own.

   Colour is themed per section, not painted per section: every top-level
   section says data-theme="light|mist|dark", and as one crosses the reading
   line the whole page moves to its theme. The theme colours are registered
   custom properties, so they interpolate, and the change reads as one
   continuous shift rather than a hard cut.
   ========================================================================== */

@font-face {
  /* Metric-matched fallback, so a heading never changes line count when
     Switzer lands. */
  font-family: "Switzer Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 100.86%;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}

/* theme colours: registered so they can transition */
@property --bg { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --fg { syntax: "<color>"; inherits: true; initial-value: #000000; }
@property --fg-body { syntax: "<color>"; inherits: true; initial-value: #383838; }
@property --fg-muted { syntax: "<color>"; inherits: true; initial-value: #666666; }
@property --rule { syntax: "<color>"; inherits: true; initial-value: rgba(0, 0, 0, 0.1); }
@property --rule-2 { syntax: "<color>"; inherits: true; initial-value: rgba(0, 0, 0, 0.2); }
@property --surface { syntax: "<color>"; inherits: true; initial-value: #f3f3f3; }
@property --btn-bg { syntax: "<color>"; inherits: true; initial-value: #000000; }
@property --btn-fg { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --glass { syntax: "<color>"; inherits: true; initial-value: rgba(255, 255, 255, 0.6); }

:root {
  /* fixed palette */
  --ink: #000000;
  --paper: #fff;
  --slate: #000000;    /* the dark sections: black. Slate is black and white. */
  --slate-2: #161616;  /* a surface on slate */
  --mist: #f3f3f3;     /* the gray bands */
  --gray: #666666;     /* secondary text: 5.74:1 on white */
  --gray-lt: #a8a8a8;  /* secondary text on slate */
  /* No accent colour: the brand kit is black and white. Colour on the site
     comes only from photography and from third-party logos. */

  /* legacy names, kept for components that predate the theme system */
  --body: var(--fg-body);
  --muted: var(--fg-muted);
  --line: var(--rule);
  --line-2: var(--rule-2);
  --on-ink-body: rgba(255, 255, 255, 0.76);
  --on-ink-muted: var(--gray-lt);
  --on-ink-line: rgba(255, 255, 255, 0.12);

  --font: "Switzer", "Switzer Fallback", ui-sans-serif, system-ui, sans-serif;
  --pad: clamp(20px, 5.2vw, 75px);
  --max: 1440px;
  --hdr-h: 110px;
  --radius: 14px;
  --radius-lg: 22px;

  /* Clay's scale */
  --fs-h1: clamp(2.75rem, 5.14vw, 4.625rem);     /* 74 */
  --fs-h2: clamp(2.125rem, 3.62vw, 3.25rem);     /* 52 */
  --fs-h3: clamp(1.5rem, 2.09vw, 1.875rem);      /* 30 */
  --fs-h4: clamp(1.5rem, 2.78vw, 2.5rem);        /* 40, news titles */
  --fs-intro: clamp(1.3125rem, 1.95vw, 1.75rem); /* 28 */
  --fs-lead: clamp(1.125rem, 1.53vw, 1.375rem);  /* 22 */
  --fs-body: 1.125rem;                           /* 18 */
  --fs-small: 1rem;                              /* 16 */
  --fs-label: 0.9375rem;                         /* 15 */
  --fs-giant: clamp(4rem, 13.5vw, 13rem);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);         /* Clay's reveal curve */
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- themes ---------- */
.t-light, body[data-bg="light"] {
  --bg: #fff; --fg: #000000; --fg-body: #383838; --fg-muted: #666666;
  --rule: rgba(0, 0, 0, 0.1); --rule-2: rgba(0, 0, 0, 0.2); --surface: #f3f3f3;
  --btn-bg: #000000; --btn-fg: #fff; --glass: rgba(255, 255, 255, 0.6);
}
.t-mist, body[data-bg="mist"] {
  --bg: #f3f3f3; --fg: #000000; --fg-body: #383838; --fg-muted: #5c5c5c;
  --rule: rgba(0, 0, 0, 0.1); --rule-2: rgba(0, 0, 0, 0.2); --surface: #fff;
  --btn-bg: #000000; --btn-fg: #fff; --glass: rgba(243, 244, 246, 0.6);
}
.t-dark, body[data-bg="dark"] {
  --bg: #000000; --fg: #fff; --fg-body: rgba(255, 255, 255, 0.76); --fg-muted: #a8a8a8;
  --rule: rgba(255, 255, 255, 0.12); --rule-2: rgba(255, 255, 255, 0.24); --surface: #161616;
  --btn-bg: #fff; --btn-fg: #000000; --glass: rgba(0, 0, 0, 0.6);
}
/* without JS each section paints itself; with JS the body carries the theme */
html:not(.js) [data-theme="dark"] { --bg: #000000; --fg: #fff; --fg-body: rgba(255, 255, 255, 0.76); --fg-muted: #a8a8a8; --rule: rgba(255, 255, 255, 0.12); --rule-2: rgba(255, 255, 255, 0.24); --surface: #161616; --btn-bg: #fff; --btn-fg: #000000; }
html:not(.js) [data-theme="mist"] { --bg: #f3f3f3; --surface: #fff; }
html:not(.js) [data-theme] { background: var(--bg); color: var(--fg); }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-h) + 16px); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: --bg 0.8s var(--ease-io), --fg 0.8s var(--ease-io), --fg-body 0.8s var(--ease-io), --fg-muted 0.8s var(--ease-io),
              --rule 0.8s var(--ease-io), --rule-2 0.8s var(--ease-io), --surface 0.8s var(--ease-io),
              --btn-bg 0.8s var(--ease-io), --btn-fg 0.8s var(--ease-io), --glass 0.8s var(--ease-io);
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }
::selection { background: #000; color: #fff; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 100;
  padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff;
  transform: translateY(-160%); transition: transform 0.3s var(--ease);
}
.skip-link:focus { transform: none; }

/* ---------- layout + type ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: clamp(88px, 8.4vw, 120px); }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }

.h1 { font-size: var(--fs-h1); font-weight: 600; letter-spacing: -0.04em; line-height: 1.1; }
.h2 { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -0.032em; line-height: 1.1; }
.h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.022em; line-height: 1.2; }
.h4 { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.03em; line-height: 1.25; }
.intro { font-size: var(--fs-intro); font-weight: 500; letter-spacing: -0.012em; line-height: 1.4; color: var(--fg); }
.lead { font-size: var(--fs-lead); font-weight: 500; letter-spacing: -0.02em; line-height: 1.35; color: var(--fg-muted); }
.giant { font-size: var(--fs-giant); font-weight: 600; letter-spacing: -0.055em; line-height: 0.92; }
.muted { color: var(--fg-muted); }
/* Clay's numbered lists: a big gray number above a title */
.num { display: block; font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.02em; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.dim { opacity: 0.38; }

/* Clay's small labels: sentence case, medium, gray. No tracking, no caps. */
.label, .eyebrow {
  font-size: var(--fs-label); font-weight: 500; letter-spacing: -0.005em; line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.eyebrow { display: block; color: var(--fg-muted); margin-bottom: 14px; }

/* section head: heading left, a paragraph and a link to the right */
.sec-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 20px; align-items: end; }
.sec-head > :first-child { grid-column: 1 / span 6; }
.sec-head > :not(:first-child) { grid-column: 8 / -1; }
.sec-head .lead { max-width: 30ch; }

/* ---------- buttons ---------- */
.btn {
  --h: 54px;
  position: relative;
  display: inline-flex; align-items: center; gap: 14px;
  height: var(--h);
  padding: 0 24px 0 26px;
  border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.5s var(--ease);
}
.btn:hover { background: color-mix(in srgb, var(--btn-bg) 80%, var(--btn-fg)); }
.btn:active { transform: scale(0.98); }
.btn--light { --btn-bg: #fff; --btn-fg: #000000; }
.btn--sm { --h: 46px; padding: 0 18px 0 20px; font-size: 1rem; gap: 12px; }

/* Arrows. Right for a link to another page (the first slides out right, a
   second slides in from the left), up-right for anything that leaves the
   site, down for a jump within the page. */
.arr { position: relative; width: 14px; height: 14px; overflow: hidden; flex: none; }
.arr svg { position: absolute; inset: 0; width: 14px; height: 14px; transition: transform 0.55s var(--ease); }
.arr svg + svg { transform: translateX(-130%); }
a:hover > .arr svg:first-child, button:hover > .arr svg:first-child { transform: translateX(130%); }
a:hover > .arr svg + svg, button:hover > .arr svg + svg { transform: none; }
.arr--out svg + svg { transform: translate(-130%, 130%); }
a:hover > .arr--out svg:first-child { transform: translate(130%, -130%); }
.arr--down svg + svg { transform: translateY(-130%); }
a:hover > .arr--down svg:first-child { transform: translateY(130%); }
a:hover > .arr--out svg + svg, a:hover > .arr--down svg + svg { transform: none; }

/* Clay's text link: always underlined, an arrow after it */
.tlink {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px;
  font-size: 1.125rem; font-weight: 500; letter-spacing: -0.01em;
}
.tlink > span:not(.arr) {
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px;
  padding-bottom: 3px;
  transition: background-size 0.55s var(--ease);
}
.tlink:hover > span:not(.arr) { background-size: 0 1px; background-position: 100% 100%; }

/* ---------- status pill + action row ---------- */
.hero-status {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 1rem; font-weight: 500;
  color: var(--fg-body);
}
.pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--fg); flex: none; }
.pulse::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--fg); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .pulse::after { animation: pulse 2.4s var(--ease) infinite; }
}
@keyframes pulse { 0% { transform: scale(0.4); opacity: 0.6; } 100% { transform: scale(1.5); opacity: 0; } }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin-top: clamp(28px, 4vh, 44px); }

/* ---------- status pills: missing / vague / not found / clear ---------- */
.st {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap;
}
.st--miss { box-shadow: none; border: 1px dashed currentColor; }
.st--vague { background: var(--rule); color: var(--fg); }
.st--check { box-shadow: inset 0 0 0 1px var(--rule-2); color: var(--fg-body); }
.st--ok { background: var(--btn-bg); color: var(--btn-fg); }

/* ---------- header (Clay: tall, transparent, glass once scrolled, always there) ---------- */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--hdr-h);
  display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px);
  padding-inline: var(--pad);
  color: var(--fg);
  transition: background-color 0.4s var(--ease), height 0.5s var(--ease);
}
.hdr.is-scrolled {
  background: var(--glass);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
          backdrop-filter: saturate(1.4) blur(14px);
}
.hdr-brand { flex: none; display: block; }
.hdr-brand img { width: 120px; transition: filter 0.6s var(--ease-io); }
body[data-bg="dark"] .hdr-brand img, html:not(.js) .t-dark .hdr-brand img { filter: invert(1); }
.hdr-nav { margin-left: auto; display: flex; gap: clamp(18px, 2.1vw, 34px); }
.hdr-nav a {
  font-size: clamp(1rem, 1.39vw, 1.25rem); font-weight: 500; letter-spacing: -0.01em;
  padding-block: 10px;
  background: linear-gradient(currentColor, currentColor) no-repeat left calc(100% - 4px) / 0 1px;
  transition: background-size 0.5s var(--ease);
}
.hdr-nav a:hover, .hdr-nav a[aria-current="page"] { background-size: 100% 1px; }
.hdr-cta { font-size: 1.0625rem; }
.hdr-menu {
  display: none; margin-left: auto;
  align-items: center; gap: 12px; height: 44px; padding: 0 4px;
  font-size: 1.0625rem; font-weight: 500;
}
.hdr-menu i { display: grid; gap: 6px; width: 24px; }
.hdr-menu i::before, .hdr-menu i::after { content: ""; height: 1.5px; background: currentColor; }

/* ---------- overlay menu: big type, a preview of the page, the contact in reach ---------- */
.menu {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column;
  padding: 0 var(--pad) clamp(20px, 4vh, 36px);
  background: var(--slate); color: #fff;
  overflow-y: auto;
}
.menu-top { display: flex; align-items: center; justify-content: space-between; height: var(--hdr-h); flex: none; }
.menu-top img { width: 120px; }
.menu-close { height: 44px; display: inline-flex; align-items: center; gap: 12px; font-size: 1.0625rem; font-weight: 500; }
.menu-close i { position: relative; width: 20px; height: 20px; }
.menu-close i::before, .menu-close i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor; }
.menu-close i::before { transform: rotate(45deg); }
.menu-close i::after { transform: rotate(-45deg); }
.menu-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; padding-block: 24px; }
.menu-nav { display: flex; flex-direction: column; }
.menu-nav a { display: block; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.menu-nav a:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.menu-nav b { display: block; font-size: clamp(2.125rem, 7.4vw, 3.5rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; transition: transform 0.6s var(--ease); }
.menu-nav small { display: block; margin-top: 4px; font-size: 0.9375rem; font-weight: 500; color: var(--gray-lt); }
.menu-nav a:hover b, .menu-nav a:focus-visible b { transform: translateX(10px); }
.menu-nav a[aria-current="page"] b::after { content: ""; display: inline-block; width: 0.22em; height: 0.22em; margin-left: 0.3em; border-radius: 50%; background: currentColor; vertical-align: 0.12em; }
.menu-preview { display: none; position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--slate-2); }
.menu-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 0.5s var(--ease), transform 1.2s var(--ease); }
.menu-preview img.on { opacity: 1; transform: none; }
.menu-foot { display: grid; grid-template-columns: 1fr auto; gap: 20px 24px; align-items: end; padding-top: 20px; }
.menu-talk p { font-size: clamp(1.75rem, 5vw, 2.5rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; }
.menu-talk a { display: inline-block; margin-top: 6px; font-size: 1.125rem; font-weight: 500; color: var(--gray-lt); }
.menu-clock { grid-column: 1 / -1; font-size: 0.9375rem; color: var(--gray-lt); }
.menu-clock b { color: #fff; font-weight: 500; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .menu-foot { grid-template-columns: 1fr; }
  .menu-foot .btn { justify-content: space-between; }
}
@media (min-width: 680px) {
  .menu-body { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(32px, 5vw, 72px); }
  .menu-preview { display: block; }
}
@media (prefers-reduced-motion: no-preference) {
  .menu.is-open { animation: menu-in 0.7s var(--ease) both; }
  .menu.is-open .menu-nav a { animation: menu-link 0.8s var(--ease) both; animation-delay: calc(0.1s + var(--i) * 0.05s); }
}
@keyframes menu-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes menu-link { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

@media (max-width: 1180px) {
  .hdr-nav, .hdr-cta { display: none; }
  .hdr-menu { display: inline-flex; }
}
@media (max-width: 760px) {
  :root { --hdr-h: 72px; }
  .hdr-brand img { width: 104px; }
}

/* ---------- reveals (Clay: opacity 0.9s, rise 1.5s, expo-out) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-r] {
    opacity: 0; transform: translateY(40px);
    transition: opacity 0.9s var(--ease), transform 1.5s var(--ease);
    transition-delay: calc((var(--d, 0) + var(--intro, 0)) * 1s);
  }
  .js [data-r].in { opacity: 1; transform: none; }
  .js [data-r="fade"] { transform: none; }

  /* Word-masked headings: each word rises out of its own clip. clip-path
     rather than overflow, so the baseline stays put. */
  .js [data-lines] .wm { display: inline-block; clip-path: inset(-0.18em -0.3em -0.3em -0.3em); }
  .js [data-lines] .wi { display: inline-block; transform: translateY(120%); transition: transform 1.2s var(--ease); transition-delay: calc((var(--d, 0) + var(--intro, 0)) * 1s + var(--l, 0) * 0.08s); }
  .js [data-lines].in .wi { transform: none; }
}

/* ---------- image frames: Clay's hover (the frame grows ~3%, slowly) plus a
   wipe from the top as they arrive ---------- */
.lift { display: block; overflow: hidden; transition: transform 1.3s var(--ease); }
.lift > img, .lift > video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease); }
a:hover .lift, .lift:hover { transform: scale(1.029); }
a:hover .lift > img, .lift:hover > img { transform: scale(0.985); }
@media (prefers-reduced-motion: no-preference) {
  .js [data-wipe] { clip-path: inset(0 0 100% 0); transition: clip-path 1.3s cubic-bezier(.76, 0, .24, 1), transform 1.3s var(--ease); }
  .js [data-wipe].in { clip-path: inset(0 0 0 0); }
  .js [data-wipe] > img { scale: 1.14; transition: scale 1.8s var(--ease), transform 1.3s var(--ease); }
  .js [data-wipe].in > img { scale: 1; }
  .js [data-parallax] > img { scale: 1.16 !important; translate: 0 var(--py, 0px); }
}

/* ---------- FAQ (Clay: a heading above, full-width rows, a chevron) ---------- */
.faq-list { border-bottom: 1px solid var(--rule); }
.faq-item { border-top: 1px solid var(--rule); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 28px 0;
  font-size: var(--fs-lead); font-weight: 500; letter-spacing: -0.02em; line-height: 1.3;
  cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i { width: 14px; height: 14px; flex: none; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-4px) rotate(45deg); transition: transform 0.5s var(--ease); }
.faq-item[open] summary i { transform: translateY(3px) rotate(225deg); }
.faq-body { overflow: hidden; }
.faq-body p { max-width: 68ch; padding-bottom: 30px; color: var(--fg-body); font-size: var(--fs-body); line-height: 1.55; }
.faq-body p + p { margin-top: -14px; }
.faq-sec .faq-list { margin-top: clamp(32px, 4vw, 56px); }
.faq-sec .faq-intro { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.faq-sec .faq-intro p { color: var(--fg-muted); font-size: var(--fs-small); font-weight: 500; }
.faq-sec .faq-intro a { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ---------- footer (Clay: light gray, "Let's talk", the mark as relief) ---------- */
.ftr { position: relative; overflow: hidden; padding: clamp(72px, 8vw, 112px) 0 28px; }
.ftr-art { position: absolute; left: -2%; right: -6%; bottom: -3%; pointer-events: none; }
.ftr-art svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.03)); }
.ftr-grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 48px; }
.ftr-talk { grid-column: 1 / span 5; }
.ftr-title { font-size: var(--fs-h1); font-weight: 600; letter-spacing: -0.04em; line-height: 1.1; }
.ftr-mail { display: inline-block; margin-top: 10px; font-size: var(--fs-lead); font-weight: 500; letter-spacing: -0.015em; }
.ftr-mail { background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: background-size 0.5s var(--ease); }
.ftr-mail:hover { background-size: 100% 1px; }
.ftr-talk .btn { margin-top: 28px; }
.ftr-nav { grid-column: 6 / span 5; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0 clamp(24px, 3vw, 48px); align-content: start; padding-top: 10px; }
.ftr-nav li + li { margin-top: 6px; }
.ftr-nav a { font-size: 1.125rem; font-weight: 500; background: linear-gradient(currentColor, currentColor) no-repeat left 100% / 0 1px; transition: background-size 0.5s var(--ease); }
.ftr-nav a:hover { background-size: 100% 1px; }
.ftr-place { grid-column: 11 / -1; padding-top: 10px; }
.ftr-place b { display: block; font-size: 1rem; font-weight: 600; }
.ftr-place p { margin-top: 4px; font-size: 0.9375rem; color: var(--fg-muted); }
.ftr-clock b { display: inline; font-weight: 500; color: var(--fg); font-variant-numeric: tabular-nums; }
.ftr-bottom {
  position: relative;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px;
  margin-top: clamp(120px, 16vw, 240px);
  font-size: 0.875rem; color: var(--fg-muted);
}
.ftr-bottom nav { display: flex; gap: 20px; }
.ftr-bottom a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (prefers-reduced-motion: no-preference) {
  .js .ftr-art .gs, .js .ftr-art .gw { opacity: 0; transform: translateX(-60px); transition: opacity 1.2s var(--ease), transform 1.8s var(--ease); }
  .js .ftr-art .gs2 { transition-delay: 0.1s; }
  .js .ftr-art .gs3 { transition-delay: 0.2s; }
  .js .ftr-art .gw { transition-delay: 0.3s; transform: translateX(-30px); }
  .js .ftr-art.in .gs, .js .ftr-art.in .gw { opacity: 1; transform: none; }
}
@media (max-width: 960px) {
  .ftr-talk { grid-column: 1 / -1; }
  .ftr-nav { grid-column: 1 / span 8; }
  .ftr-place { grid-column: 9 / -1; }
}
@media (max-width: 560px) {
  .ftr-nav, .ftr-place { grid-column: 1 / -1; }
  .ftr-bottom { margin-top: 96px; }
}

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

/* ---------- floating "book an audit" on phones ---------- */
.fab {
  position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40;
  display: none; align-items: center; gap: 12px;
  height: 52px; padding: 0 20px 0 24px; border-radius: 999px;
  background: var(--ink); color: #fff;
  font-weight: 600; font-size: 1rem; white-space: nowrap;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.12);
  transform: translate(-50%, 140%); transition: transform 0.6s var(--ease);
}
.fab.is-on { transform: translate(-50%, 0); }
@media (max-width: 760px) { .fab { display: inline-flex; } }

/* ---------- page transitions: a quiet cross-fade, the header stays ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .hdr { view-transition-name: slate-header; }
  ::view-transition-old(root) { animation: vt-out 0.3s var(--ease-io) both; }
  ::view-transition-new(root) { animation: vt-in 0.7s var(--ease) both; }
  ::view-transition-group(slate-header) { animation-duration: 0s; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(18px); } }

/* ---------- the intro: once per visit, about a second ---------- */
.intro-cover { display: none; }
html.intro-on { --intro: 0.85; }
html.intro-on .intro-cover {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: #fff;
  animation: intro-out 0.6s cubic-bezier(.76, 0, .24, 1) 0.62s both;
}
html.intro-on .intro-cover svg { width: clamp(72px, 9vw, 120px); height: auto; overflow: visible; }
html.intro-on .intro-cover .is { opacity: 0; animation: intro-slab 0.5s var(--ease) both; }
html.intro-on .intro-cover .is2 { animation-delay: 0.07s; }
html.intro-on .intro-cover .is3 { animation-delay: 0.14s; }
@keyframes intro-slab { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } }
@keyframes intro-out { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }

/* ---------- swipe rows on phones (any grid marked data-swipe) ---------- */
@media (max-width: 760px) {
  [data-swipe] {
    display: flex !important; gap: 14px !important; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); scroll-padding-inline: var(--pad);
    scrollbar-width: none;
  }
  [data-swipe]::-webkit-scrollbar { display: none; }
  [data-swipe] > * { flex: none; width: 82vw; scroll-snap-align: start; margin: 0 !important; padding: 0 !important; transform: none !important; }
  .js [data-swipe] > [data-r] { opacity: 1; } /* off to the side, so they can't wait to be scrolled to */
  .swipe-hint { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 0.875rem; font-weight: 500; color: var(--fg-muted); }
  .swipe-hint i { flex: 1; height: 2px; background: var(--rule); position: relative; overflow: hidden; border-radius: 2px; }
  .swipe-hint i b { position: absolute; inset: 0 auto 0 0; width: var(--sw, 30%); left: var(--sx, 0%); background: var(--fg); border-radius: 2px; transition: left 0.2s linear; }
}
@media (min-width: 761px) { .swipe-hint { display: none; } }