/* =========================================================
   MED FAB Orthotics — styles.css
   Vanilla CSS, no frameworks, no external requests.
   ========================================================= */

:root {
  --ink:        #101820;
  --body:       #3d4852;
  --muted:      #61707a;
  --paper:      #ffffff;
  --bg:         #f5f7f8;
  --line:       #e2e7ea;
  /* 2026-07-21 — client-directed palette swap (logo colour scheme). Family derived
     from the client logo's flat teal background (~#57A8A5, hue 178°/sat 32%/light 50%)
     by holding hue/near-saturation constant and moving lightness to hit AA contrast.
     See agent-comms/DESIGN.md §1 for full ratios. */
  --brand:      #2d7674; /* logo hue darkened to L32/S45 — 5.31:1 on white/paper */
  --brand-deep: #163b3a; /* logo hue darkened to L16/S45 — 12.20:1 white-on-it */
  --brand-tint: #f2f8f8; /* logo hue near-white wash, L96/S30 */
  --logo-teal:  #57a8a5; /* literal client-logo swatch — decorative fills/washes ONLY,
                             2.78:1 on white, fails AA text and even large-text 3:1;
                             never place text of any size directly on it */
  --accent:     #61d1cd; /* brighter teal (L60/S55) — decorative pop (eyebrow-on-dark,
                             hero underline, founder quote-mark); 6.69:1 on --brand-deep */
  --success:    #1e7d4f;
  --error:      #b3261e;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", sans-serif;
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
                  Arial, "Noto Sans", sans-serif;

  --content-width: 1140px;
  --radius-lg: 12px;
  --radius-sm: 8px;
  --shadow-card: 0 2px 8px rgb(16 24 32 / .06);
  --shadow-card-hover: 0 12px 24px rgb(16 24 32 / .14);

  /* Measured by js/main.js on load/resize (header height changes at the
     860px nav-collapse breakpoint and with font loading); this value is
     only the no-JS/pre-measurement fallback. See Finding 6, DESIGN-REVIEW.md. */
  --header-h: 65px;
}

/* -------------------- Reset -------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* Large-display scaling: on wide monitors a fixed 1140px column leaves the page
   marooned in the middle. Widen the column AND scale the root font so every
   rem/em-based size grows with it — this keeps line lengths readable (~70-80ch)
   instead of just stretching text across the screen. */
@media (min-width: 1440px) {
  :root { --content-width: 1280px; }
  html { font-size: 17px; }
}
@media (min-width: 1800px) {
  :root { --content-width: 1400px; }
  html { font-size: 18px; }
}
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--body);
  background: var(--paper);
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: var(--brand); }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }
h1, h2, h3, p, figure { margin: 0; }

/* -------------------- Utility -------------------- */
.container {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: 24px;
}
@media (max-width: 480px) {
  .container { padding-inline: 16px; }
}

.section {
  padding: 96px 0;
}
@media (max-width: 640px) {
  .section { padding: 64px 0; }
}
.section--paper { background: var(--paper); }
.section--bg { background: var(--bg); }
.section--deep { background: var(--brand-deep); color: rgb(255 255 255 / .92); }

