/* ─────────────────────────────────────────────────────
   Sam Young — Lead Product Designer
   Minimalist · cards · grotesk · single accent · tight copy
   ───────────────────────────────────────────────────── */

@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap');

:root {
  /* Surfaces — neutral paper, soft cards, true black */
  --paper:        #f5f5f3;
  --paper-2:      #f0f0ee;
  --card:         #fdfdfb;
  --card-rule:    #e6e6e3;
  --ink:          #0e0e0e;
  --ink-2:        #1a1a1a;
  --mute:         #6f6f6c;
  --mute-2:       #9a9a96;
  --rule:         #d8d8d3;

  /* Single accent + dark */
  --accent:       #1a1a18;       /* warm dark charcoal */
  --dark:         #0e0e0e;
  --on-dark:      #f1f1ef;
  --on-dark-mute: #9a9a96;

  /* Type */
  --sans: 'General Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Type sizes */
  --t-display: clamp(2.6rem, 6vw, 5.5rem);
  --t-h1:      clamp(2rem, 4.4vw, 3.6rem);
  --t-h2:      clamp(1.6rem, 3vw, 2.6rem);
  --t-h3:      clamp(1.2rem, 1.8vw, 1.6rem);
  --t-body:    1rem;
  --t-small:   0.85rem;
  --t-tiny:    0.74rem;

  /* Layout */
  --max:    1380px;
  --max-md: 1080px;
  --gutter: clamp(20px, 4vw, 56px);

  /* Radius */
  --r-sm: 7px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 29px;

  /* Motion */
  --ease:     cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── Reset ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
ul, ol { list-style: none; }
::selection { background: var(--ink); color: var(--paper); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid currentColor; outline-offset: 3px; border-radius: 6px;
}

/* ─── Layout ─────────────────────────────────────────── */
.wrap    { width: min(100% - var(--gutter)*2, var(--max));    margin-inline: auto; }
.wrap-md { width: min(100% - var(--gutter)*2, var(--max-md)); margin-inline: auto; }
section  { padding-block: clamp(56px, 8vw, 120px); }

/* ─── Eyebrow ────────────────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: var(--t-tiny);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }

/* ─── Pill button ────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: gap 0.35s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease);
}
.pill:hover { gap: 14px; }
.pill svg { transition: transform 0.35s var(--ease); }
.pill:hover svg { transform: translateX(3px); }
.pill.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pill.ghost:hover { background: var(--ink); color: var(--paper); }
.pill.on-dark { background: var(--paper); color: var(--ink); }
.pill.on-dark:hover { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1px var(--paper); }

/* ─── Header ─────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  padding: 20px 0;
  background: var(--paper);
  transition: transform 0.4s var(--ease);
}
.site-header.nav-hidden { transform: translateY(-100%); }
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

.brand {
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 500; font-size: 0.95rem; color: inherit;
}
.brand-mark {
  width: 64px;
  height: auto;
  flex: 0 0 auto;
  display: block;
  color: var(--ink);
}

.nav { display: flex; gap: 4px; align-items: center; font-size: var(--t-small); }
.nav a {
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--mute);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { background: var(--paper-2); color: var(--ink); }
.nav a.cta {
  background: var(--ink); color: var(--paper);
  font-weight: 500;
  margin-left: 8px;
  padding: 10px 22px;
}
.nav a.cta:hover { background: var(--ink-2); color: var(--paper); }

.nav-burger {
  display: none;
  width: 28px; height: 22px;
  position: relative;
}
.nav-burger span {
  position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
  transition: transform 0.3s var(--ease), top 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav-burger span:nth-child(1) { top: 5px; }
.nav-burger span:nth-child(2) { top: 11px; }
.nav-burger span:nth-child(3) { top: 17px; }
.nav-burger.is-open span:nth-child(1) { top: 11px; transform: rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { top: 11px; transform: rotate(-45deg); }

@media (max-width: 740px) {
  .nav-burger { display: block; }
  .nav {
    position: fixed; inset: 0; z-index: 49;
    background: var(--paper);
    flex-direction: column; gap: 14px;
    align-items: center; justify-content: center;
    font-size: 1.4rem;
    transform: translateY(-100%);
    transition: transform 0.4s var(--ease);
  }
  .nav.is-open { transform: translateY(0); }
  .nav a { color: var(--mute); }
  .nav a.cta { background: var(--ink); color: var(--paper); }
}

/* ─── Hero ───────────────────────────────────────────── */
.hero {
  min-height: calc(100svh - 80px);
  display: flex;
  align-items: center;
  padding-block: clamp(40px, 5vw, 72px);
}
.hero-wrap {
  display: grid;
  grid-template-columns: 54fr 46fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
}
.hero-text { display: flex; flex-direction: column; }
.hero-intro {
  font-family: var(--mono);
  font-size: var(--t-tiny);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 24px;
}
.hero .greeting {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: var(--t-tiny);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 20px;
}
.hero .greeting .dot {
  width: 8px; height: 8px;
  background: #2ea827; border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(46,168,39,0.18);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(46,168,39,0.18); }
  50%      { box-shadow: 0 0 0 6px rgba(46,168,39,0.05); }
}
.hero h1 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-display);
  line-height: 0.92;
  letter-spacing: -0.045em;
  max-width: 14ch;
}
.hero .lede {
  margin-top: clamp(24px, 3.5vw, 40px);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  max-width: 38ch;
  color: var(--mute);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.hero .row {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: clamp(32px, 4vw, 48px);
}

/* ─── Hero showcase ──────────────────────────────────── */
.hero-showcase-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hero-showcase {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  width: 100%;
  background: var(--paper-2);
}
.showcase-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
.showcase-slide.is-active { opacity: 1; }
.showcase-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
}
.showcase-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}
.showcase-label {
  font-family: var(--mono);
  font-size: var(--t-tiny);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mute);
}
.showcase-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}
.sdot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--rule);
  transition: background 0.35s ease, transform 0.35s ease;
}
.sdot.is-active {
  background: var(--ink);
  transform: scale(1.3);
}

