/* ==========================================================================
   Pinnacle Glass & Aluminum - Design System
   Aesthetic: dark architectural, warm copper accents, refined gallery feel
   ========================================================================== */

/* ----- Design Tokens ----- */
:root {
  /* Color - Dark Mode Locked */
  --bg: #0a0a0c;
  --bg-elevated: #111114;
  --bg-card: #15151a;
  --bg-card-hover: #1a1a20;
  --surface-tint: #1f1f25;

  /* Text */
  --text: #f4f1ea;
  --text-muted: #a8a39a;
  --text-dim: #6b6862;
  --text-faint: #45433f;

  /* Accent - Warm Champagne / Copper (single accent lock) */
  --accent: #c9a875;
  --accent-bright: #e0c08e;
  --accent-deep: #a08555;
  --accent-glow: rgba(201, 168, 117, 0.18);

  /* Borders & Hairlines */
  --border: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.12);
  --border-accent: rgba(201, 168, 117, 0.3);

  /* Typography — Architectural Luxury System
     Hierarchy principle: extreme weight contrast (100 vs 600),
     Mixed Case for display headlines (NOT uppercase), generous
     letter-spacing calibrated per role, italic Cormorant Garamond
     reserved for accent words inside titles (`.t-serif`, `<em>`). */
  --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'Cormorant Garamond', 'Garamond', 'Georgia', serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Font weights — full Montserrat range */
  --fw-thin: 100;
  --fw-extralight: 200;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* Letter tracking — calibrated per role. The point is HIERARCHY through
     tracking: display is slightly tight (large size needs it), body is
     natural, caps labels progressively widen as size shrinks. */
  --tracking-display: -0.02em;
  /* Hero — barely tight, reads as airy */
  --tracking-tighter: -0.025em;
  /* Section titles — subtle tightening */
  --tracking-tight: -0.005em;
  /* Lead, large body — almost natural */
  --tracking-normal: 0em;
  /* Default body — natural */
  --tracking-label: 0.08em;
  /* Caps labels (nav, buttons) — confident, not shouty */
  --tracking-wide: 0.18em;
  /* Eyebrow labels — clear small-text tracking */
  --tracking-widest: 0.32em;
  /* Mono meta — refined, architectural */

  /* Line heights — refined for editorial rhythm */
  --lh-display: 0.98;
  /* Hero — was 0.9, more breathing room */
  --lh-heading: 1.12;
  /* Section titles — was 1.05 */
  --lh-lead: 1.45;
  /* Lead paragraph — was implicit 1.7 */
  --lh-body: 1.65;
  /* Body — was 1.8, slightly tighter for modernity */

  /* Type scale — refined, hierarchy through dramatic size contrast */
  --fs-eyebrow: 0.7rem;
  /* was 0.75 — slightly smaller, more refined */
  --fs-label: 0.88rem;
  /* increased from 0.78rem for better menu readability */
  --fs-xs: 0.84rem;
  --fs-sm: 0.92rem;
  /* was 0.95 */
  --fs-base: 1.0625rem;
  /* was 1.1 — 17px, comfortable */
  --fs-lg: 1.18rem;
  /* was 1.25 */
  --fs-lead: 1.32rem;
  /* was 1.5 — smaller, lets display do the work */
  --fs-h4: 1.65rem;
  /* was 1.85 */
  --fs-h3: clamp(2rem, 1.4rem + 2.8vw, 3.4rem);
  /* was 2.5-4rem */
  --fs-h2: clamp(2.6rem, 1.6rem + 4vw, 4.4rem);
  /* was 3.2-5.5rem */
  --fs-h1: clamp(3.2rem, 2rem + 6vw, 6.8rem);
  /* was 4.2-8.5rem */
  --fs-display: clamp(3.5rem, 2.5rem + 11vw, 10rem);
  /* was 5.5-14rem */
  --fs-serif-display: clamp(4.5rem, 2.5rem + 11vw, 12rem);

  /* Spacing (8pt scale) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4.5rem;
  --space-6: 6.5rem;
  --space-7: 9.5rem;
  --space-8: 13.5rem;
  --space-9: 18rem;
  --space-10: 24rem;

  /* Layout */
  --container: 1440px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  /* All radii set to 0 — site uses a strict square / architectural aesthetic */
  --radius-sm: 0;
  --radius: 0;
  --radius-lg: 0;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 200ms;
  --duration: 350ms;
  --duration-slow: 600ms;
  --duration-slower: 900ms;

  /* Z layers */
  --z-base: 0;
  --z-elevated: 10;
  --z-nav: 50;
  --z-overlay: 80;
  --z-modal: 100;

  /* Legacy token aliases — kept so existing selectors continue to resolve.
     These mirror the typography redesign's signature tokens. */
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);
  --fs-xl: var(--fs-lg);
  --fs-2xl: var(--fs-h4);
  --fs-3xl: var(--fs-h3);
  --fs-4xl: var(--fs-h2);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  font-weight: var(--fw-regular);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
picture,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Selection */
::selection {
  background: var(--accent);
  color: var(--bg);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--surface-tint);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-deep);
}

/* ----- Utility ----- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ==========================================================================
   Global Typography System — Architectural Luxury (Vueglazing-inspired)
   --------------------------------------------------------------------------
   Six named layers every section composes with. The hierarchy is built
   on three axes: weight contrast (100 vs 600), size contrast (0.7rem
   eyebrows vs 12rem display), and case contrast (mixed-case titles vs
   tracked-caps labels). Italic Cormorant is reserved for accent words
   inside titles (`<em>`, `.t-serif`).
     .t-eyebrow   tracked-caps label, hairline accent, before a title
     .t-display   huge Mixed-Case headline, weight 100–200
     .t-lead      mid-size intro paragraph, weight 300
     .t-body      default body copy, weight 300
     .t-label     small all-caps label (buttons, nav, CTAs), 0.08em
     .t-meta      mono tracked-caps label (numbers, dates, project codes)
   ========================================================================== */

.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  line-height: 1.0;
}

.t-eyebrow--accent {
  color: var(--accent);
}

.t-eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
  display: inline-block;
  flex-shrink: 0;
}

.t-eyebrow--bare::before {
  display: none;
}

.t-display {
  font-family: var(--font-sans);
  font-weight: var(--fw-thin);
  /* was fw-black — KEY CHANGE */
  font-size: var(--fs-display);
  letter-spacing: var(--tracking-display);
  /* was -0.06em → -0.02em */
  line-height: var(--lh-display);
  /* was 0.9 → 0.98 */
  text-transform: none;
  /* was uppercase → Mixed Case */
  color: var(--text);
  text-wrap: balance;
}

/* Variant weights for t-display — the default is thin (100), these override. */
.t-display--sm {
  font-size: var(--fs-h1);
  letter-spacing: var(--tracking-tighter);
}

.t-display--xs {
  font-size: var(--fs-h3);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--lh-heading);
}

.t-display--no-upper {
  text-transform: none;
}

/* legacy alias — same as default now */
.t-display--regular {
  font-weight: var(--fw-regular);
}

.t-display--light {
  font-weight: var(--fw-light);
}

/* renamed from --thin to --light */
.t-display--thin {
  font-weight: var(--fw-thin);
}

/* explicit thin */

/* ----- Serif Accent — Cormorant Garamond Italic (RESTORED) -----
   Used for accent words inside titles (e.g. "Six Systems
   Engineered for Envelopes" — accent on "Envelopes"). Bring
   this back so titles gain editorial weight without being shouty. */
.t-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  letter-spacing: -0.005em;
  text-transform: none;
  line-height: inherit;
  /* Slight optical size compensation — Cormorant italic at display size
     can look chunky next to thin Montserrat. -0.005em tightens gently. */
}

.t-serif--accent {
  color: var(--accent);
}

.t-serif--display {
  font-size: var(--fs-serif-display);
}

/* Global `<em>` inside heading/display contexts becomes Cormorant italic.
   This is how portfolio titles with <em>Accent</em> gain their luxury lift. */
.display em,
.t-display em,
h1 em,
h2 em,
h3 em,
h4 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  letter-spacing: -0.005em;
  text-transform: none;
}

.t-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  line-height: var(--lh-lead);
  /* 1.45 */
  letter-spacing: var(--tracking-tight);
  /* -0.005em */
  text-transform: none;
  color: var(--text-muted);
  /* was --text */
  max-width: 50ch;
  /* was 45ch */
}

.t-lead--sm {
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 58ch;
}

.t-body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-light);
  /* was fw-extralight (200) → fw-light (300) */
  line-height: var(--lh-body);
  /* 1.65 */
  color: var(--text-muted);
  max-width: 58ch;
  /* was 52ch */
  letter-spacing: var(--tracking-normal);
  /* 0em — was 0.015em */
  text-transform: none;
  text-wrap: pretty;
}

.t-body--sm {
  font-size: var(--fs-sm);
  line-height: 1.65;
  max-width: 56ch;
}

.t-label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  /* was fw-semibold (600) → medium (500) */
  letter-spacing: var(--tracking-label);
  /* 0.08em — was 0.2em (way too wide) */
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.0;
}

.t-meta {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-widest);
  /* 0.32em — was 0.2em, refined */
  text-transform: uppercase;
  color: var(--text-dim);
  line-height: 1.4;
}

.t-meta--lg {
  font-size: 0.82rem;
  letter-spacing: var(--tracking-wide);
  /* 0.18em */
  text-transform: none;
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* ----- Legacy aliases — values updated to match the new system, names kept ----- */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
  font-weight: var(--fw-medium);
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  line-height: 1.0;
}

.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
  display: inline-block;
  flex-shrink: 0;
}

.display {
  font-family: var(--font-sans);
  font-weight: var(--fw-thin);
  /* was fw-black */
  font-size: var(--fs-display);
  letter-spacing: var(--tracking-display);
  /* was -0.06em → -0.02em */
  line-height: var(--lh-display);
  /* was 0.9 → 0.98 */
  text-transform: none;
  /* was uppercase → Mixed Case */
  color: var(--text);
  text-wrap: balance;
}

.serif-italic {
  font-family: var(--font-serif);
  /* RESTORED — was forced to sans */
  font-style: italic;
  /* RESTORED — was forced to normal */
  font-weight: var(--fw-regular);
}

.muted {
  color: var(--text-muted);
}

.dim {
  color: var(--text-dim);
}

/* ----- Reveal Animation ----- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
  will-change: opacity, transform;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

.reveal[data-delay="1"] {
  transition-delay: 0.08s;
}

.reveal[data-delay="2"] {
  transition-delay: 0.16s;
}

.reveal[data-delay="3"] {
  transition-delay: 0.24s;
}

.reveal[data-delay="4"] {
  transition-delay: 0.32s;
}

.reveal[data-delay="5"] {
  transition-delay: 0.4s;
}

.reveal[data-delay="6"] {
  transition-delay: 0.48s;
}

.reveal-img {
  opacity: 0;
  /* Note: starting clip-path at inset(0 0 100% 0) breaks Chrome's
     IntersectionObserver (it reports intersectionRatio=0 forever, so the
     .in-view class never fires). We instead start at inset(0 0 50% 0) —
     half-clipped — which Chrome still counts as intersecting, so the IO
     callback fires when the element scrolls into view, then the transition
     animates the clip-path down to 0. */
  clip-path: inset(0 0 50% 0);
  transition: opacity 1.4s var(--ease-out), clip-path 1.4s var(--ease-out);
  will-change: opacity, clip-path;
}

