@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Archivo:wght@400;500;600;700&family=Caveat+Brush&display=swap');

:root{
  --paper: #FAF8F1;
  --paper-alt: #E9EFE2;
  --card: #FFFFFF;
  --ink: #212820;
  --ink-soft: #5C6656;
  --moss: #7FA173;
  --moss-dark: #4A6642;
  --line: #DCE3D2;
  --max: 1120px;
  --max-narrow: 760px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background-color: var(--paper);
  color: var(--ink);
  font-family:'Archivo', sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  margin:0;
  color:var(--ink);
  letter-spacing:-0.01em;
}

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

.wrap{ max-width:var(--max); margin:0 auto; padding:0 32px; }
.wrap-narrow{ max-width:var(--max-narrow); margin:0 auto; padding:0 32px; }

.sparkle{ color:var(--moss-dark); font-style:normal; }
.eyebrow{
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--ink-soft);
}

/* ---------- decorative elements removed for a simpler look ---------- */
.pin{ display:none; }
.frame,
.hero-photo .frame,
.about-photo .frame{
  transform:none !important;
}

/* ---------- NAV ---------- */
header.site{
  position:sticky; top:0; z-index:20;
  background:rgba(250,248,241,0.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 32px;
  max-width:var(--max); margin:0 auto;
}
.nav-name{ font-family:'Space Grotesk', sans-serif; font-size:18px; font-weight:600; letter-spacing:-0.01em; }
.nav-links{ display:flex; gap:28px; align-items:center; font-size:12.5px; text-transform:uppercase; letter-spacing:0.08em; }
.nav-links a{ position:relative; border-bottom:1px solid transparent; padding-bottom:2px; transition:color .15s ease; }
.nav-links a:not(.btn)::after{
  content:""; position:absolute; left:0; right:100%; bottom:-1px; height:1px;
  background:var(--moss-dark); transition:right .25s cubic-bezier(.2,.8,.2,1);
}
.nav-links a:hover{ color:var(--moss-dark); }
.nav-links a:not(.btn):hover::after{ right:0; }
.nav-links .btn{
  color:var(--moss-dark); padding:0; border-bottom:1px solid var(--moss-dark);
  transition:color .15s ease, border-color .15s ease;
}
.nav-links .btn:hover{ color:var(--ink); border-color:var(--ink); background:none; }

/* ---------- SCROLL REVEAL ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }

  .case.reveal{ transition-delay:0ms; }
  .case:nth-of-type(1).reveal{ transition-delay:0ms; }
  .case:nth-of-type(2).reveal{ transition-delay:60ms; }
  .case:nth-of-type(3).reveal{ transition-delay:120ms; }
  .case:nth-of-type(4).reveal{ transition-delay:180ms; }
  .case:nth-of-type(5).reveal{ transition-delay:240ms; }

  .skill-pill.reveal{ transform:translateY(10px) scale(.94); transition:opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
  .skill-pill.reveal.in{ transform:translateY(0) scale(1); }
  .skill-pill.reveal:nth-child(1){ transition-delay:0ms; }
  .skill-pill.reveal:nth-child(2){ transition-delay:40ms; }
  .skill-pill.reveal:nth-child(3){ transition-delay:80ms; }
  .skill-pill.reveal:nth-child(4){ transition-delay:120ms; }
  .skill-pill.reveal:nth-child(5){ transition-delay:160ms; }
  .skill-pill.reveal:nth-child(6){ transition-delay:200ms; }
  .skill-pill.reveal:nth-child(7){ transition-delay:240ms; }
  .skill-pill.reveal:nth-child(8){ transition-delay:280ms; }
  .skill-pill.reveal:nth-child(9){ transition-delay:320ms; }
  .skill-pill.reveal:nth-child(10){ transition-delay:360ms; }

  .section-head .rule{ transform:scaleX(0); transform-origin:left; transition:transform .7s cubic-bezier(.2,.8,.2,1) .1s; }
  .section-head.in .rule{ transform:scaleX(1); }

  @keyframes heroFadeUp{
    from{ opacity:0; transform:translateY(16px); }
    to{ opacity:1; transform:translateY(0); }
  }
  .hero .eyebrow, .hero h1, .hero p, .hero .hero-status{
    opacity:0; animation:heroFadeUp .7s cubic-bezier(.2,.8,.2,1) forwards;
  }
  .hero .eyebrow{ animation-delay:.05s; }
  .hero h1{ animation-delay:.15s; }
  .hero p{ animation-delay:.32s; }
  .hero .hero-status{ animation-delay:.45s; }

  @keyframes dotPulse{
    0%, 100%{ box-shadow:0 0 0 0 rgba(74,102,66,0.35); }
    50%{ box-shadow:0 0 0 5px rgba(74,102,66,0); }
  }
  .hero-status .dot{ animation:dotPulse 2.2s ease-out infinite; }
}

/* ---------- HERO (home, no image) ---------- */
.hero{ padding:130px 0 90px; border-bottom:1px solid var(--line); }
.hero .wrap{ max-width:860px; }
.hero .eyebrow{ margin-bottom:22px; }
.hero h1{
  font-size:clamp(44px,8vw,78px);
  line-height:1.02;
  margin-bottom:28px;
  letter-spacing:-0.02em;
}
.hero h1 em{ font-style:normal; color:var(--moss-dark); }
.hero h1 .signature{
  font-family:'Caveat Brush', cursive; font-style:normal; font-weight:400;
  color:var(--moss-dark); font-size:1.28em; line-height:1; letter-spacing:0.01em;
  display:inline-block; transform:rotate(-4deg) translateY(0.05em);
  margin:0 0.02em;
}
.hero p{ max-width:56ch; color:var(--ink-soft); font-size:17.5px; margin-bottom:28px; }
.hero-status{
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px;
  text-transform:uppercase; letter-spacing:0.08em; color:var(--moss-dark);
  border:1px solid var(--line); background:var(--paper-alt); padding:8px 14px; border-radius:20px;
}
.hero-status .dot{ width:6px; height:6px; border-radius:50%; background:var(--moss-dark); }

/* ---------- SECTION HEADS ---------- */
.section{ padding:64px 0; }
.section-head{ margin-bottom:44px; display:flex; align-items:baseline; gap:14px; }
.section-head h2{
  font-size:clamp(26px,3.4vw,34px); text-transform:uppercase; letter-spacing:0.01em;
}
.section-head .count{ color:var(--ink-soft); font-size:13px; letter-spacing:0.06em; text-transform:uppercase; }
.section-head .rule{ flex:1; height:1px; background:var(--line); }

/* ---------- CASE STUDY LIST (home) ---------- */
.case{
  display:grid; grid-template-columns:64px 0.9fr 1.1fr; gap:32px; align-items:center;
  padding:44px 0; border-bottom:1px solid var(--line);
}
.case:last-child{ border-bottom:none; }
.case:nth-child(even) .case-media{ order:3; }
.case:nth-child(even) .case-body{ order:2; }
.case-index{
  font-family:'Space Grotesk', sans-serif; font-size:22px; font-weight:600; color:var(--moss-dark);
  align-self:start; padding-top:2px; letter-spacing:-0.02em;
}

.case-media{ position:relative; display:flex; justify-content:center; isolation:isolate; }
.case-media .frame{
  --accent: var(--moss-dark);
  background:var(--accent); padding:36px; border-radius:8px; border:none;
  overflow:hidden; max-width:460px; width:100%; aspect-ratio:4/3;
  display:flex; align-items:center; justify-content:center; position:relative;
  box-shadow:0 1px 2px rgba(33,40,32,0.08);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.case-media img{
  width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; display:block;
  border-radius:4px;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
  filter:drop-shadow(0 18px 30px rgba(0,0,0,0.28));
}

/* bold per-project accent colors, in the spirit of an editorial cover grid */
.case-media .frame.thumb-sbee{ --accent:#B4552E; }
.case-media .frame.thumb-herdup{ --accent:#6B4A2F; }
.case-media .frame.thumb-surewalk{ --accent:#1F2A44; }
.case-media .frame.thumb-seedly{ --accent:#2B6A3C; }
.case-media .frame.thumb-idetect{ --accent:#1E4D6B; }

.case-media .frame:hover,
.case-media .frame:focus-visible{
  transform:translateY(-6px) scale(1.025) !important;
  box-shadow:0 26px 44px -18px rgba(0,0,0,0.38), 0 6px 16px rgba(0,0,0,0.14);
}
.case-media .frame:hover img{ transform:scale(1.035); }

/* ---------- THUMBNAIL ILLUSTRATIONS (home) ---------- */
.thumb-illustration{
  width:84%; height:84%; overflow:visible;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.case-media .frame:hover .thumb-illustration{ transform:scale(1.06); }

.thumb-illustration .thumb-shape-soft{ fill:var(--paper); }
.thumb-illustration .thumb-cutout{ fill:var(--accent); }
.thumb-illustration .thumb-node{ fill:var(--paper); }
.thumb-illustration .draw-line{
  fill:none; stroke:var(--paper); stroke-width:2; stroke-linecap:round;
  opacity:0.85;
}
.thumb-illustration .pulse-ring{
  fill:none; stroke:var(--paper); stroke-width:1.4; stroke-opacity:0;
}
.thumb-illustration .thumb-pulse{ stroke:var(--accent); opacity:1; }
.thumb-illustration .thumb-star path{ fill:var(--paper); opacity:0.85; }
.thumb-illustration .thumb-moon{ opacity:0.95; }
.thumb-illustration .thumb-sun circle{ fill:var(--paper); }
.thumb-illustration .thumb-rays line{ stroke:var(--paper); stroke-width:2; stroke-linecap:round; }
.thumb-illustration .thumb-leaf{ fill:var(--accent); transform-box:fill-box; transform-origin:bottom; }
.thumb-illustration .thumb-badge-text{
  font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:20px;
  fill:var(--accent); letter-spacing:0.02em;
}

@media (prefers-reduced-motion:no-preference){
  @keyframes thumbAutoScroll{
    0%, 12%{ transform:translateY(0); }
    50%, 62%{ transform:translateY(var(--thumb-scroll-amount, -14px)); }
    100%{ transform:translateY(0); }
  }
  .thumb-scroll{
    animation:thumbAutoScroll 7s cubic-bezier(.65,0,.35,1) infinite;
  }

  .thumb-illustration .draw-line{
    stroke-dasharray:260; stroke-dashoffset:260;
    transition:stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1) .15s;
  }
  .case.in .thumb-illustration .draw-line{ stroke-dashoffset:0; }

  .thumb-illustration .thumb-node,
  .thumb-illustration .thumb-pin-start,
  .thumb-illustration .thumb-pin-end{
    transform-box:fill-box; transform-origin:center; transform:scale(0);
    transition:transform .45s cubic-bezier(.34,1.56,.64,1) .9s;
  }
  .case.in .thumb-illustration .thumb-node,
  .case.in .thumb-illustration .thumb-pin-start,
  .case.in .thumb-illustration .thumb-pin-end{ transform:scale(1); }
  .thumb-illustration .thumb-node-a{ transition-delay:1s; }
  .thumb-illustration .thumb-node-b{ transition-delay:1.08s; }
  .thumb-illustration .thumb-node-c{ transition-delay:1.16s; }

  .thumb-illustration .thumb-leaf{ transform:scaleY(0); }
  .case.in .thumb-illustration .thumb-leaf{
    transition:transform .55s cubic-bezier(.2,.8,.2,1);
  }
  .case.in .thumb-illustration .thumb-leaf-1{ transform:scaleY(1); transition-delay:.2s; }
  .case.in .thumb-illustration .thumb-leaf-2{ transform:scaleY(1); transition-delay:.35s; }
  .case.in .thumb-illustration .thumb-leaf-3{ transform:scaleY(1); transition-delay:.5s; }

  @keyframes thumbFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
  .thumb-float{ animation:thumbFloat 4.5s ease-in-out infinite; }

  @keyframes thumbPulseRing{
    0%{ stroke-width:3; stroke-opacity:0.7; r:16; }
    100%{ stroke-width:0; stroke-opacity:0; r:30; }
  }
  .case.in .pulse-ring{ animation:thumbPulseRing 2.6s ease-out infinite; }
  .case.in .pulse-ring-2{ animation-delay:1.3s; }

  @keyframes thumbTwinkle{ 0%,100%{ opacity:0.35; } 50%{ opacity:1; } }
  .thumb-star-1{ animation:thumbTwinkle 2.8s ease-in-out infinite; }
  .thumb-star-2{ animation:thumbTwinkle 2.8s ease-in-out infinite 1.1s; }

  @keyframes thumbSway{ 0%,100%{ transform:rotate(-2deg); } 50%{ transform:rotate(2deg); } }
  .case.in .thumb-leaf{ transform-origin:bottom; }
  .case.in .thumb-leaf-1{ animation:thumbSway 5s ease-in-out infinite .8s; }
  .case.in .thumb-leaf-2{ animation:thumbSway 5.6s ease-in-out infinite 1s; }
  .case.in .thumb-leaf-3{ animation:thumbSway 5.2s ease-in-out infinite 1.2s; }

  @keyframes thumbSpin{ to{ transform:rotate(360deg); } }
  .thumb-sun{ transform-box:fill-box; transform-origin:center; }
  .thumb-rays{ transform-box:fill-box; transform-origin:center; animation:thumbSpin 14s linear infinite; }
  .case-media .frame:hover .thumb-rays{ animation-duration:3s; }

  .case-media .frame:hover .thumb-node,
  .case-media .frame:hover .thumb-pin-end{ transform:scale(1.15); }
  .case-media .frame:hover .draw-line.thumb-route{ stroke-width:2.4; }
}

.case-media .frame::after{
  content:"View case study →";
  position:absolute; left:14px; bottom:14px; z-index:2;
  font-family:'Space Grotesk', sans-serif; font-size:11px; font-weight:600;
  letter-spacing:0.05em; text-transform:uppercase; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:6px 12px; opacity:0; transform:translateY(6px);
  transition:opacity .3s ease, transform .3s ease; pointer-events:none;
}
.case-media .frame:hover::after,
.case-media .frame:focus-visible::after{ opacity:1; transform:translateY(0); }

.case-tag{
  display:inline-block; font-size:12px; color:var(--moss-dark); background:none;
  border:none; padding:0; border-radius:0; margin-bottom:16px;
  text-transform:uppercase; letter-spacing:0.08em; font-weight:600;
}
.case-body h3{ font-size:clamp(20px,2.2vw,25px); margin-bottom:12px; line-height:1.25; }
.case-body p{ color:var(--ink-soft); max-width:48ch; margin-bottom:18px; }
.case-link{ font-size:14px; font-weight:600; color:var(--moss-dark); border-bottom:1px solid var(--moss-dark); padding-bottom:2px; text-transform:uppercase; letter-spacing:0.05em; }
.case-link:hover{ color:var(--ink); border-color:var(--ink); }

/* ---------- SKILLS ---------- */
.skills-list{ display:flex; flex-wrap:wrap; gap:18px 24px; }
.skill-pill{
  font-size:13.5px; padding:0; background:none; border:none;
  color:var(--ink); text-transform:uppercase; letter-spacing:0.05em;
}
.skill-pill::before{ content:"["; color:var(--moss-dark); margin-right:2px; }
.skill-pill::after{ content:"]"; color:var(--moss-dark); margin-left:2px; }

/* ---------- ABOUT ---------- */
#about{ background:var(--paper-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.about-grid{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:52px; align-items:center; }
.about-photo .frame{
  background:var(--paper-alt); padding:0; border-radius:8px; border:none; overflow:hidden;
}
.about-body p{ color:var(--ink-soft); margin-bottom:16px; max-width:58ch; }

/* ---------- FOOTER ---------- */
footer{ padding:44px 0 56px; color:var(--ink-soft); font-size:13.5px; }
footer .foot-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
footer a{ border-bottom:1px solid var(--ink-soft); }
footer a:hover{ color:var(--moss-dark); border-color:var(--moss-dark); }

/* ================= PROJECT DETAIL PAGES ================= */
.detail-hero{ padding:56px 0 40px; border-bottom:1px solid var(--line); }
.back-link{ display:inline-flex; align-items:center; gap:6px; font-size:13px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); margin-bottom:28px; }
.back-link:hover{ color:var(--moss-dark); }
.back-link .arrow{ display:inline-block; transform:rotate(180deg); }

.detail-hero h1{ font-size:clamp(28px,4vw,42px); line-height:1.15; max-width:22ch; margin-bottom:18px; }
.detail-hero .intro{ font-size:17.5px; color:var(--ink-soft); max-width:62ch; margin-bottom:36px; }

.meta-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  border-top:1px solid var(--line); padding-top:24px;
}
.meta-item .label{ font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:6px; }
.meta-item .value{ font-size:14px; line-height:1.5; }
.meta-item .value div{ margin-bottom:2px; }

.hero-visual{ padding:44px 0 10px; }

.content-section{ padding:44px 0; border-bottom:1px solid var(--line); }
.content-section:last-of-type{ border-bottom:none; }
.content-section h2{ font-size:clamp(21px,2.4vw,25px); margin-bottom:16px; }
.content-section p{ color:var(--ink-soft); max-width:66ch; }

.award-note{
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--moss-dark);
  background:var(--paper-alt); border:1px solid var(--line); padding:6px 14px; border-radius:20px; margin-top:14px;
  text-transform:uppercase; letter-spacing:0.05em;
}

.process-block{ margin-bottom:40px; }
.process-block:last-child{ margin-bottom:0; }
.process-block h3{ font-size:17.5px; margin-bottom:10px; line-height:1.35; }
.process-block p{ color:var(--ink-soft); max-width:66ch; margin-bottom:20px; }

.conclusion-list{ list-style:none; margin:20px 0; padding:0; }
.conclusion-list li{
  padding:14px 0 14px 22px; border-top:1px solid var(--line); position:relative; color:var(--ink-soft); max-width:66ch;
}
.conclusion-list li:last-child{ border-bottom:1px solid var(--line); }
.conclusion-list li::before{
  content:"–"; position:absolute; left:0; color:var(--moss-dark); font-size:14px;
}
.conclusion-list li strong{ color:var(--ink); }

.quote-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:20px 0 4px; }
.quote-card{
  background:var(--paper-alt); border:1px solid var(--line); border-radius:10px;
  padding:20px 22px; position:relative;
}
.quote-card::before{
  content:"\201C"; font-family:Georgia,serif; font-size:38px; line-height:1; color:var(--moss-dark);
  opacity:0.45; display:block; margin-bottom:4px;
}
.quote-card p{ font-style:italic; color:var(--ink); font-size:14.5px; margin-bottom:0; max-width:none; }
@media (max-width:640px){ .quote-grid{ grid-template-columns:1fr; } }

.affinity-map{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:24px 0 4px;
}
.affinity-col{ display:flex; flex-direction:column; gap:10px; }
.affinity-col h4{
  font-family:'Space Grotesk', sans-serif; font-size:13px; font-weight:600; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:0.04em; margin-bottom:2px; line-height:1.3;
}
.affinity-note{
  background:var(--paper-alt); border:1px solid var(--line); border-radius:6px;
  padding:12px 13px; font-size:13px; line-height:1.45; color:var(--ink);
}
.affinity-note:nth-child(3n+1){ transform:rotate(-0.6deg); }
.affinity-note:nth-child(3n+2){ transform:rotate(0.5deg); }
.affinity-note:nth-child(3n){ transform:rotate(-0.3deg); }
@media (max-width:800px){ .affinity-map{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .affinity-map{ grid-template-columns:1fr; } }

/* ---------- HOW MIGHT WE cards ---------- */
.hmw-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:24px 0 4px; }
.hmw-card{
  background:var(--moss-dark); border-radius:10px; padding:20px 20px 22px; color:var(--paper);
}
.hmw-card .hmw-tag{
  display:block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--paper); opacity:0.7; margin-bottom:8px;
}
.hmw-card p{ margin:0; font-size:15px; line-height:1.4; color:var(--paper); max-width:none; }
@media (max-width:800px){ .hmw-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .hmw-grid{ grid-template-columns:1fr; } }

/* ---------- SUMMARY block (top of each case study) ---------- */
.summary-block{
  margin:32px 0 0; padding:4px 24px; background:var(--card);
  border:1px solid var(--line); border-radius:12px;
}
.summary-row{
  display:grid; grid-template-columns:128px minmax(0,1fr); gap:6px 20px;
  padding:14px 0; border-top:1px solid var(--line); margin:0;
}
.summary-row:first-child{ border-top:none; }
.summary-row dt{
  font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--moss-dark);
  font-weight:600; padding-top:3px;
}
.summary-row dd{ margin:0; font-size:14.5px; line-height:1.55; color:var(--ink); }
.summary-row dd .metric-note{ display:block; font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
@media (max-width:560px){
  .summary-block{ padding:4px 18px; }
  .summary-row{ grid-template-columns:1fr; }
}

.quote-card .quote-source{
  display:block; margin-top:10px; font-size:12.5px; font-style:normal; color:var(--ink-soft);
}

/* ---------- STAT highlights ---------- */
.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:24px 0 4px; }
.stat-card{
  background:var(--paper-alt); border:1px solid var(--line); border-radius:10px; padding:20px 18px;
}
.stat-card .stat-num{
  display:block; font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:clamp(26px,3vw,34px);
  color:var(--moss-dark); letter-spacing:-0.02em; line-height:1;
}
.stat-card p{ margin:10px 0 0; font-size:13.5px; line-height:1.4; color:var(--ink-soft); max-width:none; }
@media (max-width:800px){ .stat-row{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .stat-row{ grid-template-columns:1fr; } }

/* ---------- PERSONA / archetype cards ---------- */
.persona-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:24px 0 4px; }
.persona-card{
  border:1px solid var(--line); border-radius:10px; padding:20px 20px 22px; position:relative;
}
.persona-card h4{
  font-family:'Space Grotesk', sans-serif; font-size:15px; font-weight:600; color:var(--ink);
  margin-bottom:8px; line-height:1.3;
}
.persona-card p{ margin:0; font-size:13.5px; line-height:1.5; color:var(--ink-soft); max-width:none; }
.persona-grid-2{ grid-template-columns:1fr 1fr; }
@media (max-width:800px){ .persona-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .persona-grid{ grid-template-columns:1fr; } }

/* ---------- JOURNEY steps (before / after) ---------- */
.journey-steps{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:0; margin:24px 0 4px;
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
}
.journey-step{
  padding:18px 16px; background:var(--paper); border-right:1px solid var(--line); position:relative;
}
.journey-step:last-child{ border-right:none; }
.journey-step .step-num{
  display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%;
  background:var(--moss-dark); color:var(--paper); font-size:11px; font-weight:600; margin-bottom:10px;
}
.journey-step p{ margin:0; font-size:13px; line-height:1.4; color:var(--ink-soft); max-width:none; }
.journey-step p strong{ display:block; color:var(--ink); font-size:13.5px; margin-bottom:3px; }
.journey-row-label{
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.07em; color:var(--ink-soft);
  margin-bottom:8px; display:block;
}
.journey-before .step-num{ background:var(--ink-soft); }
@media (max-width:640px){
  .journey-steps{ grid-template-columns:1fr; }
  .journey-step{ border-right:none; border-bottom:1px solid var(--line); }
  .journey-step:last-child{ border-bottom:none; }
}

/* ---------- VOICE moments (content writing) ---------- */
.voice-moments{ display:flex; flex-direction:column; gap:0; margin:24px 0 4px; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.voice-moment{
  display:grid; grid-template-columns:200px minmax(0,1fr); gap:16px; align-items:center;
  padding:16px 18px; border-top:1px solid var(--line); background:var(--paper);
}
.voice-moment:first-child{ border-top:none; }
.voice-label{
  font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:var(--moss-dark);
}
.voice-label em{
  display:block; font-style:normal; font-weight:400; text-transform:none; letter-spacing:0;
  font-size:13px; color:var(--ink-soft); margin-top:2px;
}
.content-section .voice-msg{
  margin:0; justify-self:start; background:var(--card); border:1px solid var(--line);
  border-radius:14px 14px 14px 4px; padding:10px 14px; font-size:14.5px; line-height:1.45; color:var(--ink); max-width:none;
}
@media (max-width:560px){ .voice-moment{ grid-template-columns:1fr; gap:8px; } }

/* ---------- TERMINOLOGY table ---------- */
.term-table{ margin:24px 0 4px; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.term-row{
  display:grid; grid-template-columns:0.8fr 1.1fr 1.6fr; gap:16px; padding:13px 18px;
  border-top:1px solid var(--line); font-size:13.5px; line-height:1.45; color:var(--ink-soft);
}
.term-row span:first-child{ color:var(--ink); font-weight:600; }
.term-row span:nth-child(2){ text-decoration:line-through; text-decoration-color:var(--moss); }
.term-head{ border-top:none; background:var(--paper-alt); }
.term-head span, .term-head span:first-child, .term-head span:nth-child(2){
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.07em; color:var(--moss-dark); text-decoration:none;
}
@media (max-width:560px){
  .term-row{ grid-template-columns:1fr 1fr; gap:4px 14px; }
  .term-row span:nth-child(3){ grid-column:1 / -1; }
  .term-head span:nth-child(3){ display:none; }
}

/* ---------- PROTOTYPE FLOW DEMOS (auto-playing phone screens) ---------- */
.proto-demos{ display:flex; flex-direction:column; align-items:center; gap:48px; margin:28px 0 4px; }
.proto-demo{ margin:0; display:flex; flex-direction:column; align-items:center; gap:14px; }
.proto-phone{
  width:300px; max-width:100%; aspect-ratio:600 / 1300; position:relative; overflow:hidden;
  border-radius:34px; border:10px solid #14181f; background:#fff; box-sizing:content-box;
  box-shadow:0 30px 54px -20px rgba(20,24,31,0.45), 0 6px 18px rgba(20,24,31,0.15);
}
.proto-phone img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .5s ease;
}
.proto-phone img.active{ opacity:1; }
/* the "clicker": a cursor that moves to each tapped button and presses it */
.proto-cursor{
  position:absolute; left:50%; top:62%; z-index:3; width:30px; height:30px; margin:-3px 0 0 -6px;
  pointer-events:none; opacity:0;
  transition:left .7s cubic-bezier(.45,0,.25,1), top .7s cubic-bezier(.45,0,.25,1), opacity .3s ease;
}
.proto-cursor.show{ opacity:1; }
.proto-cursor.dragging{ transition:left .9s ease-in-out, top .9s ease-in-out; }
.proto-cursor svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 2px 3px rgba(0,0,0,.35)); transition:transform .15s ease; }
.proto-cursor.press svg{ transform:scale(.85); }
.proto-cursor::before{
  content:""; position:absolute; left:6px; top:3px; width:34px; height:34px; margin:-17px 0 0 -17px;
  border-radius:50%; background:rgba(74,102,66,.35); transform:scale(0); opacity:0;
}
.proto-cursor.press::before{ animation:protoRipple .55s ease-out; }
@keyframes protoRipple{
  0%{ transform:scale(.2); opacity:1; }
  100%{ transform:scale(1.5); opacity:0; }
}
.proto-demo figcaption{ font-size:12.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.06em; }
@media (max-width:420px){ .proto-phone{ width:260px; } }

