/* =====================================================================
   Calidar — site stylesheet (all pages except /supplemental/, which is self-contained)

   Merged from the former style.css and styleMLG.css. Each page tags its <html>
   element with the layout it uses:
     .layout-a  →  Home, News, and Privacy Policy pages
     .layout-b  →  Technology and Contact pages
   Rules that apply to only one layout are prefixed with :where(.layout-a) or
   :where(.layout-b). :where() adds no specificity, so these rules cascade exactly
   as they did in the separate files. Everything without a prefix is shared or
   only matches elements that exist on one layout.
   ===================================================================== */

/* =========
   Calidar Base Styles
   =========
*/
/* CSS Variables */
:root:where(.layout-a) {
  --cyan: #9dc8d7;
  --red: #C38573;
  --black: #000000;
  --dark: #223D46;
  --bg: #ffffff;
  --muted: #f5f5f5;
  --radius: 16px;
  --shadow: 0 10px 24px rgba(0,0,0,0.08);
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
}

/* Reset-ish */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

:where(.layout-a) img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

button {
  font: inherit;
}

/* Typography */
html {
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  line-height: 1.6;
  color: var(--dark);
  background: var(--bg);
}

:where(.layout-a) h2,
h3 {
  color: var(--black);
  line-height: 1.2;
}

h2 {
  font-size: clamp(1.5rem,2.6vw,2rem);
  margin: 0 0 0.5rem;
}

h3 {
  font-size: clamp(1.15rem,2vw,1.25rem);
  margin: 0 0 0.25rem;
}

p {
  margin: 0.5rem 0;
}

/* Containers & Layout */
.container {
  width: min(1120px,92%);
  margin-inline: auto;
}

.section {
  padding: 64px 0;
}

.section.muted {
  background: var(--muted);
}

.mt-24 {
  margin-top: 24px;
}

/* Grid */
:where(.layout-a) .grid-2 {
  display: grid;
  align-items: start;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: box-shadow .25s ease, background-color .25s ease;
  padding: 10px 0;
}

.site-header.scrolled {
  box-shadow: var(--shadow-sm);
}

.site-header.light {
  background: #fff;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 700;
  color: var(--black);
}

/* Nav */
.nav-links {
  display: flex;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  text-decoration: none;
  padding: 10px 4px;
  border-bottom: 2px solid transparent;
  color: var(--dark);
}

.nav a:hover,
.nav a:focus {
  border-color: var(--cyan);
}

.nav a.active {
  border-color: var(--cyan);
}

.menu-toggle {
  display: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 10px;
}

.menu-toggle .bar {
  display: block;
  height: 2px;
  background: #444;
  margin: 7px 6px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  left: 8px;
  top: 8px;
  width: auto;
  height: auto;
  background: #fff;
  color: #000;
  padding: 8px 12px;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

/* Cards & Elements */
.card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}

/* Features */
.features {
  margin-top: 18px;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 12px 16px;
  border-radius: 14px;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform .05s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
  font-weight: 700;
}

:where(.layout-a) .btn:focus {
  outline: 3px solid #B4C8B8;
  outline-offset: 2px;
}

.btn.primary {
  background: #9dc8d7;
  color: #111;
}

.btn.primary:hover {
  box-shadow: 0 6px 16px #9dc8d7;
  transform: translateY(-1px);
}

.btn.ghost {
  background: transparent;
  border-color: var(--cyan);
  color: #111;
}

.btn.ghost:hover {
  background: #03e4ee14;
}

.news-card time {
  display: block;
}

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease, transform .5s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 768px) {
  body {
    font-size: 0.9rem;  /* reduce 10%–15% on mobile */
  }

  .menu-toggle {
    display: inline-block;
  }

  :where(.layout-a) .nav {
    inset: 60px 0 auto 0;
    background: #fff;
  }

  .nav-links {
    flex-direction: column;
    padding: 12px;
  }

  .nav a {
    padding: 12px 4px;
  }
}

/* High-contrast focus for accessibility */
:where(.layout-a) a:focus,
:where(.layout-a) button:focus {
  scroll-margin: 100px;
}

/* === images & minor header contrast tweaks === */
.logo img {
  display: block;
  height: 28px;
  width: auto;
}

.headshot {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
}

/* Home — Mission refinements */
.mission-section {
  /* very subtle light-blue-grey background */
  background: #f2f8fb;  /* tweak to taste (#f3fbfd or #eef6fa also work) */
}

.mission-container {
  text-align: center;
}

.mission-body {
  margin-top: 8px;
}

/* Mission title: Insoma-style kicker (all caps, small, gradient) */
.mission-kicker {
  /* fallback color if gradient text unsupported */
  color: var(--black);
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 800;
  line-height: 1;
  font-size: clamp(0.85rem, 1.2vw, 1rem);  /* small, responsive */
  /* gradient text */
  background: linear-gradient(90deg, #3ba1b8 0%, #c386738c 60%, #C38573 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (forced-colors: active) {
  /* High-contrast / forced colors: ensure readable text */
  .mission-kicker {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: CanvasText;
  }
}

/* Shared kicker (Insoma-style) for section labels */
.kicker {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 800;
  line-height: 1;
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  background: linear-gradient(90deg,#3ba1b8 0%, #c29e93 60%, #C38573 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Tech preview layout overrides (white background by default) */
.tech-preview .tech-left {
  align-self: start;
}

.tech-preview .tech-illustration img {
  border-radius: 12px;  /* subtle polish; remove if you prefer square edges */
}

/* Subtitle under the kicker */
.tech-subtitle {
  font-weight: 600;
}

/* Make features vertical within this section */
.tech-preview .features {
  grid-template-columns: 1fr;
}

/* Feature card tweaks + image placeholders */
.tech-preview .feature {
  border-radius: var(--radius);
}

@media (max-width: 768px) {
  /* Responsive: make the right image naturally stack below 768px using your existing grid behavior */
  .tech-preview .tech-illustration img {
    border-radius: 10px;
  }

  /* --- Responsive: stack on mobile --- */
  .tech-preview .tech-illustration {
    order: 2;
  }

  .tech-preview .tech-left {
    order: 1;
  }
}

/* === Tech Preview: lock 2-column layout & placement === */
.tech-preview .tech-illustration {
  padding: 8px 0;
}

/* Left column: title/subtitle/features */
.tech-preview .tech-left {
  flex: 0 0 clamp(420px, 48%, 560px);  /* fixed-ish left column */
  min-width: 320px;
}

/* Right column: big illustration */
.tech-preview .tech-illustration {
  flex: 1 1 auto;  /* take the remaining space */
}

@media (max-width: 768px) {
  /* 3) Mobile: stack cleanly */
  .tech-preview .container.tech-grid {
    flex-direction: column;
  }
}

/* === Home: Tech preview — explicit placement (ignores source order) === */
section.tech-preview > .container.tech-grid > .tech-illustration img {
  max-height: 72vh !important;  /* big but contained */
}

/* Icon size bump so details (e.g., fingerprint) read clearly */
section.tech-preview .feature {
  gap: 14px !important;
}

section.tech-preview .feature-icon {
  display: grid !important;
  place-items: center !important;
}

section.tech-preview .feature h3,
section.tech-preview .feature p {
  grid-column: 2 !important;
}

/* === Tighten spacing inside Home > Our Technology features === */
/* Keep icon↔text roomy, but minimize h3↕p gap */
section.tech-preview .tech-left .features .feature {
  column-gap: 16px !important;  /* icon ↔ text */
  row-gap: 4px !important;  /* title ↕ body */
}

section.tech-preview .tech-left .features .feature h3 {
  margin: 0 !important;
  line-height: 1.2 !important;
}

section.tech-preview .tech-left .features .feature p {
  margin: 2px 0 0 !important;  /* tiny top margin, no bottom */
  line-height: 1.45 !important;
}

section.tech-preview .feature {
  padding: 16px;
  /* neutralize any grid leftovers from earlier rules */
  grid-template-columns: unset !important;
}

/* Give the illustration the full column height and let it scale inside */
section.tech-preview .tech-illustration {
  align-self: stretch !important;
}

/* === Canonical icon sizing & stroke for Home > Our Technology === */
section.tech-preview .tech-left .feature-icon {
  width: 110px !important;
  height: 110px !important;
}

/* === Home > Our Technology: dark theme (match Technology page vibe) === */
.tech-preview.dark {
  /* same family as .tech-hero on the Technology page */
  background: linear-gradient(180deg,#2c2c2c 0,#3f3f3f 100%);
  color: #fff;
}

/* Headings & subtitle readability on dark */
.tech-preview.dark h2,
.tech-preview.dark h3 {
  color: #fff;
}

/* Feature cards: dark surface + subtle border */
.tech-preview.dark .feature {
  background: #2b2b2b;
  border: 1px solid rgba(255,255,255,0.08);
  color: #f1f1f1;
  box-shadow: none;  /* optional: keep it flat on dark */
}

/* Body text inside features—slightly softer than pure white */
.tech-preview.dark .feature-desc {
  color: #e8e8e8;
}

/* Buttons still pop on dark */
.tech-preview.dark .btn.primary {
  background: #9dc8d7;
  color: #111;
}

/* Icons: cyan reads well on dark; keep as-is (optional bump slightly brighter) */
/* .tech-preview.dark .feature-icon svg{ stroke:#79f0f5; } */
/* Home > Our Technology: bigger "4D Mammography" subtitle */
section.tech-preview .tech-subtitle {
  font-size: clamp(1.75rem, 3.8vw, 2.6rem) !important;  /* was ~1.8rem max */
  line-height: 1.15;
  margin: 8px 0 16px;  /* a touch more breathing room */
}

/* keep white on the dark version (already set earlier, but safe to include) */
section.tech-preview.dark .tech-subtitle {
  color: #fff;
}

/* PNG icon sizing + vertical centering with text */
section.tech-preview .feature {
  display: flex !important;
  align-items: center !important;  /* centers icon with text block */
}

section.tech-preview .feature-icon {
  justify-content: center;
  flex: 0 0 110px;  /* keep a fixed icon column */
}

section.tech-preview .feature-icon-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
}

/* Team section: make cards reflect the muted section theme */
.team-section .member.card {
  color: var(--dark);
}

/* Team (muted section) — keep darker cards but restore depth */
.team-section .member.card {
  position: relative;
  background: #ededed;  /* darker than section (#f5f5f5) */
  border: 1px solid rgba(0,0,0,0.06);
  /* layered elevation on gray */
  box-shadow: 0 12px 28px rgba(0,0,0,0.14), 0 4px 10px rgba(0,0,0,0.08);
}

/* subtle top/inner highlight so the gray surface doesn’t look dull */
.team-section .member.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
}

/* keep text readable on the darker card */
.team-section .member.card h3 {
  color: var(--black);
}

.team-section .member.card p {
  color: #4a4a4a;
}

/* Team: add breathing room between photo and name/title */
.team-section .member.card .headshot {
  margin-bottom: 14px;  /* space under the image */
}

.team-section .member.card h3 {
  margin-top: 6px;  /* tiny extra nudge */
  margin-bottom: 6px;
  line-height: 1.25;
}

.team-section .member.card p {
  margin-top: 2px;  /* keep title → role nicely spaced */
}

/* Team: shift name/role start a bit right so it aligns with the photo frame */
.team-section .member.card h3,
.team-section .member.card p {
  padding-left: 12px;  /* adjust to taste: 10–16px works well */
}

@media (max-width: 768px) {
  /* keep it a touch tighter on small screens */
  .team-section .member.card h3,
  .team-section .member.card p {
    padding-left: 8px;
  }
}

.news-home .news-teaser-item {
  border-bottom: 1px solid #eee;
  padding-bottom: 16px;
}

.news-home .news-teaser-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* Hover affordance */
.news-home .teaser-link:hover .teaser-title {
  text-decoration: underline;
}

/* small gap between title and button after removing the paragraph */
.news-home .news-intro-gap {
  height: 12px;
}

/* Right column list */
.news-home .news-teaser-list {
  display: grid;
  gap: 20px;
}

/* Each teaser row: bigger thumb + text block */
.news-home .teaser-link {
  display: grid;
  grid-template-columns: 320px 1fr;  /* BIGGER thumbnail */
  gap: 18px;
  align-items: start;
  text-decoration: none;
  color: inherit;
}

/* Thumbnail styling */
.news-home .teaser-thumb {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: var(--shadow);
  object-fit: cover;
}

/* Meta */
.news-home .teaser-date {
  display: block;
  color: #215B68;
  font-weight: 700;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}

.news-home .teaser-title {
  margin: 0 0 6px;
  line-height: 1.2;
  color: var(--black);
}

.news-home .teaser-excerpt {
  margin: 0;
  color: #555;
}

/* Hover affordance */
.news-home .teaser-link:hover .teaser-title {
  text-decoration: underline;
}

/* hero is just an image on white — no rounded corners/shadows */
.news-hero {
  background: #fff;
}

.news-hero-img {
  display: block;
  width: min(1100px, 92%);
  margin: 24px auto 0;
  height: auto;
  border-radius: 0;  /* ensure no rounded frame */
  box-shadow: none;  /* ensure no shadow frame */
}

/* pull the article section upward so it sits ON TOP of the hero */
.news-body {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--news-overlap));
}