.reveal-img.in-view {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

/* ----- Navigation ----- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  padding: 0.85rem 0;
  background: transparent;
  border-bottom: none;
  transition: padding var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out), backdrop-filter var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
}

.nav.scrolled {
  padding: 0.45rem 0;
  background: rgba(10, 10, 12, 0.88);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--border);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* ----- Hero-scoped nav: matches client reference (uppercase, 3-line wordmark, border CTA) ----- */
.nav--hero {
  padding: 0.85rem 0;
  background: transparent;
  border-bottom: none;
}

.nav--hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 220px;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(8, 8, 10, 0.68) 0%,
    rgba(8, 8, 10, 0.54) 22%,
    rgba(8, 8, 10, 0.38) 42%,
    rgba(8, 8, 10, 0.22) 62%,
    rgba(8, 8, 10, 0.11) 78%,
    rgba(8, 8, 10, 0.03) 90%,
    transparent 100%
  );
  transition: opacity var(--duration) var(--ease-out);
}

.nav--hero.scrolled {
  padding: 0.45rem 0;
  background: rgba(10, 10, 12, 0.90);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--border);
}

.nav--hero.scrolled::before {
  opacity: 0;
}

.nav__inner--hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--gutter);
  width: 100%;
  gap: 2rem;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  height: 100%;
  padding: 0.15rem 0;
}

.nav__brand:hover,
.nav__brand:focus,
.nav__brand:active {
  opacity: 1;
  text-shadow: none;
  box-shadow: none;
  transform: none;
}

.nav__brand-logo {
  height: 52px;
  width: auto;
  max-width: 270px;
  object-fit: contain;
  display: block;
  filter: brightness(1.32) contrast(1.08) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.65));
  transition: height var(--duration) var(--ease-out);
}

.nav__brand:hover .nav__brand-logo,
.nav__brand-logo:hover,
.nav__brand:focus .nav__brand-logo,
.nav__brand:active .nav__brand-logo {
  filter: brightness(1.32) contrast(1.08) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.65)) !important;
  transform: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

.nav--hero.scrolled .nav__brand-logo {
  height: 42px;
}

@media (max-width: 768px) {
  .nav--hero {
    padding: 0.55rem 0;
  }

  .nav__brand-logo {
    height: 42px;
    max-width: 210px;
  }

  .nav--hero.scrolled .nav__brand-logo {
    height: 36px;
  }
}

.nav--hero.scrolled .nav__brand {
  text-shadow: none;
}

.nav__menu--hero {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  padding-top: 0.25rem;
}

.nav__menu--hero .nav__link {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
  position: relative;
  padding: 0.55rem 0;
  white-space: nowrap;
  transition: color var(--duration) var(--ease-out), text-shadow var(--duration) var(--ease-out);
}

.nav__menu--hero .nav__link::after {
  display: none;
}

.nav__menu--hero .nav__link:hover {
  color: var(--accent-bright);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

.nav--hero.scrolled .nav__menu--hero .nav__link {
  color: #fff;
  text-shadow: none;
}

.nav--hero.scrolled .nav__menu--hero .nav__link:hover,
.nav--hero.scrolled .nav__menu--hero .nav__link.is-active {
  color: var(--accent);
}

/* ===== Desktop Dropdown Styling ===== */
.nav__item--dropdown {
  position: relative;
  padding-bottom: 0.5rem;
  margin-bottom: -0.5rem;
}

.nav__link--dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
}

.nav__dropdown-caret {
  transition: transform var(--duration) var(--ease-out);
}

.nav__item--dropdown:hover .nav__dropdown-caret,
.nav__item--dropdown:focus-within .nav__dropdown-caret,
.nav__item--dropdown.is-open .nav__dropdown-caret {
  transform: rotate(180deg);
}

.nav__dropdown {
  position: absolute;
  top: calc(100% - 0.2rem);
  left: 0;
  transform: translateY(6px);
  min-width: 210px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0;
  padding: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out), visibility 0.2s;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25);
  z-index: 100;
}

/* Invisible bridge pseudo-element to fix hover gap bug */
.nav__dropdown::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
  background: transparent;
}

.nav__item--dropdown:hover .nav__dropdown,
.nav__item--dropdown:focus-within .nav__dropdown,
.nav__item--dropdown.is-open .nav__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.nav__dropdown-link {
  display: block;
  padding: 0.85rem 1.35rem;
  border-radius: 0;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0a0a0c;
  text-decoration: none;
  background: #ffffff;
  transition: background-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.nav__dropdown li:last-child .nav__dropdown-link {
  border-bottom: none;
}

.nav__dropdown-link:hover,
.nav__dropdown-link.is-active:hover {
  background: #0a0a0c;
  color: #ffffff;
}

.nav__dropdown-link.is-active {
  color: #0a0a0c;
}

.nav--hero.scrolled .nav__dropdown {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.15);
}

.nav__menu--hero .nav__link--cta {
  border: 1px solid rgba(255, 255, 255, 0.85);
  color: #ffffff;
  padding: 0.55rem 1.2rem;
  margin-left: 0.4rem;
  letter-spacing: var(--tracking-label);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
  transition: background-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out), text-shadow var(--duration) var(--ease-out);
}

.nav__menu--hero .nav__link--cta:hover {
  background: #ffffff;
  color: #0a0a0c;
  border-color: #ffffff;
  text-shadow: none;
}

.nav--hero.scrolled .nav__menu--hero .nav__link--cta {
  border-color: #fff;
  color: #fff;
  text-shadow: none;
}

.nav--hero.scrolled .nav__menu--hero .nav__link--cta:hover {
  background: #fff;
  color: #0a0a0c;
  border-color: #fff;
  text-shadow: none;
}

.nav__logo {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  /* was fw-semibold (600) → medium (500) */
  letter-spacing: var(--tracking-label);
  /* 0.08em — was tracking-wide (0.18em) */
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text);
}

.nav__logo-mark {
  width: 28px;
  height: 28px;
  border: 1px solid var(--accent);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav__logo-mark::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 0;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  list-style: none;
}

.nav__link {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  letter-spacing: var(--tracking-label);
  /* 0.08em — was tracking-wide (0.18em, too wide) */
  position: relative;
  padding: 0.5rem 0;
  transition: color var(--duration-fast) var(--ease-out);
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width var(--duration) var(--ease-out);
}

.nav__link:hover,
.nav__link.is-active {
  color: var(--text);
}

.nav__link:hover::after,
.nav__link.is-active::after {
  width: 100%;
}

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 1.3rem;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  font-size: 0.84rem;
  font-weight: var(--fw-medium);
  /* was implicit — explicit medium */
  letter-spacing: var(--tracking-label);
  /* 0.08em — was hard-coded 0.04em (too tight) */
  text-transform: uppercase;
  /* was implicit lowercase — explicit caps */
  color: var(--text);
  transition: all var(--duration) var(--ease-out);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.nav__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform var(--duration) var(--ease-out);
  z-index: -1;
}

.nav__cta:hover {
  color: var(--bg);
  border-color: var(--accent);
}

.nav__cta:hover::before {
  transform: translateY(0);
}

.nav__cta-arrow {
  transition: transform var(--duration) var(--ease-out);
}

.nav__cta:hover .nav__cta-arrow {
  transform: translateX(3px);
}

/* Mobile menu */
.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}

.nav__toggle span {
  width: 22px;
  height: 1px;
  background: var(--text);
  position: relative;
  transition: transform var(--duration) var(--ease-out);
}

.nav__toggle span::before,
.nav__toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--text);
  transition: transform var(--duration) var(--ease-out);
}

.nav__toggle span::before {
  top: -7px;
}

.nav__toggle span::after {
  top: 7px;
}

.nav__toggle.is-open span {
  background: transparent;
}

.nav__toggle.is-open span::before {
  transform: translateY(7px) rotate(45deg);
}

.nav__toggle.is-open span::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* ----- Hero Section ----- */
.hero {
  position: relative;
  min-height: 100dvh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: calc(85px + clamp(1rem, 3vh, 2.5rem));
  padding-bottom: clamp(1.5rem, 5vh, 3.5rem);
  padding-inline: var(--hero-pad);
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
  --hero-pad: clamp(1.5rem, 4vw, 3rem);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* Soft bottom darkening so the centered text and bottom CTA
   read clearly without crushing the bright sky on the right. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 75% 65% at 50% 50%,
      rgba(0, 0, 0, 0.32) 0%,
      rgba(0, 0, 0, 0.14) 45%,
      transparent 75%),
    linear-gradient(
      180deg,
      rgba(10, 10, 12, 0.35) 0%,
      rgba(10, 10, 12, 0.20) 120px,
      rgba(10, 10, 12, 0.06) 200px,
      transparent 280px,
      transparent 50%,
      rgba(10, 10, 12, 0.85) 100%
    );
  z-index: 1;
  pointer-events: none;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}

.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.hero__cursor {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(700px circle at var(--mx, 50%) var(--my, 50%), rgba(201, 168, 117, 0.10), transparent 55%);
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out);
}

.hero:hover .hero__cursor {
  opacity: 1;
}

/* ----- Hero: left social rail ----- */
.hero__social {
  position: absolute;
  left: var(--hero-pad);
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hero__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
  transition: color var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
}

.hero__social svg {
  width: 18px;
  height: 18px;
}

.hero__social a:hover {
  color: var(--accent);
  transform: translateY(-2px);
}

/* ----- Hero: lower-positioned multi-layered title block ----- */
.hero__center {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: var(--container);
  gap: clamp(1rem, 2.2vh, 2.4rem);
  margin: auto 0;
}

/* Eyebrow: tiny tracked label with a small marker line.
   Establishes a top layer of the hierarchy — small, calm, architectural. */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  /* was fw-semibold (600) → medium (500), more refined */
  letter-spacing: var(--tracking-wide);
  /* 0.18em — was tracking-widest (0.32em, too wide) */
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

.hero__eyebrow-mark {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, 0.85);
}

.hero__eyebrow-text {
  display: inline-block;
}

/* Main title: large, light, no italic. Two stacked lines with subtle
   tracking and a deliberate period at the end. The biggest visual
   moment in the hero — needs air around it.

   Architectural luxury principle: at this scale, THIN weight + Mixed
   Case + slightly negative tracking reads as effortless grandeur.
   fw-black + uppercase would read as shouting (the old look). */
.hero__title {
  font-family: var(--font-sans);
  font-size: clamp(3.4rem, min(2rem + 5.5vw, 13.5vh), 9.5rem);
  font-weight: var(--fw-medium);
  /* was fw-black — KEY CHANGE */
  letter-spacing: var(--tracking-display);
  /* was tracking-tighter (-0.025em) → -0.02em */
  line-height: var(--lh-display);
  color: #fff;
  text-transform: none;
  /* was uppercase → Mixed Case */
  margin: 0;
  text-align: center;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.3);
}

.hero__title-line {
  display: block;
}

/* The accent period: a Cormorant italic serif dot for editorial lift.
   Small typographic gesture, big brand signal. */
.hero__title-dot {
  display: inline-block;
  color: #fff;
  margin-left: 0.02em;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
}

/* Thin rule between title and subtitle: an architectural hairline. */
.hero__rule {
  width: 64px;
  height: 1px;
  background: rgba(255, 255, 255, 0.55);
  margin: 0.2rem 0 0;
}

/* Subtitle: light weight, mixed case, generous line-height.
   The second-strongest layer — needs to be readable, not shouty. */
.hero__sub {
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 0.88rem + 0.3vw, 1.18rem);
  /* slightly larger, more presence */
  font-weight: var(--fw-light);
  /* 300 */
  letter-spacing: var(--tracking-tight);
  /* -0.005em — was -0.005em via token, but old hard-coded was -0.03em */
  line-height: 1.55;
  color: #fff;
  text-transform: none;
  text-align: center;
  max-width: 42ch;
  margin: 0;
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.75), 0 0 10px rgba(0, 0, 0, 0.5);
}

