/* ============================================================
   Patwin Plastics. Plastic extrusion specialists.
   Graphite/near-black neutrals + brand GREEN accent (from logo)
   Display: Cabinet Grotesk · Body: Satoshi · Mono labels: monospace
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Type scale (fluid) */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 0.95rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem);
  --text-2xl: clamp(2rem, 1.3rem + 2.4vw, 3.25rem);
  --text-3xl: clamp(2.5rem, 1.2rem + 3.8vw, 4.5rem);

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

  --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-full: 9999px;
  --transition-interactive: 200ms cubic-bezier(0.16, 1, 0.3, 1);

  --content-narrow: 680px;
  --content-default: 1040px;
  --content-wide: 1280px;

  --font-display: 'Cabinet Grotesk', 'Arial Narrow', sans-serif;
  --font-body: 'Satoshi', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

/* ---------- Light theme (default) ---------- */
:root, [data-theme="light"] {
  --color-bg:            #ECECEA;
  --color-surface:       #F5F5F3;
  --color-surface-2:     #FBFBFA;
  --color-surface-offset:#E2E2DF;
  --color-surface-dark:  #1A1C1F; /* graphite panel within light mode */
  --color-divider:       #D6D6D2;
  --color-border:        #C7C7C2;

  --color-text:          #1B1D20;
  --color-text-muted:    #5C5F63;
  --color-text-faint:    #8C8F93;
  --color-text-inverse:  #F5F5F3;

  --color-accent:        #1E8E4E;
  --color-accent-hover:  #176B3B;
  --color-accent-active: #125831;
  --color-accent-soft:   #D8EFE0;
  --color-brand-green:   #22C55E;

  --grid-line: rgba(27,29,32,0.06);
  --shadow-sm: 0 1px 2px rgba(20,22,25,0.07);
  --shadow-md: 0 6px 20px rgba(20,22,25,0.10);
  --shadow-lg: 0 18px 48px rgba(20,22,25,0.14);
}

/* ---------- Dark theme ---------- */
[data-theme="dark"] {
  --color-bg:            #131517;
  --color-surface:       #191B1E;
  --color-surface-2:     #1F2226;
  --color-surface-offset:#232629;
  --color-surface-dark:  #0E0F11;
  --color-divider:       #2A2D31;
  --color-border:        #34383D;

  --color-text:          #E7E8E9;
  --color-text-muted:    #9DA1A6;
  --color-text-faint:    #6B6F74;
  --color-text-inverse:  #131517;

  --color-accent:        #34C26A;
  --color-accent-hover:  #52D483;
  --color-accent-active: #6FE09A;
  --color-accent-soft:   #123322;
  --color-brand-green:   #22C55E;

  --grid-line: rgba(255,255,255,0.05);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.45);
  --shadow-lg: 0 18px 48px rgba(0,0,0,0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:#131517; --color-surface:#191B1E; --color-surface-2:#1F2226;
    --color-surface-offset:#232629; --color-surface-dark:#0E0F11; --color-divider:#2A2D31;
    --color-border:#34383D; --color-text:#E7E8E9; --color-text-muted:#9DA1A6;
    --color-text-faint:#6B6F74; --color-text-inverse:#131517; --color-accent:#34C26A;
    --color-accent-hover:#52D483; --color-accent-active:#6FE09A; --color-accent-soft:#123322;
    --color-brand-green:#22C55E;
    --grid-line:rgba(255,255,255,0.05);
  }
}

/* ---------- Base reset ---------- */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: none; text-size-adjust: none;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}
body {
  min-height: 100dvh; line-height: 1.6;
  font-family: var(--font-body); font-size: var(--text-base);
  color: var(--color-text); background: var(--color-bg);
}
img,picture,svg { display: block; max-width: 100%; height: auto; }
ul[role="list"] { list-style: none; }
input,button,textarea,select { font: inherit; color: inherit; }
h1,h2,h3,h4 { text-wrap: balance; line-height: 1.08; font-family: var(--font-display); letter-spacing: -0.02em; }
p,li { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; background: none; border: none; }
table { border-collapse: collapse; width: 100%; }

