/* =========================================================================
   Azi Labs — static site, rebuilt in the "Let's Build Our Tomorrow" language.
   Light editorial ground, heavy grotesque display type, hairline rules,
   marker annotations, brand blue as the single accent. Content is carried
   over unchanged from the existing site; only the treatment is new.
   ========================================================================= */

:root {
  /* Deliberately single-theme: a brand surface paints its own ground rather
     than following the host's light/dark setting. */
  color-scheme: light;

  --blue: #0066ff;          /* sampled from the logo block (#0360fe) */
  --blue-deep: #0047c2;
  --ink: #0a0a0a;
  --ink-soft: #16181d;
  --grey: #6b7280;
  --grey-light: #9aa0aa;
  --rule: #e4e6ea;
  --paper: #ffffff;
  --paper-dim: #f5f6f8;
  --night: #0b0d10;
  --yellow: #ffd426;
  --orange: #ff4d2e;
  --green: #00c07a;

  --shell: 1392px;
  --gut: 40px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

figure, blockquote, h1, h2, h3, p, ol, ul { margin: 0; }
figure, ol, ul { padding: 0; }
li { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
img { display: block; max-width: 100%; }

:focus-visible { outline: 2.5px solid var(--blue); outline-offset: 3px; }

.shell { width: min(var(--shell), 100% - calc(var(--gut) * 2)); margin-inline: auto; }

.skip {
  position: fixed; z-index: 200; top: 10px; left: 10px;
  padding: 10px 16px; background: var(--ink); color: #fff;
  font-size: 12px; font-weight: 700; transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* Marker annotations — always slightly off-axis, so they read as written on
   top of the layout rather than set into it. */
.marker {
  font-family: "Caveat", "Segoe Script", cursive;
  font-weight: 700; line-height: 1.02; letter-spacing: .005em;
  text-transform: uppercase;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 11px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--grey);
}
.eyebrow::before { content: ""; width: 26px; height: 2.5px; background: var(--blue); }
.eyebrow.on-dark { color: rgba(255,255,255,.7); }

/* =============================== header =============================== */

.header { position: relative; z-index: 60; height: 64px; background: var(--paper); }
.header-inner { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.brand img { width: 186px; height: auto; }

.nav { display: flex; align-items: center; gap: 34px; justify-self: center; }
.nav a { position: relative; padding: 4px 0; font-size: 13.5px; font-weight: 500; transition: color .18s; }
.nav a:hover { color: var(--blue); }
.nav a.is-active { font-weight: 700; }
.nav a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2.5px; background: var(--blue); }

.header-right { display: flex; align-items: center; gap: 16px; justify-self: end; }
.menu-btn { display: none; width: 42px; height: 42px; place-items: center; }
.menu-btn svg { width: 22px; height: 22px; }

/* ================================ buttons ============================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  height: 44px; padding: 0 22px; border: 1.5px solid transparent;
  font-size: 13.5px; font-weight: 600;
  white-space: nowrap;
  transition: transform .22s var(--ease), background .2s, color .2s, border-color .2s;
}
.btn svg { width: 15px; height: 15px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover { background: var(--blue-deep); }
.btn-line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-line:hover { background: var(--ink); color: #fff; }
.btn-line-light { border-color: rgba(255,255,255,.6); color: #fff; }
.btn-line-light:hover { background: #fff; color: var(--ink); }
.btn-sm { height: 40px; padding: 0 18px; font-size: 12.5px; gap: 12px; }

/* ================================= hero ================================ */

.hero { position: relative; padding-top: 26px; padding-bottom: 42px; }

.hero-grid {
  width: 100%;
  display: grid;
  /* Left offset is padding so percentages resolve against the containing
     block and cannot feed back into track sizing; the right column then runs
     clean to the viewport edge. */
  padding-left: max(var(--gut), calc((100% - var(--shell)) / 2));
  grid-template-columns: calc(min(var(--shell), 100% - (var(--gut) * 2)) * 0.495) minmax(0, 1fr);
  align-items: start;
}

.hero-copy { position: relative; z-index: 3; padding: 18px 36px 0 0; }
.hero h1 { font-size: clamp(52px, 5.8vw, 82px); font-weight: 800; line-height: .87; letter-spacing: -.045em; }
.hero h1 em { font-style: normal; }

.swoosh { display: block; width: 97%; max-width: 580px; margin: -10px 0 0 2px; color: var(--blue); }

.hero-lede { margin-top: 30px; max-width: 460px; font-size: 16.5px; line-height: 1.52; color: #2c2f36; }
.hero-actions { display: flex; gap: 14px; margin-top: 30px; }

/* PEOPLE + TECHNOLOGY + OPPORTUNITY — the guidelines' separator motif. */
.plus-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 11px;
  margin-top: 34px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--grey);
}
.plus-line span:nth-child(even) { color: var(--blue); }

.hero-note { position: absolute; top: -10px; left: 70%; display: flex; align-items: flex-start; gap: 4px; pointer-events: none; }
.hero-note svg { width: 42px; color: var(--grey); flex: none; margin-top: 10px; }
.hero-note p { font-size: 20px; color: #4a4e57; transform: rotate(-3deg); white-space: nowrap; }

.hero-media { position: relative; }
.hero-shot { position: relative; width: 100%; aspect-ratio: 2.18 / 1; overflow: hidden; background: #111; }
.hero-shot .shot { width: 100%; height: 100%; object-fit: cover; object-position: 54% 44%; filter: grayscale(1) contrast(1.2) brightness(1.1); }
.lid-mark { position: absolute; left: 68.5%; top: 66.5%; width: 5.2%; transform: translate(-50%,-50%) perspective(400px) rotateX(8deg); opacity: .9; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }

/* The lab's own line, on the sticky note. */
.sticky {
  position: absolute; left: -30px; bottom: 18px; width: 176px;
  padding: 20px 18px 22px; background: var(--yellow); color: #0a0a0a;
  transform: rotate(-7deg); box-shadow: 10px 14px 26px rgba(60,44,0,.3);
}
.sticky p { font-size: 25px; line-height: 1.04; transform: rotate(1.5deg); }
.sticky p strong { text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 3px; text-underline-offset: 2px; }
.sticky small { display: block; margin-top: 14px; font-size: 9.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; transform: rotate(1.5deg); }

.ticks { position: absolute; left: 136px; bottom: 30%; width: 34px; color: var(--blue); transform: rotate(-4deg); }

.shot-note { position: absolute; right: 18px; top: 24px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; pointer-events: none; }
.shot-note p { font-size: 19px; line-height: 1.04; color: #15171b; transform: rotate(2deg); }
.shot-note svg { width: 40px; color: #15171b; margin-right: 26px; }

/* ============================ inner page hero ========================== */

.inner-hero { padding: 54px 0 46px; border-bottom: 1px solid var(--rule); }
.inner-hero h1 { margin-top: 18px; font-size: clamp(44px, 5.4vw, 74px); font-weight: 800; line-height: .9; letter-spacing: -.045em; }
.inner-hero h1 em { font-style: normal; color: var(--blue); }
.inner-hero > .shell > p,
.hero-index .shell > div > p { margin-top: 22px; max-width: 580px; font-size: 16.5px; line-height: 1.52; color: #2c2f36; }

.hero-index .shell { display: grid; grid-template-columns: auto 1fr; gap: 46px; align-items: end; }
.hero-count { font-size: clamp(60px, 8vw, 104px); font-weight: 800; line-height: .8; letter-spacing: -.06em; color: var(--blue); }
.hero-count small { display: block; margin-top: 12px; font-size: 10px; font-weight: 700; letter-spacing: .18em; color: var(--grey); }

/* ============================== sections =============================== */

.section { padding: 48px 0; }
.section-tight { padding: 38px 0; }
.dim { background: var(--paper-dim); }

.split-intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: 80px; align-items: end; }
.split-intro h2 { font-size: clamp(32px, 4vw, 54px); font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.split-intro h2 span { color: var(--blue); }
.body-copy p { margin-bottom: 16px; max-width: 46ch; font-size: 15.5px; line-height: 1.6; color: #42464f; }
.body-copy p:last-child { margin-bottom: 0; }

/* The three house rules are a real sequence — problem, test, finish — so the
   numbering encodes order rather than decorating. */
.principles { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.principles li { display: flex; align-items: flex-start; gap: 22px; padding: 28px 30px 28px 4px; }
.principles li + li { border-left: 1px solid var(--rule); padding-left: 34px; }
.principles svg { width: 50px; height: 50px; flex: none; }
.principles span { display: block; font-size: 11.5px; font-weight: 600; color: var(--grey-light); }
.principles h3 { margin: 2px 0 4px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.principles p { font-size: 13.5px; line-height: 1.45; color: var(--grey); }

.section-head { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: start; gap: 48px; margin-bottom: 30px; }
.section-head h2 { display: flex; align-items: center; gap: 18px; font-size: clamp(28px, 3vw, 37px); font-weight: 800; letter-spacing: -.035em; }
.section-head h2 svg { width: 46px; color: var(--blue); margin-top: 4px; flex: none; }
.section-head > p { margin-top: 5px; max-width: 340px; font-size: 13.5px; line-height: 1.5; color: var(--grey); }
.link-arrow { display: inline-flex; align-items: center; gap: 10px; margin-top: 9px; font-size: 13px; font-weight: 600; color: var(--blue); }
.link-arrow svg { width: 15px; }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============================ project cards ============================ */

.project-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

.card {
  position: relative; display: flex; flex-direction: column;
  min-height: 272px; padding: 24px;
  border-radius: 7px; overflow: hidden;
  background: var(--night); color: #fff;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(10,14,26,.22); }

/* Each product's own mark supplies the colour; the glow is drawn from it. */
.card::before {
  content: ""; position: absolute; right: -18%; top: -14%;
  width: 72%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--accent, var(--blue)) 0%, transparent 68%);
  opacity: .4; pointer-events: none;
}
.card-top { position: relative; display: flex; justify-content: space-between; align-items: center; font-size: 9.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.card-status { padding: 4px 9px; border: 1px solid var(--accent, var(--blue)); border-radius: 99px; color: #fff; }

.card-logo {
  position: relative; display: grid; place-items: center;
  width: 58px; height: 58px; margin: 26px 0 auto;
  padding: 9px; border-radius: 13px;
}
.card-logo img { width: 100%; height: 100%; object-fit: contain; }

.card-cat { position: relative; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.card h3 { position: relative; margin-top: 4px; font-size: 27px; font-weight: 800; letter-spacing: -.035em; }
.card-go { position: absolute; right: 22px; bottom: 22px; display: grid; place-items: center; width: 34px; height: 34px; border: 1.5px solid rgba(255,255,255,.45); border-radius: 50%; transition: background .2s, border-color .2s; }
.card-go svg { width: 14px; }
.card:hover .card-go { background: var(--accent, var(--blue)); border-color: transparent; }

/* --- stage meter: where a project sits on the lab's seven-rung ladder --- */
.stage-meter { position: relative; margin-top: 14px; }
.card .stage-meter { padding-right: 46px; }
.stage-track { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.stage-seg { height: 3px; background: currentColor; opacity: .18; border-radius: 2px; }
.stage-seg.is-done { opacity: .45; }
.stage-seg.is-now { height: 6px; margin-top: -1.5px; opacity: 1; background: var(--accent, var(--blue)); }
.stage-caption { margin-top: 8px; font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--accent, var(--blue)); }

/* ============================= manifesto =============================== */

.manifesto { display: grid; grid-template-columns: 1.15fr .85fr; gap: 90px; align-items: center; }
.manifesto h2 { font-size: clamp(32px, 4.2vw, 58px); font-weight: 800; line-height: 1.02; letter-spacing: -.04em; }
.manifesto h2 em { font-style: normal; color: var(--blue); }
.scribble { display: block; margin-bottom: 12px; font-family: "Caveat", cursive; font-weight: 700; font-size: 26px; color: var(--orange); transform: rotate(-2deg); }
.scribble.blue { color: var(--blue); }
.manifesto p { margin-bottom: 16px; font-size: 15.5px; line-height: 1.6; color: #42464f; }
.manifesto .btn { margin-top: 10px; }

/* ================================ footer =============================== */

.footer { padding: 62px 0 24px; background: var(--night); color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.7fr .7fr .9fr; gap: 70px; }
.footer-brand img { width: 176px; }
.footer-brand p { margin: 20px 0 6px; font-size: 15px; font-weight: 600; }
.footer-brand span { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 13px; color: rgba(255,255,255,.72); }
.footer-col strong { margin-bottom: 6px; font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.footer-col a { display: inline-flex; align-items: center; gap: 6px; }
.footer-col a:hover { color: #fff; }
.footer-col svg { width: 13px; }
.footer-bottom { display: flex; justify-content: space-between; margin-top: 54px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); font-size: 10.5px; color: rgba(255,255,255,.5); }

/* ======================== about: ladder + mark ========================= */

.mark-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 80px; align-items: center; }
.mark-split h2 { font-size: clamp(30px, 3.8vw, 50px); font-weight: 800; line-height: 1.02; letter-spacing: -.04em; }
.mark-split h2 span { color: var(--blue); }
.mark-split .body-copy { margin-top: 24px; }
.mark-plate { display: grid; place-items: center; padding: 54px; background: var(--paper-dim); border: 1px solid var(--rule); }
.mark-plate img { width: min(260px, 70%); height: auto; }
.mark-plate figcaption { margin-top: 26px; font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--grey); }

/* The ladder is the lab's operating model, so it gets the page's own section
   rather than being compressed onto the homepage. */
.ladder { border-top: 1px solid var(--rule); }
.ladder li { display: grid; grid-template-columns: 62px 190px 1fr 150px; gap: 32px; align-items: center; min-height: 78px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.ladder-num { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--blue); }
.ladder strong { font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.ladder p { font-size: 14px; color: var(--grey); }
.ladder .stage-meter { margin-top: 0; color: var(--ink); }

.philosophy { max-width: 940px; margin-inline: auto; text-align: center; }
.philosophy h2 { font-size: clamp(32px, 4.4vw, 58px); font-weight: 800; line-height: 1.04; letter-spacing: -.04em; }
.philosophy > p { max-width: 620px; margin: 22px auto 26px; font-size: 16.5px; line-height: 1.55; color: #42464f; }
.philosophy .scribble { text-align: center; }

/* ====================== projects: detailed rows ======================== */

.rows { border-top: 1px solid var(--rule); }
.row { display: grid; grid-template-columns: 44px 1fr 64px 190px 26px; gap: 30px; align-items: center; padding: 26px 10px; border-bottom: 1px solid var(--rule); transition: background .2s; }
.row:hover { background: var(--paper-dim); }
.row-index, .row-code { font-size: 9.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--grey); }
.row h2 { margin: 5px 0 6px; font-size: clamp(26px, 3vw, 38px); font-weight: 800; letter-spacing: -.04em; }
.row p { max-width: 62ch; font-size: 14px; line-height: 1.5; color: var(--grey); }
.row-logo { display: grid; place-items: center; width: 60px; height: 60px; padding: 10px; border-radius: 13px; }

/* Ground per mark, not per layout. */
.chip-light { background: #eceef2; }
.chip-dark  { background: var(--night); }
.row-logo.chip-light { border: 1px solid var(--rule); }
.row-logo img { width: 36px; height: 36px; object-fit: contain; }
.row > svg { width: 22px; color: var(--ink); }

.note-panel { margin-top: 46px; padding: 26px 28px 28px; background: var(--paper-dim); border: 1px solid var(--rule); }
.note-panel::before { content: ""; display: block; width: 26px; height: 3px; margin-bottom: 16px; background: var(--blue); }
.note-panel strong { font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.note-panel p { max-width: 90ch; margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: #42464f; }

/* ========================== programs: the climb ======================== */

/* Each rung is wider and heavier than the one above, so depth of commitment
   is visible before anything is read. */
.climb { border-top: 1px solid var(--rule); }
.rung { display: grid; grid-template-columns: 200px 1fr 150px; gap: 46px; align-items: start; padding: 34px 0; border-bottom: 1px solid var(--rule); }
.rung:nth-child(2) { background: linear-gradient(90deg, rgba(0,102,255,.035), transparent 62%); }
.rung:nth-child(3) { background: linear-gradient(90deg, rgba(0,102,255,.07), transparent 70%); }
.rung-stage { display: flex; flex-direction: column; gap: 12px; color: var(--ink); }
.rung-num { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--blue); }
.rung-stage-name { font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--grey); }
.rung h2 { font-size: clamp(25px, 3vw, 38px); font-weight: 800; line-height: 1.05; letter-spacing: -.04em; }
.rung:nth-child(2) h2 { font-size: clamp(27px, 3.4vw, 43px); }
.rung:nth-child(3) h2 { font-size: clamp(29px, 3.8vw, 48px); }
.rung-body p { margin-top: 12px; max-width: 60ch; font-size: 15px; line-height: 1.55; color: var(--grey); }
.rung-meaning { font-family: "Caveat", cursive; font-weight: 700; font-size: 21px; color: var(--blue) !important; }
.rung-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; }
.rung-meta svg { width: 28px; height: 28px; color: var(--blue); }
.rung-commitment { font-size: 13.5px; font-weight: 600; }
.rung-meta strong { padding: 5px 9px; border: 1px solid #c6ccd4; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); }

.centre-note { max-width: 680px; margin: 70px auto 0; text-align: center; }
.centre-note h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 800; letter-spacing: -.04em; }
.centre-note p { margin: 18px 0 24px; font-size: 16px; line-height: 1.55; color: #42464f; }

/* ============================== contact ================================ */

.contact { display: grid; grid-template-columns: 1.1fr .8fr; gap: 80px; align-items: center; }
.contact h2 { font-size: clamp(28px, 3.5vw, 46px); font-weight: 800; line-height: 1.08; letter-spacing: -.04em; }
.contact-card { padding: 32px; background: var(--paper); border: 1px solid var(--rule); box-shadow: 12px 12px 0 var(--blue); }
.contact-card > svg { width: 38px; height: 38px; color: var(--blue); }
.contact-card > span { display: block; margin-top: 46px; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--grey); }
.contact-card a { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 8px 0 20px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.contact-card a svg { width: 18px; flex: none; }
.contact-card a:hover { color: var(--blue); }
.contact-card p { font-size: 13.5px; line-height: 1.5; color: var(--grey); }

/* ============================== responsive ============================= */

@media (max-width: 1240px) {
  :root { --gut: 32px; }
  .hero-note { display: none; }
  .footer-grid { gap: 48px; }
  .ladder li { grid-template-columns: 50px 160px 1fr; }
  .ladder .stage-meter { display: none; }
  .row { grid-template-columns: 38px 1fr 60px 26px; }
  .row .row-status { display: none; }
}

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
  .hero-copy { padding-right: var(--gut); }
  .hero-shot { aspect-ratio: 16 / 10; }
  .ticks { display: none; }
  .project-grid { grid-template-columns: repeat(2, 1fr); }
  .section-head { grid-template-columns: 1fr; gap: 18px; }
  .split-intro, .mark-split, .manifesto, .contact { grid-template-columns: 1fr; gap: 40px; }
  .principles { grid-template-columns: 1fr; }
  .principles li { border-left: 0 !important; padding-left: 4px !important; border-bottom: 1px solid var(--rule); }
  .principles li:last-child { border-bottom: 0; }
  .rung { grid-template-columns: 1fr; gap: 18px; }
  .rung-stage { flex-direction: row; align-items: center; gap: 16px; }
  .rung-meta { flex-direction: row; align-items: center; gap: 18px; }
  .hero-index .shell { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 760px) {
  :root { --gut: 20px; }
  .nav { position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 14px 20px 22px; background: var(--paper); border-bottom: 1px solid var(--rule); display: none; }
  .nav.is-open { display: flex; }
  .nav a { padding: 13px 0; border-bottom: 1px solid var(--rule); }
  .nav a.is-active::after { display: none; }
  .header-inner { grid-template-columns: 1fr auto; }
  .menu-btn { display: grid; }
  .header-right .btn { display: none; }
  .brand img { width: 156px; }
  .hero h1 { font-size: clamp(40px, 12vw, 62px); }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-shot { aspect-ratio: 4 / 3.4; }
  .shot-note { right: 12px; top: 12px; }
  .shot-note p { font-size: 15px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.75); }
  .shot-note svg { color: #fff; filter: drop-shadow(0 2px 6px rgba(0,0,0,.7)); }
  .sticky { width: 152px; bottom: 20px; left: 14px; }
  .sticky p { font-size: 20px; }
  .project-grid { grid-template-columns: 1fr; }
  .card { min-height: 0; }
  .ladder li { grid-template-columns: 40px 1fr; gap: 10px 16px; }
  .ladder p { grid-column: 2; }
  .row { grid-template-columns: 30px 1fr 44px; gap: 14px; }
  .row-logo { width: 44px; height: 44px; }
  .row-logo img { width: 26px; height: 26px; }
  .row > svg:last-child { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; gap: 8px; margin-top: 36px; }
  .contact-card { box-shadow: 8px 8px 0 var(--blue); }
  .mark-plate { padding: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}