/* ==========================================================================
   Apple HIG + Glassmorphism design system
   --------------------------------------------------------------------------
   Typography ...... SF Pro via the system stack (HIG text styles)
   Colour .......... HIG system colours + semantic label/background/fill roles
   Layout .......... 8pt grid, HIG margins, continuous-corner radii
   Materials ....... HIG material ladder rendered as backdrop-filter glass
   Controls ........ HIG buttons, segmented controls, grouped-inset fields
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* ---------- Typography ----------
     SF Pro is licensed for Apple-platform development and cannot be served
     from a web CDN. The system stack resolves to genuine SF Pro Display /
     SF Pro Text on Apple devices (with automatic optical sizing); Inter is
     the metric-compatible fallback everywhere else. */
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
          'Segoe UI', Inter, Roboto, system-ui, sans-serif;

  /* HIG text styles (pt -> rem at a 16px root) */
  --fs-caption2:    0.6875rem;  /* 11pt */
  --fs-caption1:    0.75rem;    /* 12pt */
  --fs-footnote:    0.8125rem;  /* 13pt */
  --fs-subheadline: 0.9375rem;  /* 15pt */
  --fs-callout:     1rem;       /* 16pt */
  --fs-body:        1.0625rem;  /* 17pt */
  --fs-title3:      1.25rem;    /* 20pt */
  --fs-title2:      1.375rem;   /* 22pt */
  --fs-title1:      1.75rem;    /* 28pt */
  --fs-largetitle:  2.125rem;   /* 34pt */

  /* Web display steps above Large Title (marketing headlines) */
  --fs-display2: clamp(2.5rem, 5vw, 3.5rem);
  --fs-display1: clamp(3rem, 7vw, 5rem);

  --lh-caption2:    1.18;
  --lh-caption1:    1.33;
  --lh-footnote:    1.38;
  --lh-subheadline: 1.33;
  --lh-callout:     1.31;
  --lh-body:        1.29;
  --lh-title3:      1.25;
  --lh-title2:      1.27;
  --lh-title1:      1.21;
  --lh-largetitle:  1.21;

  /* HIG tracking: tighter as type grows, looser as it shrinks */
  --tr-display: -0.03em;
  --tr-title:   -0.02em;
  --tr-body:     0em;
  --tr-caption:  0.01em;
  --tr-label:    0.06em;  /* uppercase eyebrows / overlines */

  /* ---------- System colours (light) ---------- */
  --blue:   #007AFF;
  --indigo: #5856D6;
  --teal:   #30B0C7;
  --pink:   #FF2D55;
  --green:  #34C759;
  --red:    #FF3B30;
  --accent: var(--blue);
  --on-accent: #FFFFFF;

  /* Accessible companion to systemBlue. Apple ships #007AFF for controls and
     accepts ~4.0:1 because iOS type runs larger; on the web that misses WCAG
     AA for small text. --accent stays vivid for large display type and
     decoration; --accent-strong carries small text and any surface holding a
     white label. (Dark uses #409CFF, Apple's own increased-contrast blue.) */
  --accent-strong: #0060DF;

  /* ---------- System grays (light) ---------- */
  --gray:  #8E8E93;
  --gray2: #AEAEB2;
  --gray3: #C7C7CC;
  --gray4: #D1D1D6;
  --gray5: #E5E5EA;
  --gray6: #F2F2F7;

  /* ---------- Semantic labels (light) ---------- */
  --label:            #000000;
  /* HIG specifies 0.60 here; raised to 0.75 so body and caption text clears
     WCAG AA 4.5:1 against the light materials. */
  --label-secondary:  rgba(60, 60, 67, 0.75);
  --label-tertiary:   rgba(60, 60, 67, 0.30);
  --label-quaternary: rgba(60, 60, 67, 0.18);

  /* ---------- Backgrounds (light) ---------- */
  --bg:            #FFFFFF;
  --bg-secondary:  #F2F2F7;
  --bg-tertiary:   #FFFFFF;

  /* ---------- Fills (light) ---------- */
  --fill:            rgba(120, 120, 128, 0.20);
  --fill-secondary:  rgba(120, 120, 128, 0.16);
  --fill-tertiary:   rgba(120, 120, 128, 0.12);
  --fill-quaternary: rgba(120, 120, 128, 0.08);

  /* ---------- Separators (light) ---------- */
  --separator:        rgba(60, 60, 67, 0.29);
  --separator-opaque: #C6C6C8;

  /* ---------- Materials (light) ----------
     HIG's material ladder. Each material = a translucent base + blur; the
     border and inner highlight are applied together by the .glass mixin. */
  --mat-ultrathin: rgba(255, 255, 255, 0.45);
  --mat-thin:      rgba(255, 255, 255, 0.62);
  --mat-regular:   rgba(255, 255, 255, 0.72);
  --mat-thick:     rgba(255, 255, 255, 0.86);
  --mat-chrome:    rgba(255, 255, 255, 0.80);

  --blur-ultrathin: blur(20px) saturate(180%);
  --blur-thin:      blur(30px) saturate(180%);
  --blur-regular:   blur(40px) saturate(180%);
  --blur-thick:     blur(50px) saturate(180%);

  --glass-border:    rgba(255, 255, 255, 0.55);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.65);

  /* ---------- Elevation (light) ----------
     HIG shadows are diffuse and low-alpha, never hard-edged. */
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 1px rgba(0, 0, 0, 0.03);
  --elev-2: 0 4px 12px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.04);
  --elev-3: 0 12px 32px rgba(0, 0, 0, 0.09), 0 2px 8px rgba(0, 0, 0, 0.04);
  --elev-4: 0 24px 64px rgba(0, 0, 0, 0.13), 0 4px 16px rgba(0, 0, 0, 0.06);

  /* ---------- Mesh backdrop alpha (light) ---------- */
  --mesh-alpha: 0.30;

  /* ---------- Layout: 8pt grid ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  48px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 96px;

  /* HIG layout margins */
  --margin-compact: 16px;
  --margin-regular: 20px;
  --container: 1180px;
  --nav-h: 112px;     /* sized around the 84px logo mark */
  --hit: 44px;        /* HIG minimum hit target */

  /* Continuous ("squircle") corner approximations */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-full: 999px;

  /* Motion — HIG timings */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 0.2s;
  --dur: 0.3s;
}