/* 3. Premium reads as restraint: a small, wide-tracked label with a hairline
   trailing off, over a larger, tighter headline. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 18px;
}
.eyebrow::after {
  content: "";
  height: 1px;
  flex: 1;
  max-width: 260px;
  background: linear-gradient(90deg, rgb(45 118 116 / .35), transparent);
}
.section--deep .eyebrow::after {
  background: linear-gradient(90deg, rgb(97 209 205 / .5), transparent);
}
.section--deep .eyebrow { color: var(--accent); }
.section:not(.section--deep) .eyebrow { color: var(--brand); }

h1, .h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.1;
}
h2, .h2 {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -.02em;
}
@media (min-width: 640px) {
  h2, .h2 { font-size: 2.6rem; }
}
.section--deep h2 { color: #fff; }
h3, .h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 650;
  color: var(--ink);
}
.small { font-size: 0.875rem; }
.muted { color: var(--muted); }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand);
  color: #fff;
  padding: 12px 20px;
  z-index: 1000;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

/* Focus states everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.section--deep a:focus-visible,
.section--deep button:focus-visible {
  outline-color: #fff;
}

/* -------------------- Buttons -------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary {
  background: var(--brand);
  color: #fff;
}
.btn-primary:hover { background: var(--brand-deep); }
.btn-on-deep {
  background: transparent;
  color: #fff;
  border-color: #fff;
}
.btn-on-deep:hover { background: rgb(255 255 255 / .12); }

/* -------------------- Header / Nav -------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 14px;
}
.wordmark {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark span {
  font-weight: 400;
  color: var(--brand);
}
/* Mobile nav is progressively enhanced: without JS, #nav-collapse always renders
   in normal flow below the header row (fully readable/operable, no toggle needed
   since .nav-toggle only appears once JS-driven collapsing is active). With JS,
   main.js adds html.has-js which turns it into a collapsible floating dropdown. */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
}
.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  position: relative;
}
.nav-toggle-icon::before { content: ""; position: absolute; top: -6px; }
.nav-toggle-icon::after { content: ""; position: absolute; top: 6px; }

.nav-collapse {
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.nav-links a {
  color: var(--body);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
}
.nav-links a:hover { color: var(--brand); }
/* Scrollspy: main.js marks the section currently in view. */
.nav-links a.is-current {
  color: var(--brand);
  font-weight: 700;
}
.nav-links a.is-current::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 3px;
  border-radius: 2px;
  background: var(--brand);
}
@media (max-width: 860px) {
  /* in the stacked/dropdown nav an underline reads oddly — use a left marker */
  .nav-links a.is-current::after { display: none; }
  .nav-links a.is-current { box-shadow: -10px 0 0 -8px var(--brand); }
}

@media (max-width: 860px) {
  /* No-JS baseline: nav-collapse stacks in normal flow below the header row,
     always visible — no toggle button (nothing to toggle without JS). */
  .nav-collapse {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    padding-block: 16px;
    border-top: 1px solid var(--line);
  }
  .nav-links { flex-direction: column; align-items: flex-start; gap: 14px; }

  /* Enhanced (JS present): toggle button appears, panel becomes a floating,
     collapsible dropdown so it doesn't push page content down. */
  html.has-js .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  html.has-js .nav-collapse {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    width: auto;
    padding: 16px 24px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 16px rgb(16 24 32 / .1);
    z-index: 400;
  }
  html.has-js .nav-collapse.is-collapsed { display: none; }
}

/* -------------------- Keyframe animations -------------------- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -------------------- Hero -------------------- */
.hero {
  padding-top: 64px;
  padding-bottom: 64px;
  /* Decorative wash using the literal client-logo teal (--logo-teal, #57a8a5) at low
     opacity — the one spot on the site where the exact provided swatch shows through;
     purely decorative behind copy, no AA requirement applies. */
  background: radial-gradient(circle at 80% 20%, rgb(87 168 165 / .12), transparent 55%), var(--bg);
}
@media (min-width: 640px) {
  .hero { padding-top: 96px; padding-bottom: 96px; }
}
.hero-grid {
  display: grid;
  gap: 40px;
  align-items: center;
}
@media (min-width: 860px) {
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 56px; }
}
.hero-copy .eyebrow { color: var(--brand); }
.hero h1 {
  position: relative;
  display: inline-block;
}
.hero h1 .underline {
  display: block;
  width: 92px;
  height: 4px;
  background: var(--accent);
  margin-top: 14px;
  border-radius: 2px;
}
.hero-lede {
  margin-top: 20px;
  font-size: 1.125rem;
  max-width: 46ch;
}
.hero-ctas {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.trust-strip {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.trust-item { padding: 4px 0; }
/* 3 clean columns only when all three fit; otherwise a clean single-column stack */
@media (min-width: 700px) {
  .trust-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .trust-item { padding: 4px 20px; border-left: 1px solid var(--line); }
  .trust-item:first-child { border-left: none; padding-left: 0; }
}
.trust-item strong { color: var(--brand); display: block; font-size: 1rem; }
.hero-media img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--bg);
}