/* CTA: same letter-spacing weight class as nav — uniform with the
   other small type in the page. Outlined, fills on hover. */
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 2.4rem;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: transparent;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: var(--fw-medium);
  /* 500 */
  letter-spacing: var(--tracking-label);
  /* 0.08em — was 0.22em (too wide, shouty) */
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--duration) var(--ease-out);
  margin-top: 0.2rem;
}

.hero__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  transform: translateY(101%);
  transition: transform var(--duration) var(--ease-out);
  z-index: -1;
}

.hero__cta:hover {
  color: var(--bg);
  border-color: #fff;
}

.hero__cta:hover::before {
  transform: translateY(0);
}

.hero__cta-label {
  display: inline-block;
  transition: transform var(--duration) var(--ease-out);
}

.hero__cta:hover .hero__cta-label {
  transform: translateX(-2px);
}

.hero__cta-arrow {
  display: inline-flex;
  align-items: center;
  transition: transform var(--duration) var(--ease-out);
}

.hero__cta:hover .hero__cta-arrow {
  transform: translateX(3px);
}

/* Bottom corner: small architectural label, mono, tracked. */
.hero__meta-bottom {
  position: absolute;
  bottom: 1.6rem;
  left: var(--hero-pad);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-widest);
  /* 0.32em — was 0.28em, refined */
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

.hero__meta-sep {
  opacity: 0.5;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.85rem;
  background: var(--accent);
  color: var(--bg);
  font-size: 0.88rem;
  font-weight: var(--fw-medium);
  /* was 500 → medium (500, semantic) */
  letter-spacing: var(--tracking-label);
  /* 0.08em — was 0.04em (too tight, lost elegance) */
  text-transform: uppercase;
  /* was implicit lowercase, now explicit caps to match other CTAs */
  border-radius: 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 12px 32px -8px rgba(201, 168, 117, 0.4);
}

.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--accent-bright), var(--accent));
  z-index: -1;
  opacity: 0;
  transition: opacity var(--duration) var(--ease-out);
}

.btn-primary:hover {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 18px 40px -8px rgba(201, 168, 117, 0.55);
}

.btn-primary:hover::before {
  opacity: 1;
}

.btn-primary__arrow {
  transition: transform var(--duration) var(--ease-out);
}

.btn-primary:hover .btn-primary__arrow {
  transform: translateX(4px);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  padding: 1rem 0;
  position: relative;
  transition: color var(--duration) var(--ease-out);
}

.btn-ghost::after {
  content: '';
  position: absolute;
  bottom: 0.85rem;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  transition: transform var(--duration-slow) var(--ease-out);
}

.btn-ghost:hover {
  color: var(--text);
}

.btn-ghost:hover::after {
  transform: scaleX(0.3);
}

.hero__meta {
  position: absolute;
  bottom: 3rem;
  right: var(--gutter);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-end;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-widest);
  /* 0.32em — was hard-coded 0.12em, refined */
  color: var(--text-dim);
  text-transform: uppercase;
}

.hero__meta-dot {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent);
}

.hero__meta-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 0;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(0.85);
  }
}

/* ----- Section Base ----- */
.section {
  padding: var(--space-9) 0;
  position: relative;
}

.section__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: var(--space-7);
}

@media (min-width: 900px) {
  .section__head {
    grid-template-columns: 1.4fr 1fr;
    align-items: end;
    gap: 5rem;
    /* was 4rem, more air between title and intro */
  }

  .section__head .section__intro {
    position: relative;
    top: 0.35rem;
    /* visual bottom alignment adjustment for line-height differences */
  }
}

.section__title {
  font-family: var(--font-sans);
  font-size: clamp(3.2rem, 2.2rem + 4.5vw, 6.2rem);
  font-weight: var(--fw-bold);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-transform: none;
  color: var(--text);
  max-width: 22ch;
  text-wrap: balance;
}

/* Cormorant italic accent words inside section titles — handled by the
   global `h1 em, h2 em, h3 em, h4 em` rule above. The serif italic
   creates editorial lift without the parent having to change weight. */

.section__intro {
  max-width: 50ch;
  /* was 45ch */
  color: var(--text-muted);
  /* was --text — softer */
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  line-height: var(--lh-lead);
  /* 1.45 — was 1.7, tighter for modernity */
  letter-spacing: var(--tracking-tight);
  /* -0.005em */
  text-transform: none;
  text-wrap: pretty;
  margin-top: 0.4rem;
}

/* Section head "breathing entry" — the gap between the eyebrow label
   and the title below. Gives each section a clear "punctuation pause"
   before the headline arrives. Widened from 2.5rem to 3.25rem for more
   architectural pause between the small label and the big title. */
.section__head-eyebrow {
  display: inline-block;
  margin-bottom: 3.25rem;
}

/* ----- Featured Projects Showcase (list + viewer) ----- */
.projects-showcase {
  /* Section spans the full viewport for the showcase stage */
  padding-bottom: 0;
}

.projects-showcase .section__head {
  margin-bottom: var(--space-5);
}

/* Left-aligned section header (used by Featured Projects & Systems) */
.projects-showcase .section__head,
.systems-showcase .section__head {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.section__head--centered {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 1.4rem;
}

.section__head--centered>div {
  max-width: none;
  margin-inline: 0;
}

/* Shared left-aligned section title */
.projects-showcase .section__title,
.systems-showcase .section__title {
  font-size: clamp(2.6rem, 1.8rem + 3.8vw, 6.2rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: var(--fw-bold);
  text-transform: none;
  max-width: 25ch;
  margin-inline: 0;
  text-align: left;
  word-break: normal;
  overflow-wrap: normal;
}

.projects-showcase .section__title span,
.systems-showcase .section__title span {
  display: inline-block;
  white-space: nowrap;
}

/* Full-bleed stage — escapes the .container width */
.projects-stage {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: var(--space-2);
  scroll-margin-top: 80px;
}

/* ---------- Viewer: stacked image-on-top + tab-strip-below ---------- */
.projects-viewer {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
}

/* Image block fills the width; tall enough to contain the info panel overlay */
.projects-viewer__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 78vh;
  min-height: 520px;
  overflow: hidden;
}

@media (max-width: 899px) {
  .projects-viewer__media {
    aspect-ratio: 4 / 5;
    max-height: none;
    min-height: 50vh;
  }
}

.projects-viewer__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s var(--ease-out);
  pointer-events: none;
}

.projects-viewer__slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.projects-viewer__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.92) contrast(1.02);
  transform: scale(1.04);
  transition: transform 6s var(--ease-out);
}

.projects-viewer__slide.is-active img {
  transform: scale(1.08);
}

.projects-viewer__veil {
  position: absolute;
  inset: 0;
  background:
    /* Left-to-right gradient: lighter shadow so photos stay bright and vibrant */
    linear-gradient(90deg,
      rgba(10, 10, 12, 0.45) 0%,
      rgba(10, 10, 12, 0.25) 22%,
      rgba(10, 10, 12, 0.08) 48%,
      transparent 72%),
    /* Bottom-up gradient for the panel area */
    linear-gradient(180deg,
      rgba(10, 10, 12, 0) 35%,
      rgba(10, 10, 12, 0.22) 68%,
      rgba(10, 10, 12, 0.48) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ---------- Info panel overlaid on image (bottom-left, contained inside media) ---------- */
.projects-viewer__panel {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  right: auto;
  width: min(560px, 55%);
  padding: 2rem 2.5rem;
  color: var(--text);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  max-height: 100%;
  overflow: hidden;
}

@media (min-width: 1100px) {
  .projects-viewer__panel {
    padding: 2.4rem 3rem;
  }
}

.projects-viewer__panel-inner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.projects-viewer__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--accent);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}

.projects-viewer__eyebrow::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--accent);
}

.projects-viewer__title {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: var(--fw-extralight);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tighter);
  text-transform: none;
  color: var(--text);
  margin: 0;
}

.projects-viewer__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem 1.4rem;
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  padding-top: 0.9rem;
}

.projects-viewer__meta>div {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.projects-viewer__meta dt {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-wide);
  color: rgba(244, 241, 234, 0.55);
  text-transform: uppercase;
  line-height: 1.4;
}

.projects-viewer__meta dd {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  color: var(--text);
  letter-spacing: var(--tracking-normal);
}

.projects-viewer__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  align-self: flex-start;
  margin-top: 0.5rem;
  padding: 0.7rem 1.25rem;
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  transition: background var(--duration) var(--ease-out), color var(--duration) var(--ease-out), transform var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
}

.projects-viewer__cta:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  transform: translateX(2px);
}

.projects-viewer__cta-arrow {
  transition: transform var(--duration) var(--ease-out);
}

.projects-viewer__cta:hover .projects-viewer__cta-arrow {
  transform: translateX(3px);
}

.projects-viewer__panel.is-swapping {
  opacity: 0.35;
  transform: translateY(6px);
}

.projects-viewer__panel.is-swapping>* {
  transition: none;
}

/* ---------- Horizontal tab strip (BELOW the image, iOS 26 glass style) ---------- */
.projects-list {
  /* Outer frosted glass container — alpha lowered so background image shows through */
  margin: 1.25rem 1.5rem 1.5rem;
  padding: 0.25rem;
  background: rgba(20, 18, 16, 0.16);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 24px 60px -20px rgba(0, 0, 0, 0.55),
    0 8px 22px -8px rgba(0, 0, 0, 0.4);
}

.projects-list__items {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
  border-radius: 0;
  overflow: hidden;
}

.projects-list__item {
  flex: 0 0 16.6666%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  position: relative;
}

.projects-list__item:last-child {
  border-right: none;
}

/* Active state: gold top hairline + tinted background */
.projects-list__item.is-active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  z-index: 2;
}

.projects-list__item.is-active .projects-list__btn {
  background: rgba(201, 168, 117, 0.12);
  color: var(--text);
}

.projects-list__btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  width: 100%;
  padding: 1.5rem 1.4rem;
  background: transparent;
  border: none;
  color: var(--text-muted);
  text-align: left;
  cursor: pointer;
  transition: background var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
  position: relative;
  height: 100%;
  text-transform: none;
}

.projects-list__btn:hover {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
}

.projects-list__btn:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}

.projects-list__index {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--text-faint);
  text-transform: uppercase;
  line-height: 1.4;
  transition: color var(--duration) var(--ease-out);
}

.projects-list__item.is-active .projects-list__index {
  color: var(--accent);
}

.projects-list__btn:hover .projects-list__index {
  color: var(--accent);
}

.projects-list__name {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: var(--tracking-label);
  text-transform: none;
  color: inherit;
}

.projects-list__category {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--text-dim);
  text-transform: none;
  line-height: 1.4;
  margin-top: auto;
}

.projects-list__item.is-active .projects-list__category {
  color: var(--text-muted);
}

