/* =========================================================
   Kennedy Consulting — Landing Page
   Brand palette: railroad green + graphite steel (matches scorecard)
   ========================================================= */

:root {
  /* Type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1.4rem + 4vw, 4.5rem);

  /* Spacing */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;

  /* Brand colors — pulled from the blue train logo (dark navy → light sky) */
  --ink: #0e1f3d;            /* deep navy (train nose) */
  --ink-2: #15294d;
  --steel: #20396a;
  --green: #2f7fd6;          /* primary blue accent (mid train body) */
  --green-deep: #1b5fb0;     /* darker blue for hover/contrast */
  --green-soft: #e6f0fb;     /* pale sky tint */
  --bg: #f4f8fd;
  --surface: #ffffff;
  --surface-2: #e9f1fa;
  --border: #d4e2f2;
  --text: #11203a;
  --text-muted: #51607a;
  --text-faint: #93a3bd;
  --on-dark: #e9f1fb;
  --on-dark-muted: #a7bbdb;

  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-full: 999px;
  --shadow-md: 0 8px 24px rgba(20, 32, 31, 0.10);
  --shadow-lg: 0 20px 48px rgba(20, 32, 31, 0.16);

  --content: 1180px;
  --nav-h: 76px;

  --font-display: 'Cabinet Grotesk', 'Satoshi', system-ui, sans-serif;
  --font-body: 'Satoshi', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: auto;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  min-height: 100dvh;
}

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.08; letter-spacing: -0.02em; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }

:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: var(--radius-sm); }

.container { width: 100%; max-width: var(--content); margin-inline: auto; padding-inline: var(--space-6); }

/* ============ NAV ============ */
.nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  background: rgba(246, 248, 247, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.brand { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; white-space: nowrap; flex-shrink: 0; }
.nav__inner > nav { flex: 0 1 auto; min-width: 0; }
.brand__logo { height: 34px; width: auto; flex-shrink: 0; }
.footer .brand__logo--dark { height: 38px; }

.nav__menu { display: flex; align-items: center; gap: 2px; list-style: none; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm); font-weight: 600; color: var(--text);
  border-radius: var(--radius-sm); white-space: nowrap;
  transition: background 160ms ease, color 160ms ease;
}
.nav__link:hover { background: var(--surface-2); color: var(--green-deep); }
.nav__link.is-active { background: var(--green-soft); color: var(--green-deep); }
.nav__link .chev { width: 14px; height: 14px; transition: transform 200ms ease; }
.nav__item[aria-expanded="true"] .chev { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 240px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}
.nav__item.open .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
  display: block; padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 500; color: var(--text);
}
.dropdown a span { display: block; font-size: var(--text-xs); color: var(--text-muted); font-weight: 400; margin-top: 2px; }
.dropdown a:hover { background: var(--green-soft); color: var(--green-deep); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm); font-weight: 700; white-space: nowrap;
  border-radius: var(--radius-full);
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease, color 160ms ease;
}
.btn--primary { background: var(--green); color: #fff; box-shadow: 0 6px 18px rgba(47, 127, 214, 0.34); }
.btn--primary:hover { background: var(--green-deep); transform: translateY(-2px); }
.btn--ghost-dark { border: 1.5px solid rgba(234,241,238,0.35); color: var(--on-dark); }
.btn--ghost-dark:hover { border-color: var(--green); color: #fff; background: rgba(47,127,214,0.20); }
.btn--outline { border: 1.5px solid var(--border); color: var(--text); }
.btn--outline:hover { border-color: var(--green); color: var(--green-deep); }

/* The full 8-tab menu already includes a Contact tab, so the separate
   CTA button is redundant and would crowd the bar. Hidden on desktop;
   the Contact tab serves the same purpose. */
.nav__cta { display: none; flex-shrink: 0; }
.nav__toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--radius-sm); }
.nav__toggle:hover { background: var(--surface-2); }

/* ============ PAGES (TABS) ============ */
/* Only the active page is shown. JS toggles [hidden]. */
.page[hidden] { display: none !important; }
/* Each page fills at least the viewport (minus the nav) and centers its content,
   so short pages don't leave an awkward gap at the bottom. */
.page {
  display: flex; flex-direction: column; justify-content: center;
  min-height: calc(100dvh - var(--nav-h));
  animation: page-in 460ms cubic-bezier(0.16,1,0.3,1);
}
/* Pages with long content (e.g. Portfolio articles) align to the top instead of
   centering, so nothing gets clipped above the fold. */
