/* ============================================================
   BREWER — portfolio site
   Design system modeled on a dark, warm, editorial aesthetic:
   near-black warm bg, cream type, sans display / serif body.
   ============================================================ */

/* ---------- self-hosted brand fonts ---------- */

@font-face {
  font-family: "Degular Display";
  src: url("../fonts/DegularDisplay-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Degular Display";
  src: url("../fonts/DegularDisplay-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Degular";
  src: url("../fonts/Degular-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Degular";
  src: url("../fonts/Degular-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Degular";
  src: url("../fonts/Degular-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "P22 Mackinac Pro";
  src: url("../fonts/Mackinac-Book.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "P22 Mackinac Pro";
  src: url("../fonts/Mackinac-BookItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "P22 Mackinac Pro";
  src: url("../fonts/Mackinac-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "P22 Mackinac Pro";
  src: url("../fonts/Mackinac-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #1e1c19;
  --cream: #f1ece3;
  --cream-dim: rgba(241, 236, 227, 0.62);
  --card: #292622;
  --card-2: #33302b;
  --placeholder: #3b3833;
  --placeholder-2: #4a463f;
  --orange: #e8531c;
  --blurple: #4a4de6;
  --yellow: #f5b301;
  --lavender: #d9ccfb;
  --green: #1b9e57;
  --maroon: #5e1e10;
  --ink: #1e1c19;

  --sans: "Degular", "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --sans-display: "Degular Display", "Degular", "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --serif: "P22 Mackinac Pro", "Fraunces", Georgia, serif;

  --radius: 24px;
  --radius-sm: 16px;
  --gutter: clamp(20px, 4vw, 48px);
  --logo-gutter: clamp(0px, 8vw, 130px);
  --page-edge: clamp(30px, 3.2vw, 62px);
  /* Minimum left inset that keeps content clear of the fixed bottom-left
     menu pill (page-edge + pill width + gap) while that pill is visible. */
  --rail-safe: 120px;
  /* Desktop home content clears the fixed logo/menu rail. */
  --home-rail: clamp(11.5rem, 14vw, 15rem);
  --content-max: 1560px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--serif);
  font-size: 18.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--orange); color: var(--cream); }

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4, .sans {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.02;
}

p a {
  color: var(--cream);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: opacity 0.2s;
}
p a:hover { opacity: 0.7; }

/* ---------- layout scaffolding ---------- */

.shell {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 1.8vw, 28px) 0 var(--gutter);
}

.main {
  /* never let content slide under the fixed bottom-left menu pill */
  padding-left: max(var(--logo-gutter), var(--rail-safe));
}

/* Homepage: one content rail clears the fixed logo + menu — no overlap */
body.home .main {
  padding-left: var(--home-rail);
  padding-right: 0;
}
body.home .shell {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0 clamp(14px, 1.4vw, 22px) 0 0;
}
body.home .hero {
  /* Headline breaks out of the content rail, flush with the fixed
     logo / Menu pill at the page edge */
  margin-left: calc(var(--page-edge) - var(--home-rail));
}
body.home .testimonial-section {
  /* Already inside .main rail; keep flush to that column */
  margin-left: 0;
  width: 100%;
}

.section { margin: clamp(90px, 12vw, 190px) 0; }

.eyebrow {
  font-family: "Space Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

.h-display {
  font-family: var(--sans-display);
  font-size: clamp(44px, 8.6vw, 128px);
  line-height: 0.99;
  letter-spacing: -0.02em;
}

.h-section {
  font-family: var(--sans-display);
  font-size: clamp(38px, 5.6vw, 84px);
  line-height: 1.0;
  letter-spacing: -0.02em;
}

.h-sub {
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.08;
}

.body-copy {
  font-size: clamp(17px, 1.35vw, 19.5px);
  line-height: 1.62;
  max-width: 72ch;
}
.body-copy + .body-copy { margin-top: 1.4em; }
.body-copy strong { font-weight: 600; }

/* ---------- fixed chrome: logo + menu ---------- */

.site-logo {
  --logo-height: 44px;
  position: fixed;
  top: 34px;
  left: var(--page-edge);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: calc(var(--logo-height) * 0.3);
  max-width: calc(100vw - (var(--page-edge) * 2));
  text-decoration: none;
  color: var(--cream);
  transition:
    opacity 0.45s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-logo.is-scrolled {
  opacity: 0;
  transform: translateY(-24px);
  pointer-events: none;
}

/* brand mark: mainlogoicon.png used as a mask so it takes currentColor anywhere */
.logo-squircle {
  width: calc(var(--logo-height) * 0.7545);
  height: var(--logo-height);
  flex: 0 0 auto;
  display: block;
  background-color: currentColor;
  -webkit-mask: url("../images/mainlogoicon.png") center / contain no-repeat;
  mask: url("../images/mainlogoicon.png") center / contain no-repeat;
  color: var(--cream);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.site-logo:hover .logo-squircle { transform: rotate(-8deg) scale(1.05); }

.logo-wordmark {
  font-family: var(--sans);
  font-weight: 600;
  /* The reference lockup uses a 1.46:1 type-size-to-mark-height ratio. */
  font-size: calc(var(--logo-height) * 1.4615);
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  min-width: 0;
  opacity: 0;
  transform: none;
  transition: opacity 0.4s;
  pointer-events: none;
}
.logo-wordmark.visible {
  opacity: 1;
  pointer-events: auto;
}

/* menu pill */
.menu-btn {
  position: fixed;
  bottom: 34px;
  left: var(--page-edge);
  z-index: 80;
  border: 0;
  cursor: pointer;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 17px;
  padding: 16px 28px;
  border-radius: 0.6em; /* rounded rect, matches the dock buttons */
  transition: transform 0.25s, opacity 0.3s;
}
.menu-btn:hover { transform: scale(1.06); }
/* on open: drift right as the dock sweeps in behind, handing off to Close */
body.menu-open .menu-btn { opacity: 0; transform: translateX(16px); pointer-events: none; }
/* stay hidden while the close sweep plays; fade back once it finishes */
body.menu-closing .menu-btn { opacity: 0; pointer-events: none; }
.menu-btn.near-footer {
  opacity: 0;
  pointer-events: none;
}

/* mobile bottom chrome bar — shown ≤620px, replaces the standalone pill */
.menu-bar {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: space-between;
  background: var(--cream);
  border-radius: 999px;
  padding: 9px 10px 9px 20px;
  transition: opacity 0.3s, transform 0.25s;
}
.menu-bar-logo {
  display: block;
  width: 36px;
  height: 36px;
  background-color: currentColor;
  -webkit-mask: url("../images/mainlogoicon.png") center / contain no-repeat;
  mask: url("../images/mainlogoicon.png") center / contain no-repeat;
  color: var(--ink);
}
.menu-bar .menu-btn {
  position: static;
  background: var(--ink);
  color: var(--cream);
  font-size: 16px;
  padding: 13px 28px;
  border-radius: 999px; /* stays a full pill inside the bar */
}
body.menu-open .menu-bar,
.menu-bar.near-footer {
  opacity: 0;
  pointer-events: none;
}

/* menu dock — rounded-rectangle buttons, bottom-left, touching on desktop */
.menu-dock {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 90;
  padding: 34px var(--page-edge); /* matches .menu-btn's bottom/left so Close lands where Menu was */
  display: flex;
  align-items: flex-end; /* bottom-justify, so the Menu-sized Close sits on the baseline */
  gap: 0;
  column-gap: 0;
  max-width: 100%;
  transform: translateY(130%);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
body.menu-open .menu-dock { transform: translateY(0); }

.menu-dock a,
.menu-dock button {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  border: 0;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(24px, 2.3vw, 38px);
  letter-spacing: -0.01em;
  height: clamp(70px, 6.6vw, 98px);
  padding: 0 clamp(30px, 3vw, 56px);
  border-radius: 0.7em; /* rounded rectangle, not a pill */
  /* intro: nudged left — clears left-to-right on open */
  opacity: 0;
  transform: translateX(-26px);
  transition:
    color 0.3s ease,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.45s ease,
    border-radius 0.8s cubic-bezier(0.65, 0, 0.35, 1) var(--rd, 0s);
}
/* cream background that slides up from the bottom on hover (behind the label) */
.menu-dock a::before,
.menu-dock button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cream);
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.menu-dock a:hover::before,
.menu-dock button:hover::before { transform: translateY(0); }

/* corner-radius morph on hover, staggered across the row */
.menu-dock a:hover,
.menu-dock button:hover { border-radius: 1em; }
.menu-dock > :nth-child(1) { --rd: 0s; }
.menu-dock > :nth-child(2) { --rd: 0.1s; }
.menu-dock > :nth-child(3) { --rd: 0.2s; }
.menu-dock > :nth-child(4) { --rd: 0.3s; }
.menu-dock > :nth-child(5) { --rd: 0.4s; }

/* colored buttons */
.menu-dock a:nth-child(1) { background: var(--blurple); color: var(--cream); }
.menu-dock a:nth-child(2) { background: var(--yellow); color: var(--ink); }
.menu-dock a:nth-child(3) { background: var(--orange); color: var(--ink); }
.menu-dock a:nth-child(4) { background: var(--green); color: var(--cream); }
.menu-dock .menu-close { background: var(--cream); color: var(--ink); }

/* Close: twin of the Menu pill, bottom-aligned via the dock's flex-end */
.menu-dock .menu-close {
  height: auto;
  padding: 16px 28px;
  font-size: 17px;
  border-radius: 0.6em;
}

/* hover: text goes dark on the cream fill (must beat the colored-button rules) */
.menu-dock a:nth-child(1):hover,
.menu-dock a:nth-child(2):hover,
.menu-dock a:nth-child(3):hover,
.menu-dock a:nth-child(4):hover,
.menu-dock button:hover { color: var(--ink); }

body.menu-open .menu-dock a,
body.menu-open .menu-dock button {
  opacity: 1;
  transform: translateX(0);
  transition:
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s),
    opacity 0.5s ease var(--d, 0s),
    color 0.3s ease,
    border-radius 0.8s cubic-bezier(0.65, 0, 0.35, 1) var(--rd, 0s);
}

/* closing: dock holds position while the pills sweep back out (reverse
   stagger via --dout, set in JS), then the dock drops once the class clears */
body.menu-closing .menu-dock {
  transform: translateY(0);
  pointer-events: none;
}
body.menu-closing .menu-dock a,
body.menu-closing .menu-dock button {
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) var(--dout, 0s),
    opacity 0.4s ease var(--dout, 0s);
}

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

.hero .h-display {
  max-width: none;
  font-size: clamp(48px, 11.2vw, 240px);
  line-height: 0.91;
  letter-spacing: -0.035em;
}

/* Give animated letterforms room for descenders and wide terminals. */
.hero .split .word {
  padding: 0 0.035em 0.14em;
  margin: 0 -0.035em -0.14em;
}

.hero {
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 140px;
  padding-bottom: clamp(32px, 5vh, 64px);
  /* hero headline breaks out of the logo gutter, flush with the page edge */
  margin-left: calc(-1 * var(--logo-gutter));
}

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

.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 18px;
  text-decoration: none;
  padding: 16px 32px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  transition: transform 0.22s;
}
.pill-btn:hover { transform: scale(1.05); }
.pill-btn.dark { background: var(--ink); color: var(--cream); }
.pill-btn.blurple { background: var(--blurple); color: var(--cream); }
.pill-btn.maroon { background: var(--maroon); color: var(--cream); }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(20px, 2vw, 28px);
  text-decoration: none;
  color: var(--cream);
}
.arrow-link .arr { transition: transform 0.25s; }
.arrow-link:hover .arr { transform: translateX(8px); }

/* ---------- project tiles ---------- */

.project-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 32px);
}

.project-card { text-decoration: none; color: var(--cream); display: block; }

.tile {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--placeholder) center / cover no-repeat;
}
/* Cap featured work cards at four-fifths of the viewport height on desktop
   so a wide 16/10 tile never runs taller than the window. width: 100% pins
   the width so the max-height doesn't transfer through the aspect-ratio
   and shrink the card — the image just crops taller instead. */
.project-stack .tile { width: 100%; max-height: 80vh; }
.tile .tile-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.project-card:hover .tile .tile-img { transform: scale(1.02); }

/* cream caption bar — full-width, flush to the tile's bottom edge; slides up on
   hover. Rounded top corners reveal the image behind; bottom corners match the
   tile so the bar tucks cleanly into the card. */
.tile-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--cream);
  color: var(--ink);
  border-radius: clamp(22px, 2vw, 30px) clamp(22px, 2vw, 30px) var(--radius) var(--radius);
  padding: clamp(24px, 2.1vw, 42px) clamp(28px, 3vw, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 54px);
  text-align: left;
  opacity: 0;
  transform: translateY(100%);
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.4s ease;
}
.project-card:hover .tile-caption,
.project-card:focus-visible .tile-caption {
  opacity: 1;
  transform: translateY(0);
}
/* no hover on touch devices — captions must be visible or the tiles are anonymous */
@media (hover: none), (max-width: 980px) {
  .tile-caption {
    opacity: 1;
    transform: translateY(0);
  }
}
.tile-caption h3 {
  font-size: clamp(28px, 2.05vw, 40px);
  line-height: 0.95;
  margin-bottom: clamp(8px, 0.7vw, 14px);
}
.tile-caption p {
  font-family: var(--serif);
  font-size: clamp(16px, 1.02vw, 20px);
  line-height: 1.25;
  color: rgba(30, 28, 25, 0.75);
  max-width: 72ch;
}
.tile-caption .arr {
  display: block;
  flex: 0 0 auto;
  width: clamp(40px, 2.8vw, 56px);
  color: var(--ink);
  transition: transform 0.25s;
}
.tile-caption .arr svg { width: 100%; height: auto; display: block; }
.project-card:hover .tile-caption .arr { transform: translateX(8px); }