@media (max-width: 900px) {
  .hero-wrap {
    grid-template-columns: 1fr;
    gap: clamp(28px, 5vw, 48px);
  }
  /* showcase sits below text on mobile — natural DOM order */
}
@media (max-width: 600px) {
  /* showcase aspect-ratio handles mobile sizing */
}

/* ─── Section heading ────────────────────────────────── */
.sect-head {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.sect-head h2 {
  font-weight: 600;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.035em;
  max-width: 22ch;
}
.sect-head p {
  font-size: 1rem; line-height: 1.5; color: var(--mute);
  max-width: 50ch;
}

/* ─── Cards (general) ────────────────────────────────── */
.card {
  background: var(--card);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 36px);
  position: relative;
  overflow: hidden;
}
.card.dark { background: var(--dark); color: var(--on-dark); }
.card.accent { background: var(--accent); color: var(--on-dark); }
.card.tall { padding: clamp(28px, 4vw, 48px); }
.card.flat { padding: 0; overflow: hidden; }

/* ─── Work mosaic ────────────────────────────────────── */
.work-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.6vw, 20px);
}
.work-card {
  display: flex; flex-direction: column;
  background: var(--card);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform 0.5s var(--ease), background 0.5s var(--ease);
}
.work-card:hover { background: #fff; transform: translateY(-3px); }
.work-card .visual {
  aspect-ratio: 16/10;
  background: var(--paper-2);
  overflow: hidden;
  margin: clamp(16px, 2vw, 24px) clamp(16px, 2vw, 24px) 0;
  border-radius: var(--r);
}
.work-card .visual img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.work-card:hover .visual img { transform: scale(1.04); }
.work-card .body {
  padding: clamp(18px, 2vw, 28px) clamp(18px, 2vw, 28px) clamp(20px, 2vw, 28px);
  display: flex; flex-direction: column; gap: 12px;
  flex: 1;
}
.work-card .meta-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  font-family: var(--mono); font-size: var(--t-tiny);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mute);
}
.work-card .num { color: var(--ink); }
.work-card h3 {
  font-weight: 600;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.work-card p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--mute);
  max-width: 42ch;
}
.work-card .card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 4px;
}
.work-card .tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  flex: 1;
}
.work-card .tags span {
  font-family: var(--mono);
  font-size: var(--t-tiny);
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--mute);
}
.work-card .arrow {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--t-small);
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.work-card:hover .arrow {
  background: var(--ink);
  color: var(--paper);
}
.work-card .arrow svg { transition: transform 0.4s var(--ease); }
.work-card:hover .arrow svg { transform: translateX(4px); }

@media (max-width: 760px) {
  .work-grid { grid-template-columns: 1fr; }
}