.page--tall { justify-content: flex-start; }
/* Section pages keep their normal vertical padding even when filling the screen. */
.page.section { padding-block: clamp(var(--space-12), 7vw, var(--space-20)); }
@keyframes page-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ============ HERO ============ */
.hero { background: var(--ink); color: var(--on-dark); position: relative; overflow: hidden; padding-block: var(--space-10); }
/* CAD blueprint locomotive background image (right side), faded toward the left for text legibility */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--ink) 0%, rgba(14,31,61,0.86) 30%, rgba(14,31,61,0.45) 60%, rgba(14,31,61,0.30) 100%),
    url("assets/hero-locomotive.png") no-repeat right center / cover;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(900px 500px at 78% 18%, rgba(95,170,235,0.18), transparent 60%);
  pointer-events: none;
}
.hero__grid {
  display: grid; grid-template-columns: 0.95fr 1.05fr; gap: var(--space-12);
  align-items: stretch; padding-block: var(--space-12);
  position: relative; z-index: 1;
}
.hero__photo {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  min-height: 460px; background: linear-gradient(160deg, #1c3a6e, #0e1f3d);
  border: 1px solid rgba(234,241,238,0.08);
}

/* ---- Blueprint-style application panel in the empty gutter left of the photo ---- */
/* The panel is a child of .hero__grid (which is position:relative and holds only the
   photo + text columns — NOT the stats). It is absolutely positioned so it breaks out
   into the empty gutter to the LEFT of the grid, and vertically centers against the
   grid (i.e. the photo). Its right edge sits at the grid's left content edge; it
   extends left to reach the viewport edge, and centers its contents within that space. */
.apps-panel {
  position: absolute; z-index: 2;
  top: 50%; transform: translateY(-50%);
  /* Right edge at the grid's left content edge; span left to the viewport edge. */
  right: 100%;
  /* Full left gutter = container side padding + the margin the container leaves to
     the viewport edge ((100vw - grid content width)/2). */
  width: calc((100vw - min(100vw - var(--space-6) * 2, var(--content))) / 2 - var(--space-6));
  padding-inline: var(--space-2);
  box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center;
}
.apps-panel__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-base); line-height: 1.25; color: #fff; text-align: center;
  margin: 0 0 var(--space-4); padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(95,170,235,0.35);
  width: 100%; max-width: 380px;
}
.apps-strip { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); width: 100%; max-width: 380px; }
.app-tile {
  position: relative;
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(95,170,235,0.3); border-radius: var(--radius-md);
  background: rgba(20,44,84,0.5);
  transition: border-color 220ms ease, background 220ms ease, transform 220ms cubic-bezier(0.16,1,0.3,1);
}
.app-tile:hover { border-color: rgba(95,170,235,0.65); background: rgba(28,58,110,0.68); transform: translateX(5px); }
/* Stretched cover link makes the whole tile clickable for tiles tied to a client. */
.app-tile__link { position: absolute; inset: 0; border-radius: inherit; z-index: 3; }
.app-tile__link:focus-visible { outline: 2px solid #7db6ee; outline-offset: 2px; }
.app-tile:has(.app-tile__link) { cursor: pointer; }
.app-tile__art { flex: 0 0 auto; width: 64px; color: #7db6ee; }
.app-tile__art svg { width: 64px; height: auto; display: block; filter: drop-shadow(0 0 7px rgba(95,170,235,0.3)); }
.app-tile:hover .app-tile__art { color: #a7d0f6; }
.app-tile__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.app-tile__title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); color: #fff; line-height: 1.2; }
.app-tile__sub { font-size: var(--text-xs); color: var(--on-dark-muted); letter-spacing: 0.02em; }

/* When the left gutter gets too small to hold the panel without crowding the photo,
   drop it into normal flow as a full-width row of tiles below the hero content.
   The panel is ~380px wide and needs comfortable clearance from the photo, so it
   only floats in the gutter once the viewport is wide enough — hence 1700px. Below
   that (all tablets and most laptops) the tiles sit in a safe row below the hero. */
@media (max-width: 1700px) {
  .apps-panel {
    position: static; transform: none; width: auto; max-width: var(--content);
    right: auto; margin: var(--space-12) auto 0; padding-inline: var(--space-6);
    grid-column: 1 / -1; order: 3;
  }
  .apps-panel__title { text-align: center; border-bottom: none; padding-bottom: 0; margin-bottom: var(--space-8); max-width: none; }
  .apps-strip { flex-direction: row; flex-wrap: wrap; max-width: none; justify-content: center; }
  .apps-strip .app-tile { flex: 1 1 240px; max-width: 300px; }
  .apps-panel__title { font-size: var(--text-lg); }
  .app-tile__art, .app-tile__art svg { width: 64px; }
  .app-tile__title { font-size: var(--text-base); }
  .app-tile__sub { font-size: var(--text-sm); }
}
@media (max-width: 760px) {
  .apps-strip { flex-direction: column; align-items: stretch; }
  .apps-strip .app-tile { flex: 0 0 auto; max-width: none; }
}
.hero__photo .photo-frame { position: absolute; inset: 0; }
/* IMAGE SLOT — your photo */
.photo-slot {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%;
  z-index: 1;
}
.photo-slot__placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--space-3); text-align: center;
  color: var(--on-dark-muted); padding: var(--space-6);
}
.photo-slot__placeholder svg { width: 64px; height: 64px; opacity: 0.5; }
.photo-slot__placeholder code { background: rgba(234,241,238,0.1); padding: 2px 8px; border-radius: 6px; font-size: var(--text-xs); color: var(--on-dark); }

