/* Pelee Labs: site styles
   ------------------------------------------------------------------ */

/* Instrument Sans, hosted with the site (SIL Open Font Licence, assets/fonts/instrument-sans-OFL.txt).
   One variable file: width 75–100, weight 400–700, all twelve stylistic sets. */
@font-face {
  font-family: "Instrument Sans";
  src: url("assets/fonts/instrument-sans-var.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
/* Pelee Display, the studio's own display face, drawn in code (see type/README.md). Headings only. */
@font-face {
  font-family: "Pelee Display";
  src: url("assets/fonts/pelee-display-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pelee Display";
  src: url("assets/fonts/pelee-display-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colour: Lake Erie at dusk */
  --lake-900: #0E1715;   /* page */
  --lake-800: #121E1B;   /* raised surface */
  --lake-700: #1A2925;   /* hover / borders on surface */
  --cream:    #F2EEE4;   /* primary text, matches logo */
  --cream-2:  #C9CEC7;   /* secondary text */
  --muted:    #A3AFA9;   /* tertiary text */
  --mint:     #A9D8BA;   /* accent */
  --mint-hi:  #BCE4CA;
  --mint-ink: #0D2A1D;   /* text on mint */
  --rule:     rgba(242, 238, 228, .12);
  --rule-2:   rgba(242, 238, 228, .2);


  /* Type: one family, three voices. Every size below comes from the same rule: it grows in a
     straight line from a 360px screen to a 1440px one, then stops. */
  --font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-xs: clamp(0.7812rem, 0.7708rem + 0.0463vw, 0.8125rem);   /* 12.5–13: labels, notices */
  --fs-sm: clamp(0.875rem, 0.8542rem + 0.09259vw, 0.9375rem);   /* 14–15: small text */
  --fs-md: clamp(1.031rem, 1.01rem + 0.09259vw, 1.094rem);      /* 16.5–17.5: body */
  --fs-lg: clamp(1.188rem, 1.083rem + 0.463vw, 1.5rem);         /* 19–24: every lead line, and project names */
  --fs-xl: clamp(1.5rem, 1.333rem + 0.7407vw, 2rem);            /* 24–32 */
  /* The two display sizes also answer to the screen's height, so a short screen (a phone on its side, a laptop
     with tall toolbars) gets a headline that fits its first view instead of one sized for its width */
  --fs-chapter: clamp(2rem, min(1.417rem + 2.593vw, 9svh), 3.75rem);       /* 32–60: chapter titles */
  --fs-hero: clamp(3.25rem, min(2.333rem + 4.074vw, 13.5svh), 6rem);       /* 52–96: the one loudest line on the page */
  --font-display: "Pelee Display", var(--font);   /* display voice: the studio's own face */
  --display-width: 80%;    /* any character Pelee Display lacks falls back to Instrument's narrow cut */
  --data-width: 87.5%;     /* data voice: the semi-condensed cut, for labels and figures */

  /* Space: the same rule, one ladder */
  --space-xs: clamp(0.5rem, 0.4583rem + 0.1852vw, 0.625rem);    /* 8–10 */
  --space-s: clamp(0.875rem, 0.7917rem + 0.3704vw, 1.125rem);   /* 14–18 */
  --space-m: clamp(1.25rem, 1.083rem + 0.7407vw, 1.75rem);      /* 20–28 */
  --space-l: clamp(1.75rem, 1.417rem + 1.481vw, 2.75rem);       /* 28–44 */
  --space-xl: clamp(2.5rem, 1.833rem + 2.963vw, 4.5rem);        /* 40–72 */
  --space-2xl: clamp(3.5rem, 2.667rem + 3.704vw, 6rem);         /* 56–96 */

  /* Layout */
  --gutter: clamp(20px, 5.5vw, 80px);
  --max: 80rem;   /* 1280px; in rem so the whole composition scales together on large screens (see the end) */
  --radius-sm: 6px;
  --radius-lg: 16px;
  --header-h: 84px;
  --chapter-space: clamp(112px, 16vh, 220px);   /* the same pause before every chapter */
  --ease-out: cubic-bezier(.2, .7, .2, 1);

  color-scheme: dark; /* single dark look: native controls and scrollbars follow */
}

/* Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--lake-900);
  color: var(--cream);
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--mint); color: var(--mint-ink); }

[tabindex="-1"]:focus { outline: none; }   /* headings and panels that script moves focus to */
:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: var(--radius-sm);
  background: var(--mint); color: var(--mint-ink); font-weight: 500;
  transition: top .2s;
}
.skip-link:focus { top: 16px; }

.container {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Shared elements --------------------------------------------------- */
/* Display voice: Pelee Display Light for headings, Regular for project names. Characters it doesn't have
   fall back to Instrument Sans in its narrow cut, with the same single-storey a (ss02). */
.hero-title, .featured-title, .intake-title, .doc h1, .featured-case-name,
.case-title, .case-section h2, .case-next-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-stretch: var(--display-width);
  font-feature-settings: "ss02";
}
/* Data voice: the semi-condensed cut with figures in columns, for labels, facts and the clock */
.case-facts, .footer-clock, .ibrief-label, .imsg-meta {
  font-stretch: var(--data-width);
  font-variant-numeric: tabular-nums;
}
.icon {
  width: 1em; height: 1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s var(--ease-out);
}

.btn {
  display: inline-flex; align-items: center; gap: .55em;
  min-height: 48px;
  padding: 0 1.4em;
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.005em;
  white-space: nowrap;
  border: 0; background: none; color: inherit; font-family: var(--font); cursor: pointer;   /* same look on <button> as on <a> */
  transition: background-color .2s, color .2s, transform .2s var(--ease-out);
}
.btn-primary { background: var(--mint); color: var(--mint-ink); }
.btn-primary:hover { background: var(--mint-hi); }
.btn-primary:hover .icon { transform: translate(2px, -2px); }
.btn-primary:active { transform: translateY(1px); }
.btn-sm { min-height: 40px; padding: 0 1.05em; font-size: var(--fs-sm); }


/* Header ------------------------------------------------------------ */
.site-header {
  position: absolute; inset: 0 0 auto 0; z-index: 20;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; gap: 18px; margin-left: -4px; }
.brand-mark { width: auto; height: 36px; }
.brand-word { width: auto; height: 14px; }
/* The lighthouse's beams flicker on once, on the first page of a visit (script at the end of each page's head) */
.is-lighting .brand .beam { animation: beam-on 1.5s .3s linear both; }
@keyframes beam-on {
  0% { opacity: 0; } 6% { opacity: .55; } 9% { opacity: .05; } 15% { opacity: .8; } 18% { opacity: .15; }
  26% { opacity: .9; } 30% { opacity: .4; } 40% { opacity: 1; } 46% { opacity: .7; } 56%, 100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .is-lighting .brand .beam { animation: none; } }

.site-nav { display: flex; align-items: center; gap: var(--space-l); }
.site-nav ul { display: flex; gap: var(--space-l); }
.site-nav ul a {
  position: relative;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--cream);
  padding-block: 8px;
}
.site-nav ul a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease-out);
}
.site-nav ul a:hover::after { transform: scaleX(1); }

/* With the page script running, the header follows the scroll: it slides away going down, returns on the way up,
   and stands on the page colour once the hero photo is no longer behind it. Without the script it stays at the top. */
.site-header.follows { position: fixed; transition: transform .4s var(--ease-out), background-color .3s, box-shadow .3s; }
.site-header.follows .header-inner { transition: height .3s var(--ease-out); }
.site-header.follows.is-scrolled { background: rgba(14, 23, 21, .96); box-shadow: 0 1px 0 var(--rule); }
.site-header.follows.is-scrolled .header-inner { height: 64px; }
.site-header.follows.is-away:not(:focus-within) { transform: translateY(-101%); }