/* ─── Stat row ───────────────────────────────────────── */
.stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
}
.stat {
  background: var(--card);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 36px);
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 200px;
  position: relative;
  overflow: hidden;
}
.stat.dark { background: var(--dark); color: var(--on-dark); }
.stat.accent { background: var(--accent); color: var(--on-dark); }
.stat .label {
  display: flex; flex-direction: column; gap: 6px;
}
.stat .label h3 {
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: -0.015em;
}
.stat .label p {
  font-size: 0.92rem;
  color: var(--mute);
}
.stat.dark .label p { color: var(--on-dark-mute); }
.stat .figure {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
}
.stat .num {
  font-weight: 600;
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.stat .num.small {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.stat .icon-chip {
  width: 40px; height: 40px;
  border-radius: 7px;
  border: 1.5px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.stat.dark .icon-chip { border-color: var(--on-dark); }
.stat.accent .icon-chip { border-color: var(--on-dark); }
.stat .icon-chip svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }

@media (max-width: 760px) {
  .stat-row { grid-template-columns: 1fr; }
}

/* ─── Trusted-by row ─────────────────────────────────── */
.trusted-grid {
  display: grid;
  grid-template-columns: 1.2fr repeat(5, 1fr);
  gap: clamp(8px, 1.2vw, 14px);
}
.trusted-tile {
  background: var(--card);
  border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center;
  padding: 32px 16px;
  min-height: 140px;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--ink);
}
.trusted-tile img {
  max-width: 70%;
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: opacity 0.4s ease;
}
.trusted-tile.intro {
  align-items: flex-start; justify-content: flex-start;
  flex-direction: column; gap: 16px;
  padding: clamp(24px, 3vw, 36px);
  text-align: left;
}
.trusted-tile.intro h3 {
  font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 600;
  letter-spacing: -0.025em; line-height: 1; margin-bottom: 8px;
}
.trusted-tile.intro p {
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--mute);
  line-height: 1.5;
  max-width: 28ch;
}
@media (max-width: 1100px) {
  .trusted-grid { grid-template-columns: 1.2fr repeat(3, 1fr); }
  .trusted-tile:nth-child(n+5):not(.intro) { display: none; }
}
@media (max-width: 760px) {
  .trusted-grid { grid-template-columns: 1fr 1fr; }
  .trusted-tile.intro { grid-column: 1 / -1; }
  /* Show all logo tiles — the 1fr 1fr grid can fit them all cleanly */
  .trusted-tile:nth-child(n+5):not(.intro) { display: flex; }
}

/* ─── Quote card (dark) ──────────────────────────────── */
.quote-card {
  background: var(--dark);
  color: var(--on-dark);
  border-radius: var(--r-xl);
  padding: clamp(36px, 5vw, 80px);
}
.quote-card blockquote {
  font-weight: 500;
  font-size: clamp(1.4rem, 2.6vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  max-width: 26ch;
}
.quote-card cite {
  display: block;
  margin-top: 28px;
  font-style: normal;
  font-family: var(--mono);
  font-size: var(--t-tiny);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--on-dark-mute);
}

/* ─── About section ──────────────────────────────────── */
.about-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: stretch;
}
.about-portrait {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-2);
  /* No aspect-ratio on desktop — let align-items:stretch drive height
     so the portrait always matches the text card. Aspect ratio re-applied
     on mobile where the grid is single-column. */
  min-height: clamp(340px, 38vw, 520px);
}
.about-portrait img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  filter: contrast(1.02) saturate(0.95);
}
.about-text {
  background: var(--card);
  border-radius: var(--r-lg);
  padding: clamp(28px, 4vw, 56px);
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 32px;
}
.about-text h3 {
  font-weight: 600;
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-bottom: 18px;
}
.about-text p {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--mute);
  max-width: 50ch;
}
.about-text p + p { margin-top: 12px; }
.about-skills {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--card-rule);
  padding-top: 20px;
}
.about-skills li {
  font-size: 0.92rem;
  padding: 8px 0;
  display: flex; align-items: center; gap: 10px;
  color: var(--ink);
}
.about-skills li::before {
  content: ''; width: 6px; height: 6px;
  background: var(--ink); border-radius: 2px; flex-shrink: 0;
}

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-portrait { aspect-ratio: 4/3; min-height: unset; }
}
@media (max-width: 540px) {
  .about-skills { grid-template-columns: 1fr; }
}

/* ─── Services ───────────────────────────────────────── */
.services-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
}
.service {
  background: var(--card);
  border-radius: var(--r-lg);
  padding: clamp(28px, 3vw, 40px);
  display: flex; flex-direction: column;
  gap: 14px;
}
.service .num {
  font-family: var(--mono); font-size: var(--t-tiny);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mute);
}
.service h3 {
  font-weight: 600;
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.service p {
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--mute);
}

