/* ===================================================================
   Vet-Inno TTC — demo site stylesheet
   Phase: VISUAL REDESIGN — Burgundy rebrand applied.
   Token names are preserved from the content-assembly phase;
   only VALUES have changed (see CLAUDE.md token-migration strategy).
   New net-new variables added without colliding with existing names.
   =================================================================== */

/* ---------- Local fonts (self-hosted — no external font request) ----------
   Downloaded once from Google Fonts and served from assets/fonts/, so the
   site no longer calls out to fonts.googleapis.com / fonts.gstatic.com on
   every visit (that request quietly sends each visitor's IP to Google — a
   flagged privacy concern ahead of go-live). Two @font-face rules per
   family, split by unicode-range (latin vs. latin-ext) the same way Google
   Fonts itself subsets them — the browser only fetches whichever subset the
   page's actual text needs. latin-ext covers the accented Hungarian
   characters (ő, ű, etc.) used throughout the site's copy. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/jetbrainsmono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/jetbrainsmono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  /* --- Color (Burgundy rebrand — [PROPOSED] palette, see CLAUDE.md) --- */
  --color-bg:               #FAF8F7;   /* Warm White — was #ffffff */
  --color-bg-alt:           #F5F2F0;   /* Ivory — was #f6f7f5 */
  --color-text:             #3D3D42;   /* Graphite — was #1f2421 */
  --color-text-muted:       rgba(61, 61, 66, .64); /* Graphite tint — was #5b6560 */
  --color-border:           #D9D9DB;   /* Cool Grey — was #dfe3e0 */
  --color-primary:          #8F1D2C;   /* Vet Burgundy — was #2f5d50 */
  --color-primary-dark:     #6F1623;   /* Deep Burgundy — was #23453b */
  --color-accent:           #C8A97E;   /* Champagne Gold — was #c96f3e. DECORATION ONLY on light bg */

  /* --- Net-new Burgundy scale (safe to add — no collision) --- */
  --color-burgundy-deep:    #6F1623;
  --color-burgundy-soft:    #B64A5A;
  --color-burgundy-tint:    #EFD6DA;
  --color-gold-tint:        #F3E9DC;
  --color-error:            #C0392B;   /* Accessible red — not burgundy */

  /* --- Net-new portfolio accents [PROPOSED — confirm with site owner] --- */
  --accent-preconcell:      #8F1D2C;
  --accent-mosaicplasty:    #5E7A5B;   /* Meadow Green */
  --accent-microtester:     #2E6E7A;   /* Lab Teal */
  --accent-eliroam:         #C97A3D;   /* Field Amber */

  /* --- Type --- */
  --font-body:   'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', monospace;
  --font-size-base: 17px;
  --line-height-base: 1.6;

  /* --- Spacing scale (rescaled IN PLACE — see CLAUDE.md strategy)
         was: 0.5/1/1.5/2.5/4rem
         now: 0.5/1/1.5/2/4rem  (--space-4 shifted from 2.5→2rem for 8px grid)
         --space-6..10 are additive new steps — do not touch existing references.
  --- */
  --space-1: 0.5rem;   /*  8px */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2rem;     /* 32px — was 2.5rem/40px */
  --space-5: 4rem;     /* 64px */
  /* Additive new steps (no existing references): */
  --space-6:  2rem;    /* 32px */
  --space-7:  3rem;    /* 48px */
  --space-8:  4rem;    /* 64px */
  --space-9:  6rem;    /* 96px */
  --space-10: 8rem;    /* 128px */

  /* --- Radius — --radius kept as 12px legacy alias; tiers added for new markup --- */
  --radius:      12px;   /* was 4px; alias for --radius-md */
  --radius-sm:    6px;   /* inputs, tags/badges, dropdowns, small controls */
  --radius-md:   12px;   /* buttons, medium cards, skip-link */
  --radius-lg:   20px;   /* project cards, media frames */
  --radius-full: 999px;  /* pills, phase badges */

  /* --- Elevation (net-new) --- */
  --shadow-sm: 0 1px 2px rgba(30, 12, 14, .06);
  --shadow-md: 0 4px 16px rgba(30, 12, 14, .08);
  --shadow-lg: 0 12px 32px rgba(30, 12, 14, .12);

  /* --- Layout --- */
  --content-width:  1120px;
  --content-narrow:  720px;
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background: var(--color-bg);
}
img { max-width: 100%; display: block; }
a { color: var(--color-primary); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  /* Gold (#C8A97E) fails WCAG AA on light bg (2.10:1) — use Burgundy */
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
h1, h2, h3, h4 { line-height: 1.25; margin-top: 0; }
p { margin-top: 0; }
.container {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
}
.container--narrow { max-width: var(--content-narrow); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

/* ---------- Skip to content link ---------- */
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  z-index: 9999;
}
.skip-link:focus,
.skip-link:focus-visible {
  position: fixed;
  top: var(--space-2);
  left: var(--space-3);
  width: auto;
  height: auto;
  padding: 0.65rem 1.25rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--color-primary);
  color: #FAF8F7;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-md); /* was var(--radius) = 4px → now 12px */
  box-shadow: var(--shadow-md);
  outline: 2px solid var(--color-primary); /* was --color-accent (Gold on light = FAIL) */
  outline-offset: 2px;
}