/* === HERO (fixed height, stable right-aligned main, bottom-up mirror) === */
.hero.hero--image {
  overflow: hidden;
  background: #fff;
  /* comfortable top padding for header/logo, tight bottom so section below is close */
  padding: clamp(68px, 9vw, 110px) 0 clamp(16px, 3vw, 28px);
  /* default: hide mirror on wide screens; JS will set this on narrow */
  --mirror-reveal: 0px;
}

/* content sits above the art and stays vertically centered */
.hero.hero--image .hero-inner {
  position: relative;
  z-index: 3;  /* above images */
  height: 100%;
  display: flex;
  align-items: center;  /* centers Slogan_New.svg vertically */
}

/* image layer container */
.hero.hero--image .hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;  /* below content */
  pointer-events: none;
}

/* both images share base positioning */
.hero.hero--image .hero-art,
.hero.hero--image .hero-art--mirror {
  position: absolute;
  right: 0;  /* lock to RHS */
  left: auto;
  pointer-events: none;
}

@media (min-width: 769px) {
  /* --- WIDE (desktop/tablet): scale by HEIGHT for stable framing --- */
  .hero.hero--image .hero-art,
  .hero.hero--image .hero-art--mirror {
    bottom: 0;
    top: auto;
    height: 100%;
    width: auto;
  }

  .hero.hero--image .hero-art {
    z-index: 2;  /* main above mirror */
  }

  .hero.hero--image .hero-art--mirror {
    z-index: 1;
    transform: scaleY(-1);
    /* keep the mirror parked fully below the hero on wide screens */
    top: 100%;
  }

  /* force mirror hidden on wide */
  .hero.hero--image {
    --mirror-reveal: 0px;
  }
}

@media (max-width: 768px) {
  /* --- NARROW (phones): scale by WIDTH; main becomes shorter; we reveal mirror --- */
  .hero.hero--image .hero-art,
  .hero.hero--image .hero-art--mirror {
    width: 100%;
    height: auto;
    bottom: auto;  /* we use top-based positioning on narrow */
    right: 0;
    left: auto;
  }

  .hero.hero--image .hero-art {
    top: 0;
    z-index: 2;  /* ensure main is above mirror if overlap occurs */
  }

  .hero.hero--image .hero-art--mirror {
    /* place mirror directly below the main image, then pull it up by the leftover */
    top: calc(100% - var(--mirror-reveal, 0px));
    z-index: 1;  /* under the main image */
    transform: scaleY(-1);
    /* ensure it doesn't stretch from top+bottom; we control height via intrinsic ratio */
    bottom: auto;
  }

  /* Keep the wordmark in the upper (upright) image area on phones */
  /* Limit the overlay’s working height to the main image only
     (hero height minus the revealed mirror height)
  */
  .hero.hero--image .hero-inner {
    height: calc(100% - var(--mirror-reveal, 0px));
    align-items: flex-start;  /* no longer vertically centered */
    padding-top: clamp(8px, 3vh, 20px);  /* gentle top offset inside main image */
  }
}

/* Make sure the wordmark scales with viewport so its feel stays consistent */
.hero.hero--image .hero-wordmark {
  width: clamp(220px, 36vw, 440px);
  height: auto;
  display: block;
}


#tech-grid {
  display: grid !important;
  grid-template-columns: minmax(420px, 500px) minmax(700px, 1fr) !important;  /* give the image more room */
  grid-template-rows: auto 1fr !important;
  grid-template-areas: "head right" "left right" !important;
  gap: 28px !important;
  align-items: stretch !important;  /* rows take the taller of (features, image) */
}

/* place items */
#tech-grid .tech-head {
  grid-area: head !important;
}

#tech-grid .tech-left {
  grid-area: left !important;
}

#tech-grid .tech-illustration {
  grid-area: right !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100% !important;
  overflow: hidden !important;
}

/* image fills the column height on desktop (never shorter than features) */
#tech-grid .tech-illustration img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* feature list stays vertical */
#tech-grid .features {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

/* cap text measure for readability (wrap like before) */
#tech-grid .feature-content {
  max-width: 420px !important;  /* tune 380–460px to taste */
}

@media (max-width: 980px) {
  /* Mobile / tablet: head → image → features, no overlap */
  #tech-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas: "head" "right" "left" !important;
  }

  #tech-grid .tech-illustration img {
    height: auto !important;  /* natural height when stacked */
  }
}

@media (max-width: 768px) {
  /* Slightly tighter still on phones */
  section.tech-preview {
    padding: 36px 0 !important;
  }

  /* Mobile: remove the extra space above the mammogram image */
  section.tech-preview .tech-illustration {
    align-self: auto !important;  /* undo any stretch rules */
  }
}

:root {
  --tech-mobile-row-gap: 8px;  /* tweak 4–16px */
}

@media (max-width: 768px) {
  /* Technology page variant (#tech-grid) */
  #tech-grid {
    row-gap: var(--tech-mobile-row-gap) !important;
    column-gap: 24px !important;
  }
}

/* ===== Tech preview — mobile tuning (gap + width cap) ===== */
:root {
  /* existing gap controls */
  --tech-mobile-title-gap: -10px;  /* subheader → image gap */
  --tech-mobile-image-lift: 0px;  /* nudge image upward; 0 disables */
  /* NEW: cap/center feature stack on phones */
  --tech-mobile-feature-max: 560px;  /* upper width limit */
  --tech-mobile-side-gutter: clamp(12px, 4vw, 20px);  /* edge breathing room */
}

@media (max-width: 768px) {
  /* shrink ONLY the space under the subheader */
  section.tech-preview .tech-subtitle {
    margin-bottom: var(--tech-mobile-title-gap) !important;
  }

  /* cap & center the feature list on phones (works with both markups) */
  #tech-grid .tech-left .features,
  section.tech-preview .tech-left .features {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    max-width: var(--tech-mobile-feature-max);
    width: calc(100% - 2 * var(--tech-mobile-side-gutter));
    margin-inline: auto;
  }

  /* make each card fill the capped stack width */
  #tech-grid .tech-left .feature,
  section.tech-preview .tech-left .feature {
    width: 100%;
  }
}

@media (min-width: 769px) and (max-width: 980px) {
  /* 2×2 grid for the features (beats prior flex/column rules) */
  #tech-grid .tech-left .features {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 16px !important;  /* row | column */
  }

  /* Keep each card’s internal layout as-is */
  #tech-grid .tech-left .feature {
    display: flex !important;  /* icon | text inside the card */
  }

  /* Tighten ONLY the subheader → image gap */
  #tech-grid .tech-subtitle {
    margin-bottom: var(--tech-tablet-title-gap) !important;
  }
}

/* Measurements That Matter: keep the text block constrained and centered */
.mission-section .mission-container {
  max-width: 900px;
  margin-inline: auto;
}

/* Seam: ensure no accidental gap between hero → mission */
.hero.hero--image {
  margin-bottom: 0 !important;
}

.hero.hero--image + .mission-section {
  margin-top: 0 !important;
}

/* ===== Hero: fixed height (458px at every width) ===== */
.hero.hero--image {
  height: 458px !important;
  min-height: 458px !important;
}

@media (max-width: 768px) {
  .hero.hero--image {
    padding-bottom: 0 !important;  /* no bottom padding on small screens */
  }
}

/* ===== Team: cap headshot size on narrow screens ===== */
:root {
  /* tweak to taste */
  --team-headshot-max-md: 340px;  /* tablet-ish widths */
  --team-headshot-max-sm: 260px;  /* phones / very narrow panes */
}

@media (max-width: 1024px) {
  /* Tablets & small laptops */
  .team-section .headshot {
    width: min(100%, var(--team-headshot-max-md)) !important;
    height: auto !important;  /* stays 1:1 via aspect-ratio */
    margin-inline: auto !important;  /* center in the card */
  }
}

@media (max-width: 768px) {
  /* Phones */
  .team-section .headshot {
    width: min(100%, var(--team-headshot-max-sm)) !important;
  }
}

/* ===== Team: cap member-card width on narrow screens ===== */
:root {
  /* tune these to taste */
  --team-card-gutter: clamp(12px, 4vw, 20px);
  --team-card-max-md: 740px;  /* tablets / small laptops */
  --team-card-max-sm: 310px;  /* phones */
}

@media (max-width: 1024px) {
  /* Center cards and limit width once the grid collapses */
  .team {
    justify-items: center;  /* centers grid items when single column */
  }

  .team-section .member.card {
    margin-inline: auto;  /* center within the grid cell */
  }
}

