/* ============================================================
   ZUZANNA GEIB — Product Marketing
   Airy, light, unfussy. Jade as the brand colour, blush as a
   whisper. Lots of white space. Nothing shouts.
   ============================================================ */

:root{
  /* surfaces — soft white, not paper-beige */
  --bg:        #F5EFEC;   /* off-white, a whisper of rose — ties jade to blush */
  --bg-2:      #F5EFEC;
  --jade-wash: #E8F4EF;   /* barely-there jade tint */
  --blush-wash:#FCEEF1;   /* barely-there pink tint */

  --ink:       #1A1D1B;
  --ink-soft:  #4A504C;
  --ink-mute:  #838A85;
  --line:      #E7E4DE;   /* hairline, never heavy */

  /* brand */
  --jade:      #00A47C;   /* fills, marks, large type */
  --jade-text: #097A5F;   /* small text + buttons, readable */
  --jade-deep: #075C47;   /* deep ground for the closing section */
  --blush:     #F7D6DC;   /* slim pink — a wash, used sparingly */
  --blush-text:#A84A64;

  --max: 1120px;
  --gut: clamp(22px, 5vw, 60px);
  --r:   22px;            /* generous, soft — not blog-card */

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{
  color-scheme:light only;
  scroll-behavior:smooth; -webkit-text-size-adjust:100%;
  /* body sets overflow-x:hidden, which stops its background propagating to the
     canvas — Safari then paints the canvas white and a strip shows above the
     page. Setting it here as well keeps the canvas the right colour. */
  background:#FCF8F6;
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:'DM Sans', ui-sans-serif, sans-serif;
  font-size:17px;
  font-weight:400;
  line-height:1.75;          /* airier than editorial default */
  letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{ background:var(--blush); color:var(--ink); }
.grain{ display:none; }      /* the texture read as vintage blog */

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

/* ── type primitives ─────────────────────────────────────── */
.sec-label{
  font-family:'DM Sans',sans-serif;
  font-size:12px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--jade-text);
  margin-bottom:20px;
}
.sec-label-inv{ color:var(--jade); }

.sec-title{
  font-family:'DM Sans', sans-serif;
  font-weight:700;
  font-size:clamp(2rem, 4.4vw, 3.2rem);
  line-height:1.14;
  letter-spacing:-.026em;
}
.sec-title-inv{ color:#fff; }

.sec-sub{
  margin-top:20px; max-width:52ch;
  font-size:17px; color:var(--ink-mute); line-height:1.8;
}
.sec-sub-inv{ color:rgba(255,255,255,.72); }

.sec-head{ margin-bottom:clamp(48px,7vw,88px); }

/* ── buttons — pill, light ───────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'DM Sans',sans-serif;
  font-size:15px; font-weight:500; letter-spacing:0;
  padding:14px 28px; border-radius:999px;
  text-decoration:none; border:1px solid transparent;
  cursor:pointer;
  transition:transform .25s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.btn .arr{ transition:transform .25s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }

.btn-signal{ background:var(--jade-text); color:#fff; }
.btn-signal:hover{ background:var(--jade-deep); transform:translateY(-2px); box-shadow:0 8px 22px rgba(9,122,95,.18); }

.btn-ink{ background:var(--jade-text); color:#fff; font-size:14px; padding:10px 22px; }
.btn-ink:hover{ background:var(--jade-deep); }

.btn-ghost{ border-color:var(--line); color:var(--ink); background:#fff; }
.btn-ghost:hover{ border-color:var(--jade); color:var(--jade-text); transform:translateY(-2px); }

.btn-ghost-inv{ border-color:rgba(255,255,255,.45); color:#fff; }
.btn-ghost-inv:hover{ background:#fff; color:var(--jade-deep); border-color:#fff; transform:translateY(-2px); }

.btn-lg{ font-size:16px; padding:17px 34px; }


/* ══════════════════════════════════════════════════ NAV ══ */
/* A solid full-width bar once scrolled, instead of one that fades into
   whatever section sits behind it — a fixed colour means it never needs
   to match the page, light section or dark. */
nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; gap:28px;
  padding:0 var(--gut); height:74px;
  background:transparent; box-shadow:none; border-bottom:1px solid transparent;
  transition:height .3s var(--ease), background .3s var(--ease),
             border-color .3s var(--ease), box-shadow .3s var(--ease);
}
nav.stuck{
  height:64px;
  background:rgba(252,248,246,.92);
  border-color:var(--line);
  box-shadow:0 10px 30px rgba(26,29,27,.06);
}

.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); margin-right:auto; }
.brand-mark{ display:flex; gap:4px; align-items:center; }
.bm-dot{ width:8px; height:8px; border-radius:50%; background:var(--blush); transition:transform .35s var(--ease); }
.bm-dot:nth-child(2){ background:var(--jade); }
.brand:hover .bm-dot:nth-child(1){ transform:translateX(-2px) scale(.85); }
.brand:hover .bm-dot:nth-child(2){ transform:translateX(2px) scale(1.25); }