/* ---------- Dark appearance ----------
   Declared twice on purpose: the media query handles "auto", and the
   [data-theme] attribute selectors let the in-page toggle override the
   system setting in BOTH directions. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --blue:   #0A84FF;
    --accent-strong: #409CFF;
    --on-accent: #0B0B0C;  /* dark label: the dark-mode accent fill is bright */
    --indigo: #5E5CE6;
    --teal:   #40C8E0;
    --pink:   #FF375F;
    --green:  #30D158;
    --red:    #FF453A;

    --gray:  #8E8E93;
    --gray2: #636366;
    --gray3: #48484A;
    --gray4: #3A3A3C;
    --gray5: #2C2C2E;
    --gray6: #1C1C1E;

    --label:            #FFFFFF;
    --label-secondary:  rgba(235, 235, 245, 0.60);
    --label-tertiary:   rgba(235, 235, 245, 0.30);
    --label-quaternary: rgba(235, 235, 245, 0.16);

    --bg:           #000000;
    --bg-secondary: #1C1C1E;
    --bg-tertiary:  #2C2C2E;

    --fill:            rgba(120, 120, 128, 0.36);
    --fill-secondary:  rgba(120, 120, 128, 0.32);
    --fill-tertiary:   rgba(120, 120, 128, 0.24);
    --fill-quaternary: rgba(120, 120, 128, 0.18);

    --separator:        rgba(84, 84, 88, 0.65);
    --separator-opaque: #38383A;

    --mat-ultrathin: rgba(30, 30, 32, 0.45);
    --mat-thin:      rgba(30, 30, 32, 0.55);
    --mat-regular:   rgba(30, 30, 32, 0.65);
    --mat-thick:     rgba(30, 30, 32, 0.78);
    --mat-chrome:    rgba(22, 22, 24, 0.72);

    --glass-border:    rgba(255, 255, 255, 0.12);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.10);

    --elev-1: 0 1px 2px rgba(0, 0, 0, 0.40);
    --elev-2: 0 4px 12px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.30);
    --elev-3: 0 12px 32px rgba(0, 0, 0, 0.50), 0 2px 8px rgba(0, 0, 0, 0.30);
    --elev-4: 0 24px 64px rgba(0, 0, 0, 0.60), 0 4px 16px rgba(0, 0, 0, 0.35);

    --mesh-alpha: 0.42;
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;

  --blue:   #0A84FF;
  --accent-strong: #409CFF;
  --on-accent: #0B0B0C;  /* dark label: the dark-mode accent fill is bright */
  --indigo: #5E5CE6;
  --teal:   #40C8E0;
  --pink:   #FF375F;
  --green:  #30D158;
  --red:    #FF453A;

  --gray:  #8E8E93;
  --gray2: #636366;
  --gray3: #48484A;
  --gray4: #3A3A3C;
  --gray5: #2C2C2E;
  --gray6: #1C1C1E;

  --label:            #FFFFFF;
  --label-secondary:  rgba(235, 235, 245, 0.60);
  --label-tertiary:   rgba(235, 235, 245, 0.30);
  --label-quaternary: rgba(235, 235, 245, 0.16);

  --bg:           #000000;
  --bg-secondary: #1C1C1E;
  --bg-tertiary:  #2C2C2E;

  --fill:            rgba(120, 120, 128, 0.36);
  --fill-secondary:  rgba(120, 120, 128, 0.32);
  --fill-tertiary:   rgba(120, 120, 128, 0.24);
  --fill-quaternary: rgba(120, 120, 128, 0.18);

  --separator:        rgba(84, 84, 88, 0.65);
  --separator-opaque: #38383A;

  --mat-ultrathin: rgba(30, 30, 32, 0.45);
  --mat-thin:      rgba(30, 30, 32, 0.55);
  --mat-regular:   rgba(30, 30, 32, 0.65);
  --mat-thick:     rgba(30, 30, 32, 0.78);
  --mat-chrome:    rgba(22, 22, 24, 0.72);

  --glass-border:    rgba(255, 255, 255, 0.12);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.10);

  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.40);
  --elev-2: 0 4px 12px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.30);
  --elev-3: 0 12px 32px rgba(0, 0, 0, 0.50), 0 2px 8px rgba(0, 0, 0, 0.30);
  --elev-4: 0 24px 64px rgba(0, 0, 0, 0.60), 0 4px 16px rgba(0, 0, 0, 0.35);

  --mesh-alpha: 0.42;
}