/* see all work row */
.see-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: clamp(44px, 6vw, 90px);
}
.see-all h2 {
  font-family: var(--sans-display);
  font-size: clamp(30px, 3.6vw, 52px);
  letter-spacing: -0.02em;
}
.pill-arrow {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: var(--orange);
  border-radius: 999px;
  width: clamp(84px, 8.5vw, 124px);
  height: clamp(46px, 4.6vw, 60px);
  transition: transform 0.25s;
}
.pill-arrow:hover { transform: scale(1.07); }
.pill-arrow svg { width: 44%; }

/* variant placeholder tints so tiles feel distinct while staying gray */
.tile.t1 { background: linear-gradient(150deg, #3d3833 0%, #4d453c 100%); }
.tile.t2 { background: linear-gradient(150deg, #35322f 0%, #454039 100%); }
.tile.t3 { background: linear-gradient(150deg, #403a32 0%, #332f2b 100%); }
.tile.t4 { background: linear-gradient(150deg, #383634 0%, #4a4644 100%); }
.tile.t5 { background: linear-gradient(150deg, #3a3531 0%, #2e2b28 100%); }
.tile.t6 { background: linear-gradient(150deg, #423d36 0%, #36322d 100%); }
.ms-work-tile { background: #dad9d4; color: #1b2544; }
.ms-work-tile::before { content: none; }
.ms-work-tile .tile-img { z-index: 0; object-position: center; }

/* ---------- promo card (year in review) ---------- */

.promo-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  padding: clamp(22px, 2.8vw, 44px) clamp(24px, 3.4vw, 56px);
  min-height: clamp(180px, 22vw, 300px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background:
    radial-gradient(120% 170% at 10% 15%, rgba(140, 168, 242, 0.95), transparent 58%),
    radial-gradient(130% 170% at 88% 10%, rgba(244, 168, 122, 0.95), transparent 60%),
    radial-gradient(120% 160% at 55% 95%, rgba(236, 148, 196, 0.9), transparent 60%),
    linear-gradient(115deg, #aebff2, #e6b6d6 45%, #f3b492);
  background-size: 160% 160%;
  animation: gradientShift 11s ease-in-out infinite alternate;
  color: var(--ink);
}
@keyframes gradientShift {
  from { background-position: 0% 0%; }
  to { background-position: 100% 100%; }
}
.promo-card .promo-label {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(16px, 1.6vw, 22px);
  white-space: nowrap;
}
.promo-card .year {
  font-family: var(--sans-display);
  font-weight: 600;
  font-size: clamp(72px, 12.5vw, 190px);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: #23253d;
  text-shadow: 0 0 28px rgba(35, 37, 61, 0.28);
}

/* ---------- about teaser ---------- */

.about-teaser {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 3vw, 48px);
  /* Trust-style: cream card sits vertically centered against the
     slightly taller photo */
  align-items: center;
}

.photo-ph {
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--placeholder-2), var(--placeholder));
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
/* home teaser photo: generously rounded near-square, a touch taller
   than the cream card beside it */
.about-teaser .photo-ph {
  aspect-ratio: 6 / 7;
  border-radius: clamp(48px, 11vw, 170px);
}
.photo-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}
.photo-ph.wide { aspect-ratio: 4 / 3; }
.photo-ph .ph-label {
  font-family: "Space Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(241, 236, 227, 0.3);
  text-align: center;
  padding: 0 20px;
}

/* cream about-teaser card */
.teaser-card {
  background: var(--cream);
  color: var(--ink);
  border-radius: var(--radius);
  padding: clamp(30px, 4.4vw, 70px);
  /* content vertically centered within the stretched card (Trust-style) */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.teaser-card h2 {
  font-family: var(--sans-display);
  font-weight: 600;
  font-size: clamp(40px, 4.8vw, 76px);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: clamp(22px, 2.4vw, 34px);
}
.teaser-card .body-copy {
  color: rgba(30, 28, 25, 0.85);
}
.teaser-card .arrow-link {
  color: var(--ink);
  font-size: 20px;
  margin-top: clamp(30px, 3vw, 44px);
}

/* ---------- marquee link ---------- */

.marquee-link {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-decoration: none;
  color: var(--cream);
  margin-top: 36px;
}
.marquee-link .track {
  display: inline-flex;
  gap: 64px;
  animation: marquee 14s linear infinite;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 38px);
}
.marquee-link:hover .track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- testimonials ---------- */

.testimonial-section {
  background: var(--bg);
  margin-left: 0;
  padding: 10rem 0 5rem;
  overflow: hidden;
}

.testimonial-container {
  width: 100%;
}

.testimonials-wrapper {
  overflow: hidden;
  width: 100%;
  cursor: grab;
  touch-action: manipulation;
}

.testimonials-wrapper.is-dragging {
  cursor: grabbing;
}

.testimonials-track {
  display: flex;
  flex-flow: row;
  align-items: stretch;
  will-change: transform;
}

.testimonial-card {
  flex: none;
  width: 96%;
  min-height: clamp(420px, 56vh, 680px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 5em;
  padding: 8vw 4rem;
  font-size: clamp(1.7rem, 1.45rem + 0.35vw, 1.9rem);
  user-select: none;
  -webkit-user-select: none;
}

.testimonial-card.active {
  border-radius: 1.25rem;
}

.testimonial-card.card-1 {
  background: #3b66ff;
  color: #f1ece3;
}

.testimonial-card.card-2 {
  background: #ffb900;
  color: #1e1c19;
}

.testimonial-card.card-3 {
  background: #009456;
  color: #f1ece3;
}

.testimonial-quote {
  font-family: var(--serif);
  font-size: inherit;
  line-height: 1.2;
  font-weight: 500;
  max-width: 40ch;
  margin: 0 auto 1.5em;
}

.testimonial-attribution {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 500;
  font-size: inherit;
  line-height: 1.2;
  max-width: 40ch;
  margin: 0 auto;
}

.testimonial-attribution a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.25s ease;
}

.testimonial-attribution a:hover {
  text-decoration-color: #ffb900;
}

@media (max-width: 900px) {
  .testimonial-section {
    margin-left: 0;
    padding-top: 5rem;
  }

  .testimonial-card {
    padding: 6rem 4rem;
    font-size: 1.5rem;
    min-height: clamp(360px, 50vh, 560px);
  }

  .testimonial-quote,
  .testimonial-attribution {
    font-size: inherit;
  }
}

@media (max-width: 620px) {
  .testimonial-section {
    margin-left: 0;
  }

  .testimonials-track {
    margin-left: 1rem;
  }

  .testimonial-card {
    width: 93%;
    padding: 6rem 3rem;
    font-size: 1.3rem;
    min-height: clamp(320px, 48vh, 520px);
  }

  .testimonial-quote,
  .testimonial-attribution {
    font-size: inherit;
  }
}

@media (max-width: 400px) {
  .testimonial-card {
    padding: 6rem 1rem;
    font-size: 1rem;
  }

  .testimonial-quote,
  .testimonial-attribution {
    font-size: inherit;
  }
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-card {
    transition: none;
  }
}

/* ---------- capabilities ---------- */

.capabilities-section {
  max-width: 90rem;
}

.capabilities-section .eyebrow {
  display: block;
  margin-bottom: 1rem;
}

.caps-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 56px);
  margin-top: 0;
  max-width: 90rem;
}

.caps-grid h3 {
  font-family: var(--sans);
  font-size: clamp(1.7rem, 1.45rem + 0.35vw, 1.9rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  margin-bottom: 0.4em;
}

.caps-grid ul { list-style: none; }

.caps-grid li {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.05rem + 0.3vw, 1.5rem);
  line-height: 1.5;
  padding: 0;
  color: var(--cream-dim);
  transition: color 0.25s;
}

.caps-grid li:hover { color: var(--cream); }

.caps-outro {
  margin-top: 0;
  padding-top: 3rem;
  padding-bottom: 2rem;
  max-width: 74ch;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1rem + 0.2vw, 1.25rem);
  line-height: 1.5;
  color: var(--cream-dim);
}

/* ---------- big CTA ---------- */

.big-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 64px);
  flex-wrap: nowrap;
  margin-top: 0;
}

.big-cta h2 {
  font-family: var(--sans-display);
  font-size: clamp(4rem, 2.5rem + 3.5vw, 6rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-top: -0.05em;
}

.cta-pill {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  width: clamp(140px, 14vw, 220px);
  height: clamp(64px, 7vw, 100px);
  border-radius: 999px;
  background: #3b66ff;
  display: grid;
  place-items: center;
  text-decoration: none;
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}
.cta-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--cream);
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.cta-pill:hover {
  transform: scale(1.06);
  border-radius: 1.15em;
}
.cta-pill:hover::before {
  transform: translateY(0);
}
.cta-pill svg {
  position: relative;
  z-index: 1;
  width: 42%;
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.3s ease;
}
.cta-pill svg path {
  transition: stroke 0.3s ease;
}
.cta-pill:hover svg {
  transform: translateX(8px);
}
.cta-pill:hover svg path {
  stroke: var(--ink);
}

@media (max-width: 900px) {
  .capabilities-section .eyebrow {
    margin-bottom: 3rem;
  }
}

@media (max-width: 620px) {
  .big-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .big-cta h2 {
    font-size: clamp(2rem, 9vw, 3rem);
    text-align: center;
    padding-right: 0;
  }

  .cta-pill {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }
}

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

.press-banner {
  background: var(--blurple);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 40px) clamp(28px, 4vw, 52px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.press-banner h3 { font-size: clamp(24px, 2.6vw, 38px); margin-bottom: 8px; }
.press-banner p { font-size: 16px; }
.press-badge {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.06em;
  padding: 18px 26px;
  border-radius: 12px;
  text-transform: uppercase;
}

.press-cards {
  background: var(--cream);
  color: var(--ink);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 56px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
}
.press-card .press-thumb {
  border-radius: var(--radius-sm);
  aspect-ratio: 16 / 9;
  background: linear-gradient(150deg, #d9d2c4, #c4bcab);
  display: grid;
  place-items: center;
  margin-bottom: 24px;
}
.press-card .press-thumb span {
  font-family: "Space Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(30, 28, 25, 0.4);
}
.press-card h3 { font-size: clamp(24px, 2.4vw, 34px); margin-bottom: 14px; }
.press-card p { font-size: 16.5px; margin-bottom: 20px; }
.press-card .arrow-link { color: var(--ink); font-size: 20px; }

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

.site-footer {
  --footer-shift: clamp(0px, 4.35vw, 72px);
  width: calc(100vw - 2px);
  position: relative;
  margin-left: calc(50% - 50vw - var(--footer-shift));
  margin-top: clamp(100px, 14vw, 210px);
  background: #ffbd00;
  color: var(--cream);
}

.site-footer .reveal { opacity: 1; transform: none; }
body.blog .site-footer { --footer-shift: 0px; }

.footer-panel {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 0 0 clamp(34px, 4vw, 64px) clamp(34px, 4vw, 64px);
  background: var(--bg);
  padding: clamp(72px, 8vw, 126px) max(var(--gutter), calc((100vw - var(--content-max)) / 2 + var(--gutter))) clamp(56px, 7vw, 108px);
}

.footer-cta {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(280px, 4fr);
  align-items: center;
  gap: clamp(36px, 7vw, 120px);
  max-width: var(--content-max);
  margin: 0 auto;
}
.footer-cta h2 {
  font-family: var(--sans-display);
  font-size: clamp(42px, 5.7vw, 88px);
  letter-spacing: 0;
  max-width: 16ch;
  line-height: 0.98;
}
.footer-cta .pill-btn {
  width: 100%;
  justify-content: center;
  font-size: clamp(20px, 2vw, 30px);
  padding: clamp(20px, 2.3vw, 32px) clamp(28px, 4vw, 64px);
}

.footer-brand {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 48px);
  max-width: var(--content-max);
  margin: clamp(76px, 10vw, 158px) auto 0;
}
/* script "Brewer" wordmark image (images/brewer-script.png, 1326x488) */
.giant-wordmark {
  display: block;
  width: clamp(330px, 68vw, 1100px);
  height: auto;
}
.footer-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding-bottom: 4px;
}
.socials {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.socials a {
  width: clamp(48px, 4.6vw, 62px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.2s;
}
.socials a:hover { transform: scale(1.1); }
.socials a svg {
  width: 46%;
  height: 46%;
  display: block;
}
.socials .s-top {
  background: var(--lavender);
  color: var(--ink);
}
.socials .s-top svg { width: 44%; height: 44%; }
.socials .s-dribbble {
  background: var(--orange);
  color: var(--cream);
}
.socials .s-instagram {
  background: var(--yellow);
  color: var(--ink);
}
.socials .s-linkedin {
  background: #3b66ff;
  color: var(--cream);
}
.socials .s-linkedin svg { width: 52%; height: 52%; }
.footer-legal {
  min-height: clamp(92px, 9vw, 126px);
  display: grid;
  place-items: center;
  padding: 24px max(var(--gutter), calc((100vw - var(--content-max)) / 2 + var(--gutter)));
  color: var(--ink);
}
.fine-print {
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
  font-family: "Space Mono", monospace;
  font-size: clamp(10px, 0.85vw, 13px);
  line-height: 1.55;
  letter-spacing: 0.02em;
}

/* ---------- about page ---------- */

.about-hero {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  min-height: 88vh;
  padding-top: 130px;
}

/* Trust-style mission statement: big sans copy spanning the full shell */
.mission {
  font-family: var(--sans-display);
  font-weight: 500;
  font-size: clamp(30px, 4.4vw, 64px);
  line-height: 1.14;
  letter-spacing: -0.015em;
}

.about-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.6vw, 40px);
  margin-top: clamp(40px, 5vw, 72px);
}

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

.contact-hero {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  padding-top: 150px;
}

.form-card {
  background: var(--cream);
  color: var(--ink);
  border-radius: var(--radius);
  padding: clamp(32px, 4vw, 56px);
}
.form-card .step {
  font-family: var(--sans);
  font-size: 15px;
  color: rgba(30, 28, 25, 0.55);
  margin-bottom: 10px;
}
.form-card h3 { font-size: clamp(24px, 2.4vw, 32px); margin-bottom: 34px; }
.form-card label {
  display: block;
  font-family: var(--sans);
  font-size: 14px;
  color: rgba(30, 28, 25, 0.6);
  margin-bottom: 6px;
}
.form-card input,
.form-card textarea {
  width: 100%;
  border: 0;
  border-bottom: 1.5px solid rgba(30, 28, 25, 0.3);
  background: transparent;
  font-family: var(--serif);
  font-size: 24px;
  padding: 6px 0 10px;
  margin-bottom: 30px;
  outline: none;
  color: var(--ink);
  border-radius: 0;
}
.form-card input:focus,
.form-card textarea:focus { border-bottom-color: var(--maroon); }
.form-card input::placeholder { color: rgba(30, 28, 25, 0.28); }
.form-card .ok-row { display: flex; align-items: center; gap: 16px; }
.form-card .ok-btn {
  background: var(--maroon);
  color: var(--cream);
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 18px;
  padding: 12px 34px;
  border-radius: 10px;
  transition: transform 0.2s;
}
.form-card .ok-btn:hover { transform: scale(1.05); }
.form-card .powered {
  margin-top: 34px;
  font-family: var(--sans);
  font-size: 12px;
  color: rgba(30, 28, 25, 0.4);
  text-align: center;
}

/* two tight columns: lavender card + email bar stacked on the left,
   yellow info card matching their combined height on the right */
.contact-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}
.contact-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.old-school {
  flex: 1 1 auto;
  background: var(--lavender);
  color: var(--ink);
  border-radius: var(--radius);
  padding: clamp(36px, 4.2vw, 64px);
}
.old-school h2 {
  font-family: var(--sans-display);
  font-weight: 600;
  font-size: clamp(34px, 4.2vw, 62px);
  letter-spacing: -0.02em;
  margin-bottom: 26px;
}
.old-school p { max-width: 62ch; font-size: 18.5px; }
.old-school p + p { margin-top: 1.2em; }

.email-bar {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--maroon);
  color: var(--cream);
  border-radius: var(--radius);
  text-decoration: none;
  text-align: center;
  padding: clamp(26px, 2.8vw, 42px) 20px;
  font-family: var(--sans-display);
  font-weight: 600;
  font-size: clamp(26px, 2.6vw, 40px);
  letter-spacing: -0.01em;
}
/* green fill sweeps up from the bottom on hover — same move as the nav pills */
.email-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--green);
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.email-bar:hover::before,
.email-bar:focus-visible::before { transform: translateY(0); }
/* label swap: "Email Me!" slides out as the address slides in */
.email-bar .swap {
  position: relative;
  display: grid;
  overflow: hidden;
  padding: 0.1em 0; /* room for descenders inside the clip */
}
.email-bar .line {
  grid-area: 1 / 1;
  display: block;
  white-space: nowrap;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.email-bar .line-b { transform: translateY(140%); }
.email-bar:hover .line-a,
.email-bar:focus-visible .line-a { transform: translateY(-140%); }
.email-bar:hover .line-b,
.email-bar:focus-visible .line-b { transform: translateY(0); }

.info-block {
  background: var(--yellow);
  color: var(--ink);
  border-radius: var(--radius);
  padding: clamp(36px, 4.2vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* stacked label-over-value groups, ruled apart (Trust-style) */
.info-row {
  padding: clamp(24px, 2.4vw, 40px) 0;
  border-bottom: 1.5px solid var(--ink);
}
.info-row:first-child { padding-top: 0; }
.info-row:last-child { border-bottom: 0; padding-bottom: 0; }
.info-row .label {
  display: block;
  font-family: "Space Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.info-row .value {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.3;
}
.info-row .value a { text-decoration: none; }
.info-row .value a:hover { text-decoration: underline; text-underline-offset: 5px; }

/* ---------- project detail page ---------- */

.case-hero {
  margin-top: 120px;
  position: relative;
}
.case-hero .tile { aspect-ratio: 16 / 9; }
.case-hero .badge {
  position: absolute;
  right: clamp(20px, 4vw, 60px);
  bottom: -60px;
  width: clamp(110px, 12vw, 160px);
  height: clamp(110px, 12vw, 160px);
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  display: grid;
  place-items: center;
  text-align: center;
  font-family: "Space Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 14px;
  transform: rotate(8deg);
  animation: slowSpin 24s linear infinite;
}
@keyframes slowSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.case-intro {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(36px, 5vw, 90px);
  margin-top: clamp(80px, 10vw, 140px);
}
.case-intro h1 { font-family: var(--sans-display); font-size: clamp(34px, 4.6vw, 68px); margin-bottom: 32px; letter-spacing: -0.02em; }

.case-side .side-group { margin-bottom: 40px; }
.case-side .side-label {
  font-family: "Space Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-dim);
  display: block;
  margin-bottom: 16px;
}
.tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.tag {
  font-family: var(--sans);
  font-size: 14px;
  border: 1px solid rgba(241, 236, 227, 0.35);
  padding: 8px 18px;
  border-radius: 999px;
  white-space: nowrap;
}
.case-side ul { list-style: none; }
.case-side li { padding: 5px 0; font-size: 16px; }
.case-side li a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

.case-band {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  padding: clamp(70px, 12vw, 180px) clamp(28px, 6vw, 100px);
  display: grid;
  place-items: center;
  text-align: center;
  background: linear-gradient(160deg, #35322d, #454039);
}
.case-band.orange { background: var(--orange); }
.case-band.blurple { background: var(--blurple); }
.case-band p {
  font-family: var(--serif);
  font-size: clamp(26px, 3.6vw, 52px);
  line-height: 1.25;
  font-weight: 500;
  max-width: 26ch;
}

.case-2up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.6vw, 40px);
}

.case-copy { max-width: 76ch; }
.case-copy h2 { font-size: clamp(28px, 3vw, 40px); margin-bottom: 22px; }

/* ---------- M&S Consulting case study ---------- */
.ms-case { --ms-navy: #0a1e4e; --ms-blue: #9dccf5; --ms-paper: #ecece8; }
.ms-project-cover { margin-top:120px; aspect-ratio:16/10; border-radius:var(--radius); overflow:hidden; }
.ms-project-cover img { width:100%; height:100%; object-fit:cover; object-position:center; }
.ms-case .ph-tag { position: absolute; right: 26px; top: 28px; z-index: 2; }
.ms-intro { margin-top: clamp(88px, 11vw, 150px); }.ms-intro h1 { max-width: 16ch; }
.ms-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: clamp(78px, 10vw, 150px) 0; border-top: 1px solid rgba(241,236,227,.24); border-bottom: 1px solid rgba(241,236,227,.24); }
.ms-stats div { padding: clamp(22px, 3.2vw, 48px) clamp(14px, 2.2vw, 30px); border-right: 1px solid rgba(241,236,227,.24); }.ms-stats div:last-child { border: 0; }
.ms-stats strong { display: block; font: 600 clamp(42px, 5.4vw, 78px)/.8 var(--sans-display); color: var(--ms-blue); letter-spacing: -.05em; }.ms-stats span { display: block; margin-top: 14px; font: 12px "Space Mono", monospace; text-transform: uppercase; letter-spacing: .13em; color: var(--cream-dim); }
.ms-story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .9fr); gap: clamp(35px, 7vw, 120px); align-items: center; }.ms-story-copy h2, .ms-ugc h2, .ms-web-heading h2 { font: 600 clamp(42px, 5.2vw, 75px)/.94 var(--sans-display); letter-spacing: -.035em; margin: 20px 0 28px; }
.podcast-placeholder { min-height: 520px; position: relative; display: grid; place-items: center; overflow: hidden; border-radius: var(--radius); background: linear-gradient(135deg, #3a3b3e, #24252a); }.podcast-placeholder::after { content:""; position:absolute; inset:0; background: repeating-linear-gradient(0deg, transparent 0 28px, rgba(255,255,255,.035) 29px 30px); }.podcast-orbit { position:absolute; width: 115%; aspect-ratio: 1; border: 1px solid rgba(156,204,245,.45); border-radius: 50%; transform: rotate(-23deg); }.podcast-cover { z-index: 1; width: min(66%, 330px); aspect-ratio: 1; padding: 28px; display:flex; flex-direction:column; justify-content:space-between; background: #9dccf5; color: #101a35; box-shadow: 20px 20px 0 rgba(10,30,78,.48); }.podcast-cover span { font: 600 clamp(42px, 5vw, 70px)/.75 var(--sans-display); letter-spacing:-.065em; }.podcast-cover em { font-family: var(--serif); font-weight:400; }.podcast-cover small { font: 10px "Space Mono", monospace; text-transform:uppercase; letter-spacing:.14em; }.podcast-placeholder .ph-tag { top: 22px; right: 22px; }
.ms-ugc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 100px); padding: clamp(34px, 5vw, 76px); border-radius: var(--radius); background: var(--ms-paper); color: var(--ink); position:relative; overflow:hidden; }.ms-ugc .eyebrow { color: var(--ms-navy); }.ms-ugc .body-copy { font-size: clamp(17px, 1.35vw, 20px); }.ugc-placeholder { grid-column: 1 / -1; min-height: 230px; display:grid; grid-template-columns: 1.3fr .8fr 1fr .7fr; gap: 12px; }.ugc-placeholder i { display:block; background: linear-gradient(145deg, #bbbcb9, #d8d8d4); border-radius: 6px; }.ugc-placeholder i:nth-child(2) { transform: translateY(30px); }.ugc-placeholder i:nth-child(3) { transform: translateY(-20px); }.ugc-placeholder i:nth-child(4) { transform: translateY(12px); }.ugc-placeholder .ph-label { position:absolute; inset:auto 0 22px; text-align:center; font: 11px "Space Mono", monospace; text-transform:uppercase; letter-spacing:.13em; color: rgba(10,30,78,.48); }
.ms-web-section { margin-bottom: clamp(100px, 13vw, 180px); }.ms-web-heading { max-width: 800px; margin-bottom: 46px; }.site-window { overflow:hidden; border: 1px solid rgba(156,204,245,.35); border-radius: 18px; background:#f4f1ec; color:#14224d; box-shadow: 0 28px 70px rgba(0,0,0,.25); }.browser-top { height: 38px; display:flex; align-items:center; gap:7px; padding:0 14px; background:#e2e1dc; }.browser-top > span { width:9px; height:9px; border-radius:50%; background:#a5a5a2; }.browser-address { margin:0 auto; width:min(46%, 380px); padding:3px 12px; border-radius:4px; background:#f2f1ed; text-align:center; color:#7b7c81; font:10px var(--sans); }.browser-top b { font: 15px var(--sans); }.browser-sitebar { height:72px; display:flex; align-items:center; padding:0 clamp(18px, 3vw, 42px); gap:clamp(18px, 3vw, 50px); background:#fff; }.browser-sitebar strong { font:600 clamp(28px, 3vw, 42px)/1 var(--sans-display); letter-spacing:-.07em; }.browser-sitebar strong span { color:#2583cd; }.browser-sitebar nav { display:flex; gap:clamp(12px, 2vw, 30px); }.browser-sitebar button { appearance:none; border:0; background:none; color:#526078; cursor:pointer; font: 12px var(--sans); }.browser-sitebar nav button.is-active { color:#0a1e4e; font-weight:600; }.browser-cta { margin-left:auto; padding:9px 14px; border-radius:999px !important; background:#0a1e4e !important; color:white !important; }.browser-body { min-height: 510px; position:relative; }.browser-screen { display:none; min-height:510px; animation: browserIn .35s ease both; }.browser-screen.is-active { display:flex; }@keyframes browserIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }.browser-copy { width:55%; padding:clamp(38px, 6vw, 92px) clamp(26px, 6vw, 85px); background:#0a1e4e; color:#fff; }.browser-copy small,.browser-work-title small,.browser-podcast-copy small { font: 10px "Space Mono", monospace; letter-spacing:.14em; color:#9dccf5; }.browser-copy h3,.browser-work-title h3,.browser-podcast-copy h3 { margin:20px 0; font:400 clamp(32px, 4.3vw, 67px)/.94 var(--serif); letter-spacing:-.035em; }.browser-copy h3 em { color:#9dccf5; }.browser-copy p,.browser-podcast-copy p { font: 14px/1.5 var(--sans); color:rgba(255,255,255,.75); max-width:35ch; }.browser-copy button,.browser-podcast-copy button { margin-top:25px; padding:10px 15px; border:0; border-radius:999px; background:#9dccf5; color:#0a1e4e; font:600 12px var(--sans); }.browser-visual { flex:1; display:grid; place-items:center; background:linear-gradient(145deg,#a8bdcf,#dfe3e5); color:rgba(10,30,78,.48); text-align:center; font:11px "Space Mono", monospace; text-transform:uppercase; line-height:1.7; letter-spacing:.1em; }.browser-work-title { padding:clamp(45px, 6vw, 85px) clamp(28px, 7vw, 120px) 20px; }.browser-work-title h3 { color:#0a1e4e; max-width:10ch; }.browser-service-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; padding:20px clamp(28px, 7vw, 120px) 60px; }.browser-service-cards article { min-height:170px; padding:20px; display:flex; flex-direction:column; justify-content:space-between; border-radius:8px; background:#d8e3ec; }.browser-service-cards article:nth-child(2){background:#f0dcc3}.browser-service-cards article:nth-child(3){background:#d9d7e6}.browser-service-cards b { font:11px "Space Mono",monospace; }.browser-service-cards h4 { font:500 23px/1 var(--serif); }.browser-service-cards p { font:12px var(--sans); }.browser-podcast-art { width:42%; margin:clamp(30px, 5vw, 70px); aspect-ratio:1; padding:clamp(24px, 4vw, 52px); display:flex; flex-direction:column; background:#9dccf5; color:#0a1e4e; font:600 clamp(34px, 4.6vw, 66px)/.76 var(--sans-display); letter-spacing:-.07em; }.browser-podcast-art em { font-family:var(--serif); font-weight:400; }.browser-podcast-art small { margin-top:auto; font:10px "Space Mono",monospace; letter-spacing:.14em; text-transform:uppercase; }.browser-podcast-copy { flex:1; align-self:center; padding:20px 40px 20px 0; }.browser-podcast-copy h3 { font-size:clamp(27px, 3.4vw, 52px); color:#0a1e4e; }.browser-podcast-copy p { color:#596378; }.browser-hint { margin-top:16px; color:var(--cream-dim); font:11px "Space Mono",monospace; text-align:right; text-transform:uppercase; letter-spacing:.15em; }

.prev-next {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.6vw, 40px);
}
.pn-link {
  text-decoration: none;
  color: var(--cream);
  border-top: 1px solid rgba(241, 236, 227, 0.2);
  padding-top: 26px;
}
.pn-link.next { text-align: right; }
.pn-link .pn-label {
  font-family: "Space Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-dim);
  display: block;
  margin-bottom: 12px;
}
.pn-link .pn-name {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(24px, 2.8vw, 40px);
  transition: color 0.25s;
}
.pn-link:hover .pn-name { color: var(--orange); }

/* Self-contained M&S mini-site: source design tokens and a small set of real assets. */
.browser-sitebar strong { display:none; }
.browser-sitebar img { width:clamp(105px,13vw,170px); height:auto; }
.browser-sitebar button { font-family:"Figtree",var(--sans); }
.browser-copy { background:#0a0e1a; }
.browser-copy small,.browser-work-title small,.browser-podcast-copy small { font-family:"Figtree",var(--sans); font-weight:600; }
.browser-copy h3,.browser-work-title h3,.browser-podcast-copy h3 { font-family:"Source Serif 4",var(--serif); font-weight:500; }
.browser-copy p,.browser-podcast-copy p,.browser-copy button,.browser-podcast-copy button { font-family:"Figtree",var(--sans); }
.browser-visual { display:block; position:relative; overflow:hidden; background:#101620; }
.browser-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,14,26,.14),rgba(10,14,26,.35)); }
.browser-visual video { width:100%; height:100%; object-fit:cover; }
.browser-geometry { position:absolute; width:min(38%,340px); right:7%; top:32px; opacity:.56; }
.browser-service-cards { position:relative; }
.browser-service-cards h4 { font-family:"Source Serif 4",var(--serif); }
.browser-service-cards p { font-family:"Figtree",var(--sans); }
.browser-podcast-art { display:block; width:42%; margin:clamp(30px,5vw,70px); aspect-ratio:1; object-fit:cover; padding:0; box-shadow:0 16px 36px rgba(0,31,101,.18); }
.browser-screen[data-browser-screen="work"] { flex-direction:column; }

/* ---------- modular case studies ---------- */

.case-study {
  --case-accent: var(--orange);
  --case-paper: #f1ece3;
  --case-ink: #1e1c19;
  padding-top: 108px;
}

.case-study.atlas { --case-accent: #ea73de; }
.case-study.ridgeline { --case-accent: #9b4934; }

/* work index: no heading — the grid starts at the top, clearing the fixed
   logo mark so the first card sits top-justified with it. */
.work-grid {
  padding-top: clamp(112px, 14vh, 156px);
}

.work-hero {
  position: relative;
  min-height: clamp(440px, 62vw, 860px);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--card);
}

.work-hero img,
.case-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-hero img {
  position: absolute;
  inset: 0;
}

.work-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 18, 16, 0.02), rgba(20, 18, 16, 0.2));
}

.work-hero-mark {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 8vw;
  color: #fff;
  text-align: center;
  font-family: var(--sans-display);
  font-weight: 600;
  font-size: clamp(54px, 10vw, 164px);
  line-height: 0.88;
  letter-spacing: 0;
}

.work-hero-mark small {
  display: block;
  margin-top: 18px;
  font-family: "Space Mono", monospace;
  font-size: clamp(9px, 0.8vw, 12px);
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.case-intro-v2 {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(250px, 3fr);
  gap: clamp(48px, 8vw, 132px);
  align-items: start;
  margin-top: clamp(34px, 5vw, 72px);
  margin-bottom: clamp(90px, 12vw, 180px);
}

.case-lede {
  max-width: 900px;
}

.case-lede h2 {
  max-width: 23ch;
  margin-bottom: 24px;
  font-size: clamp(29px, 3vw, 48px);
  line-height: 1;
  letter-spacing: 0;
}

.case-lede p {
  max-width: 78ch;
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.58;
}

.case-lede p + p { margin-top: 1.25em; }

.case-meta {
  display: grid;
  gap: 30px;
  font-family: var(--sans);
}

.case-meta-group { display: grid; gap: 11px; }

.case-meta-label {
  font-family: "Space Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

.case-meta-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  list-style: none;
}

.case-meta-list li {
  border: 1px solid rgba(241, 236, 227, 0.4);
  border-radius: 999px;
  padding: 5px 11px 6px;
  font-size: 13px;
  line-height: 1;
}

.case-meta a {
  width: fit-content;
  font-size: 15px;
  text-underline-offset: 4px;
}

.case-block { margin: clamp(84px, 11vw, 170px) 0; }

.case-stage {
  min-height: clamp(400px, 56vw, 820px);
  display: grid;
  place-items: center;
  padding: clamp(40px, 8vw, 124px);
  overflow: hidden;
  background: var(--case-paper);
  color: var(--case-ink);
}

.case-stage.rounded { border-radius: var(--radius); }
.case-stage.dark { background: #090707; color: var(--cream); }
.case-stage.accent { background: var(--case-accent); color: var(--cream); }

.case-wordmark {
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(48px, 9vw, 146px);
  line-height: 0.9;
  letter-spacing: 0;
}

.case-wordmark small {
  display: block;
  margin-top: 16px;
  font-family: var(--sans);
  font-size: clamp(10px, 1vw, 15px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.case-symbol {
  width: clamp(150px, 23vw, 340px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 32%;
  background: var(--cream);
  color: #120b10;
  font-family: var(--sans-display);
  font-size: clamp(48px, 8vw, 120px);
  font-weight: 600;
}

.case-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(12px, 1.5vw, 24px);
}

.case-duo.asymmetric { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); }
.case-duo > * { min-width: 0; }

.case-media {
  min-height: clamp(340px, 48vw, 740px);
  overflow: hidden;
  background: var(--card);
}

.case-media.rounded { border-radius: var(--radius); }
.case-duo .case-media,
.case-duo .case-stage { min-height: clamp(360px, 47vw, 720px); }

.case-copy-row {
  display: grid;
  grid-template-columns: minmax(210px, 4fr) minmax(0, 8fr);
  gap: clamp(42px, 8vw, 130px);
  align-items: start;
  max-width: 1260px;
  padding-left: clamp(4px, 1.2vw, 20px);
}

.case-copy-row h2 {
  font-size: clamp(28px, 3vw, 46px);
  line-height: 1;
  letter-spacing: 0;
}

.case-copy-row p {
  max-width: 72ch;
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.6;
}

.case-copy-row p + p { margin-top: 1.2em; }

.case-quote {
  min-height: clamp(420px, 52vw, 760px);
  display: grid;
  place-items: center;
  padding: clamp(48px, 9vw, 140px);
  text-align: center;
  background: var(--case-accent);
  color: var(--cream);
}

.case-quote blockquote {
  width: 100%;
  max-width: 17ch;
  font-family: var(--serif);
  font-size: clamp(38px, 6.2vw, 92px);
  line-height: 1.02;
}

.case-duo .case-quote blockquote { font-size: clamp(34px, 4.5vw, 70px); }

.case-quote em { font-weight: 400; }

.case-collage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 24px);
}

.case-collage .case-media:nth-child(1) { grid-column: span 5; }
.case-collage .case-media:nth-child(2) { grid-column: span 7; }
.case-collage .case-media:nth-child(3) { grid-column: span 7; }
.case-collage .case-media:nth-child(4) { grid-column: span 5; }
.case-collage .case-media { min-height: clamp(300px, 39vw, 590px); }

.brand-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: clamp(500px, 65vw, 980px);
  background: #ece7de;
  color: #201d19;
}

.brand-board > div {
  min-height: 250px;
  display: grid;
  place-items: center;
  padding: clamp(30px, 6vw, 90px);
  border: 1px solid rgba(32, 29, 25, 0.12);
}

.brand-board .wide { grid-column: 1 / -1; }
.brand-board strong { font-family: var(--serif); font-size: clamp(34px, 6vw, 88px); font-weight: 400; }
.brand-board span { font-family: "Space Mono", monospace; font-size: clamp(12px, 1.2vw, 17px); letter-spacing: 0.14em; text-transform: uppercase; }
.brand-board .swatches { display: flex; gap: 10px; align-items: center; }
.brand-board i { display: block; width: clamp(42px, 7vw, 100px); aspect-ratio: 1; border-radius: 50%; }

.browser-mockup {
  width: min(1120px, 100%);
  overflow: hidden;
  border: 1px solid rgba(241, 236, 227, 0.24);
  background: #100d0e;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
}

.browser-bar {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(241, 236, 227, 0.16);
}

.browser-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(241, 236, 227, 0.45); }

.browser-mockup .browser-screen {
  min-height: clamp(320px, 44vw, 650px);
  display: grid;
  place-items: center;
  padding: 40px;
  background: radial-gradient(circle at 72% 35%, var(--case-accent), transparent 34%), #120c10;
}

.browser-mockup .browser-screen strong {
  font-family: var(--sans-display);
  font-size: clamp(46px, 8vw, 120px);
  line-height: 0.88;
  letter-spacing: 0;
  text-align: center;
}

/* ---------- scroll reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(46px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.1s; }
.reveal.d2 { transition-delay: 0.2s; }
.reveal.d3 { transition-delay: 0.3s; }

/* The first project enters with the homepage identity, even below the fold. */
body.home .project-stack .project-card:first-child {
  opacity: 1;
  transform: none;
}
html.home-intro body.home .project-stack .project-card:first-child {
  opacity: 0;
  transform: translateY(46px);
}

/* per-word split reveal */
.split .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.split .word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--wd, 0s);
}
.split.in .word > span { transform: translateY(0); }
/* hero headline takes ~2s to fully rise in */
.hero .h-display.split .word > span { transition-duration: 1s; }