.brand-name{
  font-family:'DM Sans', sans-serif; font-weight:500; font-size:18px;
  letter-spacing:-.02em;
}

.nav-links{ display:flex; gap:32px; list-style:none; }
.nav-links a{ font-size:15px; color:var(--ink-soft); text-decoration:none; position:relative; padding-bottom:3px; }
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--jade); transition:width .28s var(--ease);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ width:100%; }

.burger{ display:none; background:none; border:none; cursor:pointer; padding:8px; }
.burger span{ display:block; width:22px; height:1.5px; background:var(--ink); transition:.3s var(--ease); }
.burger span+span{ margin-top:6px; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-4px) rotate(-45deg); }

.drawer{
  position:fixed; inset:74px 0 auto 0; z-index:890;
  background:var(--bg); border-bottom:1px solid var(--line);
  transform:translateY(-110%);
  /* Hidden by transform alone, the panel still overhangs the top of the
     viewport and its border-bottom shows as a hairline across the page.
     visibility keeps it out of the paint entirely while closed. */
  visibility:hidden;
  transition:transform .4s var(--ease), visibility 0s linear .4s;
  padding:12px var(--gut) 30px;
}
.drawer.open{
  transform:translateY(0);
  visibility:visible;
  transition:transform .4s var(--ease), visibility 0s linear 0s;
}
.drawer ul{ list-style:none; }
.drawer a{
  display:block; padding:16px 0; text-decoration:none; color:var(--ink);
  font-family:'DM Sans', sans-serif; font-size:25px; font-weight:400;
  border-bottom:1px solid var(--line);
}
.drawer .drawer-cta{ color:var(--jade-text); border-bottom:none; }