:root[data-theme='light'] { color-scheme: light; }

/* ==========================================================================
   2. BASE
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--sp-6));
}

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  letter-spacing: var(--tr-body);
  color: var(--label);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.container {
  width: min(var(--container), 100% - (var(--margin-regular) * 2));
  margin-inline: auto;
}

/* ---------- Ambient gradient mesh ----------
   Glass only reads as glass when something sits behind it. Four large,
   low-alpha radial gradients in HIG system colours — pure CSS, no assets,
   no blur filter (the gradients are already soft, so this costs nothing
   to composite). */
.mesh {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--mesh-alpha);
  background:
    radial-gradient(48vw 48vw at 8% 4%,   var(--blue)   0%, transparent 60%),
    radial-gradient(44vw 44vw at 92% 12%, var(--indigo) 0%, transparent 62%),
    radial-gradient(52vw 52vw at 78% 74%, var(--teal)   0%, transparent 60%),
    radial-gradient(40vw 40vw at 18% 88%, var(--pink)   0%, transparent 64%);
}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4 {
  font-weight: 700;
  letter-spacing: var(--tr-title);
  line-height: var(--lh-title1);
}

.display {
  font-size: var(--fs-display1);
  font-weight: 700;
  letter-spacing: var(--tr-display);
  line-height: 1.05;
}

.h2 {
  font-size: var(--fs-display2);
  font-weight: 700;
  letter-spacing: var(--tr-display);
  line-height: 1.1;
}

.h3 {
  font-size: var(--fs-title3);
  font-weight: 600;
  letter-spacing: var(--tr-title);
  line-height: var(--lh-title3);
}

