/* ==========================================================================
   Pranthi Enterprise — stylesheet
   Hand-written CSS, custom-property tokens. No framework, no build step.
   ========================================================================== */

:root {
  /* Color */
  --c-ink-950: #0A0B0D;   /* footer, photo bed */
  --c-ink-900: #0F1113;   /* page background */
  --c-ink-800: #17181B;   /* cards, modal, elevated surfaces */
  --c-ink-700: #1E2126;   /* hairlines / dividers */
  --c-steel-600: #2A2D31; /* input borders, hover bg */
  --c-steel-400: #7A776F; /* muted / mono labels */
  --c-steel-300: #B8B5AD; /* body text on dark */
  --c-bone-100: #F5F3ED;  /* headline text on dark */
  --c-amber-500: #F0A020; /* accent — CTAs, focus, eyebrows. Only accent. */
  --c-amber-500-rgb: 240, 160, 32;
  --c-whatsapp: #25D366;  /* reserved for WhatsApp actions only */
  --c-danger-500: #C93A2A;

  /* Type */
  --f-display: 'Oswald', 'Arial Narrow', sans-serif;
  --f-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Spacing — 4px base */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-14: 56px; --s-20: 80px;

  /* Radii — sharp by design */
  --r-0: 0;
  --r-1: 1px;
  --r-2: 2px;

  /* Borders */
  --bw-1: 1px;
  --bw-2: 2px;
  --bw-3: 3px;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur-press: 80ms;
  --dur-modal: 240ms;

  --page-pad: 20px;
  --container-max: 1280px;
}

@media (min-width: 1024px) {
  :root { --page-pad: 40px; }
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-ink-900);
  color: var(--c-bone-100);
  font: 400 15px/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

main:focus { outline: none; }

/* Site-wide focus token */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: var(--bw-2) solid var(--c-amber-500);
  outline-offset: 3px;
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}

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

.skip-link {
  position: absolute;
  top: -48px; left: var(--s-4);
  background: var(--c-amber-500);
  color: var(--c-ink-900);
  font: 700 13px/1 var(--f-body);
  padding: var(--s-3) var(--s-4);
  z-index: 200;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--s-4); }

/* ---- Type roles ---- */
.eyebrow {
  font: 500 10px/1 var(--f-mono);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--c-amber-500);
}
.eyebrow--muted { color: var(--c-steel-400); }

.h-display { font: 600 42px/0.95 var(--f-display); letter-spacing: 0.005em; text-transform: uppercase; color: var(--c-bone-100); }
.h1 { font: 600 30px/0.98 var(--f-display); letter-spacing: 0.01em; text-transform: uppercase; color: var(--c-bone-100); }
.h2 { font: 600 22px/1.05 var(--f-display); letter-spacing: 0.02em; text-transform: uppercase; color: var(--c-bone-100); }
.h3 { font: 600 17px/1.1 var(--f-display); letter-spacing: 0.02em; text-transform: uppercase; color: var(--c-bone-100); }
.body-lg { font: 400 15px/1.5 var(--f-body); color: var(--c-steel-300); }
.body { font: 400 13px/1.55 var(--f-body); color: var(--c-steel-300); }
.small { font: 400 12px/1.5 var(--f-body); color: var(--c-steel-400); }