/* ---------- Tablet + Mobile: horizontal layout below image, match mobile layout style ---------- */
@media (max-width: 899px) {

  /* Anchor the positioned elements */
  .projects-viewer {
    position: relative;
  }

  /* Image is capped at 75vh so the section stays above the fold */
  .projects-viewer__media {
    aspect-ratio: auto;
    width: 100%;
    height: 75vh;
    min-height: 520px;
    max-height: 75vh;
  }

  /* Softer veil so photo brightness is preserved while text stays legible */
  .projects-viewer__veil {
    background:
      linear-gradient(180deg,
        transparent 0%,
        rgba(10, 10, 12, 0.04) 35%,
        rgba(10, 10, 12, 0.18) 65%,
        rgba(10, 10, 12, 0.38) 100%),
      linear-gradient(90deg,
        rgba(10, 10, 12, 0.15) 0%,
        rgba(10, 10, 12, 0.05) 30%,
        transparent 60%,
        transparent 100%);
  }

  .projects-viewer__slide img {
    filter: none;
  }

  /* Description panel: moved to bottom-left corner of the image like desktop/mobile */
  .projects-viewer__panel {
    top: auto;
    bottom: var(--gutter);
    left: var(--gutter);
    right: auto;
    width: 85%;
    max-width: 360px;
    padding: 0;
  }

  .projects-viewer__panel-inner {
    gap: 0.55rem;
  }

  .projects-viewer__eyebrow {
    font-size: 0.6rem;
  }

  .projects-viewer__title {
    font-size: clamp(1.35rem, 1.1rem + 1.6vw, 1.8rem);
    line-height: 1.05;
  }

  .projects-viewer__meta {
    gap: 0.45rem 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
  }

  .projects-viewer__meta dt {
    font-size: 0.55rem;
    letter-spacing: 0.16em;
  }

  .projects-viewer__meta dd {
    font-size: 0.78rem;
  }

  .projects-viewer__cta {
    margin-top: 0.45rem;
    padding: 0.5rem 0.95rem;
    font-size: 0.64rem;
  }

  /* Projects list: static layout below the image container */
  .projects-list {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    width: auto;
    margin: 1.25rem var(--gutter) 1.5rem;
    max-width: none;
  }

  /* Flex/Grid layout: automatically fit any number of items smoothly */
  .projects-list__items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.45rem;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }

  .projects-list__item {
    border-radius: 0;
    overflow: hidden;
    border-right: none;
    position: relative;
    /* ensure absolute positioning works for ::before */
  }

  /* Button displays vertically (index on top, name below) like phone style */
  .projects-list__btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.35rem;
    padding: 0.85rem 0.95rem;
    min-height: auto;
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    transition: background var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
    width: 100%;
    border: none;
    cursor: pointer;
    text-align: left;
  }

  .projects-list__btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
  }

  /* Number — compact, mono */
  .projects-list__index {
    min-width: auto;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    color: inherit;
    font-weight: var(--fw-medium);
  }

  /* Product name — italic serif to match the desktop + Projects aesthetic */
  .projects-list__name {
    display: inline-block;
    font-size: 0.88rem;
    font-style: italic;
    font-weight: var(--fw-regular);
    letter-spacing: -0.01em;
    color: inherit;
    line-height: 1.15;
    flex: none;
    text-align: left;
  }

  /* Hide the category subtitle */
  .projects-list__category {
    display: none;
  }
}


/* ---------- Phone (portrait): horizontal layout below image, compact meta ---------- */
@media (max-width: 600px) {

  /* Description panel: moved to bottom-left like desktop */
  .projects-viewer__panel {
    top: auto;
    bottom: var(--gutter);
    left: var(--gutter);
    right: auto;
    width: 85%;
    max-width: 290px;
    padding: 0;
  }

  .projects-viewer__panel-inner {
    gap: 0.4rem;
  }

  .projects-viewer__title {
    font-size: 1.25rem;
  }

  /* Reduce metadata column gap and panel size */
  .projects-viewer__meta {
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem 0.5rem;
    padding-top: 0.4rem;
  }

  .projects-viewer__meta dt {
    font-size: 0.52rem;
    letter-spacing: 0.12em;
  }

  .projects-viewer__meta dd {
    font-size: 0.68rem;
  }

  .projects-viewer__cta {
    margin-top: 0.25rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.58rem;
  }

  /* Projects list: static layout below the image container */
  .projects-list {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    width: 100%;
    margin: 0.8rem 0 0.25rem;
    max-width: none;
    border-left: none;
    border-right: none;
    padding: 0;
  }

  /* Grid layout: 2 rows, 3 items per row */
  .projects-list__items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.3rem;
    padding: 0;
  }

  .projects-list__item {
    border-right: none;
  }

  /* Button displays vertically (index on top, name below) like desktop */
  .projects-list__btn {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.2rem;
    padding: 0.6rem 0.5rem;
    min-height: auto;
  }

  .projects-list__index {
    min-width: auto;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
  }

  .projects-list__name {
    font-size: 0.8rem;
    text-align: left;
  }
}

/* ==========================================================================
   Systems Showcase — editorial catalog strip below a wide image viewer.
   Visually distinct from Featured Projects (which uses a left sidebar).
   ========================================================================== */

.systems-showcase {
  padding-top: 7rem;
  padding-bottom: 6.5rem !important;
}

@media (min-width: 601px) and (max-width: 899px) {
  .systems-showcase {
    padding-top: 2rem;
    padding-bottom: 3rem !important;
  }
}

@media (max-width: 600px) {
  .systems-showcase {
    padding-top: 1rem;
    padding-bottom: 2rem !important;
  }
}

.systems-showcase .section__head {
  margin-bottom: var(--space-5);
}



/* ---------- Stage (full-bleed) ---------- */
.systems-stage {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: var(--space-2);
}

/* ---------- Viewer: stacked image-on-top + tab-strip-below ---------- */
.systems-viewer {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
}

/* Image block fills the width; tall enough to contain the info panel overlay */
.systems-viewer__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 78vh;
  min-height: 520px;
  overflow: hidden;
}

@media (max-width: 899px) {
  .systems-viewer__media {
    aspect-ratio: 4 / 5;
    max-height: none;
    min-height: 50vh;
  }
}

.systems-viewer__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s var(--ease-out);
  pointer-events: none;
}

.systems-viewer__slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.systems-viewer__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.92) contrast(1.02);
  transform: scale(1.04);
  transition: transform 6s var(--ease-out);
}

.systems-viewer__slide.is-active img {
  transform: scale(1.08);
}

.systems-viewer__veil {
  position: absolute;
  inset: 0;
  background:
    /* Right-to-left gradient: darker on the right so the info panel reads */
    linear-gradient(270deg,
      rgba(10, 10, 12, 0.82) 0%,
      rgba(10, 10, 12, 0.6) 22%,
      rgba(10, 10, 12, 0.25) 48%,
      transparent 72%),
    /* Bottom-up gradient for the panel area */
    linear-gradient(180deg,
      rgba(10, 10, 12, 0) 35%,
      rgba(10, 10, 12, 0.4) 68%,
      rgba(10, 10, 12, 0.82) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ---------- Info panel overlaid on image (bottom-right, contained inside media) ---------- */
.systems-viewer__panel {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: auto;
  right: 0;
  width: min(560px, 55%);
  padding: 2rem 2.5rem;
  color: var(--text);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  max-height: 100%;
  overflow: hidden;
}

@media (min-width: 1100px) {
  .systems-viewer__panel {
    padding: 2.4rem 3rem;
  }
}

.systems-viewer__panel-inner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.systems-viewer__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  /* was fw-semibold (600) → medium (500) */
  letter-spacing: var(--tracking-wide);
  /* 0.18em — was tracking-widest (0.32em) */
  color: var(--accent);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  line-height: 1.4;
}

.systems-viewer__eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--accent);
  flex-shrink: 0;
}

.systems-viewer__title {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: var(--fw-extralight);
  /* 200 — already light, kept */
  line-height: var(--lh-heading);
  /* 1.12 */
  letter-spacing: var(--tracking-tighter);
  /* -0.025em */
  text-transform: none;
  color: var(--text);
  text-wrap: balance;
  margin: 0;
}


.systems-viewer__desc {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-light);
  color: var(--text);
  line-height: var(--lh-body);
  max-width: 46ch;
}

.systems-viewer__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0;
  padding: 0.6rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.systems-viewer__features li {
  position: relative;
  padding-left: 1.1rem;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  letter-spacing: var(--tracking-normal);
  color: var(--text);
  line-height: 1.5;
}

.systems-viewer__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 12px;
  height: 1px;
  background: var(--accent);
}

.systems-viewer__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  align-self: flex-start;
  margin-top: 0.4rem;
  padding: 0.7rem 1.25rem;
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  /* 0.08em — was tracking-wide (0.18em) */
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  /* was fw-semibold (600) → medium (500) */
  transition: background var(--duration) var(--ease-out), color var(--duration) var(--ease-out), transform var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
}

.systems-viewer__cta:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  transform: translateX(2px);
}

.systems-viewer__cta-arrow {
  transition: transform var(--duration) var(--ease-out);
}

.systems-viewer__cta:hover .systems-viewer__cta-arrow {
  transform: translateX(3px);
}

.systems-viewer__panel.is-swapping {
  opacity: 0;
  transform: translateY(8px);
}

.systems-viewer__panel.is-swapping>* {
  transition: none;
}

/* ---------- Horizontal tab strip (BELOW the image, iOS 26 glass style) ---------- */
.systems-list {
  /* Outer frosted glass container — alpha lowered so background image shows through */
  margin: 1.25rem 1.5rem 1.5rem;
  padding: 0.25rem;
  background: rgba(20, 18, 16, 0.16);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 24px 60px -20px rgba(0, 0, 0, 0.55),
    0 8px 22px -8px rgba(0, 0, 0, 0.4);
}

.systems-list__items {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin: 0;
  padding: 0;
  border-radius: 0;
  overflow: hidden;
}

.systems-list__item {
  margin: 0;
  padding: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  position: relative;
}

.systems-list__item:last-child {
  border-right: none;
}

/* Active state: gold top hairline + tinted background */
.systems-list__item.is-active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  z-index: 2;
}

.systems-list__item.is-active .systems-list__btn {
  background: rgba(201, 168, 117, 0.12);
  color: var(--text);
}

.systems-list__btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  width: 100%;
  padding: 1.5rem 1.4rem;
  background: transparent;
  border: none;
  color: var(--text-muted);
  text-align: left;
  cursor: pointer;
  transition: background var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
  position: relative;
  height: 100%;
  text-transform: none;
  /* Mixed Case */
}

.systems-list__btn:hover {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
}

.systems-list__btn:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}

.systems-list__index {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--text-faint);
  text-transform: uppercase;
  line-height: 1.4;
  transition: color var(--duration) var(--ease-out);
}

.systems-list__item.is-active .systems-list__index {
  color: var(--accent);
}

.systems-list__btn:hover .systems-list__index {
  color: var(--accent);
}

.systems-list__name {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  /* was fw-semibold (600) → medium (500) */
  line-height: 1.2;
  letter-spacing: var(--tracking-label);
  /* 0.08em — was tracking-wide (0.18em) */
  text-transform: none;
  /* was uppercase → Mixed Case */
  color: inherit;
}


.systems-list__category {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  /* was fw-semibold (600) → medium (500) */
  letter-spacing: var(--tracking-wide);
  /* 0.18em — kept for category label */
  color: var(--text-dim);
  text-transform: none;
  /* was uppercase → Mixed Case */
  line-height: 1.4;
  margin-top: auto;
}

.systems-list__item.is-active .systems-list__category {
  color: var(--text-muted);
}