/* ══════════════════════════════════════════════════ HERO ══ */
.hero{ position:relative; padding:clamp(130px,17vh,190px) 0 clamp(70px,9vw,110px); overflow:hidden; }
.hero-decor{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.blob{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; }
.blob-jade{ width:46vw; height:46vw; max-width:620px; max-height:620px; right:-8vw; top:-10vw; background:rgba(0,164,124,.10); }
.blob-blush{ width:38vw; height:38vw; max-width:520px; max-height:520px; right:14vw; top:24vw; background:rgba(247,214,220,.75); }
@media (max-width:900px){ .blob-blush{ display:none; } .blob-jade{ opacity:.35; } }
.hero-inner{ position:relative; z-index:2; max-width:var(--max); margin:0 auto; padding:0 var(--gut); }
.hero-top{ display:grid; grid-template-columns:1fr auto; gap:clamp(34px,5vw,80px); align-items:start; }

.eyebrow{
  font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin-bottom:28px;
}
/* the discipline carries the weight; the city stays quiet beside it */
.eyebrow strong{ font-weight:700; color:var(--jade-text); }
.eyebrow-loc{ color:var(--ink-mute); font-weight:400; }
.eyebrow-loc::before{ content:'·'; margin-right:11px; color:var(--line); }
.hero-name{
  font-family:'DM Sans', sans-serif;
  font-weight:700;
  font-size:clamp(2.7rem, 7.6vw, 5.8rem);
  line-height:.98; letter-spacing:-.035em;
  margin-bottom:34px;
}

.hn-line{ display:block; }
.hn-2{ padding-left:.08em; }
.hn-period{ color:var(--jade); }

.hero-lede{
  font-family:'DM Sans', sans-serif;
  font-weight:500;
  font-size:clamp(1.2rem, 2vw, 1.6rem);
  line-height:1.5; letter-spacing:-.012em;
  max-width:26ch; margin-bottom:34px;
}
.hero-lede em{
  font-style:normal; color:var(--jade-text); font-weight:500;
  box-shadow:inset 0 -.4em 0 var(--blush);
  white-space:nowrap;              /* the highlight must never break across lines */
}

.hero-sub{ max-width:50ch; color:var(--ink-mute); font-size:16.5px; margin-bottom:36px; }
.hero-cta{ display:flex; gap:13px; flex-wrap:wrap; }

/* portrait — full colour, with a soft blush shadow behind it */
.hero-portrait{
  position:relative; z-index:1; flex:none;
  width:clamp(240px,28vw,360px); margin-top:8px;
}
.hero-portrait img{
  display:block; width:100%; height:auto; position:relative; z-index:2;
  border-radius:var(--r);
  box-shadow:0 20px 50px rgba(26,29,27,.14);
  filter:saturate(.94) contrast(.96) brightness(1.02) sepia(.06);
}
.hp-block{ position:absolute; z-index:1; inset:18px -18px -18px 18px; background:var(--blush); border-radius:var(--r); }


/* ── THE TRANSLATOR ──────────────────────────────────────── */
.translator{
  margin-top:clamp(60px,7vw,96px);
  border:1px solid var(--line); border-radius:var(--r);
  background:#fff; overflow:hidden;
  box-shadow:0 10px 40px rgba(26,29,27,.045);
}
.tr-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:18px 26px; border-bottom:1px solid var(--line); background:var(--jade-wash);
}
.tr-title{ font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--jade-text); }
.tr-note{ font-size:13.5px; color:var(--ink-mute); }

.tr-stage{ padding:clamp(24px,3.4vw,38px); }
.tr-labels{ display:flex; justify-content:space-between; gap:14px; margin-bottom:26px; }
.tr-lbl{
  font-size:16px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-mute); opacity:.4; transition:opacity .3s, color .3s;
}
.tr-lbl.is-on{ opacity:1; }
.tr-lbl-left.is-on{ color:var(--ink-soft); }
.tr-lbl-right.is-on{ color:var(--jade-text); }

.tr-screen{ position:relative; min-height:clamp(112px,15vw,136px); display:flex; align-items:center; }
.tr-text{ position:absolute; inset:0; display:flex; align-items:center; transition:opacity .28s var(--ease), filter .28s var(--ease), transform .28s var(--ease); }
.tr-jargon{ font-size:clamp(.94rem,1.5vw,1.05rem); line-height:1.75; color:var(--ink-mute); }
.tr-human{
  font-family:'DM Sans', sans-serif;
  font-weight:500;
  font-size:clamp(1.4rem,3.1vw,2.2rem); line-height:1.25;
  letter-spacing:-.018em; color:var(--ink);
}

.tr-control{ margin-top:28px; }
#trSlider{
  -webkit-appearance:none; appearance:none; width:100%; height:3px; border-radius:999px;
  background:linear-gradient(to right,var(--jade) 0%,var(--jade) var(--p,0%),var(--line) var(--p,0%),var(--line) 100%);
  outline:none; cursor:grab;
}
#trSlider:active{ cursor:grabbing; }
#trSlider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:26px; height:26px; border-radius:50%;
  background:#fff; border:1.5px solid var(--jade);
  box-shadow:0 3px 12px rgba(26,29,27,.14);
  cursor:grab; transition:transform .18s var(--ease), background .2s;
}
#trSlider::-webkit-slider-thumb:hover{ transform:scale(1.14); background:var(--jade-wash); }
#trSlider::-moz-range-thumb{ width:23px; height:23px; border-radius:50%; background:#fff; border:1.5px solid var(--jade); cursor:grab; }

.tr-track-labels{ display:flex; justify-content:space-between; margin-top:14px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute); }
.tr-pct{ color:var(--jade-text); font-weight:600; }