/* ---------- homepage load-in orchestration ---------- */
/* logo drops in from the top, after the hero text finishes */
html.home-intro .site-logo {
  opacity: 0;
  transform: translateY(-38px);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .split .word > span { transition: none !important; opacity: 1 !important; transform: none !important; }
  .promo-card, .talk-shop .track, .marquee-link .track, .case-hero .badge { animation: none !important; }
}

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

@media (max-width: 900px) {
  /* keep the left rail reserved so the floating menu pill never overlaps
     the featured cards or content (the pill is still shown down to 620px) */
  .main { padding-left: var(--rail-safe); }
  body.home .main { padding-left: var(--rail-safe); }
  body.home .shell { padding: 0 var(--gutter); }
  body.home .hero { margin-left: 0; }
  .hero, .footer-brand { margin-left: 0; }
  .caps-grid { grid-template-columns: 1fr 1fr; }
  .tile-caption { min-height: 88px; padding: 14px 20px; }
  .tile-caption p { display: none; }
  .tile-caption h3 { font-size: clamp(22px, 7vw, 30px); margin-bottom: 0; }
  .giant-wordmark { width: clamp(200px, 63vw, 380px); }
  .about-teaser,
  .about-hero,
  .contact-hero,
  .contact-cards,
  .case-intro,
  .press-cards,
  .about-photos,
  .footer-inner,
  .case-2up { grid-template-columns: 1fr; }
  .caps-grid { grid-template-columns: 1fr 1fr; }
  .menu-dock { gap: 0; padding: 20px; }
  .menu-dock a, .menu-dock button { height: 54px; padding: 0 22px; font-size: 19px; }
  .site-logo { --logo-height: 44px; top: 22px; left: 20px; max-width: calc(100vw - 40px); }
  .menu-btn { bottom: 20px; left: 20px; }
  .hero { min-height: 78vh; }
  .prev-next { grid-template-columns: 1fr 1fr; }
  .footer-cta { grid-template-columns: 1fr; }
  .site-footer { --footer-shift: 0px; }
  .footer-cta .pill-btn { width: fit-content; min-width: min(100%, 280px); }
  .footer-brand { margin-left: auto; }
  .case-study { padding-top: 88px; }
  .case-intro-v2,
  .case-copy-row { grid-template-columns: 1fr; }
  .case-intro-v2 { gap: 42px; }
  .case-copy-row { gap: 22px; padding-left: 0; }
  .case-collage .case-media:nth-child(n) { grid-column: span 6; }
  .ms-stats { grid-template-columns: 1fr 1fr; }
  .ms-stats div:nth-child(2) { border-right: 0; }.ms-stats div:nth-child(-n+2) { border-bottom: 1px solid rgba(241,236,227,.24); }
  .ms-story-grid { grid-template-columns: 1fr; }.podcast-placeholder { min-height: 430px; }
  .site-window { margin-left: -12px; margin-right: -12px; }.browser-body, .browser-screen { min-height: 430px; }
  .browser-copy { padding: 54px 35px; }.browser-service-cards { padding-left:30px; padding-right:30px; }
}