/* ---------- Tablet + Mobile: horizontal layout below image, match mobile layout style ---------- */
@media (max-width: 899px) {

  /* Anchor the positioned elements */
  .systems-viewer {
    position: relative;
  }

  /* Image is capped at 75vh so the section stays above the fold */
  .systems-viewer__media {
    aspect-ratio: auto;
    width: 100%;
    height: 75vh;
    min-height: 520px;
    max-height: 75vh;
  }

  /* Softer veil so photo brightness is preserved while floating UI reads cleanly */
  .systems-viewer__veil {
    background:
      linear-gradient(180deg,
        transparent 0%,
        rgba(10, 10, 12, 0.06) 35%,
        rgba(10, 10, 12, 0.22) 65%,
        rgba(10, 10, 12, 0.42) 100%),
      linear-gradient(270deg,
        rgba(10, 10, 12, 0.22) 0%,
        rgba(10, 10, 12, 0.06) 30%,
        transparent 60%,
        transparent 100%);
  }

  .systems-viewer__slide img {
    filter: none;
  }

  /* Description panel: moved to bottom-right corner of the image, keeping systems panel on right */
  .systems-viewer__panel {
    top: auto;
    bottom: var(--gutter);
    left: auto;
    right: var(--gutter);
    width: 85%;
    max-width: 360px;
    padding: 0;
  }

  .systems-viewer__panel-inner {
    gap: 0.55rem;
  }

  .systems-viewer__eyebrow {
    font-size: 0.6rem;
  }

  .systems-viewer__title {
    font-size: clamp(1.35rem, 1.1rem + 1.6vw, 1.8rem);
    line-height: 1.05;
  }

  .systems-viewer__desc {
    font-size: 0.85rem;
    line-height: 1.5;
    max-width: 38ch;
    opacity: 0.9;
  }

  .systems-viewer__features {
    display: none;
  }

  .systems-viewer__cta {
    margin-top: 0.45rem;
    padding: 0.5rem 0.95rem;
    font-size: 0.64rem;
  }

  /* Systems list: static layout below the image container */
  .systems-list {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    width: auto;
    margin: 1.25rem var(--gutter) 1.5rem;
    max-width: none;
  }

  /* Grid layout: 1 row of 6 if space is sufficient; 2 rows of 3 if width < 680px */
  .systems-list__items {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.45rem;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }

  @media (max-width: 679px) {
    .systems-list__items {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .systems-list__item {
    border-radius: 0;
    overflow: hidden;
    border-right: none;
    position: relative;
    /* ensure absolute positioning works for ::before */
  }

  /* Button displays vertically (index on top, name below) like phone style */
  .systems-list__btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.35rem;
    padding: 0.85rem 0.95rem;
    min-height: auto;
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    transition: background var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
    width: 100%;
    border: none;
    cursor: pointer;
    text-align: left;
  }

  .systems-list__btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
  }

  /* Active state top accent + background tint */
  .systems-list__item.is-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
    z-index: 2;
  }

  .systems-list__item.is-active .systems-list__btn {
    background: rgba(201, 168, 117, 0.12);
    color: var(--text);
  }

  /* Number — compact, mono */
  .systems-list__index {
    min-width: auto;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    color: inherit;
    font-weight: var(--fw-medium);
  }

  .systems-list__item.is-active .systems-list__index {
    color: var(--accent);
  }

  .systems-list__btn:hover .systems-list__index {
    color: var(--accent);
  }

  /* Product name — italic serif to match the desktop + Projects aesthetic */
  .systems-list__name {
    display: inline-block;
    font-size: 0.88rem;
    font-style: italic;
    font-weight: var(--fw-regular);
    letter-spacing: -0.01em;
    color: inherit;
    line-height: 1.15;
    flex: none;
    text-align: left;
  }

  /* Hide the category subtitle */
  .systems-list__category {
    display: none;
  }
}

/* ---------- Phone (portrait): horizontal layout below image, compact meta ---------- */
@media (max-width: 600px) {

  /* Description panel: moved to bottom-right */
  .systems-viewer__panel {
    top: auto;
    bottom: var(--gutter);
    left: auto;
    right: var(--gutter);
    width: 85%;
    max-width: 290px;
    padding: 0;
  }

  .systems-viewer__panel-inner {
    gap: 0.4rem;
  }

  .systems-viewer__title {
    font-size: 1.25rem;
  }

  .systems-viewer__cta {
    margin-top: 0.25rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.58rem;
  }

  /* Systems list: static layout below the image container */
  .systems-list {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    width: 100%;
    margin: 1rem 0 1.5rem;
    max-width: none;
    border-left: none;
    border-right: none;
    padding: 0;
  }

  /* Grid layout: 2 rows, 3 items per row */
  .systems-list__items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.3rem;
    padding: 0;
  }

  .systems-list__item {
    border-right: none;
  }

  /* Button displays vertically (index on top, name below) */
  .systems-list__btn {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.2rem;
    padding: 0.6rem 0.5rem;
    min-height: auto;
  }

  .systems-list__index {
    min-width: auto;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
  }

  .systems-list__name {
    font-size: 0.8rem;
    text-align: left;
  }
}

/* ----- About Section ----- */
#about {
  padding-bottom: 0;
}

.about {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 900px) {
  .about {
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: mid;
  }
}

.about__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid var(--border);
}

.about__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85);
  transition: filter var(--duration-slow) var(--ease-out);
}

.about__media:hover img {
  filter: saturate(1);
}

.about__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(10, 10, 12, 0.4) 100%);
  pointer-events: none;
}

.about__media-tag {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-wide);
  /* 0.18em — was hard-coded 0.18em */
  text-transform: uppercase;
  color: var(--text);
  display: flex;
  justify-content: space-between;
}

.about__media-tag span:last-child {
  color: var(--accent);
}

.about__content {
  position: relative;
}

.about__content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.about__lead {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: var(--fw-light);
  /* 300 — adjusted to light */
  line-height: var(--lh-heading);
  /* 1.12 */
  color: var(--text);
  letter-spacing: var(--tracking-tighter);
  /* -0.025em */
  text-transform: none;
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
  max-width: 24ch;
  /* was 22ch — slightly wider for mixed case */
  text-wrap: balance;
}


.about__body {
  color: var(--text-muted);
  font-size: var(--fs-base);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  max-width: 52ch;
  margin: 0;
  letter-spacing: var(--tracking-normal);
  text-transform: none;
  text-wrap: pretty;
}

.about__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-top: 2rem;
}

.stat {
  padding: 2rem 0;
  text-align: left;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.stat__value {
  font-family: var(--font-sans);
  font-size: clamp(2.8rem, 2rem + 3.5vw, 3.6rem);
  font-weight: var(--fw-thin);
  /* 100 — kept */
  line-height: 1.0;
  letter-spacing: var(--tracking-display);
  /* was tracking-tighter (-0.025em) → -0.02em, less tight at display size */
  color: var(--accent);
  text-transform: none;
  /* Numbers in architecture — tabular figures keep them visually
     aligned across the three stats, even when glyph widths differ. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

.stat__label {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  /* was fw-semibold (600) → medium (500) */
  letter-spacing: var(--tracking-wide);
  /* 0.18em — was 0.2em, refined */
  color: var(--text-muted);
  text-transform: uppercase;
}


/* ----- Testimonials ----- */
.testimonials {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 3.5rem;
}

@media (min-width: 640px) {
  .testimonials {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px) {
  .testimonials {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
  }
}

/* Gold-framed card: a glazed aluminium panel */
.testimonial {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: 2.5rem 2rem 2.25rem;
  background:
    linear-gradient(158deg, var(--bg-card) 0%, var(--bg-elevated) 100%);
  border: 1px solid var(--border-accent);
  overflow: hidden;
  transition:
    transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1),
    border-color 0.55s ease,
    box-shadow 0.55s ease;
}

/* Inset hairline — the inner frame line of the panel */
.testimonial::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(201, 168, 117, 0.14);
  pointer-events: none;
  transition: inset 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.55s ease;
}

/* Top light-bar that sweeps in on hover */
.testimonial::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-bright), transparent);
  opacity: 0.45;
  transition: opacity 0.55s ease;
}

.testimonial:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow:
    0 26px 60px -26px rgba(0, 0, 0, 0.85),
    0 0 46px -14px var(--accent-glow);
}

.testimonial:hover::before {
  inset: 11px;
  border-color: var(--border-accent);
}

.testimonial:hover::after {
  opacity: 1;
}

/* Oversized serif quotation mark, sits as a gold watermark */
.testimonial__mark {
  position: absolute;
  top: 0.35rem;
  right: 1.1rem;
  z-index: -1;
  font-family: var(--font-serif);
  font-size: 8rem;
  line-height: 1;
  font-weight: var(--fw-bold);
  color: var(--accent);
  opacity: 0.13;
  pointer-events: none;
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.testimonial:hover .testimonial__mark {
  opacity: 0.22;
  transform: translateY(2px);
}

.testimonial__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.testimonial__idx {
  color: var(--accent);
}

.testimonial__stars {
  display: inline-flex;
  gap: 0.3rem;
  flex-shrink: 0;
}

.testimonial__stars span {
  width: 0.72rem;
  height: 0.72rem;
  background: linear-gradient(160deg, var(--accent-bright), var(--accent-deep));
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* The quote — sans-serif (Montserrat), clean, compact vertical rhythm */
.testimonial__quote {
  flex: 1 1 auto;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: clamp(1.18rem, 1.02rem + 0.55vw, 1.4rem);
  line-height: 1.5;
  letter-spacing: var(--tracking-normal);
  color: var(--text);
  text-transform: none;
  margin: 0 0 1.75rem;
  text-wrap: pretty;
}

.testimonial__attribution {
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.testimonial__author {
  color: var(--accent-bright);
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: none;
}

.testimonial__role {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--text-dim);
  text-transform: none;
  line-height: 1.4;
}

/* ----- Process Section ----- */
#process {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.process {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  margin-top: var(--space-4);
}

@media (min-width: 900px) {
  .process {
    grid-template-columns: 1.2fr 1fr;
    gap: 5rem;
    align-items: stretch;
  }
}

.process__directory {
  display: flex;
  flex-direction: column;
}

.process__step-btn {
  display: flex;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 1.75rem 0;
  text-align: left;
  color: var(--text-muted);
  cursor: pointer;
  outline: none;
  transition: color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
}

.process__step-btn.is-active,
.process__step-btn:hover {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.process__step-num {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-dim);
  width: 3.5rem;
  transition: color var(--duration) var(--ease-out);
}

.process__step-btn.is-active .process__step-num,
.process__step-btn:hover .process__step-num {
  color: var(--accent);
}

.process__step-title {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: var(--fw-light);
  letter-spacing: var(--tracking-tight);
  flex-grow: 1;
}

.process__step-arrow {
  font-size: var(--fs-lg);
  color: var(--accent);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
}

.process__step-btn.is-active .process__step-arrow,
.process__step-btn:hover .process__step-arrow {
  opacity: 1;
  transform: translateX(0);
}

.process__display {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  padding: var(--space-4);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.process__panel-wrapper {
  position: relative;
  width: 100%;
}

.process__panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(15px);
  transition: opacity var(--duration) var(--ease-out), transform var(--duration) var(--ease-out), visibility var(--duration) var(--ease-out);
}

.process__panel.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.process__panel-num {
  position: absolute;
  right: -0.5rem;
  bottom: -2rem;
  font-family: var(--font-mono);
  font-size: clamp(6rem, 4rem + 8vw, 10rem);
  font-weight: var(--fw-black);
  color: rgba(201, 168, 117, 0.03);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.process__panel-title {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  color: var(--accent);
  margin-bottom: var(--space-2);
  letter-spacing: var(--tracking-tight);
}

.process__panel-desc {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  color: var(--text-muted);
  max-width: 45ch;
  margin: 0;
}

@media (max-width: 899px) {
  .process__step-arrow {
    display: inline-block;
  }
  
  .process__step-btn.is-active .process__step-arrow {
    transform: rotate(90deg) !important;
  }

  .process__step-btn.is-active {
    border-bottom-color: transparent;
  }

  .process__panel {
    position: relative !important;
    inset: auto !important;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    border-bottom: 1px solid transparent;
    transition: max-height 0.4s ease, opacity 0.4s ease, transform 0.4s ease, padding 0.4s ease, visibility 0.4s ease, border-color 0.4s ease;
    padding: 0 0 0 3.5rem;
  }

  .process__panel.is-active {
    max-height: 500px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    padding: 0.75rem 0 1.75rem 3.5rem;
    border-bottom-color: var(--accent);
  }

  .process__panel[hidden] {
    display: block !important;
  }

  .process__panel-title,
  .process__panel-num {
    display: none !important;
  }
}

/* ----- Contact Section ----- */
#testimonials {
  padding-bottom: var(--space-6);
}

#contact {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: clamp(2rem, 4vw, 4.5rem);
  position: relative;
  overflow: hidden;
}