/* === Team — single row until mobile, step-sized cards === */
:root {
  /* default (≥1200px-ish): 3×340 + gaps fits in 1120px container */
  --team-card-w: 340px;
}

@media (max-width: 1200px) {
  /* Step down once container < ~1120px (e.g., laptops/tablets) */
  :root {
    --team-card-w: 280px;  /* 3×280 + 2×24 = 888px (fits 92vw at ~980px) */
  }
}

@media (max-width: 980px) and (min-width: 769px) {
  /* Narrow tablet just-above-mobile: still one row */
  :root {
    --team-card-w: 218px;  /* 3×218 + 2×24 = 702px (fits 92vw at 768–980) */
  }
}

/* Keep cards in a single, centered row with a fixed gap */
.team-section .team {
  flex-wrap: nowrap !important;  /* never wrap before mobile */
  justify-content: center !important;  /* centered row; side space crops */
  align-items: stretch;
}

/* Default (large) step */
.team-section .member.card {
  flex: 0 0 var(--team-w-lg);
}

@media (max-width: 1161px) {
  /* Intermediate step: fixed, centered row just like desktop */
  .team-section .member.card {
    flex-basis: var(--team-w-md);
  }
}

@media (max-width: 964px) {
  /* Small step to hold one row right down to 768px */
  .team-section .member.card {
    flex-basis: var(--team-w-sm);
  }
}

@media (max-width: 768px) {
  /* Mobile: switch to single centered column (uses your headshot caps) */
  .team-section .team {
    flex-direction: column !important;
    align-items: center !important;
  }

  .team-section .member.card {
    flex: 1 1 auto;
    margin-inline: auto;
  }
}

/* === Team — lock gap & card width with a fixed-width grid row === */
:root {
  --team-gap: 24px;
  /* Card widths for the three pre-mobile steps */
  --team-w-lg: 340px;  /* ≥1162px viewport */
  --team-w-md: 280px;  /* 1161–965px */
  --team-w-sm: 218px;  /* 964–769px */
  /* Row “stage” widths = 3×card + 2×gap */
  --team-stage-lg: 1068px;  /* 3*340 + 2*24 */
  --team-stage-md: 888px;  /* 3*280 + 2*24 */
  --team-stage-sm: 702px;  /* 3*218 + 2*24 */
}

/* === Latest News: fixed RHS gutter so text never overhangs === */
/* scope a tunable gutter to just the news section */
.news-home {
  --news-rhs-gutter: clamp(16px, 4vw, 18px);  /* tweak to taste */
}

/* apply the gutter to the right column content */
.news-home .news-teaser-list,
.news-home .teaser-link {
  padding-right: var(--news-rhs-gutter);
}

/* keep the layout columns explicit */
.news-home {
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) !important;
  gap: 24px;  /* whatever you prefer */
}

@media (max-width: 768px) {
  /* on phones, use a smaller gutter (or set to 0 if you want edge-to-edge) */
  .news-home {
    --news-rhs-gutter: 14px;
  }
}

/* Latest News: pull the thumbnail a bit to the left */
.news-home {
  --news-thumb-pull: 24px;  /* tune to taste */
}

@media (min-width: 769px) {
  /* keep phones unchanged */
  .news-home .teaser-thumb {
    transform: translateX(calc(-1 * var(--news-thumb-pull)));
  }
}

/* ===== Latest News — stepped widths so text doesn't constantly reflow ===== */
:root {
  /* You can tune these numbers to taste */
  --news-gap: 18px;  /* space between image and text */
  --news-thumb-w: 320px;  /* desktop thumbnail width */
  --news-text-xl: 420px;  /* full desktop text column width */
  --news-text-lg: 220px;  /* large text column width */
  --news-under-wide: 520px;  /* stacked: text wider than image */
}

@media (min-width: 1200px) {
  /* --- Step A: wide desktop (image | fixed wide text) ---------------------- */
  .news-home .teaser-link {
    display: grid;
    grid-template-columns: var(--news-thumb-w) var(--news-text-xl);
    gap: var(--news-gap);
    max-width: calc(var(--news-thumb-w) + var(--news-gap) + var(--news-text-xl));
  }
}

@media (min-width: 981px) and (max-width: 1199px) {
  /* --- Step B: desktop shrink (keep image | fixed large text) -------------- */
  .news-home .teaser-link {
    grid-template-columns: var(--news-thumb-w) var(--news-text-lg);
    gap: var(--news-gap);
    max-width: calc(var(--news-thumb-w) + var(--news-gap) + var(--news-text-lg));
  }
}

@media (min-width: 855px) and (max-width: 980px) {
  /* --- Step D: stacked before mobile (image over text, text wider than img) */
  .news-home .teaser-link {
    grid-template-columns: 1fr;  /* stack image → text */
    width: min(100%, var(--news-thumb-w));
  }

  .news-home .teaser-thumb {
    width: var(--news-thumb-w);
  }
}

@media (min-width: 769px) and (max-width: 854px) {
  /* --- Step E: stacked before mobile (text width == image width) ----------- */
  .news-home .teaser-link {
    grid-template-columns: 1fr;  /* stack image → text */
    justify-items: start;
    width: var(--news-thumb-w);  /* text matches image width */
  }

  .news-home .teaser-thumb {
    width: var(--news-thumb-w);
  }
}

/* --- Mobile (<=768px): keep your existing single-column behavior --------- */
/* Your current rules already handle this; nothing else needed here. */
/* one place to tune the desktop thumb pull */
:root {
  --news-thumb-pull: 18px;
}

@media (min-width: 1200px) {
  /* SIDE-BY-SIDE steps: keep the pull-left on the image */
  .news-home .teaser-thumb {
    width: var(--news-thumb-w);
    transform: translateX(calc(-1 * var(--news-thumb-pull)));
  }
}

@media (min-width: 981px) and (max-width: 1199px) {
  .news-home .teaser-thumb {
    width: var(--news-thumb-w);
    transform: translateX(calc(-1 * var(--news-thumb-pull)));
  }
}

@media (min-width: 820px) and (max-width: 980px), (min-width: 769px) and (max-width: 819px) {
  /* STACKED steps (your D/E): turn OFF the pull so text aligns with the image */
  .news-home .teaser-thumb {
    transform: none !important;  /* cancel the desktop shift */
    margin-left: 0 !important;
  }

  .news-home .teaser-link {
    justify-items: start;  /* make text start exactly at the image edge */
  }
}

/* tune if you want the teaser block capped under the title */
:root {
  --news-mobile-max: 640px;  /* max width of the image+text block on phones */
  --news-mobile-gap: 16px;  /* gap between title column and teaser block */
}

:root {
  /* two fixed copy widths + the switch point (all tunable) */
  --news-copy-step-break: 400px;  /* breakpoint between sizes */
}

/* === Latest News (phones): two fixed text widths while stacked === */
:root {
  --news-copy-w1: 500px;  /* 768px → 401px */
  --news-copy-w2: 330px;  /* 400px → 0px */
}

@media (max-width: 768px) {
  /* FORCE stack under the title on phones (single canonical block) */
  /* Collapse wrappers to one column */
  .news-home.grid-2 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    row-gap: var(--news-mobile-gap) !important;
    align-items: start !important;
  }

  /* Phones: title, then the newest story, then the See All News button. The intro wrapper steps aside
     (display: contents) so its title and button can sit on either side of the story. */
  .news-home {
    --news-mobile-gap: 0px;  /* spacing is set on the items below */
  }

  .news-home .news-intro {
    display: contents;
  }

  .news-home .news-intro h2 {
    order: 1;
    margin-bottom: 20px;
  }

  .news-home .news-intro-gap {
    display: none;
  }

  .news-home .news-teaser-list {
    order: 2;
  }

  .news-home .news-intro .btn {
    order: 3;
    justify-self: start;
    margin-top: 38px;  /* same space as above "How it Works" in Our Technology */
  }

  /* Teaser stacks image → text, aligned to image LHS */
  .news-home .teaser-link {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: min(100%, var(--news-mobile-max)) !important;
    justify-items: start !important;
    margin: 0 !important;
  }

  /* Image fills the teaser width on phones; cancel desktop pull */
  .news-home .teaser-thumb {
    margin-left: 0 !important;
  }
}

@media (max-width: 768px) and (min-width: 565px) {
  /* Step 1: 768px down to 401px → wider fixed text width */
  .news-home .teaser-title,
  .news-home .teaser-excerpt,
  .news-home .teaser-date {
    max-width: var(--news-copy-w1) !important;
  }
}

@media (max-width: 564px) {
  /* Step 2: ≤400px → narrower fixed text width */
  .news-home .teaser-title,
  .news-home .teaser-excerpt,
  .news-home .teaser-date {
    max-width: var(--news-copy-w2) !important;
  }
}

/* ===== Our Technology (tech page) — stepped card widths + early gap tighten ===== */
:root {
  /* 2×2 grid under the image (tablet range 769–980px) */
  --tech-2x2-gap: 16px;  /* column gap between the two cards */
  --tech-2x2-w-lg: 390px;  /* step A card width (901–980px) */
  --tech-2x2-w-sm: 330px;  /* step B card width (769–900px) */
  /* 4×1 (stacked list) on phones (≤768px) — now THREE steps */
  --tech-4x1-w-lg: 560px;  /* step A card/list width (641–768px) */
  --tech-4x1-w-md: 400px;  /* step B card/list width (481–640px) */
  --tech-4x1-w-sm: 320px;  /* step C card/list width (≤480px) */
  /* tighten the subheader → image gap when the image first stacks on top */
  --tech-tablet-title-gap: -44px;  /* tweak to taste */
}

@media (min-width: 901px) and (max-width: 980px) {
  /* --- 2×2 range step A: 901–980px ----------------------------------------- */
  /* make the feature list a fixed-width 2×2 “stage” centered under the image */
  #tech-grid .tech-left .features {
    display: grid !important;
    grid-template-columns: repeat(2, var(--tech-2x2-w-lg)) !important;
    column-gap: var(--tech-2x2-gap) !important;
    row-gap: 14px !important;
    width: calc(2 * var(--tech-2x2-w-lg) + var(--tech-2x2-gap)) !important;
    margin-inline: auto !important;
    justify-content: center !important;
  }

  /* ensure each card matches the track width exactly */
  #tech-grid .tech-left .feature {
    width: var(--tech-2x2-w-lg) !important;
  }

  /* tighten subheader → image gap as soon as image sits above the grid */
  #tech-grid .tech-head .tech-subtitle {
    margin-bottom: var(--tech-tablet-title-gap) !important;
  }
}