/* ---------- Header / nav ---------- */
.site-header {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  position: sticky;
  top: 0;
  z-index: 50;
  transition: box-shadow 200ms ease;
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.site-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  max-width: var(--content-width);
  margin: 0 auto;
}

/* --- SVG logo lockup --- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: var(--color-primary);
  white-space: nowrap;
}
.logo:hover { color: var(--color-primary-dark); }
.logo-img { display: block; height: 56px; width: auto; }
.logo-svg { flex-shrink: 0; display: block; }
.logo-ring, .logo-glyph { stroke: currentColor; }
.logo-wordmark {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  line-height: 1.15;
}
.logo-name {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.logo-name strong { color: var(--color-primary); font-weight: 700; }
.logo-tagline {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); /* was var(--radius) */
  padding: 0.4rem 0.6rem;
  font-size: 1rem;
  cursor: pointer;
  color: var(--color-text);
}

.main-nav > ul {
  list-style: none;
  display: flex;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}
.main-nav > ul > li { position: relative; }
.main-nav a {
  text-decoration: none;
  color: var(--color-text);
  font-size: 0.92rem;
  font-weight: 500;
  padding: 0.5rem 0;
  display: inline-block;
  position: relative;
}
.main-nav a:hover { color: var(--color-primary); }
.main-nav a[aria-current="page"] {
  color: var(--color-primary);
  font-weight: 600;
}
/* Active page underline in Vet Burgundy */
.main-nav a[aria-current="page"]::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--color-primary);
  border-radius: 1px;
}

/* dropdown */
.has-dropdown > a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}
.has-dropdown > a::after {
  content: "\25BE";
  font-size: 0.7em;
  transition: transform 0.2s ease;
}
/* Keep the caret from becoming the underline indicator */
.has-dropdown > a[aria-current="page"]::after {
  content: "\25BE";
  position: static;
  height: auto;
  background: none;
}
.has-dropdown:hover > a::after,
.has-dropdown:focus-within > a::after,
.has-dropdown.is-open > a::after {
  transform: rotate(180deg);
}
.main-nav .dropdown {
  list-style: none;
  margin: 0;
  padding: var(--space-1) 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); /* was var(--radius) */
  box-shadow: var(--shadow-md);
  display: none;
  flex-direction: column;
  gap: 0;
  z-index: 100;
}
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown,
.has-dropdown.is-open > .dropdown {
  display: flex;
}
.main-nav .dropdown li { margin: 0; padding: 0; }
.main-nav .dropdown li a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem var(--space-2);
  white-space: nowrap;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 400;
  position: static;
}
.main-nav .dropdown li a::after { display: none; }
.main-nav .dropdown li a:hover,
.main-nav .dropdown li a:focus {
  background: var(--color-bg-alt);
  color: var(--color-primary);
}

/* ---------- Language switcher (UI only, no i18n behind it yet) ---------- */
.lang-switch { position: relative; flex-shrink: 0; }
.lang-switch__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.65rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
}
.lang-switch__toggle:hover { color: var(--color-primary); border-color: var(--color-primary); }
.lang-switch__icon { flex-shrink: 0; }
.lang-switch__menu {
  list-style: none;
  margin: 0;
  padding: var(--space-1) 0;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.4rem;
  min-width: 140px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  display: none;
  flex-direction: column;
  gap: 0;
  z-index: 100;
}
.lang-switch:hover > .lang-switch__menu,
.lang-switch:focus-within > .lang-switch__menu,
.lang-switch.is-open > .lang-switch__menu {
  display: flex;
}
.lang-switch__menu li { margin: 0; padding: 0; }
.lang-switch__menu .lang-option {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem var(--space-2);
  background: none;
  border: none;
  text-align: left;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--color-text);
  cursor: pointer;
}
.lang-switch__menu .lang-option[aria-current="true"] { color: var(--color-primary); font-weight: 600; }
.lang-switch__menu .lang-option:hover,
.lang-switch__menu .lang-option:focus {
  background: var(--color-bg-alt);
  color: var(--color-primary);
}