::selection { background: var(--color-accent); color: #fff; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: var(--radius-sm); }

a, button, [role="button"], input, textarea, select {
  transition: color var(--transition-interactive), background var(--transition-interactive),
    border-color var(--transition-interactive), box-shadow var(--transition-interactive),
    transform var(--transition-interactive);
}

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

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.skip-link {
  position:absolute; left:var(--space-3); top:-3rem; z-index:200;
  background: var(--color-accent); color:#fff; padding:var(--space-2) var(--space-4);
  border-radius: var(--radius-md); font-size: var(--text-sm); font-weight:600;
}
.skip-link:focus { top: var(--space-3); }

/* ---------- Layout helpers ---------- */
.wrap { width:100%; max-width: var(--content-wide); margin-inline:auto; padding-inline: var(--space-6); }
.wrap-narrow { max-width: var(--content-narrow); }
.wrap-default { max-width: var(--content-default); }
.section { padding-block: clamp(var(--space-16), 8vw, var(--space-32)); }
.section--tight { padding-block: clamp(var(--space-12), 6vw, var(--space-20)); }

/* mono spec label */
.label {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight:500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent);
  display:inline-flex; align-items:center; gap: var(--space-2);
}
.label::before {
  content:""; width:1.75rem; height:1px; background: var(--color-accent); display:inline-block;
}
.eyebrow { display:block; margin-bottom: var(--space-4); }

.section-head { max-width: 56ch; margin-bottom: var(--space-12); }
.section-head h2 { font-size: var(--text-2xl); margin-top: var(--space-3); }
.section-head p { color: var(--color-text-muted); font-size: var(--text-lg); margin-top: var(--space-4); }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; gap: var(--space-2);
  font-weight:600; font-size: var(--text-sm); letter-spacing:0.01em;
  padding: var(--space-3) var(--space-6); border-radius: var(--radius-md);
  border:1px solid transparent; line-height:1.2; white-space:nowrap;
}
.btn--primary { background: var(--color-accent); color:#fff; }
.btn--primary:hover { background: var(--color-accent-hover); transform: translateY(-1px); }
.btn--primary:active { background: var(--color-accent-active); transform: translateY(0); }
.btn--ghost { border-color: var(--color-border); color: var(--color-text); }
.btn--ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }
.btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--text-base); }
.btn svg { width:1.1em; height:1.1em; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top:0; z-index:100;
  background: color-mix(in oklab, var(--color-bg) 86%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom:1px solid var(--color-divider);
}
.site-header .wrap {
  display:flex; align-items:center; justify-content:space-between;
  height: 5.6rem; gap: var(--space-6);
}
.brand { display:flex; align-items:center; gap: var(--space-3); flex-shrink:0; }
/* Real Patwin logo image: swap light/dark variant by theme */
.brand-logo { display:block; width:auto; }
.site-header .brand-logo { height: 4.2rem; }
.site-footer .brand-logo { height: 3.6rem; }
.logo-dark { display:none; }
[data-theme="dark"] .logo-light { display:none; }
[data-theme="dark"] .logo-dark { display:block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .logo-light { display:none; }
  :root:not([data-theme]) .logo-dark { display:block; }
}

.nav { display:flex; align-items:center; gap: var(--space-1); }
.nav a {
  font-size: var(--text-sm); font-weight:500; color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); position:relative;
}
.nav a:hover { color: var(--color-text); }
.nav a[aria-current="page"] { color: var(--color-text); }
.nav a[aria-current="page"]::after {
  content:""; position:absolute; left:var(--space-3); right:var(--space-3); bottom:-2px;
  height:2px; background: var(--color-accent);
}
.header-actions { display:flex; align-items:center; gap: var(--space-3); }

[data-theme-toggle] {
  display:inline-flex; align-items:center; justify-content:center;
  width: 2.75rem; height:2.75rem; border-radius: var(--radius-md);
  border:1px solid var(--color-border); color: var(--color-text-muted);
}
[data-theme-toggle]:hover { color: var(--color-accent); border-color: var(--color-accent); }

.nav-toggle { display:none; width:2.75rem; height:2.75rem; border:1px solid var(--color-border);
  border-radius: var(--radius-md); align-items:center; justify-content:center; color: var(--color-text); }