.hero__content { display: flex; flex-direction: column; justify-content: center; }
.eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); }
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--green); }
.hero h1 { font-size: var(--text-3xl); font-weight: 800; margin-top: var(--space-4); color: #fff; }
.hero h1 .accent { color: var(--green); }
.hero__intro { margin-top: var(--space-5); font-size: var(--text-lg); color: var(--on-dark-muted); max-width: 52ch; }

.signature {
  display: flex; align-items: center; gap: var(--space-5);
  margin-top: var(--space-8); padding-top: var(--space-6);
}
.signature__mark {
  width: 130px; height: 76px; flex-shrink: 0; border-radius: var(--radius-md);
  background: rgba(234,241,238,0.06); border: 1px dashed rgba(234,241,238,0.2);
  display: flex; align-items: center; justify-content: center; color: var(--on-dark-muted);
  font-size: var(--text-xs); text-align: center; overflow: hidden;
}
.signature__mark img { width: 100%; height: 100%; object-fit: contain; }
.signature__divider { width: 1px; height: 52px; background: rgba(234,241,238,0.2); }
.signature__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: #fff; }
.signature__role { font-size: var(--text-sm); color: var(--on-dark-muted); }

.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); }

/* HERO STATS (rolling numbers on home page) */
.hero__stats {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6);
  padding-top: var(--space-10); margin-top: var(--space-8);
  border-top: 1px solid rgba(234,241,238,0.12);
}
.stat--dark .stat__num { color: #fff; }
.stat--dark .stat__label { color: var(--on-dark-muted); }

/* ============ SECTION SHELL ============ */
.section { padding-block: clamp(var(--space-16), 9vw, var(--space-24)); }
.section--alt { background: var(--surface); border-block: 1px solid var(--border); }
.section__head { max-width: 640px; margin-bottom: var(--space-12); }
.section__head.center { margin-inline: auto; text-align: center; }
.section__eyebrow { font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-deep); }
.section__title { font-size: var(--text-2xl); font-weight: 800; margin-top: var(--space-3); }
.section__desc { margin-top: var(--space-4); color: var(--text-muted); font-size: var(--text-lg); }

/* ABOUT */
.about__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-12); align-items: center; }
.about__photo { position: relative; aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); }
.about__photo .photo-slot__placeholder { color: var(--text-faint); }
.about__photo .photo-slot__placeholder code { background: var(--surface-2); color: var(--text-muted); }
.about__photo .photo-slot__placeholder svg { color: var(--text-faint); opacity: 1; }
.about__lead { font-size: var(--text-lg); color: var(--text); }
.about__body { margin-top: var(--space-4); color: var(--text-muted); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-8); }
.stat__num { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); color: var(--green-deep); }
.stat__label { font-size: var(--text-sm); color: var(--text-muted); }

/* SERVICES */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-8); transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.section--alt .card { background: var(--bg); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--green); }
.card__icon { width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--green-soft); color: var(--green-deep); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-5); }
.card__icon svg { width: 26px; height: 26px; }
.card__title { font-size: var(--text-lg); font-weight: 700; }
.card__text { margin-top: var(--space-3); color: var(--text-muted); font-size: var(--text-base); }

/* PROJECTS */
.projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.project { border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--border); transition: transform 200ms ease, box-shadow 200ms ease; }
.project:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.project__img { position: relative; aspect-ratio: 16/10; background: var(--surface-2); overflow: hidden; }
.project__img .photo-slot__placeholder { color: var(--text-faint); }
.project__img .photo-slot__placeholder code { background: var(--surface-2); color: var(--text-muted); }
.project__img .photo-slot__placeholder svg { color: var(--text-faint); opacity: 1; width: 44px; height: 44px; }
.project__body { padding: var(--space-6); }
.project__tag { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-deep); }
.project__title { font-size: var(--text-lg); font-weight: 700; margin-top: var(--space-2); }
.project__text { margin-top: var(--space-2); color: var(--text-muted); font-size: var(--text-sm); }

/* CONTACT */
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; }
.contact__list { list-style: none; margin-top: var(--space-6); display: grid; gap: var(--space-5); }
.contact__list li { display: flex; gap: var(--space-4); align-items: flex-start; }
.contact__list .ic { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--green-soft); color: var(--green-deep); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact__list .ic svg { width: 22px; height: 22px; }
.contact__list .lbl { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint); }
.contact__list .val { font-weight: 600; }
.form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-8); }
.field { margin-bottom: var(--space-5); }
.field label { display: block; font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-2); }
.field input, .field textarea {
  width: 100%; padding: var(--space-3) var(--space-4); font: inherit;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg); color: var(--text);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(47,127,214,0.18); }