/* Scenes: one backdrop pinned behind the hero, both projects and the intake --
   Three numbers, each running 0 to 1 and set by the page script: --scene0 as the first project scrolls in,
   --scene as the second does, --scene2 as the intake does. The lake dissolves into the Ambassador Bridge at
   night, then the concert crowd, then the pier. Without the script it stays the lake. */
.scenes { position: relative; isolation: isolate; --scene0: 0; --scene: 0; --scene2: 0; }
.backdrop-track { position: absolute; inset: 0; z-index: -1; pointer-events: none; }   /* spans exactly hero to the end of the intake */
.backdrop {   /* pinned to the screen while the track scrolls past, released at the track's end */
  position: sticky; top: 0;
  height: 100vh; height: 100lvh;
  overflow: hidden;
}
.scene { position: absolute; inset: 0; will-change: opacity; }
.scene picture { display: contents; }
.scene img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.scene::before, .scene::after { content: ""; position: absolute; inset: 0; }

.scene-lake { opacity: calc(1 - var(--scene0)); }
.scene-lake img {
  object-position: 62% 28%;
  filter: saturate(.8) contrast(1.18) brightness(.74);   /* daytime photo graded toward dusk */
  transform-origin: 62% 40%;
  scale: calc(1 + .06 * var(--scene0));                  /* drifts away as it fades */
}
.scene-lake::before { z-index: 1; background: #1F4A42; mix-blend-mode: color; opacity: .38; }
.scene-lake::after {
  z-index: 2;
  background:
    radial-gradient(48% 38% at 92% 0%, rgba(240, 178, 116, .24), transparent 72%),
    linear-gradient(90deg, rgba(14, 23, 21, .94) 0%, rgba(14, 23, 21, .78) 30%, rgba(14, 23, 21, .25) 58%, rgba(14, 23, 21, .1) 100%),
    linear-gradient(180deg, rgba(14, 23, 21, .55) 0%, rgba(14, 23, 21, 0) 22%, rgba(14, 23, 21, 0) 55%, rgba(14, 23, 21, .7) 100%);
}

/* Web platforms: the Ambassador Bridge at night, the crossing Border Delays started with. Natural colour, no tint. */
.scene-bridge { opacity: calc(var(--scene0) - var(--scene)); }
.scene-bridge img {
  object-position: 50% 30%;   /* the tower's sign clears the top of the tablet; the cable lights run down behind the copy */
  filter: contrast(1.04) brightness(.86);
  scale: calc(1.06 - .06 * var(--scene0) + .05 * var(--scene));   /* settles as it arrives, drifts as it leaves */
}
.scene-bridge::after {
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(14, 23, 21, .86) 0%, rgba(14, 23, 21, .7) 32%, rgba(14, 23, 21, .14) 58%, rgba(14, 23, 21, 0) 100%),
    linear-gradient(180deg, rgba(14, 23, 21, .6) 0%, rgba(14, 23, 21, .05) 24%, rgba(14, 23, 21, .05) 62%, rgba(14, 23, 21, .6) 100%);
}

/* Internal tools: no photograph. A dark stage in the page colour, lit from behind the laptop by the app's own
   palette (its indigo, with a little of its teal), so the product is the only thing to look at. */
.scene-stage {
  opacity: var(--scene);
  background:
    radial-gradient(44% 50% at 32% 50%, rgba(124, 196, 156, .13), transparent 70%),   /* one soft light behind the laptop, in the studio's green */
    var(--lake-900);
}
.scene-stage::after {   /* the top and bottom return to the page colour, so the chapters either side hand over cleanly */
  background: linear-gradient(180deg, var(--lake-900) 0%, rgba(14, 23, 21, 0) 22%, rgba(14, 23, 21, 0) 76%, var(--lake-900) 100%);
}

/* Home: Detroit across the river from Windsor at night, graded back to the studio's lake green */
.scene-pier { opacity: var(--scene2); }
.scene-pier img {
  object-position: 50% 60%;   /* the pier leads in from the bottom; on narrow screens it stays centred under the light */
  filter: contrast(1.05) brightness(.8) saturate(.82);   /* sky toned down to sit with the other photos; the ::after gradients keep text legible */
  scale: calc(1.07 - .07 * var(--scene2));                /* settles into place as it arrives */
}
@media (min-width: 881px) and (orientation: landscape) {
  /* the picture is drawn wider than the screen and anchored left, which puts the pier at about five-eighths across:
     the question and its field get the dark trees on the left to themselves */
  .scene-pier img { width: 126%; max-width: none; object-position: 50% 56%; }
}
.scene-pier::after {
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(14, 23, 21, .9) 0%, rgba(14, 23, 21, .8) 34%, rgba(14, 23, 21, .3) 54%, rgba(14, 23, 21, 0) 76%),   /* quiet behind the heading */
    /* the bottom reaches the page colour, so the backdrop hands off to the footer with no edge */
    linear-gradient(180deg, rgba(14, 23, 21, .7) 0%, rgba(14, 23, 21, .2) 26%, rgba(14, 23, 21, .25) 58%, rgba(14, 23, 21, .82) 86%, var(--lake-900) 100%);
}
@media (max-width: 880px) {   /* the text runs over the sky here: a steadier band behind it */
  .scene-pier::after { background: linear-gradient(180deg, rgba(14, 23, 21, .75) 0%, rgba(14, 23, 21, .58) 28%, rgba(14, 23, 21, .6) 60%, rgba(14, 23, 21, .85) 86%, var(--lake-900) 100%); }
}

/* Hero -------------------------------------------------------------- */
.hero {
  min-height: 100vh; min-height: 100svh;   /* the first screen is the hero's alone */
  display: flex; flex-direction: column; justify-content: flex-end;   /* words anchored low over the dark trees; the point and its people stay clear above */
  padding-top: calc(var(--header-h) + 48px);
  padding-bottom: clamp(56px, 11vh, 132px);
}
.hero > .container { width: 100%; }
.hero-title {
  max-width: 10em;
  font-size: var(--fs-hero);
  line-height: .96;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.hero-lede {
  max-width: 26em;
  margin-top: var(--space-m);
  font-size: var(--fs-lg);
  line-height: 1.4;
  text-wrap: pretty;
  color: var(--cream);
  opacity: .9;
}
.hero-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
  margin-top: var(--space-l);
}

/* Chapters ------------------------------------------------------------
   One layout for every chapter: the same pause before each, a copy column and a device
   column centred on each other, alternating sides. */
/* Each chapter owns at least one screen, its content centred, so one chapter and its backdrop are in view at a time:
   on a tall screen two chapters no longer share the view while the background changes between them */
.featured {
  position: relative; padding-top: var(--chapter-space);
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
}
.featured-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2xl);
}
.featured-copy { min-width: 0; }
.featured-title {
  font-size: var(--fs-chapter);
  line-height: 1;
  letter-spacing: -.005em;
}
/* Three levels: the capability (title), the claim (pitch), the proof (the project, set quietest) */
.featured-pitch { max-width: 15em; margin-top: var(--space-m); font-size: var(--fs-lg); line-height: 1.35; letter-spacing: -.012em; color: var(--cream); text-wrap: pretty; }
.featured-case { max-width: 22rem; margin-top: var(--space-l); padding-top: 18px; border-top: 1px solid var(--rule-2); }
.featured-case-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.featured-case-name { font-size: var(--fs-lg); font-weight: 400; line-height: 1.1; letter-spacing: 0; color: var(--cream); }
.featured-case-link {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-size: var(--fs-xs); font-weight: 500; color: var(--cream-2);
  text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px;
  transition: color .2s, text-decoration-color .2s;
}
.featured-case-link:hover { color: var(--cream); text-decoration-color: currentColor; }
.featured-case-link .icon { width: 12px; height: 12px; transition: transform .2s; }
.featured-case-link:hover .icon { transform: translate(1px, -1px); }
.featured-case-more {
  display: inline-block; margin-top: var(--space-s);
  font-size: var(--fs-sm); font-weight: 500; color: var(--cream);
  text-decoration: underline; text-decoration-color: var(--mint); text-underline-offset: 4px; transition: color .2s;
}
.featured-case-more:hover { color: var(--mint); }
.featured-case-text { margin-top: 6px; font-size: var(--fs-sm); line-height: 1.55; color: var(--cream-2); }
.case-facts { margin: var(--space-s) 0 0; font-size: var(--fs-xs); line-height: 1.45; font-variant-numeric: tabular-nums; }
.case-facts div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 12px; padding: 7px 0; border-top: 1px solid var(--rule); }
.case-facts dt { color: var(--muted); }
.case-facts dd { margin: 0; color: var(--cream-2); }
#work .case-facts dt { color: var(--cream-2); }   /* over the bridge lights, the muted grey drops below reading contrast */