@media (max-width: 900px) {
  .services-grid { grid-template-columns: 1fr; }
}

/* ─── Contact ────────────────────────────────────────── */
.contact-card {
  background: var(--dark);
  color: var(--on-dark);
  border-radius: var(--r-xl);
  padding: clamp(36px, 5vw, 72px);
}
.contact-card h2 {
  font-weight: 600;
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  max-width: 16ch;
}
.contact-card .lede {
  margin-top: 18px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--on-dark-mute);
  max-width: 50ch;
}
.contact-card .greeting {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: var(--t-tiny);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
  margin-top: 24px;
}
.contact-card .grid {
  margin-top: clamp(36px, 5vw, 56px);
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.contact-card .links { display: flex; flex-direction: column; gap: 4px; }
.contact-card .link {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid rgba(241,241,239,0.18);
  transition: padding 0.35s var(--ease);
}
.contact-card .link:hover { padding-left: 8px; }
.contact-card .link .label {
  font-family: var(--mono); font-size: var(--t-tiny);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-dark-mute);
  margin-bottom: 6px;
}
.contact-card .link .value {
  display: block; font-size: 1rem; color: var(--on-dark);
  font-weight: 500; letter-spacing: -0.01em;
}
.contact-card .link .arrow { color: var(--on-dark-mute); transition: transform 0.35s var(--ease), color 0.35s var(--ease); }
.contact-card .link:hover .arrow { transform: translateX(6px); color: var(--on-dark); }

/* ─── Contact icons ───────────────────────────────── */
.contact-icons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 8px;
}
.contact-icon-link {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--on-dark);
  transition: opacity 0.25s var(--ease);
}
.contact-icon-link:hover { opacity: 0.7; }
.contact-icon-link .icon-wrap {
  width: 64px; height: 52px;
  border-radius: 13px;
  border: 1.5px solid rgba(241,241,239,0.22);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.contact-icon-link:hover .icon-wrap {
  border-color: rgba(241,241,239,0.5);
  background: rgba(241,241,239,0.06);
}
.contact-icon-link span:last-child {
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.contact-form {
  display: grid; gap: 4px;
}
.contact-form .row {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(241,241,239,0.18);
}
.contact-form label {
  font-family: var(--mono);
  font-size: var(--t-tiny);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
}
.contact-form input,
.contact-form textarea {
  background: transparent;
  border: none; outline: none;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--on-dark);
  resize: vertical;
}
.contact-form textarea { min-height: 90px; line-height: 1.5; }
.contact-form button {
  justify-self: start;
  align-self: start;
  margin-top: 24px;
}
.form-msg { font-family: var(--mono); font-size: var(--t-small); margin-top: 14px; min-height: 16px; }
.form-msg.success { color: #6fcf6c; }
.form-msg.error   { color: #ff8c8c; }

@media (max-width: 900px) {
  .contact-card .grid { grid-template-columns: 1fr; }
  .contact-card h2 { max-width: none; }
}

/* ─── Footer ─────────────────────────────────────────── */
.site-footer {
  padding-block: clamp(28px, 4vw, 44px);
}
.site-footer .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.site-footer p {
  font-family: var(--mono);
  font-size: var(--t-tiny);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0;
}
.site-footer a {
  font-family: var(--mono);
  font-size: var(--t-tiny);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.site-footer a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ─── Gate ───────────────────────────────────────────── */
body.gate-open { overflow: hidden; }

.gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  transition: opacity 0.5s ease;
}
.gate--out {
  opacity: 0;
  pointer-events: none;
}
.gate-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
  max-width: 400px;
  text-align: center;
}
.gate-logo img {
  height: 50px;
  width: auto;
}
.gate-copy {
  font-family: var(--mono);
  font-size: var(--t-tiny);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mute);
}
.gate-form {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.gate-field {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}
.gate-input {
  width: 100%;
  height: 52px;
  padding: 0 18px;
  font-family: var(--sans);
  font-size: var(--t-body);
  color: var(--ink);
  background: var(--card);
  border: 1.5px solid var(--rule);
  border-radius: var(--r);
  outline: none;
  transition: border-color 0.2s;
}
.gate-input::placeholder { color: var(--mute-2); }
.gate-input:focus { border-color: var(--ink); border-radius: var(--r); outline: none; }
.gate-input:focus-visible { outline: none; border-radius: var(--r); }
.gate-btn {
  width: 100%;
  height: 52px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--paper);
  background: var(--ink);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: gap 0.35s var(--ease), opacity 0.2s;
}
.gate-btn svg {
  width: 16px; height: 11px;
  flex-shrink: 0;
  transition: transform 0.35s var(--ease);
}
.gate-btn:hover { opacity: 0.8; }
.gate-btn:hover svg { transform: translateX(3px); }
.gate-error {
  position: absolute;
  top: calc(100% + 10px);
  left: 0; right: 0;
  font-size: var(--t-small);
  color: #c0392b;
  text-align: center;
  line-height: 1.4;
  pointer-events: none;
}
.gate-contact {
  font-family: var(--mono);
  font-size: var(--t-tiny);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mute);
  text-decoration: none;
  transition: color 0.2s;
}
.gate-contact:hover { color: var(--ink); }