.field textarea { resize: vertical; min-height: 120px; }
.form__status {
  margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); font-size: var(--text-sm); line-height: 1.5;
}
.form__status--ok { background: var(--green-soft); color: var(--green-deep); border: 1px solid rgba(47,127,214,0.35); }
.form__status--error { background: #fdeaea; color: #a3271f; border: 1px solid rgba(163,39,31,0.3); }

/* FOOTER */
.footer { background: var(--ink); color: var(--on-dark-muted); padding-block: var(--space-12); }
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); }
.footer .brand { color: #fff; }
.footer__links { display: flex; gap: var(--space-6); list-style: none; flex-wrap: wrap; }
.footer__links a:hover { color: var(--green); }
.footer__copy { font-size: var(--text-sm); width: 100%; padding-top: var(--space-6); border-top: 1px solid rgba(234,241,238,0.1); margin-top: var(--space-6); }

/* ============ PORTFOLIO ENTRIES ============ */
.portfolio-entry {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 4vw, var(--space-12));
  margin-bottom: var(--space-8);
  transition: box-shadow 220ms ease, border-color 220ms ease;
}
.portfolio-entry:hover { box-shadow: var(--shadow-md); border-color: var(--green); }
.portfolio-entry__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.portfolio-entry__date { font-size: var(--text-sm); color: var(--text-faint); font-weight: 600; }
.portfolio-entry__title { font-size: var(--text-xl); font-weight: 800; margin-top: var(--space-4); }
.portfolio-entry__lede { margin-top: var(--space-4); font-size: var(--text-lg); color: var(--text-muted); max-width: 70ch; }

/* Video embed (responsive 16:9) */
.video-embed {
  position: relative; width: 100%; aspect-ratio: 16/9;
  margin-top: var(--space-8); border-radius: var(--radius-md); overflow: hidden;
  background: var(--ink); box-shadow: var(--shadow-md);
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Click-to-play cover */
.video-cover { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; cursor: pointer; display: block; }
.video-cover__img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(0.16,1,0.3,1); }
.video-cover::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14,31,61,0.45), transparent 55%);
  transition: background 260ms ease;
}
.video-cover:hover .video-cover__img { transform: scale(1.04); }
.video-cover:hover::after { background: linear-gradient(to top, rgba(14,31,61,0.55), rgba(14,31,61,0.10)); }
.video-cover__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(14,31,61,0.45); z-index: 1;
  transition: transform 220ms cubic-bezier(0.16,1,0.3,1), background 220ms ease;
}
.video-cover__play svg { width: 38px; height: 38px; margin-left: 4px; }
.video-cover:hover .video-cover__play { transform: translate(-50%,-50%) scale(1.08); background: var(--green-deep); }
.video-cover__play::before {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.55); animation: video-ping 2.4s cubic-bezier(0,0,0.2,1) infinite;
}
@keyframes video-ping { 70%, 100% { transform: scale(1.5); opacity: 0; } }
.video-cover__label {
  position: absolute; left: 50%; bottom: var(--space-5); transform: translateX(-50%);
  z-index: 1; color: #fff; font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-base); letter-spacing: 0.02em; text-shadow: 0 2px 12px rgba(14,31,61,0.6);
  white-space: nowrap;
}
.video-embed__caption { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--text-muted); }
.inline-link { color: var(--green-deep); font-weight: 600; }
.inline-link:hover { text-decoration: underline; }

/* Article body */
.article-body { margin-top: var(--space-8); max-width: 72ch; }
.article-body p { margin-bottom: var(--space-5); color: var(--text); }
.article-body .pull-quote {
  margin: var(--space-8) 0; padding: var(--space-4) var(--space-6);
  border-left: 4px solid var(--green); background: var(--green-soft);
  border-radius: var(--radius-sm); font-family: var(--font-display);
  font-size: var(--text-lg); font-weight: 700; color: var(--ink-2);
}
.article-body .article-source { font-size: var(--text-sm); color: var(--text-faint); margin-top: var(--space-8); }

/* Placeholder "add next entry" card */
.portfolio-entry--placeholder { background: var(--bg); border-style: dashed; }
.portfolio-entry--placeholder:hover { box-shadow: none; }
.portfolio-add { display: flex; align-items: center; gap: var(--space-4); color: var(--text-muted); }
.portfolio-add svg { width: 32px; height: 32px; flex-shrink: 0; color: var(--green); }
.portfolio-add p { margin: 0; }

/* ============ PORTFOLIO SUBSECTIONS ============ */
.subsection {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-3) var(--space-4);
  margin-top: var(--space-12); margin-bottom: var(--space-8);
  padding-bottom: var(--space-4); border-bottom: 1px solid var(--border);
}
.subsection__kicker {
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-sm);
  color: #fff; background: var(--green); border-radius: var(--radius-sm);
  padding: 0.2em 0.6em; letter-spacing: 0.04em; line-height: 1; align-self: center;
}
.subsection__title { font-size: var(--text-2xl); font-weight: 800; color: var(--ink); line-height: 1.05; }
.subsection__desc { flex-basis: 100%; margin: 0; color: var(--text-muted); font-size: var(--text-base); max-width: 70ch; }

