/* ================= TOKENS ================= */
:root{
  /* color */
  --bg:#F1F1F5;
  --ink:#16182A;
  --ink-muted:#6A6D80;        /* 2nd half of headlines */
  --text-muted:#5D6074;       /* labels, captions */
  --accent:#4A47D6;           /* indigo: links, metrics, 01 */
  --band:#171A33;             /* midnight side-project band */
  --band-text:#F1F1F7;
  --band-link:#C9CBE0;
  --lilac:#C4B5FF;            /* tag text + dot */
  --lilac-ring:#B8A6FF;       /* headshot ring */
  --panel:#E4E4EE;            /* case-study visual panel */
  --hairline:rgba(22,24,42,.1);

  /* type */
  --font-display:'Archivo',sans-serif;
  --font-heading:'Archivo',sans-serif;
  --font-body:'Work Sans',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  --h1:clamp(36px, 4.2vw, 56px);
  --h2:clamp(24px, 2.8vw, 40px);
  --band-title:clamp(26px, 2.5vw, 36px);
  --metric:clamp(48px, 5vw, 72px);
  --footer-title:clamp(22px, 1.8vw, 26px);

  /* layout */
  --max:1440px;
  --gutter:64px;              /* page side padding */
  --band-inset:40px;          /* band + panel distance from viewport edge */
  --band-radius:48px;
  --panel-radius:48px;
  --avatar:104px;

  /* components */
  --phone-scale:1;
  --phone-right:130px;
  --journeys-scale:1.12;
  --panel-h:620px;
}
@media (max-width:1024px){
  :root{
    --gutter:40px; --band-inset:24px; --band-radius:40px; --panel-radius:40px;
    --phone-scale:.85; --phone-right:40px;
    --journeys-scale:.95; --panel-h:540px; --avatar:92px;
  }
}
@media (max-width:720px){
  :root{
    --gutter:20px; --band-inset:12px; --band-radius:32px; --panel-radius:28px;
    --phone-scale:.8;
    --journeys-scale:.48; --panel-h:300px; --avatar:80px;
  }
}