@media (min-width: 1024px) {
  .h-display { font-size: 88px; line-height: 0.9; }
  .h1 { font-size: 56px; line-height: 0.95; }
  .h2 { font-size: 44px; }
  .h3 { font-size: 22px; }
  .body-lg { font-size: 18px; }
  .body { font-size: 14px; }
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 0 var(--s-6);
  font: 700 13px/1 var(--f-body);
  letter-spacing: 0.02em;
  border: var(--bw-1) solid transparent;
  white-space: nowrap;
}
.btn-whatsapp { background: var(--c-whatsapp); color: var(--c-ink-900); }
.btn-whatsapp:hover { background: #21bd5c; color: var(--c-ink-900); }
.btn-outline { background: transparent; border-color: var(--c-amber-500); color: var(--c-amber-500); }
.btn-outline:hover { background: rgba(var(--c-amber-500-rgb), 0.08); color: var(--c-amber-500); }
.btn-solid { background: var(--c-amber-500); color: var(--c-ink-900); }
.btn-solid:hover { background: #ffb238; color: var(--c-ink-900); }
.btn-ghost { background: transparent; border-color: var(--c-steel-600); color: var(--c-bone-100); }
.btn-ghost:hover { border-color: var(--c-amber-500); color: var(--c-amber-500); }
.btn-block { width: 100%; }
.btn svg { flex-shrink: 0; }

/* ---- Header / nav ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 var(--page-pad);
  background: var(--c-ink-900);
  border-bottom: var(--bw-1) solid var(--c-ink-700);
}
@media (min-width: 1024px) { .site-header { height: 74px; } }

.brand { display: flex; align-items: center; gap: var(--s-3); }
.brand-mark {
  width: 26px; height: 26px;
  background: var(--c-amber-500);
  color: var(--c-ink-900);
  display: grid; place-items: center;
  font: 700 14px/1 var(--f-display);
  flex-shrink: 0;
}
@media (min-width: 1024px) { .brand-mark { width: 34px; height: 34px; font-size: 18px; } }
.brand-word {
  font: 600 15px/1 var(--f-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-bone-100);
}
@media (min-width: 1024px) { .brand-word { font-size: 18px; } }
.brand-sub {
  font: 400 11px/1 var(--f-mono);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c-steel-400);
  margin-top: 4px;
  display: none;
}
@media (min-width: 1024px) { .brand-sub { display: block; } }

.header-actions { display: flex; align-items: center; gap: var(--s-4); }
.icon-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  color: var(--c-bone-100);
}
.nav-toggle { display: flex; flex-direction: column; gap: 5px; width: 22px; }
.nav-toggle span { height: 2px; background: var(--c-bone-100); transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.primary-nav { display: none; }
@media (min-width: 1024px) {
  .primary-nav {
    display: flex;
    align-items: center;
    gap: var(--s-8);
    font: 500 14px/1 var(--f-body);
    color: var(--c-steel-300);
  }
  .primary-nav a[aria-current="page"] { color: var(--c-amber-500); }
  .primary-nav a:hover { color: var(--c-bone-100); }
  .header-phone { font: 500 13px/1 var(--f-body); color: rgba(231,229,223,0.65); white-space: nowrap; }
}
.header-phone { display: none; }
@media (min-width: 1024px) { .header-phone { display: inline; } }
.header-actions .nav-toggle,
.header-actions .call-icon { }
@media (min-width: 1024px) {
  .header-actions .nav-toggle,
  .header-actions .call-icon { display: none; }
}

/* Mobile nav sheet */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--c-ink-900);
  display: none;
  flex-direction: column;
  padding: var(--s-5);
}
.mobile-nav[data-open="true"] { display: flex; }
.mobile-nav-head { display: flex; justify-content: space-between; align-items: center; height: 40px; margin-bottom: var(--s-8); }
.mobile-nav ul { display: flex; flex-direction: column; }
.mobile-nav a {
  display: block;
  padding: var(--s-5) 0;
  font: 600 22px/1 var(--f-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--c-bone-100);
  border-bottom: var(--bw-1) solid var(--c-ink-700);
}
.mobile-nav a[aria-current="page"] { color: var(--c-amber-500); }
.mobile-nav-footer { margin-top: auto; padding-top: var(--s-8); }

/* ---- Hero ---- */
.hero {
  position: relative;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--s-6) var(--page-pad) var(--s-6);
  background: var(--c-ink-950)
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
    repeating-linear-gradient(135deg, #2a2d31 0 12px, #22252a 12px 24px);
  background-blend-mode: normal, normal;
  overflow: hidden;
}
@media (min-width: 1024px) { .hero { min-height: 540px; padding: var(--s-14) var(--page-pad); } }
.hero-eyebrow { position: absolute; top: var(--s-5); left: var(--page-pad); }
.hero-body { max-width: 620px; }
.hero-body p { margin-top: var(--s-4); margin-bottom: var(--s-5); max-width: 320px; }
@media (min-width: 1024px) { .hero-body p { max-width: 560px; font-size: 18px; } }
.hero-ctas { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.hero-ctas .btn { flex: 1 1 auto; min-width: 160px; height: 48px; }
@media (min-width: 1024px) { .hero-ctas .btn { height: 56px; flex: 0 0 auto; padding: 0 var(--s-8); } }

/* real photography — set background-image inline on the element, as a dark
   overlay layer over the photo. The url() must be written inline rather than
   passed through a custom property: a relative url() inside a custom property
   resolves against this stylesheet (/css/), not the page. */
.photo {
  background-color: var(--c-ink-950);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Hero text sits bottom-left, so weight the scrim downward — keeps sky and
   machinery visible up top while the headline and body stay legible. */
.hero.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.62) 55%, rgba(0,0,0,0.85) 100%);
}
/* lift content above the scrim without disturbing .hero-eyebrow's absolute placement */
.hero.photo .hero-eyebrow { z-index: 1; }
.hero.photo .hero-body { position: relative; z-index: 1; }