/* -------------------- About -------------------- */
.about-grid {
  display: grid;
  gap: 32px;
}
@media (min-width: 860px) {
  .about-grid { grid-template-columns: 5fr 7fr; gap: 48px; align-items: center; }
}
.about-media figure { margin: 0; }
.about-media img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.about-copy p { max-width: 68ch; } /* keep line length readable as the column widens on large displays */
.about-copy p + p { margin-top: 16px; }
.about-copy h2 { margin-bottom: 20px; }

/* -------------------- Fabric tech -------------------- */
.fabric-tech {
  position: relative;
  /* Overlay bumped to 90% (from the old palette's 85%) — the source photo's navy-blue
     cast clashes with a teal overlay at lower opacity (verified visually at 360/768/1280px);
     90% of --brand-deep reads as a clean flat teal band with only a faint, harmonious
     texture from the knit weave showing through, no visible blue color-clash. */
  background-image:
    linear-gradient(rgb(22 59 58 / .9), rgb(22 59 58 / .9)),
    url("../images/fabric-knit-macro.jpg");
  background-size: cover;
  background-position: center;
  color: #fff;
}
section.section.fabric-tech .eyebrow,
.section.fabric-tech .eyebrow { color: var(--accent) !important; }
.fabric-tech h2 { color: #fff; margin-bottom: 12px; }
.fabric-tech-intro { max-width: 60ch; color: rgb(255 255 255 / .85); margin-bottom: 40px; }
.fabric-cards {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .fabric-cards { grid-template-columns: repeat(3, 1fr); }
}
.fabric-card {
  background: rgb(255 255 255 / .1);
  border: 1px solid rgb(255 255 255 / .25);
  backdrop-filter: blur(4px);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  animation: fadeInUp .5s ease-out backwards;
}
.fabric-card:hover {
  transform: translateY(-4px);
  background: rgb(255 255 255 / .15);
  box-shadow: 0 12px 28px rgb(0 0 0 / .2);
}
/* Client request 2026-07-21: icons redrawn to faithfully match the original company-
   profile slide illustrations and shown at slide-like prominence (was 56/64px). */
/* The three original illustrations have different aspect ratios (processing is
   wide) — align the row by a fixed height and let width follow, capped so the
   wide one can't overflow its card. */
.fabric-card__icon {
  display: block;
  height: 112px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin-bottom: 20px;
  transition: transform .2s ease;
}
/* Per-icon balance: the wide processing plant reads oversized and the compact
   bonding rollers undersized when all three share one height — tune each so the
   three carry similar visual mass. */
/* margin-bottom compensates per icon so every card's heading starts at the
   same vertical position (icon height + margin = constant slot). */
.fabric-card__icon--processing { height: 118px; margin-bottom: 14px; }
@media (min-width: 640px) {
  .fabric-card__icon { height: 124px; }
  .fabric-card__icon--processing { height: 130px; margin-bottom: 14px; }
}
@media (min-width: 860px) {
  .fabric-card__icon { height: 140px; }
  .fabric-card__icon--processing { height: 146px; margin-bottom: 14px; }
}
.fabric-card:hover .fabric-card__icon { transform: scale(1.05); }
.fabric-card h3 { color: #fff; margin-bottom: 14px; }
.fabric-card ul li {
  padding: 6px 0;
  border-top: 1px solid rgb(255 255 255 / .18);
  color: rgb(255 255 255 / .9);
}
.fabric-card ul li:first-child { border-top: none; }

/* -------------------- Products -------------------- */
.products-intro { max-width: 65ch; margin-bottom: 32px; }
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
  position: sticky;
  top: var(--header-h, 65px);
  background: var(--bg);
  padding-block: 10px;
  z-index: 10;
}
.pill {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--body);
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  min-height: 44px;
}
.pill[aria-pressed="true"] {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.pill:hover:not([aria-pressed="true"]) { border-color: var(--brand); color: var(--brand); }

/* Below 480px, 5 pills at full padding/font-size wrap to 2 rows, which —
   stacked under the sticky header — eats a large share of a phone viewport
   (Finding 3, DESIGN-REVIEW.md). Tightening padding/gap/font-size here keeps
   all 5 pills on one row down to 360px while keeping the same accessible
   button + aria-pressed pattern and a >=40px tap target. */
@media (max-width: 480px) {
  .filter-pills { gap: 6px; padding-block: 8px; }
  .pill {
    padding: 8px 12px;
    font-size: 0.82rem;
    min-height: 40px;
  }
}

/* Products toolbar: "Expand all / Collapse all" (Finding 9). JS-only —
   see .js-only in the no-JS helpers section; without JS this never renders,
   so the 14 <details> remain individually operable exactly as before.
   Specificity note: the generic "html.has-js .js-only { display: block }"
   rule (in the No-JS helpers section below) outweighs a plain .products-toolbar
   selector, so the flex layout needs the equally-scoped override here too. */
.products-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 24px;
}
html.has-js .products-toolbar.js-only {
  display: flex;
}
.expand-toggle {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--brand);
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  min-height: 40px;
}
.expand-toggle:hover { border-color: var(--brand); background: var(--brand-tint); }