/* ============ PATENT GRID ============ */
.patent-grid {
  display: grid; gap: var(--space-6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
.patent-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 3vw, var(--space-8)); overflow: hidden;
  transition: transform 200ms cubic-bezier(0.16,1,0.3,1), box-shadow 200ms ease, border-color 200ms ease;
}
.patent-card::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px;
  background: linear-gradient(90deg, var(--green-deep), var(--green));
  transform: scaleX(0); transform-origin: left; transition: transform 280ms cubic-bezier(0.16,1,0.3,1);
}
.patent-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--green); }
.patent-card:hover::before { transform: scaleX(1); }
.patent-card__top {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
}
.patent-card__num {
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-sm);
  letter-spacing: 0.02em; color: var(--green-deep);
  background: var(--green-soft); border-radius: var(--radius-sm); padding: 0.25em 0.6em;
}
.patent-card__year { font-size: var(--text-sm); font-weight: 600; color: var(--text-faint); }
.patent-card__title { font-size: var(--text-lg); font-weight: 800; color: var(--ink); line-height: 1.2; }
.patent-card__text { margin-top: var(--space-3); color: var(--text-muted); font-size: var(--text-base); flex-grow: 1; }
.patent-card__link { margin-top: var(--space-5); font-size: var(--text-sm); font-weight: 700; color: var(--green-deep); align-self: flex-start; }
.patent-card__link:hover { text-decoration: underline; }

/* ============ SUCCESS STORIES ============ */
.stories { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.story {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-8); transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.story:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--green); }
.story__stat { font-family: var(--font-display); font-weight: 800; font-size: var(--text-3xl); color: var(--green-deep); line-height: 1; }
.story__title { font-size: var(--text-lg); font-weight: 700; margin-top: var(--space-4); }
.story__text { margin-top: var(--space-3); color: var(--text-muted); font-size: var(--text-base); }
.story-note { margin-top: var(--space-8); font-size: var(--text-sm); color: var(--text-faint); }

/* ============ CUSTOMERS ============ */
.logos { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-bottom: var(--space-16); }
.logo-chip {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg);
  color: var(--steel); padding: var(--space-4) var(--space-8);
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface);
  transition: transform 200ms ease, border-color 200ms ease, color 200ms ease;
}
.logo-chip:hover { transform: translateY(-3px); border-color: var(--green); color: var(--green-deep); }
.testimonials { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.testimonial { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-8); }
.testimonial blockquote { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: var(--ink-2); }
.testimonial figcaption { margin-top: var(--space-5); }
.testimonial__name { display: block; font-weight: 700; }
.testimonial__role { display: block; font-size: var(--text-sm); color: var(--text-muted); }

/* ============ NAV SCROLLED ============ */
.nav.is-scrolled { box-shadow: 0 6px 24px rgba(14, 31, 61, 0.10); background: rgba(246, 248, 247, 0.95); }

/* ============ AVAILABLE BADGE (pulsing) ============ */
.badge-available {
  display: inline-flex; align-items: center; gap: var(--space-2); align-self: flex-start;
  margin-bottom: var(--space-5); padding: 6px 14px;
  border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark);
  background: rgba(95,170,235,0.12); border: 1px solid rgba(95,170,235,0.28);
}
.badge-available__dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; position: relative; }
.badge-available__dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: #4ade80;
  animation: ping 1.8s cubic-bezier(0,0,0.2,1) infinite;
}
@keyframes ping { 75%, 100% { transform: scale(2.6); opacity: 0; } }

/* ============ SCROLL REVEAL ============ */
/* Fallback (JS disabled / unsupported): always visible */
[data-reveal] { opacity: 1; }
.js [data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity 620ms cubic-bezier(0.16,1,0.3,1), transform 620ms cubic-bezier(0.16,1,0.3,1);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js [data-reveal][data-reveal-delay="1"] { transition-delay: 90ms; }
.js [data-reveal][data-reveal-delay="2"] { transition-delay: 180ms; }
.js [data-reveal][data-reveal-delay="3"] { transition-delay: 270ms; }

/* ============ BUTTON SHIMMER ============ */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::before {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,0.32), transparent);
  transform: skewX(-18deg); transition: none;
}
.btn--primary:hover::before { animation: shimmer 720ms ease; }
@keyframes shimmer { to { left: 140%; } }

/* ============ PROJECT IMAGE ZOOM + OVERLAY ============ */
.project__img .photo-slot, .project__img .photo-slot__placeholder { transition: transform 420ms cubic-bezier(0.16,1,0.3,1); }
.project:hover .project__img .photo-slot, .project:hover .project__img .photo-slot__placeholder { transform: scale(1.06); }
.project__img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(14,31,61,0.35), transparent 55%);
  opacity: 0; transition: opacity 320ms ease;
}
.project:hover .project__img::after { opacity: 1; }
.project__title { transition: color 200ms ease; }
.project:hover .project__title { color: var(--green-deep); }