/* ---------- Buttons / links ---------- */
.btn {
  display: inline-block;
  padding: 0.65rem 1.5rem;
  border-radius: var(--radius-md); /* was var(--radius) */
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
  letter-spacing: 0.01em;
}
.btn--primary {
  background: var(--color-primary);
  color: #FAF8F7;
  border-color: var(--color-primary);
}
.btn--primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}
.btn--secondary {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn--secondary:hover { background: var(--color-burgundy-tint); }
.link-cta {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  transition: color 180ms ease;
}
.link-cta:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 3px;
}

/* ---------- Sections ---------- */
section { padding: var(--space-5) 0; }
section.alt { background: var(--color-bg-alt); }
.section-heading { max-width: 640px; margin-bottom: var(--space-4); }
.section-heading h2 { font-size: 1.75rem; margin-bottom: var(--space-1); color: var(--color-primary); }
.section-heading p { color: var(--color-text-muted); }

/* ---------- Hero ---------- */
.hero {
  padding: var(--space-5) 0;
  background: var(--color-bg-alt);
  position: relative;
  overflow: hidden;
}
/* Node-network motif in hero background (§6 graphic motif system) */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 250'%3E%3Cg stroke='%233D3D42' stroke-width='1' fill='none'%3E%3Cline x1='40' y1='60' x2='140' y2='100'/%3E%3Cline x1='140' y1='100' x2='250' y2='45'/%3E%3Cline x1='250' y1='45' x2='360' y2='120'/%3E%3Cline x1='140' y1='100' x2='200' y2='180'/%3E%3Cline x1='250' y1='45' x2='200' y2='180'/%3E%3Cline x1='200' y1='180' x2='320' y2='210'/%3E%3Cline x1='360' y1='120' x2='320' y2='210'/%3E%3Cline x1='40' y1='60' x2='80' y2='160'/%3E%3Cline x1='80' y1='160' x2='200' y2='180'/%3E%3C/g%3E%3Cg fill='%233D3D42'%3E%3Ccircle cx='40' cy='60' r='4'/%3E%3Ccircle cx='140' cy='100' r='4'/%3E%3Ccircle cx='250' cy='45' r='4'/%3E%3Ccircle cx='360' cy='120' r='4'/%3E%3Ccircle cx='200' cy='180' r='4'/%3E%3Ccircle cx='320' cy='210' r='4'/%3E%3Ccircle cx='80' cy='160' r='4'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 400px 250px;
  background-repeat: repeat;
  opacity: 0.06;
  pointer-events: none;
}
/* Homepage hero only: client-supplied photo (vet + horse), with a gradient
   scrim so the headline stays legible over the photo at any viewport width.
   The photo already includes this same node/hexagon motif, so the generic
   pattern above is switched off here to avoid doubling up.
   The photo is a real <img> with object-fit (not a CSS background-image) at
   a FIXED height, independent of .hero--home's own height (which grows with
   the text) — this keeps the photo's zoom/crop stable no matter how many
   lines the heading wraps to, and avoids the 1px seam some browsers render
   at the edge of a background-size:cover image on a fractional-height box. */
.hero--home::before { display: none; }
/* Photo, scrim and text are stacked with CSS Grid (all three placed in the
   same single cell) instead of position:absolute + inset:0 on an auto-height
   parent — that combination is what some browsers were rendering a faint
   dark line around at the photo's bottom edge. Grid lets the row size itself
   to the tallest item (usually the text) with no such ambiguity, and the
   photo (shorter) just sits at the top of that row via align-self. */
.hero--home {
  display: grid;
  min-height: 400px;
  position: relative;
  /* The base .hero padding is meant for the plain-background 404 hero. Here
     the photo is full-bleed to the section edges, so that padding would
     just show up as an empty band of bg-alt above/below the photo instead —
     zero it out and let the text (which needs its own breathing room) add
     padding to the grid cell instead. */
  padding: 0;
  background: var(--color-bg-alt);
}
.hero-photo,
.hero-scrim,
.hero--home > .container {
  grid-area: 1 / 1;
}
/* Photo has a FIXED height and sits at the TOP of the grid row (which the
   text block sizes taller). The strip of bg-alt this leaves under the photo
   is intentional — a thin band, with the photo's own darker bottom edge
   reading as a hairline above it, both fading out on the left under the
   scrim. The fixed height also keeps the photo zoomed OUT enough that the
   headline never overlaps the horse. object-fit:cover + object-position
   right-align keep the vet & horse in frame on the right at any width. */