/* ---------- Hero ---------- */
.hero { position:relative; overflow:hidden; background: var(--color-surface-dark); color:#F5F5F3; }
.hero::before {
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px; opacity:0.5; pointer-events:none;
}
.hero .wrap { position:relative; z-index:2; padding-block: clamp(var(--space-20), 9vw, var(--space-32)); }
.hero-grid { display:grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-16); align-items:center; }
.hero .label { color: var(--color-accent); }
.hero .label::before { background: var(--color-accent); }
.hero h1 { font-size: var(--text-3xl); margin: var(--space-6) 0 var(--space-6); color:#fff; }
.hero h1 .accent { color: var(--color-accent); }
.hero p.lead { font-size: var(--text-lg); color:#C7C9CC; max-width: 46ch; }
.hero-actions { display:flex; flex-wrap:wrap; gap: var(--space-4); margin-top: var(--space-8); }
.hero .btn--ghost { border-color: rgba(255,255,255,0.35); color:#F5F5F3; }
.hero .btn--ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }
.hero-figure { position:relative; border-radius: var(--radius-lg); overflow:hidden;
  border:1px solid rgba(255,255,255,0.12); box-shadow: var(--shadow-lg); }
.hero-figure img { width:100%; aspect-ratio: 16/11; object-fit:cover; }
.hero-figure .fig-tag {
  position:absolute; left:var(--space-4); bottom:var(--space-4);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing:0.12em;
  background: rgba(14,15,17,0.78); color:#F5F5F3; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); border:1px solid rgba(255,255,255,0.14); backdrop-filter: blur(4px);
}

/* stat strip */
.stat-strip { border-top:1px solid rgba(255,255,255,0.12); position:relative; z-index:2; }
.stat-strip .wrap { display:grid; grid-template-columns: repeat(4,1fr); gap: var(--space-6);
  padding-block: var(--space-8); }
.stat { }
.stat .num { font-family: var(--font-display); font-size: var(--text-xl); font-weight:700; color:#fff; }
.stat .num .accent { color: var(--color-accent); }
.stat .cap { font-size: var(--text-sm); color:#9DA1A6; margin-top: var(--space-1); }

/* ---------- Capability strip ---------- */
.cap-strip { background: var(--color-surface); border-bottom:1px solid var(--color-divider); }
.cap-strip .wrap { display:grid; grid-template-columns: repeat(4,1fr); gap:0; }
.cap-item { padding: var(--space-8) var(--space-6); border-left:1px solid var(--color-divider); }
.cap-item:first-child { border-left:none; padding-left:0; }
.cap-item .ci-num { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-accent); letter-spacing:0.15em; }
.cap-item h3 { font-size: var(--text-lg); margin: var(--space-3) 0 var(--space-2); }
.cap-item p { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---------- Card grid ---------- */
.grid { display:grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2,1fr); }
.grid-3 { grid-template-columns: repeat(3,1fr); }
.grid-4 { grid-template-columns: repeat(4,1fr); }

.card {
  background: var(--color-surface); border:1px solid var(--color-divider);
  border-radius: var(--radius-lg); overflow:hidden; display:flex; flex-direction:column;
  position:relative; transition: border-color var(--transition-interactive), transform var(--transition-interactive), box-shadow var(--transition-interactive);
}
.card:hover { border-color: var(--color-border); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card-media { position:relative; aspect-ratio: 4/3; overflow:hidden; background: var(--color-surface-offset); }
.card-media img { width:100%; height:100%; object-fit:cover; transition: transform 400ms cubic-bezier(0.16,1,0.3,1); }
.card:hover .card-media img { transform: scale(1.04); }
/* Technical profile diagrams: line drawings on white, show whole shape */
.card-media--diagram { background:#FFFFFF; }
.card-media--diagram img { object-fit:contain; padding: var(--space-6); }
.card:hover .card-media--diagram img { transform: scale(1.03); }
.card-body { padding: var(--space-6); display:flex; flex-direction:column; gap: var(--space-3); flex:1; }
.card-body h3 { font-size: var(--text-lg); }
.card-body p { font-size: var(--text-sm); color: var(--color-text-muted); }
.card .spec {
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-faint);
  letter-spacing:0.06em; border-top:1px solid var(--color-divider); padding-top: var(--space-3); margin-top:auto;
}
.card .spec b { color: var(--color-text-muted); font-weight:600; }
.card-index { position:absolute; top:var(--space-4); right:var(--space-4); z-index:2;
  font-family: var(--font-mono); font-size: var(--text-xs); color:#F5F5F3;
  background: rgba(14,15,17,0.72); padding: 2px var(--space-2); border-radius: var(--radius-sm); }

/* ---------- Feature row (alternating) ---------- */
.feature { display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items:center; }
.feature + .feature { margin-top: clamp(var(--space-16), 8vw, var(--space-24)); }
.feature__media { border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--color-divider); box-shadow: var(--shadow-sm); }
.feature__media img { width:100%; aspect-ratio: 4/3; object-fit:cover; }
.feature--rev .feature__media { order:2; }
.feature h3 { font-size: var(--text-xl); margin: var(--space-3) 0 var(--space-4); }
.feature p { color: var(--color-text-muted); }
.feature ul { list-style:none; margin-top: var(--space-5); display:grid; gap: var(--space-2); }
.feature ul li { position:relative; padding-left: var(--space-6); font-size: var(--text-sm); }
.feature ul li::before { content:""; position:absolute; left:0; top:0.55em; width:0.6rem; height:0.6rem;
  background: var(--color-accent); border-radius:1px; }

/* spec table */
.spec-table { border:1px solid var(--color-divider); border-radius: var(--radius-lg); overflow:hidden; }
.spec-table .row { display:grid; grid-template-columns: 1fr 1.6fr; }
.spec-table .row + .row { border-top:1px solid var(--color-divider); }
.spec-table .k { padding: var(--space-4) var(--space-5); background: var(--color-surface);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing:0.08em; text-transform:uppercase;
  color: var(--color-text-muted); border-right:1px solid var(--color-divider); }
.spec-table .v { padding: var(--space-4) var(--space-5); font-size: var(--text-sm); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--color-surface-dark); color:#F5F5F3; position:relative; overflow:hidden; }
.cta-band::before { content:""; position:absolute; inset:0;
  background-image: linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size:48px 48px; opacity:0.5; }
.cta-band .wrap { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between;
  gap: var(--space-10); padding-block: clamp(var(--space-16), 7vw, var(--space-24)); flex-wrap:wrap; }
.cta-band h2 { font-size: var(--text-2xl); color:#fff; max-width: 18ch; }
.cta-band p { color:#C7C9CC; margin-top: var(--space-4); max-width: 44ch; }
.cta-band .accent { color: var(--color-accent); }
.cta-actions { display:flex; gap: var(--space-4); flex-wrap:wrap; }
.cta-band .btn--ghost { border-color: rgba(255,255,255,0.3); color:#fff; }
.cta-band .btn--ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-surface); border-top:1px solid var(--color-divider); padding-block: var(--space-16) var(--space-8); }
.footer-grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--space-10); }
.footer-brand .brand { margin-bottom: var(--space-4); }
.footer-brand p { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 34ch; }
.footer-col h4 { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing:0.16em; text-transform:uppercase;
  color: var(--color-text-faint); margin-bottom: var(--space-4); }
.footer-col ul { list-style:none; display:grid; gap: var(--space-2); }
.footer-col a, .footer-col p { font-size: var(--text-sm); color: var(--color-text-muted); }
.footer-col a:hover { color: var(--color-accent); }
.footer-contact address { font-style:normal; font-size: var(--text-sm); color: var(--color-text-muted); display:grid; gap: var(--space-2); }
.footer-contact a:hover { color: var(--color-accent); }
.footer-bottom { margin-top: var(--space-12); padding-top: var(--space-6); border-top:1px solid var(--color-divider);
  display:flex; justify-content:space-between; align-items:center; gap: var(--space-4); flex-wrap:wrap;
  font-size: var(--text-xs); color: var(--color-text-faint); }
.footer-bottom .made { display:inline-flex; align-items:center; gap: var(--space-2); }
.footer-bottom .made b { color: var(--color-text-muted); }

/* ---------- Page hero (interior) ---------- */
.page-hero { background: var(--color-surface); border-bottom:1px solid var(--color-divider); position:relative; overflow:hidden; }
.page-hero::before { content:""; position:absolute; inset:0;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:48px 48px; pointer-events:none; }
.page-hero .wrap { position:relative; z-index:2; padding-block: clamp(var(--space-16), 7vw, var(--space-24)); }
.page-hero h1 { font-size: var(--text-3xl); margin: var(--space-5) 0 var(--space-5); max-width: 20ch; }
.page-hero p { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 60ch; }
.breadcrumb { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-faint); letter-spacing:0.08em; }
.breadcrumb a:hover { color: var(--color-accent); }

/* ---------- Contact ---------- */
.contact-layout { display:grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-16); align-items:start; }
.form-card { background: var(--color-surface); border:1px solid var(--color-divider); border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 4vw, var(--space-10)); }
/* Honeypot: visually hidden, removed from layout and tab order; real visitors never see it, bots tend to fill it. */
.hp-field { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.field { margin-bottom: var(--space-5); }
.field label { display:block; font-size: var(--text-sm); font-weight:600; margin-bottom: var(--space-2); }
.field label .req { color: var(--color-accent); }
.field input, .field select, .field textarea {
  width:100%; background: var(--color-surface-2); border:1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--text-sm);
}
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft); }
.field textarea { resize:vertical; min-height: 7rem; }
.field-row { display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.form-note { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: var(--space-2); }
.contact-block { display:grid; gap: var(--space-6); }
.contact-item { display:grid; gap: var(--space-1); }
.contact-item .k { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing:0.14em; text-transform:uppercase; color: var(--color-accent); }
.contact-item a, .contact-item address { font-style:normal; font-size: var(--text-base); color: var(--color-text); }
.contact-item a:hover { color: var(--color-accent); }
.map-embed { border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--color-divider); margin-top: var(--space-8); }
.map-embed iframe { width:100%; height:320px; border:0; display:block; filter: grayscale(0.2); }