.tr-foot{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:26px; padding-top:20px; border-top:1px solid var(--line);
}
.tr-product{ font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute); }
.tr-next{
  background:none; border:none; cursor:pointer;
  font-family:'DM Sans',sans-serif; font-size:14.5px; font-weight:500;
  color:var(--jade-text); display:inline-flex; gap:7px; align-items:center;
}
.tr-next:hover{ color:var(--jade-deep); }
.tr-next .arr{ transition:transform .25s var(--ease); }
.tr-next:hover .arr{ transform:translateX(4px); }


/* ══════════════════════════════════════════════ SKILLS ══ */
.skills{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-2); padding:clamp(30px,4vw,46px) 0; }
.skills-inner{ max-width:var(--max); margin:0 auto; padding:0 var(--gut); display:grid; grid-template-columns:auto 1fr; gap:clamp(22px,4vw,56px); align-items:start; }
.skills-label{ font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--jade-text); padding-top:8px; white-space:nowrap; }
.skills-list{ display:flex; flex-wrap:wrap; gap:9px; list-style:none; }
.skills-list li{
  font-size:14.5px; color:var(--ink-soft);
  padding:7px 16px; border:1px solid var(--line); border-radius:999px; background:#fff;
  transition:border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.skills-list li:hover{ border-color:var(--jade); color:var(--jade-text); transform:translateY(-1px); }
@media (max-width:680px){ .skills-inner{ grid-template-columns:1fr; gap:16px; } .skills-label{ padding-top:0; } }


/* ══════════════════════════════════════════════ WORK ══ */
.work{ padding:clamp(84px,11vw,150px) 0; }
.cases{ display:flex; flex-direction:column; gap:14px; }
.case{
  border:1px solid var(--line); border-radius:var(--r); background:#fff;
  overflow:hidden; transition:box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.case:hover{ box-shadow:0 10px 34px rgba(26,29,27,.06); }
.case.is-open{ border-color:var(--jade); box-shadow:0 10px 34px rgba(0,164,124,.07); }

.case-bar{
  width:100%; background:none; border:none; cursor:pointer; text-align:left;
  display:grid; grid-template-columns:auto auto 1fr auto auto;
  gap:clamp(16px,3vw,34px); align-items:center;
  padding:clamp(22px,2.8vw,30px) clamp(20px,2.6vw,32px);
  font-family:inherit; color:inherit;
}
.case-num{ font-size:12.5px; font-weight:600; color:var(--jade-text); }

.case-logo{
  width:44px; height:44px; flex:none; border-radius:12px;
  object-fit:contain; background:#fff; padding:5px;
  border:1px solid var(--line);
  transition:box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
/* full colour always — hover lifts it and adds a soft jade halo */
.case-bar:hover .case-logo,.case.is-open .case-logo{
  border-color:transparent;
  box-shadow:0 0 0 3px var(--jade-wash), 0 8px 18px rgba(26,29,27,.10);
  transform:translateY(-2px);
}

.case-headline{ display:block; }
.case-kicker{ display:block; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:7px; }
.case-name{
  display:block; font-family:'DM Sans', sans-serif; font-weight:500;
  font-size:clamp(1.15rem,2.2vw,1.6rem); line-height:1.24; letter-spacing:-.016em;
}

.case-tags{ display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.tag{ font-size:12px; padding:5px 13px; border:1px solid var(--line); border-radius:999px; color:var(--ink-mute); white-space:nowrap; }
.tag-signal{ background:var(--jade-wash); border-color:transparent; color:var(--jade-text); }
.tag-acid{ background:var(--blush-wash); border-color:transparent; color:var(--blush-text); }
.tag-tech{ background:var(--bg-2); border-color:transparent; color:var(--ink-soft); }

.case-toggle{ position:relative; width:18px; height:18px; flex:none; }
.case-toggle::before,.case-toggle::after{ content:''; position:absolute; background:var(--ink-mute); transition:transform .35s var(--ease), background .25s; }
.case-toggle::before{ left:0; top:8px; width:18px; height:1.5px; }
.case-toggle::after{ left:8px; top:0; width:1.5px; height:18px; }
.case.is-open .case-toggle::after{ transform:scaleY(0); }
.case.is-open .case-toggle::before{ background:var(--jade); }

.case-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease); }
.case.is-open .case-body{ grid-template-rows:1fr; }
.case-inner{ overflow:hidden; min-height:0; }

.case-cols{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3.2vw,46px);
  padding:6px clamp(20px,2.6vw,32px) clamp(24px,3vw,32px);
}
.col-label{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--jade-text); margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--line);
}
.case-col p{ font-size:16px; color:var(--ink-soft); line-height:1.8; }
.col-list{ list-style:none; }
.col-list li{ font-size:15.5px; color:var(--ink-soft); padding:7px 0 7px 22px; position:relative; }
.col-list li::before{ content:'—'; position:absolute; left:0; color:var(--jade); }