.hero-photo {
  width: 100%;
  height: 430px;
  object-fit: cover;
  object-position: 100% center;
  align-self: start;
  display: block;
  z-index: 0;
  /* A very slight scale-up, clipped by .hero's overflow:hidden, hides the
     faint dark fringe some browsers draw right at a scaled raster image's
     own edge (a texture-sampling artifact, not a border/gap in our CSS). */
  transform: scale(1.03);
  transform-origin: center;
}
.hero-scrim {
  background-image: linear-gradient(to right,
    rgba(245, 242, 240, 1) 0%,
    rgba(245, 242, 240, 1) 25%,
    rgba(245, 242, 240, 0.5) 34%,
    rgba(245, 242, 240, 0) 42%);
  z-index: 0;
}
.hero--home > .container {
  align-self: center;
  position: relative;
  z-index: 1;
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}
.hero .container { position: relative; z-index: 1; }
.hero--home h1,
.hero--home p.lede {
  text-shadow: 0 0 14px rgba(245, 242, 240, 0.9), 0 0 4px rgba(245, 242, 240, 0.9);
}
.hero h1 {
  font-size: 2.4rem;
  max-width: 540px;
  margin-bottom: var(--space-2);
  color: var(--color-primary);
}
.hero p.lede {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  max-width: 480px;
  margin-bottom: var(--space-3);
}
.hero-ctas { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.hero--home h1 { max-width: 430px; }
.hero--home p.lede { max-width: 400px; }
.hero--home .hero-ctas { max-width: 430px; }
/* On phone widths the text column is nearly as wide as the section, so the
   fixed 430px photo runs almost the full height of the hero and sits right
   behind the lede paragraph, over the busiest (hair/node-line) part of the
   photo — hurting legibility despite the text-shadow halo. Shrinking the
   photo here leaves it as a smaller band behind the headline only; the lede
   and CTAs then fall on the plain section background below it. */
@media (max-width: 600px) {
  .hero-photo { height: 220px; }
}

/* ---------- Quick entry points ---------- */
.entry-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.entry-point {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md); /* was var(--radius) */
  padding: var(--space-3);
  text-decoration: none;
  color: var(--color-text);
  display: block;
  background: var(--color-bg);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.entry-point:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.entry-point h3 { margin-bottom: 0.35rem; font-size: 1.05rem; color: var(--color-primary); }
.entry-point p { color: var(--color-text-muted); font-size: 0.92rem; margin: 0; }

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

/* ---------- Horizontally scrollable card row (Home / Featured projects).
   The prev/next buttons float over the row (absolutely positioned) rather
   than sitting in flex alongside it, so the viewport keeps the container's
   full width and each visible card stays exactly the size it was in the
   plain 3-up .card-grid — only the 4th card requires a scroll to reach. */
.card-scroller { position: relative; }
.card-scroller__viewport {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Setting overflow-x here makes the browser compute overflow-y as "auto"
     too (per spec, a non-visible overflow-x forces the other axis off
     "visible"), which was clipping each card's bottom border/box-shadow
     since the track's height matched the viewport's exactly. This padding
     gives that a few px of room; the matching negative margin cancels the
     extra space so layout below is unaffected. */
  padding-bottom: 8px;
  margin-bottom: -8px;
}
.card-scroller__viewport::-webkit-scrollbar { display: none; }
.card-scroller__track { display: flex; gap: var(--space-3); }
.card-scroller__track .project-card {
  /* 2 cards per view (not 3, like the plain grid) — the extra width keeps
     the phase-badge clear of the corner logo instead of running under it. */
  flex: 0 0 calc((100% - 1 * var(--space-3)) / 2);
}
/* Below ~700px, 2 cards per view leave each card too narrow for the
   corner logo (max-width 100px) to clear the phase-badge — they overlap.
   Drop to 1 full-width card per view; tablet widths (≥700px) keep 2. */
@media (max-width: 700px) {
  .card-scroller__track .project-card {
    flex: 0 0 100%;
  }
}
.card-scroller__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-primary);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  z-index: 2;
  transition: background 150ms ease, box-shadow 150ms ease;
}
.card-scroller__btn:hover { background: var(--color-bg-alt); }
.card-scroller__btn--prev { left: -22px; }
.card-scroller__btn--next { right: -22px; }