/* HIG "footnote, uppercase" overline */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-footnote);
  line-height: var(--lh-footnote);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: var(--sp-4);
}

.lead {
  font-size: var(--fs-title3);
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: var(--tr-body);
  color: var(--label-secondary);
  max-width: 62ch;
}

.muted { color: var(--label-secondary); }

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

.text-center { text-align: center; }
.text-center .hero__cta { justify-content: center; }
.text-center .lead { margin-inline: auto; }

/* ---------- 404 numeral ---------- */
.error-code {
  font-size: clamp(6rem, 22vw, 12rem);
  font-weight: 700;
  letter-spacing: var(--tr-display);
  line-height: 0.9;
  color: var(--accent);
  margin-bottom: var(--sp-5);
}

/* ---------- Glass mixin ----------
   A single translucent surface treatment: material fill + blur + hairline
   border + inner top highlight. `.glass` is the regular material; the
   modifiers step up and down the HIG ladder. */
.glass {
  background: var(--mat-regular);
  -webkit-backdrop-filter: var(--blur-regular);
  backdrop-filter: var(--blur-regular);
  border: 1px solid var(--glass-border);
  box-shadow: var(--elev-2), var(--glass-highlight);
}

.glass--thin {
  background: var(--mat-thin);
  -webkit-backdrop-filter: var(--blur-thin);
  backdrop-filter: var(--blur-thin);
}

.glass--ultrathin {
  background: var(--mat-ultrathin);
  -webkit-backdrop-filter: var(--blur-ultrathin);
  backdrop-filter: var(--blur-ultrathin);
}

.glass--thick {
  background: var(--mat-thick);
  -webkit-backdrop-filter: var(--blur-thick);
  backdrop-filter: var(--blur-thick);
}

/* Without backdrop-filter support the materials would be washed-out
   transparent panels — fall back to a near-opaque surface so labels
   keep their contrast. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .glass--thin, .glass--ultrathin, .glass--thick,
  .nav, .card, .value, .form, .cta-band, .stat, .segmented {
    background: var(--bg);
    border-color: var(--separator);
  }
}

/* ==========================================================================
   4. NAVIGATION
   ========================================================================== */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 100;
  display: flex;
  align-items: center;
  background: var(--mat-chrome);
  -webkit-backdrop-filter: var(--blur-thick);
  backdrop-filter: var(--blur-thick);
  border-bottom: 0.5px solid var(--separator);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}

.nav__logo img {
  height: 84px;
  width: auto;
}

/* The wordmark PNG is dark artwork — invert it in dark appearance so it
   stays legible without shipping a second asset. */
:root[data-theme='dark'] .nav__logo img,
:root[data-theme='dark'] .footer__logo img {
  filter: invert(1) brightness(1.6);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .nav__logo img,
  :root:not([data-theme='light']) .footer__logo img {
    filter: invert(1) brightness(1.6);
  }
}

.nav__links {
  display: flex;
  gap: var(--sp-7);
  font-size: var(--fs-subheadline);
  line-height: var(--lh-subheadline);
  font-weight: 500;
}

.nav__links a {
  color: var(--label-secondary);
  transition: color var(--dur-fast) var(--ease);
}
.nav__links a:hover { color: var(--label); }
.nav__links a.active { color: var(--accent-strong); font-weight: 600; }

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* ---------- Segmented control (HIG) ----------
   Capsule track on a thin material with a filled thumb behind the
   selected option. Used for EN/ID and for the portfolio filters. */
.segmented {
  position: relative;
  display: inline-flex;
  padding: 2px;
  border-radius: var(--r-full);
  background: var(--fill-tertiary);
  -webkit-backdrop-filter: var(--blur-thin);
  backdrop-filter: var(--blur-thin);
  border: 0.5px solid var(--glass-border);
}

.segmented__opt {
  position: relative;
  z-index: 1;
  flex: 1;
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-footnote);
  line-height: 1;
  font-weight: 600;
  letter-spacing: var(--tr-caption);
  color: var(--label-secondary);
  padding: 0 var(--sp-3);
  min-height: 28px;
  border-radius: var(--r-full);
  transition: color var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.segmented__opt:hover { color: var(--label); }