@media (min-width: 769px) and (max-width: 900px) {
  /* --- 2×2 range step B: 769–900px ----------------------------------------- */
  #tech-grid .tech-left .features {
    display: grid !important;
    grid-template-columns: repeat(2, var(--tech-2x2-w-sm)) !important;
    column-gap: var(--tech-2x2-gap) !important;
    row-gap: 14px !important;
    width: calc(2 * var(--tech-2x2-w-sm) + var(--tech-2x2-gap)) !important;
    margin-inline: auto !important;
    justify-content: center !important;
  }

  #tech-grid .tech-left .feature {
    width: var(--tech-2x2-w-sm) !important;
  }

  /* keep the reduced subheader gap here too */
  #tech-grid .tech-head .tech-subtitle {
    margin-bottom: var(--tech-tablet-title-gap) !important;
  }
}

@media (max-width: 768px) and (min-width: 641px) {
  /* --- Phones (4×1 list) step A: 641–768px ---------------------------------- */
  /* lock the list width so lines don’t reflow while resizing */
  #tech-grid .tech-left .features {
    width: var(--tech-4x1-w-lg) !important;
    max-width: none !important;  /* beat earlier caps */
    margin-inline: auto !important;  /* centered column */
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  /* each card fills the fixed list width */
  #tech-grid .tech-left .feature {
    width: 100% !important;
  }
}

@media (max-width: 640px) and (min-width: 481px) {
  /* --- Phones (4×1 list) step B: 481–640px ---------------------------------- */
  #tech-grid .tech-left .features {
    width: var(--tech-4x1-w-md) !important;
    max-width: none !important;
    margin-inline: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  #tech-grid .tech-left .feature {
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  /* --- Phones (4×1 list) step C: ≤480px ------------------------------------ */
  #tech-grid .tech-left .features {
    width: var(--tech-4x1-w-sm) !important;
    max-width: none !important;
    margin-inline: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  #tech-grid .tech-left .feature {
    width: 100% !important;
  }
}

@media (max-width: 980px) {
  /* Safety: when stacked (≤980px) make sure no stray padding re-adds the gap */
  #tech-grid .tech-illustration {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* === Mobile hamburger: fully hide the off-canvas menu (no peek) ======= */
:root {
  --header-mobile-h: 60px;  /* match your header’s mobile height */
}

@media (max-width: 768px) {
  /* CLOSED state */
  :where(.layout-a) .site-header .nav {
    position: absolute !important;
    top: var(--header-mobile-h) !important;
    right: 0 !important;
    left: 0 !important;
    /* move it up by its own height + the header height */
    transform: translateY(calc(-100% - var(--header-mobile-h))) !important;
    /* prevent any visible seam while hidden */
    box-shadow: none !important;
    border-bottom: 0 !important;
    transition: transform .25s ease !important;
    will-change: transform;
    backface-visibility: hidden;
    z-index: 1000;  /* stays above page content */
  }

  /* OPEN state */
  :where(.layout-a) .site-header .nav.open {
    transform: translateY(0) !important;
    box-shadow: var(--shadow-sm) !important;
    border-bottom: 1px solid #eee !important;
  }
}

/* Step values + reference breakpoints */
:root {
  /* text box widths */
  --mission-w-xl: 900px;  /* ✅ matches previous wide max */
  --mission-w-lg: 720px;
  --mission-w-md: 580px;
  --mission-w-sm: 400px;
  --mission-w-xs: 320px;
  /* body font sizes */
  --mission-fs-xl: 1.50rem;  /* ✅ matches previous clamp() max */
  --mission-fs-lg: 1.50rem;
  --mission-fs-md: 1.50rem;
  --mission-fs-sm: 1.28rem;
  --mission-fs-xs: 1.28rem;
  /* active pair (default = XL so wide screens behave exactly as before) */
  --mission-step-width: var(--mission-w-xl);
  --mission-step-fs: var(--mission-fs-xl);
}

/* Apply step width + font size (overrides earlier clamp/max rules) */
.mission-section .mission-container {
  width: min(92%, var(--mission-step-width)) !important;
}

.mission-section .mission-body {
  font-size: var(--mission-step-fs) !important;
}

@media (min-width: 1400px) {
  /* Step A — XL (≥1400px) */
  :root {
    --mission-step-width: var(--mission-w-xl);
    --mission-step-fs: var(--mission-fs-xl);
  }
}

@media (min-width: 1000px) and (max-width: 1399px) {
  /* Step B — LG (1200–1399px) */
  :root {
    --mission-step-width: var(--mission-w-lg);
    --mission-step-fs: var(--mission-fs-lg);
  }
}

@media (min-width: 769px) and (max-width: 999px) {
  /* Step C — MD (981–1199px) */
  :root {
    --mission-step-width: var(--mission-w-md);
    --mission-step-fs: var(--mission-fs-md);
  }
}

@media (min-width: 423px) and (max-width: 768px) {
  /* Step D — SM (769–980px) */
  :root {
    --mission-step-width: var(--mission-w-sm);
    --mission-step-fs: var(--mission-fs-sm);
  }
}

@media (max-width: 422px) {
  /* Step E — XS (≤768px) */
  :root {
    --mission-step-width: var(--mission-w-xs);
    --mission-step-fs: var(--mission-fs-xs);
  }
}

/* --- Global guard: prevent RHS white gutter from off-canvas layers --- */
html:where(.layout-a),
:where(.layout-a) body {
  overflow-x: clip;  /* modern */
}

@supports not (overflow-x: clip) {
  html:where(.layout-a),
  :where(.layout-a) body {
    overflow-x: hidden;  /* fallback */
  }
}

/* Keep the hero from contributing to page width even if layers extend */
.hero.hero--image {
  overflow: clip;  /* stronger than hidden for off-canvas transforms */
}

/* Make sure hero layers never “size” the layout width */
.hero.hero--image .hero-bg,
.hero.hero--image .hero-art,
.hero.hero--image .hero-art--ghost,
.hero.hero--image .hero-art--mirror {
  max-width: none !important;  /* ignore global img { max-width:100% } */
  contain: paint;  /* isolate paint so off-canvas pixels don't extend layout */
}

/* === Ghost hero: auto-pin to the left on ultra-wide =================== */
/* Tune once */
:root {
  --container-max: 1120px;  /* must match .container { width:min(1120px,92%) } */
  --hero-ghost-shift: 600px;  /* how far left of the container edge to pull (tune) */
  --hero-ghost-opacity: 0.28;  /* transparency of the ghost image (tune) */
}

/* Keep off-canvas pixels from creating horizontal scrollbars */
html:where(.layout-a),
:where(.layout-a) body {
  max-width: 100%;
  overflow-x: clip;
}

.hero.hero--image {
  overflow: clip;
  position: relative;
}

/* The ghost art itself */
.hero.hero--image .hero-art--ghost {
  position: absolute;
  z-index: 1;  /* below content; above background */
  bottom: 0;  /* same vertical anchoring as main art */
  top: auto;
  right: auto;  /* we’re controlling with `left` */
  height: 100%;  /* scale by hero height (desktop/tablet) */
  width: auto;
  contain: paint;  /* don’t influence layout sizing */
  transform: scaleX(-1);  /* flip L↔R */
  opacity: var(--hero-ghost-opacity);
  pointer-events: none;
  user-select: none;
  /* ── Smart left pin: left gutter = (100vw - min(container max, 92vw)) / 2 desired left = left gutter - hero-ghost-shift clamp to ≤ 0 so on ultra-wide it pins at 0px */
  left: min( 0px, calc( ((100vw - min(var(--container-max), 92vw)) / 2) - var(--hero-ghost-shift) ) );
}

/* Phones still use your existing mirror/stacking rules; no special case needed.
   The ghost stays anchored left and simply crops as the viewport narrows.
*/
/* Anchor offset so #mission-title isn't hidden under the sticky header */
:root {
  /* tune once */
  --anchor-offset-lg: 84px;  /* desktop header + a little breathing room */
  --anchor-offset-sm: calc(var(--header-mobile-h, 60px) + 8px);  /* mobile */
}

/* global (unchanged) */
html:where(.layout-a) {
  scroll-padding-top: var(--anchor-offset, 90px);
}

/* per-target nudge */
#mission-title {
  --anchor-nudge: 0px;
  scroll-margin-top: calc(var(--anchor-offset, 90px) + var(--anchor-nudge));
}

@media (max-width: 768px) {
  #mission-title {
    --anchor-nudge: -48px;  /* increase until title isn’t clipped */
  }
}

/* === News cards — step-sized text blocks (no wrapper needed) ============
      Tune the --newsbox-* variables. Media queries only switch the active pair.
      Targets direct children of .news-card EXCEPT the image and Read-more button.
   ===========================================================================
*/
/* === News cards: step-sized text boxes (left aligned) ================== */
:root {
  /* widths you can tune */
  --newsbox-w-xl: 540px;
  --newsbox-w-lg: 540px;
  --newsbox-w-md: 400px;
  --newsbox-w-sm: 280px;
  --newsbox-w-xs: 480px;
  --newsbox-w-xs2: 320px;
  /* body-copy font sizes (titles won't use these) */
  --newsbox-fs-xl: 1.06rem;
  --newsbox-fs-lg: 1.06rem;
  --newsbox-fs-md: 1.06rem;
  --newsbox-fs-sm: 0.98rem;
  --newsbox-fs-xs: 1.06rem;
  --newsbox-fs-xs2: 1.06rem;
  /* active pair (overridden by MQs) */
  --newsbox-step-width: var(--newsbox-w-xl);
  --newsbox-step-fs: var(--newsbox-fs-xl);
}

/* Apply step width to text children only, and left-align them */
.news-card > time,
.news-card > h2,
.news-card > p,
.news-card > .excerpt,
.news-card > .fulltext {
  width: min(100%, var(--newsbox-step-width));
  max-width: var(--newsbox-step-width);
  margin-inline: 0 !important;  /* left aligned; no centering shift */
}

/* Keep titles at the site’s original size (don’t step-scale them) */
.news-card > h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem) !important;
  line-height: 1.2;
}

/* Only body copy follows the step font-size */
.news-card > p,
.news-card > .excerpt,
.news-card > .fulltext,
.news-card > time {
  font-size: var(--newsbox-step-fs) !important;
}

@media (min-width: 1400px) {
  /* Steps: swap width + body-copy size by viewport */
  :root {
    --newsbox-step-width: var(--newsbox-w-xl);
    --newsbox-step-fs: var(--newsbox-fs-xl);
  }
}

@media (min-width: 1300px) and (max-width: 1399px) {
  :root {
    --newsbox-step-width: var(--newsbox-w-lg);
    --newsbox-step-fs: var(--newsbox-fs-lg);
  }
}

@media (min-width: 1000px) and (max-width: 1299px) {
  :root {
    --newsbox-step-width: var(--newsbox-w-md);
    --newsbox-step-fs: var(--newsbox-fs-md);
  }
}

@media (min-width: 769px) and (max-width: 999px) {
  :root {
    --newsbox-step-width: var(--newsbox-w-sm);
    --newsbox-step-fs: var(--newsbox-fs-sm);
  }
}