.category-group {
  margin-bottom: 48px;
}
.category-group:last-child { margin-bottom: 0; }
.category-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.category-heading h3 {
  font-size: 1.1rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--brand-deep);
}
.category-heading .count {
  color: var(--muted);
  font-size: 0.875rem;
}

.product-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
  /* expanding one card's <details> must not stretch its row siblings */
  align-items: start;
}
@media (min-width: 640px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}

.product-card {
  position: relative; /* positioning context for the .category-tag overlay */
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease;
  animation: fadeInUp .45s ease-out backwards;
}
.product-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-4px); }
.product-card__media {
  aspect-ratio: 4 / 5;
  background: var(--bg);
  overflow: hidden;
  position: relative;
}
.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 2. Unify the catalogue photography: the 14 shots come from different
     locations/lighting, so a light common grade makes the grid read as one
     brand's catalogue. Originals are untouched. */
  filter: saturate(.82) contrast(1.03);
}
.product-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(22 59 58 / .05), rgb(22 59 58 / .16));
  mix-blend-mode: multiply;
  pointer-events: none;
}
.product-card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
/* Sits over the photo rather than taking a row in the card body. */
.category-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: rgb(255 255 255 / .94);
  color: var(--brand-deep);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 5px 10px;
  border-radius: 4px;
}
.product-card__body h3 { font-size: 1.18rem; letter-spacing: -.01em; }
.materials-line {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
  /* two lines' worth, so a 1-line and a 2-line card still align their
     Details/Enquire rows (grid uses align-items:start, so cards keep their
     own height — this normalises the common case) */
  min-height: 3.2em;
}
.materials-line strong { color: var(--body); font-weight: 600; }

details.product-details {
  border-top: 1px solid var(--line);
  margin-top: auto;
  padding-top: 4px;
}
details.product-details summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--brand);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  min-height: 44px;
}
details.product-details summary::-webkit-details-marker { display: none; }
details.product-details summary::before {
  content: "+";
  display: inline-block;
  width: 18px;
  text-align: center;
  font-size: 1.1rem;
}
details.product-details[open] summary::before { content: "\2212"; }
.details-block { padding: 4px 0 10px; }
.details-block h4 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--brand-deep);
  margin: 14px 0 6px;
}
.details-block h4:first-child { margin-top: 0; }
.details-block ul li {
  position: relative;
  padding-left: 16px;
  font-size: 0.9rem;
  margin-bottom: 6px;
  color: var(--body);
}
.details-block ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
}
/* Pulled up level with the Details summary so the card closes on one tidy
   footer row (Details left, Enquire right) instead of two stacked links. */
