/* ============================================================
   Jaimin Mesariya — Portfolio
   Global stylesheet, ported 1:1 from the Claude Design prototype
   (Portfolio Hero.dc.html). Values follow CLAUDE.md guidelines:
   8px grid, 14/18px radii, Crimson Pro headlines, Switzer body.
   ============================================================ */

/* Accent — the violet from the contact card's email note. One place to
   change every hover, link and highlight on the site. */
:root {
  --accent: #6b5fc7;        /* interactive text: links, hover titles */
  --accent-soft: #b9b3e6;   /* borders/accents on dark surfaces */
  --accent-tint: #e7e3f8;   /* highlighter background behind text */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #f4f4f2;
}

html { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Plus Jakarta Sans', 'Switzer', 'Inter', sans-serif;
  color: #1a1a18;
}

a { color: #1a1a18; text-decoration: none; }
a:hover { color: #000000; }

button {
  font-family: inherit;
  cursor: pointer;
}

/* ---------- Keyframes ---------- */
@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes windowIn {
  from { opacity: 0; transform: translateY(30px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes lineIn {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes beacon { 0%, 100% { opacity: 1; } 50% { opacity: 0.15; } }
@keyframes cueBob { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }

/* ---------- Arrows ---------- */
.ph-arrow { display: inline-block; transition: transform 0.18s ease; }
a:hover .ph-arrow,
.ph-card:hover .ph-arrow { transform: translate(2px, -2px); }

/* ---------- Top bar ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 22px 40px;
  gap: 16px;
  /* translucent so content scrolling underneath stays legible; sticky (not
     fixed) keeps the header in flow, so the hero's height maths still hold */
  background: rgba(244, 244, 242, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.site-header .brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.site-header .brand a {
  font-size: 17px;
  font-weight: 600;
  color: #1a1a18;
  letter-spacing: -0.01em;
}
.ph-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  background: #ffffff;
  border: 1px solid #e6e6e2;
  border-radius: 999px;
  padding: 3px;
}
.ph-toggle a {
  border: none;
  background: transparent;
  color: #8a8a86;
  font-size: 13.5px;
  font-weight: 500;
  padding: 8px 20px;
  border-radius: 999px;
}
.ph-toggle a:hover { color: #1a1a18; }
.ph-toggle a.active {
  background: #ececea;
  color: #1a1a18;
}
.site-header .links {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
}
.site-header .links a {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a18;
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
}
.site-header .links .ph-arrow { font-size: 13px; }

/* ---------- Image slots ---------- */
.slot { position: relative; width: 100%; height: 100%; overflow: hidden; }
.slot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.slot.contain img { object-fit: contain; }
.slot.is-empty img { display: none; }
.slot .slot-empty {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 12px;
}
.slot .slot-empty::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1.5px dashed rgba(0, 0, 0, 0.22);
  border-radius: 8px;
  pointer-events: none;
}
.slot.is-empty .slot-empty { display: flex; }
.slot .slot-empty .cap {
  max-width: 90%;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #8a8a86;
}
.slot .slot-empty .sub {
  font-size: 11px;
  color: #a5a5a0;
}
.slot.on-dark .slot-empty::before { border-color: rgba(255, 255, 255, 0.25); }
.slot.on-dark .slot-empty .cap { color: #c9c9c4; }
.slot.on-dark .slot-empty .sub { color: #8a8a86; }

/* ---------- Section title pills ---------- */
.section-pill {
  align-self: stretch;
  display: block;
  font-family: 'Crimson Pro', serif;
  font-size: 20px;
  font-weight: 500;
  color: #1a1a18;
  border: 1px solid #dcdcd8;
  border-radius: 14px;
  padding: 20px;
  margin-top: 56px;
}
.section-pill.first { margin-top: 0; }

/* ---------- Chips / badges ---------- */
.chip {
  font-size: 13px;
  font-weight: 600;
  color: #55554f;
  background: #f0f0ed;
  border: 1px solid #dcdcd8;
  border-radius: 999px;
  padding: 6px 14px;
}
.chip.small { font-size: 12.5px; padding: 5px 12px; }
.chip.green { color: #35643d; background: #cde3c4; border-color: #b3d0a8; }
.chip.gold { color: #6d5f1e; background: #ede2a8; border-color: #ddcf8a; }
.chip.tag { font-size: 13.5px; padding: 6px 16px; }

/* ---------- CTA pill (outlined, fills dark on card hover) ---------- */
.ph-cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: #1a1a18;
  border: 1.5px solid #dcdcd8;
  background: #ffffff;
  border-radius: 999px;
  padding: 10px 22px;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.ph-cta-pill.small { font-size: 14px; padding: 9px 20px; }
.ph-card:hover .ph-cta-pill {
  background: #171715;
  color: #f4f4f2;
  border-color: #171715;
}

/* ---------- Cards ---------- */
.ph-card {
  cursor: pointer;
  background: #fbfbfa;
  border: 1px solid #e8e8e4;
  border-radius: 18px;
  box-shadow: 0 24px 60px -12px rgba(30, 30, 28, 0.1);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  color: inherit;
}
.ph-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 32px 72px -12px rgba(30, 30, 28, 0.16);
}
.ph-card .ph-card-media { transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.ph-card:hover .ph-card-media { transform: scale(1.045); }
.ph-card-cta {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  color: #1a1a18;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 8px 20px -6px rgba(30, 30, 28, 0.35);
  opacity: 0;
  transform: translateY(10px) rotate(-8deg);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 1;
}
.ph-card:hover .ph-card-cta { opacity: 1; transform: translateY(0) rotate(0deg); }
.ph-card-title { transition: color 0.25s ease; }
.ph-card:hover .ph-card-title { color: var(--accent); }
.ph-dark-media .slot-empty .cap { color: #c9c9c4; }

/* Featured card (text left, image right) */
.ph-card-feat { display: grid; grid-template-columns: 1fr 1.15fr; }
.ph-card-feat.reverse { grid-template-columns: 1.2fr 1fr; }
.ph-card-feat .feat-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: 48px 56px;
}
.ph-card-feat .feat-body.centered {
  justify-content: center;
  gap: 12px;
  padding: 56px;
}
.ph-card-feat .feat-kicker { font-size: 14px; font-weight: 500; color: #8a8a86; }
.ph-card-feat .feat-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8a86;
}
.ph-card-feat h2 {
  margin: 0;
  font-family: 'Crimson Pro', serif;
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #171715;
}
.ph-card-feat .feat-desc {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: #55554f;
  max-width: 480px;
}
.ph-card-feat .feat-media {
  position: relative;
  overflow: hidden;
  background: #e8eef9;
  min-height: 340px;
  padding: 24px;
}
.ph-card-feat .feat-media .ph-card-media {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
}
.ph-card-feat .feat-media.flush {
  background: #ececea;
  min-height: 260px;
  padding: 0;
}
.ph-card-feat .feat-media.flush .ph-card-media { border-radius: 0; }

/* Small project cards */
.ph-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.ph-cards .ph-card { display: flex; flex-direction: column; }
.ph-cards .card-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  padding: 18px;
}
.ph-cards .card-media.mat-blue { background: #e8eef9; }
.ph-cards .card-media.mat-indigo { background: #dbe6f7; }
.ph-cards .card-media .ph-card-media {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}
.ph-cards .card-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 32px 32px;
  flex: 1;
}
.ph-cards .card-body .kicker { font-size: 13.5px; font-weight: 500; color: #8a8a86; }
.ph-cards .card-body h2 {
  margin: 0;
  font-family: 'Crimson Pro', serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #171715;
  max-width: 240px;
}
.ph-cards .card-body p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: #55554f;
}
.ph-cards .card-body .chips { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 6px; }
.ph-cards .card-body .ph-cta-pill { margin-top: auto; align-self: flex-start; }

/* ---------- Page shells ---------- */
.page-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px 56px;
}
.page-section {
  display: flex;
  justify-content: center;
  padding: 0 20px 80px;
  /* the hero's scroll cue links here; keep the heading clear of the header */
  scroll-margin-top: 28px;
}
.page-section.casestudy { padding: 8px 20px 80px; }
.container {
  width: 90%;
  max-width: 1360px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.container.animate-in { animation: windowIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
.kicker-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8a86;
}
.back-link {
  align-self: flex-start;
  border: none;
  background: transparent;
  font-size: 14.5px;
  font-weight: 600;
  color: #8a8a86;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.back-link:hover { color: #1a1a18; }

/* ---------- Hero window (home) ---------- */
/* The hero is one screen: a bounded, vertically centred window that
   scales away on scroll (--hero-* vars are driven by initHeroScroll). */
.hero-main {
  /* --fold-peek reserves a strip at the bottom of the first screen so the
     top of Selected Work shows through, signalling there is more below. */
  --fold-peek: clamp(84px, 14vh, 150px);
  flex-direction: column;
  gap: 0;
  min-height: calc(100vh - 84px - var(--fold-peek));
  min-height: calc(100svh - 84px - var(--fold-peek));
  padding: 8px 20px 10px;
}
.hero-frame {
  width: 100%;
  /* Height-aware cap: on short screens the window narrows too, so it stays
     a window rather than flattening into a letterbox banner. */
  max-width: min(1040px, 132vh);
  min-width: 0;
  padding: 10px;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.4));
  outline: 1px solid rgba(26, 26, 24, 0.05);
  outline-offset: -1px;
  box-shadow: 0 48px 120px -44px rgba(30, 30, 28, 0.3), 0 10px 34px -16px rgba(30, 30, 28, 0.12);
  transform-origin: 50% 30%;
  opacity: var(--hero-op, 1);
  transform: translateY(var(--hero-y, 0px)) scale(var(--hero-scale, 1));
  /* backwards, not both: the fill must stop so the scroll vars take over */
  animation: windowIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.hero-window {
  width: 100%;
  background: #fbfbfa;
  border: 1px solid #e8e8e4;
  border-radius: 20px;
  box-shadow: 0 2px 12px -4px rgba(30, 30, 28, 0.08);
  overflow: hidden;
}
.hero-chrome {
  position: relative;
  z-index: 2;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  background: linear-gradient(90deg, #f1f1ee, #e8e8e4 50%, #f1f1ee);
  box-shadow: 0 10px 22px -14px rgba(30, 30, 28, 0.4);
}
.hero-chrome .dots { display: flex; gap: 8px; }
.hero-chrome .dots span { width: 12px; height: 12px; border-radius: 50%; }
.hero-chrome .dots .red { background: #ff5f57; }
.hero-chrome .dots .yellow { background: #febc2e; }
.hero-chrome .dots .green { background: #28c840; }
.ph-window-inner {
  min-height: min(62vh, 560px);
  min-height: min(62svh, 560px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* Text sits high and the slack falls to the bottom of the window. */
  justify-content: flex-start;
  padding: clamp(40px, 5vw, 76px) clamp(24px, 4.2vw, 64px) clamp(24px, 3vw, 40px);
  gap: clamp(28px, 4.4vw, 64px);
}
.hero-scroll-cue {
  /* sits on the window floor, so the slack above it reads as composition
     rather than dead space (matches the reference) */
  margin-top: auto;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: #a8a8a3;
  opacity: var(--hero-op, 1);
  transition: color 0.2s ease, transform 0.2s ease;
}
.hero-scroll-cue svg { width: 20px; height: 20px; animation: cueBob 2.4s ease-in-out infinite; }
.hero-scroll-cue:hover { color: #1a1a18; transform: translateY(3px); }
.ph-headline {
  margin: 0;
  font-family: 'Crimson Pro', serif;
  font-size: clamp(40px, 6.6vw, 92px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.02;
  color: #171715;
  display: flex;
  flex-direction: column;
}
.ph-headline .line-1 {
  animation: lineIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
  position: relative;
  z-index: 5;
}
.ph-headline .line-2 { animation: lineIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both; }
.ph-headline .ink-word {
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #171715 20%, #8a8a86 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Peek polaroid on "design" */
.ph-peek {
  position: relative;
  display: inline-block;
  cursor: default;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 0.03em;
  text-decoration-color: #b9b9b4;
  text-underline-offset: 0.08em;
}
.ph-peek-card {
  position: absolute;
  left: 50%;
  top: 96%;
  width: 210px;
  transform: translateX(-50%) translateY(-14px) scale(0.7) rotate(-11deg);
  transform-origin: top center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 30;
}
.ph-peek:hover .ph-peek-card {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1) rotate(-5deg);
  pointer-events: auto;
}
.ph-peek-card .polaroid {
  display: block;
  background: #ffffff;
  border: 1px solid #e8e8e4;
  border-radius: 8px;
  padding: 9px 9px 10px;
  box-shadow: 0 18px 44px -12px rgba(30, 30, 28, 0.35);
}
.ph-peek-card .polaroid .photo {
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  overflow: hidden;
  background: #ececea;
}
.ph-peek-card .polaroid .caption {
  display: block;
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  font-size: 15px;
  font-weight: 400;
  color: #55554f;
  text-align: center;
  padding-top: 7px;
  line-height: 1;
}

/* Byline + CN Tower */
.ph-byline {
  align-self: flex-end;
  max-width: 100%;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.ph-byline .line-strong { font-size: 15px; font-weight: 600; color: #1a1a18; }
.ph-byline .line-muted { font-size: 15px; color: #8a8a86; }
.ph-byline .line-muted a { color: #1a1a18; font-weight: 500; }
.ph-toronto { display: flex; align-items: flex-end; gap: 8px; }
.ph-toronto svg { width: 17px; height: 42px; overflow: visible; flex-shrink: 0; }
.ph-beacon { animation: beacon 2.2s ease-in-out infinite; }
.ph-signal { opacity: 0; transition: opacity 0.35s ease; }
.ph-toronto:hover .ph-signal { opacity: 1; }
.ph-ulink {
  background: linear-gradient(currentColor, currentColor) left bottom / 0% 1.5px no-repeat;
  transition: background-size 0.3s ease;
  padding-bottom: 1px;
}
.ph-ulink:hover { background-size: 100% 1.5px; }

/* ---------- Closing CTA + Let's talk row ---------- */
.cta-card {
  margin-top: 36px;
  background: #fbfbfa;
  border: 1px solid #e8e8e4;
  box-shadow: 0 24px 60px -12px rgba(30, 30, 28, 0.1);
  border-radius: 18px;
  overflow: hidden;
}
.cta-card.reveal-block { margin-top: 56px; }
.ph-cta-inner {
  padding: 64px 56px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.ph-cta-inner .eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #55554f;
}
.ph-cta-h {
  margin: 0;
  font-family: 'Crimson Pro', serif;
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: #171715;
  max-width: 760px;
  text-wrap: pretty;
}
.ph-cta-inner p {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: #55554f;
  max-width: 560px;
}
.hl-mark {
  background: var(--accent-tint);
  border-radius: 8px;
  padding: 0.02em 0.14em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.ph-talk {
  background: #fbfbfa;
  border: none;
  border-top: 1px solid #e8e8e4;
  border-radius: 0;
  padding: 44px 56px;
  display: flex;
  align-items: center;
  gap: 20px;
  cursor: pointer;
  transition: background 0.6s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.6s ease;
}
.ph-talk:hover { background: #171715; border-color: #171715; }
.ph-talk .ph-talk-h,
.ph-talk .ph-talk-arrow {
  color: #171715;
  transition: color 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.ph-talk:hover .ph-talk-h,
.ph-talk:hover .ph-talk-arrow { color: #f4f4f2; }
.ph-talk:hover .ph-talk-arrow { transform: translateX(14px); }
.ph-talk-h {
  margin: 0;
  font-family: 'Crimson Pro', serif;
  font-size: 60px;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.ph-talk-arrow {
  margin-left: auto;
  font-family: 'Crimson Pro', serif;
  font-size: 56px;
  line-height: 1;
}
.ph-talk .ph-talk-ic {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #f4f4f2;
  color: #171715;
  opacity: 0;
  transform: translateX(-16px) scale(0.5);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
}
.ph-talk:hover .ph-talk-ic { opacity: 1; transform: translateX(0) scale(1); }
.ph-talk .ph-talk-ic:nth-of-type(2) { transition-delay: 0.07s; }
.ph-talk .ph-talk-ic:hover {
  background: #ffffff;
  transform: translateY(-3px) scale(1.08);
  transition-delay: 0s;
}

/* ---------- Case study shared blocks ---------- */
.ph-proj-head {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 64px;
  padding: 24px 0 0;
}
.ph-proj-head.pad-lg { padding: 40px 0 0; }
.ph-proj-head .head-body { display: flex; flex-direction: column; gap: 16px; }
.ph-proj-head .head-body .kicker-label { align-self: flex-start; }
.ph-proj-head h1 {
  margin: 0;
  font-family: 'Crimson Pro', serif;
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: #171715;
}
.ph-proj-head .lede {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  color: #8a8a86;
  max-width: 620px;
}
.ph-proj-head .rule { border-bottom: 1px solid #e0e0dc; margin: 16px 0; }
.ph-proj-head .intro-cols p { margin: 0; font-size: 16px; line-height: 1.6; color: #55554f; }
.ph-side { display: flex; flex-direction: column; gap: 24px; }
.ph-side .side-item { display: flex; flex-direction: column; gap: 4px; }
.ph-side .side-item .label { font-size: 14px; font-weight: 600; color: #1a1a18; }
.ph-side .side-item .value { font-size: 15px; color: #8a8a86; line-height: 1.6; }
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px solid #dcdcd8;
  border-radius: 999px;
  padding: 12px 20px;
  font-size: 14.5px;
  font-weight: 600;
  color: #1a1a18;
}
.btn-outline:hover { border-color: #1a1a18; }
.btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #171715;
  color: #f4f4f2;
  border-radius: 999px;
  padding: 15px 32px;
  font-size: 15.5px;
  font-weight: 600;
}
.btn-dark:hover { background: #000000; color: #ffffff; }
.btn-dark-sm {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #fbfbfa;
  background: #1a1a18;
  border-radius: 999px;
  padding: 12px 24px;
  transition: transform 0.18s ease;
}
.btn-dark-sm:hover { transform: translateY(-2px); color: #ffffff; }

/* NDA callouts */
.nda-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #f0eefb;
  border: 1px solid #d9d4f0;
  border-radius: 14px;
  padding: 20px 24px;
  margin-top: 8px;
}
.nda-callout .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7b6fd0;
  margin-top: 7px;
  flex-shrink: 0;
}
.nda-callout .nda-body { display: flex; flex-direction: column; gap: 4px; }
.nda-callout .nda-title { font-size: 14.5px; font-weight: 600; color: #4f4694; }
.nda-callout .nda-text { font-size: 14.5px; line-height: 1.55; color: #6a5fb0; }
.nda-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #d9d4f0;
  background: #f0eefb;
  border-radius: 14px;
  padding: 14px 20px;
}
.nda-strip svg { width: 15px; height: 15px; flex-shrink: 0; }
.nda-strip span { font-size: 14px; line-height: 1.55; color: #4f4694; }
.nda-strip strong { font-weight: 600; }

/* Grids */
.ph-diff.cols-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.ph-diff.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ph-diff.text-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.ph-diff.text-cols.pad { padding: 8px 8px 0; }

/* Stat band (bordered, internal dividers) */
.stat-band {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border: 1px solid #e8e8e4;
  border-radius: 18px;
  background: #fbfbfa;
  overflow: hidden;
  margin-top: 8px;
}
.stat-band .cell {
  padding: 36px 40px 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.stat-band .cell + .cell { border-left: 1px solid #ececea; }
.stat-band .num { font-size: 56px; font-weight: 700; letter-spacing: -0.03em; color: #171715; }
.stat-band .cap { font-size: 15px; color: #6d6d68; }

/* Stat rules (top-rule columns) */
.stat-rules { display: grid; gap: 40px; padding: 8px 8px 0; }
.stat-rules.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.stat-rules.cols-2 { grid-template-columns: 1fr 1fr; }
.stat-rules .cell {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid #dcdcd8;
  padding-top: 24px;
}
.stat-rules .num {
  font-family: 'Crimson Pro', serif;
  font-size: 52px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #171715;
}
.stat-rules .cap { font-size: 15px; line-height: 1.55; color: #55554f; }

/* Body copy in sections */
.body-copy {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: #55554f;
  max-width: 720px;
  padding: 8px 8px 0;
}
.body-copy.no-pad-top { padding: 0 8px; }
.body-copy.lg { font-size: 18px; max-width: 820px; }
.body-copy strong { color: #1a1a18; font-weight: 600; }

/* Simple text cards */
.text-card {
  background: #fbfbfa;
  border: 1px solid #e8e8e4;
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.text-card.gap-sm { gap: 12px; }
.text-card .title {
  font-family: 'Crimson Pro', serif;
  font-size: 22px;
  font-weight: 600;
  color: #171715;
}
.text-card .text { font-size: 14.5px; line-height: 1.55; color: #6d6d68; }

/* Illustration / image frames */
.frame-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e8e8e4;
  border-radius: 14px;
  overflow: hidden;
  background: #fbfbfa;
}
.frame-card.mat-gray { background: #ececea; }
.frame-card svg { display: block; width: 100%; height: auto; }
.frame-card .frame-caption {
  display: flex;
  align-items: baseline;
  padding: 14px 20px;
  border-top: 1px solid #e8e8e4;
}
.frame-card .frame-caption span { font-size: 14px; font-weight: 600; color: #1a1a18; }
.frame-card .frame-caption.center { justify-content: center; padding: 20px 28px; }
.frame-card .frame-caption.center span { font-size: 14.5px; }
.frame-card .frame-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  border-top: 1px solid #e8e8e4;
}
.frame-card .frame-footer .title { font-size: 15.5px; font-weight: 700; color: #1a1a18; }
.frame-card .frame-footer .text { font-size: 14.5px; line-height: 1.55; color: #6d6d68; }
.dark-well { background: #1e1e1c; border-radius: 14px 14px 0 0; }

/* Approach timeline */
.ph-journey { display: flex; flex-direction: column; margin-top: 16px; }
.ph-phase { display: grid; grid-template-columns: 64px 1fr; gap: 0 24px; }
.ph-phase .spine { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ph-phase .spine .node {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #dcdcd8;
  background: #fbfbfa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Crimson Pro', serif;
  font-size: 19px;
  color: #1a1a18;
  flex-shrink: 0;
}
.ph-phase .spine .rule { flex: 1; width: 1px; background: #dcdcd8; }
.ph-phase .phase-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 8px 0 64px;
}
.ph-phase.last .phase-body { padding-bottom: 8px; }
.ph-phase .phase-head { display: flex; flex-direction: column; gap: 8px; max-width: 640px; }
.ph-phase .phase-head .step-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8a86;
}
.ph-phase .phase-head .step-title,
.block-title {
  font-family: 'Crimson Pro', serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #171715;
}
.ph-phase .phase-head .step-text { font-size: 15.5px; line-height: 1.6; color: #55554f; }

/* Feature rows (Inside the app) */
.ph-feature {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: center;
  background: #fbfbfa;
  border: 1px solid #e8e8e4;
  border-radius: 18px;
  padding: 48px;
}
.ph-feature.ph-feature-flip { grid-template-columns: 1.2fr 1fr; }
.ph-feature .phone {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 9 / 19;
  justify-self: center;
}
.ph-feature .feature-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.ph-feature h3 {
  margin: 0;
  font-family: 'Crimson Pro', serif;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: #171715;
}
.ph-feature p { margin: 0; font-size: 16px; line-height: 1.65; color: #55554f; }
.ph-feature .chips { display: flex; gap: 8px; flex-wrap: wrap; }

/* Learn / reflection */
.ph-learn.grid-learn {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: center;
  padding: 24px 8px 8px;
}
.lesson-list { display: flex; flex-direction: column; }
.lesson-list .lesson {
  display: flex;
  gap: 16px;
  padding: 18px 4px;
  border-top: 1px solid #e8e8e4;
}
.lesson-list .lesson:last-child { border-bottom: 1px solid #e8e8e4; }
.lesson-list .roman {
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  font-size: 15px;
  color: #8a8a86;
  min-width: 20px;
}
.lesson-list .lesson-body { display: flex; flex-direction: column; gap: 4px; }
.lesson-list .lesson-title {
  font-family: 'Crimson Pro', serif;
  font-size: 21px;
  font-weight: 600;
  color: #171715;
}
.lesson-list .lesson-text { font-size: 14.5px; line-height: 1.6; color: #6d6d68; }

.reflect-card {
  background: #fbfbfa;
  border: 1px solid #e8e8e4;
  border-radius: 14px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.reflect-card .reflect-title {
  font-family: 'Crimson Pro', serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #171715;
}
.reflect-card .reflect-intro {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: #55554f;
  max-width: 640px;
}
.reflect-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.reflect-cols .col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-top: 1px solid #dcdcd8;
  padding-top: 24px;
}
.reflect-cols .col.gap-sm { gap: 20px; }
.reflect-cols .col-title {
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  font-size: 20px;
  font-weight: 500;
  color: #171715;
}
.reflect-cols .items { display: flex; flex-direction: column; gap: 20px; }
.reflect-cols p { margin: 0; font-size: 15.5px; line-height: 1.65; color: #55554f; }
.reflect-cols p strong { color: #1a1a18; font-weight: 600; }
.reflect-card .outcome {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: #55554f;
  max-width: 720px;
}

/* Token pipeline connectors */
.pipe-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 0;
}
.pipe-connector span {
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  font-size: 16px;
  color: #8a8a86;
}
.pipe-connector svg { width: 44px; height: 12px; }
.pipe-block { display: flex; flex-direction: column; gap: 16px; }
.pipe-block .pipe-title {
  font-family: 'Crimson Pro', serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #171715;
  max-width: 640px;
}

/* Foundations color rows */
.token-rows { display: flex; flex-direction: column; gap: 10px; }
.token-rows .row { display: flex; align-items: center; gap: 12px; }
.token-rows .swatch {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid #e8e8e4;
  flex-shrink: 0;
}
.token-rows .row span:last-child { font-size: 14px; color: #55554f; }
.token-rows .row strong { color: #1a1a18; font-weight: 600; }

/* Design process phase cards (BMO) */
.process-card {
  background: #fbfbfa;
  border: 1px solid #e8e8e4;
  border-radius: 14px;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.process-card .head { display: flex; align-items: center; gap: 12px; }
.process-card .num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid #dcdcd8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Crimson Pro', serif;
  font-size: 16px;
  font-weight: 600;
  color: #171715;
  flex-shrink: 0;
}
.process-card .title {
  font-family: 'Crimson Pro', serif;
  font-size: 22px;
  font-weight: 600;
  color: #171715;
}
.process-card .steps { font-size: 14.5px; line-height: 1.6; color: #6d6d68; }

/* Wire / masonry grids */
.ph-wire-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto auto;
  gap: 12px;
}
.ph-wire-grid > div {
  grid-column: span 2;
  border: 1px solid #e8e8e4;
  border-radius: 14px;
  overflow: hidden;
  background: #ececea;
  aspect-ratio: 4 / 3;
}
.ph-wire-grid > div.tall {
  grid-row: span 2;
  aspect-ratio: auto;
}

/* Media frame (plain, ratio driven) */
.media-frame {
  border: 1px solid #e8e8e4;
  border-radius: 14px;
  overflow: hidden;
  background: #ececea;
}
.media-frame.card-bg { background: #fbfbfa; }
.media-frame.r-21-9 { aspect-ratio: 21 / 9; }
.media-frame.r-21-10 { aspect-ratio: 21 / 10; }
.media-frame.r-16-10 { aspect-ratio: 16 / 10; }
.media-frame.r-4-3 { aspect-ratio: 4 / 3; }
.media-frame.r-3-4 { aspect-ratio: 3 / 4; }
.media-frame.r-4-5 { aspect-ratio: 4 / 5; }
.media-frame.hero-shadow {
  border-radius: 18px;
  box-shadow: 0 24px 60px -12px rgba(30, 30, 28, 0.1);
}

/* ---------- About page ---------- */
.info-hero {
  padding: 40px 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.info-hero .hello {
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  font-size: 26px;
  color: #55554f;
}
.ph-info-h1 {
  margin: 0;
  font-family: 'Crimson Pro', serif;
  font-size: 54px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: #171715;
  max-width: 960px;
  text-wrap: pretty;
}
.info-hero .typewriter {
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  font-size: 24px;
  color: #55554f;
  min-height: 34px;
}
.info-hero .typewriter .word { color: var(--accent); }
.info-hero .typewriter .caret {
  color: var(--accent);
  animation: blink 1s step-end infinite;
}

.reading-grid {
  display: grid;
  /* portrait is a supporting element — the text column leads */
  grid-template-columns: 1.6fr 0.75fr;
  gap: 48px;
  align-items: start;
  padding: 8px 8px 0;
}
.reading-grid .reading-left { display: flex; flex-direction: column; gap: 24px; }
.persona-row { display: flex; flex-direction: column; gap: 10px; }
.persona-row .chips-row { display: flex; flex-wrap: wrap; gap: 8px; }
.persona-chip {
  border: 1px solid #e6e6e2;
  background: #ffffff;
  color: #55554f;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  padding: 9px 18px;
  border-radius: 999px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.persona-chip:hover { border-color: #1a1a18; }
.persona-chip.active {
  background: #171715;
  color: #f4f4f2;
  border-color: #171715;
}
.persona-chip.active.robot { color: #9be49b; }
.persona-row .hint {
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  font-size: 16px;
  color: #8a8a86;
}
.persona-panel { display: none; flex-direction: column; gap: 20px; }
.persona-panel.active { display: flex; }
.persona-panel p { margin: 0; font-size: 16.5px; line-height: 1.65; color: #55554f; }
.persona-panel p strong { color: #171715; }
.persona-table {
  display: flex;
  flex-direction: column;
  border: 1px solid #e8e8e4;
  border-radius: 14px;
  background: #fbfbfa;
  overflow: hidden;
  gap: 0;
}
.persona-table .row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid #e8e8e4;
}
.persona-table .row:last-child { border-bottom: none; }
.persona-table .label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8a86;
  padding-top: 2px;
}
.persona-table .value { font-size: 16px; color: #171715; }
/* Accent link: a soft violet pill that fills on hover — reads as a button
   without shouting like a raw underlined link. */
.accent-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent);
  font-weight: 600;
  background: var(--accent-tint);
  border-radius: 999px;
  padding: 3px 12px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.accent-link::after { content: "→"; transition: transform 0.2s ease; }
.accent-link:hover { background: var(--accent); color: #ffffff; }
.accent-link:hover::after { transform: translateX(2px); }
.robot-terminal {
  display: none;
  flex-direction: column;
  gap: 14px;
  background: #171715;
  border-radius: 14px;
  padding: 28px;
  font-family: 'SF Mono', 'Menlo', monospace;
}
.robot-terminal.active { display: flex; }
.robot-terminal span { font-size: 13.5px; line-height: 1.7; color: #9be49b; }
.robot-terminal span.dim { color: #8a8a86; }

.portrait-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e8e8e4;
  border-radius: 18px;
  overflow: hidden;
  background: #fbfbfa;
}
.portrait-card .frame-caption {
  display: flex;
  align-items: baseline;
  justify-content: center;
  padding: 16px 20px;
  border-top: 1px solid #e8e8e4;
}
.portrait-card .frame-caption span {
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  font-size: 17px;
  color: #55554f;
}

.hobby-card .frame-footer { padding: 20px 24px 24px; }
.hobby-card .frame-footer .title {
  font-family: 'Crimson Pro', serif;
  font-size: 22px;
  font-weight: 600;
  color: #171715;
}

.cinema-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 12px; }
.cinema-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  border: 1px solid #e8e8e4;
  border-radius: 18px;
  background: #fbfbfa;
  padding: 48px 56px;
}
.cinema-card .eyebrow {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8a86;
}
.cinema-card .title {
  font-family: 'Crimson Pro', serif;
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #171715;
}
.cinema-card p { margin: 0; font-size: 16.5px; line-height: 1.65; color: #55554f; }
.cinema-card p strong { color: #171715; }
.cinema-card .insta-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #dcdcd8;
  border-radius: 999px;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 500;
  color: #171715;
  background: #ffffff;
  transition: transform 0.2s, box-shadow 0.2s;
}
.cinema-card .insta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -12px rgba(30, 30, 28, 0.3);
}
.cinema-card .insta-btn .arrow { color: var(--accent); }
.cinema-shot {
  border: 1px solid #e8e8e4;
  border-radius: 18px;
  overflow: hidden;
  background: #fbfbfa;
}

/* Filmroll */
.roll-track { height: calc(100vh + 2200px); }
.roll-view {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid #e8e8e4;
  border-radius: 18px;
  background: #fbfbfa;
}
.roll-strip {
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 0 48px;
  will-change: transform;
}
.roll-card {
  flex: 0 0 auto;
  background: #ffffff;
  border: 1px solid #e8e8e4;
  border-radius: 8px;
  padding: 10px 10px 12px;
  box-shadow: 0 12px 32px -12px rgba(30, 30, 28, 0.28);
}
.roll-card .photo { border-radius: 4px; overflow: hidden; background: #ececea; }
.roll-card .caption {
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  font-size: 17px;
  color: #55554f;
  text-align: center;
  padding-top: 8px;
  transition: opacity 0.3s ease;
}

/* ---------- Contact page ---------- */
.ph-contact-grid {
  width: 90%;
  max-width: 1360px;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 24px;
  align-items: stretch;
  animation: windowIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.chat-panel {
  background: #f6f6f4;
  border: 1px solid #e8e8e4;
  border-radius: 18px;
  box-shadow: 0 24px 60px -12px rgba(30, 30, 28, 0.1);
  display: flex;
  flex-direction: column;
  min-height: 62vh;
  /* min-width:0 so long chat lines shrink the panel instead of
     pushing it past the grid cell (horizontal scroll on mobile). */
  min-width: 0;
  overflow: hidden;
}
.chat-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 40px 36px 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.msg { display: flex; flex-direction: column; animation: msgIn 0.3s ease both; }
.msg.them { align-items: flex-start; }
.msg.me { align-items: flex-end; }
.msg .sender { font-size: 12.5px; color: #8a8a86; margin: 0 0 4px 52px; }
.msg .row { display: flex; align-items: flex-end; gap: 10px; }
.chat-avatar {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  background: #e3e3e0;
  display: inline-block;
  flex-shrink: 0;
}
.chat-avatar svg { position: absolute; inset: 0; pointer-events: none; }
.chat-avatar .slot { position: absolute; inset: 0; }
.chat-avatar .slot.is-empty { display: none; }
.bubble-them {
  background: #e9e9eb;
  color: #1a1a18;
  font-size: 17px;
  line-height: 1.35;
  padding: 11px 18px;
  border-radius: 20px;
  border-bottom-left-radius: 6px;
  max-width: 420px;
}
.bubble-me {
  background: #0b93f6;
  color: #ffffff;
  font-size: 17px;
  line-height: 1.35;
  padding: 11px 18px;
  border-radius: 20px;
  border-bottom-right-radius: 6px;
  max-width: 420px;
}
.bubble-typing {
  background: #e9e9eb;
  color: #8a8a86;
  font-size: 17px;
  padding: 11px 18px;
  border-radius: 20px;
  border-bottom-left-radius: 6px;
  letter-spacing: 2px;
}
.chat-composer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 24px 24px;
}
.chat-composer input {
  flex: 1;
  /* inputs carry a wide intrinsic size; without this they set the
     panel's min-content width and blow out the grid on narrow screens */
  min-width: 0;
  border: 1.5px solid #d9d9d5;
  background: transparent;
  border-radius: 999px;
  padding: 13px 52px 13px 20px;
  font-family: inherit;
  font-size: 16px;
  color: #1a1a18;
  outline: none;
}
.chat-composer input:focus { border-color: #b9b9b4; }
.chat-composer button {
  margin-left: -56px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: #8a8a86;
  color: #ffffff;
  font-size: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.chat-composer button:hover { background: #1a1a18; }

.email-card {
  background: #f6f6f4;
  border: 1px solid #e8e8e4;
  border-radius: 18px;
  box-shadow: 0 24px 60px -12px rgba(30, 30, 28, 0.1);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: background 0.35s ease, border-color 0.35s ease;
}
.email-card .who { display: flex; align-items: center; gap: 16px; }
.email-card .photo {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  background: #ececea;
  display: inline-block;
  flex-shrink: 0;
}
.email-card .photo > svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.email-card .photo .slot { position: absolute; inset: 0; border-radius: 50%; }
.email-card .photo .slot.is-empty { display: none; }
/* min-width:0 + anywhere so the email address wraps instead of
   widening the card past the viewport on narrow screens */
.email-card .name-block { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.email-card .name {
  font-size: 19px;
  font-weight: 700;
  color: #1a1a18;
  letter-spacing: -0.01em;
  transition: color 0.35s ease;
}
.email-card .sub { font-size: 15px; color: #8a8a86; transition: color 0.35s ease; }
.email-card .note {
  flex: 1;
  background: #ffffff;
  border-left: 3px solid var(--accent-soft);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: background 0.35s ease;
}
.email-card .note .to { display: flex; gap: 12px; font-size: 15.5px; min-width: 0; overflow-wrap: anywhere; }
.email-card .note .to .k { font-weight: 700; color: #1a1a18; transition: color 0.35s ease; }
.email-card .note .to .v { font-weight: 600; color: #1a1a18; transition: color 0.35s ease; }
.email-card .note .subject { font-size: 15.5px; color: #1a1a18; transition: color 0.35s ease; }
.email-card .note .preview { font-size: 15.5px; color: #8a8a86; transition: color 0.35s ease; }
.email-card .actions { display: flex; flex-direction: column; gap: 10px; }
.email-card .actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px solid #dcdcd8;
  border-radius: 999px;
  padding: 15px;
  font-size: 16px;
  font-weight: 700;
  color: #1a1a18;
  transition: color 0.35s ease, border-color 0.35s ease;
}
.email-card:hover {
  background: #232328;
  border-color: #232328;
}
.email-card:hover .name,
.email-card:hover .note .to .k,
.email-card:hover .note .to .v,
.email-card:hover .note .subject,
.email-card:hover .actions a { color: #f4f4f2; }
.email-card:hover .sub,
.email-card:hover .note .preview { color: #9a9aa2; }
.email-card:hover .note { background: rgba(255, 255, 255, 0.06); }
.email-card:hover .actions a { border-color: var(--accent-soft); }

/* ---------- Reveal on scroll ---------- */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
[data-reveal].revealed { opacity: 1; transform: translateY(0); }
/* NOTE: the prefers-reduced-motion block lives at the END of this file,
   after the responsive blocks — it has to win over the mobile hero's
   transform override, and these are all the same specificity. */

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .ph-cards { grid-template-columns: 1fr; }
  .ph-card-feat, .ph-card-feat.reverse { grid-template-columns: 1fr; }
  /* Stacked, the featured card would lead with text while every other card
     leads with its image. Pull the media up so all cards read the same way. */
  .ph-card-feat .feat-media { order: -1; }
  .ph-contact-grid { grid-template-columns: minmax(0, 1fr); }
  .ph-proj-head { grid-template-columns: 1fr; gap: 28px; }
  .ph-phase { grid-template-columns: 44px 1fr; gap: 0 16px; }
  .ph-side { grid-template-columns: 1fr; }
  .ph-learn.grid-learn { grid-template-columns: 1fr; gap: 32px; }
  .ph-feature, .ph-feature.ph-feature-flip { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
  .ph-feature-flip .feature-body { order: 2; }
  .ph-diff.cols-3, .ph-diff.cols-2, .ph-diff.text-cols { grid-template-columns: 1fr; }
  .stat-band { grid-template-columns: 1fr; }
  .stat-band .cell + .cell { border-left: none; border-top: 1px solid #ececea; }
  .stat-rules.cols-3, .stat-rules.cols-2 { grid-template-columns: 1fr; }
  .reflect-cols { grid-template-columns: 1fr; }
  .ph-wire-grid { grid-template-columns: 1fr; }
  .ph-wire-grid > div, .ph-wire-grid > div.tall { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }
  .reading-grid { grid-template-columns: 1fr; }
  .cinema-grid { grid-template-columns: 1fr; }
  .ph-window-inner { min-height: min(60vh, 520px); min-height: min(60svh, 520px); }
}
@media (max-width: 720px) {
  /* Keep navigation on phones: compact pill (Work/About) + a contact icon.
     The LinkedIn/Resume text links are hidden here to fit 320px. */
  .site-header { grid-template-columns: auto 1fr auto; padding: 14px 16px; gap: 10px; }
  .site-header .brand { min-width: 0; }
  .site-header .brand a { font-size: 15px; white-space: nowrap; }
    .ph-toggle { justify-self: end; padding: 2px; }
  .ph-toggle a { font-size: 12.5px; padding: 7px 12px; }
  .ph-toggle .pill-contact { display: none; }
  .site-header { padding: 12px 16px; }
  .site-header .links { gap: 8px; }
  .site-header .links .hdr-link { display: none; }
  /* Mobile hero: the window is sized by the space available, not by an
     arbitrary min-height, and its bottom is never drawn — the side edges
     run past the fold so it reads as continuing, like the reference. */
  .hero-main {
    /* sized by content — no min-height, so there is no slack to strand */
    min-height: 0;
    align-items: stretch;
    justify-content: flex-start;
    padding: 4px 12px 44px;
  }
  .hero-frame {
    position: relative;
    flex: 0 0 auto;
    padding: 6px 6px 0;
    border-radius: 22px 22px 0 0;
    /* outline draws all four sides and can't be clipped — it would leave a
       hairline across the bottom that reads as a closed box */
    outline: none;
    box-shadow: 0 24px 60px -40px rgba(30, 30, 28, 0.22);
    /* no scale: shrinking a frame whose bottom dissolves into the page
       would drag the fade with it. JS still sets --hero-scale; unused here. */
    transform: translateY(var(--hero-y, 0px));
  }
  /* dissolves the frame + window bottom into the page instead of closing it */
  .hero-frame::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 96px;
    background: linear-gradient(180deg, rgba(244, 244, 242, 0), #f4f4f2 92%);
    pointer-events: none;
    z-index: 2;
  }
  .hero-window {
    border-bottom: 0;
    border-radius: 17px 17px 0 0;
    box-shadow: none;
  }
  .hero-chrome { height: 38px; padding: 0 14px; }
  .hero-chrome .dots span { width: 10px; height: 10px; }
  .ph-window-inner { min-height: 0; padding: 26px 20px 0; gap: 18px; }
  .hero-scroll-cue {
    margin-top: clamp(32px, 8vh, 64px);
    margin-bottom: 38px;
    position: relative;
    z-index: 3;
  }
  .ph-byline { align-self: stretch; text-align: left; align-items: flex-start; }
  .ph-toronto { flex-wrap: wrap; }
  .ph-toronto svg { width: 13px; height: 32px; }
  .ph-talk-h { font-size: 34px; }
  .ph-talk { padding: 32px 28px; gap: 14px; }
  .ph-talk .ph-talk-arrow { font-size: 38px; }
  .ph-talk .ph-talk-ic { width: 42px; height: 42px; }
  .ph-cta-inner { padding: 48px 28px 36px; }
  .ph-card-feat .feat-body { padding: 32px 28px; }
  .ph-card-feat h2 { font-size: 32px; }
  .ph-info-h1 { font-size: 38px; }
  .ph-cta-h { font-size: 34px; }
}
@media (max-width: 720px), (hover: none) {
  .ph-talk .ph-talk-ic { opacity: 1; transform: none; }
}
/* Wide screens: the window grows a step instead of stretching to the edges. */
@media (min-width: 1600px) {
  .hero-frame { max-width: min(1180px, 132vh); padding: 12px; border-radius: 34px; }
  .hero-window { border-radius: 22px; }
  .ph-window-inner { min-height: min(62vh, 660px); min-height: min(62svh, 660px); }
  .ph-headline { font-size: 104px; }
}
/* Tablets: keep a margin either side instead of running edge to edge. */
@media (min-width: 721px) and (max-width: 1100px) {
  .hero-main { padding-left: 40px; padding-right: 40px; }
}
/* Short laptop screens: keep the whole window above the fold. */
@media (max-height: 780px) and (min-width: 721px) {
  /* Narrow as well as shorten, so the window keeps its shape and still
     leaves room for the fold peek on 720p-class laptops. */
  .hero-frame { max-width: min(1040px, 122vh); }
  .ph-window-inner { min-height: min(56vh, 400px); min-height: min(56svh, 400px); }
  .ph-headline { font-size: clamp(40px, 5.4vw, 76px); }
}

/* ---------- Reduced motion (must stay last: same specificity as the
   responsive blocks above, so it needs source order to win) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hero-frame, .container.animate-in, .ph-contact-grid,
  .ph-headline .line-1, .ph-headline .line-2,
  .hero-scroll-cue svg { animation: none !important; }
  .hero-frame { opacity: 1; transform: none; }
}

/* Very narrow phones: tighten the pill so brand + nav + icon still fit. */
@media (max-width: 400px) {
  .site-header { padding: 12px 12px; gap: 8px; }
  .ph-toggle a { padding: 7px 9px; font-size: 12px; }
  .site-header .brand a { font-size: 14.5px; }
}



/* ---------- Outcome band (case studies without hard metrics) ---------- */
.outcome-band {
  margin-top: 16px;
  padding: 22px 26px;
  background: #fbfbfa;
  border: 1px solid #e8e8e4;
  border-left: 3px solid #1a1a18;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.outcome-band p {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: #1a1a18;
}
@media (max-width: 720px) {
  .outcome-band { padding: 18px 18px; }
  .outcome-band p { font-size: 15.5px; }
}

/* ---------- Auto-advancing photo slides (About → Reading as) ---------- */
.photo-slides {
  position: relative;
  overflow: hidden;
  background: #ececea;
}
/* Slides are stacked and cross-faded. Absolute positioning is what keeps
   them from stacking vertically; the inline aspect-ratio reserves the box,
   so swapping slides causes no layout shift. */
.pslide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.pslide.is-active { opacity: 1; pointer-events: auto; }
/* Must sit after the .pslide rules above to win on equal specificity.
   JS also refuses to start the timer under reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .pslide { transition: none; }
}

/* ---------- Header links menu (@ button → LinkedIn / Resume / Contact) ---------- */
.site-header .links { position: relative; align-items: center; }
.hdr-menu-btn {
  display: none;
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #e6e6e2;
  border-radius: 999px;
  background: #ffffff;
  color: #55554f;
  font-size: 16px;
  line-height: 1;
  transition: background 0.2s ease, color 0.2s ease;
}
.hdr-menu-btn:hover { background: #ececea; color: #1a1a18; }
.hdr-menu-btn .ic-at,
.hdr-menu-btn .ic-close {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.18s ease;
}
.hdr-menu-btn .ic-close { opacity: 0; font-size: 13px; }
.hdr-menu-btn[aria-expanded="true"] { background: #171715; border-color: #171715; color: #ffffff; }
.hdr-menu-btn[aria-expanded="true"] .ic-at { opacity: 0; }
.hdr-menu-btn[aria-expanded="true"] .ic-close { opacity: 1; }

/* Fixed, so no ancestor's overflow can clip it */
.hdr-menu {
  position: fixed;
  top: 58px;
  right: 12px;
  z-index: 70;
  width: 190px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: #ffffff;
  border: 1px solid #e6e6e2;
  border-radius: 14px;
  box-shadow: 0 18px 44px -12px rgba(30, 30, 28, 0.28);
  transform-origin: top right;
  animation: menuIn 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hdr-menu[hidden] { display: none; }
.site-header .links .hdr-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  color: #1a1a18;
  transition: background 0.18s ease;
}
.site-header .links .hdr-menu a:hover { background: #f0f0ed; color: var(--accent); }
@keyframes menuIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Must come after the base .hdr-menu-btn{display:none} above to win. */
@media (max-width: 720px) {
  .hdr-menu-btn { display: block; }
}

/* Wire grid variant for phone screenshots: four portrait shots in a row
   instead of one tall + three landscape cells. */
.ph-wire-grid.phones { grid-template-columns: repeat(4, 1fr); }
.ph-wire-grid.phones > div {
  grid-column: span 1;
  grid-row: auto;
  aspect-ratio: 1170 / 2400;
}
@media (max-width: 900px) {
  .ph-wire-grid.phones { grid-template-columns: repeat(2, 1fr); }
  .ph-wire-grid.phones > div { grid-column: span 1; aspect-ratio: 1170 / 2400; }
}

/* ---------- About: keep paired cards visually balanced ----------
   Images here vary wildly in shape (phone screenshots next to landscape
   photos). Left unbounded, one card towers over its neighbour, so these
   cap the media rather than letting each image dictate the row height. */
@media (min-width: 901px) {
  .cinema-grid { grid-template-columns: 1.45fr 0.55fr; align-items: stretch; }
}
.cinema-shot { max-height: 400px; overflow: hidden; }
/* it's a phone screenshot — anchor to the top so the profile header shows
   rather than a slice of the middle */
.cinema-shot .slot img { object-position: top center; }
.cinema-card { padding: 32px 44px; gap: 14px; justify-content: center; }
.hobby-card > div:first-child { max-height: 300px; overflow: hidden; }

/* Anchor a wide crop to the top of the source image rather than its middle */
.shot-top .slot img { object-position: top center; }

/* Hobby cards: the cap left dead space under short images — let the image
   fill the capped box instead of leaving a gap. */
.hobby-card > div:first-child { max-height: none; aspect-ratio: 16 / 10; overflow: hidden; }
.hobby-card .slot img { object-position: center; }

/* ---------- Design-system figures ----------
   These are near-square Figma exports. Full-bleed they ran ~1000px tall and
   dwarfed the copy, so they're centred at a readable width instead — the
   screenshot keeps its own shape and nothing is cropped. */
.ds-fig { max-width: 720px; margin-left: auto; margin-right: auto; }
.ds-fig .dark-well { padding: 8px; }
.ds-fig.tall { max-width: 330px; }
@media (max-width: 900px) {
  .ds-fig, .ds-fig.tall { max-width: 100%; }
}

/* ---------- Token pipeline: screenshot left, explanation right ----------
   These Figma exports are near-square. Full-bleed they ran ~1000px tall and
   buried the copy; paired with the text they stay legible at half the height. */
.pipe-split {
  display: grid;
  /* fixed image column sized to the screenshot, so the well hugs it
     (~8-14px inset) instead of leaving wide dark margins */
  grid-template-columns: 420px 1fr;
  gap: 32px;
  align-items: center;
}
.pipe-split.split-narrow { grid-template-columns: 250px 1fr; }
.pipe-split .ds-fig { max-width: 100%; margin: 0; }
/* cap the screenshot so a near-square export can't set the row height */
.pipe-split .ds-fig .dark-well { height: 330px; aspect-ratio: auto; }
.pipe-split .ds-fig.tall .dark-well { height: 430px; }
/* contain: these are token tables — cropping mid-row looks like a bug */
.pipe-split .ds-fig .slot img { object-fit: contain; }
.pipe-copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 16.5px;
  line-height: 1.65;
  color: #55554f;
}
.pipe-copy p { margin: 0; }
.pipe-copy p strong { color: #171715; }
.pipe-copy .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.ds-fig .dark-well { padding: 8px; }
@media (max-width: 900px) {
  .pipe-split, .pipe-split.split-narrow { grid-template-columns: 1fr; gap: 18px; }
  .pipe-split .ds-fig.tall { max-width: 260px; margin: 0 auto; }
}

/* Research artifacts sit side by side, so they share one frame height and
   are contained rather than cropped — these are screenshots, not photos. */
.fig-pair { align-items: start; }
.fig-pair > .frame-card > div:first-child { aspect-ratio: 4 / 3; background: #f0f0ed; }
.fig-pair .slot img { object-fit: contain; padding: 10px; }

/* Wire grid variant for landscape wireframes: a 2x2 of 16:9 frames rather
   than the tall-plus-three layout, which assumed portrait screens. */
.ph-wire-grid.wide { grid-template-columns: repeat(2, 1fr); }
.ph-wire-grid.wide > div { grid-column: span 1; grid-row: auto; aspect-ratio: 16 / 9; }
@media (max-width: 900px) {
  .ph-wire-grid.wide { grid-template-columns: 1fr; }
  .ph-wire-grid.wide > div { aspect-ratio: 16 / 9; }
}

/* ---------- Case-study TL;DR ----------
   Recruiters give a portfolio 30-40 seconds. This is the whole story in
   three columns: what was broken, what I did, what changed. It replaces the
   intro paragraphs rather than adding to them — the point is less to read. */
.tldr {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 20px;
  background: #fbfbfa;
  border: 1px solid #e8e8e4;
  border-radius: 18px;
  overflow: hidden;
}
.tldr-col { padding: 26px 28px; display: flex; flex-direction: column; gap: 10px; }
.tldr-col + .tldr-col { border-left: 1px solid #ececea; }
.tldr-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a5a5a0;
}
.tldr-col p { margin: 0; font-size: 16px; line-height: 1.6; color: #55554f; }
.tldr-col p strong { color: #171715; font-weight: 600; }
/* the outcome is what they're scanning for — give it weight */
.tldr-result { background: #f6f6f3; }
.tldr-result p { color: #171715; }
@media (max-width: 900px) {
  .tldr { grid-template-columns: 1fr; }
  .tldr-col + .tldr-col { border-left: none; border-top: 1px solid #ececea; }
  .tldr-col { padding: 22px 20px; }
}