@media (min-width: 900px) {
  .contact {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 4rem;
  }
}

.contact__intro {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.contact__lead {
  font-family: var(--font-sans);
  font-size: clamp(2.4rem, 1.8rem + 2.5vw, 4.2rem);
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--text);
  margin: 0;
  max-width: 24ch;
  text-wrap: balance;
  text-align: left;
}


.contact__desc {
  color: var(--text-muted);
  font-size: var(--fs-base);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  max-width: 44ch;
  margin: 0;
  text-wrap: pretty;
}

.contact__details {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding-top: 1.6rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--border);
}

.contact__detail {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  letter-spacing: var(--tracking-normal);
  color: var(--text);
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 1rem;
  align-items: baseline;
}

.contact__detail-label {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  /* was fw-semibold (600) → medium (500) */
  letter-spacing: var(--tracking-label);
  /* 0.08em — was tracking-wide (0.18em) */
  color: var(--text-dim);
  text-transform: uppercase;
  line-height: 1.4;
}

.contact__detail-value {
  color: var(--text);
}

.contact__detail-value a:hover {
  color: var(--accent);
}

/* ============================================================ */
/* CONTACT PAGE REFINED LUXURY DESIGN SYSTEM */
/* ============================================================ */
.contact-hero {
  position: relative;
  width: 100%;
  min-height: 52vh;
  min-height: 52dvh;
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(3.5rem, 6vw, 5rem);
  padding-top: clamp(8rem, 14vh, 10.5rem);
  box-sizing: border-box;
  overflow: hidden;
}

.contact-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.contact-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.contact-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 12, 0.4) 0%,
    rgba(10, 10, 12, 0.65) 55%,
    var(--bg, #0a0a0c) 100%
  );
  pointer-events: none;
}

.contact-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

.contact-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: end;
}

@media (min-width: 860px) {
  .contact-hero__grid {
    grid-template-columns: 1.3fr 0.9fr;
    gap: 3rem;
  }
}

.contact-hero__eyebrow {
  margin-bottom: 0.8rem;
  display: block;
}

.contact-hero__title {
  margin: 0;
  line-height: 1.05;
}

.contact-hero__sub {
  color: var(--text-muted);
  font-size: var(--fs-base, 1rem);
  font-weight: var(--fw-light);
  line-height: 1.7;
  margin: 0;
  max-width: 48ch;
}

/* Quick Info 3-Card Row */
.contact-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 3.5rem;
}

@media (min-width: 768px) {
  .contact-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.contact-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  padding: 2rem 1.8rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.contact-card__icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 4px;
  background: rgba(201, 168, 117, 0.08);
  color: var(--accent-bright, #48cae4);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  border: 1px solid rgba(201, 168, 117, 0.18);
}

.contact-card__icon-wrap svg {
  width: 20px;
  height: 20px;
}

.contact-card__title {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-bright, #48cae4);
  margin: 0 0 0.85rem;
}

.contact-card__body {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.6;
  font-style: normal;
}

.contact-card__item {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  margin-bottom: 0.4rem;
}

.contact-card__item:last-child {
  margin-bottom: 0;
}

.contact-card__item .ci-key {
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  min-width: 16px;
}

.contact-card__item a {
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact-card__item a:hover {
  color: var(--accent-bright, #48cae4);
}

.contact-social-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

.contact-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  border: 1px solid var(--border);
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
  transition: all 0.25s ease;
}

.contact-social-btn:hover {
  color: var(--accent-bright, #48cae4);
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}

.contact-social-btn svg {
  width: 17px;
  height: 17px;
}

/* Contact Main 2-Col Split */
.contact-main-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: stretch;
  margin-bottom: 4rem;
}

@media (min-width: 960px) {
  .contact-main-grid {
    grid-template-columns: 0.8fr 1.2fr;
    gap: 3.5rem;
  }
}

.contact-side-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  padding: clamp(2rem, 3.5vw, 3rem);
  position: relative;
  overflow: hidden;
}

.contact-side-panel__lead {
  font-family: var(--font-sans);
  font-size: clamp(1.8rem, 2.2vw, 2.6rem);
  font-weight: var(--fw-semibold);
  line-height: 1.15;
  color: var(--text);
  margin: 0 0 1.2rem;
}

.contact-side-panel__desc {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0 0 2rem;
}

.contact-trust-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-trust-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.92rem;
  color: var(--text);
}

.contact-trust-item svg {
  color: var(--accent-bright, #48cae4);
  flex-shrink: 0;
}

.contact-side-panel__footer {
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
  font-size: 0.88rem;
  color: var(--text-muted);
}

.contact-side-panel__footer a {
  color: var(--accent-bright, #48cae4);
  text-decoration: none;
  font-weight: 500;
}

.contact-side-panel__footer a:hover {
  text-decoration: underline;
}

/* Contact Form Card */
.contact-form-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  padding: clamp(2rem, 3.5vw, 3rem);
  position: relative;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.contact-form-card__head {
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.contact-form-card__title {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: var(--fw-semibold);
  color: var(--text);
  margin: 0 0 0.4rem;
}

.contact-form-card__sub {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
}

/* Polished Submit Button */
.contact-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 1.1rem 2.4rem;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: var(--fw-semibold, 600);
  letter-spacing: var(--tracking-label, 0.08em);
  text-transform: uppercase;
  border: none;
  border-radius: 0;
  cursor: pointer;
  margin-top: 1.25rem;
  position: relative;
  overflow: hidden;
  transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 12px 32px -8px rgba(201, 168, 117, 0.4);
}

.contact-submit-btn:hover {
  background: var(--accent-bright, #48cae4);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 18px 40px -8px rgba(201, 168, 117, 0.55);
  transform: translateY(-2px);
}

.contact-submit-btn svg {
  transition: transform var(--duration) var(--ease-out);
}

.contact-submit-btn:hover svg {
  transform: translateX(4px);
}

/* Full-Width Architectural Map Section */
.contact-map-section {
  position: relative;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  margin-bottom: 2rem;
}

.contact-map-section__head {
  padding: 1.25rem 2rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.02);
}

.contact-map-section__title {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.contact-map-section__title svg {
  color: var(--accent-bright, #48cae4);
}

.contact-map-section__address {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: normal;
}

.contact-map-section iframe {
  display: block;
  width: 100%;
  height: 380px;
  border: 0;
}

.form {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.5rem;
}

.form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 600px) {
  .form__row {
    grid-template-columns: 1fr 1fr;
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.field__label {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  /* was fw-semibold (600) → medium (500) */
  letter-spacing: var(--tracking-label);
  /* 0.08em — was tracking-wide (0.18em), tighter for refined form */
  color: var(--text-dim);
  text-transform: uppercase;
  line-height: 1.4;
}

.field__label::after {
  content: ' *';
  color: var(--accent);
}

.field__input,
.field__select,
.field__textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-strong);
  padding: 0.7rem 0;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-light);
  letter-spacing: var(--tracking-normal);
  transition: border-color var(--duration) var(--ease-out);
  outline: none;
  border-radius: 0;
}

.field__textarea {
  resize: vertical;
  min-height: 100px;
  font-family: var(--font-sans);
  line-height: 1.6;
}

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  border-bottom-color: var(--accent);
}

.field__input::placeholder,
.field__textarea::placeholder {
  color: var(--text-faint);
}

.field__select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23a8a39a' stroke-width='1' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0 center;
  padding-right: 1.5rem;
  cursor: pointer;
}

.field__select option {
  background: var(--bg);
  color: var(--text);
}

.form__submit {
  margin-top: 1rem;
  justify-self: start;
}

.contact__glow {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 0;
  background: radial-gradient(circle, var(--accent-glow), transparent 70%);
  pointer-events: none;
  filter: blur(40px);
  top: -200px;
  right: -200px;
  z-index: 0;
  opacity: 0.5;
}

/* ----- Footer ----- */
.footer {
  padding: var(--space-7) 0 var(--space-4);
  border-top: 1px solid var(--border);
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

.footer__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid var(--border);
}

@media (min-width: 800px) {
  .footer__layout {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: end;
  }
}

.footer__left {
  display: flex;
  flex-direction: column;
}

@media (min-width: 800px) {
  .footer__left {
    min-height: 280px;
    justify-content: space-between;
  }
}

.footer__contacts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}

@media (min-width: 600px) {
  .footer__contacts {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

.footer__contact-col {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer__contact-label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  color: var(--text);
  text-transform: uppercase;
}

.footer__contact-value {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  color: var(--text-muted);
  line-height: var(--lh-body);
}

.footer__contact-value a {
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.footer__contact-value a:hover {
  color: var(--accent);
}

.footer__logo-wrap {
  margin-top: auto;
}

.footer__logo-huge {
  color: var(--text);
  text-decoration: none;
  display: block;
  width: 100%;
  max-width: 520px;
  transition: opacity var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
}

.footer__logo-huge:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

.footer__logo-img {
  width: 100%;
  max-width: 520px;
  height: auto;
  display: block;
  object-fit: contain;
  filter: brightness(1.35) contrast(1.08);
}

.footer__right {
  display: none;
  flex-direction: column;
  justify-content: flex-end;
}

@media (min-width: 800px) {
  .footer__right {
    display: flex;
  }
}

.footer__desc-wrap {
  max-width: 48ch;
}

@media (min-width: 800px) {
  .footer__desc-wrap {
    padding-bottom: 0.6rem;
  }
}

.footer__desc-text {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  color: var(--text-muted);
  line-height: var(--lh-body);
  margin: 0;
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-top: 1.75rem;
  color: var(--text-dim);
  font-size: 0.68rem;
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.footer__bottom .t-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.footer__copy-item,
.footer__credit-item {
  white-space: nowrap;
}

.footer__bottom a {
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.footer__bottom a:hover {
  color: var(--accent);
}

@media (max-width: 768px) {
  .footer {
    padding: var(--space-5) 0 1.25rem;
  }

  .footer__layout {
    gap: 2rem;
    padding-bottom: 2rem;
  }

  .footer__contacts {
    margin-bottom: 2rem;
    gap: 1.5rem;
  }

  .footer__bottom {
    padding-top: 1rem;
    gap: 0.4rem;
  }

  .footer__bottom .t-meta {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    letter-spacing: 0.05em;
    font-size: 0.65rem;
    line-height: 1.4;
  }

  .footer__copy-item,
  .footer__credit-item {
    display: block;
    white-space: nowrap;
    text-align: center;
  }
}

/* ============================================================
   PORTFOLIO PAGE
   ============================================================ */

/* Interior-page hero nav — the portfolio nav uses the same hero-style
   wordmark bar as the homepage, but it sits over the solid dark page
   (there is no bright hero photo behind it). Lock it to the light colour
   scheme at every scroll position so it stays legible at the top. */
.nav--dark-page .nav__brand,
.nav--dark-page .nav__brand-primary {
  text-shadow: none;
}

.nav--dark-page .nav__menu--hero .nav__link {
  color: #fff;
}

.nav--dark-page .nav__menu--hero .nav__link:hover,
.nav--dark-page .nav__menu--hero .nav__link.is-active {
  color: var(--accent);
}

.nav--dark-page .nav__menu--hero .nav__link--cta {
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}

.nav--dark-page .nav__menu--hero .nav__link--cta:hover {
  background: #fff;
  color: #0a0a0c;
  border-color: #fff;
}

.page-hero {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 10rem;
  padding-bottom: 5rem;
  box-sizing: border-box;
  overflow: hidden;
}

/* Half-height hero section (e.g. for Contact) */
.page-hero--half {
  min-height: 48vh;
  min-height: 48dvh;
  height: 48vh;
  height: 48dvh;
  padding-top: clamp(6rem, 10vh, 8rem);
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.page-hero--half .page-hero__title {
  font-weight: 700 !important;
  font-family: var(--font-sans);
  font-size: clamp(2.6rem, 2.2rem + 2.8vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
}

/* 1.5x 高度 Sticky 锁定 Hero 视效 */
.page-hero--tall-sticky {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 150vh;
  height: 150dvh;
  min-height: 150vh;
  padding: 0;
  display: block;
  overflow: visible;
}

.page-hero__bg-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.page-hero__sticky-pin {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 5rem;
  box-sizing: border-box;
  z-index: 2;
  pointer-events: none;
}

.page-hero__sticky-pin .page-hero__inner {
  pointer-events: auto;
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

.page-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 12, 0.55) 0%,
    rgba(10, 10, 12, 0.35) 80px,
    rgba(10, 10, 12, 0.12) 140px,
    transparent 200px
  );
  pointer-events: none;
}

.page-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  padding-inline: 26px;
  box-sizing: border-box;
}

.page-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: end;
}

@media (min-width: 900px) {
  .page-hero__grid {
    grid-template-columns: 1.6fr 1fr;
    gap: 4rem;
    align-items: end;
  }
}

.page-hero__eyebrow {
  margin-bottom: 1.25rem;
}

.page-hero__title {
  font-size: clamp(3.2rem, 2.2rem + 4.5vw, 6.2rem);
  font-weight: var(--fw-bold);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 25ch;
  margin: 0;
  color: var(--text);
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.page-hero__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.005em;
  color: var(--accent-bright);
  text-transform: none;
}

.page-hero__sub {
  margin: 0;
  max-width: 48ch;
  color: rgba(220, 225, 230, 0.72);
  font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.85rem);
  font-weight: var(--fw-medium);
  line-height: 1.55;
  letter-spacing: var(--tracking-tight);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

.page-hero__line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
}

/* Filter tabs */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--space-5);
  padding-bottom: 1.5rem;

}