.enquire-link {
  align-self: flex-end;
  margin-top: -54px; /* summary min-height 44px + card body flex gap 10px */
  font-weight: 650;
  text-decoration: none;
  font-size: 0.9rem;
  display: inline-block;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
details.product-details[open] ~ .enquire-link {
  margin-top: 6px;
  align-self: flex-start;
}

/* -------------------- Extended range -------------------- */
.range-layout {
  display: grid;
  gap: 32px;
}
@media (min-width: 860px) {
  .range-layout {
    grid-template-columns: 5fr 7fr;
    gap: 48px;
    align-items: center;
  }
}

.range-panel {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 28px;
  border: 1px solid var(--line);
  background:
    linear-gradient(rgb(255 255 255 / .88), rgb(255 255 255 / .88)),
    url("../images/fabric-knit-macro.jpg");
  background-size: cover;
  background-position: center;
}
.range-panel .range-chips { margin-bottom: 0; }

.range-note { margin-top: 32px; }

.range-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}
.chip {
  background: var(--brand-tint);
  color: var(--brand);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
}

/* -------------------- Founder -------------------- */
.founder-layout {
  display: grid;
  gap: 32px;
  max-width: 900px;
  margin-inline: auto;
}
@media (min-width: 860px) {
  .founder-layout {
    grid-template-columns: 200px 1fr;
    gap: 48px;
    align-items: start;
    max-width: 960px;
  }
  .founder-col { margin-inline: 0; } /* was auto-centered standalone; now a grid child */
}

.founder-visual {
  position: relative;
  width: 160px;
  height: 160px;
  margin-inline: auto;
}
@media (min-width: 860px) {
  .founder-visual { width: 100%; height: 200px; margin-inline: 0; }
}

.founder-monogram {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--brand-tint);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 3rem;
  color: var(--brand);
  position: relative;
  z-index: 1;
}

.founder-quote-mark {
  position: absolute;
  top: -18px;
  right: -6px;
  font-family: var(--font-heading);
  font-size: 4.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
  z-index: 2;
  user-select: none;
}

.founder-col {
  max-width: 720px;
  margin-inline: auto;
  text-align: left;
}
.founder-col p + p { margin-top: 16px; }
blockquote.pull-quote {
  margin: 32px 0 0;
  padding: 4px 0 4px 20px;
  border-left: 4px solid var(--accent);
  font-size: 1.4rem;
  color: var(--brand-deep);
  font-weight: 600;
  line-height: 1.4;
}

/* -------------------- OEM band -------------------- */
.oem-band {
  text-align: center;
  background: radial-gradient(circle at 50% 100%, rgb(45 118 116 / .35), transparent 70%), var(--brand-deep);
}
.oem-band h2 { margin-bottom: 16px; }
.oem-band p {
  max-width: 60ch;
  margin-inline: auto;
  margin-bottom: 28px;
  color: rgb(255 255 255 / .85);
  font-size: 1.1rem;
}
.oem-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
@media (min-width: 860px) {
  .oem-band { text-align: left; }
  .oem-layout {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
  }
  .oem-copy { max-width: 60ch; }
  .oem-copy p { margin-inline: 0; } /* override .oem-band p's existing margin-inline: auto */
  .oem-cta { flex-shrink: 0; }
}

/* -------------------- Enquiry form -------------------- */
.enquiry-grid {
  display: grid;
  gap: 40px;
}
@media (min-width: 860px) {
  .enquiry-grid { grid-template-columns: 3fr 2fr; align-items: start; }
}
.form-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-card);
}
.field {
  margin-bottom: 20px;
}
.field label {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
  font-size: 0.9rem;
  color: var(--ink);
}
.field .req { color: var(--error); }
.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--paper);
  color: var(--ink);
  min-height: 48px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  box-shadow: 0 0 0 4px var(--brand-tint);
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: var(--error);
}
.field-error {
  color: var(--error);
  font-size: 0.85rem;
  margin-top: 6px;
  display: none;
}
.field.has-error .field-error { display: block; }