/* ─── Footer — removed ───────────────────────────────── */
/* .site-footer {
  padding-block: 32px 36px;
}
.site-footer .wrap {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 16px;
  font-size: var(--t-small);
  color: var(--mute);
}
.site-footer .footer-brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink);
}
.site-footer .footer-brand svg { width: 22px; height: 17px; }
.site-footer nav { display: flex; gap: 16px; }
.site-footer nav a { color: var(--mute); transition: color 0.3s var(--ease); }
.site-footer nav a:hover { color: var(--ink); }
.site-footer .copy { font-family: var(--mono); font-size: var(--t-tiny); letter-spacing: 0.04em; } */

/* ─────────────────────────────────────────────────────
   Case study pages
   ───────────────────────────────────────────────────── */

/* Case hero — clean, full-width image, content above */
.case-hero {
  padding-block: clamp(48px, 7vw, 96px) clamp(28px, 4vw, 48px);
}
.case-hero .meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 28px;
}
.case-hero .meta .tag {
  font-family: var(--mono);
  font-size: var(--t-tiny);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 12px;
  background: var(--paper-2);
  border-radius: 999px;
  color: var(--mute);
}
.case-hero h1 {
  font-weight: 600;
  font-size: clamp(2.6rem, 6.5vw, 5.6rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  max-width: 16ch;
}
.case-hero .standfirst {
  margin-top: 28px;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.4;
  color: var(--mute);
  max-width: 56ch;
}
.case-hero .meta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 20px;
  row-gap: 0;
  margin-top: clamp(40px, 5vw, 56px);
}
.case-hero .meta-grid dt {
  font-family: var(--mono);
  font-size: var(--t-tiny);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mute);
  margin-bottom: 6px;
}
.case-hero .meta-grid dd { font-weight: 500; font-size: 0.95rem; }

@media (max-width: 760px) {
  .case-hero .meta-grid { grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 16px; }
}

.case-cover .frame {
  aspect-ratio: 16/9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-2);
}
.case-cover img,
.case-cover video { width: 100%; height: 100%; object-fit: cover; }

/* Brief — 2 columns: summary + bullets */
.brief-card {
  margin-top: clamp(48px, 7vw, 96px);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  background: var(--card);
  border-radius: var(--r-lg);
  padding: clamp(28px, 3.5vw, 40px);
}
.brief-card .label {
  font-family: var(--mono); font-size: var(--t-tiny);
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--mute);
  display: block; margin-bottom: 14px;
}
.brief-card .summary {
  font-weight: 500;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.brief-card ul { display: grid; gap: 10px; align-content: start; padding-top: 32px; }
.brief-card ul li {
  font-size: 0.95rem; line-height: 1.5;
  display: flex; gap: 12px; align-items: flex-start;
  color: var(--mute);
}
.brief-card ul li::before {
  content: ''; width: 6px; height: 6px;
  border-radius: 2px; background: var(--accent);
  flex-shrink: 0; margin-top: 7px;
}

@media (max-width: 760px) { .brief-card { grid-template-columns: 1fr; } }

/* ── Team module ── */
.team-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: var(--r-lg);
  padding: clamp(28px, 3.5vw, 40px);
  margin-block: clamp(12px, 1.5vw, 20px);
}
/* ── Contribution bullets ── */
.team-contributions .label {
  font-family: var(--mono);
  font-size: var(--t-tiny);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--mute);
  display: block;
  margin-bottom: 16px;
}
.team-contributions ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px clamp(24px, 4vw, 48px);
}
.team-contributions li {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--mute);
  display: flex; gap: 12px; align-items: flex-start;
}
.team-contributions li::before {
  content: ''; width: 6px; height: 6px;
  border-radius: 2px; background: var(--accent);
  flex-shrink: 0; margin-top: 7px;
}
@media (max-width: 760px) {
  .team-contributions ul { grid-template-columns: 1fr; }
}

