/* ==========================================================================
   Battery Management Solutions — Public Stylesheet
   Design system: technical / instrument-panel corporate.
   Palette (per brief): Black #111111, Red #D32F2F, Grey #757575, White #FFF.
   Supporting deep navy #16223A echoes the BMS logo for depth.
   ========================================================================== */

/* ----------  Design Tokens  ---------- */
:root {
  --ink:        #111111;   /* primary black            */
  --ink-navy:   #16223A;   /* deep navy (logo) depth    */
  --ink-navy-2: #1E2C48;
  --red:        #D32F2F;   /* secondary / CTA           */
  --red-dark:   #B0201F;
  --red-soft:   #FBEAEA;
  --grey:       #757575;   /* accent text               */
  --grey-2:     #9AA0A8;
  --line:       #E4E6EA;   /* hairline borders          */
  --bg:         #FFFFFF;   /* background                 */
  --bg-soft:    #F5F6F8;   /* subtle grey section bg     */
  --bg-soft-2:  #EEF0F3;

  --font-display: "Saira", "Montserrat", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --wrap: 1200px;
  --radius: 4px;
  --radius-lg: 10px;
  --shadow-sm: 0 2px 10px rgba(17,17,17,.05);
  --shadow:    0 14px 40px rgba(17,17,17,.10);
  --shadow-lg: 0 30px 70px rgba(17,17,17,.16);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ----------  Reset  ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; font-size: inherit; }