/* values / story */
.values { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-6); }
.value { padding: var(--space-8); background: var(--color-surface); border:1px solid var(--color-divider);
  border-radius: var(--radius-lg); border-top:3px solid var(--color-accent); }
.value h3 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.value p { font-size: var(--text-sm); color: var(--color-text-muted); }

.story-figure { border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--color-divider); }
.story-figure img { width:100%; aspect-ratio: 16/9; object-fit:cover; }

.prose { max-width: 68ch; }
.prose p { margin-bottom: var(--space-5); color: var(--color-text); }
.prose p + p { color: var(--color-text-muted); }

/* timeline */
.timeline { display:grid; gap: var(--space-6); margin-top: var(--space-8); }
.tl { display:grid; grid-template-columns: 7rem 1fr; gap: var(--space-6); padding-bottom: var(--space-6);
  border-bottom:1px solid var(--color-divider); }
.tl .yr { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-accent); font-weight:700; }
.tl h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.tl p { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---------- Reveal animation ----------
   Content is visible by default; JS adds .reveal-armed to enable the hidden
   start state only when scroll-reveal is actually running. This guarantees
   content never stays invisible if JS or IntersectionObserver fails. */
.reveal-armed .reveal { opacity:0; transform: translateY(16px); transition: opacity 600ms cubic-bezier(0.16,1,0.3,1), transform 600ms cubic-bezier(0.16,1,0.3,1); }
.reveal-armed .reveal.in { opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns:1fr; gap: var(--space-10); }
  .hero-figure { order:-1; }
  .stat-strip .wrap { grid-template-columns: repeat(2,1fr); gap: var(--space-6); }
  .cap-strip .wrap { grid-template-columns: repeat(2,1fr); }
  .cap-item { border-left:none; border-top:1px solid var(--color-divider); padding-left: var(--space-6); }
  .cap-item:first-child { border-top:none; padding-left: var(--space-6); }
  .cap-item:nth-child(-n+2) { border-top:none; }
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .grid-3 { grid-template-columns: repeat(2,1fr); }
  .feature, .feature--rev { grid-template-columns:1fr; gap: var(--space-8); }
  .feature--rev .feature__media { order:-1; }
  .feature__media { order:-1; }
  .contact-layout { grid-template-columns:1fr; gap: var(--space-12); }
  .values { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 1080px) {
  .nav, .header-actions .desktop-cta { display:none; }
  .nav-toggle { display:inline-flex; }
  .site-header .wrap { height: 5rem; }
  .nav.open {
    display:flex; flex-direction:column; align-items:stretch;
    position:absolute; top:5rem; left:0; right:0;
    background: var(--color-surface); border-bottom:1px solid var(--color-divider);
    padding: var(--space-4); gap: var(--space-1); box-shadow: var(--shadow-md);
  }
  .nav.open a { padding: var(--space-3) var(--space-4); font-size: var(--text-base); }
  .nav.open a[aria-current="page"]::after { display:none; }
  .nav.open a[aria-current="page"] { color: var(--color-accent); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns:1fr; }
  .stat-strip .wrap { grid-template-columns: repeat(2,1fr); }
  .cap-strip .wrap { grid-template-columns:1fr; }
  .cap-item, .cap-item:first-child { border-left:none; border-top:1px solid var(--color-divider); padding: var(--space-6) 0; }
  .cap-item:first-child { border-top:none; }
  .footer-grid { grid-template-columns:1fr; }
  .field-row { grid-template-columns:1fr; }
  .tl { grid-template-columns:1fr; gap: var(--space-2); }
  .cta-band .wrap { flex-direction:column; align-items:flex-start; }
}

/* ============================================================
   Catalog page. Full profile library (catalog.html)
   Reuses tokens, .card-media--diagram treatment, .label, .btn, .page-hero
   ============================================================ */

/* Sticky filter / search bar */
.catalog-toolbar {
  position: sticky; top: 4.5rem; z-index: 50;
  background: color-mix(in oklab, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-divider);
}
.catalog-toolbar .wrap { padding-block: var(--space-5); display: grid; gap: var(--space-4); }
.catalog-search {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-2) var(--space-4);
}
.catalog-search:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.catalog-search svg { width: 1.1rem; height: 1.1rem; color: var(--color-text-faint); flex-shrink: 0; }
.catalog-search input {
  flex: 1; border: none; background: transparent; padding: var(--space-2) 0;
  font-size: var(--text-sm); outline: none; min-width: 0;
}
.catalog-search .clear-search {
  display: none; color: var(--color-text-faint); font-family: var(--font-mono);
  font-size: var(--text-xs); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
}
.catalog-search .clear-search:hover { color: var(--color-accent); }
.catalog-search.has-text .clear-search { display: inline-flex; }