@media (max-width: 620px) {
  /* floating menu pill is replaced by the bottom bar here — reclaim the
     left rail so content goes full-width again */
  .main, body.home .main { padding-left: 0; }
  .ms-project-cover { margin-top:88px; aspect-ratio:4/3; }
  .site-logo { --logo-height: clamp(34px, 10.7vw, 42px); top: 16px; left: 16px; max-width: calc(100vw - 32px); }
  .footer-panel { padding-top: 64px; }
  .footer-cta h2 { font-size: clamp(40px, 13vw, 58px); }
  /* Trust-style mobile footer: centered CTA, socials row, wordmark last */
  .footer-cta h2 { text-align: center; margin: 0 auto; }
  .footer-cta .pill-btn { width: 100%; min-width: 0; margin: 0 auto; }
  .footer-brand { flex-direction: column-reverse; align-items: center; gap: 64px; margin-top: 110px; }
  .giant-wordmark { width: min(88vw, 400px); }
  .footer-side { width: 100%; align-items: center; }
  .socials { flex-direction: row; justify-content: center; gap: 10px; width: 100%; }
  .socials a { width: clamp(64px, 19.5vw, 84px); }
  .footer-legal { min-height: 112px; }
  .work-hero { min-height: 70vh; }
  .case-duo,
  .case-duo.asymmetric,
  .brand-board { grid-template-columns: 1fr; }
  .brand-board .wide { grid-column: auto; }
  .case-collage .case-media:nth-child(n) { grid-column: 1 / -1; }
  .case-duo .case-media,
  .case-duo .case-stage,
  .case-media { min-height: 65vh; }
  .case-quote { min-height: 60vh; }
  .case-meta-list li { font-size: 12px; }
  /* full-screen takeover menu */
  .menu-dock {
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 24px;
    background: var(--bg);
    transform: translateY(103%);
  }
  .menu-dock a,
  .menu-dock button {
    width: min(76vw, 330px);
    height: 74px;
    padding: 0;
    font-size: 30px;
    border-radius: 26px;
  }
  .menu-dock .menu-close {
    width: auto;
    min-width: 170px;
    height: 52px;
    padding: 0 30px;
    font-size: 19px;
    margin-top: 10px;
    border-radius: 20px;
  }
  .menu-btn { display: none; }
  .menu-bar { display: flex; }
  .menu-bar .menu-btn { display: block; }
  .ms-stats { margin: 80px 0; }.ms-stats strong { font-size: 50px; }.ms-stats span { font-size: 10px; letter-spacing:.08em; }
  .ms-ugc { grid-template-columns:1fr; padding:36px 22px; }.ugc-placeholder { min-height:160px; }.podcast-placeholder { min-height:370px; }
  .browser-sitebar { height:auto; min-height:64px; padding:14px; gap:12px; }.browser-sitebar nav { gap:12px; flex-wrap:wrap; }.browser-sitebar nav button { font-size:10px; }.browser-cta { display:none; }.browser-body, .browser-screen { min-height: 530px; }.browser-copy { width:100%; padding:48px 28px; }.browser-visual { display:none; }.browser-copy h3 { font-size:42px; }.browser-service-cards { grid-template-columns:1fr; padding:8px 20px 30px; }.browser-service-cards article { min-height:105px; }.browser-work-title { padding:44px 22px 12px; }.browser-work-title h3 { font-size:42px; }.browser-podcast-art { position:absolute; right:16px; bottom:16px; width:42%; margin:0; }.browser-podcast-copy { align-self:flex-start; padding:48px 24px; }.browser-podcast-copy h3 { font-size:38px; }
  /* hero: bigger type, shorter section so the first tile peeks in */
  .hero {
    min-height: 0;
    height: calc(100svh - 205px);
    padding-top: 110px;
    padding-bottom: 18px;
  }
  .hero .h-display {
    font-size: clamp(48px, 16.5vw, 72px);
    line-height: 0.95;
    letter-spacing: -0.03em;
  }
}