/* Sub-section heading */
.case-sect-head { margin-bottom: clamp(24px, 3vw, 36px); }
.case-sect-head .label {
  font-family: var(--mono); font-size: var(--t-tiny);
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--mute);
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.case-sect-head .label::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink);
  flex-shrink: 0;
}
.case-sect-head h2 {
  font-weight: 600;
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  line-height: 1;
  letter-spacing: -0.035em;
}

/* 3-col card row */
.col-3 {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
}
.col-3 .card { padding: clamp(28px, 3.5vw, 40px); min-height: 200px; }
.col-3 h3 {
  font-weight: 600; font-size: 1rem; letter-spacing: -0.015em;
  margin-bottom: 12px;
}
.col-3 p, .col-3 li {
  font-size: 0.92rem; line-height: 1.5; color: var(--mute);
}
.col-3 ul { display: grid; gap: 8px; margin-top: 16px; }
.col-3 ul li { padding-left: 16px; position: relative; }
.col-3 ul li::before {
  content: ''; position: absolute; left: 2px; top: 0.6em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--ink);
}

@media (max-width: 900px) { .col-3 { grid-template-columns: 1fr; } }

/* Solution row — image + text */
.solution {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.6vw, 20px);
  align-items: stretch;
}
.solution + .solution { margin-top: clamp(16px, 2vw, 24px); }
.solution.reverse .text { order: 2; }
.solution.reverse .visual { order: 1; }
.solution .text {
  background: var(--card);
  border-radius: var(--r-lg);
  padding: clamp(28px, 4vw, 48px);
  display: flex; flex-direction: column; justify-content: center;
  gap: 12px;
}
.solution .text .num {
  font-family: var(--mono); font-size: var(--t-tiny);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 4px;
}
.solution .text h3 {
  font-weight: 600;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.solution .text p {
  font-size: 0.98rem; line-height: 1.55;
  color: var(--mute);
  max-width: 42ch;
}
.solution .visual {
  background: var(--paper-2);
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
}
.solution .visual img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .solution { grid-template-columns: 1fr; }
  .solution.reverse .text, .solution.reverse .visual { order: initial; }
}

/* Impact stats with icon chips */
.impact-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 20px); }
@media (max-width: 760px) { .impact-stats { grid-template-columns: 1fr; } }

/* Next-up */
.next-up {
  background: var(--card);
  border-radius: var(--r-xl);
  padding: clamp(36px, 5vw, 72px);
  display: flex; flex-direction: column; gap: 16px;
}
.next-up .label {
  font-family: var(--mono); font-size: var(--t-tiny);
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--mute);
}
.next-up a {
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 4.2rem);
  line-height: 1;
  letter-spacing: -0.04em;
  display: inline-flex; align-items: baseline; gap: 18px;
  flex-wrap: wrap;
  color: var(--ink);
  transition: gap 0.4s var(--ease);
}
.next-up a:hover { gap: 28px; }
.next-up a .arrow {
  font-size: 0.74rem;
  font-family: var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 400;
}