.project-card {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); /* was var(--radius) — cards get lg tier */
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 200ms ease;
}
.card-grid--2 .project-card { padding: var(--space-4); }
.project-card:hover { box-shadow: var(--shadow-md); }
.project-card h3 { font-size: 1.1rem; margin: 0; }
.card-grid--2 .project-card h3 {
  font-size: 1.35rem;
  padding-right: 110px; /* keep the heading clear of the (now larger) corner logo */
}
/* Product logo, top-right corner of each portfolio card */
.project-card__logo {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  max-height: 48px;
  max-width: 100px;
  width: auto;
  object-fit: contain;
  /* These logo crops come from JPEG slides with a solid white backdrop
     (no alpha). "multiply" blending drops white to transparent against the
     card's flat background while leaving the dark line-art untouched — no
     image re-export needed. */
  mix-blend-mode: multiply;
}
/* PreconCell's own logo file is white-only (no dark variant exists) — invert
   it to black so it reads directly on the card's light background, matching
   the black line-art treatment of the other three product logos. */
.project-card__logo--inverted {
  filter: invert(1);
}
.card-field, .card-looking-for { font-size: 0.9rem; color: var(--color-text-muted); margin: 0; }
.card-looking-for strong { color: var(--color-text); }

/* --- Phase badges (restyle only — class names, text, and tier count unchanged) --- */
.phase-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-full); /* already 999px — unchanged */
  align-self: flex-start;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
/* PoC → Cool Grey bg / Graphite text */
.phase-poc {
  background: var(--color-border);    /* Cool Grey #D9D9DB */
  color: var(--color-text);           /* Graphite #3D3D42 */
}
/* Preclinical → Gold-tint bg / Graphite text (closest to design-doc "Pilot") */
.phase-preclinical {
  background: var(--color-gold-tint); /* #F3E9DC */
  color: var(--color-text);           /* Graphite #3D3D42 */
}
/* Pre-commercial → Vet Burgundy bg / Warm White text (closest to "Near-market") */
.phase-precommercial {
  background: var(--color-primary);   /* Vet Burgundy #8F1D2C */
  color: #FAF8F7;                     /* Warm White */
}
/* Stub for future "Validated" tier — defined but not used in any markup today */
.phase-validated {
  background: var(--color-burgundy-tint);
  color: var(--color-primary);
}

.stats-bar {
  list-style: none;
  margin: 0;
  padding: 0.6rem 0 0 0;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--color-text);
}
.stats-bar li::before { content: "\2192  "; color: var(--color-primary); }

/* filter bar */
.filter-bar {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: var(--space-3);
  padding: var(--space-2);
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm); /* was var(--radius) */
  border: 1px solid var(--color-border);
}
.filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  /* Flex items default to min-width:auto, which refuses to shrink below the
     select's own intrinsic content width (driven by its longest <option>
     text) — on narrow viewports that pushed the select past the filter-bar
     and off the edge of the screen instead of wrapping/shrinking. */
  min-width: 0;
}
.filter-field select {
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm); /* was var(--radius) */
  border: 1px solid var(--color-border);
  font-size: 0.9rem;
  font-family: var(--font-body);
  width: 100%;
  min-width: 220px;
  max-width: 100%;
  background: var(--color-bg);
  color: var(--color-text);
}
.filter-reset {
  background: none; border: none; color: var(--color-primary);
  font-family: var(--font-body); font-size: 0.85rem; cursor: pointer; padding: 0.4rem 0;
}
.filter-reset:hover { color: var(--color-primary-dark); text-decoration: underline; }
.no-results { color: var(--color-text-muted); font-style: italic; padding: var(--space-3) 0; }

/* ---------- Project subpage ---------- */
.project-header { margin-bottom: var(--space-2); }
.project-header .phase-badge { margin-bottom: var(--space-1); }
.project-header h1 { font-size: 2rem; margin-bottom: 0.4rem; }
.project-meta { color: var(--color-text-muted); margin-bottom: var(--space-2); }
.project-stats {
  display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: space-between;
  padding: var(--space-2) 0; border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-4);
}
.project-stats li { list-style: none; font-size: 0.95rem; }
.project-stats li::before { content: "\2192  "; color: var(--color-primary); }

/* --- Project logo (final cropped product-logo asset, same file used on the
   portfolio cards) shown at the top of each project page --- */
.project-logo {
  display: block;
  height: 64px;
  width: auto;
  margin-bottom: var(--space-3);
  mix-blend-mode: multiply;
}
/* PreconCell's source file is white-only — invert to black, same as the card. */
.project-logo--inverted { filter: invert(1); }
/* MosaPlasty's crop is more square (icon + short text) than the other three
   product logos (wider icon+wordmark lockups) — at the shared 64px height
   it renders visibly narrower/smaller. Bump its height so its rendered
   width lines up with the others (~64px * ~3.3 average aspect ratio). */
.project-logo--mosaicplasty { height: 95px; }