/* card icon pop on hover */
.card__icon { transition: transform 220ms cubic-bezier(0.16,1,0.3,1), background 220ms ease; }
.card:hover .card__icon { transform: scale(1.08) rotate(-3deg); background: var(--green); color: #fff; }

/* ============ RESPONSIVE ============ */
@media (max-width: 920px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .hero__photo { min-height: 360px; }
  .about__grid, .contact__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .cards, .projects { grid-template-columns: repeat(2, 1fr); }
  .hero__stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
  .stories { grid-template-columns: 1fr; }
  .testimonials { grid-template-columns: 1fr; }
}
/* Collapse to hamburger early so the 8-tab nav never overflows. */
@media (max-width: 1180px) {
  .nav__menu, .nav__cta { display: none; }
  .nav__menu.open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: var(--surface); border-bottom: 1px solid var(--border);
    padding: var(--space-4); gap: var(--space-1); box-shadow: var(--shadow-lg);
  }
  .nav__menu.open .nav__link { width: 100%; justify-content: space-between; }
  .nav__menu.open .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; border-left: 2px solid var(--green-soft); border-radius: 0; margin-left: var(--space-4); display: none; }
  .nav__menu.open .nav__item.open .dropdown { display: block; }
  .nav__toggle { display: flex; }
}
@media (max-width: 760px) {
  .cards, .projects { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; gap: var(--space-4); }
  .hero__stats { grid-template-columns: 1fr 1fr; }
  .portfolio-entry__meta { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .marquee__track { animation: none !important; }
}

/* ============================================================
   NEW COMPONENTS — About, Aerodynamics, Articles,
   Presentations, Clients
   ============================================================ */

/* ---- ABOUT ME ---- */
.about-grid {
  display: grid; grid-template-columns: 1.7fr 1fr;
  gap: var(--space-10); align-items: start;
  margin-top: var(--space-8);
}
.about-lede {
  font-family: 'Cabinet Grotesk', sans-serif; font-weight: 700;
  font-size: var(--text-xl); line-height: 1.3; color: var(--ink);
  margin: 0 0 var(--space-5);
}
.about-bio p { color: var(--text); line-height: 1.7; margin: 0 0 var(--space-4); }
.about-side {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-6);
  box-shadow: var(--shadow-md); position: sticky; top: calc(var(--nav-h) + var(--space-4));
}
.about-fact { padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.about-fact:last-child { border-bottom: none; }
.about-fact__label {
  display: block; font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--green-deep); font-weight: 700; margin-bottom: 2px;
}
.about-fact__value { display: block; color: var(--text); font-weight: 500; }

/* ---- INTERESTS ---- */
.interests {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5); margin-top: var(--space-6);
}
.interest {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-5);
  box-shadow: var(--shadow-md); transition: transform 220ms cubic-bezier(0.16,1,0.3,1), box-shadow 220ms ease;
}
.interest:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.interest__icon {
  width: 46px; height: 46px; border-radius: var(--radius-md);
  display: grid; place-items: center; background: var(--green-soft);
  color: var(--green-deep); margin-bottom: var(--space-3);
  transition: transform 220ms cubic-bezier(0.16,1,0.3,1), background 220ms ease, color 220ms ease;
}
.interest__icon svg { width: 24px; height: 24px; }
.interest:hover .interest__icon { transform: scale(1.08) rotate(-3deg); background: var(--green); color: #fff; }
.interest__title { font-size: var(--text-md); margin: 0 0 var(--space-1); color: var(--ink); }
.interest__text { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.6; margin: 0; }
.interest__link {
  display: inline-block; margin-top: var(--space-3);
  font-size: var(--text-sm); font-weight: 600; color: var(--green-deep);
  text-decoration: none; transition: color 160ms ease;
}
.interest__link:hover { color: var(--ink); }

/* ---- PIANO: favorite pieces ---- */
.back-link {
  display: block; margin-bottom: var(--space-4);
  font-size: var(--text-sm); font-weight: 600; color: var(--green-deep);
  text-decoration: none; transition: color 160ms ease;
}
.back-link:hover { color: var(--ink); }
.piano-list {
  list-style: none; margin: var(--space-8) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4);
}
.piano-item { margin: 0; }
.piano-item__link {
  display: flex; flex-direction: column; height: 100%;
  gap: var(--space-1); padding: var(--space-5) var(--space-6);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); text-decoration: none;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.piano-item__link:hover,
.piano-item__link:focus-visible {
  transform: translateY(-3px);
  border-color: var(--green);
  box-shadow: 0 10px 28px rgba(14, 31, 61, 0.14);
}
.piano-item__title { font-size: var(--text-md); font-weight: 600; color: var(--ink); line-height: 1.35; }
.piano-item__perf { font-size: var(--text-sm); color: var(--text-muted); }
.piano-item__cue {
  margin-top: auto; padding-top: var(--space-3);
  font-size: var(--text-sm); font-weight: 600; color: var(--green-deep);
}