.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-full);
  border: 1px solid var(--color-border); color: var(--color-text-muted);
  background: var(--color-surface); white-space: nowrap; line-height: 1.2;
}
.chip:hover { border-color: var(--color-accent); color: var(--color-accent); }
.chip[aria-pressed="true"] {
  background: var(--color-accent); border-color: var(--color-accent); color: #fff;
}
.chip .chip-count { opacity: 0.7; margin-left: var(--space-1); }
.catalog-count {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em;
  color: var(--color-text-faint); text-transform: uppercase;
}
.catalog-count b { color: var(--color-accent); font-weight: 600; }

/* Catalog sections */
.catalog-sections { padding-block: clamp(var(--space-12), 6vw, var(--space-20)); }
.catalog-line { scroll-margin-top: 9.5rem; }
.catalog-line + .catalog-line { margin-top: clamp(var(--space-16), 7vw, var(--space-24)); }
.catalog-line-head {
  border-bottom: 1px solid var(--color-divider); padding-bottom: var(--space-5);
  margin-bottom: var(--space-8);
}
.catalog-line-head h2 { font-size: var(--text-xl); }
.catalog-line-head .line-blurb { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-3); max-width: 70ch; }
.catalog-line-head .line-meta {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em;
  color: var(--color-text-faint); margin-top: var(--space-4);
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: baseline;
}
.catalog-line-head .line-meta b { color: var(--color-text-muted); font-weight: 600; }
.catalog-line-head .line-meta .src-link { color: var(--color-accent); }
.catalog-line-head .line-meta .src-link:hover { color: var(--color-accent-hover); text-decoration: underline; }