.segmented__opt[aria-pressed='true'] { color: var(--label); }

.segmented__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  height: calc(100% - 4px);
  border-radius: var(--r-full);
  background: var(--bg);
  box-shadow: var(--elev-1);
  transition: transform var(--dur) var(--ease), width var(--dur) var(--ease);
  pointer-events: none;
  z-index: 0;
}

/* ---------- Icon button (HIG toolbar control) ---------- */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: var(--r-full);
  background: var(--fill-tertiary);
  color: var(--label);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.icon-btn:hover { background: var(--fill-secondary); }
.icon-btn:active { transform: scale(0.92); }
.icon-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* Only one of the two glyphs shows, depending on appearance. */
.icon-btn .icon-moon { display: none; }
:root[data-theme='dark'] .icon-btn .icon-moon { display: block; }
:root[data-theme='dark'] .icon-btn .icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .icon-btn .icon-moon { display: block; }
  :root:not([data-theme='light']) .icon-btn .icon-sun { display: none; }
}

/* ---------- Burger ---------- */
.nav__burger {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  width: var(--hit);
  height: var(--hit);
  position: relative;
  z-index: 110;
  color: var(--label);
}
.nav__burger span {
  display: block;
  width: 20px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  margin: 5px auto;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav__burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity: 0; }
.nav__burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ==========================================================================
   5. BUTTONS (HIG)
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--hit);
  padding: 0 var(--sp-6);
  font-family: inherit;
  font-size: var(--fs-callout);
  line-height: var(--lh-callout);
  font-weight: 600;
  letter-spacing: var(--tr-body);
  border-radius: var(--r-full);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease);
}

/* HIG pressed state: brief scale-down plus a dip in opacity. */
.btn:active { transform: scale(0.96); opacity: 0.8; }

/* Filled — the primary action */
.btn--filled { background: var(--accent-strong); color: var(--on-accent); }
.btn--filled:hover { filter: brightness(1.08); }

/* Tinted — secondary action, accent label on a tinted fill */
.btn--tinted {
  background: color-mix(in srgb, var(--accent-strong) 15%, transparent);
  color: var(--accent-strong);
}
.btn--tinted:hover { background: color-mix(in srgb, var(--accent-strong) 24%, transparent); }

/* Gray — tertiary action */
.btn--gray { background: var(--fill-secondary); color: var(--label); }
.btn--gray:hover { background: var(--fill); }

/* Plain — lowest emphasis */
.btn--plain { background: none; color: var(--accent-strong); padding-inline: var(--sp-3); }
.btn--plain:hover { background: var(--fill-quaternary); }

/* ---------- Focus ring (HIG) ---------- */
:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent-strong) 45%, transparent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ==========================================================================
   6. HERO & SECTIONS
   ========================================================================== */

.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  position: relative;
  padding-top: var(--nav-h);
}

.hero__content { position: relative; z-index: 2; max-width: 900px; }
.hero .lead { margin: var(--sp-6) 0 var(--sp-8); }

.hero__cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

.hero__meta {
  margin-top: var(--sp-10);
  display: flex;
  gap: var(--sp-6);
  flex-wrap: wrap;
  font-size: var(--fs-footnote);
  line-height: var(--lh-footnote);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--label-secondary);
}

.page-hero {
  position: relative;
  padding: calc(var(--nav-h) + var(--sp-12)) 0 var(--sp-10);
}
.page-hero .container { position: relative; z-index: 2; }

.section { padding: var(--sp-12) 0; position: relative; }

/* A tinted band reads as a recessed grouped-content area in HIG. */
.section--tint {
  background: var(--fill-quaternary);
  border-block: 0.5px solid var(--separator);
}

.section__head { max-width: 680px; margin-bottom: var(--sp-10); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head .lead { margin-top: var(--sp-4); }

/* ==========================================================================
   7. SURFACES — cards, values, stats
   ========================================================================== */

.values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}

.value,
.card {
  background: var(--mat-regular);
  -webkit-backdrop-filter: var(--blur-regular);
  backdrop-filter: var(--blur-regular);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  box-shadow: var(--elev-2), var(--glass-highlight);
  padding: var(--sp-7) var(--sp-6);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.value:hover,
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--elev-3), var(--glass-highlight);
}