/* ---------- SCROLLING SCREEN DEMO ---------- */
.scroll-demo-wrap{ display:flex; flex-direction:column; align-items:center; gap:14px; padding:12px 0 8px; }
.scroll-demo{
  width:320px; height:520px; max-width:100%; overflow:hidden; position:relative;
  border-radius:34px; border:10px solid #14181f; background:#fff;
  box-shadow:0 30px 54px -20px rgba(20,24,31,0.45), 0 6px 18px rgba(20,24,31,0.15);
}
.scroll-demo::after{
  content:""; position:absolute; top:0; left:0; right:0; height:28px; z-index:2;
  background:linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0));
  pointer-events:none;
}
.scroll-demo img{
  display:block; width:100%; height:auto; --scroll-amount:-180px;
  animation:scrollDemo 9s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes scrollDemo{
  0%   { transform:translateY(0); }
  15%  { transform:translateY(0); }
  50%  { transform:translateY(var(--scroll-amount)); }
  65%  { transform:translateY(var(--scroll-amount)); }
  100% { transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce){
  .scroll-demo img{ animation:none; }
}
.scroll-demo-caption{ font-size:12.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.06em; }

.proto-link{
  display:inline-block; margin-top:8px; font-size:14px; font-weight:600;
  color:var(--moss-dark); border-bottom:1px solid var(--moss-dark); text-transform:uppercase; letter-spacing:0.04em;
}
.proto-link:hover{ color:var(--ink); border-color:var(--ink); }
.proto-link + .proto-link{ margin-left:24px; }

/* ---------- CAROUSEL ---------- */
.carousel{ position:relative; }
.carousel-track{
  display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; margin:0; padding:2px;
}
.carousel-track::-webkit-scrollbar{ display:none; }
.carousel-slide{
  flex:0 0 100%; scroll-snap-align:center; margin:0;
  background:var(--paper); border-radius:10px; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  min-height:360px; overflow:hidden;
}
.carousel-slide img{ width:auto; height:auto; max-width:100%; max-height:74vh; object-fit:contain; display:block; }

.carousel-nav{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:18px; }
.carousel-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line); flex-shrink:0;
  background:var(--card); color:var(--ink); font-family:'Space Grotesk',sans-serif; font-size:17px;
  cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.carousel-btn:hover{ background:var(--moss-dark); border-color:var(--moss-dark); color:#fff; }
.carousel-dots{ display:flex; align-items:center; gap:8px; }
.carousel-dot{
  width:7px; height:7px; padding:0; border:none; border-radius:50%;
  background:var(--line); cursor:pointer; transition:background .15s ease, transform .15s ease;
}
.carousel-dot.active{ background:var(--moss-dark); transform:scale(1.4); }
.carousel.single .carousel-nav{ display:none; }

@media (min-width:640px){
  .carousel-slide{ min-height:460px; }
}

/* breaks a single wide diagram out of the narrow text column so it's bigger and easier to read */
.carousel.carousel-wide{
  width:min(94vw, 1200px);
  margin-left:50%;
  transform:translateX(-50%);
}

.next-project{
  padding:52px 0; text-align:center; background:var(--paper-alt);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.next-project .label{ font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); margin-bottom:10px; }
.next-project h2{ font-size:clamp(22px,3vw,28px); }
.next-project a:hover{ color:var(--moss-dark); }

/* ---------- RESPONSIVE ---------- */
@media (max-width:860px){
  .case{ grid-template-columns:1fr; }
  .case-index{ display:none; }
  .case:nth-child(even) .case-media,
  .case:nth-child(even) .case-body{ order:initial; }
  .about-grid{ grid-template-columns:1fr; }
  .nav-links{ gap:14px; font-size:11px; }
  .wrap, .wrap-narrow{ padding:0 20px; }
  .meta-grid{ grid-template-columns:repeat(2,1fr); }
}

/* keep the name on one line on small phones now that the nav has four links */
@media (max-width:420px){
  .nav{ padding:18px 16px; gap:12px; }
  .nav-name{ white-space:nowrap; font-size:16px; }
  .nav-links{ gap:10px; font-size:10.5px; letter-spacing:0.05em; }
}

/* ---------- "email copied" toast ---------- */
.email-toast{
  position:fixed; left:50%; bottom:28px; z-index:50; transform:translate(-50%, 12px);
  background:var(--ink); color:var(--paper); padding:10px 18px; border-radius:999px;
  font-size:14px; box-shadow:0 12px 28px -12px rgba(33,40,32,.5);
  opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
  max-width:calc(100vw - 32px); text-align:center;
}
.email-toast.show{ opacity:1; transform:translate(-50%, 0); }