@media (min-width: 600px) and (max-width: 768px) {
  :root {
    --newsbox-step-width: var(--newsbox-w-xs);
    --newsbox-step-fs: var(--newsbox-fs-xs);
  }
}

@media (max-width: 599px) {
  :root {
    --newsbox-step-width: var(--newsbox-w-xs2);
    --newsbox-step-fs: var(--newsbox-fs-xs2);
  }
}

/* News overlap tweak */
:root {
  --news-overlap: clamp(140px, 6vw, 360px);  /* raise to pull higher */
}

@media (max-width: 768px) {
  /* Latest News — phones: keep RHS gutter on copy only; image stays centered */
  /* kill the asymmetric padding on the whole row/list */
  .news-home .news-teaser-list,
  .news-home .teaser-link {
    padding-right: 0 !important;
  }

  /* fallback if there’s no .teaser-copy wrapper */
  .news-home .teaser-title,
  .news-home .teaser-excerpt,
  .news-home .teaser-date {
    padding-right: var(--news-rhs-gutter) !important;
  }

  /* ensure the image itself fills the teaser width and is centered */
  .news-home .teaser-thumb {
    width: 100% !important;
    margin-inline: 0 !important;  /* equal L/R white space via container */
    transform: none !important;  /* just in case any pull is lingering */
  }
}

/* land just below the sticky header when we scroll the card into view */
.news-card {
  scroll-margin-top: var(--anchor-offset, 90px);
}

.news-hero {
  padding-top: 0 !important;
}

.news-hero-img {
  margin-top: 0 !important;
}

/* === Team (Leadership) — responsive grid for 4+ members === */
/* Put this at the very end of style.css so it overrides earlier !important rules */
.team-section .team {
  display: grid !important;
  grid-auto-flow: row !important;
  gap: 24px !important;
  /* Responsive: auto packs columns based on available width */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  /* Undo the fixed “stage width” + single-row behavior from earlier rules */
  width: 100% !important;
  max-width: 1120px;
  margin-inline: auto !important;
}

/* Ensure cards can flex with the grid (undo fixed widths) */
.team-section .member.card {
  width: auto !important;
  max-width: none !important;
}

@media (max-width: 768px) {
  /* Mobile: keep cards from becoming too wide and preserve your existing headshot sizing */
  .team-section .team {
    max-width: 340px;
  }
}

@media (min-width: 1200px) {
  /* === Team grid: force 4 → 2 → 1 (avoid 3+1 layout) === */
  /* Big screens: always 4 columns */
  .team-section .team {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 769px) and (max-width: 1199px) {
  /* Medium screens: force 2 columns (prevents 3+1) */
  .team-section .team {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  /* Small screens: stack */
  .team-section .team {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 1200px) {
  .team-section .member h3 {
    font-size: 1.1rem;
  }
}

/* ===== Team headshots: circular photo, no white square =====
   The headshot PNGs now have transparent corners; round the image itself so its shadow is a circle too,
   and drop the 1px white frame. (Comes last so it overrides the earlier .team-section .headshot rules.)
*/
.team-section .member.card .headshot {
  border-radius: 50%;
  border: 0;
  background: transparent;
  box-shadow: 0 8px 18px rgba(0,0,0,0.14);
}

/* ===== Home page section spacing (below the hero) =====
   Measurements That Matter, Our Technology, Latest News, and Meet Our Team all have the same space
   between their edges and their first and last items: 48px on screens wider than 768px, 40px on phones
   and small tablets. (The header, hero, and footer have their own spacing.) */
:root {
  --home-gap: 48px;
}

@media (max-width: 768px) {
  :root {
    --home-gap: 40px;
  }
}

#mission.section,
.tech-preview.section,
.news-section.section,
.team-section.section {
  height: auto !important;
  min-height: 0 !important;
  margin-top: 0 !important;
  padding-top: var(--home-gap) !important;
  padding-bottom: var(--home-gap) !important;
}

/* first and last items sit right on the gap (the small kicker titles are inline-blocks, which would
   otherwise sit a few pixels low in their line) */
#mission .mission-kicker,
.tech-preview .tech-head .kicker {
  margin-top: 0;
  vertical-align: top;
}

#mission .mission-body {
  margin-bottom: 0;
}

/* ===== Footer (all pages) =====
   Wider than 696px: logo | disclaimer + copyright | map button, so the text is centered on the page.
   696px and narrower: disclaimer, then the logo with the map button beside it (the pair centered), then
   the copyright line at the bottom. */
.site-footer {
  margin-top: 48px;
  padding: 14px 0;
  border-top: 1px solid #eee;
}

/* Home: the gray team section runs straight into the footer, with no white strip between them */
main:has(> .team-section:last-child) + .site-footer {
  margin-top: 0;
}

.site-footer.dark {
  margin-top: 0;
  background: #2c2c2c;
  color: #f1f1f1;
  border-top-color: rgba(255, 255, 255, 0.08);
}

.site-footer .footer-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
}

.site-footer .footer-brand {
  display: flex;
  align-items: center;
  justify-self: start;
}

.site-footer .footer-brand img {
  display: block;
  width: auto;
  height: 54px;
}

.site-footer .copy {
  grid-column: 2;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: min(92%, 480px);
  text-align: center;
  color: #828C83;
}

:where(.layout-b) .site-footer .copy {
  color: #666;
}

.site-footer .copy .disclaimer {
  max-width: 480px;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #666;
}

.site-footer.dark .copy {
  color: #fff;
}

.site-footer.dark .copy .disclaimer {
  color: #aaa;
}

/* "Privacy Policy" link at the end of the copyright line */
.site-footer .footer-privacy {
  display: inline-block;
  margin-left: 0.4em;
  color: inherit;
  text-underline-offset: 2px;
}

/* Supplemental Breast Imaging Map button, in the right-hand column; text matches the disclaimer size */
.site-footer .footer-resource {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid rgba(34, 61, 70, 0.25);
  border-radius: 8px;
  background: #fff;
  color: var(--dark);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}

.site-footer .footer-resource .fr-line {
  display: block;
}

.site-footer .footer-resource svg {
  flex: none;
  color: #5a9bb0;
}

.site-footer .footer-resource:hover {
  background: #f2f8fa;
  border-color: rgba(34, 61, 70, 0.45);
}

.site-footer .footer-resource:focus-visible {
  outline: 2px solid var(--dark);
  outline-offset: 2px;
}

/* Dark footer (Technology page): same button, light lines on the dark background */
.site-footer.dark .footer-resource {
  background: transparent;
  color: #f1f1f1;
  border-color: rgba(255, 255, 255, 0.3);
}

.site-footer.dark .footer-resource svg {
  color: #9dc8d7;
}

.site-footer.dark .footer-resource:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.5);
}

.site-footer.dark .footer-resource:focus-visible {
  outline-color: #f1f1f1;
}

/* Wide screens: the disclaimer runs in two lines of about equal length */
@media (min-width: 1000px) {
  .site-footer .copy {
    width: auto;
  }

  .site-footer .copy .disclaimer {
    max-width: 46em;
    text-wrap: balance;
  }
}

@media (max-width: 768px) {
  .site-footer .footer-inner {
    gap: 8px;
  }
}

/* Phones and small tablets: disclaimer / logo + map button / copyright, all centered.
   The .copy wrapper steps aside (display: contents) so the disclaimer and copyright can sit in
   separate rows around the logo. Columns: spacer | logo | button | spacer. */
@media (max-width: 696px) {
  .site-footer .footer-inner {
    grid-template-columns: 1fr auto auto 1fr;
    column-gap: 0;
    row-gap: 12px;
  }

  .site-footer .copy {
    display: contents;
  }

  .site-footer .copy .disclaimer {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
  }

  .site-footer .footer-brand {
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
  }

  .site-footer .footer-resource {
    grid-column: 3;
    grid-row: 2;
    justify-self: start;
    margin-left: 16px;
  }

  .site-footer .copyright {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: center;
  }
}

/* ===== Privacy Policy page ===== */
.legal .container {
  max-width: 760px;
}

.legal h1 {
  margin-bottom: 4px;
}

.legal .legal-updated {
  margin-top: 0;
  color: #828C83;
  font-size: 0.9rem;
}

.legal h2 {
  margin-top: 36px;
  font-size: 1.3rem;
}

.legal h3 {
  margin-top: 22px;
  font-size: 1.05rem;
}

.legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.legal th,
.legal td {
  padding: 8px 10px;
  border-bottom: 1px solid #e6e6e6;
  text-align: left;
  vertical-align: top;
}

.legal .table-scroll {
  overflow-x: auto;
}

.legal .consent-settings {
  font: inherit;
  font-weight: 600;
  padding: 8px 14px;
  border: 1px solid var(--dark);
  border-radius: 10px;
  background: #fff;
  color: var(--dark);
  cursor: pointer;
}

.legal .consent-settings:hover {
  background: #f2f8fa;
}

/* =====================================================================
   Technology and Contact pages (formerly styleMLG.css)
   ===================================================================== */
