/* =========
   Calidar Base Styles
   ========= */

/* CSS Variables */
:root{
  --cyan:#03e4ee;
  --red:#ee0d03;
  --black:#030303;
  --dark:#3f3f3f;
  --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}
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);
}
h1,h2,h3{color:var(--black);line-height:1.2}
h1{font-size:clamp(2rem,4vw,3rem);margin:0 0 0.25rem}
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}
.lede{font-size:1.125rem;opacity:0.95}

/* Containers & Layout */
.container{width:min(1120px,92%);margin-inline:auto}
.section{padding:64px 0}
.section.muted{background:var(--muted)}
.center{text-align:center}
.mt-16{margin-top:16px}
.mt-24{margin-top:24px}
.max-600{max-width:600px;margin:0.5rem auto}

/* Grid */
.grid-2{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:28px;
  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}
.site-header.dark{background:#2c2c2c}

.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)}
.logo-mark{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:linear-gradient(145deg,#fff, #aaf7fb, #ffcfcf); color:#111;font-size:14px}

/* 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)}

/* Dividers / Motifs */
.divider.wave{
  height:14px;background:
  repeating-linear-gradient(90deg,transparent 0 18px, rgba(3,228,238,0.15) 18px 22px),
  linear-gradient(90deg, rgba(255,255,255,0), rgba(3,228,238,0.25), rgba(238,13,3,0.25), rgba(255,255,255,0));
}
.divider.prism{
  height:14px;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(3,228,238,0.35), rgba(238,13,3,0.35), rgba(255,255,255,0));
}

/* Cards & Elements */
.card{
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;
}
.dark .card{background:#2b2b2b;color:#f1f1f1;border:1px solid rgba(255,255,255,0.06)}
.checklist{padding-left:1.2rem;margin:0}
.checklist li{margin:0.35rem 0}

/* Features */
.features{
  display:grid;gap:16px;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:18px;
}
.feature{background:#fff;border:1px solid #eee;border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.feature .icon{color:var(--cyan);width:40px;height:40px}
.feature p{margin:0.35rem 0 0}
.section.muted .feature{background:#fff}

/* Team */
.team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.member h3{margin-top:0.25rem}
.avatar{
  width:72px;height:72px;border-radius:50%;
  background:linear-gradient(135deg,#e6fdff,#ffe5e3);
  color:#111;display:grid;place-items:center;font-weight:800;margin-bottom:10px
}

/* News teaser */
.news-teaser{list-style:none;margin:0;padding:0}
.news-teaser li{display:flex;gap:12px;align-items:baseline;margin:8px 0}
.news-teaser time{font-variant-numeric:tabular-nums;color:#666}

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

/* 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
}
.btn:focus{outline:3px solid rgba(3,228,238,0.6);outline-offset:2px}
.btn.primary{background:var(--cyan);color:#111}
.btn.primary:hover{box-shadow:0 6px 16px rgba(3,228,238,0.3);transform:translateY(-1px)}
.btn.ghost{background:transparent;border-color:var(--cyan);color:#111}
.btn.ghost:hover{background:rgba(3,228,238,0.08)}

/* 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;font-size:1rem;background:#fff;color:#111
}
input:focus,textarea:focus{outline:2px solid var(--cyan);border-color:var(--cyan)}
.form-note{font-size:0.9rem;opacity:0.8}

/* News page */
.news-list{display:grid;gap:16px}
.news-card time{display:block;color:#666;margin-bottom:6px}

/* Footer */
.site-footer{padding:28px 0;border-top:1px solid #eee;margin-top:48px}
.site-footer.dark{background:#2c2c2c;color:#f1f1f1;border-top-color:rgba(255,255,255,0.08)}
.footer-inner{display:grid;grid-template-columns:1fr auto auto 1fr;gap:14px;align-items:center}
.footer-nav a{text-decoration:none;margin-right:12px;color:inherit}
.footer-nav a:hover{color:var(--cyan)}
.social a{margin-right:12px;text-decoration:none}
.copy{text-align:right;color:#666}
.dark .copy{color:#aaa}

/* Tech (dark page) */
.dark{background:#3f3f3f;color:#fff}
.dark h1,.dark h2,.dark h3{color:#fff}
.tech-hero{padding:86px 0 20px;background:linear-gradient(180deg,#2c2c2c 0,#3f3f3f 100%)}
.tech-hero .lede{color:#eaeaea}
.tech-section .caption{display:block;margin-top:8px;opacity:0.8}
.tech-art{display:flex;flex-direction:column;gap:8px}
.scatter-svg,.signature-svg,.fourd-svg{border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}

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

/* Responsive */
@media (max-width: 1024px){
  .features{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width: 768px){
  body{font-size:0.9rem} /* reduce 10%–15% on mobile */
  .grid-2{grid-template-columns:1fr}
  .team{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr; gap:8px}
  .copy{text-align:left}
  .menu-toggle{display:inline-block}
  .nav{position:absolute; inset:60px 0 auto 0; background:#fff; border-bottom:1px solid #eee; transform:translateY(-120%); transition:transform .25s ease; box-shadow:var(--shadow-sm)}
  .site-header.dark .nav{background:#2c2c2c;border-bottom-color:rgba(255,255,255,0.08)}
  .nav.open{transform:translateY(0)}
  .nav-links{flex-direction:column; padding:12px}
  .nav a{padding:12px 4px}
}

/* High-contrast focus for accessibility */
a:focus, button:focus, input:focus, textarea:focus{scroll-margin:100px}

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

.headshot{
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:14px;
  box-shadow:var(--shadow);
}

/* News images */
.news-card .news-thumb,
.news-card .news-image{
  width:100%;
  height:auto;
  border-radius:12px;
}
.news-card .news-thumb{margin-bottom:10px}
.news-card .news-image{margin-top:10px}

/* Tech page art images */
.tech-art img{
  width:100%;
  height:auto;
  border-radius:12px;
  box-shadow:var(--shadow);
}

/* Make dark header nav links white (and hamburger bars visible) */
.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}

/* 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;
  max-width: 900px;
  margin-inline: auto; /* keep it centered in the container */
}

.mission-body{
  /* larger, responsive body text */
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  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,
              #03e4ee 0%,
              #79f0f5 35%,
              #ff9a8f 70%,
              #ee0d03 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

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

/* Shared kicker (Insoma-style) for section labels */
.kicker{
  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);
  background: linear-gradient(90deg,#03e4ee 0%,#79f0f5 35%,#ff9a8f 70%,#ee0d03 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{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px; /* subtle polish; remove if you prefer square edges */
}

/* Subtitle under the kicker */
.tech-subtitle{
  font-size: clamp(1.25rem, 2.6vw, 1.8rem);
  font-weight: 600;
  color: var(--black);
  margin: 6px 0 14px;
}

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

/* Feature card tweaks + image placeholders */
.tech-preview .feature{
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: start;
  background: #fff; /* ensure white if other sections use muted */
  border: 1px solid #eee;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
}
.feature-img{
  width: 64px; height: 64px; object-fit: contain; border-radius: 8px;
}

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

/* Cyan line icons for features */
.feature-icon{ width:64px; height:64px; display:grid; place-items:center; }
.feature-icon svg{ width:36px; height:36px; stroke:var(--cyan); fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* Ensure text sits in the right column of the feature grid */
.tech-preview .feature h3,
.tech-preview .feature p{ grid-column:2; }

/* --- Tech preview: force side-by-side layout on desktop --- */
.tech-preview .container.grid-2{
  display: grid;                          /* ensure it's grid here */
  grid-template-columns: minmax(420px, 540px) 1fr;  /* left = features, right = image */
  gap: 24px;
  align-items: stretch;                   /* make columns share height */
}

/* Right illustration: large and centered */
.tech-preview .tech-illustration{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
}
.tech-preview .tech-illustration img{
  width: 100%;
  height: 100%;
  max-height: 680px;                      /* tune this cap if you want it taller/shorter */
  object-fit: contain;
  display: block;
}

/* --- Bigger, clearer feature icons --- */
.feature-icon{
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
}
.feature-icon svg{
  width: 48px;                            /* up from 36px */
  height: 48px;
  stroke: var(--cyan);
  fill: none;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* make the feature grid accommodate the larger icon */
.tech-preview .feature{
  display: grid;
  grid-template-columns: 72px 1fr;        /* icon | copy */
  gap: 14px;
  align-items: start;
}
.tech-preview .feature h3,
.tech-preview .feature p{ grid-column: 2; }

/* --- Responsive: stack on mobile --- */
@media (max-width: 768px){
  .tech-preview .container.grid-2{
    grid-template-columns: 1fr;           /* stack */
  }
  .tech-preview .tech-illustration{ order: 2; }
  .tech-preview .tech-left{ order: 1; }
  .tech-preview .tech-illustration img{
    max-height: none;                     /* let it size naturally on small screens */
  }
}

/* === Tech Preview: lock 2-column layout & placement === */
.tech-preview .container.grid-2{
  display: grid !important;
  grid-template-columns: minmax(480px, 560px) minmax(0, 1fr) !important; /* left | right */
  gap: 24px;
  align-items: start; /* align tops */
}

.tech-preview .tech-left{ grid-column: 1 !important; }

.tech-preview .tech-illustration{
  grid-column: 2 !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
}
.tech-preview .tech-illustration img{
  width: 100%;
  height: auto;          /* avoid odd parent-height issues */
  max-height: 72vh;      /* big, but not overwhelming; tweak if you like */
  object-fit: contain;
  display: block;
}

/* Stack cleanly on mobile */
@media (max-width: 768px){
  .tech-preview .container.grid-2{ grid-template-columns: 1fr !important; }
  .tech-preview .tech-left,
  .tech-preview .tech-illustration{ grid-column: 1 !important; }
  .tech-preview .tech-illustration img{ max-height: none; }
}

/* === Bigger, clearer feature icons === */
.tech-preview .feature{
  display: grid;
  grid-template-columns: 88px 1fr; /* icon | copy */
  gap: 14px;
  align-items: start;
}
.feature-icon{
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
}
.feature-icon svg{
  width: 56px;           /* bigger drawings */
  height: 56px;
  stroke: var(--cyan);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* keep text in the right column */
.tech-preview .feature h3,
.tech-preview .feature p{ grid-column: 2; }

/* ---- Tech Preview: guaranteed two-column layout ---- */
.tech-grid{
  display: grid !important;                         /* beat any global container rules */
  grid-template-columns: minmax(460px, 560px) 1fr;  /* left = features, right = image */
  gap: 24px;
  align-items: start;                                /* title/subtitle start at same top as image */
}

/* Remove browser default figure margins that can push things down */
.tech-preview figure{ margin: 0 !important; }

.tech-preview .tech-left{ grid-column: 1 !important; }
.tech-preview .tech-illustration{ 
  grid-column: 2 !important; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}
.tech-preview .tech-illustration img{
  width: 100%;
  height: auto;            /* keep aspect ratio */
  max-height: 72vh;        /* makes it tall; adjust to taste */
  object-fit: contain;
  display: block;
}

/* Stack cleanly on mobile */
@media (max-width: 768px){
  .tech-grid{ grid-template-columns: 1fr !important; }
  .tech-preview .tech-left,
  .tech-preview .tech-illustration{ grid-column: 1 !important; }
  .tech-preview .tech-illustration img{ max-height: none; }
}

/* ---- Bigger, clearer icons ---- */
.tech-preview .feature{
  display: grid;
  grid-template-columns: 96px 1fr;   /* larger icon well */
  gap: 14px;
  align-items: start;
}
.feature-icon{
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
}
.feature-icon svg{
  width: 64px;                       /* bigger drawings for clarity (e.g., fingerprint) */
  height: 64px;
  stroke: var(--cyan);
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* keep text in right column */
.tech-preview .feature h3,
.tech-preview .feature p{ grid-column: 2; }

/* === TECH PREVIEW — lock two-column layout & bigger icons === */

/* 1) Force the container to lay out left/right with Flex */
.tech-preview .container.tech-grid{
  display: flex !important;              /* beat global grid/flex rules */
  gap: 24px;
  align-items: stretch;                  /* both columns share the section height */
}

/* 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 */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;                  /* kill default figure margins */
}
.tech-preview .tech-illustration img{
  width: 100%;
  height: auto;                          /* keep aspect ratio */
  max-height: 72vh;                      /* tall image; tweak to taste */
  object-fit: contain;
  display: block;
}

/* 2) Bigger, clearer cyan icons */
.tech-preview .feature{
  display: grid;
  grid-template-columns: 96px 1fr;       /* icon | copy */
  gap: 14px;
  align-items: start;
}
.feature-icon{
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
}
.feature-icon svg{
  width: 64px;
  height: 64px;
  stroke: var(--cyan);
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* keep text to the right of the icon */
.tech-preview .feature h3,
.tech-preview .feature p{ grid-column: 2; }

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

/* === FINAL OVERRIDE for Home tech preview === */
/* Force two columns: left (title/subtitle/features) | right (illustration) */
section.tech-preview > .container.tech-grid{
  display: grid !important;
  grid-template-columns: minmax(460px, 560px) minmax(0, 1fr) !important;
  gap: 24px !important;
  align-items: start !important;
}

/* Place items explicitly into columns */
section.tech-preview > .container.tech-grid > .tech-left{ grid-column: 1 !important; }
section.tech-preview > .container.tech-grid > .tech-illustration{
  grid-column: 2 !important;
  margin: 0 !important;                 /* kill default figure margins */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
section.tech-preview > .container.tech-grid > .tech-illustration img{
  width: 100% !important;
  height: auto !important;
  max-height: 72vh !important;          /* big, but contained */
  object-fit: contain !important;
  display: block !important;
}

/* Mobile: stack cleanly */
@media (max-width: 768px){
  section.tech-preview > .container.tech-grid{
    grid-template-columns: 1fr !important;
  }
  section.tech-preview > .container.tech-grid > .tech-left,
  section.tech-preview > .container.tech-grid > .tech-illustration{
    grid-column: 1 !important;
  }
  section.tech-preview > .container.tech-grid > .tech-illustration img{
    max-height: none !important;
  }
}

/* Bigger, clearer icons so the fingerprint reads well */
section.tech-preview .feature{
  display: grid !important;
  grid-template-columns: 100px 1fr !important;  /* icon | copy */
  gap: 14px !important;
  align-items: start !important;
}
section.tech-preview .feature-icon{
  width: 100px !important;
  height: 100px !important;
  display: grid !important;
  place-items: center !important;
}
section.tech-preview .feature-icon svg{
  width: 68px !important;
  height: 68px !important;
  stroke: var(--cyan) !important;
  fill: none !important;
  stroke-width: 2.6 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
/* keep text to right of icon */
section.tech-preview .feature h3,
section.tech-preview .feature p{ grid-column: 2 !important; }

/* === Home: Tech preview — explicit placement (ignores source order) === */
section.tech-preview > .container.tech-grid{
  display: grid !important;
  grid-template-columns: minmax(460px, 560px) minmax(0,1fr) !important; /* left | right */
  grid-template-areas: "left right" !important;
  gap: 24px !important;
  align-items: start !important; /* align tops */
}

/* Pin each area explicitly to row 1 */
section.tech-preview > .container.tech-grid > .tech-left{
  grid-area: left !important;
  grid-row: 1 !important;
}
section.tech-preview > .container.tech-grid > .tech-illustration{
  grid-area: right !important;
  grid-row: 1 !important;
  margin: 0 !important; /* kill default figure margins */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
section.tech-preview > .container.tech-grid > .tech-illustration img{
  width: 100% !important;
  height: auto !important;
  max-height: 72vh !important;  /* big but contained */
  object-fit: contain !important;
  display: block !important;
}

/* Mobile: stack in order */
@media (max-width: 768px){
  section.tech-preview > .container.tech-grid{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "left"
      "right" !important;
  }
}

/* Icon size bump so details (e.g., fingerprint) read clearly */
section.tech-preview .feature{
  display: grid !important;
  grid-template-columns: 100px 1fr !important;
  gap: 14px !important;
  align-items: start !important;
}
section.tech-preview .feature-icon{
  width: 100px !important;
  height: 100px !important;
  display: grid !important;
  place-items: center !important;
}
section.tech-preview .feature-icon svg{
  width: 68px !important;
  height: 68px !important;
  stroke: var(--cyan) !important;
  fill: none !important;
  stroke-width: 2.6 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
section.tech-preview .feature h3,
section.tech-preview .feature p{ grid-column: 2 !important; }


/* === Home: Tech preview — definitive layout & icon sizing === */

/* Two columns: left (content) | right (illustration) */
section.tech-preview > .container.tech-grid{
  display: grid;
  grid-template-columns: minmax(480px, 560px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;  /* top-align left and right */
}

/* Make features truly vertical (override global .features grid) */
section.tech-preview .tech-left .features{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Bigger, clearer cyan icons */
section.tech-preview .feature{
  display: grid;
  grid-template-columns: 100px 1fr; /* icon | copy */
  gap: 14px;
  align-items: start;
}
section.tech-preview .feature-icon{
  width: 100px;
  height: 100px;
  display: grid;
  place-items: center;
}
section.tech-preview .feature-icon svg{
  width: 68px;
  height: 68px;
  stroke: var(--cyan);
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
section.tech-preview .feature h3,
section.tech-preview .feature p{
  grid-column: 2;
}

/* Right column illustration fills its side and stays tall */
section.tech-preview .tech-illustration{
  margin: 0;                    /* remove default figure margins */
  display: flex;
  align-items: center;
  justify-content: center;
}
section.tech-preview .tech-illustration img{
  width: 100%;
  height: auto;                 /* keep aspect ratio */
  max-height: 72vh;             /* large but contained */
  object-fit: contain;
  display: block;
}

/* Tablet: give the left a bit more room if needed */
@media (max-width: 1024px){
  section.tech-preview > .container.tech-grid{
    grid-template-columns: minmax(420px, 1fr) 1fr;
  }
}

/* Mobile: stack cleanly */
@media (max-width: 768px){
  section.tech-preview > .container.tech-grid{
    grid-template-columns: 1fr;
  }
  section.tech-preview .tech-illustration img{
    max-height: none;
  }
}

/* Tighten spacing between feature title and body (Home > Our Technology) */
section.tech-preview .feature{
  /* keep a larger space between icon and text, but small between h3 and p */
  column-gap: 16px;   /* icon ↔ text */
  row-gap: 4px;       /* h3 ↕ p */
}

section.tech-preview .feature h3{
  margin: 0;          /* remove extra space above/below the title */
  line-height: 1.2;
}

section.tech-preview .feature p{
  margin: 2px 0 0;    /* tiny top margin only */
  line-height: 1.5;   /* readable paragraph density */
}

/* === 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;
}

/* Home > Our Technology: cards = flex row (icon | text) with tight title↕text spacing */
section.tech-preview .tech-left .features{
  display: flex !important;
  flex-direction: column !important;   /* vertical stack of cards */
  gap: 14px;                           /* space between cards */
}

section.tech-preview .feature{
  display: flex !important;
  align-items: flex-start;
  gap: 16px;                           /* icon ↔ text */
  padding: 16px;
  /* neutralize any grid leftovers from earlier rules */
  grid-template-columns: unset !important;
  column-gap: unset !important;
  row-gap: unset !important;
}

section.tech-preview .feature-icon{
  width: 100px;
  height: 100px;
  display: grid;
  place-items: center;
}
section.tech-preview .feature-icon svg{
  width: 68px;
  height: 68px;
  stroke: var(--cyan);
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Tighten title + explainer spacing */
section.tech-preview .feature-content h3{
  margin: 0 0 4px;
  line-height: 1.2;
}
section.tech-preview .feature-content .feature-desc{
  margin: 0;                           /* remove default p margins */
  line-height: 1.45;
}

/* Make left column narrower (~3/4 of previous 480–560px) and stretch rows */
section.tech-preview > .container.tech-grid{
  grid-template-columns: minmax(360px, 420px) minmax(0,1fr) !important; /* left | right */
  align-items: stretch !important; /* right column matches left column height */
}

/* Give the illustration the full column height and let it scale inside */
section.tech-preview .tech-illustration{ align-self: stretch !important; }
section.tech-preview .tech-illustration img{
  width: 100% !important;
  height: 100% !important;      /* fill column height */
  max-height: none !important;  /* override earlier caps */
  object-fit: contain !important;
  display: block !important;
}

/* Add ~half a line of space under each feature title */
section.tech-preview .feature-content h3{
  margin: 0 0 0.6em !important; /* ~½ line (tweak 0.5–0.7em to taste) */
  line-height: 1.2;
}

/* Keep the explainer tight and readable */
section.tech-preview .feature-content .feature-desc{
  margin: 0 !important;
  line-height: 1.5;
}

/* Bigger, thinner-line feature icons for Home > Our Technology */
section.tech-preview .feature-icon{
  width: 110px;
  height: 110px;
}

section.tech-preview .feature-icon svg{
  width: 80px;          /* was ~68px */
  height: 80px;
  stroke: var(--cyan);
  fill: none;
  stroke-width: 1.9;    /* thinner for nuance */
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* === Canonical icon sizing & stroke for Home > Our Technology === */
section.tech-preview .tech-left .feature-icon{
  width: 110px !important;
  height: 110px !important;
}
section.tech-preview .tech-left .feature-icon svg{
  width: 84px !important;      /* bigger drawing */
  height: 84px !important;
  stroke-width: 1.8 !important;/* thinner line for nuance */
  stroke: var(--cyan) !important;
  fill: none !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !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 h1,
.tech-preview.dark h2,
.tech-preview.dark h3{ color:#fff; }

.tech-preview.dark .tech-subtitle{ 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:var(--cyan); color:#111; }
.tech-preview.dark .btn.ghost{ border-color:var(--cyan); color:#fff; }
.tech-preview.dark .btn.ghost:hover{ background:rgba(3,228,238,0.08); }

/* 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 */
  gap: 16px;
}

section.tech-preview .feature-icon{
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;                 /* center the image inside the well */
  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;
}

/* optional: a touch more space between news teaser items when this block is first */
.section .news-teaser li { margin: 10px 0; }

/* Team section: make cards reflect the muted section theme */
.team-section .member.card{
  background: #ededed;                  /* a touch darker than --muted (#f5f5f5) for separation */
  border: 1px solid #e1e1e1;
  box-shadow: none;                      /* flatter look on gray sections */
  color: var(--dark);
}

/* Keep headings strong; soften subtext a bit */
.team-section .member.card h3{ color: var(--black); }
.team-section .member.card p{ color: #4a4a4a; }

/* Optional: match headshot frame to card on muted */
.team-section .headshot{
  box-shadow: none;                      /* remove white-card style drop shadow */
  border: 1px solid rgba(0,0,0,0.04);    /* subtle edge so photos don’t float */
}

/* Team (muted section) — restore depth on cards & photos */
.team-section .member.card{
  /* light surface so shadows read against the muted background */
  background: #fcfcfc;
  border: 1px solid rgba(0,0,0,0.06);
  /* layered drop shadow for depth, similar to the original light cards */
  box-shadow:
    0 10px 24px rgba(0,0,0,0.10),
    0 3px 8px  rgba(0,0,0,0.06);
}

.team-section .member.card h3{ color: var(--black); }
.team-section .member.card p{ color: #4a4a4a; }

/* Photo depth */
.team-section .headshot{
  border: 0;
  box-shadow: 0 8px 18px rgba(0,0,0,0.10);
}

/* 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);
}

/* photo depth so portraits “float” again on gray */
.team-section .headshot{
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
  border: 1px solid rgba(255,255,255,0.55);
}

/* 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 */
}

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

/* Home > Latest News (right column list like Insoma) */
.news-home .news-teaser-list{
  display: grid;
  gap: 18px;
}
.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; }

.news-home .teaser-link{
  display: grid;
  grid-template-columns: 200px 1fr;   /* thumb | text */
  gap: 16px;
  align-items: start;
  text-decoration: none;
  color: inherit;
}
.news-home .teaser-thumb{
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.news-home .teaser-date{
  display: block;
  color: var(--cyan);
  font-weight: 700;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.news-home .teaser-title{
  margin: 0 0 4px;
  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; }

/* Stack nicely on mobile */
@media (max-width: 768px){
  .news-home .teaser-link{ grid-template-columns: 1fr; }
}

/* Home > Latest News layout: give the right column more room */
.news-home{
  /* narrower left rail, wider news rail */
  grid-template-columns: minmax(220px, 300px) 1fr !important;
}

/* 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: var(--cyan);
  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; }

/* Mobile: stack and scale thumbnail nicely */
@media (max-width: 768px){
  .news-home{ grid-template-columns: 1fr !important; }
  .news-home .teaser-link{ grid-template-columns: 1fr; }
  .news-home .teaser-thumb{ width: 100%; }
}

/* ===== Full-bleed image hero (no cropping) ===== */
.news-hero { padding: 0; background: #fff; }
.news-hero .hero-img{
  /* full-bleed to viewport edges */
  width: 100vw;
  height: auto;            /* preserve native aspect ratio */
  display: block;
  margin-left: calc(50% - 50vw);   /* bleed left */
  margin-right: calc(50% - 50vw);  /* bleed right */
  object-fit: contain;     /* ensure no cropping */
  object-position: center;
  /* remove any previous max-height that forced cover-style cropping */
  max-height: none;
}

/* Optional: slightly shorter hero on small screens */
@media (max-width: 768px){
  .news-hero .hero-img{ width: 25%; height: auto; margin: 0 auto; }
}

/* Compact, centered image hero on white */
.news-hero{
  background:#fff;
  padding:28px 0 18px;           /* small breathing room */
}
.news-hero .hero-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
}
.news-hero .hero-img{
  width: min(50%, 820px);         /* ~50% of page, capped */
  height:auto;                    /* keep aspect ratio */
  display:block;
  border-radius:12px;             /* subtle polish; remove if undesired */
  box-shadow: var(--shadow-sm);   /* light depth */
}

/* Make it a bit larger on phones so it doesn't look tiny */
@media (max-width: 768px){
  .news-hero .hero-img{
    width: min(80%, 540px);
  }
}

/* News hero: remove rounding & shadow */
.news-hero .hero-img{
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* how far the cards overlap the hero (tune these three numbers) */
:root {
  --news-overlap: clamp(120px, 5vw, 320px);
}

/* 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));
}

/* Optional: adjust the overlap for small screens */
@media (max-width: 768px) {
  :root { --news-overlap: clamp(64px, 10vw, 160px); }
}

/* === HERO (fixed height, stable right-aligned main, bottom-up mirror) === */
.hero.hero--image{
  position: relative;
  overflow: hidden;
  background: #fff;

  /* fixed section height (tune if desired) */
  height: clamp(480px, 62vh, 680px);

  /* 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;
  max-width: none;         /* allow horizontal overflow left when needed */
}

/* --- WIDE (desktop/tablet): scale by HEIGHT for stable framing --- */
@media (min-width: 769px){
  .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; }
}

/* --- NARROW (phones): scale by WIDTH; main becomes shorter; we reveal mirror --- */
@media (max-width: 768px){
  .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 */
@media (max-width: 768px){
  /* 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;
}

.hero.hero--image .cta-row{
  margin-top: 10px;
}

/* === Our Technology (v2) ==============================================
   Goals:
   - Desktop: two columns, image never shorter than the cards.
   - Cards shrink first; image column resists shrinking.
   - Mobile: stack with image ABOVE cards, no overlap.
   - Zero dependencies on earlier tech-preview rules.
======================================================================= */

section.tech-preview.tech-v2 > .container.tech-grid{
  display: grid;
  /* Left column (cards) can shrink to 420px; right column (image) keeps
     at least 540px so the cards narrow FIRST. */
  grid-template-columns: minmax(420px, 48%) minmax(540px, 1fr);
  gap: 24px;
  align-items: stretch;           /* both columns share the row height */
}

/* name the areas so we can reorder on mobile */
section.tech-preview.tech-v2 > .container.tech-grid{
  grid-template-areas: "cards art";
}
section.tech-preview.tech-v2 .tech-left{ grid-area: cards; }
section.tech-preview.tech-v2 .tech-illustration{
  grid-area: art;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;               /* ensure the figure stretches with the row */
  margin: 0;                      /* kill default figure margins */
  overflow: hidden;               /* safety */
}

/* CRITICAL: image fills the column height on desktop,
   so it is NEVER shorter than the cards. */
section.tech-preview.tech-v2 .tech-illustration img{
  width: 100%;
  height: 100%;
  object-fit: contain;            /* keep aspect ratio */
  display: block;
}

/* Make the feature list strictly vertical (ignores any older grid rules) */
section.tech-preview.tech-v2 .tech-left .features{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Mobile / tablet: stack with IMAGE ABOVE CARDS (no overlap) */
@media (max-width: 980px){
  section.tech-preview.tech-v2 > .container.tech-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "art"
      "cards";
  }
  /* Let the image size naturally when stacked */
  section.tech-preview.tech-v2 .tech-illustration img{
    height: auto;
    width: 100%;
  }
}

/* === Our Technology (authoritative layout) ============================
   Desktop:
     - Two columns: left cards | right image
     - Cards shrink first; image column resists shrinking
     - Image is never shorter than the cards (fills row height)
   Mobile:
     - Stack with IMAGE ABOVE CARDS (no overlap)
   This block is ID-scoped and uses !important to beat legacy rules.
====================================================================== */

/* === Our Technology — definitive layout & sizing =======================
   Desktop:
     • Two rows / two columns:
         row 1: [head | image]
         row 2: [features | image]
     • Image column is wider; image fills row height (never shorter than cards).
     • Feature text width constrained for nice wrapping.
   Mobile:
     • Order: head → image → features.
======================================================================= */

#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 */
}

/* Mobile / tablet: head → image → features, no overlap */
@media (max-width: 980px){
  #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 */
  }
}



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


/* Mobile: remove the extra space above the mammogram image */
@media (max-width: 768px){
  section.tech-preview .tech-illustration{
    align-items: flex-start !important; /* top-align the image */
    justify-content: center !important; /* keep it centered horizontally */
    min-height: 0 !important;           /* don't force tall container */
    padding-top: 0 !important;          /* no internal top padding */
    align-self: auto !important;        /* undo any stretch rules */
  }
  section.tech-preview .tech-illustration img{
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
  }
}

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

/* Reduce the vertical space between subheader and image on phones */
@media (max-width: 768px){
  /* Home section variant */
  section.tech-preview > .container.tech-grid{
    row-gap: var(--tech-mobile-row-gap) !important;
    column-gap: 24px !important; /* keep horizontal spacing */
  }

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

  /* just in case any padding is contributing */
  section.tech-preview .tech-illustration{
    padding-top: 0 !important;
  }
}

:root{
  /* tune these */
  --tech-mobile-title-gap: -10px;   /* subheader → image gap */
  --tech-mobile-image-lift: 0px;  /* extra nudge up for the image; set 0 to disable */
}

/* ===== 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;
  }

  /* optional: micro-lift the image (does not affect image → cards gap) */
  section.tech-preview > .container.tech-grid > .tech-illustration,
  #tech-grid .tech-illustration{
    margin-top: calc(-1 * var(--tech-mobile-image-lift)) !important;
    padding-top: 0 !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%;
  }
}



/* ===================== Tech preview — tablet stacked state ================== */
/* Tune this value for the subheader → image gap on tablet */
:root { --tech-tablet-title-gap: 8px; }  /* try 0–16px */

@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;
  }

  /* Kill any vertical padding that might re-add space above the image */
  #tech-grid .tech-illustration{
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* ===== Mission: fixed heights (exact) ===== */
:root{
  /* tune these to what looks right on your site */
  --mission-h-lg: 480px;
  --mission-h-md: 480px;
  --mission-h-sm: 480px;
  --mission-h-xs: 480px;

  /* optional micro gap above mission, if you want one */
  --mission-top-gap: 0px;
}

/* kill generic .section padding so height is exact */
.mission-section.section{
  padding: 0 !important;
  /* exact height on desktop */
  height: var(--mission-h-lg);
  min-height: var(--mission-h-lg);
  display: grid;                 /* prevents margin collapse */
  place-items: center;           /* vertical + horizontal centering */
  overflow: hidden;              /* no wobble from child margins */
}

/* keep the inner container constrained and centered */
.mission-section .mission-container{
  max-width: 900px;
  width: min(92%, 900px);
  margin-inline: auto;
  padding-block: var(--mission-top-gap) 0;  /* tunable tiny gap above, if desired */
}

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

/* breakpoints: set exact heights */
@media (max-width: 1024px){
  .mission-section.section{
    height: var(--mission-h-md);
    min-height: var(--mission-h-md);
  }
}
@media (max-width: 768px){
  .mission-section.section{
    height: var(--mission-h-sm);
    min-height: var(--mission-h-sm);
  }
}
@media (max-width: 420px){
  .mission-section.section{
    height: var(--mission-h-xs);
    min-height: var(--mission-h-xs);
  }
}

/* (Optional) VS Code Live Preview guard for ultra-tiny iframes */
@media (max-width: 340px) and (max-height: 560px){
  .mission-section.section{
    height: 520px;
    min-height: 520px;
  }
}

/* ===== HERO: lock section height only (keep current art/mirror rules) ===== */
:root{
  /* tune to taste; set all equal if you want one fixed height everywhere */
  --hero-h-lg: 458px;
  --hero-h-md: 458px;
  --hero-h-sm: 458px;
  --hero-h-xs: 458px;
}

/* Desktop default */
.hero.hero--image{
  height: var(--hero-h-lg) !important;
  min-height: var(--hero-h-lg) !important;
  /* no changes to padding, bg art, or mirror rules */
}

/* Tablet */
@media (max-width: 1024px){
  .hero.hero--image{
    height: var(--hero-h-md) !important;
    min-height: var(--hero-h-md) !important;
  }
}

/* Phones */
@media (max-width: 768px){
  .hero.hero--image{
    height: var(--hero-h-sm) !important;
    min-height: var(--hero-h-sm) !important;
  }
}

/* Extra-small guard (e.g., VSCode Live Preview panes) */
@media (max-width: 420px){
  .hero.hero--image{
    height: var(--hero-h-xs) !important;
    min-height: var(--hero-h-xs) !important;
  }
}

/* ===== 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 */
}

/* Tablets & small laptops */
@media (max-width: 1024px){
  .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 */
  }
}

/* Phones */
@media (max-width: 768px){
  .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 */
}

/* Center cards and limit width once the grid collapses */
@media (max-width: 1024px){
  .team{ justify-items: center; } /* centers grid items when single column */
  .team-section .member.card{
    width: min(calc(100% - 2 * var(--team-card-gutter)), var(--team-card-max-md));
    margin-inline: auto;   /* center within the grid cell */
  }
}

@media (max-width: 768px){
  .team-section .member.card{
    width: min(calc(100% - 2 * var(--team-card-gutter)), var(--team-card-max-sm));
  }
}


/* === Team — single row until mobile, step-sized cards === */
:root{
  --team-gap: 24px;

  /* default (≥1200px-ish): 3×340 + gaps fits in 1120px container */
  --team-card-w: 340px;
}

/* Team row: force one line, centered */
.team-section .team{
  display: flex !important;
  flex-wrap: nowrap !important;        /* no wrapping until mobile */
  justify-content: center;
  align-items: stretch;
  gap: var(--team-gap) !important;
}

/* Cards take a fixed step width (from variable above) */
.team-section .member.card{
  flex: 0 0 var(--team-card-w);
  max-width: var(--team-card-w);
}

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

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

/* Mobile: switch to single centered column (uses your headshot max rules) */
@media (max-width: 768px){
  .team-section .team{
    flex-direction: column !important;
    align-items: center;
  }
  .team-section .member.card{
    flex: 1 1 auto;
    width: 100%;
    max-width: var(--team-card-sm-max, 310px); /* keep from spanning full width */
    margin-inline: auto;
  }
}

/* === Team — one row with step-sized cards; centered & fixed gap === */
:root{
  /* pick your gap & card widths */
  --team-gap: 24px;

  /* Desktop step (≥ ~1162px viewport): */
  --team-w-lg: 340px;                   /* 3×340 + 2×24 = 1068 stage width */

  /* Intermediate step (965–1161px viewport): */
  --team-w-md: 280px;                   /* 3×280 + 2×24 = 888 stage width */

  /* Pre-mobile step (769–964px viewport): keeps one row until 768px */
  --team-w-sm: 218px;                   /* 3×218 + 2×24 = 702 stage width */
}

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

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

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

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

/* Mobile: switch to single centered column (uses your headshot caps) */
@media (max-width: 768px){
  .team-section .team{
    flex-direction: column !important;
    align-items: center !important;
  }
  .team-section .member.card{
    flex: 1 1 auto;
    width: 100%;
    max-width: var(--team-card-sm-max, 310px);
    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 */
}

/* One centered row, fixed gap; no wrapping before mobile */
.team-section .team{
  display: grid !important;
  grid-auto-flow: column;
  grid-template-columns: repeat(3, var(--team-w-lg));
  column-gap: var(--team-gap);
  row-gap: 0;
  width: var(--team-stage-lg);
  max-width: 100%;
  margin-inline: auto;
}

/* Keep card boxes fixed to track size */
.team-section .member.card{
  width: var(--team-w-lg);
  max-width: none;
}

/* Step 1: medium */
@media (max-width: 1161px){
  .team-section .team{
    grid-template-columns: repeat(3, var(--team-w-md));
    width: var(--team-stage-md);
  }
  .team-section .member.card{ width: var(--team-w-md); }
}

/* Step 2: small (still one row) */
@media (max-width: 964px){
  .team-section .team{
    grid-template-columns: repeat(3, var(--team-w-sm));
    width: var(--team-stage-sm);
  }
  .team-section .member.card{ width: var(--team-w-sm); }
}

/* Mobile: single centered column (uses your headshot max rules) */
@media (max-width: 768px){
  .team-section .team{
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    row-gap: var(--team-gap);
    width: min(100%, var(--team-card-sm-max, 310px));
  }
  .team-section .member.card{ width: 100%; }
}


/* === 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 */
}

/* on phones, use a smaller gutter (or set to 0 if you want edge-to-edge) */
@media (max-width: 768px){
  .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 */
}

/* --- Step A: wide desktop (image | fixed wide text) ---------------------- */
@media (min-width: 1200px){
  .news-home .teaser-thumb{ width: var(--news-thumb-w); }
  .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));
  }
}

/* --- Step B: desktop shrink (keep image | fixed large text) -------------- */
@media (min-width: 981px) and (max-width: 1199px){
  .news-home .teaser-thumb{ width: var(--news-thumb-w); }
  .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));
  }
}

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

/* --- Step E: stacked before mobile (text width == image width) ----------- */
@media (min-width: 769px) and (max-width: 854px){
  .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; }

/* SIDE-BY-SIDE steps: keep the pull-left on the image */
@media (min-width: 1200px){
  .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)));
  }
}

/* STACKED steps (your D/E): turn OFF the pull so text aligns with the image */
@media (min-width: 820px) and (max-width: 980px),
       (min-width: 769px) and (max-width: 819px){
  .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 */
  }
}

/* ===== Phones: force the entire Latest News section to stack under the title ===== */
@media (max-width: 768px){
  /* Make the section’s container a single column (wins over legacy rules) */
  section.news-home > .container{
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 18px;
  }

  /* Ensure the left column (title + button) appears before the teaser */
  section.news-home > .container > *:first-child{ order: 1; }
  section.news-home > .container > *:last-child{  order: 2; }

  /* Teaser itself stacks, full width, and cancels any desktop thumb shift */
  .news-home .teaser-link{
    grid-template-columns: 1fr !important;
    width: 100% !important;
    justify-items: start;
  }
  .news-home .teaser-thumb{
    width: 100% !important;
    transform: none !important;
  }
}


/* 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 */
  --news-copy-w1: 400px;          /* 768px → step-break */
  --news-copy-w2: 320px;          /* below step-break */
}

/* ===== Latest News: FORCE stack under the title on phones ===== */
@media (max-width: 768px){
  /* Collapse the section wrapper to a single column — cover common wrappers */
  section.news-home,
  section.news-home > .container,
  section.news-home.container,
  .news-home.grid-2,
  section.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;
  }

  /* Ensure visual order: title/button first, teaser second */
  section.news-home > .container > *:first-child{ order: 1 !important; }
  section.news-home > .container > *:last-child{  order: 2 !important; }

  /* Teaser itself stacks and aligns with the image’s left edge */
  .news-home .teaser-link{
    display: grid !important;
    grid-template-columns: 1fr !important;   /* image → text stack */
    width: min(100%, var(--news-mobile-max)) !important;
    justify-items: start !important;
    margin: 0 !important;
  }

  /* Cancel the desktop left “pull” and let the image fill the teaser width */
  .news-home .teaser-thumb{
    width: 100% !important;
    transform: none !important;
  }
}

/* ===== Latest News: FORCE stack under the title on phones ===== */
@media (max-width: 768px){
  section.news-home,
  section.news-home > .container,
  section.news-home.container,
  .news-home.grid-2,
  section.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;
  }

  section.news-home > .container > *:first-child{ order: 1 !important; }
  section.news-home > .container > *:last-child{  order: 2 !important; }

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

  .news-home .teaser-thumb{
    width: 100% !important;
    transform: none !important;
  }

  /* (shared) make sure the copy block can shrink within the teaser */
  .news-home .teaser-copy{ width: 100% !important; }
}

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

/* Step 2: below the switch point → narrower fixed text width */
@media (max-width: calc(var(--news-copy-step-break) - 1px)){
  .news-home .teaser-copy,
  .news-home .teaser-title,
  .news-home .teaser-excerpt,
  .news-home .teaser-date{
    max-width: var(--news-copy-w2) !important;
  }
}

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

/* FORCE stack under the title on phones (single canonical block) */
@media (max-width: 768px){
  /* Collapse wrappers to one column */
  section.news-home,
  section.news-home > .container,
  section.news-home.container,
  .news-home.grid-2,
  section.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;
  }

  /* Title/button first, teaser second */
  section.news-home > .container > *:first-child{ order: 1 !important; }
  section.news-home > .container > *:last-child{  order: 2 !important; }

  /* 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;
    padding-right: var(--news-rhs-gutter); /* keep your RHS padding */
  }

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

  /* Let the copy block shrink within the teaser width */
  .news-home .teaser-copy{ width: 100% !important; }
}

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

/* Step 2: ≤400px → narrower fixed text width */
@media (max-width: 564px){
  .news-home .teaser-copy,
  .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 */
}

/* --- 2×2 range step A: 901–980px ----------------------------------------- */
@media (min-width: 901px) and (max-width: 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; }
}

/* --- 2×2 range step B: 769–900px ----------------------------------------- */
@media (min-width: 769px) and (max-width: 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; }
}

/* --- Phones (4×1 list) step A: 641–768px ---------------------------------- */
@media (max-width: 768px) and (min-width: 641px){
  /* 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; }
}

/* --- Phones (4×1 list) step B: 481–640px ---------------------------------- */
@media (max-width: 640px) and (min-width: 481px){
  #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; }
}

/* --- Phones (4×1 list) step C: ≤480px ------------------------------------ */
@media (max-width: 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; }
}

/* Safety: when stacked (≤980px) make sure no stray padding re-adds the gap */
@media (max-width: 980px){
  #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 */
  .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 */
  .site-header .nav.open{
    transform: translateY(0) !important;
    box-shadow: var(--shadow-sm) !important;
    border-bottom: 1px solid #eee !important;
  }
  .site-header.dark .nav.open{
    border-bottom-color: rgba(255,255,255,0.08) !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;
}

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

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

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

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

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

/* === Home hero: left-side mirrored "ghost" image =======================
   Tunables:
     --hero-ghost-opacity : 0 → 1 transparency of the ghost
     --hero-ghost-shift   : how far left of screen center to pin it
   It stays pinned as the viewport narrows and simply crops away.
======================================================================= */
:root{
  --hero-ghost-opacity: 0.18;  /* tweak to taste */
  --hero-ghost-shift: 800px;   /* distance left of center */
}

.hero.hero--image .hero-art--ghost{
  position: absolute;
  pointer-events: none;
  z-index: 1;                                /* below main; above bg */
  opacity: var(--hero-ghost-opacity);
  transform: scaleX(-1);                     /* flip left↔right */
  right: calc(50% + var(--hero-ghost-shift));/* pin relative to center */
}

/* Wide screens: size by height like the main art */
@media (min-width: 769px){
  .hero.hero--image .hero-art--ghost{
    bottom: 0;
    top: auto;
    height: 100%;
    width: auto;
  }
}

/* Phones/tablets: keep it pinned; hero overflow crops it out */
@media (max-width: 768px){
  .hero.hero--image .hero-art--ghost{
    top: 0;
    bottom: auto;
    height: auto;
    width: auto;
  }
}

/* --- Global guard: prevent RHS white gutter from off-canvas layers --- */
html, body { 
  max-width: 100%;
  overflow-x: clip;          /* modern */
}
@supports not (overflow-x: clip){
  html, 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 */
  position: relative;        /* ensure absolute children are clipped here */
}

/* 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, 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;
  max-width: none;          /* ignore global img max-width */
  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 */
}

#mission-title{
  scroll-margin-top: var(--anchor-offset-lg);
}

@media (max-width: 768px){
  #mission-title{ scroll-margin-top: var(--anchor-offset-sm); }
}

/* Global anchor offset driven by a runtime variable */
html{
  scroll-padding-top: var(--anchor-offset, 90px);  /* fallback if JS fails */
}

/* Make the mission title honor the same offset */
#mission-title{
  scroll-margin-top: var(--anchor-offset, 90px);
}

/* global (unchanged) */
html{ 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 */
}

/* Footer: stack disclaimer over copyright */
.site-footer .copy{
  display: flex;
  flex-direction: column;
  gap: 4px;                 /* space between the two lines */
  text-align: center;        /* preserves your current alignment */
  align-items: center;     /* center the column itself */
}
@media (max-width: 768px){
  .site-footer .copy{ text-align: center; } /* matches your mobile rule */
}

/* “Tiny” disclaimer text */
.site-footer .copy .disclaimer{
  font-size: 0.72rem;       /* tweak smaller/larger as you like */
  line-height: 1.35;
  color: #666;
  max-width: 70ch;          /* keeps the long line readable */
}
.site-footer.dark .copy .disclaimer{ color: #aaa; } /* dark footer variant */

/* Footer: center text + scale logo */
:root{ --footer-logo-h: 54px; } /* tweak to match your two-line stack */

.site-footer .footer-brand{
  display: flex;
  align-items: center;     /* vertical-align with text block */
  justify-content: left; /* keeps it centered in its grid cell */
}
.site-footer .footer-brand img{
  height: var(--footer-logo-h);
  width: auto;
}

/* === Footer — mobile logo centering + single-step text width === */

/* Tunables */
:root{
  /* width of the footer text block */
  --footer-copy-w-desktop: 70ch;   /* default on desktop/tablet */
  --footer-copy-w-mobile: 38ch;    /* snap-to width on phones (tune) */
  --footer-copy-w: var(--footer-copy-w-desktop);
}

/* Constrain and center the text block */
.site-footer .copy{
  width: min(92%, var(--footer-copy-w));
  margin-inline: auto;
  text-align: center;          /* keep centered */
  align-items: center;         /* you already use flex; keep it centered */
}

/* Make the disclaimer honor the same width cap */
.site-footer .copy .disclaimer{
  max-width: var(--footer-copy-w);
}

/* Phones: center the logo ABOVE the text and snap width to mobile size */
@media (max-width: 768px){
  :root{ --footer-copy-w: var(--footer-copy-w-mobile); }

  /* stack is already 1 column; just center the logo row */
  .site-footer .footer-brand{
    justify-content: center;
  }
  .site-footer .footer-brand img{
    margin: 0 auto;            /* ensure it’s visually centered */
  }
}

/* === 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;
  margin: 0 0 6px;
}

/* 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;
}

/* Steps: swap width + body-copy size by viewport */
@media (min-width: 1400px){
  :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 */

/* ===== Canonical footer layout + snap textbox widths ===== */
:root{
  --footer-logo-h: 54px;
  --footer-pivot: 640px;      /* when layout becomes logo | text */

  /* 👉 EDIT THESE to change the textbox widths by step */
  --footer-copy-s1: 480px;     /* ≥1200px */
  --footer-copy-s2: 480px;     /* 981–1199px */
  --footer-copy-s3: 480px;     /* 769–980px  */
  --footer-copy-s4: 340px;     /* 401–640px  */
  --footer-copy-s5: 300px;     /* ≤400px     */

  /* active token (updated by the MQs below) */
  --footer-copy: var(--footer-copy-s1);
}

/* Step switches */
@media (max-width: 1199px){ :root{ --footer-copy: var(--footer-copy-s2); } }
@media (max-width: 697px) { :root{ --footer-copy: var(--footer-copy-s3); } }
@media (max-width: 571px) { :root{ --footer-copy: var(--footer-copy-s4); } }
@media (max-width: 470px) { :root{ --footer-copy: var(--footer-copy-s5); } }

/* Desktop/tablet: logo left, text truly centered to the viewport */
footer.site-footer .footer-inner{
  display: grid;
  grid-template-columns: 1fr auto 1fr;       /* L spacer | TEXT | R spacer */
  align-items: center;
}
footer.site-footer .footer-brand{
  grid-column: 1; justify-self: start;
}
footer.site-footer .footer-brand img{
  height: var(--footer-logo-h); width: auto;
}
footer.site-footer .copy{
  grid-column: 2;
  justify-self: center;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  width: min(92%, var(--footer-copy));
  margin: 0;
}
footer.site-footer .copy .disclaimer{
  max-width: var(--footer-copy);
}

/* Narrow screens: pivot to one row "logo | text block" */
@media (max-width: 696px){
  footer.site-footer .footer-inner{
    grid-template-columns: auto 1fr;         /* logo | text */
  }
  footer.site-footer .copy{
    grid-column: 2;
    justify-self: right;                     /* block starts next to logo */
    text-align: center;                      /* lines centered within block */
    width: min(100%, var(--footer-copy));
  }
}

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

  /* keep the right gutter for the text block */
  .news-home .teaser-copy{               /* preferred if this wrapper exists */
    padding-right: var(--news-rhs-gutter) !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; }