@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/hanken-grotesk-latin-400-normal.woff2) format('woff2');
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/hanken-grotesk-latin-500-normal.woff2) format('woff2');
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/hanken-grotesk-latin-600-normal.woff2) format('woff2');
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/hanken-grotesk-latin-700-normal.woff2) format('woff2');
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/hanken-grotesk-latin-800-normal.woff2) format('woff2');
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/fonts/hanken-grotesk-latin-900-normal.woff2) format('woff2');
}

/* ---------- Tokens ---------- */

:root {
  --bg: #EEF1F4;
  --surface: #FFFFFF;
  --ink: #0F1B2D;
  --text: #22324A;
  --text-2: #3A4A60;
  --muted: #5B6B82;
  --border: #C9D1DC;
  --border-strong: #B9C3D1;
  --divider: #DCE2EA;
  --accent: #2348C9;
  --accent-hover: #16308C;
  --accent-tint: #E4E9FB;
  --success: #1E8E4E;

  /* Dark panels */
  --dark-bg: #0F1B2D;
  --dark-pill: #22324A;
  --dark-border: #3A4A60;
  --dark-text: #C3CDDB;
  --dark-number: #9FB4FF;
  --dark-pill-text: #C9D6FF;

  --font: 'Hanken Grotesk', 'Helvetica Neue', sans-serif;

  --radius-card: 20px;
  --radius-image: 16px;
  --radius-shot: 14px;
  --radius-button: 12px;
  --radius-input: 10px;
  --radius-pill: 999px;

  --container: 1160px;
  --gutter: clamp(20px, 5vw, 56px);
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Jump links land below the sticky header (~96px tall) */
  scroll-padding-top: 104px;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
}

/* Case studies set slightly larger body copy */
body.page-case {
  font-size: 18px;
  line-height: 1.6;
}

a {
  color: var(--accent);
}

a:hover {
  color: var(--accent-hover);
}

img {
  max-width: 100%;
}

picture {
  display: block;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Hidden on screen, still read by screen readers */
.visually-hidden {
  position: absolute;
  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: -100px;
  z-index: 10;
  background: var(--surface);
  color: var(--ink);
  padding: 12px 18px;
  border-radius: var(--radius-button);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  top: 16px;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 14px 22px;
  border-radius: var(--radius-button);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s;
}

.btn--semibold {
  font-weight: 600;
}

.btn-primary,
.btn-primary:hover {
  background: var(--accent);
  color: #FFFFFF;
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-outline,
.btn-outline:hover {
  color: var(--ink);
  border: 1.5px solid var(--border-strong);
}

.btn-outline:hover {
  border-color: var(--ink);
}

/* On dark panels */
.btn-light,
.btn-light:hover {
  background: #FFFFFF;
  color: var(--ink);
}

.btn-light:hover {
  background: var(--accent-tint);
}

.btn-ghost,
.btn-ghost:hover {
  color: #FFFFFF;
  border: 1.5px solid var(--dark-border);
}

.btn-ghost:hover {
  border-color: var(--dark-text);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}

/* ---------- Header ---------- */

/* Sticky, and stretched over the side gutters so content can't show
   through at the edges as it scrolls underneath */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-inline: calc(-1 * var(--gutter));
  padding: 24px var(--gutter);
  background: var(--bg);
  transition: box-shadow 0.2s;
}

/* Hairline under the header once the page has scrolled */
.site-header.is-stuck {
  box-shadow: 0 1px 0 var(--border);
}

.logo,
.logo:hover {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-button);
  background: var(--ink);
  color: #FFFFFF;
  text-decoration: none;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.02em;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  font-size: 15px;
  font-weight: 500;
}

.site-nav a {
  color: var(--ink);
  text-decoration: none;
}

/* Grow the tap area of the text links without changing the layout */
.site-nav a:not(.nav-resume) {
  padding: 12px 0;
  margin: -12px 0;
}

.site-nav a:hover {
  color: var(--accent);
}

.site-nav .nav-resume {
  padding: 10px 16px;
  border-radius: var(--radius-input);
  border: 1.5px solid var(--border-strong);
  font-weight: 600;
}

.site-nav .nav-resume:hover {
  color: var(--ink);
  border-color: var(--ink);
}

/* ---------- Mobile menu (680px and under, JS only) ---------- */

/* Dimmed backdrop behind the open menu; created by main.js */
.menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: rgba(15, 27, 45, 0.45);
}