/* ================= BASE ================= */
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--ink)}
a:hover{color:var(--accent)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:8px}
.page{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

/* ================= HEADER ================= */
.header{height:88px;display:flex;align-items:center;justify-content:space-between}
.logo{font-family:var(--font-heading);font-stretch:100%;font-weight:700;font-size:19px;letter-spacing:-0.02em;text-decoration:none}
.nav{display:flex;gap:36px;font-size:15px;font-weight:400}
.nav a{text-decoration:none}

/* ================= HERO ================= */
.hero{padding-top:52px;padding-bottom:168px;display:flex;flex-direction:column;gap:32px}
.avatar{width:var(--avatar);height:var(--avatar);border-radius:999px;padding:3px;background:var(--lilac-ring)}
.avatar img{display:block;width:100%;height:100%;border-radius:999px;object-fit:cover;outline:1px solid rgba(0,0,0,.1);outline-offset:-1px}
.h1{margin:0;max-width:1100px;font-family:var(--font-display);font-weight:500;font-size:clamp(34px, 4vw, 48px);line-height:1.12;letter-spacing:-0.02em;text-wrap:balance}
.muted{color:var(--ink-muted)}

/* ================= SIDE PROJECT BAND ================= */
.band{position:relative;display:block;height:360px;margin-inline:calc(var(--band-inset) - var(--gutter));border-radius:var(--band-radius);background:var(--band);text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 60px -30px rgba(23,26,51,.55)}
.band:hover{color:inherit}
.band-glow{position:absolute;right:200px;top:-40px;width:520px;height:420px;border-radius:999px;background:radial-gradient(circle,rgba(184,166,255,.38) 0%,rgba(184,166,255,.09) 45%,rgba(184,166,255,0) 70%);pointer-events:none}
.band-copy{position:absolute;left:64px;top:64px;width:420px;max-width:46%;display:flex;flex-direction:column;gap:18px;z-index:2}
.tag{align-self:flex-start;height:28px;padding:0 12px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--lilac);box-shadow:inset 0 0 0 1px rgba(196,181,255,.5)}
.tag-dot{width:6px;height:6px;border-radius:999px;background:var(--lilac)}
.band-title{font-family:var(--font-display);font-weight:400;font-size:var(--band-title);line-height:1.08;letter-spacing:-0.03em;color:var(--band-text)}
.band-link{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:16px;color:var(--band-link)}
.band:hover .band-link{color:#FFFFFF}
/* Phone breaks out of the band's TOP and is clipped at its BOTTOM */
.phone-clip{position:absolute;left:0;right:0;top:-200px;bottom:0;overflow:hidden;border-radius:0 0 var(--band-radius) var(--band-radius);pointer-events:none}
.phone-pos{position:absolute;right:var(--phone-right);top:70px;width:290px;height:600px;transform:perspective(1800px) rotateY(-18deg) rotateX(8deg) rotateZ(-12deg) scale(var(--phone-scale));transform-origin:50% 0}
.float{animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ================= SHIPPED WORK ================= */
.shipped-jump{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:-12px;font-weight:500;font-size:16px;color:var(--accent);text-decoration:none}
.shipped-jump:hover{color:var(--accent)}
.work{padding-top:140px}
.work-label{display:flex;align-items:center;gap:16px;padding-bottom:28px;box-shadow:inset 0 -1px 0 var(--hairline);font-family:var(--font-mono);font-size:12px;letter-spacing:.12em}
.work-num{color:var(--accent)}
.work-name{text-transform:uppercase;color:var(--text-muted)}
.work-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-top:44px}
.h2{grid-column:span 8;margin:0;font-family:var(--font-display);font-weight:500;font-size:var(--h2);line-height:1.15;letter-spacing:-0.02em;text-wrap:balance}
.h2 a{text-decoration:none}
.metrics{grid-column:10 / span 3;display:flex;flex-direction:column;gap:20px;padding-top:8px}
.metric-pair{display:flex;flex-direction:column;gap:28px}
.metrics-note{margin:0;font-size:12px;line-height:1.4;color:var(--text-muted)}
.metric{display:flex;flex-direction:column;gap:6px}
.metric + .metric{padding-top:0}
.metric:first-child{padding-bottom:24px;box-shadow:inset 0 -1px 0 var(--hairline)}
.metric-num{font-family:var(--font-display);font-weight:400;font-size:var(--metric);line-height:1;letter-spacing:-0.045em;font-variant-numeric:tabular-nums;color:var(--accent)}
.metric-label{font-size:14px;color:var(--text-muted)}

/* ================= VISUAL PANEL ================= */
.panel{position:relative;display:block;height:var(--panel-h);margin-top:56px;margin-inline:calc(var(--band-inset) - var(--gutter));border-radius:var(--panel-radius);background:var(--panel);text-decoration:none;color:var(--ink);overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 0 1px rgba(22,24,42,.05)}
.journeys-pos{position:absolute;left:50%;top:50%;width:700px;height:480px;transform:translate(-50%,-54%) scale(var(--journeys-scale))}
.panel.is-phones{height:760px}
.panel-shot{position:absolute;left:50%;top:46%;height:84%;width:auto;max-width:92%;transform:translate(-50%,-52%);pointer-events:none}
.panel-note{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);width:min(440px,78%);display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;pointer-events:none}
.panel-note p{margin:0;font-size:16px;line-height:1.4;color:var(--text-muted)}
.panel-kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.panel-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.panel-tags span{padding:6px 12px;border-radius:999px;background:#fff;font-size:13px;font-weight:500;box-shadow:0 0 0 1px rgba(22,24,42,.08)}
.panel-tags span.is-on{color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.cta{position:absolute;right:40px;bottom:32px;display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 20px;border-radius:999px;background:#FFFFFF;color:var(--ink);font-weight:500;font-size:15px;box-shadow:0 0 0 1px rgba(22,24,42,.08),0 4px 12px -4px rgba(22,24,42,.12)}
.panel:hover .cta{color:var(--accent)}

/* ================= FOOTER ================= */
.footer{height:120px;margin-top:20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.footer-title{font-family:var(--font-display);font-weight:500;font-size:var(--footer-title);letter-spacing:-0.03em}
.footer a{font-weight:500;font-size:16px;color:var(--accent)}

/* ================= TABLET (721–1024) ================= */
@media (max-width:1024px){
  .hero{padding-top:40px;padding-bottom:150px}
  .band-copy{left:48px;top:48px}
  .band-glow{right:0}
  .work{padding-top:112px}
  .h2{grid-column:1 / -1}
  .metrics{grid-column:1 / -1;width:max-content;max-width:100%;padding-top:40px;gap:16px}
  .metric-pair{flex-direction:row;gap:48px}
  .metrics-note{text-align:center}
  .metric:first-child{padding-bottom:0;padding-right:48px;box-shadow:inset -1px 0 0 var(--hairline)}
  .cta{right:24px;bottom:24px}
  .panel.is-phones{height:640px}
}

/* ================= MOBILE (≤720) ================= */
@media (max-width:720px){
  .header{height:72px}
  .nav{gap:24px}
  .hero{padding-top:24px;padding-bottom:48px;gap:24px}
  /* band stacks: copy on top, phone below, clipped by the band's bottom edge */
  .band{height:auto;overflow:hidden;display:flex;flex-direction:column}
  .band-copy{position:relative;left:auto;top:auto;width:auto;max-width:none;padding:32px 24px 0}
  .band-glow{right:-160px;top:auto;bottom:-120px}
  .phone-clip{position:relative;top:auto;height:300px;margin-top:8px;border-radius:0}
  .phone-pos{right:auto;left:calc(50% - 145px);top:28px;transform:perspective(1800px) rotateY(-12deg) rotateX(6deg) rotateZ(-8deg) scale(var(--phone-scale));transform-origin:50% 0}
  .work{padding-top:72px}
  .work-label{padding-bottom:20px;font-size:11px}
  .work-grid{padding-top:28px}
  .metrics{padding-top:28px;gap:14px}
  .metric-pair{gap:28px}
  .metric:first-child{padding-right:28px}
  .panel{margin-top:32px}
  .journeys-pos{transform:translate(-50%,-58%) scale(var(--journeys-scale))}
  .panel.is-phones{height:480px}
  .panel.is-phones .panel-shot{top:42%;height:72%}
  .cta{left:16px;right:16px;bottom:16px;justify-content:center;height:44px}
  .footer{height:auto;padding:40px 0 48px;flex-direction:column;align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){.float{animation:none}}

.float{position:absolute;inset:0}

/* Phone, 290 x 600 */
.phone {
  position: relative;
  width: 290px;
  height: 600px;
  font-family: var(--font-body);
  color: #1C2A30;
}

.phone-key {
  position: absolute;
  width: 3px;
  background: #2B3438;
}

.phone-key-a {
  left: -3px;
  top: 120px;
  height: 34px;
  border-radius: 2px 0 0 2px;
}

.phone-key-b {
  left: -3px;
  top: 170px;
  height: 56px;
  border-radius: 2px 0 0 2px;
}

.phone-key-c {
  right: -3px;
  top: 150px;
  height: 80px;
  border-radius: 0 2px 2px 0;
}

.phone-bezel {
  position: absolute;
  inset: 0;
  border-radius: 52px;
  padding: 10px;
  box-sizing: border-box;
  background: linear-gradient(150deg, #4A555A 0%, #1F272B 35%, #12181B 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14), inset 0 0 0 4px #0D1214, 0 2px 4px rgba(13, 18, 20, .2), 0 24px 48px -12px rgba(13, 18, 20, .45), 0 60px 90px -40px rgba(13, 18, 20, .4);
}

.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 42px;
  overflow: hidden;
  background: #FBFAF5;
  display: flex;
  flex-direction: column;
  padding: 14px 18px 18px;
  box-sizing: border-box;
}

.phone-wash {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 220px;
  background: linear-gradient(180deg, #F6EBC6 0%, rgba(251, 250, 245, 0) 100%);
}

.phone-status {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 24px;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.phone-time { padding-left: 8px; }

.phone-island {
  width: 84px;
  height: 24px;
  border-radius: 999px;
  background: #0D1214;
}

.phone-sig {
  padding-right: 6px;
  display: flex;
  gap: 3px;
  align-items: flex-end;
}

.phone-sig span {
  width: 3px;
  border-radius: 1px;
  background: #1C2A30;
}

.phone-sig span:nth-child(1) { height: 5px; }
.phone-sig span:nth-child(2) { height: 7px; }
.phone-sig span:nth-child(3) { height: 9px; }

.phone-sig .phone-battery {
  width: 18px;
  height: 9px;
  margin-left: 3px;
  border-radius: 3px;
  background: #1C2A30;
}

.phone-mark {
  position: relative;
  margin-top: 22px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--accent);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-stretch: 100%;
  font-weight: 700;
  font-size: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 4px 10px -2px rgba(47, 107, 94, .45);
}

.phone-kicker {
  position: relative;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--accent);
}

.phone-headline {
  position: relative;
  margin-top: 6px;
  font-family: var(--font-heading);
  font-stretch: 100%;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.phone-card {
  position: relative;
  margin-top: 18px;
  padding: 14px;
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(28, 42, 48, .05), 0 1px 2px rgba(28, 42, 48, .05), 0 8px 18px -6px rgba(28, 42, 48, .12);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.phone-card-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
}

.phone-count {
  font-variant-numeric: tabular-nums;
  color: #4A5A60;
}

.phone-bars { display: flex; gap: 4px; }

.phone-bars span {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: #E6E9E6;
}

.phone-bars span.on { background: #EFC75E; }

.phone-list {
  position: relative;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.phone-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
}

.phone-row.is-done { background: rgba(47, 107, 94, .07); }

.phone-check {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-circle {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px #B9C3C5;
}

.phone-task { display: flex; flex-direction: column; }

.phone-task > span:first-child {
  font-size: 12px;
  font-weight: 600;
}

.phone-task > span.is-done {
  text-decoration: line-through;
  text-decoration-color: rgba(28, 42, 48, .35);
}

.phone-task > span:last-child {
  font-size: 10px;
  color: #5A6A70;
}

.phone-spacer { flex: 1; }

.phone-add {
  position: relative;
  height: 46px;
  border-radius: 20px;
  background: #1C2A30;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 6px 14px -4px rgba(28, 42, 48, .4);
}

.phone-home {
  position: relative;
  margin: 10px auto 0;
  width: 96px;
  height: 4px;
  border-radius: 999px;
  background: #1C2A30;
}

.phone-glare {
  position: absolute;
  inset: 0;
  border-radius: 42px;
  background: linear-gradient(118deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, 0) 32%);
  pointer-events: none;
}


/* Journeys flow, 700 x 480 */
.flow {
  position: relative;
  width: 700px;
  height: 480px;
  border-radius: 28px;
  overflow: hidden;
  background-color: #F3F6F6;
  background-image: radial-gradient(rgba(28, 42, 48, .12) 1px, transparent 1px);
  background-size: 16px 16px;
  font-family: var(--font-body);
  color: #1C2A30;
  box-shadow: inset 0 0 0 1px rgba(28, 42, 48, .06);
}

.flow-steps {
  position: absolute;
  left: 16px;
  top: 16px;
  width: 168px;
  height: 448px;
  box-sizing: border-box;
  padding: 16px;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(28, 42, 48, .06), 0 8px 20px -10px rgba(28, 42, 48, .2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.flow-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #5A6A70;
  margin-bottom: 6px;
}

.flow-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
}

.flow-step.is-on {
  font-weight: 600;
  background: rgba(47, 107, 94, .08);
}

.swatch {
  width: 8px;
  height: 8px;
  border-radius: 3px;
}

.swatch.gold { background: #EFC75E; }
.swatch.delay { background: #9FB0B4; }
.swatch.accent { background: var(--accent); }
.swatch.ink { background: #1C2A30; }

.flow-line { position: absolute; background: #B9C3C5; }
.flow-line.v1 { left: 449px; top: 84px; width: 2px; height: 20px; }
.flow-line.v2 { left: 449px; top: 148px; width: 2px; height: 20px; }
.flow-line.v3 { left: 449px; top: 288px; width: 2px; height: 20px; }
.flow-line.h1 { left: 369px; top: 307px; width: 162px; height: 2px; }
.flow-line.v4 { left: 369px; top: 308px; width: 2px; height: 20px; }
.flow-line.v5 { left: 529px; top: 308px; width: 2px; height: 20px; }

.flow-node.trigger {
  position: absolute;
  left: 330px;
  top: 32px;
  width: 240px;
  height: 52px;
  box-sizing: border-box;
  padding: 0 14px;
  border-radius: 14px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 0 0 1px rgba(28, 42, 48, .06), 0 6px 14px -8px rgba(28, 42, 48, .25);
}

.flow-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #FBEFC8;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8A6A12;
}

.flow-node-copy { display: flex; flex-direction: column; }
.flow-node-copy span:first-child { font-size: 10px; color: #5A6A70; }
.flow-node-copy span:last-child { font-size: 13px; font-weight: 600; }

.flow-wait {
  position: absolute;
  left: 370px;
  top: 104px;
  width: 160px;
  height: 44px;
  box-sizing: border-box;
  border-radius: 999px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #3B4B51;
  box-shadow: 0 0 0 1px rgba(28, 42, 48, .06), 0 6px 14px -8px rgba(28, 42, 48, .25);
}

.flow-wait span { font-variant-numeric: tabular-nums; }

.flow-message {
  position: absolute;
  left: 330px;
  top: 168px;
  width: 240px;
  height: 120px;
  box-sizing: border-box;
  padding: 14px;
  border-radius: 18px;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 0 0 2px var(--accent), 0 12px 28px -10px rgba(28, 42, 48, .35);
}

.flow-message-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flow-message-top span:first-child {
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--accent);
}

.flow-message-top span:last-child { font-size: 10px; color: #5A6A70; }

.flow-bubble {
  align-self: flex-start;
  max-width: 200px;
  padding: 9px 12px;
  border-radius: 16px 16px 16px 4px;
  background: #EEF2F2;
  font-size: 12px;
  line-height: 1.35;
}

.flow-branch {
  position: absolute;
  top: 328px;
  width: 160px;
  height: 52px;
  box-sizing: border-box;
  padding: 0 12px;
  border-radius: 14px;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 0 0 1px rgba(28, 42, 48, .06), 0 6px 14px -8px rgba(28, 42, 48, .25);
}

.flow-branch.left { left: 290px; }
.flow-branch.right { left: 450px; }
.flow-branch span:first-child { font-size: 10px; color: #5A6A70; }
.flow-branch span:last-child { font-size: 12px; font-weight: 600; }

.flow-reply {
  position: absolute;
  left: 456px;
  top: 404px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.flow-reply span {
  padding: 8px 12px;
  border-radius: 16px 16px 4px 16px;
  background: var(--accent);
  color: #FFFFFF;
  font-size: 12px;
  box-shadow: 0 8px 18px -8px rgba(28, 42, 48, .4);
}

.flow-answer {
  position: absolute;
  left: 228px;
  top: 420px;
  display: flex;
}

.flow-answer span {
  max-width: 220px;
  padding: 8px 12px;
  border-radius: 16px 16px 16px 4px;
  background: #FFFFFF;
  font-size: 12px;
  box-shadow: 0 0 0 1px rgba(28, 42, 48, .06), 0 8px 18px -8px rgba(28, 42, 48, .3);
}


/* About page uses the same tokens. Its markup is separate from the homepage. */
.about-page .site-header{
  height:88px;display:flex;align-items:center;justify-content:space-between;
  max-width:var(--max);margin:0 auto;padding:0 var(--gutter)
}
.about-page .wordmark{font-family:var(--font-heading);font-stretch:100%;font-weight:700;font-size:19px;letter-spacing:-0.02em;text-decoration:none}
.about-page .nav{display:flex;gap:36px;font-size:15px;font-weight:400}
.about-page .nav a{text-decoration:none}
.about-page .about-hero,
.about-page .about-story,
.about-page .hello{width:min(720px, calc(100% - (var(--gutter) * 2)));margin-left:auto;margin-right:auto}
.about-page .about-hero{display:flex;flex-direction:column;gap:32px;margin-top:52px}
.about-page .face{
  width:200px;
  height:200px;
  border-radius:999px;
  padding:3px;
  background:var(--lilac-ring);
  align-self:flex-start;
}
.about-page .face-crop{
  display:block;
  width:100%;
  height:100%;
  border-radius:999px;
  overflow:hidden;
}
.about-page .face img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 48%;
  transform:translateX(9.756%) scale(1.525);
  transform-origin:center 48%;
}
@media (max-width:899px){
  .about-page .face{width:156px;height:156px}
}
.about-page h1{margin:0;font-family:var(--font-heading);font-stretch:100%;font-weight:700;font-size:var(--h1);line-height:1.12;letter-spacing:-0.02em;text-wrap:balance}
.about-page .about-lead,.about-page .about-aside,.about-page .about-story p{font-size:18px;line-height:1.5}
.about-page .about-kicker,.about-page .about-now{font-family:var(--font-heading);font-stretch:100%;font-weight:600}
.about-page .about-story strong{font-weight:700;color:var(--indigo)}
.about-page .hello{height:120px;display:flex;align-items:center;justify-content:center;gap:16px;margin-top:48px}
.about-page .hello-link{font-family:var(--font-heading);font-stretch:100%;font-weight:700;font-size:var(--footer-title);letter-spacing:-0.03em}
.about-page .hello-links{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
}
.about-page .hello-links a{
  width:36px;
  height:36px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--lilac);
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  letter-spacing:-.02em;
}
.about-page .hello-links a:hover,
.about-page .hello-links a:focus-visible{background:var(--lilac);color:var(--ink)}
.about-page .hello-links svg{display:block}