.subpage-block { margin-bottom: var(--space-4); }
.subpage-block h2 { font-size: 1.4rem; margin-bottom: var(--space-2); color: var(--color-primary); }
/* Overview feature (Mosaicplasty page): photo as its own left-hand column
   (sharp on the left, fading out toward its own right edge), text as a
   separate right-hand column next to it — NOT a full-width background
   with text overlaid. The column is taller than a plain image would be
   natively, via a fixed-height frame + object-fit:cover. */
.overview-feature {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-3) 0 var(--space-4);
}
.overview-feature__photo-frame {
  position: relative;
  overflow: hidden;
  width: 56%;
  flex-shrink: 0;
  height: 480px;
  border-radius: var(--radius-lg);
}
.overview-feature__photo {
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: -6px;
  right: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  object-fit: cover;
  object-position: left center;
  display: block;
  /* Slight overscan (see inset above), clipped by the frame's own
     overflow:hidden, hides the faint dark-seam artifact some browsers
     render at the exact edge of a scaled-up object-fit:cover image. */
  transform: scale(1.02);
  /* Sharp on the left (the product on its tray), fading to fully
     transparent toward the column's own right edge. */
  -webkit-mask-image: linear-gradient(to right, black 0%, black 52%, transparent 90%);
  mask-image: linear-gradient(to right, black 0%, black 52%, transparent 90%);
}
.overview-feature__text { flex: 1; min-width: 0; }
.overview-feature__text h2 { font-size: 1.4rem; margin-bottom: var(--space-2); color: var(--color-primary); }
/* Mirrored variant (PreconCell page): text on the left, photo on the right
   — same frame/fade treatment, just flipped, so the photo fades toward its
   own left edge (into the text) instead of its right edge. */
.overview-feature--reverse { flex-direction: row-reverse; }
.overview-feature--reverse .overview-feature__photo {
  object-position: right center;
  -webkit-mask-image: linear-gradient(to left, black 0%, black 52%, transparent 90%);
  mask-image: linear-gradient(to left, black 0%, black 52%, transparent 90%);
}
/* Square product photo (PreconCell page) — object-fit:cover would crop it
   inside the 56%-wide landscape frame. Show it in full instead, and size
   the frame to the photo's own aspect ratio so there's no letterboxing —
   which also lets the text column extend further right, closer to the
   photo, than the fixed 56%-wide frame used by the landscape photos. */
.overview-feature__photo-frame--contain {
  width: auto;
  aspect-ratio: 1 / 1;
}
/* Tall portrait photo (Contact page — full campus bull statue, horns to
   grass). Same "no letterboxing" idea as --contain above, just with the
   photo's own (much taller) aspect ratio instead of a square, so the whole
   statue shows rather than only the head/horns. */
.overview-feature__photo-frame--contain-tall {
  width: auto;
  aspect-ratio: 1365 / 2048;
}
.overview-feature__photo--contain {
  object-fit: contain;
  transform: none;
}
/* Same left-hand fade as the other reverse-layout photos. Against this
   photo's pale grey background the fade is barely visible unless it's
   fairly strong, so it starts earlier and runs most of the way down —
   this photo's own light tone keeps the blend soft even so. */
.overview-feature--reverse .overview-feature__photo--contain {
  -webkit-mask-image: linear-gradient(to left, black 0%, black 30%, rgba(0,0,0,0.08) 100%);
  mask-image: linear-gradient(to left, black 0%, black 30%, rgba(0,0,0,0.08) 100%);
}
/* Technology Transfer pages (For Partners, For Researchers) — shown fully
   solid, no fade toward the text, for consistency between the two. */
.overview-feature--reverse .overview-feature__photo--no-fade {
  object-position: left center;
  -webkit-mask-image: none;
  mask-image: none;
}
/* Top-aligned variant (Technology Transfer pages) — the photo's own top
   edge lines up with the heading at the top of the text column, instead of
   being vertically centered against the whole text block. */
.overview-feature--top { align-items: flex-start; }
.overview-feature__photo-frame--sm { height: 380px; }
.overview-feature__photo-frame--lg { height: 580px; }
@media (max-width: 860px) {
  .overview-feature { flex-direction: column; }
  .overview-feature__photo-frame { width: 100%; height: 280px; }
  .overview-feature__photo { mask-image: none; -webkit-mask-image: none; }
}
.evidence-list li { margin-bottom: 0.5rem; }
/* Stacked evidence chart figures (PreconCell page) — narrower than the full
   text column so a wide landscape chart doesn't dominate the section. */