.case-proof{ display:flex; gap:11px; flex-wrap:wrap; padding:0 clamp(20px,2.6vw,32px) clamp(28px,3.4vw,38px); }
.proof-chip{ border:1px solid var(--line); border-radius:12px; padding:14px 20px; min-width:132px; background:var(--bg-2); }
.pc-num{
  display:block; font-family:'DM Sans', sans-serif; font-weight:500;
  font-size:1.7rem; line-height:1; letter-spacing:-.02em; color:var(--jade-text);
}
.pc-lbl{ display:block; margin-top:7px; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-mute); }
.proof-chip:has([data-fill]){ border-style:dashed; background:transparent; }
.pc-num[data-fill]{ color:var(--ink-mute); }
.proof-live .pc-num{ color:var(--jade); font-size:1.3rem; }


/* ══════════════════════════════════════════════ SYSTEMS ══ */
.systems{ padding:clamp(84px,11vw,150px) 0; background:var(--jade-wash); }

.sys-flow{
  display:flex; align-items:stretch; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:var(--r); background:#fff;
  margin-bottom:clamp(28px,3.6vw,44px); overflow:hidden;
}
.flow-node{ flex:1 1 190px; padding:26px 28px; border-right:1px solid var(--line); }
.flow-node:last-child{ border-right:none; }
.flow-node-out{ background:var(--jade-text); color:#fff; }
.fn-i{
  display:block; font-family:'DM Sans', sans-serif; font-weight:500;
  font-size:1.3rem; letter-spacing:-.015em; margin-bottom:8px;
}
.flow-node-out .fn-i{ color:#fff; }
.fn-d{ font-size:13px; color:var(--ink-mute); line-height:1.65; }
.flow-node-out .fn-d{ color:rgba(255,255,255,.78); }
.flow-arrow{ align-self:center; flex:none; width:22px; height:1px; background:var(--line); position:relative; }
.flow-arrow::after{ content:''; position:absolute; right:0; top:-3px; border-left:6px solid var(--line); border-top:3.5px solid transparent; border-bottom:3.5px solid transparent; }

.sys-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (max-width:640px){ .sys-grid{ grid-template-columns:1fr; } }
.sys-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(26px,3vw,36px); transition:box-shadow .3s var(--ease);
}
.sys-card:hover{ box-shadow:0 10px 34px rgba(26,29,27,.055); }
.sys-card h3{
  font-family:'DM Sans', sans-serif; font-weight:500;
  font-size:1.4rem; letter-spacing:-.018em; line-height:1.24; margin-bottom:14px;
}
.sys-card p{ font-size:15.5px; color:var(--ink-soft); line-height:1.8; }
.sys-tag{
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
  font-size:12px !important; letter-spacing:.06em; text-transform:uppercase; color:var(--jade-text) !important;
}


/* ══════════════════════════════════════════════ PLAYBOOK ══ */
.playbook{ padding:clamp(84px,11vw,150px) 0; background:var(--bg); }
.playbook .sec-label-inv{ color:var(--jade-text); }
.playbook .sec-title-inv{ color:var(--ink); }
.playbook .sec-sub-inv{ color:var(--ink-mute); }

.pb-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:14px; }
.pb-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(26px,3.2vw,36px); transition:box-shadow .3s var(--ease), transform .3s var(--ease);
}
.pb-card:hover{ box-shadow:0 10px 34px rgba(26,29,27,.055); transform:translateY(-2px); }
.pb-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  background:var(--blush); color:var(--ink);
  font-size:12.5px; font-weight:600; margin-bottom:20px;
}
.pb-card h3{
  font-family:'DM Sans', sans-serif; font-weight:500;
  font-size:1.35rem; line-height:1.24; letter-spacing:-.018em; margin-bottom:14px; color:var(--ink);
}
.pb-card p{ font-size:15.5px; color:var(--ink-soft); line-height:1.8; }
.pb-tag{
  margin-top:18px !important; padding-top:16px; border-top:1px solid var(--line);
  font-size:12px !important; letter-spacing:.06em; text-transform:uppercase; color:var(--jade-text) !important;
}