.filter {
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  font-size: 0.82rem;
  font-weight: var(--fw-medium);
  /* was implicit — explicit medium */
  color: var(--text-muted);
  letter-spacing: var(--tracking-label);
  /* 0.08em — was hard-coded 0.04em */
  text-transform: uppercase;
  background: transparent;
  transition: all var(--duration) var(--ease-out);
  cursor: pointer;
}

.filter:hover {
  color: var(--text);
  border-color: var(--accent);
}

.filter.is-active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.filter__count {
  font-family: var(--font-mono);
  font-size: 0.7em;
  margin-left: 0.4rem;
  opacity: 0.7;
}

/* Masonry */
.masonry {
  column-count: 1;
  column-gap: 1.5rem;
}

@media (min-width: 600px) {
  .masonry {
    column-count: 2;
  }
}

@media (min-width: 1100px) {
  .masonry {
    column-count: 3;
  }
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: 1.5rem;
  display: block;
  position: relative;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  transition: border-color var(--duration) var(--ease-out);
}

.masonry-item:hover {
  border-color: var(--border-accent);
}

.masonry-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter var(--duration-slow) var(--ease-out);
  filter: saturate(0.95);
}

.masonry-item:hover img {
  transform: none;
  filter: saturate(1);
}

.masonry-item__caption {
  display: none !important;
}

.masonry-item__name {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: var(--fw-light);
  /* was implicit — explicit light weight */
  color: var(--text);
  letter-spacing: var(--tracking-tight);
  /* -0.005em — was hard-coded -0.01em */
}

.masonry-item__name em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  letter-spacing: -0.005em;
  color: var(--accent-bright);
  text-transform: none;
}

.masonry-item__meta {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-widest);
  /* 0.32em — was 0.14em, refined */
  color: var(--text-dim);
  text-transform: uppercase;
}

.masonry-item__badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  color: var(--text);
  text-transform: uppercase;
  background: rgba(10, 10, 12, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-strong);
  padding: 0.4rem 0.8rem;
  border-radius: 0;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(10, 10, 12, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-slow) var(--ease-out), visibility var(--duration-slow) var(--ease-out);
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox__content {
  max-width: 1100px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  transform: scale(0.96);
  transition: transform var(--duration-slow) var(--ease-out);
}

.lightbox.is-open .lightbox__content {
  transform: scale(1);
}

.lightbox__media {
  max-height: 75vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox__media img {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  border-radius: 0;
  border: 1px solid var(--border);
}

.lightbox__caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.lightbox__close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 48px;
  height: 48px;
  border-radius: 0;
  background: rgba(10, 10, 12, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-strong);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration) var(--ease-out);
}

.lightbox__close:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  transform: rotate(90deg);
}

/* Portfolio Feed & Full-bleed Section Layout */
.portfolio-feed {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  padding-top: 320px;
}

.project-block {
  padding: 4rem 0 5rem;
  width: 100%;
  max-width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.project-block:last-of-type {
  border-bottom: none;
}

.project-block__head {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 2.5rem;
  width: 100%;
  max-width: 100%;
  padding-inline: 26px;
  box-sizing: border-box;
}

@media (min-width: 900px) {
  .project-block__head {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4rem;
  }
}

.project-block__index {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

.project-block__title {
  font-size: clamp(3.2rem, 2.2rem + 4.5vw, 6.2rem);
  font-weight: var(--fw-bold);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 14ch;
}

.project-block__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.005em;
  color: var(--accent-bright);
  text-transform: none;
}

.project-block__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  justify-content: flex-end;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: var(--tracking-wide);
}

.project-block__meta > div {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.project-block__meta-label {
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: 0.66rem;
  font-weight: var(--fw-regular);
  margin-bottom: 0.4rem;
}

.project-block__meta-value {
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  text-transform: none;
  letter-spacing: var(--tracking-tight);
  font-family: var(--font-sans);
}

.project-block__gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  width: 100%;
  max-width: 100%;
  padding-inline: 26px;
  box-sizing: border-box;
  margin: 0;
}

@media (min-width: 768px) {
  .project-block__gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
  }
}

.gallery-item {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  border: none;
  background: var(--bg-card);
  margin-bottom: 0;
  display: block;
  width: 100%;
  cursor: pointer;
  aspect-ratio: 16 / 10;
}

/* 100% 全宽 (3/3) */
.gallery-item.gallery-item--full {
  grid-column: 1 / -1;
  aspect-ratio: 21 / 9;
}

/* 2/3 宽图 (一边大) */
.gallery-item.gallery-item--two-thirds {
  grid-column: span 2;
  aspect-ratio: 16 / 10;
  height: 100%;
}

/* 1/3 窄图 (一边小) — 高度由 CSS Grid 自动 stretch 与 2/3 图完全垂直对齐 */
.gallery-item.gallery-item--third {
  grid-column: span 1;
  height: 100%;
}

@media (max-width: 767px) {
  .gallery-item.gallery-item--full,
  .gallery-item.gallery-item--two-thirds,
  .gallery-item.gallery-item--third {
    grid-column: span 1;
    aspect-ratio: 16 / 10;
    height: auto;
  }
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.6s var(--ease-out);
  filter: saturate(0.92);
}

.gallery-item:hover img {
  transform: none !important;
  filter: saturate(1.05);
}

/* ----- Mobile menu panel ----- */
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(420px, 100vw);
  background: var(--bg);
  border-left: 1px solid var(--border);
  z-index: calc(var(--z-nav) - 1);
  padding: 6rem 2rem 2rem;
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-out);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  visibility: hidden;
}

.mobile-menu.is-open {
  transform: translateX(0);
  visibility: visible;
}

.mobile-menu__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--duration) var(--ease-out), padding-left var(--duration) var(--ease-out);
}

.mobile-menu__link:hover {
  color: var(--accent);
  padding-left: 0.5rem;
}

/* ===== Mobile Menu Dropdown ===== */
.mobile-menu__item--dropdown {
  border-bottom: 1px solid var(--border);
}

.mobile-menu__dropdown-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.mobile-menu__dropdown-head .mobile-menu__link--title {
  border-bottom: none;
  padding: 0.8rem 0;
  flex: 1;
}

.mobile-menu__dropdown-toggle {
  background: transparent;
  border: none;
  color: var(--text);
  padding: 0.8rem 0.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-menu__caret {
  transition: transform var(--duration) var(--ease-out);
}

.mobile-menu__item--dropdown.is-open .mobile-menu__caret {
  transform: rotate(180deg);
}

.mobile-menu__sublist {
  list-style: none;
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 0 0.8rem 0;
}

.mobile-menu__item--dropdown.is-open .mobile-menu__sublist {
  display: flex;
}

.mobile-menu__sublink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: #ffffff;
  border-radius: 0;
  border: 1px solid rgba(0, 0, 0, 0.12);
  text-decoration: none;
  color: #0a0a0c;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
}

.mobile-menu__sublink:hover,
.mobile-menu__sublink.is-active:hover {
  background: #0a0a0c;
  color: #ffffff;
  border-color: #0a0a0c;
}

.mobile-menu__subtitle {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: var(--fw-bold);
  color: #0a0a0c;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color var(--duration) var(--ease-out);
}

.mobile-menu__sublink:hover .mobile-menu__subtitle,
.mobile-menu__sublink.is-active:hover .mobile-menu__subtitle {
  color: #ffffff;
}

.mobile-menu__subarrow {
  color: #0a0a0c;
  font-size: 1rem;
  transition: color var(--duration) var(--ease-out);
}

.mobile-menu__sublink:hover .mobile-menu__subarrow,
.mobile-menu__sublink.is-active:hover .mobile-menu__subarrow {
  color: #ffffff;
}