/* Compact catalog grid: ~5-6 wide desktop, 3-4 tablet, 2 mobile */
.catalog-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}
.catalog-item {
  text-align: left; width: 100%;
  background: var(--color-surface); border: 1px solid var(--color-divider);
  border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column;
  transition: border-color var(--transition-interactive), transform var(--transition-interactive), box-shadow var(--transition-interactive);
}
.catalog-item:hover { border-color: var(--color-accent); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.catalog-item .item-media {
  position: relative; aspect-ratio: 4/3; overflow: hidden;
  background: var(--color-surface-offset); display: flex; align-items: center; justify-content: center;
}
.catalog-item .item-media img { width: 100%; height: 100%; object-fit: cover; }
/* Diagrams: line art on a light/white rounded box so they stay legible in dark mode */
.catalog-item .item-media--diagram { background: #FFFFFF; }
.catalog-item .item-media--diagram img { object-fit: contain; padding: var(--space-4); }
.catalog-item .item-cap {
  padding: var(--space-3) var(--space-4); display: grid; gap: 2px; flex: 1;
}
.catalog-item .item-part {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.04em; color: var(--color-text);
}
.catalog-item .item-sub {
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-faint);
  letter-spacing: 0.03em;
}
.catalog-item .item-sub .item-note { color: var(--color-accent); }

/* Hidden via filter */
.catalog-item[hidden], .catalog-line[hidden] { display: none; }

/* Empty state */
.catalog-empty {
  text-align: center; padding: var(--space-20) var(--space-6); color: var(--color-text-muted);
}
.catalog-empty h2 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.catalog-empty p { font-size: var(--text-sm); color: var(--color-text-faint); }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 300; display: none;
  align-items: center; justify-content: center; padding: var(--space-6);
  background: rgba(10,11,13,0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.lightbox.open { display: flex; }
.lightbox-dialog {
  position: relative; max-width: min(680px, 92vw); width: 100%;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
}
.lightbox-figure {
  background: var(--color-surface-offset); display: flex; align-items: center; justify-content: center;
  padding: var(--space-6); min-height: 220px;
}
.lightbox-figure--diagram { background: #FFFFFF; }
.lightbox-figure img { max-width: 100%; max-height: 60vh; width: auto; height: auto; object-fit: contain; }
.lightbox-cap { padding: var(--space-5) var(--space-6); border-top: 1px solid var(--color-divider); }
.lightbox-cap .lb-line {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-2);
}
.lightbox-cap .lb-part { font-family: var(--font-display); font-size: var(--text-lg); }
.lightbox-cap .lb-sub { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-1); }
.lightbox-close {
  position: absolute; top: var(--space-3); right: var(--space-3); z-index: 2;
  width: 2.4rem; height: 2.4rem; border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(14,15,17,0.72); color: #F5F5F3; border: 1px solid rgba(255,255,255,0.16);
}
.lightbox-close:hover { background: var(--color-accent); border-color: var(--color-accent); }
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 2.8rem; height: 2.8rem; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(14,15,17,0.72); color: #F5F5F3; border: 1px solid rgba(255,255,255,0.16);
}
.lightbox-nav:hover { background: var(--color-accent); border-color: var(--color-accent); }
.lightbox-nav--prev { left: var(--space-3); }
.lightbox-nav--next { right: var(--space-3); }