/* ---- AERODYNAMICS ---- */
.aero-intro { max-width: 760px; margin: var(--space-6) 0; }
.aero-intro p { font-size: var(--text-lg); line-height: 1.6; color: var(--text); margin: 0; }
.tunnel-gallery {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4); margin: var(--space-8) 0;
}
.tunnel-figure { margin: 0; }
.tunnel-link { display: block; cursor: zoom-in; border-radius: var(--radius-lg); overflow: hidden; }
.tunnel-figure img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  display: block; transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tunnel-link:hover img,
.tunnel-link:focus-visible img {
  transform: scale(1.03);
  box-shadow: 0 8px 24px rgba(14, 31, 61, 0.25);
}
.tunnel-figure figcaption {
  margin-top: var(--space-2); font-size: var(--text-sm);
  color: var(--text-muted); text-align: center;
}
.aero-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4); margin: var(--space-6) 0 var(--space-10);
}
.aero-stat {
  background: var(--ink); color: var(--on-dark);
  border-radius: var(--radius-lg); padding: var(--space-5);
  text-align: center;
}
.aero-stat__num {
  font-family: 'Cabinet Grotesk', sans-serif; font-weight: 800;
  font-size: var(--text-3xl); color: #fff; line-height: 1; margin-bottom: var(--space-2);
}
.aero-stat__label { font-size: var(--text-xs); color: var(--on-dark); opacity: 0.82; line-height: 1.4; }
.aero-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.aero-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-6);
  box-shadow: var(--shadow-md); border-top: 3px solid var(--green);
  transition: transform 220ms cubic-bezier(0.16,1,0.3,1), box-shadow 220ms ease;
}
.aero-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.aero-card__title { font-size: var(--text-lg); margin: 0 0 var(--space-2); color: var(--ink); }
.aero-card p { color: var(--text-muted); line-height: 1.65; margin: 0; }
.aero-cta {
  margin-top: var(--space-10); padding: var(--space-8);
  background: var(--green-soft); border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5); flex-wrap: wrap;
}
.aero-cta p { margin: 0; font-size: var(--text-lg); font-weight: 600; color: var(--ink); }

/* ---- ARTICLES & PAPERS ---- */
.article-feature {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-8);
  box-shadow: var(--shadow-md); border-left: 4px solid var(--green);
  margin: var(--space-8) 0 var(--space-10);
}
.article-feature__meta {
  display: flex; gap: var(--space-3); align-items: center;
  margin-bottom: var(--space-3); flex-wrap: wrap;
}
.article-feature__pub {
  background: var(--green); color: #fff; font-weight: 700;
  font-size: var(--text-xs); padding: 4px 12px; border-radius: var(--radius-full);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.article-feature__date { color: var(--text-muted); font-size: var(--text-sm); }
.article-feature__title {
  font-family: 'Cabinet Grotesk', sans-serif; font-weight: 800;
  font-size: var(--text-2xl); color: var(--ink); margin: 0 0 var(--space-2); line-height: 1.15;
}
.article-feature__sub {
  font-size: var(--text-lg); color: var(--green-deep); font-weight: 600;
  margin: 0 0 var(--space-4); line-height: 1.4;
}
.article-feature__lede { color: var(--text); line-height: 1.7; margin: 0 0 var(--space-4); }
.article-feature__by {
  font-weight: 700; color: var(--ink); margin-bottom: var(--space-5);
  font-size: var(--text-sm); letter-spacing: 0.02em;
}

.paper-list { list-style: none; padding: 0; margin: var(--space-6) 0 0; }
.paper-item {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-5); padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border);
}
.paper-item:first-child { border-top: 1px solid var(--border); }
.paper-item__tag {
  display: inline-block; font-size: var(--text-xs); font-weight: 700;
  color: var(--green-deep); background: var(--green-soft);
  padding: 3px 10px; border-radius: var(--radius-full);
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-2);
}
.paper-item__title { font-size: var(--text-md); margin: 0 0 var(--space-1); color: var(--ink); }
.paper-item__desc { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.6; margin: 0; max-width: 70ch; }
.paper-item__main .inline-link { display: inline-block; margin-top: var(--space-2); margin-right: var(--space-4); font-size: var(--text-sm); }
.paper-item__year {
  flex-shrink: 0; font-family: 'Cabinet Grotesk', sans-serif; font-weight: 700;
  color: var(--steel); font-size: var(--text-sm); padding-top: var(--space-1);
}