.value__num,
.card__num,
.step__num {
  display: block;
  font-size: var(--fs-caption1);
  line-height: var(--lh-caption1);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: var(--sp-4);
}

.value svg {
  width: 28px;
  height: 28px;
  stroke: var(--accent);
  fill: none;
  margin-bottom: var(--sp-4);
}

.value h3,
.card h3 {
  font-size: var(--fs-title3);
  line-height: var(--lh-title3);
  font-weight: 600;
  letter-spacing: var(--tr-title);
  margin-bottom: var(--sp-2);
}

.value p,
.card p {
  font-size: var(--fs-subheadline);
  line-height: 1.5;
  color: var(--label-secondary);
}

.card__link {
  display: inline-block;
  margin-top: var(--sp-5);
  font-size: var(--fs-subheadline);
  font-weight: 600;
  color: var(--accent-strong);
  transition: opacity var(--dur-fast) var(--ease);
}
.card__link::after { content: ' ›'; }
.card__link:hover { opacity: 0.7; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }

/* ---------- Stats ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  text-align: center;
}

.stat {
  background: var(--mat-thin);
  -webkit-backdrop-filter: var(--blur-thin);
  backdrop-filter: var(--blur-thin);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  box-shadow: var(--elev-1), var(--glass-highlight);
  padding: var(--sp-8) var(--sp-5);
}

.stat h3 {
  font-size: var(--fs-display2);
  font-weight: 700;
  letter-spacing: var(--tr-display);
  line-height: 1;
  color: var(--accent);
}

.stat p {
  font-size: var(--fs-footnote);
  line-height: var(--lh-footnote);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--label-secondary);
  margin-top: var(--sp-2);
}

/* ---------- Process ---------- */

.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
.step { padding-top: var(--sp-5); border-top: 1px solid var(--separator); }
.step h3 {
  font-size: var(--fs-title3);
  line-height: var(--lh-title3);
  font-weight: 600;
  margin-bottom: var(--sp-2);
}
.step p { font-size: var(--fs-subheadline); line-height: 1.5; color: var(--label-secondary); }

/* ==========================================================================
   8. WORK / PORTFOLIO
   ========================================================================== */

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

.work {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--bg-secondary);
  border: 1px solid var(--glass-border);
  box-shadow: var(--elev-2);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.work:hover { transform: translateY(-4px); box-shadow: var(--elev-3); }

.work img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.work:hover img { transform: scale(1.04); }

/* Caption plate — a material over the photo, HIG's pattern for text on top
   of imagery. Uses the thin (not ultra-thin) material: the photography
   underneath is arbitrary, and labels have to stay legible over a blown-out
   sky as well as a dark interior. */
.work__label {
  position: absolute;
  inset: auto var(--sp-3) var(--sp-3) var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--mat-thin);
  -webkit-backdrop-filter: var(--blur-thin);
  backdrop-filter: var(--blur-thin);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight);
}

.work__label h3 {
  font-size: var(--fs-headline, 1.0625rem);
  line-height: var(--lh-body);
  font-weight: 600;
  color: var(--label);
}
.work__label > span {
  font-size: var(--fs-caption1);
  line-height: var(--lh-caption1);
  color: var(--label-secondary);
}

.work__meta {
  display: flex;
  gap: var(--sp-1);
  align-items: center;
  font-size: var(--fs-caption2);
  line-height: var(--lh-caption2);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--label-secondary);
  margin-bottom: var(--sp-1);
}
.work__meta .dot { color: var(--accent); }

/* Typographic tile for categories without photography yet */
.work--type {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fill-quaternary);
}
.work--type .work__mark {
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 700;
  letter-spacing: var(--tr-display);
  color: var(--accent);
}

/* ---------- Filters — segmented control ---------- */

.filters {
  display: inline-flex;
  padding: 2px;
  border-radius: var(--r-full);
  background: var(--fill-tertiary);
  -webkit-backdrop-filter: var(--blur-thin);
  backdrop-filter: var(--blur-thin);
  border: 0.5px solid var(--glass-border);
  margin-bottom: var(--sp-8);
  flex-wrap: wrap;
}