/* photo placeholder pattern — swap for real photography */
.photo-slot {
  background:
    linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
    repeating-linear-gradient(135deg, #2a2d31 0 10px, #22252a 10px 20px);
}
.photo-slot-b {
  background:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
    repeating-linear-gradient(45deg, #1c1c1c 0 10px, #131313 10px 20px);
}
.photo-caption {
  font: 500 9px/1.4 var(--f-mono);
  letter-spacing: 1.5px;
  color: rgba(245,243,237,0.45);
  text-align: right;
  text-transform: uppercase;
}

/* ---- Brand strip ---- */
.brand-strip {
  padding: var(--s-4) var(--page-pad);
  background: #131518;
  border-top: var(--bw-1) solid var(--c-ink-700);
  border-bottom: var(--bw-1) solid var(--c-ink-700);
  display: flex;
  align-items: center;
  gap: var(--s-8);
}
.brand-strip-label { font: 500 9px/1.4 var(--f-mono); letter-spacing: 2.5px; color: var(--c-steel-400); white-space: nowrap; }
.brand-strip-list {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6);
  font: 600 13px/1 var(--f-display); letter-spacing: 0.05em; text-transform: uppercase; color: var(--c-steel-300);
}
@media (min-width: 1024px) { .brand-strip-list { font-size: 15px; } }

/* ---- Section header ---- */
.section {
  padding: var(--s-8) 0;
}
@media (min-width: 1024px) { .section { padding: var(--s-20) 0; } }
.section-head {
  margin-bottom: var(--s-6);
}
.section-head h2 { margin-top: var(--s-2); }
@media (min-width: 1024px) {
  .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-8); margin-bottom: var(--s-8); }
  .section-head .body { max-width: 340px; text-align: right; }
}

/* ---- Tile grid (categories) ---- */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 768px) { .tile-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .tile-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; } }

.tile {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border: var(--bw-1) solid var(--c-ink-700);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.tile-bg {
  position: absolute; inset: 0;
  transition: filter var(--dur-fast) var(--ease-out);
}
.tile-content {
  position: absolute; inset: 0;
  padding: var(--s-3);
  display: flex; flex-direction: column; justify-content: space-between;
  color: var(--c-bone-100);
  /* keeps the photo readable up top, dark enough for the name/summary below */
  background: linear-gradient(rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.4) 45%, rgba(0,0,0,0.85) 100%);
}
@media (min-width: 1024px) { .tile-content { padding: var(--s-5); } }
.tile-top { display: flex; justify-content: space-between; align-items: center; }
.tile-code { font: 500 10px/1 var(--f-mono); letter-spacing: 2px; color: var(--c-amber-500); }
.tile-arrow { color: rgba(245,243,237,0.5); transition: color var(--dur-fast) var(--ease-out); }
.tile-name { font: 600 17px/1.05 var(--f-display); letter-spacing: 0.02em; text-transform: uppercase; }
@media (min-width: 1024px) { .tile-name { font-size: 24px; } }
.tile-summary { font: 400 11px/1.4 var(--f-body); color: rgba(245,243,237,0.6); margin-top: var(--s-1); }
.tile-cta {
  font: 600 11px/1 var(--f-body); letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--c-amber-500);
  margin-top: var(--s-3);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.tile:hover { border-color: var(--c-amber-500); box-shadow: inset 0 -4px 0 var(--c-amber-500); }
.tile:hover .tile-bg { filter: brightness(1.4); }
.tile:hover .tile-arrow { color: var(--c-amber-500); }
.tile:hover .tile-summary { color: rgba(255,255,255,0.85); }
.tile:hover .tile-cta { opacity: 1; transform: translateY(0); }
.tile:active { box-shadow: none; }
.tile:active .tile-bg { filter: brightness(0.9); }