/* =========================================================
   Calidar Base Styles — Refactored & Commented
   =========================================================
*/
/* =========================
   THEME VARIABLES
   =========================
*/
:root:where(.layout-b) {
  /* Brand */
  --cyan: #9dc8d7;
  --cyan-soft: #79f0f5;
  --rose: #ff9a8f;
  --red: #ee0d03;
  /* Neutrals */
  --black: #030303;
  --dark: #223D46;
  --bg: #ffffff;
  --muted: #f5f5f5;
  /* Effects */
  --radius: 16px;
  --shadow: 0 10px 24px rgba(0,0,0,0.08);
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
  /* Layout helpers */
  --nav-offset: 60px;  /* distance from header to mobile nav sheet */
  /* FIG1 master timings */
  /* ===== FIG ANIMATION CONTROLS (Technology page) ===== */
  --fig1-prewait: 300ms;  /* delay before wipe starts */
  --fig1-wipe: 1500ms;  /* wipe duration */
  --fig1-fadein: 1000ms;  /* frame3 fade-in duration */
  --fig1-scale: 500ms;  /* frame3 vertical scale duration */
  --fig1-end-hold: 0ms;  /* hold frame3 at full before fade-out */
  --fig1-fadeout: 500ms;  /* fade-out duration when cycling */
  --fig1-gap: 200ms;  /* gap after fade-out before restarting */
  --fig1-frame3-delay: 800ms;  /* when frame3 (fade+scale) starts (rel. to start) */
  --fig1-scale-start: 0.6;  /* frame3 starting vertical scale (0–1) */
  /* Derived fig1 variables (keep JS/CSS in sync) */
  --fig1-wipe-delay: var(--fig1-prewait);
  --fig1-wipe-duration: var(--fig1-wipe);
  --fig1-final-delay: calc(var(--fig1-prewait) + var(--fig1-frame3-delay));
  --fig1-scale-delay: calc(var(--fig1-final-delay) + var(--fig1-end-hold));
  --fig1-scale-duration: var(--fig1-scale);
  --fig1-final-duration: var(--fig1-fadein);
  --fig1-fade-duration: var(--fig1-fadeout);
  --fig1-gap-after-fade: var(--fig1-gap);
  /* FIG2 timings */
  --fig2-prewait: 1ms;
  --fig2-wipe: 3000ms;
  --fig2-hold: 3000ms;  /* reserved */
  --fig2-fade: 100ms;
  --fig2-gap: 500ms;  /* reserved */
  /* FIG3 timings */
  --fig3-prewait: 2000ms;
  --fig3-xfade: 800ms;
  --fig3-wipe: 1000ms;
  --fig3-loop-wait: 0ms;
  --fig3-loop-fade: 3000ms;
  /* Tech layout proportions */
  --fig1-col-figure: 1.5fr;
  --fig1-col-text: 1fr;
  --fig2-col-figure: 1.5fr;
  --fig2-col-text: 1fr;
  --fig3-col-figure: 1.5fr;
  --fig3-col-text: 1fr;
  /* Tech page background bases */
  --merged-base-1: #01071b;
  --merged-base-2: #001319;
  /* Section rhythm (tech) */
  --section-padY: clamp(140px,14vw,240px);
  --gap: 32px;
  --col-pad: 8px;
  /* Tech “step” variables (copy widths, font sizes, heading sizes, image scale) */
  --scatter-w-xl: 600px;
  --scatter-w-lg: 450px;
  --scatter-w-md: 400px;
  --sign-w-xl: 600px;
  --sign-w-lg: 450px;
  --sign-w-md: 400px;
  --fourd-w-xl: 600px;
  --fourd-w-lg: 450px;
  --fourd-w-md: 400px;
  --scatter-fs-xl: 1.0625rem;
  --scatter-fs-lg: 1.0rem;
  --scatter-fs-md: 0.9rem;
  --sign-fs-xl: 1.0625rem;
  --sign-fs-lg: 1.0rem;
  --sign-fs-md: 0.9rem;
  --fourd-fs-xl: 1.0625rem;
  --fourd-fs-lg: 1.0rem;
  --fourd-fs-md: 0.9rem;
  --scatter-h2-xl: 2.0rem;
  --scatter-h2-lg: 1.85rem;
  --scatter-h2-md: 1.7rem;
  --sign-h2-xl: 2.0rem;
  --sign-h2-lg: 1.85rem;
  --sign-h2-md: 1.7rem;
  --fourd-h2-xl: 2.0rem;
  --fourd-h2-lg: 1.85rem;
  --fourd-h2-md: 1.7rem;
  --scatter-img-scale-xl: 1.35;
  --scatter-img-scale-lg: 1.2;
  --scatter-img-scale-md: 1.1;
  --sign-img-scale-xl: 1.35;
  --sign-img-scale-lg: 1.2;
  --sign-img-scale-md: 1.1;
  --fourd-img-scale-xl: 1.35;
  --fourd-img-scale-lg: 1.2;
  --fourd-img-scale-md: 1.1;
  /* Active (defaults to XL) */
  --scatter-step-w: var(--scatter-w-xl);
  --sign-step-w: var(--sign-w-xl);
  --fourd-step-w: var(--fourd-w-xl);
  --scatter-step-fs: var(--scatter-fs-xl);
  --sign-step-fs: var(--sign-fs-xl);
  --fourd-step-fs: var(--fourd-fs-xl);
  --scatter-step-h2: var(--scatter-h2-xl);
  --sign-step-h2: var(--sign-h2-xl);
  --fourd-step-h2: var(--fourd-h2-xl);
  --scatter-img-scale-step: var(--scatter-img-scale-xl);
  --sign-img-scale-step: var(--sign-img-scale-xl);
  --fourd-img-scale-step: var(--fourd-img-scale-xl);
  /* Tightening at LG/MD */
  --col-gap-lg: 16px;
  --col-gap-md: 10px;
  --col-pad-lg: 0px;
  --col-pad-md: 0px;
  /* Unified tech layout knobs */
  --tech-col-gap: 36px;  /* gap between figure/text on tech sections (>=1000px) */
  --tech-img-scale: 1.20;  /* figure scale on desktop/tablet */
}

/* =========================
   RESET / BASE
   =========================
*/
:where(.layout-b) img {
  max-width: 100%;
  display: block;
}

h1,
:where(.layout-b) h2 {
  line-height: 1.2;
}

/* Grid */
:where(.layout-b) .grid-2 {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 28px;
}

/* =========================
   HEADER / NAV
   =========================
*/
.site-header.dark {
  background: #2c2c2c;
}

/* =========================
   HERO (light pages)
   =========================
*/
:where(.layout-b) .hero-art {
  position: relative;
  min-height: 280px;
}

.page-hero {
  padding: 84px 0 20px;
  background: linear-gradient(180deg,#fff 0,#f9ffff 100%);
}

:where(.layout-b) .btn:focus {
  outline: 3px solid #9dc8d7;
  outline-offset: 2px;
}

/* Forms */
.contact-form .form-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
}

label {
  font-weight: 600;
}

input,
textarea {
  border: 1px solid #d9d9d9;
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}

input:focus,
textarea:focus {
  outline: 2px solid var(--cyan);
  border-color: var(--cyan);
}

.form-note {
  font-size: 0.9rem;
  opacity: 0.8;
  transition: opacity .3s ease, transform .3s ease;
  transform: translateY(10px);
}

.form-note[style*="block"] {
  opacity: 1;
  transform: translateY(0);
}

.form-note.error {
  color: var(--red);
  font-weight: 600;
}

.form-note.success {
  color: var(--dark);
  font-weight: 400;
}

.lede {
  font-size: 1.5rem;
  opacity: 0.95;
}

/* Dark header nav contrast */
.site-header.dark .nav a {
  color: #fff;
}

.site-header.dark .nav a:hover,
.site-header.dark .nav a:focus,
.site-header.dark .nav a.active {
  border-color: var(--cyan);
}

.site-header.dark .menu-toggle .bar {
  background: #fff;
}

/* Focus offset for in-page anchors */
:where(.layout-b) a:focus,
:where(.layout-b) button:focus,
input:focus,
textarea:focus {
  scroll-margin: 100px;
}

@media (max-width: 1024px) {
  /* =========================
     RESPONSIVE (global)
     =========================
  */
  :where(.layout-b) .hero-art {
    order: -1;
    margin-bottom: 10px;
  }
}

@media (max-width: 768px) {
  /* Mobile menu sheet (closed state) */
  :where(.layout-b) .nav {
    position: absolute;
    inset: var(--nav-offset) 0 auto 0;
    background: #fff;
    border-bottom: 1px solid #eee;
    transform: translateY(calc(-100% - var(--nav-offset))) !important;
    transition: transform .25s ease;
    box-shadow: var(--shadow-sm);
    will-change: transform;
  }

  .site-header.dark .nav {
    background: #2c2c2c;
    border-bottom-color: rgba(255,255,255,0.08);
  }

  :where(.layout-b) .nav.open {
    transform: translateY(0) !important;
  }
}

/* =========================================================
   DARK THEME + TECHNOLOGY PAGE
   =========================================================
*/
:where(.layout-b) .dark {
  background: #828C83;
  color: #fff;
}

.dark h1,
:where(.layout-b) .dark h2 {
  color: #fff;
}

/* Merged dark background */
.merged-stack {
  position: relative;
  isolation: isolate;
}

.merged-stack::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(180% 120% at 10% 0%, rgba(3,228,238,0.12), transparent 65%), radial-gradient(160% 140% at 90% 100%, rgba(121,240,245,0.10), transparent 65%), linear-gradient(112deg, #03e4ee40 6%, #03e4ee1a 12%, #79f0f52e 18%, #ff9a8f26 26%, #ee0d0326 36%, #ee0d030d 48% ), linear-gradient(180deg,var(--merged-base-1) 0%,var(--merged-base-2) 100%);
  background-size: 120% 120%,140% 140%,220% 220%,100% 100%;
  background-position: 0% 0%,100% 100%,0% 40%,0% 0%;
  opacity: 0.97;
}

/* Tech sections */
.tech-hero {
  position: relative;
  padding: 86px 0 20px;
  background: transparent;
}

.tech-section {
  position: relative;
  margin: 0;
  padding: var(--section-padY) 0;
  background: transparent;
}

.tech-section.tight {
  --section-padY: clamp(80px,10vw,160px);
}

:where(.layout-b) .grid-2 {
  align-items: center;
}

.tech-art,
.tech-copy {
  padding-inline: var(--col-pad);
}

.tech-art {
  overflow: visible;
}

.tech-art img {
  display: block;
}

/* Tech hero grid */
.hero-grid {
  display: grid;
  grid-template-columns: var(--fig1-col-figure) var(--fig1-col-text);
  gap: var(--gap);
  align-items: center;
}

.hero-art img {
  width: 900px;
  height: auto;
  display: block;
  margin-left: -4rem;
}

:where(.layout-b) .hero-copy {
  padding-inline: var(--col-pad);
  display: flex;
  align-items: center;
}

.hero-copy h1 {
  font-size: clamp(3rem,5vw,4rem);
  margin: 0;
  color: #fff;
}

/* Floating background image (parallax) */
.floating-bg {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: -1;
  opacity: 0.3;
  pointer-events: none;
  width: 80%;
  max-width: 1000px;
  height: auto;
  filter: saturate(1.05) brightness(1.05);
}