/* ─── Reveal ─────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.06s; }
.reveal.d2 { transition-delay: 0.12s; }
.reveal.d3 { transition-delay: 0.18s; }


/* ─── Mobile audit fixes ─────────────────────────────── */
@media (max-width: 740px) {
  /* Hero: don't force full-viewport height when showcase stacks below text */
  .hero { min-height: unset; padding-block: clamp(40px, 8vw, 64px); }

  /* Hero text doesn't need max-width constraint on small screens */
  .hero h1 { max-width: none; }
  .hero .lede { max-width: none; }

  /* Work cards: thumbnail slightly shorter on small screens */
  .work-card .visual { aspect-ratio: 3/2; }

  /* Stat row stacks on mobile */
  .stat-row { grid-template-columns: 1fr; }

  /* Work card footer: let tags and CTA wrap so they don't overflow */
  .work-card .card-footer { flex-wrap: wrap; }
  .work-card .arrow { width: 100%; justify-content: center; }

  /* Case study meta grid: 2 cols on mobile */
  .meta-grid { grid-template-columns: 1fr 1fr; }

  /* Quote card padding */
  .quote-card { padding: clamp(24px, 5vw, 40px); }

  /* Solution images don't need fixed aspect on mobile */
  .solution .visual img { aspect-ratio: auto; max-height: 340px; object-fit: contain; }

  /* Pills slightly smaller on mobile */
  .pill { font-size: 0.85rem; padding: 12px 20px; }

  /* Contact card: tighten padding */
  .contact-card { padding: clamp(24px, 6vw, 48px); }

  /* Next-up: smaller type on mobile */
  .next-up a { font-size: clamp(1.6rem, 7vw, 2.8rem); }

  /* Case hero standfirst */
  .case-hero .standfirst { font-size: clamp(1rem, 3.5vw, 1.3rem); }

  /* Trusted logos: show all on small screens */
  .trusted-tile:nth-child(n+5):not(.intro) { display: flex; }
}
@media (max-width: 480px) {
  /* Single column meta on very small screens */
  .meta-grid { grid-template-columns: 1fr; }
  /* Impact stats never overflow */
  .stat .figure .num { font-size: clamp(2rem, 10vw, 3.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero .greeting .dot { animation: none; }
  *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; }
}

/* ─── Video frame (Cloudflare Stream iframe) ─────────── */
.case-cover .frame { position: relative; }

/* Iframe fills the frame. Sits underneath the poster so the holding
   screen shows instantly while the iframe initialises in the background. */
.case-cover .frame .video-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 1;
}

/* Holding screen — poster image above the iframe until the user hits play.
   Fades out on first play and never reappears, so subsequent pauses show
   the current video frame rather than the cover image. */
.case-cover .frame .video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 10;
  transition: opacity 0.45s ease;
  pointer-events: none;
  user-select: none;
}
.case-cover .frame .video-poster.is-hidden {
  opacity: 0;
}

/* ─── Custom centred play button ─────────────────────── */
.video-play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  width: 88px; height: 88px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: none;
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: opacity 0.25s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  /* two gentle pulses on load so the eye catches it */
  animation: play-pulse 2.4s ease-in-out 0.6s 2;
  pointer-events: auto;
}
.video-play-btn svg {
  width: 34px; height: 34px;
  fill: #0e0e0e; color: #0e0e0e;
  margin-left: -2px; /* slight pull left — this path's geometry sits right of centre */
  pointer-events: none;
}
.video-play-btn:hover {
  background: rgba(255,255,255,1);
  box-shadow: 0 6px 32px rgba(0,0,0,0.45);
  transform: translate(-50%, -50%) scale(1.08);
}
.video-play-btn:focus-visible {
  outline: 2px solid rgba(255,255,255,0.7);
  outline-offset: 3px;
}
.video-play-btn.is-hidden {
  opacity: 0;
  pointer-events: none;
}
@keyframes play-pulse {
  0%   { box-shadow: 0 4px 24px rgba(0,0,0,0.35), 0 0 0 0 rgba(255,255,255,0.55); }
  55%  { box-shadow: 0 4px 24px rgba(0,0,0,0.35), 0 0 0 18px rgba(255,255,255,0); }
  100% { box-shadow: 0 4px 24px rgba(0,0,0,0.35), 0 0 0 0 rgba(255,255,255,0); }
}