@media (prefers-reduced-motion: reduce) {
  .tile, .tile-bg, .tile-arrow, .tile-summary, .tile-cta { transition: none; }
}

/* ---- Equipment tiles (catalog level 1) ----
   Deliberately picture-first: a buyer should recognise their machine from the
   photo alone, so these run larger and carry no summary line. */
.eq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 1024px) { .eq-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; } }
.tile-eq { aspect-ratio: 4 / 3; }
.tile-eq .tile-name { font-size: 19px; }
@media (min-width: 1024px) { .tile-eq .tile-name { font-size: 26px; } }
.tile-count {
  font: 500 10px/1 var(--f-mono);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(245,243,237,0.7);
  margin-top: var(--s-1);
}

/* ---- Detail-page CTA row (category + equipment pages) ----
   Wraps to one button per line on narrow screens; min-width:0 lets the long
   WhatsApp label shrink instead of pushing the row off-screen. */
.detail-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: var(--s-4) var(--page-pad);
  border-bottom: var(--bw-1) solid var(--c-ink-700);
}
.detail-ctas .btn { flex: 1 1 220px; min-width: 0; height: 46px; }

/* ---- Fallback CTA row ---- */
.fallback-cta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5);
  border: var(--bw-1) solid var(--c-steel-600);
  color: var(--c-bone-100);
  margin-top: var(--s-4);
}
.fallback-cta:hover { border-color: var(--c-amber-500); }
.fallback-cta strong { display: block; font: 600 15px/1.1 var(--f-display); text-transform: uppercase; letter-spacing: 0.02em; }
.fallback-cta .small { margin-top: var(--s-1); }
.fallback-cta .tile-cta { opacity: 1; transform: none; margin-top: 0; flex-shrink: 0; }

/* ---- Footer ---- */
.site-footer {
  background: var(--c-ink-950);
  border-top: var(--bw-1) solid var(--c-ink-700);
  padding: var(--s-10) 0 var(--s-8);
}
.footer-grid { display: grid; gap: var(--s-8); }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-8); } }
.footer-brand { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.footer-col-label { font: 500 10px/1 var(--f-mono); letter-spacing: 2px; color: var(--c-steel-400); margin-bottom: var(--s-3); text-transform: uppercase; }
.footer-phone { font: 600 20px/1.2 var(--f-display); color: var(--c-bone-100); letter-spacing: 0.02em; }
.footer-disclaimer {
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: var(--bw-1) solid var(--c-ink-700);
  font: 400 11px/1.6 var(--f-body);
  color: var(--c-steel-400);
  max-width: 760px;
}
.footer-bottom { margin-top: var(--s-6); font: 400 11px/1.6 var(--f-body); color: var(--c-steel-400); }

/* ---- Sticky WhatsApp bar (mobile) ---- */
.sticky-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  display: flex;
  gap: 1px;
  background: var(--c-ink-700);
  border-top: var(--bw-1) solid var(--c-ink-700);
  transform: translateY(0);
  transition: transform var(--dur-fast) var(--ease-out);
}
.sticky-bar[data-hidden="true"] { transform: translateY(100%); }
.sticky-bar .btn { flex: 1; height: 56px; border: 0; }
@media (min-width: 1024px) { .sticky-bar { display: none; } }
@media (prefers-reduced-motion: reduce) { .sticky-bar { transition: none; } }

/* ---- Reveal-on-scroll ---- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- Forms (enquiry modal + contact page) ---- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font: 500 10px/1 var(--f-mono); letter-spacing: 2px; text-transform: uppercase; color: var(--c-steel-400); }
.field input,
.field select,
.field textarea {
  background: var(--c-ink-900);
  border: var(--bw-1) solid var(--c-steel-600);
  color: var(--c-bone-100);
  min-height: 44px;
  padding: 0 var(--s-3);
  font: 500 14px/1 var(--f-body);
}
.field textarea { min-height: 74px; padding: var(--s-3); font-weight: 400; line-height: 1.5; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: rgba(231,229,223,0.4); font-weight: 400; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--c-amber-500); outline: none; }
.field[data-filled="true"] input,
.field[data-filled="true"] select { border-color: var(--c-amber-500); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.field-error { font: 400 11px/1.4 var(--f-body); color: var(--c-danger-500); display: none; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select { border-color: var(--c-danger-500); }
.field[data-invalid="true"] .field-error { display: block; }

.form-grid { display: flex; flex-direction: column; gap: var(--s-3); }
.form-ctas { display: flex; gap: var(--s-2); margin-top: var(--s-1); }
.form-ctas .btn { flex: 1; height: 50px; }
.form-footnote { font: 400 11px/1.5 var(--f-body); color: rgba(231,229,223,0.4); margin-top: var(--s-2); }

/* ---- Enquiry modal ---- */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 150;
  display: none;
}
.modal-backdrop[data-open="true"] { display: block; }

