/* ─────────────────────────────────────────────
   Ghassan Zakaria — portfolio
   Tokens
   ───────────────────────────────────────────── */
:root {
  --bg: #f6f5f1;
  --surface: #ffffff;
  --surface-2: #efeee9;
  --ink: #141513;
  --ink-2: #3a3c38;
  --muted: #6f716c;
  --line: #e4e3dd;
  --accent: #d9481f;
  --accent-btn: #c8431c;
  --accent-soft: #fbe3da;
  --shadow: 0 1px 2px rgb(20 21 19 / .04), 0 12px 32px -12px rgb(20 21 19 / .12);
  --shadow-lg: 0 30px 60px -20px rgb(20 21 19 / .25);
  --nav-bg: rgb(255 255 255 / .72);

  --sans: "Google Sans Flex", "Google Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Google Sans Code", ui-monospace, "SF Mono", Menlo, monospace;
  --hand: "Caveat", "Bradley Hand", cursive;

  --radius: 28px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --wrap: 1180px;

  /* placeholder cover tints */
  --t-mable: #e7e4fb;  --t-mable-2: #b9b1f2;
  --t-homes: #dfeee6;  --t-homes-2: #8cc6a8;
  --t-ordering: #fbe6d8; --t-ordering-2: #ee9e6c;
  --t-kds: #22241f;    --t-kds-2: #f2b33d;
}

html[data-theme="dark"] {
  --bg: #0e0f0d;
  --surface: #171816;
  --surface-2: #1e1f1c;
  --ink: #f1f0ea;
  --ink-2: #cfcec8;
  --muted: #92948d;
  --line: #2a2b28;
  --accent: #ff7a4d;
  --accent-btn: #ff7a4d;
  --accent-soft: #3a1f16;
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 12px 32px -12px rgb(0 0 0 / .6);
  --shadow-lg: 0 30px 60px -20px rgb(0 0 0 / .7);
  --nav-bg: rgb(23 24 22 / .72);

  --t-mable: #23213a;  --t-mable-2: #6c62c9;
  --t-homes: #18291f;  --t-homes-2: #4f9c76;
  --t-ordering: #33221a; --t-ordering-2: #d07a45;
  --t-kds: #1b1c19;    --t-kds-2: #f2b33d;
}

/* ───────── Base ───────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; overflow-x: clip; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .5s var(--ease), color .5s var(--ease);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
em { font-style: normal; color: var(--accent); }
.hand { font-family: var(--hand); }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--accent); color: #fff; }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.dot-live { background: #2fb36d; box-shadow: 0 0 0 0 rgb(47 179 109 / .5); animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgb(47 179 109 / .45); } 70% { box-shadow: 0 0 0 8px rgb(47 179 109 / 0); } 100% { box-shadow: 0 0 0 0 rgb(47 179 109 / 0); } }

/* ───────── Buttons ───────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 22px; border-radius: 999px;
  font-size: 15px; font-weight: 500; cursor: pointer;
  border: 1px solid var(--line); background: transparent;
  transition: transform .4s var(--ease), background-color .3s, color .3s, border-color .3s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-solid { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-ghost { background: var(--surface); }
.btn-ghost:hover { border-color: var(--ink); }

/* ───────── Nav (floating pill) ───────── */
.nav {
  position: fixed; z-index: 50; top: 18px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px;
  padding: 6px 6px 6px 6px;
  background: var(--nav-bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  backdrop-filter: saturate(1.6) blur(16px);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  box-shadow: var(--shadow);
  transition: transform .6s var(--ease), box-shadow .4s, background-color .5s;
  white-space: nowrap;
}
.nav.is-hidden { transform: translate(-50%, -140%); }
.nav-mark {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--ink); color: var(--bg); overflow: hidden;
  font-size: 12px; font-weight: 700; letter-spacing: -.02em;
}
.nav-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nav-links { display: flex; }
.nav-links a {
  padding: 8px 12px; border-radius: 999px; font-size: 14px; color: var(--ink-2);
  transition: background-color .25s, color .25s;
}
.nav-links a:hover, .nav-links a.is-active { background: var(--surface-2); color: var(--ink); }
.nav-sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.nav-time { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); padding: 0 6px; font-size: 11.5px; }
.nav-time .dot { width: 6px; height: 6px; background: var(--accent); }
.theme-toggle {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: transparent; cursor: pointer; color: var(--ink-2);
  transition: background-color .25s, transform .5s var(--ease);
}
.theme-toggle:hover { background: var(--surface-2); }
.theme-toggle:active { transform: rotate(-30deg) scale(.92); }
.theme-toggle .i-sun { display: none; }
html[data-theme="dark"] .theme-toggle .i-sun { display: block; }
html[data-theme="dark"] .theme-toggle .i-moon { display: none; }
.nav-cta {
  height: 36px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px;
  background: var(--accent-btn); color: #fff; font-size: 14px; font-weight: 500;
  transition: filter .25s;
}
.nav-cta:hover { filter: brightness(1.08); }