.mobile-menu__cta {
  margin-top: 1.5rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet landscape & compact desktop (<= 1100px) */
@media (max-width: 1100px) {
  .nav__inner--hero {
    gap: 1rem;
    padding-inline: 1.5rem;
  }

  .nav__brand-logo {
    max-width: 155px;
    height: auto;
  }

  .nav__menu--hero {
    gap: clamp(0.6rem, 1.2vw, 1.1rem);
  }

  .nav__menu--hero .nav__link {
    font-size: 0.74rem;
    white-space: nowrap;
  }

  .nav__menu--hero .nav__link--cta {
    padding: 0.45rem 0.8rem;
    margin-left: 0.15rem;
    white-space: nowrap;
  }

  .hero {
    padding-top: calc(80px + 1.5rem);
    padding-bottom: clamp(2rem, 7vh, 4.5rem);
  }

  .hero__title {
    font-size: clamp(3.2rem, 2rem + 5vw, 6.4rem);
  }

  .hero__center {
    gap: clamp(1rem, 2vh, 1.8rem);
  }
}

/* Height-constrained viewports (laptops, tablet landscape, split screen) */
@media (max-height: 820px) {
  .hero {
    padding-top: calc(75px + 1rem);
    padding-bottom: clamp(1.5rem, 5vh, 3.5rem);
  }

  .hero__center {
    gap: clamp(0.75rem, 1.8vh, 1.4rem);
  }

  .hero__title {
    font-size: clamp(2.8rem, min(1.8rem + 4.5vw, 12.5vh), 5.6rem);
  }

  .hero__sub {
    font-size: clamp(0.86rem, 0.8rem + 0.2vw, 1rem);
    line-height: 1.5;
  }
}

@media (max-height: 650px) {
  .hero {
    padding-top: calc(70px + 0.8rem);
    padding-bottom: 1.5rem;
  }

  .hero__center {
    gap: 0.75rem;
  }

  .hero__title {
    font-size: clamp(2.4rem, 10vh, 4rem);
  }

  .hero__eyebrow {
    font-size: 0.65rem;
  }

  .hero__cta {
    padding: 0.75rem 1.8rem;
  }
}

/* Tablet portrait & below (<= 1023px) */
@media (max-width: 1023px) {
  .nav__menu,
  .nav__cta-desktop {
    display: none;
  }

  .nav__toggle {
    display: inline-flex;
  }

  .nav--hero .nav__menu--hero {
    display: none;
  }

  .hero__media::after {
    background:
      radial-gradient(ellipse 75% 65% at 50% 50%,
        rgba(0, 0, 0, 0.30) 0%,
        rgba(0, 0, 0, 0.12) 45%,
        transparent 75%),
      linear-gradient(
        180deg,
        rgba(10, 10, 12, 0.38) 0%,
        rgba(10, 10, 12, 0.22) 100px,
        rgba(10, 10, 12, 0.08) 180px,
        transparent 260px,
        rgba(0, 0, 0, 0.15) 50%,
        rgba(10, 10, 12, 0.82) 100%
      );
  }

  .hero {
    min-height: 100dvh;
    min-height: 100svh;
    aspect-ratio: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: calc(75px + 1rem);
    padding-bottom: clamp(2rem, 6vh, 4rem);
  }

  .hero__center {
    position: relative;
    z-index: 5;
    gap: clamp(1rem, 2vh, 1.6rem);
    padding-inline: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    margin: auto 0;
    box-sizing: border-box;
  }

  .hero__title {
    font-size: clamp(3rem, 2rem + 4.8vw, 5.8rem);
    text-align: center;
  }

  .hero__eyebrow {
    font-size: 0.66rem;
    letter-spacing: 0.28em;
    text-align: center;
  }

  .hero__rule {
    margin: 0 auto;
  }

  .hero__sub {
    font-size: clamp(0.9rem, 0.82rem + 0.3vw, 1.02rem);
    max-width: 32ch;
    text-align: center;
    margin: 0 auto;
  }

  .hero__cta {
    margin: 0.2rem auto 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .hero__social {
    gap: 1rem;
  }

  .hero__meta-bottom {
    font-size: 0.62rem;
  }

  .about {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .about__media {
    aspect-ratio: 16 / 11;
    order: -1;
  }

  .page-hero {
    padding-top: 8rem;
  }
}

@media (max-width: 900px) {
  .section {
    padding: 2.75rem 0;
  }

  .section__head {
    margin-bottom: 1.75rem;
  }

  #projects {
    padding-bottom: 1.25rem;
  }
}

@media (max-width: 600px) {
  .section {
    padding: 2rem 0;
  }

  .section__head {
    margin-bottom: 1.25rem;
  }

  #projects {
    padding-bottom: 0.5rem;
  }

  .about__stats {
    grid-template-columns: 1fr;
    gap: 1px;
  }

  .stat {
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--border);
  }

  .stat:last-child {
    border-bottom: none;
  }

  .contact {
    padding: 1.5rem;
  }

  .nav--hero {
    padding: 0.55rem 0;
    background: transparent;
  }

  .nav--hero::before {
    height: 180px;
    background: linear-gradient(
      180deg,
      rgba(8, 8, 10, 0.72) 0%,
      rgba(8, 8, 10, 0.58) 22%,
      rgba(8, 8, 10, 0.40) 45%,
      rgba(8, 8, 10, 0.22) 65%,
      rgba(8, 8, 10, 0.09) 82%,
      rgba(8, 8, 10, 0.02) 94%,
      transparent 100%
    );
  }

  .nav--hero.scrolled {
    padding: 0.35rem 0;
    background: rgba(10, 10, 12, 0.92);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
  }

  .nav--hero.scrolled::before {
    opacity: 0;
  }

  /* Mobile hero: full screen height with centered title, text, and button */
  .hero {
    min-height: 100dvh;
    min-height: 100svh;
    height: auto;
    aspect-ratio: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: calc(70px + 1rem);
    padding-bottom: 2.5rem;
  }

  .hero__center {
    position: relative;
    z-index: 5;
    gap: 1.1rem;
    padding-inline: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    margin: auto 0;
    box-sizing: border-box;
  }

  .hero__title {
    font-size: clamp(2.8rem, 1.6rem + 6vw, 4.6rem);
    letter-spacing: -0.02em;
    line-height: 0.95;
    text-align: center;
  }

  .hero__eyebrow {
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    gap: 0.6rem;
    text-align: center;
  }

  .hero__eyebrow-mark {
    width: 16px;
  }

  .hero__rule {
    width: 40px;
    margin: 0 auto;
  }

  .hero__sub {
    font-size: 0.9rem;
    line-height: 1.55;
    text-align: center;
    max-width: 28ch;
    margin: 0 auto;
  }

  .hero__sub br {
    display: none;
  }

  .hero__cta {
    padding: 0.85rem 1.8rem;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    margin: 0.2rem auto 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .hero__social {
    display: none;
  }

  .hero__meta-bottom {
    display: none;
  }

  .btn-primary {
    padding: 0.9rem 1.5rem;
    font-size: 0.85rem;
  }
}

/* ============================================================
   SYSTEMS SECTIONS & 4-PRODUCT CARDS LAYOUT
   ============================================================ */
.systems-feed {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-inline: 26px;
  padding-top: 320px;
}

.systems-feed .project-block__head {
  padding-inline: 0;
}

.system-block {
  margin-bottom: 8rem;
}

.system-products-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  width: 100%;
  margin-top: 3rem;
}

@media (min-width: 1024px) {
  .system-products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.system-product-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
  transition: border-color 0.4s var(--ease-out);
}

.system-product-card:hover {
  border-color: var(--border-strong);
}

@media (min-width: 640px) {
  .system-product-card {
    flex-direction: row;
  }
}

.system-product-card__media {
  width: 100%;
  aspect-ratio: 16 / 10;
  position: relative;
  overflow: hidden;
  background: var(--bg-elevated);
}

@media (min-width: 640px) {
  .system-product-card__media {
    width: 50%;
    aspect-ratio: auto;
    min-height: 100%;
  }
}

.system-product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.6s var(--ease-out);
  filter: saturate(0.92);
}

.system-product-card:hover .system-product-card__media img {
  filter: saturate(1.05);
}

.system-product-card__info {
  width: 100%;
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

@media (min-width: 640px) {
  .system-product-card__info {
    width: 50%;
  }
}

.system-product-card__tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

.system-product-card__name {
  font-size: clamp(1.4rem, 1.2rem + 0.9vw, 2.1rem);
  font-weight: var(--fw-bold);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}

.system-product-card__desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
  font-weight: var(--fw-light);
  margin: 0;
}

/* ============================================================
   ACCESSIBILITY & REDUCED MOTION
   ============================================================ */

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

@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;
  }

  .reveal,
  .reveal-img {
    opacity: 1;
    transform: none;
    clip-path: none;
  }

}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--accent);
  color: var(--bg);
  padding: 0.6rem 1rem;
  z-index: 200;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  transition: top var(--duration) var(--ease-out);
}

.skip-link:focus {
  top: 1rem;
}

/* ==========================================================================
   SYS-ROW — two-row interactive accordion for systems.html
   ========================================================================== */

.sys-rows-wrap {
  padding-bottom: 6rem;
}

/* ---- Row container ---- */
.sys-row {
  border-top: 1px solid var(--border-strong);
  scroll-margin-top: 100px;
}

.sys-row + .sys-row {
  margin-top: 0;
}

/* ---- Tab bar ---- */
.sys-row__tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.sys-row__tab {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 2rem 2.5rem;
  text-align: left;
  background: none;
  border: none;
  border-right: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  cursor: pointer;
  color: var(--text);
  transition: background 0.22s ease, color 0.22s ease;
  font-family: var(--font-sans);
}

.sys-row__tab:last-child {
  border-right: none;
}

.sys-row__tab:hover:not(.is-active) {
  background: var(--bg-elevated);
}

.sys-row__tab.is-active {
  background: #fff;
  color: #000;
}

.sys-row__tab-index {
  font-size: 0.7rem;
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}

.sys-row__tab.is-active .sys-row__tab-index {
  color: rgba(0, 0, 0, 0.45);
}

.sys-row__tab-name {
  font-size: clamp(1.15rem, 1.5vw, 1.9rem);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
}

/* ---- Content panel ---- */
.sys-row__panel {
  display: none;
  grid-template-columns: 1fr 1fr 1fr;
  min-height: 460px;
  border-bottom: 1px solid var(--border-strong);
}

.sys-row__panel.is-active {
  display: grid;
}

/* Fade-in animation when panel becomes active */
@keyframes sysRowFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.sys-row__panel.is-active {
  animation: sysRowFade 0.25s ease;
}

/* Text column */
.sys-row__panel-text {
  padding: 2.5rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1.5rem;
  border-right: 1px solid var(--border-strong);
}

/* Meta labels (Category / Applications) */
.sys-row__panel-meta {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-strong);
}

.sys-row__panel-meta-item {
  font-size: 0.8rem;
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}

/* Spec list (card titles) */
.sys-row__spec-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.sys-row__spec {
  font-size: clamp(0.95rem, 1.1vw, 1.25rem);
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  color: var(--text);
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
  letter-spacing: var(--tracking-normal);
}

.sys-row__spec:last-child {
  border-bottom: none;
}

/* Image columns */
.sys-row__panel-img-wrap {
  overflow: hidden;
  position: relative;
}

.sys-row__panel-img-wrap:last-child {
  border-left: 1px solid var(--border-strong);
}

.sys-row__panel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.sys-row__panel-img-wrap:hover .sys-row__panel-img {
  transform: scale(1.03);
}

/* Mobile-only system title */
.sys-row__mobile-title {
  display: none;
  margin-bottom: 1.5rem;
}

.sys-row__mobile-index {
  font-size: 0.72rem;
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 0.4rem;
}

.sys-row__mobile-name {
  font-size: 1.5rem;
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

/* ---- Responsive ---- */
@media (max-width: 767px) {
  /* Hide desktop tab accordion rows */
  .sys-row__tabs {
    display: none;
  }

  /* Linearize all system panels */
  .sys-row__panel {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    min-height: auto;
    padding: 3rem 1.5rem;
    border-bottom: 1px solid var(--border-strong);
    scroll-margin-top: 100px;
  }

  /* Remove double border between rows */
  .sys-row + .sys-row {
    border-top: none;
  }

  /* Mobile text column spans full width and displays as paragraph flow */
  .sys-row__panel-text {
    grid-column: 1 / span 2;
    padding: 0;
    border-right: none;
    display: block;
    line-height: 1.6;
  }

  /* Make metadata inline and add separator commas */
  .sys-row__panel-meta {
    display: inline;
    border-bottom: none;
    padding-bottom: 0;
  }

  .sys-row__panel-meta-item {
    display: inline;
    font-size: 0.9rem;
    color: var(--text);
  }

  .sys-row__panel-meta-item:not(:last-child)::after {
    content: ", ";
  }

  .sys-row__panel-meta::after {
    content: ", ";
  }

  /* Make specifications list inline and add separators */
  .sys-row__spec-list {
    display: inline;
  }

  .sys-row__spec {
    display: inline;
    border-bottom: none;
    padding: 0;
    font-size: 0.9rem;
  }

  .sys-row__spec:not(:last-child)::after {
    content: ", ";
  }

  .sys-row__spec:last-child::after {
    content: ".";
  }

  /* Image wrappers span 1 column (side-by-side) */
  .sys-row__panel-img-wrap {
    grid-column: span 1;
    aspect-ratio: 3 / 4;
  }

  .sys-row__panel-img-wrap:last-child {
    border-left: none;
  }

  /* Reveal mobile titles */
  .sys-row__mobile-title {
    display: block;
  }
}