.evidence-figures { display: flex; gap: var(--space-3); max-width: 1035px; margin: var(--space-3) auto 0; }
.evidence-figures figure { flex: 1; min-width: 0; margin: 0; }
.evidence-figures img { width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--color-border); display: block; }
.evidence-figures__caption { max-width: 1035px; margin: var(--space-1) auto 0; text-align: center; font-size: 0.85rem; color: var(--color-text-muted); font-style: italic; }

/* --- Media placeholder — enriched with node-network motif (§6) --- */
.media-placeholder {
  position: relative;
  overflow: hidden;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md); /* was var(--radius) */
  padding: var(--space-3);
  background-color: var(--color-bg-alt);
  color: var(--color-text-muted);
  font-size: 0.88rem;
  margin-bottom: var(--space-2);
  min-height: 120px;
  display: flex;
  align-items: flex-end;
}
/* Node-network at ~10% opacity via pseudo-element */
.media-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 180'%3E%3Cg stroke='%233D3D42' stroke-width='1.5' fill='none'%3E%3Cline x1='30' y1='40' x2='110' y2='70'/%3E%3Cline x1='110' y1='70' x2='200' y2='30'/%3E%3Cline x1='200' y1='30' x2='270' y2='90'/%3E%3Cline x1='110' y1='70' x2='160' y2='130'/%3E%3Cline x1='200' y1='30' x2='160' y2='130'/%3E%3Cline x1='160' y1='130' x2='250' y2='160'/%3E%3Cline x1='30' y1='40' x2='60' y2='130'/%3E%3Cline x1='60' y1='130' x2='160' y2='130'/%3E%3C/g%3E%3Cg fill='%233D3D42'%3E%3Ccircle cx='30' cy='40' r='4'/%3E%3Ccircle cx='110' cy='70' r='4'/%3E%3Ccircle cx='200' cy='30' r='4'/%3E%3Ccircle cx='270' cy='90' r='4'/%3E%3Ccircle cx='160' cy='130' r='4'/%3E%3Ccircle cx='250' cy='160' r='4'/%3E%3Ccircle cx='60' cy='130' r='4'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 300px 180px;
  background-repeat: repeat;
  opacity: 0.10;
  pointer-events: none;
}
.media-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }

.content-photo { margin: var(--space-4) 0 0 0; }
.content-photo--tight { margin-top: var(--space-1); }
.content-photo img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  display: block;
}
.content-photo figcaption {
  margin-top: var(--space-1);
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.success-story {
  border-left: 3px solid var(--color-primary);
  padding-left: var(--space-2);
}
.success-story cite { display: block; margin-top: var(--space-2); font-size: 0.85rem; color: var(--color-text-muted); }

/* ---------- Success-story photo carousel: one photo visible at a time,
   stepped with the prev/next arrow buttons beside it --------- */
.story-carousel {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.story-carousel__viewport {
  position: relative;
  flex: 1;
  min-width: 0;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-alt);
}
.story-carousel__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms ease;
}
.story-carousel__slide.is-active { opacity: 1; visibility: visible; }
.story-carousel__btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-primary);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease, box-shadow 150ms ease;
}
.story-carousel__btn:hover { background: var(--color-bg-alt); box-shadow: var(--shadow-sm); }

/* ---------- Tables (PoC projects, publications) ---------- */
.table-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: var(--space-2);
}
table.plain-table { width: 100%; border-collapse: collapse; margin-bottom: 0; }
table.plain-table th, table.plain-table td {
  text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border);
  font-size: 0.92rem; vertical-align: top;
}
table.plain-table thead th {
  color: var(--color-bg); font-weight: 600; font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.05em; background: var(--color-burgundy-soft); border-bottom: none;
}
table.plain-table tbody tr:last-child td { border-bottom: none; }
table.plain-table tbody tr:nth-child(even) { background: var(--color-bg-alt); }
table.plain-table td:first-child { font-weight: 600; color: var(--color-text); }
.status-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 600;
}
.status-tag::before {
  content: '';
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: currentColor;
}
.status-tag--teal { color: var(--accent-microtester); }
.status-tag--amber { color: var(--accent-eliroam); }

/* ---------- Process steps ---------- */
.process-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.process-steps li {
  counter-increment: step;
  position: relative;
  padding-left: 2.6rem;
  margin-bottom: var(--space-2);
}
.process-steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 1.9rem; height: 1.9rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 700;
}

/* ---------- News ---------- */
.news-item { border-bottom: 1px solid var(--color-border); padding: var(--space-3) 0; max-width: var(--content-narrow); }
.news-item--wide { max-width: none; }
.news-item time { color: var(--color-text-muted); font-size: 0.85rem; }
.news-item h3 { margin: 0.3rem 0; font-size: 1.2rem; }