.filter-btn {
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-subheadline);
  line-height: 1;
  font-weight: 600;
  color: var(--label-secondary);
  padding: 0 var(--sp-5);
  min-height: 34px;
  border-radius: var(--r-full);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.filter-btn:hover { color: var(--label); }
.filter-btn.active {
  background: var(--bg);
  color: var(--label);
  box-shadow: var(--elev-1);
}

/* ==========================================================================
   9. SPLIT LAYOUT
   ========================================================================== */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-10);
  align-items: center;
}
.split--reverse .split__media { order: 2; }

.split__media {
  border-radius: var(--r-2xl);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: var(--elev-3);
  aspect-ratio: 4 / 3;
  background: var(--bg-secondary);
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }

.split__body .lead { margin-top: var(--sp-4); }

.checklist { margin-top: var(--sp-5); display: grid; gap: var(--sp-3); }
.checklist li {
  display: flex;
  gap: var(--sp-3);
  align-items: baseline;
  font-size: var(--fs-callout);
  line-height: 1.45;
  color: var(--label-secondary);
}
/* HIG checkmark rather than a decorative dash */
.checklist li::before {
  content: '􀆅';
  content: '✓';
  color: var(--accent-strong);
  font-weight: 700;
  flex-shrink: 0;
}

/* ==========================================================================
   10. CTA BAND
   ========================================================================== */

.cta-band {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: var(--sp-12) var(--sp-6);
  margin: var(--sp-12) auto;
  width: min(var(--container), 100% - (var(--margin-regular) * 2));
  border-radius: var(--r-2xl);
  background: var(--mat-thick);
  -webkit-backdrop-filter: var(--blur-thick);
  backdrop-filter: var(--blur-thick);
  border: 1px solid var(--glass-border);
  box-shadow: var(--elev-4), var(--glass-highlight);
}
.cta-band .container { position: relative; z-index: 2; width: 100%; }
.cta-band .h2 { max-width: 20ch; margin-inline: auto; }
.cta-band .lead { margin: var(--sp-5) auto var(--sp-8); }
.cta-band .hero__cta { justify-content: center; }

/* ==========================================================================
   11. CONTACT & FORMS (HIG grouped-inset)
   ========================================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--sp-10);
  align-items: start;
}

.contact-item {
  padding: var(--sp-5) 0;
  border-bottom: 0.5px solid var(--separator);
}
.contact-item > span {
  display: block;
  font-size: var(--fs-footnote);
  line-height: var(--lh-footnote);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--label-secondary);
  margin-bottom: var(--sp-1);
}
.contact-item a, .contact-item p {
  font-size: var(--fs-title3);
  line-height: var(--lh-title3);
  color: var(--label);
}
.contact-item a:hover { color: var(--accent-strong); }

.form {
  background: var(--mat-regular);
  -webkit-backdrop-filter: var(--blur-regular);
  backdrop-filter: var(--blur-regular);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-2xl);
  box-shadow: var(--elev-3), var(--glass-highlight);
  padding: var(--sp-8);
  display: grid;
  gap: var(--sp-5);
}

/* Honeypot: kept in normal layout flow (not display:none) so form-filling
   bots that check computed style still populate it. Real visitors never
   see or reach it. */
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }

.field { display: grid; gap: var(--sp-2); }

.field label {
  font-size: var(--fs-footnote);
  line-height: var(--lh-footnote);
  font-weight: 600;
  letter-spacing: var(--tr-caption);
  color: var(--label-secondary);
}

.field input,
.field select,
.field textarea {
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--label);
  background: var(--fill-tertiary);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  min-height: var(--hit);
  outline: none;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.field input::placeholder,
.field textarea::placeholder { color: var(--label-tertiary); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  background: var(--bg);
  border-color: var(--accent-strong);
}

.field textarea { resize: vertical; min-height: 132px; }

/* HIG chevron for the select, since the native border is gone */
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--sp-9);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238E8E93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  background-size: 16px;
}
.field select option { background: var(--bg); color: var(--label); }