/* ---- PRESENTATIONS ---- */
.present-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5); margin-top: var(--space-8);
}
.present-card {
  display: flex; gap: var(--space-5);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-6);
  box-shadow: var(--shadow-md);
}
.present-card__date {
  flex-shrink: 0; width: 86px; text-align: center;
  background: var(--ink); color: #fff; border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-2); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; align-self: flex-start;
}
.present-card__month { text-transform: uppercase; font-size: var(--text-xs); letter-spacing: 0.1em; opacity: 0.85; }
.present-card__day { font-family: 'Cabinet Grotesk', sans-serif; font-weight: 800; font-size: var(--text-xl); line-height: 1; }
.present-card__yr { font-size: var(--text-xs); opacity: 0.85; }
.present-card__tag {
  display: inline-block; font-size: var(--text-xs); font-weight: 700;
  color: var(--green-deep); background: var(--green-soft);
  padding: 3px 10px; border-radius: var(--radius-full); margin-bottom: var(--space-2);
  text-transform: uppercase; letter-spacing: 0.05em;
}
/* Status variants */
.present-card__tag--attended { color: #0f5132; background: #d6f0e0; }
.present-card__tag--planning { color: #1b5fb0; background: #e6f0fb; }
.present-card__tag--conflict { color: #8a5a00; background: #fcefcf; }
.present-card__tag--maybe    { color: #5a6473; background: #eceef2; }

/* Status legend */
.present-legend {
  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6);
  margin-top: var(--space-6); padding: 0;
}
.present-legend__item {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: 600; color: var(--text-muted);
}
.present-dot { width: 12px; height: 12px; border-radius: var(--radius-full); flex-shrink: 0; }
.present-dot--attended { background: #1a9b5e; }
.present-dot--planning { background: #2f7fd6; }
.present-dot--conflict { background: #d99a1c; }
.present-dot--maybe    { background: #9aa3b2; }
.present-card__title { font-size: var(--text-lg); margin: 0 0 var(--space-1); color: var(--ink); line-height: 1.25; }
.present-card__org { font-weight: 600; color: var(--text); margin: 0 0 2px; }
.present-card__loc { color: var(--text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-3); }
.present-card__desc { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.6; margin: 0 0 var(--space-3); }
.present-card--placeholder {
  align-items: center; justify-content: center; text-align: center;
  border-style: dashed; background: transparent; box-shadow: none;
}

/* ---- CLIENTS ---- */
.clients-highlight {
  display: flex; align-items: center; gap: var(--space-6);
  background: var(--ink); color: var(--on-dark);
  border-radius: var(--radius-lg); padding: var(--space-8);
  margin: var(--space-8) 0 var(--space-10); flex-wrap: wrap;
}
.clients-highlight__stat {
  font-family: 'Cabinet Grotesk', sans-serif; font-weight: 800;
  font-size: clamp(3rem, 8vw, 5rem); color: var(--green); line-height: 1; flex-shrink: 0;
}
.clients-highlight__text h3 { font-size: var(--text-xl); color: #fff; margin: 0 0 var(--space-2); }
.clients-highlight__text p { color: var(--on-dark); opacity: 0.88; line-height: 1.6; margin: 0; max-width: 56ch; }

.client-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4); margin-top: var(--space-4);
}
.client-tile {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; text-decoration: none;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-5) var(--space-4);
  box-shadow: var(--shadow-md);
  transition: transform 220ms cubic-bezier(0.16,1,0.3,1), box-shadow 220ms ease, border-color 220ms ease;
}
.client-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--green); }
.client-tile__logo {
  width: 100%; height: 84px; display: grid; place-items: center;
  margin-bottom: var(--space-3);
}
.client-tile__logo img {
  max-width: 100%; max-height: 72px; width: auto; height: auto;
  object-fit: contain; filter: saturate(1);
  transition: transform 220ms cubic-bezier(0.16,1,0.3,1);
}
.client-tile:hover .client-tile__logo img { transform: scale(1.05); }
.client-tile__name {
  font-weight: 600; font-size: var(--text-sm); color: var(--ink);
  line-height: 1.3; margin-bottom: var(--space-2);
}
.client-tile__visit {
  font-size: var(--text-xs); font-weight: 700; color: var(--green-deep);
  opacity: 0; transform: translateY(4px);
  transition: opacity 220ms ease, transform 220ms ease; margin-top: auto;
}
.client-tile:hover .client-tile__visit { opacity: 1; transform: translateY(0); }
.story-note.center { text-align: center; }

/* ============ RESPONSIVE — new components ============ */
@media (max-width: 920px) {
  .about-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .about-side { position: static; }
  .interests { grid-template-columns: repeat(2, 1fr); }
  .aero-stats { grid-template-columns: repeat(2, 1fr); }
  .aero-cards { grid-template-columns: repeat(2, 1fr); }
  .present-grid { grid-template-columns: 1fr; }
  .client-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .interests { grid-template-columns: 1fr 1fr; }
  .aero-cards { grid-template-columns: 1fr; }
  .tunnel-gallery { grid-template-columns: 1fr; }
  .aero-cta { flex-direction: column; align-items: flex-start; }
  .client-grid { grid-template-columns: repeat(2, 1fr); }
  .article-feature { padding: var(--space-5); }
  .paper-item { flex-direction: column; gap: var(--space-2); }
  .present-card { flex-direction: column; }
  .present-card__date { flex-direction: row; width: auto; gap: var(--space-2); padding: var(--space-2) var(--space-4); }
  .clients-highlight { flex-direction: column; text-align: center; }
}
@media (max-width: 460px) {
  .client-grid { grid-template-columns: 1fr; }
  .interests { grid-template-columns: 1fr; }
  .piano-list { grid-template-columns: 1fr; }
  .aero-stats { grid-template-columns: 1fr; }
}

/* Merged Publications & Presentations tab spacing */
.subsection--minor { margin-top: var(--space-8); }
#articles .present-grid { margin-top: var(--space-6); }