/* iPad: floats in 3D, breaking up into the hero */
.device {
  position: relative;
  justify-self: end;
  /* never taller than the screen below the header (the iPad with its bezel is about 1.4 times as wide as tall) */
  width: min(100%, 51.25rem, (100svh - var(--header-h) - 7.5rem) * 1.4);
  margin: 0 calc(var(--gutter) * -0.25) 0 0;   /* bleeds slightly toward the edge */
  perspective: 3000px;
  container-type: inline-size;
}
.device::after { /* contact shadow on the page */
  content: ""; position: absolute; z-index: -1;
  left: 8%; right: 4%; bottom: -6%; height: 18%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .55), transparent 70%);
  filter: blur(18px);
  transform: rotate(-4deg);
}
.ipad {
  --bezel: 2.5cqi;
  --radius: 4.4cqi;
  position: relative;
  padding: var(--bezel);
  border-radius: var(--radius);
  background: #070908;
  box-shadow:
    0 0 0 .18cqi #4a504d,                 /* machined aluminium edge */
    0 0 0 .42cqi #1b1f1d,
    inset 0 0 0 .12cqi rgba(255, 255, 255, .07),
    0 3cqi 7cqi -1cqi rgba(0, 0, 0, .6),
    0 10cqi 16cqi -6cqi rgba(0, 0, 0, .55);
  transform-origin: 50% 50%;
  transform: rotateX(calc(9deg - 6deg * var(--s, 0))) rotateY(calc(-17deg + 10deg * var(--s, 0))) rotateZ(calc(-4deg + 2.5deg * var(--s, 0)));   /* turns toward you as you scroll */
}
.ipad::before { /* front camera, centred on the long edge in landscape */
  content: ""; position: absolute; left: 50%; top: calc(var(--bezel) / 2);
  width: .75cqi; height: .75cqi; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 35%, #1d2a3a 0%, #050607 60%);
  box-shadow: 0 0 0 .1cqi rgba(255, 255, 255, .05);
}
.ipad::after { /* top button */
  content: ""; position: absolute; top: -.55cqi; right: 12%;
  width: 6cqi; height: .4cqi; border-radius: .4cqi .4cqi 0 0;
  background: linear-gradient(#5a605d, #2a2f2d);
}
.ipad-screen {
  position: relative;
  aspect-ratio: 2388 / 1668;
  overflow: hidden;
  border-radius: calc(var(--radius) - var(--bezel) * .8);
  background: #0d1210;
}
.ipad-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.ipad-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: transparent; }
.device > .motion-toggle { right: 0; bottom: -52px; }   /* below the tablet, never over its screen */
.ipad-screen::after { /* glass */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.02) 34%, rgba(255,255,255,0) 50%);
}

/* Second project: mirrored layout, MacBook Pro --------------------- */
.featured-alt .featured-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); }
.featured-alt .featured-copy { grid-column: 2; grid-row: 1; }