/* ---------- Form submit state ---------- */
.form__status {
  display: none;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  font-size: var(--fs-subheadline);
  line-height: 1.4;
}
.form__status.is-visible { display: flex; }
.form__status--success {
  background: color-mix(in srgb, var(--green) 15%, transparent);
  color: var(--label);
}
.form__status--error {
  background: color-mix(in srgb, var(--red) 15%, transparent);
  color: var(--label);
}
.form__status svg { width: 20px; height: 20px; flex-shrink: 0; }
.form__status--success svg { stroke: var(--green); }
.form__status--error svg { stroke: var(--red); }

.btn[disabled] { opacity: 0.6; cursor: not-allowed; }

/* ==========================================================================
   12. FOOTER
   ========================================================================== */

.footer {
  padding: var(--sp-10) 0 var(--sp-6);
  border-top: 0.5px solid var(--separator);
  background: var(--mat-thin);
  -webkit-backdrop-filter: var(--blur-thin);
  backdrop-filter: var(--blur-thin);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--sp-8);
  margin-bottom: var(--sp-8);
}

.footer__logo img { height: 64px; width: auto; margin-bottom: var(--sp-4); }
.footer p {
  font-size: var(--fs-subheadline);
  line-height: 1.5;
  color: var(--label-secondary);
  max-width: 38ch;
}

.footer h4 {
  font-size: var(--fs-footnote);
  line-height: var(--lh-footnote);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--label-secondary);
  margin-bottom: var(--sp-4);
}

.footer ul { display: grid; gap: var(--sp-3); font-size: var(--fs-subheadline); }
.footer ul a { color: var(--label-secondary); transition: color var(--dur-fast) var(--ease); }
.footer ul a:hover { color: var(--accent-strong); }

.footer__bar {
  border-top: 0.5px solid var(--separator);
  padding-top: var(--sp-5);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  font-size: var(--fs-caption1);
  line-height: var(--lh-caption1);
  color: var(--label-secondary);
}

/* ==========================================================================
   13. RESPONSIVE
   ========================================================================== */

@media (max-width: 960px) {
  .grid-4, .process, .values { grid-template-columns: repeat(2, 1fr); }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .split, .split--reverse { grid-template-columns: 1fr; gap: var(--sp-8); }
  .split--reverse .split__media { order: 0; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .nav__links { gap: var(--sp-5); }
}

@media (max-width: 680px) {
  :root { --margin-regular: var(--margin-compact); }

  /* The nav's backdrop-filter makes it the containing block for fixed
     descendants, so the mobile menu must be absolutely positioned under
     the bar rather than fixed to the viewport. */
  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100svh - var(--nav-h));
    /* Near-opaque: this is a full-screen takeover, and --mat-thick alone
       still let bold hero text ghost through the blur at this scale. */
    background: var(--bg);
    -webkit-backdrop-filter: var(--blur-thick);
    backdrop-filter: var(--blur-thick);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: var(--sp-10);
    gap: var(--sp-7);
    font-size: var(--fs-title2);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
  }
  .nav__links.open { opacity: 1; visibility: visible; }
  .nav__burger { display: block; }
  .nav__actions .btn { display: none; }

  .grid-2, .grid-4, .process, .form__row, .stats, .values { grid-template-columns: 1fr; }
  .work-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }

  .section { padding: var(--sp-10) 0; }
  .form { padding: var(--sp-6); }
  .cta-band { padding: var(--sp-10) var(--sp-5); border-radius: var(--r-xl); }

  /* Too many segments for a 375px track: keep them on one row and let the
     control scroll sideways rather than wrapping into a blob. */
  .filters {
    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .filters::-webkit-scrollbar { display: none; }
  .filter-btn { flex: 0 0 auto; }
}

/* HIG asks for 44pt minimum hit targets on touch. The compact 28–34px
   control sizes above are correct for pointer devices only, so grow the
   small controls wherever the primary input is a finger. */
@media (pointer: coarse), (max-width: 680px) {
  .segmented__opt { min-height: var(--hit); padding-inline: var(--sp-4); }
  .icon-btn { width: var(--hit); height: var(--hit); }
  .filter-btn { min-height: var(--hit); }
}

/* ==========================================================================
   14. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}