/* No page scrolling behind the open menu */
html.menu-open {
  overflow: hidden;
}

.menu-toggle {
  display: none;
}

@media (max-width: 680px) {
  .js .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-input);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
  }

  .js .menu-toggle:hover {
    border-color: var(--ink);
  }

  /* Three bars drawn from one span; they cross into an X when open */
  .menu-icon,
  .menu-icon::before,
  .menu-icon::after {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.2s, background-color 0.2s;
  }

  .menu-icon {
    position: relative;
  }

  .menu-icon::before,
  .menu-icon::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .menu-icon::before {
    top: -6px;
  }

  .menu-icon::after {
    top: 6px;
  }

  .menu-toggle[aria-expanded="true"] .menu-icon {
    background-color: transparent;
  }

  .menu-toggle[aria-expanded="true"] .menu-icon::before {
    transform: translateY(6px) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] .menu-icon::after {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* The open menu drops down from the sticky header, over the page */
  .js .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100dvh - 96px);
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 var(--gutter) 24px;
    background: var(--bg);
    box-shadow: 0 16px 32px rgba(15, 27, 45, 0.18);
    font-size: 17px;
  }

  .js .menu-toggle[aria-expanded="true"] + .site-nav {
    display: flex;
  }

  .js .site-nav a:not(.nav-resume) {
    padding: 14px 0;
    margin: 0;
    border-top: 1px solid var(--border);
  }

  .js .site-nav .nav-resume {
    margin-top: 12px;
    padding: 13px 16px;
    text-align: center;
  }
}

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

/* Two columns that wrap: intro on the left, view toggle on the right.
   The toggle drops under the intro when there's no room (~1024px). */
.hero {
  padding: 56px 0 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px 56px;
  align-items: flex-end;
}

.hero-intro {
  flex: 1 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Side by side it never passes ~416px, so the 540px cap only kicks in once
   it wraps under the intro (below ~1040px) */
.hero-toggle {
  flex: 1 1 360px;
  min-width: 0;
  max-width: 540px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.status-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 8px 16px 8px 12px;
  font-size: 14px;
  font-weight: 600;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--success);
  flex: none;
}

.hero-title {
  margin: 0;
  font-weight: 900;
  font-size: clamp(56px, 7.5vw, 112px);
  line-height: 0.9;
  letter-spacing: -0.055em;
}

.hero-lede {
  margin: 0;
  max-width: 600px;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.hero-lede span {
  color: var(--muted);
}

/* ---------- Hero view toggle ---------- */

.toggle-label {
  margin: 0;
  padding-left: 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Two stacked buttons in one white pill; the pressed one is solid blue */
.door-toggle {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 6px;
}

.door-toggle button {
  font: inherit;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  width: 100%;
  min-height: 56px;
  padding: 16px 22px;
  text-align: left;
  border: 0;
  border-radius: var(--radius-button);
  cursor: pointer;
  background: transparent;
  color: var(--ink);
  transition: background-color 0.15s;
}

.door-toggle button:hover {
  background: var(--bg);
}

.door-toggle button[aria-pressed="true"] {
  background: var(--accent);
  color: #FFFFFF;
}

.toggle-desc {
  margin: 0;
  padding-left: 4px;
  font-size: 17px;
  color: var(--text-2);
}

/* ---------- Section divider (home) ---------- */

/* Thin rule: 64px margin above (on top of the previous section's own
   bottom padding) and 56px below, the same treatment as the top of About.
   Used on the sections that follow the work section. */
.section-rule {
  margin-top: 64px;
  border-top: 1px solid var(--border);
  padding-top: 56px !important;
}

/* ---------- Cards & headings (home) ---------- */

.card {
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: clamp(24px, 4vw, 48px);
}

.h2 {
  margin: 0;
  font-size: 32px;
  letter-spacing: -0.02em;
}

.h2--tight {
  line-height: 1.15;
}

/* ---------- Hiring intro: Who I am ---------- */

.intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 0 0;
}

.intro-card {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 40px;
}

.intro-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.intro-copy p {
  margin: 0;
  color: var(--text-2);
}

.intro-links {
  margin-top: 8px;
}

/* Side padding eases from 22px down to 14px below ~550px so the
   GitHub/LinkedIn pair still fits on one line at 320px */
.intro-links .btn {
  padding-inline: clamp(14px, 4vw, 22px);
}

/* GitHub and LinkedIn wrap as a pair, never one at a time */
.btn-group {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
}

/* Top margin lines the list up with the heading beside it */
.facts {
  margin: calc(32px * 1.15 + 16px) 0 0;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px 20px;
  font-size: 16px;
  align-content: start;
}

.facts dt {
  color: var(--muted);
}

.facts dd {
  margin: 0;
  font-weight: 600;
}

/* Two 300px columns + 40px gap no longer fit: the list stacks under the copy */
@container (max-width: 639.98px) {
  .facts {
    margin-top: 0;
  }
}

/* Once the GitHub/LinkedIn pair wraps (~562px viewport, ~458px of card
   content), each label sits on its own line above its detail */
@container (max-width: 459.98px) {
  .facts {
    grid-template-columns: 1fr;
    row-gap: 2px;
  }

  .facts dt:not(:first-child) {
    margin-top: 12px;
  }
}

/* ---------- Hiring intro: Experience ---------- */

.exp-card {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.exp-card .h2 {
  margin-bottom: 8px;
}

.exp-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  padding: 18px 0;
  border-top: 1px solid var(--divider);
}

.exp-dates {
  flex: 0 0 150px;
  color: var(--muted);
  font-weight: 600;
}

.exp-body {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--text-2);
}