/* ══════════════════════════════════════════════ ROUTE ══ */
.route{ padding:clamp(84px,11vw,150px) 0; background:var(--bg-2); }
.tl{ list-style:none; }
.tl-item{
  display:grid; grid-template-columns:104px 48px 1fr; gap:clamp(14px,2.4vw,30px);
  padding:24px clamp(14px,2vw,22px); border-radius:12px;
  position:relative; transition:background .25s var(--ease);
}
.tl-item+.tl-item{ border-top:1px solid var(--line); }
.tl-item:hover{ background:#fff; }
.tl-item::after{
  content:attr(data-city); position:absolute; right:20px; top:26px;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--line); transition:color .25s;
}
.tl-item:hover::after{ color:var(--jade); }
.tl-logo{
  width:48px; height:48px; border-radius:12px; object-fit:contain;
  background:#fff; padding:5px; border:1px solid var(--line);
  transition:box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.tl-item:hover .tl-logo{
  border-color:transparent;
  box-shadow:0 0 0 3px var(--jade-wash), 0 8px 18px rgba(26,29,27,.10);
  transform:translateY(-2px);
}
.tl-year{ font-size:13px; font-weight:500; color:var(--jade-text); padding-top:5px; }
.tl-body h3{
  font-family:'DM Sans', sans-serif; font-weight:500;
  font-size:1.22rem; letter-spacing:-.015em; line-height:1.3;
}
.tl-org{ font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-mute); margin:5px 0 10px; }
.tl-body>p:last-child{ font-size:15.5px; color:var(--ink-soft); max-width:62ch; }

.route-extras{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:14px; margin-top:clamp(44px,5.5vw,70px); }
.rx-card{ border:1px solid var(--line); border-radius:var(--r); padding:clamp(26px,3vw,34px); background:#fff; }
.rx-label{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--jade-text); margin-bottom:22px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.lang-list,.edu-list{ list-style:none; }
.lang-list li{ display:flex; align-items:baseline; gap:14px; padding:11px 0; border-bottom:1px solid var(--line); }
.lang-list li:last-child{ border-bottom:none; }
.lg-word{
  font-family:'DM Sans', sans-serif; font-weight:500;
  font-size:1.35rem; letter-spacing:-.01em; min-width:3.6em; color:var(--jade-text);
}
.lg-name{ font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute); }
.edu-list li{ display:flex; align-items:center; gap:15px; padding:13px 0; border-bottom:1px solid var(--line); }
.edu-list li:last-child{ border-bottom:none; }
.edu-logo{
  width:44px; height:44px; flex:none; border-radius:12px; object-fit:contain;
  background:#fff; padding:5px; border:1px solid var(--line);
  transition:box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.edu-list li:hover .edu-logo{
  border-color:transparent;
  box-shadow:0 0 0 3px var(--jade-wash), 0 8px 18px rgba(26,29,27,.10);
  transform:translateY(-2px);
}
.edu-text{ display:block; }
.edu-list strong{ display:block; font-size:15.5px; font-weight:500; line-height:1.4; }
.edu-text>span{ font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-mute); }


/* ══════════════════════════════════════════════ ABOUT ══ */
.about{ padding:clamp(84px,11vw,150px) 0; background:var(--blush-wash); }
.about-wrap{ max-width:900px; }
.about-quote{
  font-family:'DM Sans', sans-serif; font-weight:500;
  font-size:clamp(1.9rem,5vw,3.3rem); line-height:1.18; letter-spacing:-.018em;
  margin-bottom:clamp(34px,4.4vw,56px);
}
.about-quote em{ font-style:normal; color:var(--jade-text); }
.about-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(26px,3.4vw,46px); }
.about-cols p{ font-size:17px; color:var(--ink-soft); line-height:1.85; }