/* ---------- Services ---------- */
.service-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.service-list li {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md); /* was var(--radius) */
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg);
  transition: border-color 180ms ease;
}
.service-list li:hover { border-color: var(--color-primary); }
.service-list strong { display: block; margin-bottom: 0.3rem; color: var(--color-primary); }

/* ---------- Contact page ----------
   The contact form (and its .contact-layout/.contact-form/.form-*/.hp-field
   rules) was removed — the page now lists contact details directly instead,
   over data-protection concerns about collecting name/email/message through
   the site. Only the .contact-info list styling remains, still in use. */
.contact-info dt { font-weight: 600; margin-top: var(--space-2); }
.contact-info dd { margin: 0; color: var(--color-text-muted); }
.demo-note {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  background: var(--color-bg-alt);
  border-left: 3px solid var(--color-primary); /* was --color-accent (Gold on light = FAIL) */
  padding: 0.6rem var(--space-2);
  margin-top: var(--space-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ---------- Coming soon ---------- */
.coming-soon {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md); /* was var(--radius) */
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  max-width: var(--content-narrow);
}

/* ---------- Footer (Deep Burgundy dark background per §8.6) ---------- */
.site-footer {
  background: var(--color-primary-dark); /* Deep Burgundy #6F1623 */
  /* Extra bottom padding clears the sticky header, which otherwise overlaps
     the top of this (now taller) footer once the page is scrolled to the end. */
  padding: var(--space-4) 0 calc(var(--space-4) + 90px) 0;
  margin-top: var(--space-5);
  font-size: 0.88rem;
  color: rgba(250, 248, 247, .75);
}
/* White master logo, made for direct use on the Deep Burgundy background */
.footer-brand {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--space-2);
}
.footer-brand__logo-img { display: block; height: 56px; width: auto; }

.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-3); }
.footer-grid p { color: rgba(250, 248, 247, .65); margin: 0; }
.footer-grid a {
  color: rgba(250, 248, 247, .75);
  text-decoration: none;
  display: block;
  margin-bottom: 0.4rem;
  transition: color 150ms ease;
}
.footer-grid a:hover {
  color: #FAF8F7;
  text-decoration: underline;
  text-decoration-color: var(--color-accent); /* Gold underline — safe on dark bg */
  text-underline-offset: 3px;
}
.footer-grid h4 {
  font-size: 0.78rem;
  color: rgba(250, 248, 247, .45);
  margin-bottom: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.footer-grid a.footer-linkedin {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: var(--space-2);
}
.footer-linkedin__qr { width: 76px; height: 76px; border-radius: var(--radius-sm); display: block; flex-shrink: 0; }
.footer-linkedin__label { font-size: 0.78rem; line-height: 1.3; max-width: 110px; margin-bottom: 0; }
.footer-grid a.footer-linkedin:hover .footer-linkedin__label {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 3px;
}
.site-footer .bottom {
  border-top: 1px solid rgba(250, 248, 247, .15);
  padding-top: var(--space-2);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-1);
  color: rgba(250, 248, 247, .40);
}
.site-footer .bottom a { color: rgba(250, 248, 247, .40); text-decoration: none; }
.site-footer .bottom a:hover { color: #FAF8F7; }

/* ---------- Utility ---------- */
.badge-note { font-size: 0.8rem; color: var(--color-text-muted); font-style: italic; }

/* ===================================================================
   Minimal responsive baseline.
   Desktop is the primary target for this phase; this breakpoint only
   prevents the layout from breaking on a narrow screen. Full mobile/
   tablet design is planned as a later pass (see README).
   =================================================================== */
@media (max-width: 860px) {
  .nav-toggle { display: inline-block; }
  .main-nav {
    display: none;
    width: 100%;
    padding: 0;
  }
  .main-nav.is-open {
    display: block;
    background: var(--color-bg-alt);
    border-top: 1px solid var(--color-border);
  }
  .main-nav > ul { flex-direction: column; gap: 0; justify-content: flex-start; }
  .main-nav > ul > li { border-top: 1px solid var(--color-border); }
  .main-nav > ul > li:first-child { border-top: none; }
  .main-nav .dropdown { position: static; border: none; box-shadow: none; display: none; padding-left: var(--space-2); }
  .has-dropdown.is-open > .dropdown { display: flex; }
  .site-header__top { flex-wrap: wrap; }
  .logo-tagline { display: none; } /* too cramped on mobile */

  .entry-points, .card-grid, .card-grid.card-grid--2,
  .service-list, .footer-grid, .media-grid {
    grid-template-columns: 1fr;
  }
  .hero h1 { font-size: 1.8rem; }
}