/* ─── Phase Timeline ─────────────────────────────────── */
.phase-timeline {
  display: flex;
  background: var(--dark);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-block: clamp(28px, 3.5vw, 44px);
}
.phase {
  flex: 1;
  text-align: center;
  /*
    dot sits 22px from top edge; bottom padding matches that gap for visual symmetry.
    padding-top = 22 (above dot) + 10 (dot height) + 14 (gap to content) = 46px
    padding-bottom = 22px — equal to space above dot
  */
  padding: clamp(42px, 5vw, 48px) clamp(20px, 2.5vw, 28px) clamp(20px, 2.5vw, 24px);
  position: relative;
}
/* Line — sits at the vertical centre of the dot */
.phase::before {
  content: '';
  position: absolute;
  top: 27px; /* dot-top (22px) + half dot (5px) */
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(241, 241, 239, 0.16);
}
/* First phase: line starts at the dot centre (50% of the cell) */
.phase:first-child::before {
  left: 50%;
}
/* Last phase: line ends at the dot centre (50% of the cell) */
.phase:last-child::before {
  right: 50%;
  width: auto;
}
/* Dotted connector: right half of Team cell */
.phase-context::before {
  background: none;
  background-image: repeating-linear-gradient(
    to right,
    rgba(241, 241, 239, 0.35) 0px,
    rgba(241, 241, 239, 0.35) 4px,
    transparent 4px,
    transparent 9px
  );
}
/* Dotted connector: left half of Understand cell, solid right half */
.phase-context + .phase::before {
  background-image:
    repeating-linear-gradient(
      to right,
      rgba(241, 241, 239, 0.35) 0px,
      rgba(241, 241, 239, 0.35) 4px,
      transparent 4px,
      transparent 9px
    ),
    linear-gradient(
      rgba(241, 241, 239, 0.16),
      rgba(241, 241, 239, 0.16)
    );
  background-size: 50% 100%, 50% 100%;
  background-position: left center, right center;
  background-repeat: no-repeat;
  background-color: transparent;
}
/* Dot — 22px from top edge, centred horizontally in each cell */
.phase::after {
  content: '';
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(241, 241, 239, 0.6);
  box-shadow: 0 0 0 3px rgba(241, 241, 239, 0.1);
  z-index: 1;
}
.phase-index {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-tiny);
  color: rgba(241, 241, 239, 0.55);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.phase-name {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  color: var(--on-dark);
}
.phase-dur {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-tiny);
  color: rgba(241, 241, 239, 0.65);
}
@media (max-width: 760px) {
  .phase-timeline { display: grid; grid-template-columns: repeat(2, 1fr); }
  .phase::before { display: none; }
  .phase::after  { display: none; }
  .phase { padding-top: clamp(20px, 2.5vw, 28px); border-right: 1px solid rgba(241,241,239,0.07); border-bottom: 1px solid rgba(241,241,239,0.07); }
  .phase:nth-child(even)      { border-right: none; }
  .phase:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 480px) {
  .phase-timeline { grid-template-columns: 1fr; }
  .phase { border-right: none; }
  .phase:last-child { border-bottom: none; }
}

/* ─── Solution rationale annotations ────────────────── */
.solution .text .rationale {
  font-family: var(--mono);
  font-size: var(--t-tiny);
  line-height: 1.6;
  color: var(--mute);
  margin-top: 12px;
  max-width: none;
}
.solution .text .rationale::before {
  content: '→  ';
  color: var(--mute-2);
}


/* ─────────────────────────────────────────────────────
   Hero — refined with logo morph
   On the homepage (.is-home), the SY mark sits big in
   the hero and physically scales/translates into the
   nav slot as the user scrolls. Other pages get the
   static brand-mark in the nav as normal.
   ───────────────────────────────────────────────────── */

/* hide static brand-mark only on homepage and only after
   the morph script confirms it's running. If JS fails,
   .morph-ready is never added, so the static logo stays. */
body.is-home.morph-ready .site-header .brand-mark { visibility: hidden; }

/* frame wrapping the morphing logo — sits at top of viewport,
   matches the header's height, and translates upward in sync
   with .site-header.nav-hidden so the docked logo hides with
   the nav rather than floating after it. JS sets the height. */
.brand-morph-frame {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  pointer-events: none;
  transition: transform 0.4s var(--ease);
}
.brand-morph-frame.nav-hidden { transform: translateY(-100%); }

/* the morphing logo — absolute inside the frame, transformed via JS */
.brand-morph {
  position: absolute; top: 0; left: 0;
  display: block; pointer-events: auto;
  transform-origin: top left;
  will-change: transform;
  width: 280px;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.brand-morph.is-ready { opacity: 1; }
.brand-morph img { display: block; width: 100%; height: auto; }

/* spacer in the hero that reserves the layout space the
   big logo occupies. Set with the SY-logo SVG ratio so
   the H1 below sits exactly where you'd expect.
   (Sized 20% smaller than the original exploration.) */
.hero-logo-spacer {
  display: block;
  width: clamp(176px, 20.8vw, 240px);
  aspect-ratio: 224 / 132;
  margin-bottom: clamp(24px, 3vw, 40px);
}

/* Location badge — matches the case study .tag style */
.status-pill {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--mono);
  font-size: var(--t-tiny);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 12px;
  background: var(--paper-2);
  border-radius: 999px;
  color: var(--mute);
  margin-top: clamp(20px, 2.5vw, 28px);
}

@media (max-width: 740px) {
  .hero-logo-spacer { width: min(56vw, 208px); }
}

@media (prefers-reduced-motion: reduce) {
  .brand-morph { transition: none !important; }
}