/* ══════════════════════════════════════════════ CONTACT ══ */
.contact{ padding:clamp(96px,12vw,160px) 0; background:var(--jade-deep); color:#fff; }
.contact-title{
  font-family:'DM Sans', sans-serif; font-weight:700;
  font-size:clamp(2.1rem,5.6vw,4rem); line-height:1.12; letter-spacing:-.02em; margin-bottom:24px;
}
.contact-sub{ font-size:18px; color:rgba(255,255,255,.76); margin-bottom:44px; max-width:46ch; }
.contact-cta{ display:flex; gap:13px; flex-wrap:wrap; }

footer{ background:var(--jade-deep); color:rgba(255,255,255,.6); border-top:1px solid rgba(255,255,255,.13); padding:28px 0; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; }
.foot-name{ color:#fff; }


/* ══════════════════════════════════════════ REVEALS ══ */
.reveal{ opacity:0; transform:translateY(18px); }
.reveal.in{ opacity:1; transform:none; transition:opacity .85s var(--ease), transform .85s var(--ease); }
.reveal[data-delay="1"].in{ transition-delay:.07s; }
.reveal[data-delay="2"].in{ transition-delay:.14s; }
.reveal[data-delay="3"].in{ transition-delay:.21s; }
.reveal[data-delay="4"].in{ transition-delay:.28s; }
.reveal[data-delay="5"].in{ transition-delay:.36s; }


/* ══════════════════════════════════════════ RESPONSIVE ══ */
@media (max-width:960px){
  .case-cols{ grid-template-columns:1fr; gap:28px; }
  .case-bar{ grid-template-columns:auto auto 1fr auto; }
  .case-tags{ display:none; }
  .hero{ padding:clamp(90px,14vh,120px) 0 clamp(40px,8vw,60px); }
  .hero-top{
    grid-template-columns:1fr;
    grid-template-areas:
      "eyebrow"
      "name"
      "photo"
      "lede"
      "cta";
  }
  .hero-copy{ display:contents; }
  .eyebrow{ grid-area:eyebrow; margin-bottom:12px; }
  .hero-name{ grid-area:name; margin-bottom:17px; }
  .hero-portrait{ grid-area:photo; width:clamp(220px,60vw,320px); margin:0 0 24px; }
  .hero-lede{ grid-area:lede; }
  .hero-cta{ grid-area:cta; }
  .flow-arrow{ display:none; }
  .flow-node{ border-right:none; border-bottom:1px solid var(--line); flex-basis:100%; }
}
@media (min-width:761px){
  .drawer{ display:none; }
}
@media (max-width:760px){
  .nav-links,.nav-cta{ display:none; }
  .burger{ display:block; }
  .tl-item{ grid-template-columns:48px 1fr; gap:14px; }
  .tl-year{ grid-column:1/-1; padding-top:0; }
  .tl-item::after{ display:none; }
  .tr-labels{ flex-direction:column; gap:4px; }
  .hero-lede{ max-width:none; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}

/* ── skills, grouped as on the CV ──────────────────────────── */
.skills-inner{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,40px); align-items:start; }
.skill-group .skills-label{ padding-top:0; margin-bottom:14px; }
.skill-group .skills-list{ flex-direction:column; align-items:flex-start; gap:7px; }
.skill-group .skills-list li{ width:100%; }
@media (max-width:900px){ .skills-inner{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .skills-inner{ grid-template-columns:1fr; } }

/* placeholder tile where an entry has no logo */
.tl-logo-none,.edu-logo-none{
  display:block; background:var(--bg-2); border:1px dashed var(--line);
  box-shadow:none !important; transform:none !important;
}


/* ── agentic workflow diagram ──────────────────────────────── */
.agentic{
  margin-top:clamp(28px,3.6vw,44px);
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(26px,3.4vw,40px);
}
.ag-head h3{
  font-family:'DM Sans',sans-serif; font-weight:600;
  font-size:1.4rem; letter-spacing:-.025em; line-height:1.2; margin-bottom:12px;
}
.ag-head p{ font-size:15.5px; color:var(--ink-mute); line-height:1.75; max-width:62ch; margin-bottom:30px; }

.ag-lane{
  display:grid; grid-template-columns:150px 1fr; gap:clamp(14px,2.4vw,28px);
  align-items:start; padding:18px 0; position:relative;
}
.ag-lane+.ag-lane{ border-top:1px dashed var(--line); }
.ag-lane-label{
  font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-mute); padding-top:9px;
}
.ag-nodes{ display:flex; flex-wrap:wrap; gap:9px; }
.ag-node{
  font-size:14px; color:var(--ink-soft);
  background:var(--bg-2); border:1px solid var(--line);
  border-radius:10px; padding:9px 15px;
}
/* the agent steps are the ones that run unattended */
.ag-agent{ background:var(--jade-wash); border-color:transparent; color:var(--jade-text); font-weight:500; }
/* the one place a person is required */
.ag-human{ background:var(--blush-wash); border-color:var(--blush); color:var(--blush-text); font-weight:500; }
.ag-sys{ background:#fff; }

.ag-foot{
  margin-top:22px; padding-top:20px; border-top:1px solid var(--line);
  font-size:15px; color:var(--ink-soft);
}
@media (max-width:720px){
  .ag-lane{ grid-template-columns:1fr; gap:10px; }
  .ag-lane-label{ padding-top:0; }
}

/* ── what she's looking for ────────────────────────────────── */
.contact-open{ list-style:none; margin:0 0 44px; max-width:640px; }
.contact-open li{
  display:grid; grid-template-columns:118px 1fr; gap:18px;
  padding:13px 0; border-top:1px solid rgba(255,255,255,.16);
  font-size:16px; color:#fff;
}
.contact-open li:last-child{ border-bottom:1px solid rgba(255,255,255,.16); }
.contact-open span{
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.55); padding-top:5px;
}
@media (max-width:560px){
  .contact-open li{ grid-template-columns:1fr; gap:3px; }
  .contact-open span{ padding-top:0; }
}

.rx-note{ font-size:14.5px; color:var(--ink-mute); line-height:1.7; margin:-8px 0 18px; }

/* ── the greeting, part of the name block rather than a layer above it ── */
.hn-greet{
  display:block;
  font-family:'DM Sans',sans-serif;
  font-size:clamp(1.1rem,2.3vw,1.8rem);
  font-weight:400; letter-spacing:-.02em; line-height:1.25;
  color:var(--ink-mute); margin-bottom:.4em;
}
.greet-line{
  display:inline-block;
  transition:opacity .38s var(--ease), transform .38s var(--ease);
}
.greet-line.swap{ opacity:0; transform:translateY(-.3em); }
.greet-line .gw{ font-weight:700; color:var(--jade-text); }

/* the three beats sit under the statement, same size and colour */
.lede-beats{
  display:block;
  margin-top:.32em;
}
.lede-beats span{ display:block; white-space:nowrap; }

/* ── the AI loop: leverage on the left, judgement on the right ── */
.aiflow{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; margin-bottom:clamp(20px,2.6vw,32px);
}
.ai-head,.ai-row{
  display:grid; grid-template-columns:150px 1fr 1fr;
  gap:clamp(16px,2.4vw,32px);
  padding:18px clamp(20px,2.6vw,32px);
  align-items:baseline;
}
.ai-head{
  background:var(--jade-wash);
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--jade-text);
}
.ai-row+.ai-row,.ai-head+.ai-row{ border-top:1px solid var(--line); }
.ai-row{ transition:background .2s var(--ease); }
.ai-row:hover{ background:var(--bg); }
.ai-stage{ font-weight:700; font-size:16px; letter-spacing:-.015em; }
.ai-does{ font-size:15px; color:var(--ink-mute); line-height:1.65; }
.ai-me{ font-size:15px; color:var(--ink); line-height:1.65; font-weight:500; }
.ai-row .ai-me{ position:relative; padding-left:16px; }
.ai-row .ai-me::before{
  content:''; position:absolute; left:0; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--blush);
}
.sys-grid-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){
  .ai-head{ display:none; }
  .ai-row{ grid-template-columns:1fr; gap:6px; padding:20px clamp(18px,4vw,26px); }
  .ai-row .ai-me{ padding-left:16px; }
  .sys-grid-3{ grid-template-columns:1fr; }
}