.exp-body strong {
  font-size: 19px;
  color: var(--ink);
}

.exp-note {
  color: var(--muted);
  font-size: 15px;
  margin-top: 6px;
}

.exp-education {
  margin: 8px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--divider);
  color: var(--text-2);
  font-size: 16px;
}

.exp-education strong {
  color: var(--ink);
}

/* At 675px viewport and below (553.5px of card content): label, program,
   school and years each on their own line, without the · and , */
@container (max-width: 553.98px) {
  .exp-education strong,
  .edu-part {
    display: block;
  }

  .edu-sep {
    display: none;
  }
}

/* ---------- Dark panels ---------- */

.panel-dark {
  background: var(--dark-bg);
  color: #FFFFFF;
  border-radius: var(--radius-card);
}

.panel-dark :focus-visible {
  outline-color: var(--dark-number);
}

.pill-dark {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--dark-pill);
  color: var(--dark-pill-text);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}

/* ---------- Business intro: Iconic panel ---------- */

.studio {
  padding: 24px 0 0;
}

.studio-panel {
  container-type: inline-size;
  padding: clamp(24px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.studio-intro {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.studio-intro .h2 {
  max-width: 720px;
}

.studio-intro p {
  margin: 0;
  color: var(--dark-text);
  max-width: 680px;
}

/* Both CTAs take the width of the wider one, side by side or stacked */
.btn-pair {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 12px;
  align-self: flex-start;
}

.btn-pair .btn {
  text-align: center;
}

/* Keeps a button's last word and its ↗ on the same line */
.nowrap {
  white-space: nowrap;
}

/* Two ~264px buttons + gap no longer fit (~683px viewport) */
@container (max-width: 559.98px) {
  .btn-pair {
    grid-auto-flow: row;
  }
}

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 24px;
}

.steps li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--dark-border);
  padding-top: 16px;
  color: var(--dark-text);
  font-size: 15px;
}

.steps strong {
  font-size: 19px;
  color: #FFFFFF;
}

.step-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--dark-number);
}

/* ---------- Work ---------- */

/* 56px top now that the work section follows the doors; 24px bottom +
   the divider's 64px margin gives the designed 88px above the rule */
.work {
  padding: 56px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 72px;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 16px;
}

.section-head h2 {
  margin: 0;
  font-size: clamp(40px, 5vw, 60px);
  font-weight: 800;
  letter-spacing: -0.04em;
}

.section-head p {
  margin: 0;
  color: var(--muted);
  font-weight: 600;
}

/* ---------- Labels ---------- */

.kicker-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.kicker {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
}

.pill {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--accent-tint);
  color: var(--accent-hover);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

/* ---------- Case cards (home) ---------- */

.case-card {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
}

.case-card--reverse {
  flex-direction: row-reverse;
}

.case-card-media {
  flex: 1 1 460px;
  min-width: 0;
}

.case-card-image-link {
  display: block;
  border-radius: var(--radius-image);
}

.case-card-image-link img {
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.case-card-image-link:hover img {
  border-color: var(--accent);
  box-shadow: 0 12px 32px rgba(15, 27, 45, 0.14);
}

/* The lift only happens when motion is welcome */
@media (prefers-reduced-motion: no-preference) {
  .case-card-image-link:hover img {
    transform: translateY(-4px);
  }
}

.case-card-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-image);
  border: 1px solid var(--border);
}