/* Gradient headings on tech sections */
#scatter-title,
#signatures-title {
  background: linear-gradient(90deg,var(--cyan) 0%,var(--cyan-soft) 15%,var(--rose) 25%,var(--red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

#four-d-title {
  background: linear-gradient(90deg,var(--cyan) 0%,var(--cyan-soft) 25%,var(--rose) 35%,var(--red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

#insight-title {
  background: linear-gradient(90deg,var(--cyan) 0%,var(--cyan-soft) 30%,var(--rose) 60%,var(--red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Fig1 (scatter) ---------- */
.fig-stack {
  position: relative;
  width: 100%;
  aspect-ratio: 720/400;
  overflow: hidden;
  transition: opacity var(--fig1-fade-duration) ease;
}

.fig-stack.is-hidden {
  opacity: 0;
}

.fig-stack img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center bottom;
  will-change: clip-path,opacity,transform;
}

.fig1-base {
  z-index: 1;
}

.fig1-wipe {
  z-index: 2;
  clip-path: inset(0 0 100% 0);
  animation: fig1WipeDown var(--fig1-wipe-duration) ease-out var(--fig1-wipe-delay) forwards;
}

.fig1-final {
  z-index: 3;
  opacity: 0;
  transform: scaleY(var(--fig1-scale-start));
  animation: fig1FadeIn var(--fig1-final-duration) ease-out var(--fig1-final-delay) forwards, fig1ScaleUp var(--fig1-scale-duration) ease-in var(--fig1-scale-delay) forwards;
}

/* ---------- Fig2 (signatures) ---------- */
.fig2-stack {
  position: relative;
  width: 100%;
  aspect-ratio: 720/400;
  overflow: visible;  /* allow scale to breathe */
}

.fig2-stack img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fig2-base {
  z-index: 1;
  opacity: 1;
}

.fig2-wipe {
  z-index: 2;
  clip-path: inset(0 100% 0 0);
  opacity: 1;
}

.fig2-wipe.is-wiping {
  animation: fig2WipeLR var(--fig2-wipe) ease-out forwards;
}

.fig2-wipe.is-fading {
  animation: fig2FadeOut var(--fig2-fade) ease-out forwards;
}

/* ---------- Fig3 (3D->4D) ---------- */
.fig3-stack {
  position: relative;
  width: 100%;
  aspect-ratio: 720/400;
  overflow: hidden;
}

.fig3-stack img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity var(--fig3-loop-fade) ease;
}

.fig3-frame1 {
  z-index: 1;
  opacity: 1;
}

.fig3-frame2 {
  z-index: 2;
  opacity: 0;
}

.fig3-frame3 {
  z-index: 3;
  opacity: 1;
  clip-path: inset(0 0 100% 0);
}

.fig3-frame3.is-wiping {
  animation: fig3WipeDown var(--fig3-wipe) ease-out forwards;
}

@media (min-width: 1000px) {
  /* Desktop/tablet tech layout & unified scaling */
  .tech-section .grid-2 {
    column-gap: var(--tech-col-gap) !important;
  }

  /* Section-specific column order */
  .tech-section[aria-labelledby="scatter-title"] .grid-2 {
    grid-template-columns: var(--fig1-col-figure) var(--fig1-col-text);
  }

  .tech-section[aria-labelledby="signatures-title"] .grid-2 {
    grid-template-columns: var(--fig2-col-text) var(--fig2-col-figure);
  }

  .tech-section[aria-labelledby="four-d-title"] .grid-2 {
    grid-template-columns: var(--fig3-col-figure) var(--fig3-col-text);
  }

  .tech-section[aria-labelledby="signatures-title"] .grid-2>.tech-copy {
    order: 1;
  }

  .tech-section[aria-labelledby="signatures-title"] .grid-2>.tech-art {
    order: 2;
  }

  /* Copy widths + type scales */
  .tech-section[aria-labelledby="scatter-title"] .tech-copy {
    width: min(100%,var(--scatter-step-w)) !important;
  }

  .tech-section[aria-labelledby="scatter-title"] .tech-copy p {
    font-size: var(--scatter-step-fs) !important;
  }

  .tech-section[aria-labelledby="scatter-title"] .tech-copy h2 {
    font-size: var(--scatter-step-h2) !important;
  }

  .tech-section[aria-labelledby="signatures-title"] .tech-copy {
    width: min(100%,var(--sign-step-w)) !important;
  }

  .tech-section[aria-labelledby="signatures-title"] .tech-copy p {
    font-size: var(--sign-step-fs) !important;
  }

  .tech-section[aria-labelledby="signatures-title"] .tech-copy h2 {
    font-size: var(--sign-step-h2) !important;
  }

  .tech-section[aria-labelledby="four-d-title"] .tech-copy {
    width: min(100%,var(--fourd-step-w)) !important;
  }

  .tech-section[aria-labelledby="four-d-title"] .tech-copy p {
    font-size: var(--fourd-step-fs) !important;
  }

  .tech-section[aria-labelledby="four-d-title"] .tech-copy h2 {
    font-size: var(--fourd-step-h2) !important;
  }

  /* Unified figure scale knob */
  :root {
    --scatter-img-scale-step: var(--tech-img-scale);
    --sign-img-scale-step: var(--tech-img-scale);
    --fourd-img-scale-step: var(--tech-img-scale);
  }

  .tech-section[aria-labelledby="scatter-title"] .fig-stack {
    transform: scale(var(--scatter-img-scale-step));
    transform-origin: center;
  }

  .tech-section[aria-labelledby="signatures-title"] .fig2-stack {
    transform: scale(var(--sign-img-scale-step));
    transform-origin: center;
  }

  .tech-section[aria-labelledby="four-d-title"] .fig3-stack {
    transform: scale(var(--fourd-img-scale-step));
    transform-origin: center;
  }

  /* Subtle inner padding */
  .tech-section .tech-art,
  .tech-section .tech-copy {
    padding-inline: max(var(--col-pad),6px);
  }
}

@media (min-width: 1200px) and (max-width: 1299px) {
  /* LG-only spacing tightening (1200–1299px) */
  :root {
    --tech-col-gap: var(--col-gap-lg);
  }
}

@media (min-width: 1000px) and (max-width: 1199px) {
  /* MD-only spacing tightening (1000–1199px) */
  :root {
    --tech-col-gap: var(--col-gap-md);
  }
}

@media (max-width: 999px) {
  /* Tech mobile layout */
  :where(.layout-b) .grid-2 {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
    row-gap: var(--gap);
  }

  .hero-art img {
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
  }

  :where(.layout-b) .hero-copy {
    display: block;
    margin: 0;
    padding-inline: 0;
  }

  .hero-copy h1 {
    text-align: center;
    margin: var(--gap) 0;
  }

  .tech-hero {
    padding: 86px 0 var(--gap);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Reduced motion */
  .fig1-wipe,
  .fig1-final {
    animation: none !important;
    clip-path: inset(0 0 0 0) !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .fig2-wipe {
    animation: none !important;
    clip-path: inset(0 0 0 0) !important;
    opacity: 1 !important;
  }
}

/* =========================================================
   CONTACT PAGE
   =========================================================
*/
.contact-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
  margin-top: 4rem;
}

/* Contact hero (image + title) */
.title-container {
  display: grid;
  grid-template-columns: minmax(0,1.3fr) minmax(0,0.7fr);
  align-items: center;
  gap: clamp(16px,4vw,32px);
}

.title-container img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  justify-self: start;
  max-width: 1200px;
}

.title-container h1 {
  margin: 0 0 -10rem -8rem;
  color: #000;
  font-size: clamp(2.5rem,6vw,5rem);
  line-height: 1.1;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  justify-self: center;
  text-align: center;
  overflow-wrap: anywhere;
  padding-inline: 0.5rem;
}

@media (max-width: 1100px) and (min-width: 769px) {
  .title-container {
    grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr);
  }

  .title-container h1 {
    font-size: clamp(2.2rem,5vw,4rem);
    margin: 0 0 -10rem 0;
  }
}

@media (max-width: 768px) {
  /* Contact — mobile */
  .contact-container {
    grid-template-columns: 1fr;
    margin-top: 2rem;
  }

  .title-container {
    align-items: center;
    text-align: center;
  }

  .title-container img {
    max-width: 1080px;
    margin-inline: auto;
  }

  .title-container h1 {
    font-size: 5rem;
  }
}

/* Center the last tech section "The Value of 4D" */
.tech-section[aria-labelledby="insight-title"] .container {
  display: flex;
  justify-content: center;
}

.tech-section[aria-labelledby="insight-title"] .centered-copy {
  text-align: center;
  margin-inline: auto;
  max-width: 890px;
}

@media (min-width: 1000px) {
  /* Contact hero — match Tech hero (≥1000px) */
  .title-container {
    grid-template-columns: var(--fig1-col-figure) var(--fig1-col-text) !important;
    align-items: center;
  }

  .title-container h1 {
    margin: 0 !important;
    justify-self: start;
    align-self: center;
    text-align: left;
    font-size: clamp(3rem,5vw,4rem);
  }

  .title-container img {
    max-width: 1000px;
    margin-left: -4rem;
  }
}

@media (max-width: 999px) {
  .title-container {
    grid-template-columns: 1fr !important;
  }

  .title-container h1 {
    margin: var(--gap) 0 0 !important;
    justify-self: center;
    text-align: center;
  }

  /* Tech page only: bump text size on mobile */
  body.dark.tech-page {
    font-size: 1rem;
  }

  body.dark.tech-page h2 {
    font-size: 1.6rem;
  }

  body.dark.tech-page p {
    font-size: 1.1rem;
  }
}

/* Reduce spacing between "From 3D to 4D" and "The Value of 4D" */
.tech-section[aria-labelledby="four-d-title"] {
  padding-bottom: calc(var(--section-padY) / 1.5);
}

.tech-section[aria-labelledby="insight-title"] {
  padding-top: calc(var(--section-padY) / 1.5);
}

@media (max-width: 999px) {
  /* Fig 3: equal small gutters, avoid cropping */
  .tech-section[aria-labelledby="four-d-title"] .fig3-stack {
    overflow: visible;
  }

  /* Ensure images fill stacks without cropping.
     IMPORTANT: do NOT clobber transforms on .fig1-final, which the scroll JS animates.
  */
  .tech-section .fig-stack img,
  .tech-section .fig2-stack img,
  .tech-section .fig3-stack img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* Keep transforms disabled for most images, BUT allow fig1-final to animate */
  .tech-section .fig-stack img:not(.fig1-final),
  .tech-section .fig2-stack img,
  .tech-section .fig3-stack img {
    transform: none !important;
  }

  .tech-section .fig-stack .fig1-final {
    will-change: transform, opacity;  /* smooth scrolling animation */
  }

  /* Extra gap before Fig1 (hero → Fig1) */
  .tech-section[aria-labelledby="scatter-title"] {
    padding-top: calc(var(--section-padY) * 1) !important;
  }

  /* Prevent horizontal scrollbars from full-bleed/gutter math */
  body.dark.tech-page {
    overflow-x: hidden;
  }

  /* Tech page — extra gap before Fig1 on mobile */
  .tech-section[aria-labelledby="scatter-title"] {
    padding-top: calc(var(--section-padY) * 1) !important;
  }

  /* ===== Contact page responsive stacking ===== */
  .contact-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .contact-container .page-hero {
    order: 1;
    text-align: center;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
  }

  .contact-container .contact-form {
    order: 2;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
  }

  /* === TECH (mobile): prevent sideways drag / hidden overflow === */
  /* 1) Stop intentional overscan that exceeds the viewport */
  :root {
    --m-fig-gutter: 0px;  /* was -30px; negative makes width > 100vw */
  }

  /* 2) Hard-lock page width to viewport on mobile */
  html:where(.layout-b),
  :where(.layout-b) body {
    overflow-x: hidden;
  }

  /* === Tech (mobile): remove 1px seam under header at top === */
  /* When the mobile sheet is CLOSED, kill its bottom border & shadow */
  body.dark.tech-page .site-header .nav:not(.open) {
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  /* When the mobile sheet is OPEN, keep the subtle divider/shadow */
  body.dark.tech-page .site-header .nav.open {
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: var(--shadow-sm) !important;
  }

  /* Tech (mobile): header pinned + correct content offset */
  body.dark.tech-page .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transform: translateZ(0);
    will-change: transform;
  }

  /* IMPORTANT: remove any +10px padding you added earlier */
  body.dark.tech-page main {
    padding-top: var(--nav-offset) !important;  /* was calc(var(--nav-offset) + 10px) */
  }
}

/* Contact form: unify fonts across inputs + textarea + placeholders */
.contact-form input,
.contact-form textarea {
  font-family: inherit;  /* match site/body font */
  font-size: 1rem;
  color: #111;
}

/* Placeholders (modern) */
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  font-family: inherit;  /* ensure placeholder isn’t monospace/system */
  font-size: 1rem;
  color: #111;
  opacity: 1;
}

/* WebKit & legacy fallbacks */
.contact-form input::-webkit-input-placeholder,
.contact-form textarea::-webkit-input-placeholder {
  font-family: inherit;
  font-size: 1rem;
  color: #111;
  opacity: 1;
}

/* === Tech: "The Value of 4D" text box widths === */
:root {
  --insight-w-desktop: 750px;  /* set your desktop width here */
  --insight-w-mobile: 750px;  /* set your mobile width here */
  --insight-w-active: var(--insight-w-desktop);
}

@media (max-width: 999px) {
  :root {
    --insight-w-active: var(--insight-w-mobile);
  }
}

/* Apply the width to the centered-copy wrapper */
.tech-section[aria-labelledby="insight-title"] .centered-copy {
  width: min(92%, var(--insight-w-active));
  max-width: none;  /* override previous max-width */
  margin-inline: auto;
  text-align: center;
}

@media (max-width: 999px) {
  /* =========================
     Tech page: centered text on mobile
     =========================
  */
  body.dark.tech-page .tech-copy {
    text-align: center;  /* center text */
    margin-inline: auto;  /* keep even space left/right */
    width: min(92%, 700px);  /* normal readable width */
  }

  body.dark.tech-page .tech-copy h2 {
    text-align: center;  /* center section headings */
  }

  /* =========================
     Contact page: keep light header pinned on mobile
     =========================
  */
  /* Pin the light header (Contact page header uses .site-header.light) */
  :where(.layout-b) .site-header.light {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transform: translateZ(0);
    will-change: transform;
  }

  /* Offset page content so it doesn't slide under the fixed header */
  :where(.layout-b) body:not(.dark) main {
    padding-top: var(--nav-offset) !important;
  }

  /* Match tech page sheet behavior: no divider when closed, subtle divider when open */
  :where(.layout-b) .site-header.light .nav:not(.open) {
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  :where(.layout-b) .site-header.light .nav.open {
    border-bottom: 1px solid #eee !important;
    box-shadow: var(--shadow-sm) !important;
  }

  /* === Tech page — mobile-only tweaks (fig1–fig3) === */
  .fig3-stack {
    position: relative;
    aspect-ratio: 720/600;
    overflow: hidden;
  }

  /* 1) Left-justify the textboxes in fig1, fig2, fig3 */
  body.dark.tech-page .tech-section[aria-labelledby="scatter-title"] .tech-copy,
  body.dark.tech-page .tech-section[aria-labelledby="signatures-title"] .tech-copy,
  body.dark.tech-page .tech-section[aria-labelledby="four-d-title"] .tech-copy {
    text-align: left !important;  /* paragraphs left */
    margin-inline: auto;  /* keep same centered block width */
  }

  /* 2) But keep their titles centered */
  body.dark.tech-page .tech-section[aria-labelledby="scatter-title"] .tech-copy h2,
  body.dark.tech-page .tech-section[aria-labelledby="signatures-title"] .tech-copy h2,
  body.dark.tech-page .tech-section[aria-labelledby="four-d-title"] .tech-copy h2 {
    text-align: left !important;
  }
}

/* ==== iOS right-shift fix: Tech page, mobile only ==== */
/* Stop iOS auto text zoom from nudging widths */
html:where(.layout-b) {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 999px) {
  /* Make tech sections truly full-width on mobile so figures don't need vw hacks */
  body.dark.tech-page .tech-section > .container {
    width: 100% !important;
    margin: 0 !important;
  }

  /* Figures: simple full-width, no negative margins or vw math */
  body.dark.tech-page .tech-section .fig-stack,
  body.dark.tech-page .tech-section .fig2-stack,
  body.dark.tech-page .tech-section .fig3-stack {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  /* Remove side padding added earlier; your .tech-copy text is still centered/tightened elsewhere */
  body.dark.tech-page .tech-section .tech-art,
  body.dark.tech-page .tech-section .tech-copy {
    padding-inline: 0 !important;
  }

  /* Final guard: no horizontal growth from any off-canvas pixels */
  body.dark.tech-page,
  body.dark.tech-page .merged-stack,
  body.dark.tech-page .tech-section {
    overflow-x: clip;
  }
}

@media (max-width: 999px) {
  @supports not (overflow-x: clip) {
    body.dark.tech-page,
    body.dark.tech-page .merged-stack,
    body.dark.tech-page .tech-section {
      overflow-x: hidden;
    }
  }
}

@media (min-width: 769px) and (max-width: 999px) {
  body.dark.tech-page main {
    padding-top: 0 !important;  /* no global gap */
  }

  body.dark.tech-page .tech-hero {
    padding-top: var(--nav-offset) !important;  /* offset lives inside hero */
  }
}

:root {
  --fig1-max-tablet: 700px;
  --fig2-max-tablet: 680px;
  --fig3-max-tablet: 500px;  /* e.g., let Fig 3 run larger */
}

@media (max-width: 999px) {
  body.dark.tech-page .tech-section[aria-labelledby="scatter-title"] .fig-stack {
    max-width: var(--fig1-max-tablet) !important;
    width: 100% !important;  /* stay responsive */
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.dark.tech-page .tech-section[aria-labelledby="signatures-title"] .fig2-stack {
    max-width: var(--fig2-max-tablet) !important;
    width: 100% !important;  /* stay responsive */
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.dark.tech-page .tech-section[aria-labelledby="four-d-title"] .fig3-stack {
    max-width: var(--fig3-max-tablet) !important;
    width: 100% !important;  /* stay responsive */
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@keyframes fig1WipeDown {from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)}}

@keyframes fig1FadeIn {from{opacity:0} to{opacity:1}}

@keyframes fig1ScaleUp {from{transform:scaleY(var(--fig1-scale-start))} to{transform:scaleY(1)}}

@keyframes fig2WipeLR {from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)}}

@keyframes fig2FadeOut {from{opacity:1} to{opacity:0}}

@keyframes fig3WipeDown {from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)}}

/* Technology page, 1000px and wider: Fig. 2 is enlarged 120% and its edge ran 2–8px past the window
   between about 1000 and 1230px wide, which let the page scroll sideways. Clip that sliver.
   (Narrower screens already lock the page width above.) */
@media (min-width: 1000px) {
  body.tech-page main {
    overflow-x: clip;
  }
}

/* Technology page, iPhone Safari: the strip around Safari's bottom search bar takes the <body> color, and
   pulling past the top of the page shows the <html> color. The root keeps the light gray-green for that
   pull-down; while the footer is on screen (script.js adds html.footer-in-view) the body switches to the
   footer's dark gray, so the footer appears to run behind the search bar. */
html.dark-html {
  background-color: #828C83;
}

html.dark-html.footer-in-view body {
  background-color: #2c2c2c;
}

/* reCAPTCHA (Contact page): Google allows hiding its floating badge as long as the page says the site is
   protected by reCAPTCHA, which the line under the Send button does. Use visibility (not display: none)
   so reCAPTCHA keeps working. */
.grecaptcha-badge {
  visibility: hidden;
}

.contact-form .recaptcha-note {
  margin: 12px 0 0;
  font-size: 0.8rem;
  color: #828C83;
}

/* Contact page title size (was an inline style attribute) */
#contact-title {
  font-size: 3.5em;
}

/* ===== News page layout and Read more toggle (moved from news/index.html) ===== */
/* ===== New: full-bleed image hero ===== */
.news-hero {
  padding: 0;
}

/* Existing: list + card layout */
.news-list {
  display: grid;
  gap: 16px;
}

.news-card {
  padding: 20px;
  display: grid;
  grid-template-columns: clamp(360px, 40vw, 520px) 1fr;  /* thumbnail | content */
  gap: 24px;
  align-items: start;
  grid-auto-rows: auto;
}

.news-card .news-thumb {
  grid-column: 1;
  grid-row: 1 / span 5;
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  margin: 0;
}

.news-card h2 {
  margin: 0 0 6px;
}

.news-card .meta {
  color: #666;
  font-variant-numeric: tabular-nums;
  margin: 0 0 8px;
}

.news-card .excerpt {
  margin: 0 0 8px;
}

.news-card .fulltext[hidden] {
  display: none;
}

.news-card .read-more {
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid var(--cyan);
  background: transparent;
  color: #111;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color .2s ease, box-shadow .2s ease, transform .05s ease;
}

.news-card .read-more:hover {
  background: rgba(3,228,238,0.08);
  box-shadow: 0 4px 10px rgba(3,228,238,0.15);
  transform: translateY(-1px);
}

.news-card .read-more:focus {
  outline: 3px solid rgba(3,228,238,0.5);
  outline-offset: 2px;
}

@media (max-width: 1024px) {
  .news-card {
    grid-template-columns: clamp(300px, 45vw, 380px) 1fr;
  }
}

@media (max-width: 768px) {
  .news-card {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .news-card .news-thumb {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100%;
    height: auto;
    margin-bottom: 12px;
    display: block !important;
  }

  .news-card h2,
  .news-card .meta,
  .news-card .excerpt,
  .news-card .fulltext,
  .news-card .read-more {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

/* Order the content stack in the right column */
.news-card h2 {
  grid-column: 2;
  grid-row: 1;
}

.news-card .meta {
  grid-column: 2;
  grid-row: 2;
}

.news-card .excerpt {
  grid-column: 2;
  grid-row: 3;
}

/* collapse link sits between excerpt and full text */
.news-card .collapse-article {
  grid-column: 2;
  grid-row: 4;
  display: block;  /* ensure it breaks onto its own line */
  margin: 4px 0 8px;
}

/* then the full text and the Read more/less button */
.news-card .fulltext {
  grid-column: 2;
  grid-row: 5;
}

.news-card .read-more {
  grid-column: 2;
  grid-row: 6;
}

@media (max-width: 768px) {
  /* Mobile: let items auto-stack */
  .news-card .collapse-article,
  .news-card .fulltext,
  .news-card .read-more {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

@media (max-width: 999px) {
  .site-header.light + main .news-hero {
    margin-top: calc(-1 * var(--nav-offset));
  }
}