/* ----------  Typography  ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--ink);
}
h1 { font-size: clamp(2.4rem, 5.2vw, 4.1rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); }
p  { color: #3a3f47; }

/* Eyebrow label — a recurring structural device */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--red);
  display: inline-block;
}
.eyebrow.light { color: #ff8f8f; }
.eyebrow.light::before { background: #ff8f8f; }

.lead { font-size: 1.12rem; color: #454b53; }

/* ----------  Layout helpers  ---------- */
.wrap { width: min(100% - 3rem, var(--wrap)); margin-inline: auto; }
.section { padding: clamp(4rem, 8vw, 7rem) 0; }
.section--soft { background: var(--bg-soft); }
.section--ink { background: var(--ink-navy); color: #fff; }
.section-head { max-width: 720px; margin-bottom: 3rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: .9rem; font-size: 1.08rem; color: var(--grey); }
.text-red { color: var(--red); }

/* ----------  Buttons  ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .98rem;
  letter-spacing: .01em;
  padding: .95rem 1.8rem;
  border-radius: var(--radius);
  transition: transform .25s var(--ease), background .25s, color .25s, box-shadow .25s;
  border: 1.5px solid transparent;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn--red    { background: var(--red); color: #fff; box-shadow: 0 10px 26px rgba(211,47,47,.28); }
.btn--red:hover { background: var(--red-dark); transform: translateY(-2px); }
.btn--dark   { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; transform: translateY(-2px); }
.btn--ghost  { border-color: rgba(255,255,255,.35); color: #fff; }
.btn--ghost:hover { background: #fff; color: var(--ink); border-color:#fff; }
.btn--outline { border-color: var(--line); color: var(--ink); background:#fff; }
.btn--outline:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn--lg { padding: 1.1rem 2.2rem; font-size: 1.05rem; }

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.topbar {
  background: var(--ink);
  color: #cfd3da;
  font-size: .82rem;
}
.topbar__inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .5rem 0; }
.topbar a { color: #cfd3da; transition: color .2s; }
.topbar a:hover { color: #fff; }
.topbar__meta { display: flex; gap: 1.6rem; align-items: center; }
.topbar__meta span { display: inline-flex; align-items: center; gap: .45rem; }
.topbar__meta svg { width: 15px; height: 15px; color: var(--red); }
.topbar__socials { display: flex; gap: 1rem; align-items: center; }
.topbar__tag { font-family: var(--font-mono); letter-spacing: .16em; text-transform: uppercase; font-size: .68rem; color: var(--grey-2); }

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s;
}
.site-header.scrolled { box-shadow: var(--shadow-sm); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 78px; }
.nav__logo img { height: 46px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 2.1rem; }
.nav__links a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: #23262c;
  position: relative;
  padding: .3rem 0;
  transition: color .2s;
}
.nav__links a::after {
  content:""; position:absolute; left:0; bottom:-4px; height:2px; width:0;
  background: var(--red); transition: width .28s var(--ease);
}
.nav__links a:hover, .nav__links a.active { color: var(--ink); }
.nav__links a:hover::after, .nav__links a.active::after { width: 100%; }
.nav__cta { display: flex; align-items: center; gap: 1rem; }
.nav__toggle { display: none; flex-direction: column; gap: 5px; padding: .4rem; }
.nav__toggle span { width: 26px; height: 2.5px; background: var(--ink); border-radius: 2px; transition: .3s; }
.nav__toggle.open span:nth-child(1){ transform: translateY(7.5px) rotate(45deg); }
.nav__toggle.open span:nth-child(2){ opacity: 0; }
.nav__toggle.open span:nth-child(3){ transform: translateY(-7.5px) rotate(-45deg); }

/* ==========================================================================
   HERO  — the diagnostic thesis
   ========================================================================== */
.hero {
  position: relative;
  background: var(--ink-navy);
  color: #fff;
  overflow: hidden;
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 7rem);
}
.hero::before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(1000px 500px at 80% -10%, rgba(211,47,47,.22), transparent 60%),
    linear-gradient(180deg, var(--ink-navy) 0%, #101a2e 100%);
  z-index: 0;
}
/* faint circuit grid */
.hero::after {
  content:""; position:absolute; inset:0; z-index:0; opacity:.06;
  background-image:
    linear-gradient(rgba(255,255,255,.7) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.7) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 70% 40%, #000 0%, transparent 75%);
}
.hero__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items: center;
}
.hero h1 { color: #fff; }
.hero h1 .accent { color: var(--red); }
.hero__sub { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.1rem,1.8vw,1.4rem); color: #b9c2d4; margin: 1rem 0 1.4rem; }
.hero p.lead { color: #c4ccda; max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.hero__quote {
  margin-top: 2.3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.14);
  font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color:#fff;
}
.hero__quote span { color: var(--red); }

/* Diagnostic readout card — signature element */
.readout {
  position: relative;
  background: linear-gradient(160deg, #fff 0%, #f3f5f8 100%);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  box-shadow: var(--shadow-lg);
}
.readout__img {
  border-radius: 8px; overflow: hidden; aspect-ratio: 16/10; margin-bottom: 1.2rem;
  border: 1px solid var(--line);
}
.readout__img img { width:100%; height:100%; object-fit: cover; }
.readout__head { display:flex; justify-content: space-between; align-items:center; margin-bottom: 1rem; }
.readout__title { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--grey); }
.readout__badge { font-family: var(--font-mono); font-size: .7rem; letter-spacing:.1em; color: var(--red); border:1px solid var(--red); border-radius: 40px; padding: .2rem .6rem; }
.gauge { display:flex; align-items:center; gap:1.1rem; margin-bottom: 1.1rem; }
.gauge__ring {
  --v: 92;
  width: 84px; height: 84px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--red) calc(var(--v)*1%), #e7eaef 0);
  display:grid; place-items:center; position: relative;
}
.gauge__ring::after { content:""; position:absolute; inset:9px; background:#fff; border-radius:50%; }
.gauge__val { position: relative; z-index:1; font-family: var(--font-mono); font-weight:700; font-size:1.25rem; }
.gauge__val small { font-size:.6rem; display:block; text-align:center; color: var(--grey); letter-spacing:.1em; }
.gauge__label strong { display:block; font-family: var(--font-display); font-size: 1.05rem; }
.gauge__label span { font-size:.85rem; color: var(--grey); }
.readout__metrics { display:grid; grid-template-columns: repeat(3,1fr); gap:.6rem; }
.metric { background:#fff; border:1px solid var(--line); border-radius:6px; padding:.7rem .6rem; text-align:center; }
.metric b { display:block; font-family: var(--font-mono); font-weight:700; font-size:1.05rem; color: var(--ink); }
.metric span { font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color: var(--grey); }

/* ==========================================================================
   HERO SLIDESHOW (React component) — full-bleed on home, slim on inner pages
   ========================================================================== */
.hs { position: relative; width:100%; overflow: hidden; background: var(--ink-navy); color:#fff; isolation:isolate; }
.hs--full { height: clamp(560px, 92vh, 900px); display:flex; align-items:center; }
.hs--slim { height: clamp(280px, 40vw, 420px); display:flex; align-items:center; }

.hs__layers { position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; z-index:0; }
.hs__slide {
  position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; opacity:0;
  transition: opacity 1.1s ease;
}
.hs__slide img {
  display:block; width:100%; height:100%; min-width:100%; object-fit:cover; object-position:center;
  transform: scale(1); transition: transform linear;
  filter: saturate(1.05);
}
.hs__slide.active { opacity:1; z-index:1; }
.hs__slide.active img { transform: scale(1.09); transition-duration: inherit; }
.hs__overlay {
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(10,15,28,.92) 0%, rgba(10,15,28,.72) 32%, rgba(10,15,28,.42) 58%, rgba(10,15,28,.28) 100%),
    linear-gradient(0deg, rgba(0,0,0,.35), transparent 40%);
}
.hs--slim .hs__overlay {
  background:
    linear-gradient(100deg, rgba(10,15,28,.90) 0%, rgba(10,15,28,.66) 40%, rgba(10,15,28,.38) 100%);
}

.hs__wrap { position:relative; z-index:2; width:100%; }
.hs__content { max-width: 640px; animation: hsIn .8s var(--ease) both; }
.hs--slim .hs__content { max-width: 700px; }
@keyframes hsIn {
  from { opacity:0; transform: translateY(22px); }
  to   { opacity:1; transform:none; }
}
.hs .crumbs { animation: hsIn .6s var(--ease) both; }
.hs__content .eyebrow { animation: hsIn .7s var(--ease) both; animation-delay:.05s; }
.hs__content h1 { animation: hsIn .8s var(--ease) both; animation-delay:.1s; }
.hs__content p  { animation: hsIn .8s var(--ease) both; animation-delay:.18s; }
.hs__content .hero__actions { animation: hsIn .8s var(--ease) both; animation-delay:.26s; }
.hs--full h1 { color:#fff; }
.hs--full h1 .accent { color: var(--red); }
.hs--full p { color:#c9d0dd; }
.hs--slim h1 { color:#fff; }
.hs--slim p { color:#c2c8d2; margin-top:.6rem; max-width:60ch; }

.hs__dots { position:absolute; z-index:2; left:50%; bottom: clamp(1.2rem,3vw,2.2rem); transform:translateX(-50%); display:flex; gap:.5rem; }
.hs--slim .hs__dots { bottom: 1.1rem; }
.hs__dot { width:34px; height:4px; border-radius:3px; background: rgba(255,255,255,.28); overflow:hidden; position:relative; transition: background .3s; }
.hs__dot.active { background: rgba(255,255,255,.28); }
.hs__dot-bar { position:absolute; inset:0; background: var(--red); transform-origin:left; animation-name: hsBar; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes hsBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hs__arrow {
  position:absolute; z-index:2; top:50%; transform: translateY(-50%);
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); color:#fff;
  font-size:1.6rem; line-height:1; backdrop-filter: blur(6px);
  transition: background .25s, transform .25s, border-color .25s;
}
.hs__arrow:hover { background: var(--red); border-color: var(--red); transform: translateY(-50%) scale(1.06); }
.hs__arrow--prev { left: clamp(1rem,3vw,2.5rem); }
.hs__arrow--next { right: clamp(1rem,3vw,2.5rem); }

/* Floating diagnostic readout card, overlaid on the homepage slideshow */
.hs__readout {
  position:absolute; z-index:3; right: clamp(1.2rem,4vw,4rem); bottom: clamp(4.5rem,9vw,6rem);
  width: min(340px, 32vw);
  animation: hsFloat 1s var(--ease) .35s both, floatY 5s ease-in-out 1.4s infinite;
}
@keyframes hsFloat { from { opacity:0; transform: translateY(30px) scale(.96); } to { opacity:1; transform:none; } }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

@media (max-width: 980px) {
  .hs__readout { display:none; }
  .hs--full { height: clamp(520px, 100vh, 760px); }
}
@media (max-width: 640px) {
  .hs--full { height: auto; min-height: 92vh; padding: 7rem 0 3rem; }
  .hs--slim { height: auto; padding: 4rem 0 2.2rem; }
  .hs__arrow { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .hs__slide, .hs__slide img, .hs__content, .hs__readout { animation:none !important; transition:none !important; }
}

/* ==========================================================================
   IMAGE-BEHIND-TEXT SECTIONS — full-bleed photo backgrounds with a glass
   text panel on top, used to break up the page and feel more premium.
   ========================================================================== */
.bg-feature {
  position:relative; overflow:hidden; color:#fff;
  padding: clamp(4.5rem,9vw,7.5rem) 0;
}
.bg-feature__img { position:absolute; inset:0; z-index:0; }
.bg-feature__img img { width:100%; height:100%; object-fit:cover; }
.bg-feature__img::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(100deg, rgba(9,13,24,.90) 0%, rgba(9,13,24,.68) 40%, rgba(9,13,24,.30) 100%);
}
.bg-feature__panel {
  position:relative; z-index:1; max-width: 620px;
  background: rgba(15,20,34,.38); border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px); border-radius: var(--radius-lg);
  padding: clamp(1.8rem,4vw,2.8rem);
  box-shadow: var(--shadow-lg);
}
.bg-feature__panel h2 { color:#fff; }
.bg-feature__panel p { color:#c9d0dd; }
.bg-feature__panel .checklist li { color:#e7eaf0; }
.bg-feature__panel .checklist svg { color: var(--red); }

/* ==========================================================================
   MICRO-ANIMATIONS — staggered reveals, hover shimmer, gentle float
   ========================================================================== */
.cards .card:nth-child(1), .features .feature:nth-child(1), .quotes .quote:nth-child(1), .article-grid .post:nth-child(1) { transition-delay: .03s; }
.cards .card:nth-child(2), .features .feature:nth-child(2), .quotes .quote:nth-child(2), .article-grid .post:nth-child(2) { transition-delay: .11s; }
.cards .card:nth-child(3), .features .feature:nth-child(3), .quotes .quote:nth-child(3), .article-grid .post:nth-child(3) { transition-delay: .19s; }
.features .feature:nth-child(4) { transition-delay: .27s; }
.features .feature:nth-child(5) { transition-delay: .35s; }
.features .feature:nth-child(6) { transition-delay: .43s; }

.btn { position:relative; overflow:hidden; }
.btn::after {
  content:""; position:absolute; inset:0; z-index:0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--ease);
}
.btn:hover::after { transform: translateX(120%); }
.btn span, .btn svg { position:relative; z-index:1; }

.feature__icon { transition: transform .35s var(--ease), background .35s; }
.feature:hover .feature__icon { transform: scale(1.1) rotate(-4deg); background: var(--red); color:#fff; }

/* ==========================================================================
   STATS BAND
   ========================================================================== */
.stats { background: var(--ink); color:#fff; }
.stats__grid { display:grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: rgba(255,255,255,.08); }
.stat { background: var(--ink); padding: 2.4rem 1.5rem; text-align:center; }
.stat b { font-family: var(--font-display); font-weight:700; font-size: clamp(2.2rem,4vw,3.1rem); color:#fff; display:block; line-height:1; }
.stat b i { color: var(--red); font-style: normal; }
.stat span { display:block; margin-top:.6rem; font-size:.88rem; letter-spacing:.04em; color:#aeb5c1; }

/* ==========================================================================
   SERVICE CARDS (grid)
   ========================================================================== */
.cards { display:grid; grid-template-columns: repeat(3,1fr); gap: 1.6rem; }
.card {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg);
  overflow:hidden; display:flex; flex-direction:column;
  transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.card__media { position: relative; aspect-ratio: 16/10; overflow:hidden; background: var(--bg-soft); }
.card__media img { width:100%; height:100%; object-fit: cover; transition: transform .6s var(--ease); }
.card:hover .card__media img { transform: scale(1.06); }
.card__icon {
  position:absolute; left:1.1rem; bottom:-24px; width:52px; height:52px; border-radius:12px;
  background: var(--red); color:#fff; display:grid; place-items:center; box-shadow: 0 10px 22px rgba(211,47,47,.35);
}
.card__icon svg { width:26px; height:26px; }
.card__body { padding: 2.1rem 1.5rem 1.6rem; display:flex; flex-direction:column; flex:1; }
.card__body h3 { margin-bottom:.6rem; }
.card__body p { font-size:.98rem; color:#4a5058; }
.card__link { margin-top:1.2rem; font-family:var(--font-display); font-weight:600; color:var(--red); display:inline-flex; gap:.4rem; align-items:center; }
.card__link svg { width:16px; height:16px; transition: transform .25s; }
.card:hover .card__link svg { transform: translateX(4px); }

/* ==========================================================================
   SPLIT / FEATURE BLOCKS (alternating image+text)
   ========================================================================== */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items:center; }
.split + .split { margin-top: clamp(3rem,6vw,5.5rem); }
.split--reverse .split__media { order: 2; }
.split__media { position: relative; }
.split__media .frame {
  border-radius: var(--radius-lg); overflow:hidden; aspect-ratio: 4/3; box-shadow: var(--shadow);
}
.split__media .frame img { width:100%; height:100%; object-fit: cover; }
.split__media .tag {
  position:absolute; bottom:-18px; right:-10px; background:var(--red); color:#fff;
  font-family:var(--font-display); font-weight:600; padding:.9rem 1.4rem; border-radius:8px;
  box-shadow: var(--shadow); font-size:.95rem;
}
.split__media .tag.left { right:auto; left:-10px; }
.split__body h2 { margin-bottom: 1.1rem; }
.split__body p { margin-bottom: 1rem; }

/* checklist */
.checklist { display:grid; gap:.75rem; margin: 1.4rem 0; }
.checklist li { display:flex; gap:.75rem; align-items:flex-start; font-weight:500; color:#23262c; }
.checklist svg { width:22px; height:22px; flex:none; color: var(--red); margin-top:1px; }

/* ==========================================================================
   WHY / FEATURE ICON GRID
   ========================================================================== */
.features { display:grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; }
.feature {
  padding: 2rem 1.7rem; border:1px solid var(--line); border-radius: var(--radius-lg); background:#fff;
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.feature:hover { border-color:transparent; box-shadow: var(--shadow); transform: translateY(-4px); }
.feature__icon { width:48px; height:48px; border-radius:12px; background:var(--red-soft); color:var(--red); display:grid; place-items:center; margin-bottom:1.1rem; }
.feature__icon svg { width:26px; height:26px; }
.feature h3 { font-size:1.2rem; margin-bottom:.5rem; }
.feature p { font-size:.95rem; }

/* ==========================================================================
   INDUSTRIES TABLE
   ========================================================================== */
.industries { display:grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.ind-col { border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden; background:#fff; }
.ind-col__head { background: var(--ink-navy); color:#fff; padding:1.1rem 1.5rem; font-family:var(--font-display); font-weight:600; font-size:1.15rem; display:flex; align-items:center; gap:.7rem; }
.ind-col__head svg { width:22px; height:22px; color: var(--red); }
.ind-col ul li { display:flex; align-items:center; gap:.8rem; padding: .9rem 1.5rem; border-top:1px solid var(--line); font-weight:500; }
.ind-col ul li::before { content:""; width:7px; height:7px; background:var(--red); border-radius:2px; flex:none; }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.quotes { display:grid; grid-template-columns: repeat(3,1fr); gap:1.6rem; }
.quote {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem 1.7rem;
  position: relative;
}
.quote__mark { font-family: var(--font-display); font-size: 3.4rem; line-height:.6; color: var(--red); opacity:.25; }
.quote p { font-size:1.02rem; color:#2c3138; font-style: italic; margin:.4rem 0 1.4rem; }
.quote__who { display:flex; align-items:center; gap:.9rem; }
.avatar { width:44px; height:44px; border-radius:50%; background: var(--ink-navy); color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; }
.quote__who strong { display:block; font-family: var(--font-display); }
.quote__who span { font-size:.85rem; color: var(--grey); }

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */
.faq { max-width: 860px; margin-inline:auto; }
.faq__item { border-bottom:1px solid var(--line); }
.faq__q {
  width:100%; text-align:left; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding: 1.4rem 0; font-family:var(--font-display); font-weight:600; font-size:1.12rem; color: var(--ink);
}
.faq__q .ic { width:30px; height:30px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; flex:none; transition:.3s; position:relative; }
.faq__q .ic::before, .faq__q .ic::after { content:""; position:absolute; background:var(--ink); }
.faq__q .ic::before { width:12px; height:2px; }
.faq__q .ic::after  { width:2px; height:12px; transition: transform .3s; }
.faq__item.open .faq__q .ic { background:var(--red); border-color:var(--red); }
.faq__item.open .faq__q .ic::before, .faq__item.open .faq__q .ic::after { background:#fff; }
.faq__item.open .faq__q .ic::after { transform: scaleY(0); }
.faq__a { max-height:0; overflow:hidden; transition: max-height .4s var(--ease); }
.faq__a p { padding: 0 0 1.4rem; color: var(--grey); }

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band { position: relative; background: var(--ink); color:#fff; overflow:hidden; }
.cta-band::before { content:""; position:absolute; inset:0; background: radial-gradient(700px 400px at 85% 120%, rgba(211,47,47,.35), transparent 60%); z-index:0; }
.cta-band--img .bg-feature__img::after { background: linear-gradient(100deg, rgba(9,13,24,.94) 0%, rgba(9,13,24,.80) 45%, rgba(9,13,24,.55) 100%); }
.cta-band__inner { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:2rem; flex-wrap:wrap; padding: clamp(3rem,6vw,4.5rem) 0; }
.cta-band h2 { color:#fff; max-width: 20ch; }
.cta-band p { color:#c2c8d2; margin-top:.7rem; }
.cta-band__actions { display:flex; gap:1rem; flex-wrap:wrap; }

/* ==========================================================================
   PAGE HERO (interior pages)
   ========================================================================== */
.pagehero { background: var(--ink-navy); color:#fff; position:relative; overflow:hidden; padding: clamp(3rem,6vw,5rem) 0; }
.pagehero::before { content:""; position:absolute; inset:0; background: radial-gradient(800px 400px at 85% -20%, rgba(211,47,47,.22), transparent 60%); }
.pagehero__inner { position:relative; z-index:1; }
.pagehero h1 { color:#fff; }
.pagehero p { color:#c2c8d2; max-width: 60ch; margin-top:.8rem; }
.crumbs { font-family: var(--font-mono); font-size:.78rem; letter-spacing:.08em; color:#9aa6bb; margin-bottom:1rem; }
.crumbs a:hover { color:#fff; }
.crumbs .sep { color: var(--red); margin:0 .5rem; }

/* ==========================================================================
   ARTICLES
   ========================================================================== */
.article-toolbar { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; align-items:center; margin-bottom:2.4rem; }
.search-form { display:flex; border:1px solid var(--line); border-radius:40px; overflow:hidden; background:#fff; min-width: 280px; }
.search-form input { border:none; padding:.7rem 1.1rem; flex:1; outline:none; background:transparent; }
.search-form button { background:var(--red); color:#fff; padding:0 1.1rem; display:grid; place-items:center; }
.search-form button svg { width:18px; height:18px; }
.cat-pills { display:flex; gap:.6rem; flex-wrap:wrap; }
.cat-pills a { font-size:.85rem; font-weight:500; padding:.45rem 1rem; border-radius:40px; border:1px solid var(--line); color:#3a3f47; transition:.2s; }
.cat-pills a:hover, .cat-pills a.active { background:var(--ink); color:#fff; border-color:var(--ink); }

.featured-article { display:grid; grid-template-columns: 1.15fr 1fr; gap:0; border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden; margin-bottom:3rem; background:#fff; }
.featured-article .fa-media { position:relative; min-height: 320px; overflow:hidden; }
.featured-article .fa-media img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.featured-article .fa-body { padding: clamp(1.6rem,3vw,2.8rem); display:flex; flex-direction:column; justify-content:center; }
.badge { display:inline-block; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; background:var(--red); color:#fff; padding:.3rem .7rem; border-radius:4px; margin-bottom:1rem; align-self:flex-start; }
.badge--soft { background:var(--red-soft); color:var(--red); }
.article-meta { display:flex; gap:1.2rem; font-size:.82rem; color:var(--grey); margin:.8rem 0 0; font-family:var(--font-mono); letter-spacing:.03em; }
.article-meta span { display:inline-flex; gap:.4rem; align-items:center; }
.article-meta svg { width:15px; height:15px; color:var(--red); }

.article-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:1.8rem; }
.post {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden;
  display:flex; flex-direction:column; transition: transform .35s var(--ease), box-shadow .35s;
}
.post:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.post__media { aspect-ratio: 16/10; overflow:hidden; background: var(--bg-soft); }
.post__media img { width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.post:hover .post__media img { transform: scale(1.06); }
.post__body { padding:1.5rem; display:flex; flex-direction:column; flex:1; }
.post__body h3 { font-size:1.28rem; margin:.6rem 0 .5rem; }
.post__body p { font-size:.95rem; color:#4a5058; flex:1; }
.post__foot { margin-top:1.1rem; display:flex; justify-content:space-between; align-items:center; }
.read-more { font-family:var(--font-display); font-weight:600; color:var(--red); display:inline-flex; gap:.4rem; align-items:center; }
.read-more svg { width:16px; height:16px; transition: transform .25s; }
.read-more:hover svg { transform: translateX(4px); }

/* Pagination */
.pagination { display:flex; gap:.5rem; justify-content:center; margin-top:3rem; }
.pagination a, .pagination span {
  min-width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line);
  border-radius:8px; font-family:var(--font-display); font-weight:600; color:#3a3f47; transition:.2s; padding:0 .6rem;
}
.pagination a:hover { border-color:var(--ink); }
.pagination .current { background:var(--red); color:#fff; border-color:var(--red); }
.pagination .disabled { opacity:.4; pointer-events:none; }

/* Single article */
.article-single { display:grid; grid-template-columns: 1fr 320px; gap: 3rem; align-items:start; }
.article-hero-img { border-radius: var(--radius-lg); overflow:hidden; aspect-ratio: 16/8; margin-bottom:2rem; box-shadow: var(--shadow); }
.article-hero-img img { width:100%; height:100%; object-fit:cover; }
.prose { max-width: 72ch; }
.prose p { margin-bottom:1.3rem; font-size:1.08rem; color:#33383f; }
.prose h2 { margin: 2.2rem 0 1rem; }
.prose h3 { margin: 1.8rem 0 .8rem; }
.prose ul { margin: 0 0 1.3rem 1.2rem; list-style: disc; }
.prose ul li { margin-bottom:.5rem; }
.prose blockquote { border-left:4px solid var(--red); padding:.4rem 0 .4rem 1.4rem; margin:1.6rem 0; font-style:italic; color:#2c3138; font-size:1.15rem; }
.prose img { border-radius:8px; margin:1.5rem 0; }
.sidebar { position: sticky; top: 100px; display:grid; gap:1.6rem; }
.widget { border:1px solid var(--line); border-radius: var(--radius-lg); padding:1.5rem; background:#fff; }
.widget h4 { font-size:1.1rem; margin-bottom:1rem; padding-bottom:.7rem; border-bottom:2px solid var(--red); }
.mini-post { display:flex; gap:.9rem; padding:.7rem 0; border-bottom:1px solid var(--line); }
.mini-post:last-child { border-bottom:none; }
.mini-post img { width:64px; height:64px; border-radius:8px; object-fit:cover; flex:none; }
.mini-post b { font-family:var(--font-display); font-size:.95rem; line-height:1.25; display:block; }
.mini-post span { font-size:.75rem; color:var(--grey); font-family:var(--font-mono); }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-grid { display:grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; align-items:start; }
.info-cards { display:grid; gap:1.2rem; }
.info-card { display:flex; gap:1.1rem; padding:1.4rem; border:1px solid var(--line); border-radius: var(--radius-lg); background:#fff; }
.info-card__ic { width:48px; height:48px; border-radius:12px; background:var(--ink-navy); color:#fff; display:grid; place-items:center; flex:none; }
.info-card__ic svg { width:24px; height:24px; }
.info-card h4 { font-size:1.05rem; margin-bottom:.25rem; }
.info-card p, .info-card a { font-size:.95rem; color:#4a5058; }
.info-card a:hover { color:var(--red); }

.form-card { border:1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.6rem,3vw,2.6rem); background:#fff; box-shadow: var(--shadow-sm); }
.form-grid { display:grid; grid-template-columns: 1fr 1fr; gap:1.1rem; }
.field { display:flex; flex-direction:column; gap:.35rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-size:.82rem; font-weight:600; font-family:var(--font-display); letter-spacing:.02em; }
.field label .req { color:var(--red); }
.field input, .field select, .field textarea {
  border:1px solid var(--line); border-radius:8px; padding:.8rem .9rem; background:#fbfbfc; transition:.2s; color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--red); background:#fff; box-shadow:0 0 0 3px rgba(211,47,47,.12); }
.field textarea { resize: vertical; min-height:130px; }
.form-actions { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; margin-top:1.4rem; }

.whatsapp-btn { background:#25D366; color:#fff; }
.whatsapp-btn:hover { background:#1eb457; transform:translateY(-2px); }

.alert { padding:1rem 1.2rem; border-radius:8px; margin-bottom:1.4rem; font-weight:500; display:flex; gap:.6rem; align-items:flex-start; }
.alert svg { width:20px; height:20px; flex:none; margin-top:2px; }
.alert--ok { background:#E8F5E9; color:#1B5E20; border:1px solid #C8E6C9; }
.alert--err { background:var(--red-soft); color:var(--red-dark); border:1px solid #f3c9c9; }

.map-embed { border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--line); margin-top:2.5rem; }
.map-embed iframe { width:100%; height:420px; border:0; display:block; filter: grayscale(.2); }

/* hours table */
.hours { width:100%; border-collapse:collapse; }
.hours td { padding:.55rem 0; border-bottom:1px solid var(--line); font-size:.95rem; }
.hours td:last-child { text-align:right; font-family:var(--font-mono); color:var(--ink); font-weight:600; }
.hours tr:last-child td { border-bottom:none; }
.hours .closed { color:var(--red); }

/* ==========================================================================
   VALUES / TIMELINE (about)
   ========================================================================== */
.values { display:grid; grid-template-columns: repeat(4,1fr); gap:1.4rem; }
.value { padding:1.8rem 1.5rem; border:1px solid var(--line); border-radius: var(--radius-lg); background:#fff; }
.value .num { font-family:var(--font-mono); color:var(--red); font-weight:700; font-size:.85rem; letter-spacing:.1em; }
.value h3 { font-size:1.25rem; margin:.6rem 0 .5rem; }
.value p { font-size:.93rem; }

.timeline { position: relative; max-width: 820px; margin: 0 auto; padding-left: 2.2rem; }
.timeline::before { content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:var(--line); }
.tl-item { position: relative; padding-bottom: 2.4rem; }
.tl-item:last-child { padding-bottom:0; }
.tl-item::before { content:""; position:absolute; left:-2.2rem; top:4px; width:16px; height:16px; border-radius:50%; background:var(--red); border:3px solid #fff; box-shadow:0 0 0 2px var(--red); }
.tl-item .yr { font-family:var(--font-mono); font-weight:700; color:var(--red); letter-spacing:.05em; }
.tl-item h3 { font-size:1.2rem; margin:.3rem 0; }
.tl-item p { font-size:.97rem; }

/* mission / vision */
.mv { display:grid; grid-template-columns: 1fr 1fr; gap:1.6rem; }
.mv-card { padding:2.2rem; border-radius: var(--radius-lg); background:var(--ink-navy); color:#fff; position:relative; overflow:hidden; }
.mv-card:nth-child(2) { background:var(--red); }
.mv-card .mv-ic { width:52px; height:52px; border-radius:12px; background:rgba(255,255,255,.12); display:grid; place-items:center; margin-bottom:1.2rem; }
.mv-card .mv-ic svg { width:28px; height:28px; color:#fff; }
.mv-card h3 { color:#fff; font-size:1.5rem; margin-bottom:.7rem; }
.mv-card p { color:rgba(255,255,255,.88); }

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gallery-grid { columns: 3; column-gap: 1.2rem; }
.gallery-grid figure { break-inside: avoid; margin-bottom:1.2rem; border-radius: var(--radius-lg); overflow:hidden; position:relative; cursor:pointer; }
.gallery-grid img { width:100%; height:auto; display:block; transition: transform .5s var(--ease); }
.gallery-grid figure:hover img { transform: scale(1.05); }
.gallery-grid figcaption { position:absolute; inset:auto 0 0 0; padding:1rem; background:linear-gradient(transparent, rgba(17,17,17,.85)); color:#fff; font-family:var(--font-display); font-weight:600; opacity:0; transition:.3s; }
.gallery-grid figure:hover figcaption { opacity:1; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--ink); color:#aeb5c1; padding: clamp(3rem,6vw,4.5rem) 0 0; }
.footer-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap:2.5rem; padding-bottom:3rem; }
.footer-logo { background:#fff; border-radius:10px; padding:.8rem 1rem; display:inline-block; margin-bottom:1.3rem; }
.footer-logo img { height:40px; }
.site-footer p { color:#98a0ad; font-size:.95rem; }
.footer-col h4 { color:#fff; font-family:var(--font-display); font-size:1.05rem; margin-bottom:1.2rem; letter-spacing:.02em; }
.footer-col ul li { margin-bottom:.7rem; }
.footer-col ul a { color:#aeb5c1; font-size:.95rem; transition:.2s; display:inline-flex; align-items:center; gap:.5rem; }
.footer-col ul a:hover { color:#fff; padding-left:4px; }
.footer-contact li { display:flex; gap:.7rem; margin-bottom:.9rem; font-size:.95rem; }
.footer-contact svg { width:18px; height:18px; color:var(--red); flex:none; margin-top:3px; }
.footer-social { display:flex; gap:.7rem; margin-top:1.3rem; }
.footer-social a { width:40px; height:40px; border-radius:8px; background:rgba(255,255,255,.07); display:grid; place-items:center; transition:.2s; }
.footer-social a:hover { background:var(--red); }
.footer-social svg { width:18px; height:18px; color:#fff; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding:1.5rem 0; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.85rem; color:#7f8894; }
.footer-bottom a:hover { color:#fff; }

/* Floating WhatsApp */
.wa-float { position:fixed; right:20px; bottom:22px; z-index:80; width:58px; height:58px; border-radius:50%; background:#25D366; display:grid; place-items:center; box-shadow:0 12px 30px rgba(37,211,102,.4); transition: transform .3s; }
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width:30px; height:30px; color:#fff; }

/* ==========================================================================
   REVEAL ANIMATION
   ========================================================================== */
.reveal { opacity:0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity:1; transform:none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .readout { max-width: 460px; }
  .cards, .features, .quotes, .article-grid { grid-template-columns: repeat(2,1fr); }
  .values { grid-template-columns: repeat(2,1fr); }
  .stats__grid { grid-template-columns: repeat(2,1fr); }
  .article-single { grid-template-columns: 1fr; }
  .sidebar { position: static; grid-template-columns: repeat(2,1fr); }
  .gallery-grid { columns: 2; }
}
@media (max-width: 860px) {
  .topbar__meta span.hide-sm { display:none; }
  .nav__links {
    position: fixed; inset: 78px 0 auto 0; background:#fff; flex-direction:column; align-items:stretch;
    gap:0; padding: 1rem 1.5rem 1.5rem; border-bottom:1px solid var(--line); box-shadow: var(--shadow);
    transform: translateY(-120%); transition: transform .35s var(--ease); z-index:55;
  }
  .nav__links.open { transform: none; }
  .nav__links a { padding:.9rem 0; border-bottom:1px solid var(--line); }
  .nav__links a::after { display:none; }
  .nav__toggle { display:flex; }
  .nav__cta .btn { display:none; }
  .split, .split--reverse .split__media, .contact-grid, .featured-article, .mv, .industries { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .featured-article .fa-media { min-height: 260px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .cards, .features, .quotes, .article-grid, .values, .stats__grid, .sidebar { grid-template-columns: 1fr; }
  .gallery-grid { columns: 1; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-band__inner { flex-direction: column; align-items: flex-start; }
  .topbar__meta { gap: 1rem; }
  .topbar__tag { display:none; }
}

/* Accessibility */
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity:1; transform:none; }
}

/* ==========================================================================
   v2 REFINEMENTS — tighter scale, capped media, modern JS UI
   (appended last so these rules take precedence)
   ========================================================================== */

/* ---- Prevent grid/flex blowout (children must be allowed to shrink) ---- */
.hero__grid > *, .split > *, .contact-grid > *, .featured-article > *,
.mv > *, .industries > *, .article-single > * { min-width: 0; }
.readout__metrics .metric { min-width: 0; }
.readout, .readout * { max-width: 100%; }
/* Long unbreakable strings (emails/URLs) must wrap, not overflow */
.info-card { min-width: 0; }
.info-card > div { min-width: 0; }
.form-grid > *, .field { min-width: 0; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; max-width: 100%; }
.info-card p, .info-card a, .footer-contact li, .footer-col ul a,
.mini-post b, .prose a { overflow-wrap: anywhere; word-break: break-word; }

/* ---- Global rhythm: tighten vertical scale ---- */
.section        { padding: clamp(2.8rem, 5vw, 4.6rem) 0; }
.section-head   { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.split + .split { margin-top: clamp(2.4rem, 4.5vw, 4rem); }

/* ---- Cap ALL feature imagery so nothing dominates the layout ---- */
.split__media .frame {
  aspect-ratio: 3 / 2;
  width: 100%;
  margin-inline: auto;
}
.readout__img        { aspect-ratio: 16 / 9; }
.card__media         { aspect-ratio: 3 / 2; }
.post__media         { aspect-ratio: 3 / 2; }
.article-hero-img    { aspect-ratio: 21 / 9; }
.featured-article .fa-media { min-height: 300px; max-height: 420px; }
.mv-card             { padding: 1.9rem; }

/* Card body a touch tighter */
.card__body   { padding: 1.9rem 1.4rem 1.4rem; }
.feature      { padding: 1.7rem 1.5rem; }
.value        { padding: 1.6rem 1.35rem; }

/* Readout gauge slightly smaller for balance */
.readout      { padding: 1.4rem; }
.readout__img { margin-bottom: 1rem; }

/* ---- Modern image loading: blur-up + fade-in ---- */
img.io-img {
  opacity: 0;
  filter: blur(12px);
  transform: scale(1.02);
  transition: opacity .7s var(--ease), filter .8s var(--ease), transform .8s var(--ease);
}
img.io-img.io-loaded {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

/* ==========================================================================
   PRELOADER — full-screen with live load percentage
   ========================================================================== */
.preloader {
  position: fixed; inset: 0; z-index: 9999;
  background:
    radial-gradient(900px 480px at 78% -10%, rgba(211,47,47,.20), transparent 60%),
    linear-gradient(180deg, var(--ink-navy) 0%, #101a2e 100%);
  display: grid; place-items: center;
  transition: opacity .35s var(--ease), visibility .35s var(--ease);
}
.preloader.done { opacity: 0; visibility: hidden; }
html.loading { overflow: hidden; }
.pl-inner { width: min(88%, 340px); text-align: center; color: #fff; }
.pl-logo {
  background: #fff; border-radius: 12px; padding: .8rem 1.1rem;
  display: inline-block; margin-bottom: 1.8rem; box-shadow: var(--shadow-lg);
}
.pl-logo img { height: 42px; }
.pl-pct {
  font-family: var(--font-mono); font-weight: 700;
  font-size: clamp(2.6rem, 9vw, 3.4rem); line-height: 1; color: #fff;
  letter-spacing: -.02em;
}
.pl-pct .pl-num { color: #fff; }
.pl-pct span:last-child { color: var(--red); font-size: .5em; vertical-align: super; margin-left: 2px; }
.pl-label {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .22em;
  text-transform: uppercase; color: #9aa6bb; margin-top: .7rem;
}
.pl-track {
  margin-top: 1.4rem; height: 3px; border-radius: 3px;
  background: rgba(255,255,255,.14); overflow: hidden;
}
.pl-bar {
  height: 100%; width: 0%; border-radius: 3px;
  background: linear-gradient(90deg, var(--red), #ff6b5f);
  transition: width .25s var(--ease);
}

/* ==========================================================================
   SCROLL PROGRESS BAR
   ========================================================================== */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--red), #ff6b5f);
  z-index: 90; transition: width .1s linear;
  box-shadow: 0 0 10px rgba(211,47,47,.5);
}

/* ==========================================================================
   TIGHTER, CLEANER RESPONSIVE (all devices)
   ========================================================================== */
@media (max-width: 1024px) {
  .article-hero-img    { aspect-ratio: 2 / 1; }
}
@media (max-width: 860px) {
  .hero__grid   { gap: 2rem; }
  .readout      { max-width: 440px; margin-inline: auto; }
  .split        { gap: 1.8rem; }
  .split__media .frame { aspect-ratio: 16 / 9; }
  .featured-article .fa-media { min-height: 220px; max-height: 300px; }
  .section-head { max-width: none; }
}
@media (max-width: 560px) {
  .section      { padding: 2.4rem 0; }
  .wrap         { width: min(100% - 2rem, var(--wrap)); }
  /* Flatter ratios keep mobile pages compact (width-driven = no overflow) */
  .split__media .frame,
  .readout__img,
  .article-hero-img { aspect-ratio: 16 / 9; }
  .card__media, .post__media { aspect-ratio: 16 / 10; }
  .featured-article .fa-media { min-height: 200px; max-height: 260px; }
  h1 { font-size: clamp(2rem, 9vw, 2.5rem); }
  h2 { font-size: clamp(1.6rem, 6.5vw, 2.1rem); }
  .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }
  .hero__actions .btn, .cta-band__actions .btn, .form-actions .btn { width: auto; }
  .hero__actions, .cta-band__actions { width: 100%; }
  .hero__actions .btn { flex: 1 1 auto; }
  .readout      { max-width: none; }
  .stat         { padding: 1.8rem 1rem; }
  .pl-pct       { font-size: clamp(2.4rem, 14vw, 3rem); }
}
@media (max-width: 380px) {
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }
}

/* ==========================================================================
   v2 FOOTER — tidy, balanced, compact on every device
   ========================================================================== */
.site-footer  { padding-top: clamp(2.6rem, 5vw, 4rem); }
.footer-grid  {
  grid-template-columns: 1.7fr 1fr 1fr 1.4fr;
  gap: 2rem 2.4rem;
  padding-bottom: 2.4rem;
}
.footer-logo img { height: 34px; }
.footer-col--brand p { max-width: 34ch; line-height: 1.6; margin-bottom: .2rem; }
.footer-col ul li { margin-bottom: .55rem; }
.footer-col ul a  { font-size: .92rem; }
.footer-col ul a svg { width: 13px; height: 13px; color: var(--red); opacity: .85; flex: none; }
.footer-contact li { margin-bottom: .8rem; align-items: flex-start; }
.footer-contact li span, .footer-contact li a { line-height: 1.5; }

/* ---- Tablet: brand spans the top, links sit in a neat row ---- */
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem 1.6rem;
  }
  .footer-col--brand { grid-column: 1 / -1; }
  .footer-col--brand .footer-social { margin-top: 1rem; }
}

/* ---- Mobile: brand centered on top, links in two tidy columns ---- */
@media (max-width: 560px) {
  .site-footer { text-align: left; }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 1.4rem;
    padding-bottom: 2rem;
  }
  .footer-col--brand {
    grid-column: 1 / -1;
    text-align: center;
    padding-bottom: .4rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: .4rem;
  }
  .footer-col--brand p { max-width: 40ch; margin-inline: auto; }
  .footer-col--brand .footer-social { justify-content: center; }
  .footer-col--contact { grid-column: 1 / -1; }
  .footer-col h4 { margin-bottom: .9rem; font-size: 1rem; }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: .45rem;
    padding: 1.2rem 0;
  }
}

/* Very small phones: single clean column */
@media (max-width: 380px) {
  .footer-grid { grid-template-columns: 1fr; text-align: center; }
  .footer-col ul a { justify-content: center; }
  .footer-contact li { justify-content: center; }
  .footer-col--contact { text-align: center; }
}