.device-mac {
  grid-column: 1; grid-row: 1;
  justify-self: start;
  width: min(100%, 53.75rem, (100svh - var(--header-h) - 7.5rem) * 1.63);   /* the open laptop is about 1.63 times as wide as tall */
  margin: 0 0 0 calc(var(--gutter) * -0.25);
}
.device-mac::after { /* contact shadow under the base */
  left: 6%; right: 6%; bottom: -4%; height: 12%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .6), transparent 72%);
  filter: blur(16px);
  transform: none;
}
.mbp {   /* straight-on; only the lid moves, around the hinge line, so nothing reads as bent */
  position: relative;
  perspective: 1500px; perspective-origin: 50% 35%;
  translate: 0 calc(90px * (1 - var(--open, 1)));
}
.mbp-lid {
  position: relative;
  margin-inline: 6.5%;
  transform-origin: 50% 100%;
  transform: rotateX(calc(38deg * (1 - var(--open, 1))));   /* starts reclined on its hinge, swings upright */
  padding: 2.5cqi 1.5cqi 2cqi;          /* full-screen apps sit below the notch, so the top bezel reads taller */
  border-radius: 2.4cqi 2.4cqi .5cqi .5cqi;
  background: #050606;
  box-shadow:
    0 0 0 .2cqi #3f4245,                 /* space black aluminium edge */
    0 0 0 .36cqi #17191a,
    inset 0 0 0 .1cqi rgba(255, 255, 255, .05);
}
.mbp-lid::before { /* camera */
  content: ""; position: absolute; left: 50%; top: 1.25cqi;
  width: .55cqi; height: .55cqi; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 35%, #1d2a3a 0%, #030404 65%);
}
.mbp-screen {
  position: relative;
  aspect-ratio: 2400 / 1560;
  overflow: hidden;
  border-radius: .5cqi;
  background: #E6E8F7;
}
.mbp-screen img { width: 100%; height: 100%; object-fit: cover; }
.mbp-screen::after { /* glass */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.03) 30%, rgba(255,255,255,0) 46%);
}
.mbp-base {
  position: relative;
  height: 2.2cqi;
  margin-top: -.15cqi;
  border-radius: .3cqi .3cqi 2cqi 2cqi / .3cqi .3cqi 1.4cqi 1.4cqi;
  background: linear-gradient(180deg, #7a7d80 0%, #474a4d 16%, #27292b 55%, #111213 100%);
  box-shadow: inset 0 .12cqi 0 rgba(255, 255, 255, .28);
}
.mbp-base::before { /* finger groove */
  content: ""; position: absolute; top: 0; left: 50%;
  width: 14cqi; height: .75cqi;
  transform: translateX(-50%);
  border-radius: 0 0 1cqi 1cqi;
  background: linear-gradient(180deg, #17181a, #34373a);
}

/* ==== MacBook screen ==== */


/* MacBook screen as HTML: authored at the app's 1200 x 780 design size; 1 design px = var(--u),
   so the whole window scales with the laptop and stays sharp text, not a picture. */
.mbp-screen { container-type: inline-size; }
.tk { --u: calc(100cqi / 1200); }

.tk {
  position: absolute; inset: 0; overflow: hidden;
  display: flex; flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
  font-size: calc(13 * var(--u)); line-height: normal; letter-spacing: 0; text-align: left;
  color: #1D1F27;
  background:   /* the app's light-theme backdrop, as in its own stylesheet */
    radial-gradient(38% 50% at 18% 22%, #b9aeff 0%, transparent 62%),
    radial-gradient(42% 54% at 82% 18%, #ffc2d2 0%, transparent 60%),
    radial-gradient(50% 60% at 75% 88%, #b8f0ec 0%, transparent 62%),
    radial-gradient(46% 56% at 12% 86%, #ffe3b0 0%, transparent 60%),
    linear-gradient(135deg, #eef0ff 0%, #f4f0ff 50%, #eafcf6 100%);
}
.tk svg { display: block; max-width: none; overflow: visible; }
.tk-bar { height: calc(60 * var(--u)); flex: none; display: flex; align-items: center; padding: 0 calc(22 * var(--u)); position: relative; }
.tk-lights { display: flex; gap: calc(8 * var(--u)); }
.tk-lights i { width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%; background: #FF5F57; }
.tk-lights i:nth-child(2) { background: #FEBC2E; }
.tk-lights i:nth-child(3) { background: #28C840; }
.tk-seg { position: absolute; left: 50%; transform: translateX(-50%); display: flex; padding: calc(3 * var(--u)); border-radius: calc(9 * var(--u)); background: rgba(20,22,40,.06); border: calc(.5 * var(--u)) solid rgba(20,22,40,.08); }
.tk-seg span { padding: calc(5 * var(--u)) calc(18 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 500; border-radius: calc(7 * var(--u)); color: #4a4d5a; }
.tk-seg .tk-on { background: #fff; color: #1D1F27; box-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0,0,0,.12); }
.tk-bar-right { margin-left: auto; display: flex; align-items: center; gap: calc(14 * var(--u)); }
.tk-quota { font-size: calc(12.5 * var(--u)); color: #626674; }
.tk-btn { display: inline-flex; align-items: center; height: calc(32 * var(--u)); padding: 0 calc(15 * var(--u)); border-radius: calc(8 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 500; border: calc(.75 * var(--u)) solid rgba(20,22,40,.12); background: rgba(20,22,40,.05); color: #1D1F27; white-space: nowrap; }
.tk-orange { background: #E5603A; color: #fff; border-color: rgba(0,0,0,.08); box-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(229,96,58,.35); }
.tk-indigo-btn { background: #5B5FD6; color: #fff; border-color: rgba(0,0,0,.08); }
.tk-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) calc(372 * var(--u)); gap: calc(20 * var(--u)); padding: calc(6 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u)); }
.tk-card { background: rgba(255,255,255,.78); border: calc(.75 * var(--u)) solid rgba(20,22,40,.08); border-radius: calc(16 * var(--u)); box-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(20,22,40,.04), 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(20,22,40,.05); }
.tk-col { display: flex; flex-direction: column; gap: calc(20 * var(--u)); min-height: 0; }
.tk-spend { display: flex; align-items: center; gap: calc(36 * var(--u)); padding: calc(22 * var(--u)) calc(24 * var(--u)); }
.tk-stat b, .tk-label, .tk-cols { font-size: calc(10.5 * var(--u)); font-weight: 500; letter-spacing: calc(.5 * var(--u)); text-transform: uppercase; color: #626674; }
.tk-stat b { display: block; }
.tk-stat span { display: block; margin-top: calc(4 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 600; }
.tk-meter { flex: 1; }
.tk-meter-track { height: calc(6 * var(--u)); margin-top: calc(10 * var(--u)); border-radius: calc(6 * var(--u)); background: rgba(20,22,40,.07); overflow: hidden; }
.tk-meter-fill { width: 55%; height: 100%; border-radius: calc(6 * var(--u)); background: linear-gradient(90deg, #7A7EE6, #5B5FD6); }
.tk-list { flex: 1; padding: calc(24 * var(--u)) calc(22 * var(--u)) calc(12 * var(--u)); display: flex; flex-direction: column; }
.tk-list-head { display: flex; align-items: baseline; gap: calc(8 * var(--u)); }
.tk-h { font-size: calc(16 * var(--u)); font-weight: 600; }
.tk-h-lg { font-size: calc(18 * var(--u)); }
.tk-list-head small { font-size: calc(13 * var(--u)); color: #626674; }
.tk-cols, .tk-row { display: grid; grid-template-columns: minmax(0, 1fr) calc(116 * var(--u)) calc(84 * var(--u)) calc(68 * var(--u)) calc(136 * var(--u)); align-items: center; gap: calc(14 * var(--u)); }
.tk-cols { margin-top: calc(16 * var(--u)); padding: 0 calc(14 * var(--u)) calc(8 * var(--u)); }
.tk-row { padding: calc(24 * var(--u)) calc(14 * var(--u)); border-top: calc(.5 * var(--u)) solid rgba(20,22,40,.08); }
.tk-sel { border-top-color: transparent; border-radius: calc(12 * var(--u)); background: rgba(91,95,214,.07); }
.tk-sel + .tk-row { border-top-color: transparent; }
.tk-name { font-size: calc(15 * var(--u)); font-weight: 600; }
.tk-meta { margin-top: calc(3 * var(--u)); font-size: calc(12.5 * var(--u)); color: #626674; }
/* small rendered text runs slightly wide; keep single-line labels on one line */
.tk-name, .tk-meta, .tk-h, .tk-quota, .tk-label, .tk-cols span{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-zone { display: inline-block; margin-top: calc(7 * var(--u)); padding: calc(2 * var(--u)) calc(9 * var(--u)); border-radius: calc(999 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 600; color: #4A4EC4; background: rgba(91,95,214,.1); }
.tk-chip { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); justify-self: start; padding: calc(5 * var(--u)) calc(10 * var(--u)); border-radius: calc(999 * var(--u)); font-size: calc(10.5 * var(--u)); font-weight: 600; letter-spacing: calc(.4 * var(--u)); text-transform: uppercase; background: rgba(var(--c), .09); border: calc(.75 * var(--u)) solid rgba(var(--c), .24); }
.tk-chip i { width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: rgb(var(--c)); }
.tk-firm { --c: 26,158,92; } .tk-steady { --c: 102,112,132; } .tk-crater { --c: 217,75,61; } .tk-none { --c: 201,130,0; }
.tk-price { font-size: calc(18 * var(--u)); font-weight: 600; }
.tk-price small { display: block; margin-top: calc(2 * var(--u)); font-size: calc(11.5 * var(--u)); font-weight: 400; color: #626674; }
.tk-delta { font-size: calc(14 * var(--u)); font-weight: 600; }
.tk-up { color: #1A9E5C; } .tk-down { color: #C93A22; } .tk-flat { color: #626674; } .tk-indigo { color: #4A4EC4; }
.tk-spark { width: calc(136 * var(--u)); height: calc(36.3 * var(--u)); }
.tk-detail { padding: calc(24 * var(--u)); display: flex; flex-direction: column; gap: calc(22 * var(--u)); }
.tk-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(12 * var(--u)); }
.tk-big { display: flex; align-items: baseline; gap: calc(10 * var(--u)); }
.tk-big strong { font-size: calc(38 * var(--u)); font-weight: 700; letter-spacing: calc(-.5 * var(--u)); }
.tk-big span { font-size: calc(14 * var(--u)); font-weight: 600; }
.tk-chart svg { width: calc(326 * var(--u)); height: calc(210 * var(--u)); }
.tk-axis { display: flex; justify-content: space-between; margin-top: calc(6 * var(--u)); font-size: calc(11 * var(--u)); color: #626674; }
.tk-grid4 { display: grid; grid-template-columns: 1fr 1fr; gap: calc(14 * var(--u)) calc(16 * var(--u)); padding: calc(16 * var(--u)); border-radius: calc(12 * var(--u)); background: rgba(20,22,40,.035); }
.tk-grid4 span { display: block; margin-top: calc(3 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 600; }
.tk-actions { margin-top: auto; display: flex; gap: calc(8 * var(--u)); }


/* ==== end MacBook screen ==== */

.footer-mail { color: var(--cream); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; transition: text-decoration-color .2s; }
.footer-mail:hover { text-decoration-color: currentColor; }

/* Project intake: a short conversation set in type, ending in a brief ---------- */
.intake {
  position: relative; z-index: 1;
  padding-block: var(--chapter-space) calc(var(--chapter-space) * 1.25);   /* the same pause as every chapter; the river arrives in it */
  min-height: 100vh; min-height: 100svh;   /* the closing chapter owns its screen too */
  display: flex; flex-direction: column; justify-content: center;
}
.intake-head { max-width: 42rem; }
.intake-title { font-size: var(--fs-chapter); line-height: 1; letter-spacing: -.005em; text-wrap: balance; text-shadow: 0 2px 24px rgba(14, 23, 21, .75); }
.intake-body { max-width: 44rem; margin-top: var(--space-m); }
/* the one line under the heading: what the conversation does for the visitor */
.ichat-lede { max-width: 27em; margin-bottom: var(--space-l); font-size: var(--fs-lg); line-height: 1.4; letter-spacing: -.012em; color: var(--cream); opacity: .9; text-wrap: pretty; text-shadow: 0 1px 14px rgba(14, 23, 21, .7); }
.ichat-lede[hidden] { display: none; }

/* Conversation: questions large, answers quiet, no chat-window chrome */
.ichat-tools { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
.ichat-tools:has(> :not([hidden])) { margin-bottom: 20px; }
.ichat-models { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: rgba(242, 238, 228, .06); }
.ichat-models button {
  min-height: 28px; padding: 0 11px; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted); font: 500 var(--fs-xs) var(--font); cursor: pointer;
}
.ichat-models button[aria-pressed="true"] { background: rgba(242, 238, 228, .12); color: var(--cream); }
.ichat-restart { padding: 0; border: 0; background: none; color: var(--cream-2); font: 500 var(--fs-xs) var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: color .2s; }
.ichat-restart[hidden] { display: none; }
.ichat-restart:hover { color: var(--cream); }

.ichat-log { display: flex; flex-direction: column; gap: 24px; transition: opacity .7s var(--ease-out); }
.ichat-log:empty ~ .ichat-form { margin-top: 0; }
.imsg { display: grid; gap: 6px; animation: imsg-in .6s var(--ease-out) both; transition: opacity .5s; }
.imsg p { white-space: pre-wrap; overflow-wrap: anywhere; }
.imsg-ai p { max-width: 32em; font-size: var(--fs-lg); line-height: 1.42; letter-spacing: -.012em; color: var(--cream); text-wrap: pretty; text-shadow: 0 1px 14px rgba(14, 23, 21, .7); }
.imsg.is-waiting { opacity: .28; }
.imsg-typing { animation: none; }
.imsg-meta { font-size: var(--fs-xs); line-height: 1.3; color: var(--muted); }
@keyframes imsg-in { from { opacity: 0; translate: 0 10px; } }
.imsg-typing p { display: inline-flex; gap: 6px; padding: 4px 0 0; }
.imsg-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--cream-2); animation: typing 1.2s ease-in-out infinite; }
.imsg-typing i:nth-child(2) { animation-delay: .15s; } .imsg-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { opacity: .25; translate: 0 0; } 30% { opacity: 1; translate: 0 -3px; } }

.ichat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.ichat-chips:empty { display: none; }
.ichat-chips button {
  min-height: 38px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--rule-2); background: rgba(14, 23, 21, .35); color: var(--cream-2);
  font: 500 var(--fs-sm) var(--font); cursor: pointer;
  transition: border-color .2s, color .2s, background-color .2s;
}
.ichat-chips button:hover { border-color: var(--mint); color: var(--cream); background: rgba(169, 216, 186, .08); }

/* One contained field on the brief card's surface: a bare underline let the photo run through the words */
.ichat-form {
  display: flex; align-items: flex-end; gap: 12px;
  margin-top: 30px; padding: 10px 10px 10px 24px;
  border-radius: var(--radius-lg);
  background: rgba(18, 30, 27, .92);
  box-shadow: inset 0 0 0 1px var(--rule-2), 0 30px 60px -30px rgba(0, 0, 0, .8);
  transition: box-shadow .25s;
}
.ichat-form:focus-within { box-shadow: inset 0 0 0 1px var(--mint), 0 30px 60px -30px rgba(0, 0, 0, .8); }
.ichat-form[hidden] { display: none; }
.ichat-form textarea {
  flex: 1; min-width: 0; max-height: 200px; resize: none;
  padding: 7px 0; border: 0; outline: none; background: transparent;
  color: var(--cream); font: var(--fs-lg)/1.4 var(--font);
}
.ichat-form textarea::placeholder { color: var(--cream-2); opacity: .75; }
.ichat-send {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: var(--mint); color: var(--mint-ink); cursor: pointer;
  transition: background-color .2s, opacity .2s;
}
.ichat-send:hover { background: var(--mint-hi); }
.ichat-send svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ichat-send:disabled { opacity: .4; cursor: default; }

.ichat-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-top: 14px; }
.ichat-notice { margin-right: auto; font-size: var(--fs-xs); color: var(--muted); }
.ichat-notice a { color: var(--cream-2); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
.ichat-notice a:hover { color: var(--cream); }
.ichat-note { transition: color .3s; }
.ichat-note.is-alert { color: #E8A093; }
.ibrief-finish, .ichat-direct, .idirect-back {
  padding: 0; border: 0; background: none;
  color: var(--cream-2); font: 500 var(--fs-xs) var(--font);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.ibrief-finish[hidden], .ichat-direct[hidden], .idirect-back[hidden] { display: none; }
.ichat-direct:hover, .idirect-back:hover { color: var(--cream); }
.ichat-turnstile { margin-top: 14px; }
.ichat.is-done .ichat-log { opacity: .75; }

/* A direct message instead of the questions: the conversation steps aside, the same quiet fields take its place */
.intake-body.is-direct .ichat > :not(.idirect):not(.ichat-turnstile) { display: none; }
.idirect[hidden], .idirect-form[hidden] { display: none; }
.idirect-lede { max-width: 32em; font-size: var(--fs-lg); line-height: 1.42; letter-spacing: -.012em; color: var(--cream); text-wrap: pretty; text-shadow: 0 1px 14px rgba(14, 23, 21, .7); }
/* the fields sit on the same raised panel as the brief card: straight on the photo, their labels and lines crossed the bright sky */
.idirect-form, .idirect .ibrief-done {
  margin-top: var(--space-m); padding: var(--space-l);
  border: 0; border-radius: var(--radius-lg);
  background: var(--lake-800);
  box-shadow: inset 0 0 0 1px var(--rule), 0 40px 80px -40px rgba(0, 0, 0, .7);
}
.idirect .ichat-foot { margin-top: 18px; }
.ibrief-fields textarea {
  width: 100%; min-height: 6.5em; max-height: 50vh; padding: 8px 0; resize: none;
  border: 0; border-bottom: 1px solid rgba(242, 238, 228, .4); border-radius: 0; background: transparent;
  color: var(--cream); font: var(--fs-md)/1.5 var(--font);
  transition: border-color .2s;
}
.ibrief-fields textarea:focus { outline: none; border-color: var(--mint); box-shadow: 0 1px 0 var(--mint); }

/* The reveal: what they actually need, then the brief to send */
.ibrief {
  margin-top: var(--space-xl);
  padding: var(--space-l);
  border-radius: var(--radius-lg);
  background: var(--lake-800);
  box-shadow: inset 0 0 0 1px var(--rule), 0 40px 80px -40px rgba(0, 0, 0, .7);
  opacity: 0; translate: 0 28px;
  transition: opacity .9s var(--ease-out), translate .9s var(--ease-out);
  scroll-margin-top: 32px;
}
.ibrief.is-in { opacity: 1; translate: 0 0; }
.ibrief-title:focus, .ibrief-done:focus { outline: none; }   /* focus is moved here by the script, for screen readers; nothing to show */
.ibrief[hidden] { display: none; }
.ibrief-kicker { font-size: var(--fs-sm); font-weight: 500; color: var(--mint); }
.ibrief-title { margin-top: 8px; font-size: var(--fs-xl); font-weight: 500; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.ibrief-insight { max-width: 32em; margin-top: 20px; font-size: var(--fs-lg); line-height: 1.45; color: var(--cream); text-wrap: pretty; }
.ibrief-insight[hidden] { display: none; }
.ibrief-insight span { animation: word-in .8s var(--ease-out) both; }
@keyframes word-in { from { opacity: 0; filter: blur(6px); } }

.ibrief-sections { margin-top: 30px; border-top: 1px solid var(--rule); }
.ibrief-sections li { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.ibrief-label { padding-top: 3px; font-size: var(--fs-xs); color: var(--muted); }
.ibrief-text {
  width: 100%; resize: none; overflow: hidden;
  padding: 2px 0; border: 0; border-radius: 0; background: transparent;
  color: var(--cream-2); font: var(--fs-sm)/1.55 var(--font);
  transition: color .2s, box-shadow .2s;
}
.ibrief-text:hover { color: var(--cream); }
.ibrief-text:focus { outline: none; color: var(--cream); box-shadow: 0 1px 0 var(--mint); }
.ibrief-text::placeholder { color: rgba(163, 175, 169, .72); }

.ibrief-send { margin-top: 30px; }
.ibrief-send[hidden], .ibrief-done[hidden], .ibrief-offline[hidden], .ibrief-book[hidden] { display: none; }
.ibrief-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.ibrief-fields label { display: grid; gap: 4px; font-size: var(--fs-xs); color: var(--muted); }
.ibrief-fields em { font-style: normal; }
.ibrief-wide { grid-column: 1 / -1; }
.ibrief-fields input {
  width: 100%; min-height: 44px; padding: 8px 0;
  border: 0; border-bottom: 1px solid rgba(242, 238, 228, .4); border-radius: 0; background: transparent;
  color: var(--cream); font: var(--fs-md)/1.4 var(--font);
  transition: border-color .2s;
}
.ibrief-fields input:focus { outline: none; border-color: var(--mint); box-shadow: 0 1px 0 var(--mint); }
.ibrief-fields [aria-invalid="true"] { border-color: #E08A7B; }
.ibrief-error { min-height: 1.5em; margin: 14px 0 12px; font-size: var(--fs-xs); line-height: 1.5; color: #E8A093; }
.ibrief-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 4px; }
.ibrief-promise { font-size: var(--fs-sm); color: var(--cream-2); }
.ibrief-submit[disabled] { opacity: .6; cursor: progress; }

.ibrief-done { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--rule); }
.ibrief-done-title { font-size: var(--fs-lg); font-weight: 500; }
.ibrief-done-text { max-width: 34em; margin-top: 6px; color: var(--cream-2); }
.ibrief-done-note { margin-top: 10px; font-size: var(--fs-sm); color: var(--muted); }
.ibrief-book { margin-top: 20px; }
.ibrief-book:hover .icon { transform: translate(2px, -2px); }
.ibrief-offline { margin-top: 20px; font-size: var(--fs-sm); color: var(--cream-2); }
.ibrief-offline .btn { min-height: 40px; margin-top: 6px; padding-inline: 0; color: var(--cream); }

@media (max-width: 640px) {
  .ichat-form.is-opening textarea { min-height: calc(2.8em + 14px); }   /* two lines of the prompt, plus the field's own padding */
  .ibrief-sections li { grid-template-columns: 1fr; }
  .ibrief-fields { grid-template-columns: 1fr; }
  .ibrief-finish { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .imsg, .imsg-typing i, .ibrief-insight span { animation: none; }
  .ibrief { opacity: 1; translate: 0 0; transition: none; }
}

/* Footer ------------------------------------------------------------ */
.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: var(--space-xl) var(--space-l);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: end;
  gap: var(--space-m) var(--space-xl);
}
.footer-studio { display: flex; align-items: flex-end; gap: 22px; }
.footer-logo { width: 104px; height: auto; }
.footer-about { display: grid; gap: 4px; max-width: 29em; }
.footer-line { color: var(--cream-2); }
.footer-clock { color: var(--cream-2); font-variant-numeric: tabular-nums; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.footer-nav a { color: var(--cream); padding-block: 4px; transition: color .2s; }
.footer-nav a:hover { color: var(--mint); }
.footer-meta { display: grid; gap: 4px; text-align: right; }

/* Plain pages: privacy, not found ------------------------------------ */
.doc { padding-block: calc(var(--header-h) + clamp(64px, 12vh, 140px)) clamp(80px, 12vh, 160px); }
body:has(> main.doc) { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
body:has(> main.doc) > main { flex: 1 0 auto; }
.doc a[rel~="license"] { white-space: nowrap; }
.doc-short { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
.doc-inner { max-width: 40rem; }
.doc h1 { font-size: var(--fs-chapter); line-height: 1; letter-spacing: -.005em; text-wrap: balance; }
.doc-lede { margin-top: var(--space-m); font-size: var(--fs-lg); line-height: 1.4; color: var(--cream); text-wrap: pretty; }
.doc h2 { margin-top: 52px; font-size: var(--fs-lg); font-weight: 500; line-height: 1.25; letter-spacing: -.012em; }
.doc p { margin-top: 12px; color: var(--cream-2); }
.doc ul { display: grid; gap: 10px; margin-top: 16px; color: var(--cream-2); }
.doc ul li { position: relative; padding-left: 1.25em; }
.doc ul li::before { content: ""; position: absolute; left: 0; top: .8em; width: 7px; height: 1px; background: var(--muted); }
.doc strong { font-weight: 600; color: var(--cream); }
.doc article a, .doc-link { color: var(--cream); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; transition: text-decoration-color .2s; }
.doc article a:hover, .doc-link:hover { text-decoration-color: currentColor; }
.doc-meta { margin-top: 56px !important; font-size: var(--fs-xs); color: var(--muted) !important; }
.doc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 36px; }
.footer-nav a[aria-current="page"] { color: var(--mint); }

/* Case study pages ---------------------------------------------------
   The project's name and facts, one real dated capture, the numbers, then sections set as a narrow heading
   column beside the text. */
.case { padding-top: calc(var(--header-h) + clamp(56px, 10vh, 120px)); }
.case-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-xl) var(--space-2xl); align-items: end; }
.case-back { font-size: var(--fs-sm); }
.case-back a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; transition: color .2s; }
.case-back a:hover { color: var(--cream); }
.case-title { margin-top: var(--space-s); font-size: var(--fs-hero); line-height: .96; letter-spacing: -.01em; }
.case-lede { max-width: 25em; margin-top: var(--space-m); font-size: var(--fs-lg); line-height: 1.4; color: var(--cream); text-wrap: pretty; }
.case-head .case-facts { margin: 0; font-size: var(--fs-sm); }
.case-facts a { color: var(--cream); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; transition: text-decoration-color .2s; }
.case-facts a:hover { text-decoration-color: currentColor; }
.case-head .case-facts div:last-child, .case-credits div:last-child { border-bottom: 1px solid var(--rule); }

.case-shot { margin: var(--space-xl) 0 0; padding-bottom: var(--space-2xl); border-bottom: 1px solid var(--rule); }


.case-section {
  display: grid; grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); gap: var(--space-m) var(--space-2xl);
  padding-block: var(--space-2xl); border-bottom: 1px solid var(--rule);
}
.case-section h2 { font-size: var(--fs-xl); line-height: 1.1; letter-spacing: 0; text-wrap: balance; }
.case-body { max-width: 39rem; }
.case-body p { color: var(--cream-2); text-wrap: pretty; }
.case-body p + p { margin-top: 14px; }
.case-body p a { color: var(--cream); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; transition: text-decoration-color .2s; }
.case-body p a:hover { text-decoration-color: currentColor; }
.case-body > p:first-child { font-size: var(--fs-md); color: var(--cream); }
.case-body h3 { margin-top: 30px; font-size: var(--fs-md); font-weight: 500; line-height: 1.3; color: var(--cream); }
.case-body h3:first-child { margin-top: 0; }
.case-body h3 + p { margin-top: 6px; }
.case-phone { margin: 0; }
.case-phone img, .case-phone video { display: block; width: 100%; height: auto; border-radius: 30px; box-shadow: 0 0 0 1px var(--rule-2), 0 40px 80px -40px rgba(0, 0, 0, .8); }

/* Screen recordings */
.case-shot, .case-phone-motion, .ipad-screen { position: relative; }
.case-video { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: 0 0 0 1px var(--rule-2), 0 40px 80px -40px rgba(0, 0, 0, .8); background: #0d1210; }
.motion-toggle {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%;
  background: rgba(12, 18, 16, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--cream); cursor: pointer; opacity: 0; transition: opacity .25s, background-color .2s;
}
.motion-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.motion-toggle .i-play { fill: currentColor; stroke: none; }
.motion-toggle[data-state="playing"] .i-play, .motion-toggle[data-state="paused"] .i-pause { display: none; }
.motion-toggle:hover { background: rgba(12, 18, 16, .85); }
*:hover > .motion-toggle, .motion-toggle:focus-visible, .motion-toggle[data-state="paused"] { opacity: 1; }
@media (hover: none) { .motion-toggle { opacity: .85; } }
.case-phones { position: relative; }
.case-phones > .motion-toggle { right: 16px; bottom: 16px; }
/* the phone recording sits on a screen with a status bar, so the page never runs into the rounded corners */
.case-phone-motion { overflow: hidden; padding-bottom: 5%; border-radius: 34px; background: #0d1311; box-shadow: 0 0 0 1px var(--rule-2), 0 40px 80px -40px rgba(0, 0, 0, .8); }
.case-phone-motion video { border-radius: 0; box-shadow: none; }
.phone-bar { display: block; width: 100%; height: auto; }
.phone-bar text { font: 600 16px/1 -apple-system, "SF Pro Text", system-ui, sans-serif; letter-spacing: -.01em; fill: #eef1ef; }
.phone-bar .pb-island { fill: #000; }
.phone-bar .pb-icons { fill: #eef1ef; }
.phone-bar .pb-wifi { fill: none; stroke: #eef1ef; stroke-width: 2.3; stroke-linecap: round; }
.phone-bar .pb-batt { fill: none; stroke: rgba(238, 241, 239, .45); stroke-width: 1; }
.case-shot .motion-toggle { right: 0; bottom: calc(var(--space-2xl) - 48px); }   /* under the recording, never over it */

/* More screens from the product, after what was built */
.case-screens {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px);
  padding-bottom: var(--space-2xl); border-bottom: 1px solid var(--rule);
}
.case-phones {
  grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; gap: clamp(20px, 4.5vw, 72px);
  margin-top: clamp(8px, 1.5vw, 20px); padding: clamp(48px, 7vw, 104px) clamp(20px, 4vw, 56px);
  border-radius: var(--radius-lg);
  background: radial-gradient(120% 80% at 50% 0%, rgba(124, 196, 156, .10), rgba(124, 196, 156, 0) 62%), #0b1210;
  box-shadow: inset 0 0 0 1px var(--rule);
}
.case-phones .case-phone { flex: 0 1 300px; min-width: 0; }
.case-credits { margin: 0; font-size: var(--fs-sm); }
.case-credits div { grid-template-columns: 10.5rem minmax(0, 1fr); }

.case-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-m) var(--space-xl); padding-block: var(--space-2xl) calc(var(--space-2xl) * 1.5); }
.case-next-title { max-width: 14em; font-size: var(--fs-chapter); line-height: 1; letter-spacing: -.005em; text-wrap: balance; }

@media (max-width: 880px) {
  .case-head, .case-section { grid-template-columns: 1fr; }
  .case-screens { grid-template-columns: 1fr; }
}
@media (min-width: 641px) { .case-screens { display: none; } }
@media (max-width: 640px) {
  /* one recording per screen size: the browser on larger screens, the phone on phones */
  .case-shot { display: none; }
  .case-screens { padding-top: var(--space-xl); }
  .case-phones { margin-top: 0; padding: 40px 24px; }
  .case-phones .case-phone { flex-basis: 72%; }
}

/* The pricing desk screen draws itself in once, when it first comes into view (motion.js) */
@media (prefers-reduced-motion: no-preference) {
  .tk.is-armed .tk-row, .tk.is-armed .tk-detail { opacity: 0; }
  .tk.is-armed .tk-chart-line, .tk.is-armed .tk-spark-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .tk.is-armed .tk-chart-area, .tk.is-armed .tk-spark-area, .tk.is-armed .tk-chart-dot { opacity: 0; }
  .tk.is-live .tk-row { animation: tk-rise .7s var(--ease-out) forwards; }
  .tk.is-live .tk-row:nth-of-type(4) { animation-delay: .08s; }   /* rows follow the list head and column labels */
  .tk.is-live .tk-row:nth-of-type(5) { animation-delay: .16s; }
  .tk.is-live .tk-row:nth-of-type(6) { animation-delay: .24s; }
  .tk.is-live .tk-detail { animation: tk-rise .8s var(--ease-out) .2s forwards; }
  .tk.is-live .tk-spark-line { animation: tk-draw 1.1s var(--ease-out) .45s forwards; }
  .tk.is-live .tk-chart-line { animation: tk-draw 1.6s var(--ease-out) .6s forwards; }
  .tk.is-live .tk-spark-area, .tk.is-live .tk-chart-area { animation: tk-fade .9s ease 1.3s forwards; }
  .tk.is-live .tk-chart-dot { animation: tk-fade .4s ease 2.1s forwards; }
  @keyframes tk-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes tk-draw { to { stroke-dashoffset: 0; } }
  @keyframes tk-fade { to { opacity: 1; } }
}

/* Load sequence: one orchestrated moment --------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal, .ipad, .scene-lake img {
    animation-duration: 1s;
    animation-timing-function: var(--ease-out);
    animation-fill-mode: both;
  }
  .scene-lake img { animation-name: photo-in; animation-duration: 1.8s; }
  .reveal { animation-name: rise; }
  .reveal:nth-child(1) { animation-delay: .15s; }
  .reveal:nth-child(2) { animation-delay: .25s; }
  .reveal:nth-child(3) { animation-delay: .38s; }
  .reveal:nth-child(4) { animation-delay: .5s; }
  .hero-title.reveal { animation-name: lift; animation-delay: 0s; }   /* the page's main paint: visible from the first frame, only moving */
  .ipad { animation-name: settle; animation-duration: 1.4s; animation-delay: .45s; }

  @keyframes rise { from { opacity: 0; transform: translateY(14px); } }
  @keyframes lift { from { transform: translateY(10px); } }
  @keyframes photo-in { from { transform: scale(1.04); } }   /* no fade: the preloaded photo paints at once and settles */
  @keyframes settle { from { opacity: 0; translate: 0 50px; } }
}
/* Reduced motion: each moving thing gets a still version, rather than every transition being cut */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scene img { scale: none; }                     /* backgrounds still change, by fading only */
  .ipad { --s: 1; }                               /* already turned toward the viewer */
  .site-header.follows, .site-header.follows .header-inner { transition: none; }
  .btn-primary:active, .btn-primary:hover .icon, .ibrief-book:hover .icon, .featured-case-link:hover .icon { transform: none; }
}

/* Responsive -------------------------------------------------------- */
@media (max-width: 880px) {
  :root { --header-h: 72px; --chapter-space: clamp(88px, 11vh, 132px); }
  .featured { min-height: 0; }   /* stacked: a chapter no longer claims a full screen of mostly empty stage */

  .site-nav, .site-nav ul { gap: var(--space-m); }

  .scene-lake img { object-position: 70% 30%; }
  /* stacked layout: the words sit low, so the veil is only there. The upper half shows the point and the water clearly. */
  .scene-lake img { filter: saturate(.85) contrast(1.12) brightness(.86); }
  .scene-lake::before { opacity: .3; }
  .scene-lake::after {
    background:
      radial-gradient(70% 34% at 90% 0%, rgba(232, 160, 104, .22), transparent 70%),
      linear-gradient(180deg, rgba(14, 23, 21, .5) 0%, rgba(14, 23, 21, .08) 16%, rgba(14, 23, 21, .12) 32%, rgba(14, 23, 21, .74) 50%, rgba(14, 23, 21, .92) 100%);
  }
  .scene-bridge img { object-position: 64% 30%; }   /* on a tall screen, keep the tower and its sign in frame */
  .scene-bridge::after {
    background: linear-gradient(180deg, rgba(14, 23, 21, .72) 0%, rgba(14, 23, 21, .58) 40%, rgba(14, 23, 21, .66) 76%, rgba(14, 23, 21, .86) 100%);
  }
  .scene-stage {   /* stacked layout: the light sits behind the app window, lower on the screen */
    background:
      radial-gradient(90% 34% at 50% 62%, rgba(124, 196, 156, .13), transparent 72%),
      var(--lake-900);
  }

  .featured-inner { grid-template-columns: 1fr; gap: 0; }
  .device {
    justify-self: stretch;
    width: auto;
    margin: 44px 2% 0;
  }
  .ipad { transform: rotateX(calc(8deg - 5deg * var(--s, 0))) rotateY(calc(-12deg + 8deg * var(--s, 0))) rotateZ(calc(-3deg + 2deg * var(--s, 0))); }

  .featured-alt .featured-inner { grid-template-columns: 1fr; }
  .featured-alt .featured-copy { grid-column: auto; grid-row: auto; }
  .device-mac { grid-column: auto; grid-row: auto; justify-self: stretch; width: auto; margin: 44px 0 0; }

  .footer-inner { grid-template-columns: 1fr; justify-items: start; align-items: start; }
  .footer-studio { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer-meta { text-align: left; }
}

@media (max-width: 560px) {
  .brand { gap: 12px; }
  .brand-mark { height: 30px; }
  .brand-word { height: 12px; }
  .hero-actions .btn, .case-next .btn { width: 100%; justify-content: center; }
  .site-nav ul { display: none; }   /* phones: the wordmark and the button share the bar; the work is the next thing on the page */
  /* phones: the tower moves toward the right edge so the copy sits over open sky, under a slightly heavier veil */
  .scene-bridge img { object-position: 58% 30%; }
  .scene-bridge::after {
    background: linear-gradient(180deg, rgba(14, 23, 21, .8) 0%, rgba(14, 23, 21, .74) 40%, rgba(14, 23, 21, .78) 76%, rgba(14, 23, 21, .9) 100%);
  }

  /* Phones: a whole tablet or laptop screen shrinks past reading (about 3px text), so each project shows one panel
     of its screen at reading size instead: the live crossings card, and the event detail in its app window */
  .device, .device-mac { margin-inline: 0; perspective: none; }
  .device::after, .device-mac::after { display: none; }

  .ipad {
    padding: 0; border-radius: 14px; background: none; transform: none;
    box-shadow: 0 0 0 1px var(--rule-2), 0 28px 60px -28px rgba(0, 0, 0, .75);
  }
  .ipad::before, .ipad::after, .ipad-screen::after { display: none; }
  .ipad-screen { aspect-ratio: 568 / 620; border-radius: 14px; }
  /* the crop, in the capture's own 1289 x 900 points: 494 x 539 from (752, 128) */
  .ipad-screen img { position: absolute; left: -152.23%; top: -23.75%; width: 260.93%; height: auto; max-width: none; object-fit: fill; }
  .ipad-video, .device > .motion-toggle { display: none; }

  .mbp { perspective: none; }
  .mbp-lid {
    margin-inline: 0; padding: 0; transform: none; border-radius: 12px; background: none;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 28px 60px -28px rgba(0, 0, 0, .75);
  }
  .mbp-lid::before, .mbp-base, .mbp-screen::after { display: none; }
  .mbp-screen { aspect-ratio: 420 / 716; border-radius: 12px; }
  .tk { --u: calc(100cqi / 420); }
  .tk-body { grid-template-columns: minmax(0, 1fr); }
  .tk-col, .tk-bar-right { display: none; }
  .tk-seg { left: auto; right: calc(22 * var(--u)); transform: none; }
  .tk-seg span { padding-inline: calc(12 * var(--u)); }
}


/* Screen shapes ------------------------------------------------------
   The layout above is drawn for portrait phones and for laptop and desktop screens. These rules keep it composed on
   the shapes in between: phones held sideways, tall portrait screens, and large monitors. */

/* Phones on their side (and other short screens): a tighter first screen, and chapters side by side, as on a
   laptop, instead of stacked into columns three screens long */
@media (orientation: landscape) and (max-height: 540px) {
  :root { --chapter-space: 64px; }
  .hero { padding-top: calc(var(--header-h) + 12px); padding-bottom: 28px; }
  .hero-lede { max-width: 40em; margin-top: var(--space-s); font-size: var(--fs-md); }
  .hero-actions { margin-top: var(--space-m); }
  .hero-actions .btn { width: auto; }

  .featured-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-l); }
  .featured-alt .featured-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .featured-alt .featured-copy { grid-column: 2; grid-row: 1; }
  .featured-pitch { font-size: var(--fs-md); }
  .device { justify-self: end; width: min(100%, (100svh - var(--header-h) - 5rem) * 1.4); margin: 0; }
  .device-mac { grid-column: 1; grid-row: 1; justify-self: start; width: min(100%, (100svh - var(--header-h) - 5rem) * 1.63); margin: 0; }
}

/* Tall portrait screens wider than a phone (a portrait iPad Pro, a monitor turned on its side, a tall window):
   copy above the device, as on a phone, so the device can use the full width instead of shrinking into a column */
@media (orientation: portrait) and (min-width: 881px) and (max-width: 1440px) {
  .featured-inner, .featured-alt .featured-inner { grid-template-columns: 1fr; gap: 0; }
  .featured-alt .featured-copy { grid-column: auto; grid-row: auto; }
  .featured-copy { max-width: 40rem; }
  .device, .device-mac { grid-column: auto; grid-row: auto; justify-self: center; margin: 56px 0 0; }
  .device { width: min(100%, (100svh - var(--header-h) - 7.5rem) * 1.4); }
  .device-mac { width: min(100%, (100svh - var(--header-h) - 7.5rem) * 1.63); }
}

/* Touch screens: every link a finger can hit comfortably (44px), without changing how anything looks */
@media (pointer: coarse) {
  .brand { padding-block: 7px; margin-block: -7px; }
  .featured-case-link { padding-block: 13px; margin-block: -13px; }
  .footer-nav a { padding-block: 11px; }
  .ichat-direct, .idirect-back { padding-block: 13px; margin-block: -13px; }
  .ichat-notice a { display: inline-block; padding-block: 13px; margin-block: -13px; }
  .footer-mail { display: inline-block; padding-block: 13px; margin-block: -13px; }
  .featured-case-more { padding-block: 11px; margin-bottom: -11px; }
  .case-facts a, .case-back a { display: inline-block; padding-block: 13px; margin-block: -13px; }
}

/* Large monitors: past 1680px wide the whole composition (type, spacing and the content column, all set in rem)
   scales with the screen, up to 1.375 times, instead of stopping at laptop size and floating small on a big canvas */
@media (min-width: 1680px) {
  html { font-size: clamp(100%, 0.9524vw, 137.5%); }
  :root { --header-h: 5.25rem; }
  .brand-mark { height: 2.25rem; }
  .brand-word { height: 0.875rem; }
}