.modal {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 151;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--c-ink-800);
  color: var(--c-bone-100);
  border-top: var(--bw-3) solid var(--c-amber-500);
  display: none;
  transform: translateY(100%);
  transition: transform var(--dur-modal) var(--ease-out);
}
.modal[data-open="true"] { display: block; }
.modal[data-animate-in="true"] { transform: translateY(0); }

@media (min-width: 768px) {
  .modal {
    left: 50%; right: auto; bottom: auto; top: 50%;
    width: min(440px, calc(100vw - 40px));
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 160ms var(--ease-out);
  }
  .modal[data-animate-in="true"] { opacity: 1; transform: translate(-50%, -50%); }
}
@media (prefers-reduced-motion: reduce) {
  .modal { transition: opacity 160ms linear; transform: none !important; }
}

.modal-head {
  padding: var(--s-5) var(--s-5) var(--s-1);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
}
.modal-close {
  width: 36px; height: 36px;
  border: var(--bw-1) solid var(--c-steel-600);
  display: grid; place-items: center;
  color: var(--c-steel-300);
  font-size: 20px;
  flex-shrink: 0;
}
.modal-sub { padding: var(--s-3) var(--s-5) 0; }
.modal-body { padding: var(--s-5); }

.modal-success { padding: var(--s-8) var(--s-5); text-align: center; display: none; }
.modal-success[data-active="true"] { display: block; }
.modal-success svg { margin: 0 auto var(--s-4); display: block; }

/* ---- Page hero (sub-pages) ---- */
.page-hero {
  padding: var(--s-10) 0 var(--s-8);
  border-bottom: var(--bw-1) solid var(--c-ink-700);
}
@media (min-width: 1024px) { .page-hero { padding: var(--s-20) 0 var(--s-10); } }

/* ---- Breadcrumb ---- */
.breadcrumb {
  padding: var(--s-3) 0;
  border-bottom: var(--bw-1) solid var(--c-ink-700);
  font: 500 11px/1 var(--f-mono);
  letter-spacing: 2px;
  color: var(--c-steel-300);
  text-transform: uppercase;
}
.breadcrumb a { color: var(--c-steel-300); }
.breadcrumb a:hover { color: var(--c-bone-100); }
.breadcrumb .current { color: var(--c-amber-500); }

/* ---- Cards (used on about / export) ---- */
.card {
  border: var(--bw-1) solid var(--c-ink-700);
  padding: var(--s-6);
}
.card + .card { margin-top: var(--s-3); }
.card-grid { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 768px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }

.tag-list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tag {
  font: 500 11px/1 var(--f-body);
  padding: var(--s-2) var(--s-3);
  border: var(--bw-1) solid var(--c-steel-600);
  color: var(--c-steel-300);
}
/* Tags that link to a machine (category.html) need a real tap target;
   plain span.tag chips — the brand list on about.html — stay as they were. */
a.tag {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s-4);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
a.tag:hover { border-color: var(--c-amber-500); color: var(--c-bone-100); }
a.tag[aria-current="page"] { border-color: var(--c-amber-500); color: var(--c-amber-500); }
@media (prefers-reduced-motion: reduce) { a.tag { transition: none; } }

/* ---- Placeholder note (dev-facing, visually subtle) ---- */
.placeholder-note {
  border: 1px dashed var(--c-steel-600);
  color: var(--c-steel-400);
  font: 400 12px/1.5 var(--f-body);
  padding: var(--s-3) var(--s-4);
}

/* ---- 404 ---- */
.error-page {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--s-4);
}