.pos-top {
  object-position: top !important;
}

.pos-top-left {
  object-position: top left !important;
}

.case-card-body {
  flex: 1 1 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.case-card-title {
  margin: 0;
  font-size: clamp(32px, 3.4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.case-card-story {
  margin: 0;
  font-size: 18px;
  color: var(--text-2);
  text-wrap: pretty;
}

.case-card-stack {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

.case-card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 16px;
  font-weight: 700;
}

/* ---------- More projects ---------- */

.eyebrow {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.more-projects {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--border);
  padding-top: 24px;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 12px;
}

.project-card,
.project-card:hover {
  background: var(--surface);
  border-radius: var(--radius-shot);
  padding: 18px 20px;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.project-card strong {
  font-size: 18px;
}

.project-card {
  transition: box-shadow 0.2s, transform 0.2s;
}

/* Inset shadow draws the accent outline without changing the card's size */
.project-card:hover {
  box-shadow: inset 0 0 0 1px var(--accent), 0 12px 32px rgba(15, 27, 45, 0.14);
}

@media (prefers-reduced-motion: no-preference) {
  .project-card:hover {
    transform: translateY(-4px);
  }
}

.project-card:hover strong {
  color: var(--accent);
}

.project-card span {
  color: var(--muted);
  font-size: 15px;
}

/* ---------- Testimonial (business view) ---------- */

.testimonial {
  margin: 0;
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: clamp(24px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.testimonial blockquote {
  margin: 0;
  font-size: 24px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.testimonial figcaption {
  color: var(--muted);
}

/* ---------- About ---------- */

.about {
  margin-top: 64px;
  border-top: 1px solid var(--border);
  padding: 56px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
}

.about-photo {
  flex: 0 0 240px;
  width: 240px;
  max-width: 100%;
}

.about-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
}

.about-copy {
  flex: 1 1 420px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Photo and text stay side by side down to 680px; the text column
   narrows instead of wrapping. Below that, the text stacks under the photo. */
@media (min-width: 680px) {
  .about {
    flex-wrap: nowrap;
  }
}

/* 18px at 780px+, easing to 17px at 680px and below */
.about-copy p {
  margin: 0;
  font-size: clamp(17px, calc(10.2px + 1vw), 18px);
  line-height: 1.5;
  color: var(--text);
}

/* ---------- Contact (home) ---------- */

.contact {
  border-top: 1px solid var(--border);
  padding: 64px 0 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: flex-start;
}

.contact-title {
  margin: 0;
  font-size: clamp(36px, 4.4vw, 56px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.contact-intro {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-intro p {
  margin: 0;
  color: var(--text-2);
}

.contact-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-weight: 600;
}

/* ---------- Contact form ---------- */

/* min-width: 0 and full-width fields keep the form inside a 320px viewport */
.contact-form {
  flex: 1 1 480px;
  min-width: 0;
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: clamp(24px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 18px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label {
  font-size: 14px;
  font-weight: 600;
}

.field input,
.field select,
.field textarea {
  font: inherit;
  width: 100%;
  padding: 12px 14px;
  min-height: 48px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-input);
  background: var(--surface);
  color: var(--ink);
}

.field textarea {
  resize: vertical;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline-offset: 1px;
  border-color: var(--accent);
}

.form-submit {
  font: inherit;
  align-self: flex-start;
  background: var(--accent);
  color: #FFFFFF;
  border: 0;
  border-radius: var(--radius-button);
  padding: 14px 26px;
  min-height: 48px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s;
}

.form-submit:hover {
  background: var(--accent-hover);
}

.form-note {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

/* ---------- Project band (business view) ---------- */

.project-band {
  flex: 1 1 100%;
  padding: clamp(28px, 5vw, 56px);
  display: flex;
  flex-wrap: wrap;
  gap: 32px 48px;
  align-items: flex-end;
  justify-content: space-between;
}

.project-band-copy {
  flex: 1 1 420px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.project-band-copy p {
  margin: 0;
  color: var(--dark-text);
  font-size: 19px;
  max-width: 560px;
}

.project-band-actions {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.project-band-actions .btn {
  padding: 16px 24px;
}

.project-band-email,
.project-band-email:hover {
  color: #FFFFFF;
  font-weight: 600;
}

/* ---------- Footer ---------- */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding: 32px 0 40px;
  font-size: 14px;
  color: var(--muted);
}

/* Home: the footer follows the contact section, so it gets a rule */
.site-footer--ruled {
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* ---------- Message pages (thanks, 404) ---------- */

.message-page {
  padding: 72px 0 96px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.message-title {
  margin: 0;
  font-weight: 900;
  font-size: clamp(44px, 7vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.message-lede {
  margin: 0;
  max-width: 720px;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.35;
  font-weight: 500;
  color: var(--text-2);
}

/* ==========================================================
   Case studies
   ========================================================== */

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

.case-hero {
  padding: 40px 0 48px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.back-link {
  align-self: flex-start;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.case-title {
  margin: 0;
  font-weight: 900;
  font-size: clamp(52px, 8vw, 112px);
  line-height: 0.92;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.case-lede {
  margin: 0;
  max-width: 820px;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.35;
  font-weight: 500;
  color: var(--text-2);
  text-wrap: pretty;
}

.case-facts {
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 24px;
  border-top: 2px solid var(--ink);
  padding-top: 24px;
  font-size: 16px;
}

.case-facts > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.case-facts dt {
  color: var(--muted);
  font-weight: 600;
}

.case-facts dd {
  margin: 0;
  font-weight: 600;
}

.fact-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fact-note {
  color: var(--muted);
  font-weight: 500;
  font-size: 15px;
}

/* CovetCare facts in their 2-column range (516-813px): two independent
   columns, My role + Stack on the left and Worked with + Integrations on
   the right, so the tall "Worked with" doesn't open a gap under My role.
   Spanning rows keeps the HTML (and reading) order unchanged. */
@media (min-width: 516px) and (max-width: 813px) {
  .case-facts--split {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "role   worked"
      "stack  worked"
      "stack  integrations";
    align-items: start;
  }

  .case-facts--split > :nth-child(1) { grid-area: role; }
  .case-facts--split > :nth-child(2) { grid-area: worked; }
  .case-facts--split > :nth-child(3) { grid-area: stack; }
  .case-facts--split > :nth-child(4) { grid-area: integrations; }
}

/* Launch facts in the same 2-column range: Built for and Stack swap places
   so the longer items (My role, Stack) share a row and the shorter ones
   (Timeline, Built for) share the other */
@media (min-width: 516px) and (max-width: 813px) {
  .case-facts--paired {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "role      stack"
      "timeline  built";
  }

  .case-facts--paired > :nth-child(1) { grid-area: role; }
  .case-facts--paired > :nth-child(2) { grid-area: built; }
  .case-facts--paired > :nth-child(3) { grid-area: timeline; }
  .case-facts--paired > :nth-child(4) { grid-area: stack; }
}

/* CovetCare "My role": the two roles stack without the dot at 532px and under */
@media (max-width: 532px) {
  .role-part {
    display: block;
  }

  .role-sep {
    display: none;
  }
}

/* ---------- Case figures ---------- */

.case-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.case-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-image);
}

.case-figure figcaption {
  font-size: 14px;
  color: var(--muted);
}

.hero-shot img {
  border-radius: var(--radius-card);
}

/* ---------- Stat tiles ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 16px;
  padding: 56px 0 24px;
}

.stat {
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-num {
  font-size: 56px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}

.stat-label {
  color: var(--text-2);
  font-size: 16px;
}

/* ---------- Case article sections ---------- */

.case-article {
  display: flex;
  flex-direction: column;
  padding: 24px 0 32px;
}

/* CovetCare: the stat tiles already supply the space above */
.case-article--flush {
  padding-top: 0;
}

.case-section {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 64px;
  padding: 56px 0;
  border-bottom: 1px solid var(--border);
}

.case-section:last-child {
  border-bottom: 0;
}

.case-section > h2,
.case-section-head h2 {
  margin: 0;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.case-section > h2 {
  flex: 1 1 260px;
}

.case-body {
  flex: 2 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: var(--text);
}

.case-body p {
  margin: 0;
}

.figure-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 8px;
}

/* Three phone screenshots side by side; each opens full size on tap */
.phone-shots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-items: start;
}

.phone-shots .zoom-link {
  border-radius: var(--radius-shot);
}

.case-body h3 {
  margin: 12px 0 0;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ink);
}

.case-body ul {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.case-body .list-snug {
  gap: 8px;
}

.case-body .list-tight {
  gap: 6px;
}

/* ---------- HL7 mapping table ---------- */

.data-figure {
  margin: 8px 0 0;
  background: var(--surface);
  border-radius: var(--radius-image);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Wider than a phone on purpose: it scrolls inside this wrapper, not the page */
.table-scroll {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 15px;
  text-align: left;
}

.data-table th,
.data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--bg);
}

.data-table th {
  padding-top: 8px;
  padding-bottom: 8px;
  font-weight: 600;
  color: var(--muted);
  border-bottom-color: var(--divider);
}

.data-table :is(th, td):first-child {
  padding-left: 0;
}

.data-table :is(th, td):last-child {
  padding-right: 0;
}

.data-table td:nth-child(2) {
  font-weight: 600;
}

.data-table td:last-child {
  color: var(--text-2);
}

.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.data-figure figcaption {
  font-size: 14px;
  color: var(--muted);
}

/* ---------- Testimonial grid (CovetCare) ---------- */

.case-section--stacked {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 28px;
}

.case-section-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.case-section-head p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}

.quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 16px;
}

.quote-card {
  margin: 0;
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}

.quote-card blockquote {
  margin: 0;
  font-size: 19px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink);
}

.quote-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 15px;
}

.quote-card figcaption span {
  color: var(--muted);
}

/* ---------- Next case study ---------- */

.next-case {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 0 56px;
}

.next-case-card,
.next-case-card:hover {
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
}

.next-case-card:hover strong {
  color: var(--accent);
}

.next-case-media {
  flex: 0 1 280px;
  min-width: 0;
  width: 280px;
}

.next-case-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-button);
}

.next-case-body {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
}

.next-case-body strong {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

/* ---------- Case contact band ---------- */

.contact-band {
  padding: clamp(20px, 5vw, 56px);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}

.contact-band-title {
  margin: 0;
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

/* Fluid padding/size + the <wbr> after @ keep the address intact at 320px */
.btn-email {
  max-width: 100%;
  padding: 14px clamp(16px, 4vw, 22px);
  font-size: clamp(14px, 4.5vw, 16px);
}

/* Wide screenshots link to the full-size file so phones can zoom in */
.zoom-link {
  display: block;
  cursor: zoom-in;
  border-radius: var(--radius-image);
}

.hero-shot .zoom-link {
  border-radius: var(--radius-card);
}

.hero-shot--bordered img {
  border: 1px solid var(--border);
}

/* ---------- Screenshot grids ---------- */

.shot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 16px;
  margin-top: 8px;
  align-items: start;
}

/* Inside a figure the figure-stack already supplies the top spacing */
.case-figure .shot-grid {
  margin-top: 0;
}

.shot-grid .zoom-link {
  border-radius: var(--radius-shot);
}

.shot-grid--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

.shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-shot);
  border: 1px solid var(--border);
}

/* ---------- Side-by-side lists (Launch: Under the hood) ---------- */

.stack-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
}

.stack-col {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Backdrop behind the transparent CovetCare PNG */
.next-case-tint {
  background: #F1ECEB;
}

/* ---------- BCC archive notice ---------- */

.notice {
  margin: 0;
  max-width: 820px;
  background: var(--surface);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-button);
  padding: 16px 20px;
  font-size: 16px;
  color: var(--text);
}

.hero-cta {
  align-self: flex-start;
}

.hero-shot--banner img {
  aspect-ratio: 16 / 8;
  object-fit: cover;
  object-position: top;
}

/* ---------- Version headings (BCC) ---------- */

.version-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 12px;
}

.case-body .version-head h3 {
  margin: 0;
}

.version-head span {
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
}

.shot--spaced {
  margin-top: 8px;
}

/* ---------- Inline testimonial (BCC) ---------- */

.inline-quote {
  margin: 8px 0 0;
  background: var(--surface);
  border-radius: var(--radius-image);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inline-quote blockquote {
  margin: 0;
  font-size: 22px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink);
}

.inline-quote figcaption {
  color: var(--muted);
  font-size: 15px;
}

.back-link--end {
  display: inline-block;
  margin: 8px 0 48px;
  font-size: 16px;
}

.contact-band--business {
  padding: clamp(28px, 5vw, 56px);
}

.contact-band-copy {
  flex: 1 1 380px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-band-copy p {
  margin: 0;
  color: var(--dark-text);
}

.message-kicker {
  margin: 0;
}