/* ───────── Hero ───────── */
.hero {
  min-height: 100svh;
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 40px;
  padding-top: 120px; padding-bottom: 60px;
}
.facts { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-wrap: wrap; gap: 8px; }
.facts li {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 13px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink-2);
}
.facts svg { color: var(--muted); }
.hero-title {
  font-size: clamp(52px, 7.4vw, 104px);
  line-height: 1; letter-spacing: -0.032em; font-weight: 600;
  margin-bottom: 28px;
}
.hero-title em { color: var(--accent); }
.hero-sub { max-width: 30ch; font-size: clamp(18px, 1.5vw, 21px); color: var(--muted); line-height: 1.5; margin-bottom: 36px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.hand-note { font-family: var(--hand); color: var(--accent); font-size: 25px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; rotate: -4deg; margin-left: 8px; }
.hand-note svg { width: 40px; height: 26px; }
.sign { font-size: 34px; font-weight: 600; margin-top: 36px; rotate: -3deg; transform-origin: left; display: inline-block; }
html[data-theme="dark"] .nav-cta { color: #140c08; }

/* split-text animation */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.w > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--i) * 70ms + 120ms); }
.is-in .w > span { transform: none; }

.hero-copy { position: relative; z-index: 5; }
.is-flight .section-head { position: relative; z-index: 6; }
/* Empty stage. The real project images travel into this area, then back to the grid. */
.hero-stack { position: relative; height: min(520px, 56vh); pointer-events: none; }

/* ───────── Sections ───────── */
.section { padding-top: 140px; }
.section-head { display: flex; align-items: center; gap: 24px; margin-bottom: 48px; }
.section-head h2 { font-size: clamp(32px, 3.6vw, 48px); letter-spacing: -0.025em; font-weight: 600; line-height: 1; }
.section-head .rule { flex: 1; height: 1px; background: var(--line); }
.section-head .num { color: var(--muted); font-size: 13px; }

/* pillars */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pillar {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px 32px; min-height: 320px;
  display: flex; flex-direction: column;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.pillar-icon {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); margin-bottom: auto;
}
.pillar h3 { font-size: 26px; line-height: 1.14; letter-spacing: -0.02em; font-weight: 600; margin: 48px 0 14px; }
.pillar p { color: var(--muted); font-size: 15.5px; }

/* ───────── Projects (2-column, image-led) ───────── */
#work { padding-top: 36px; }
.projects { display: grid; grid-template-columns: 1.22fr .78fr; gap: 68px 32px; align-items: start; }
.project:nth-child(2) { margin-top: 92px; }
.project:nth-child(4) { margin-top: 48px; }
.project-card { display: block; }
.project-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 28px; }
.project-media { position: relative; border-radius: 26px; overflow: hidden; background: var(--surface-2);
  transform-origin: center center;
  transition: transform .8s var(--ease), box-shadow .8s var(--ease); }