/* Honeypot: visually hidden but still fillable/tabbable-avoidable */
.hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-banner {
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 20px;
  font-weight: 600;
  font-size: 0.95rem;
  display: none;
}
.form-banner.is-visible { display: block; }
.form-banner--success {
  background: #e7f6ee;
  color: var(--success);
  border: 1px solid #bfe6d2;
}
.form-banner--error {
  background: #fbeceb;
  color: var(--error);
  border: 1px solid #f2c6c2;
}

.contact-card {
  background: var(--brand-tint);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.contact-card h3 { margin-bottom: 10px; }
.contact-card .tel-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--brand-deep);
  text-decoration: none;
}
.contact-card .tel-link:hover { text-decoration: underline; }

/* -------------------- Footer -------------------- */
.site-footer {
  background: var(--brand-deep);
  color: rgb(255 255 255 / .75);
  padding: 56px 0;
}
.footer-grid {
  display: grid;
  gap: 28px;
}
@media (min-width: 640px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}
.footer-wordmark {
  font-weight: 800;
  font-size: 1.25rem;
  color: #fff;
}
.footer-tagline { margin-top: 8px; font-size: 0.95rem; }
.footer-col h4 {
  color: #fff;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 14px;
}
.footer-col a {
  color: rgb(255 255 255 / .75);
  text-decoration: none;
  display: block;
  padding: 4px 0;
}
.footer-col a:hover { color: #fff; }
.footer-bottom {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgb(255 255 255 / .15);
  font-size: 0.85rem;
}

/* -------------------- Floating enquire nudge --------------------
   Client-approved (not in FOUNDER-TREATMENT.md / LAYOUT-VARIETY.md). Pure JS-only feature —
   js/main.js creates and appends this element itself, so with JS disabled it never exists in
   the DOM at all (not merely hidden by CSS); the no-JS baseline is completely unaffected.
   Reuses .btn.btn-primary for color/shape/type; the rules below only shrink it slightly
   ("small, unobtrusive") and add fixed positioning + a self-contained focus ring that reads
   on both light and dark sections, since this floats over arbitrary page content rather than
   sitting inside one known section like every other .btn on the page. */
.nudge-enquire {
  display: none;
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 300;
  padding: 10px 20px;
  min-height: 44px;
  font-size: 0.9rem;
  box-shadow: var(--shadow-card-hover);
}
.nudge-enquire.is-visible {
  display: inline-flex;
  animation: fadeInUp .3s ease-out backwards;
}
.nudge-enquire:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: var(--shadow-card-hover), 0 0 0 4px var(--brand-deep);
}
@media (max-width: 480px) {
  .nudge-enquire {
    right: 12px;
    bottom: 12px;
    padding: 7px 14px;
    min-height: 40px;
    font-size: 0.8rem;
    /* slight translucency so briefly-overlapped text stays discernible while scrolling */
    opacity: 0.95;
  }
}

/* -------------------- Reduced motion -------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  * { transition: none !important; animation: none !important; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* -------------------- No-JS helpers -------------------- */
.js-only { display: none; }
.no-js .js-only { display: none !important; }
html.has-js .js-only { display: block; }

/* Admin page shares base styles; small helpers below */
.admin-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 48px 24px;
}
.admin-toolbar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: end;
  margin-bottom: 24px;
}
.admin-toolbar .field { margin-bottom: 0; flex: 1 1 260px; }
table.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
table.admin-table caption { text-align: left; margin-bottom: 12px; color: var(--muted); }
table.admin-table th,
table.admin-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.admin-table th { background: var(--bg); }
.admin-status { margin-bottom: 16px; font-weight: 600; }
.table-scroll { overflow-x: auto; }