/* Products overview: make summary cards link nicely */
.card-link { color: inherit; display: flex; flex-direction: column; flex: 1; }
.card-cta {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em;
  color: var(--color-accent); font-weight: 600; margin-top: var(--space-3);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.card.card--linked:hover .card-cta { gap: var(--space-3); }
.products-cta-row { margin-bottom: var(--space-10); display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }

@media (max-width: 1080px) {
  .catalog-toolbar { top: 5rem; }
  .catalog-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .catalog-line { scroll-margin-top: 11rem; }
  .lightbox-nav { width: 2.75rem; height: 2.75rem; }
  .products-cta-row .btn { white-space: normal; text-align: center; }
}

/* ---------- FAQ (contact page) ---------- */
.faq-section { padding-top: 0; }
.faq-list {
  display: grid;
  gap: var(--space-3);
  max-width: var(--content-narrow);
}
.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  overflow: hidden;
  transition: border-color var(--transition-interactive), background var(--transition-interactive);
}
.faq-item[open] {
  border-color: var(--color-accent);
  background: var(--color-surface);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.4em;
  line-height: 1;
  color: var(--color-accent);
  flex: 0 0 auto;
  transition: transform var(--transition-interactive);
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary:hover { color: var(--color-accent); }
.faq-item summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}
.faq-answer {
  padding: 0 var(--space-6) var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.65;
}
.faq-answer p { margin: 0; }