.is-flight .project { position: relative; }
.is-flight .project-media {
  box-shadow: var(--shadow-lg);
  transition: none;
  will-change: transform;
}
.project-media .cover { height: auto; aspect-ratio: 3 / 2; border-radius: 0; }
.cover-img { transition: transform 1.2s var(--ease); }
.project-card:hover .project-media { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.project-card:hover .cover-photo .cover-img { transform: scale(1.04); }
.lock-chip { position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px; background: rgb(255 255 255 / .88); color: #141513; font-size: 10.5px;
  backdrop-filter: blur(8px); opacity: 0; transform: translateY(-4px); transition: opacity .4s, transform .5s var(--ease); }
.project-card:hover .lock-chip, .project-card:focus-visible .lock-chip { opacity: 1; transform: none; }
.project-caption { padding: 20px 4px 0; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.project-title { font-size: clamp(19px, 1.6vw, 23px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; }
.project-meta { color: var(--muted); white-space: nowrap; font-size: 11.5px; }

/* ───────── Password modal ───────── */
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgb(14 15 13 / .45); backdrop-filter: blur(6px); animation: fade .3s var(--ease); }
.modal-panel { position: relative; width: min(400px, 100%); background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: 24px; padding: 30px 28px 24px; box-shadow: var(--shadow-lg); display: grid; gap: 12px; animation: pop .45s var(--ease); }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.97); } }
.modal-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; }
.modal-x:hover { background: var(--surface-2); color: var(--ink); }
.modal-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.modal-panel h2 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; margin-top: 4px; }
.modal-sub { color: var(--muted); font-size: 15px; }
.modal-sub span { color: var(--ink-2); }
#pw-input { height: 48px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); padding: 0 16px; font: inherit; font-size: 16px; margin-top: 6px; transition: border-color .2s; }
#pw-input:focus { outline: none; border-color: var(--ink); }
.modal-panel.is-wrong #pw-input { border-color: #d93b2b; animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.modal-error { color: #d93b2b; font-size: 14px; }
.modal-submit { justify-content: center; width: 100%; margin-top: 4px; }
.modal-open { text-align: center; font-weight: 500; color: var(--accent); }
.modal-help { text-align: center; color: var(--muted); font-size: 13.5px; margin-top: 4px; }
.modal-help a { color: var(--ink); border-bottom: 1px solid var(--line); }

/* ── real cover images ── */
.cover-photo { --tint: var(--cover-bg, var(--surface-2)); }
.cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }

/* ── placeholder art primitives ── */
.cover-mable { --tint: radial-gradient(120% 90% at 30% 10%, var(--t-mable-2) 0%, var(--t-mable) 55%); }
.cover-homes { --tint: radial-gradient(120% 90% at 70% 0%, var(--t-homes-2) 0%, var(--t-homes) 60%); }
.cover-ordering { --tint: radial-gradient(110% 90% at 50% 0%, var(--t-ordering-2) 0%, var(--t-ordering) 60%); }
.cover-kds { --tint: radial-gradient(110% 90% at 50% 0%, #3a3c35 0%, var(--t-kds) 65%); }

.ph-window {
  position: absolute; left: 50%; top: 14%; translate: -50% 0;
  width: 74%; height: 100%;
  background: #fbfbf9; border-radius: 14px 14px 0 0;
  box-shadow: 0 30px 60px -20px rgb(20 21 19 / .35);
  padding: 0 0 0;
}
.ph-bar { display: flex; gap: 6px; padding: 12px 14px; border-bottom: 1px solid #ecebe6; }
.ph-bar i { width: 9px; height: 9px; border-radius: 50%; background: #dddcd6; }
.ph-line { height: 9px; border-radius: 6px; background: #e3e2dc; margin-top: 10px; }
.ph-line.thick { height: 16px; background: #cfcec7; }
.w40 { width: 40%; } .w45 { width: 45%; } .w60 { width: 60%; } .w70 { width: 70%; }
.ph-pill-row { display: flex; gap: 6px; margin-top: 14px; }
.ph-pill-row span { height: 22px; width: 64px; border-radius: 999px; background: #efeee9; border: 1px solid #e3e2dc; }

/* Mable */
.ph-mable { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; padding: 22px; height: calc(100% - 34px); }
.ph-col { display: flex; flex-direction: column; gap: 10px; }
.ph-bubble { height: 44px; width: 86%; border-radius: 14px 14px 14px 4px; background: #efeef9; }
.ph-bubble-me { align-self: flex-end; width: 62%; background: #6c62c9; border-radius: 14px 14px 4px 14px; }
.ph-bubble.ph-short { width: 50%; }
.ph-match { border: 1px solid #ecebe6; border-radius: 14px; padding: 16px; background: #fff; box-shadow: 0 10px 30px -14px rgb(108 98 201 / .45); }
.ph-avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #f4c9a8, #d78f6c); }
.ph-ai { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 8px 10px; border-radius: 10px; background: #f1effd; }
.ph-ai b { font-size: 10px; font-weight: 700; color: #fff; background: #6c62c9; padding: 3px 6px; border-radius: 6px; font-family: var(--mono); }
.ph-ai .ph-line { margin: 0; background: #d9d4fa; }

/* Homes */
.ph-homes { padding: 18px; }
.ph-gallery { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; height: 190px; }
.ph-photo { border-radius: 10px; background: linear-gradient(160deg, #c9dfd2, #8fb7a1 60%, #6e9a83); }
.ph-photo.big { grid-row: span 2; background: linear-gradient(165deg, #dbe9f2 0%, #b7d0c2 45%, #7fa48e 100%); }
.ph-listing { padding-top: 6px; }
.ph-phone {
  position: absolute; width: 22%; min-width: 120px; aspect-ratio: 9 / 18.5;
  background: #fbfbf9; border-radius: 26px; padding: 10px;
  border: 5px solid #141513;
  box-shadow: 0 30px 60px -18px rgb(20 21 19 / .45);
}
.ph-phone-homes { right: 7%; top: 26%; }
.ph-phone-homes .ph-photo { height: 42%; border-radius: 14px; }
.ph-btn { height: 26px; border-radius: 999px; background: #2f8a6a; margin-top: 14px; }

/* Online ordering */
.cover-ordering .ph-phone { left: 50%; top: 12%; translate: -95% 0; width: 25%; rotate: -4deg; }
.cover-ordering .ph-phone-b { translate: -5% 6%; rotate: 5deg; }
.ph-hero-band { height: 32%; border-radius: 16px; background: linear-gradient(140deg, #e48a51, #c4552c); }
.ph-hero-band.alt { background: linear-gradient(140deg, #2d4a3e, #1b2f27); }
.ph-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.ph-menu span { aspect-ratio: 1; border-radius: 10px; background: #f0ece6; }
.ph-btn.alt { background: #2d4a3e; }
.cover-ordering .ph-btn { background: #c4552c; }
.cover-ordering .ph-phone-b .ph-btn { background: #2d4a3e; }
.ph-swatches { position: absolute; right: 9%; top: 22%; display: grid; gap: 8px; padding: 10px; border-radius: 16px; background: rgb(255 255 255 / .85); box-shadow: 0 16px 30px -14px rgb(20 21 19 / .35); }
.ph-swatches i { width: 30px; height: 30px; border-radius: 50%; }
.ph-swatches i:nth-child(1) { background: #c4552c; } .ph-swatches i:nth-child(2) { background: #2d4a3e; }
.ph-swatches i:nth-child(3) { background: #f2b33d; } .ph-swatches i:nth-child(4) { background: #314ee8; }

/* KDS */
.ph-tablet {
  position: absolute; left: 50%; top: 13%; translate: -50% 0;
  width: 80%; height: 100%;
  border-radius: 20px 20px 0 0; background: #0d0e0c; border: 8px solid #2c2e29; border-bottom: 0;
  padding: 12px;
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / .6);
}
.ph-tablet-bar { height: 14px; width: 30%; border-radius: 4px; background: #2c2e29; margin-bottom: 12px; }
.ph-dockets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: start; }
.ph-docket { background: #fbfbf9; border-radius: 8px; overflow: hidden; padding-bottom: 8px; }
.ph-docket b { display: block; height: 26px; background: #d9d8d2; margin-bottom: 8px; }
.ph-docket.urgent b { background: #e0573a; }
.ph-docket.warn b { background: var(--t-kds-2); }
.ph-docket span { display: block; height: 8px; margin: 8px 10px 0; border-radius: 4px; background: #e3e2dc; }

/* ───────── Statement (scroll word reveal) ───────── */
.statement { padding: 180px 0 160px; }
.statement-inner { max-width: 1000px; }
.kicker { color: var(--muted); margin-bottom: 28px; }
.statement-text {
  font-size: clamp(36px, 5vw, 68px); line-height: 1.1; letter-spacing: -0.028em; font-weight: 500;
}
.statement-text em { color: var(--accent); }
.sw { display: inline-block; opacity: var(--o, 1); filter: blur(var(--b, 0px)); transition: opacity .25s linear, filter .25s linear; }
.statement-foot { margin-top: 48px; color: var(--muted); }

/* ───────── How I work ───────── */
#how { padding-top: 0; padding-bottom: 140px; }
.how-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: end; }
.how-title { font-size: clamp(40px, 5vw, 72px); line-height: 1.02; letter-spacing: -0.03em; font-weight: 600; margin-bottom: 64px; max-width: 12ch; }
.how-title em { color: var(--accent); }
.stack-label { color: var(--muted); margin-bottom: 16px; }
.tools { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.tool { position: relative; width: 68px; height: 68px; border-radius: 18px; display: grid; place-items: center;
  background: #fff; border: 1px solid #e7e6e0; cursor: default;
  box-shadow: 0 1px 2px rgb(20 21 19 / .05), 0 8px 18px -10px rgb(20 21 19 / .18);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .4s, opacity 1s var(--ease); }
html[data-theme="dark"] .tool { border-color: transparent; box-shadow: 0 10px 24px -12px rgb(0 0 0 / .8); }
.tool img { width: 30px; height: 30px; filter: grayscale(1) contrast(.9); opacity: .78; transition: filter .45s var(--ease), opacity .45s, transform .55s var(--ease); }
.tool-mark { font-weight: 600; font-size: 17px; letter-spacing: -0.03em; color: #8a8c86; transition: color .4s; }
.tool:hover, .tool:focus-visible { transform: translateY(-6px) rotate(-4deg); border-color: color-mix(in srgb, var(--brand) 35%, #e7e6e0);
  box-shadow: 0 1px 2px rgb(20 21 19 / .05), 0 18px 30px -12px color-mix(in srgb, var(--brand) 55%, transparent); }
.tool:hover img, .tool:focus-visible img { filter: none; opacity: 1; transform: scale(1.08); }
.tool:hover .tool-mark, .tool:focus-visible .tool-mark { color: var(--brand); }
.tools:hover .tool:not(:hover) { opacity: .55; }
.tool-name { position: absolute; bottom: calc(100% + 10px); left: 50%; translate: -50% 6px; white-space: nowrap;
  padding: 6px 10px; border-radius: 8px; background: var(--ink); color: var(--bg); font-size: 12.5px; font-weight: 500;
  opacity: 0; pointer-events: none; transition: opacity .25s, translate .4s var(--ease); z-index: 2; }
.tool-name::after { content: ""; position: absolute; top: 100%; left: 50%; translate: -50% 0; border: 5px solid transparent; border-top-color: var(--ink); }
.tool:hover .tool-name, .tool:focus-visible .tool-name { opacity: 1; translate: -50% 0; }
.services { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.service { display: flex; align-items: center; gap: 18px; font-size: clamp(20px, 1.9vw, 26px); letter-spacing: -0.02em; font-weight: 500; }
.service-icon { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--bg);
  box-shadow: 0 10px 20px -8px rgb(20 21 19 / .4); }

/* ───────── Experience ───────── */
#about { padding-top: 0; }
.about-grid { display: grid; grid-template-columns: minmax(240px, 360px) 1fr; gap: 72px; align-items: start; }
.portrait { position: sticky; top: 110px; margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 4.6; background: var(--surface-2);
  box-shadow: var(--shadow-lg); rotate: -2deg; transition: rotate .8s var(--ease), transform .8s var(--ease), opacity 1s var(--ease); }
.portrait:hover { rotate: 0deg; transform: scale(1.015); }
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait figcaption { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px;
  padding: 2px 14px 5px; border-radius: 999px; background: rgb(255 255 255 / .9); color: #141513; font-size: 22px; font-weight: 600; white-space: nowrap; rotate: -3deg; backdrop-filter: blur(8px); }
.about-copy { max-width: 600px; margin-bottom: 56px; }
.about-copy .lead { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.28; letter-spacing: -0.02em; margin-bottom: 20px; }
.about-copy p:not(.lead) { color: var(--muted); }

.timeline { position: relative; list-style: none; margin: 0; padding: 0; --date-w: 170px; --node-x: calc(var(--date-w) + 20px); }
.tl-line { position: absolute; left: var(--node-x); top: 10px; bottom: 10px; width: 2px; translate: -50% 0; background: var(--line); border-radius: 2px; overflow: hidden; }
.tl-fill { position: absolute; inset: 0; background: var(--accent); transform-origin: top; transform: scaleY(var(--tl, 0)); }
.tl-item { position: relative; display: grid; grid-template-columns: var(--date-w) 40px 1fr; align-items: start; padding: 0 0 34px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-date { color: var(--muted); font-size: 11.5px; padding-top: 7px; text-align: right; }
.tl-node { justify-self: center; margin-top: 7px; width: 13px; height: 13px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line);
  position: relative; z-index: 1; transition: border-color .4s, background-color .4s, transform .5s var(--ease); }
.tl-item.is-passed .tl-node { border-color: var(--accent); background: var(--accent); }
.tl-item.is-current .tl-node::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--accent); opacity: .35; animation: ring 2.4s var(--ease) infinite; }
@keyframes ring { 0% { transform: scale(.6); opacity: .5; } 100% { transform: scale(1.5); opacity: 0; } }
.tl-body h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.tl-body h3 small { font-size: 13px; font-weight: 400; color: var(--muted); margin-left: 6px; letter-spacing: 0; }
.tl-body p { color: var(--ink-2); font-size: 15.5px; margin-top: 2px; }
.tl-body .tl-clients { color: var(--muted); font-size: 14px; margin-top: 6px; }
.tl-item:hover .tl-node { transform: scale(1.3); }

/* ───────── Contact ───────── */
.contact { margin-top: 160px; padding: 120px 0 0; background: var(--surface); border-top: 1px solid var(--line); }
.contact-title { font-size: clamp(56px, 10vw, 148px); line-height: .98; letter-spacing: -0.035em; font-weight: 600; margin-bottom: 44px; }
.contact-title em { color: var(--accent); }
.contact-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.email { font-size: clamp(20px, 2.2vw, 28px); letter-spacing: -0.02em; margin-right: 12px; border-bottom: 1px solid var(--line); padding-bottom: 4px; transition: border-color .3s; }
.email:hover { border-color: var(--ink); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--muted); padding: 28px 0; margin-top: 120px; border-top: 1px solid var(--line); }
.footer-bottom a:hover { color: var(--ink); }

/* ───────── Reveal ───────── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0ms); }
.reveal.is-in { opacity: 1; transform: none; }

/* ───────── Cursor pill + toast ───────── */
.cursor-pill {
  position: fixed; z-index: 60; left: 0; top: 0; pointer-events: none;
  padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--bg);
  font-size: 14px; font-weight: 500; white-space: nowrap;
  transform: translate3d(var(--cx, -200px), var(--cy, -200px), 0) translate(-50%, -50%) scale(var(--cs, 0));
}
.cursor-pill span { color: var(--accent); margin-left: 2px; }
.toast {
  position: fixed; z-index: 70; left: 50%; bottom: 28px; translate: -50% 0;
  padding: 12px 18px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 14px;
  opacity: 0; transform: translateY(12px); transition: opacity .4s var(--ease), transform .4s var(--ease); pointer-events: none;
}
.toast.is-on { opacity: 1; transform: none; }

/* ───────── Responsive ───────── */
@media (max-width: 960px) {

  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 120px; padding-bottom: 8px; gap: 24px; }
  .hero-stack { display: none; }
  .hand-note svg { transform: rotate(52deg); transform-origin: 0 40%; }
  #work { padding-top: 28px; }
  .projects { grid-template-columns: 1fr 1fr; gap: 48px 20px; }
  .project:nth-child(2), .project:nth-child(4) { margin-top: 0; }
  .pillars { grid-template-columns: 1fr; }
  .pillar { min-height: 0; }
  .pillar h3 { margin-top: 28px; }
  .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .portrait { max-width: 340px; position: relative; top: 0; }
  .how-grid { grid-template-columns: 1fr; gap: 56px; }
  .how-title { margin-bottom: 40px; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .wrap { width: calc(100% - 32px); }
  .nav { top: 12px; gap: 6px; padding: 8px; width: calc(100% - 16px); max-width: calc(100% - 16px); justify-content: space-between; }
  .nav > * { flex-shrink: 0; }
  .nav-time, .nav-links a[href="#contact"] { display: none; }
  .nav-links { gap: 4px; }
  .nav-links a { padding: 8px 10px; }
  .nav-sep { margin: 0; }
  .nav-cta { padding: 0 14px; }
  .hero-title { font-size: clamp(46px, 13vw, 64px); }
  .section { padding-top: 96px; }
  .section-head { margin-bottom: 32px; }
  .projects { grid-template-columns: 1fr; gap: 44px; }
  .project-media { border-radius: 20px; }
  .project-caption { flex-direction: column; gap: 4px; padding-top: 16px; }
  .lock-chip { opacity: 1; transform: none; }
  .ph-window { width: 92%; }
  .ph-gallery { height: 120px; }
  .ph-phone { min-width: 96px; border-width: 4px; border-radius: 20px; }
  .cover-ordering .ph-phone { width: 34%; }
  .ph-swatches { display: none; }
  .ph-tablet { width: 94%; }
  .statement { padding: 120px 0 110px; }
  .contact { margin-top: 110px; padding-top: 90px; }
  .footer-bottom { margin-top: 80px; font-size: 10.5px; }
  .cursor-pill { display: none; }
  #how { padding-bottom: 96px; }
  .timeline { --date-w: 0px; --node-x: 6px; }
  .tl-item { grid-template-columns: 0 28px 1fr; padding-bottom: 28px; }
  .tl-node { justify-self: start; }
  .tl-date { grid-column: 3; grid-row: 1; text-align: left; padding: 0 0 4px; font-size: 11px; }
  .tl-body { grid-column: 3; grid-row: 2; }
  .tl-node { grid-column: 2; grid-row: 1 / span 2; margin-top: 3px; }
  .tl-body h3 { font-size: 19px; }
  .tool { width: 58px; height: 58px; border-radius: 15px; }
  .tool img { width: 26px; height: 26px; }
  .service { gap: 14px; }
  .service-icon { width: 38px; height: 38px; }
}

/* ───────── Reduced motion ───────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
  .reveal, .w > span { opacity: 1 !important; transform: none !important; }
  .sw { opacity: 1 !important; filter: none !important; }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-stack { display: none; }
}