/* ============================================================
   Observatorio de Chancay — Universidad del Pacífico
   Visual system extracted from Home + Publicaciones references
   ============================================================ */

:root{
  /* Brand palette */
  --navy:        #0F1F40;   /* primary dark — interior blocks */
  --navy-deep:   #0A1730;   /* footer / hero overlays */
  --navy-ink:    #16233D;   /* headlines */
  --blue:        #1356EE;   /* electric accent — links, active states */
  --blue-bright: #0062FF;   /* stats band */
  --blue-strip:  #1265F5;   /* vertical divider strip */
  --gold:        #C97E26;   /* category labels / CTAs */
  --gold-tag:    #D38020;   /* featured pill */
  --gold-deep:   #A9651A;

  /* Neutrals */
  --ink:    #1B2435;
  --text:   #3C4658;
  --muted:  #717B90;
  --faint:  #9AA2B1;
  --line:   #E5E8EE;
  --line-2: #EEF0F4;
  --bg:     #FFFFFF;
  --bg-alt: #F6F7F9;

  /* Data tints */
  --tint-blue: #E8F0FE;
  --tint-gold: #F7EBD7;

  /* Type */
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Source Sans 3", system-ui, -apple-system, sans-serif;

  /* Layout */
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 56px);
  --radius: 3px;

  --shadow-card: 0 1px 2px rgba(16,30,64,.04), 0 6px 22px rgba(16,30,64,.06);
  --shadow-pop:  0 8px 30px rgba(16,30,64,.13);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background:var(--bg);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--blue); color:#fff; }

h1,h2,h3,h4{ font-family:var(--serif); color:var(--navy-ink); margin:0; line-height:1.08; font-weight:700; letter-spacing:-0.01em; }
p{ margin:0; }

/* ---------- Reusable atoms ---------- */
.container{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.eyebrow{
  font-family:var(--sans); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; font-size:12px; color:var(--gold);
}
.eyebrow.blue{ color:var(--blue); }
.eyebrow.muted{ color:var(--muted); }

.section-pad{ padding-block:clamp(48px,7vw,84px); }
.divider-rule{ height:1px; background:var(--line); border:0; margin:0; }

/* Links / CTA */
.cta{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--sans); font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; font-size:12.5px; color:var(--gold);
  transition:gap .18s ease, color .18s ease;
}
.cta:hover{ gap:.85em; color:var(--gold-deep); }
.cta.blue{ color:var(--blue); }
.cta.blue:hover{ color:#0B43C4; }
.cta .arr{ font-weight:400; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--sans); font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; font-size:12.5px;
  padding:14px 22px; border:1px solid transparent; border-radius:var(--radius);
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn-primary{ background:var(--navy); color:#fff; }
.btn-primary:hover{ background:#16315e; }
.btn-outline{ background:#fff; color:var(--navy); border-color:var(--line); }
.btn-outline:hover{ border-color:var(--navy); }
.btn-blue{ background:var(--blue); color:#fff; }
.btn-blue:hover{ background:#0B43C4; }

/* Pills / tags */
.pill{
  display:inline-flex; align-items:center;
  font-family:var(--sans); font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; font-size:11px; line-height:1;
  padding:8px 13px; background:#fff; color:var(--navy-ink);
  border:1px solid var(--line-2); border-radius:2px;
}
.cat-label{
  font-family:var(--sans); font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; font-size:11.5px; color:var(--gold);
}

/* ---------- Cards ---------- */
.card{
  background:#fff; border:1px solid var(--line);
  display:flex; flex-direction:column;
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
a.card:hover, .card.clickable:hover{
  box-shadow:var(--shadow-card); transform:translateY(-3px); border-color:var(--line-2);
}
.card-media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--bg-alt); }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
a.card:hover .card-media img{ transform:scale(1.04); }
.card-media .pill{ position:absolute; top:14px; left:14px; }
.card-body{ padding:20px 22px 24px; display:flex; flex-direction:column; gap:11px; flex:1; }
.card-title{ font-size:21px; line-height:1.16; }
.card-sum{ font-size:14.5px; color:var(--text); line-height:1.5; }
.card-foot{ margin-top:auto; padding-top:14px; border-top:1px solid var(--line); }
.card-author{ font-family:var(--sans); font-size:13px; font-weight:600; color:var(--blue); }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,30px); }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(22px,2.8vw,34px); }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50; background:#fff;
  border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; gap:30px; height:80px; }
.brand{ display:flex; align-items:center; gap:14px; }
.brand .shield{ width:46px; height:46px; flex:none; }
.brand .wordmark{ font-family:var(--serif); font-weight:700; color:var(--navy-ink);
  line-height:.98; font-size:17px; letter-spacing:.01em; text-transform:uppercase; }
.brand .wordmark small{ display:block; font-size:17px; }
.main-nav{ display:flex; align-items:center; gap:30px; margin-left:auto; }
.nav-link{
  font-family:var(--serif); font-weight:700; font-size:18px; color:var(--navy-ink);
  padding:6px 0; position:relative; white-space:nowrap;
}
.nav-link::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2.5px;
  background:var(--blue); transition:right .22s ease;
}
.nav-link:hover::after{ right:0; }
.nav-link.active{ }
.nav-link.active::after{ right:0; }
.header-tools{ display:flex; align-items:center; gap:18px; padding-left:4px; }
.icon-btn{ background:none; border:0; padding:6px; color:var(--navy-ink); display:grid; place-items:center; }
.icon-btn:hover{ color:var(--blue); }
.lang-toggle{ display:flex; border:1.5px solid var(--navy); border-radius:2px; overflow:hidden; }
.lang-toggle a{
  font-family:var(--sans); font-weight:700; font-size:12.5px; letter-spacing:.04em;
  padding:7px 11px; border:0; background:#fff; color:var(--navy); display:inline-block;
}
.lang-toggle a.on{ background:var(--navy); color:#fff; }

/* search overlay */
.search-bar{ overflow:hidden; max-height:0; transition:max-height .28s ease; border-bottom:1px solid var(--line); background:#fff; }
.search-bar.open{ max-height:90px; }
.search-bar .container{ display:flex; align-items:center; gap:14px; padding-block:20px; }
.search-bar input{
  flex:1; border:0; outline:0; font-family:var(--serif); font-size:24px; color:var(--navy-ink);
  background:transparent;
}
.search-bar input::placeholder{ color:var(--faint); }

/* ---------- Hero (home) ---------- */
.hero{ position:relative; min-height:clamp(440px,56vw,620px); display:flex; align-items:center; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 60%; }
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(10,23,48,.92) 0%, rgba(10,23,48,.74) 36%, rgba(10,23,48,.32) 70%, rgba(10,23,48,.18) 100%);
}
.hero-inner{ position:relative; z-index:2; color:#fff; padding-block:40px; width:100%; }
.hero h1{ color:#fff; font-size:clamp(44px,6.4vw,86px); line-height:1.0; letter-spacing:-0.02em; max-width:13ch; }
.hero .sub{ font-family:var(--sans); font-size:clamp(17px,1.6vw,21px); margin-top:18px; color:rgba(255,255,255,.9); letter-spacing:.01em; }
.hero-arrows{ position:absolute; z-index:3; inset:0; pointer-events:none; }
.hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%; border:1.5px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.04); color:#fff; display:grid; place-items:center; pointer-events:auto;
  transition:background .18s ease, border-color .18s ease;
}
.hero-arrow:hover{ background:rgba(255,255,255,.16); border-color:#fff; }
.hero-arrow.left{ left:var(--gutter); }
.hero-arrow.right{ right:var(--gutter); }

/* ---------- Stats band ---------- */
.stats-band{ background:var(--blue-bright); color:#fff; }
.stats-band .container{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding-block:34px; }
.stat .num{ font-family:var(--serif); font-weight:700; font-size:clamp(34px,3.4vw,46px); line-height:1; color:#fff; }
.stat .cap{ font-family:var(--sans); font-size:13.5px; margin-top:10px; color:rgba(255,255,255,.88); line-height:1.35; max-width:22ch; }

/* ---------- Section heads ---------- */
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:34px; }
.section-head h2{ font-size:clamp(30px,3.6vw,42px); line-height:1.04; }
.section-center{ text-align:center; margin-bottom:40px; }
.section-center h2{ font-size:clamp(30px,3.6vw,44px); letter-spacing:.01em; }
.section-center.blue h2{ color:var(--blue); }

/* ---------- Featured publication ---------- */
.featured{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(28px,4vw,56px); align-items:center; }
.featured-media{ aspect-ratio:4/3; overflow:hidden; background:var(--bg-alt); }
.featured-media img{ width:100%; height:100%; object-fit:cover; }
.featured-body{ display:flex; flex-direction:column; gap:16px; }
.featured-body .tag-row{ display:flex; gap:10px; align-items:center; }
.featured-body h3{ font-size:clamp(28px,3.4vw,42px); line-height:1.08; }
.featured-body p{ font-size:16px; color:var(--text); max-width:46ch; }

/* ---------- Data cards ---------- */
.data-card{ background:#fff; border:1px solid var(--line); padding:30px 32px 26px; display:flex; flex-direction:column; gap:16px; }
.data-card h3{ font-size:23px; line-height:1.14; }
.data-card .desc{ font-size:14.5px; color:var(--text); }
.stat-block{ display:flex; align-items:stretch; gap:18px; padding:20px 22px; }
.stat-block.blue{ background:var(--tint-blue); border-left:5px solid var(--navy); }
.stat-block.gold{ background:var(--tint-gold); border-left:5px solid var(--gold); }
.stat-block .big{ font-family:var(--serif); font-weight:700; font-size:42px; line-height:1; color:var(--navy-ink); }
.stat-block .lab{ font-family:var(--sans); font-weight:600; font-size:14px; color:var(--blue); align-self:center; }
.stat-block.gold .lab{ color:var(--gold-deep); }
.meta-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding-top:16px; border-top:1px solid var(--line); }
.meta-item .k{ font-family:var(--sans); font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:10.5px; color:var(--gold); }
.meta-item .v{ font-family:var(--sans); font-size:14px; color:var(--navy-ink); font-weight:600; margin-top:3px; }
.data-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:4px; }

/* ---------- Interior split header ---------- */
.split-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); min-height:clamp(280px,32vw,400px); }
.split-head .pane-text{ background:var(--navy); color:#fff; padding:clamp(40px,5vw,72px) clamp(36px,5vw,64px); display:flex; flex-direction:column; justify-content:center; gap:18px; position:relative; }
.split-head .pane-text::after{ content:""; position:absolute; right:0; top:0; bottom:0; width:7px; background:var(--blue-strip); }
.split-head h1{ color:#fff; font-size:clamp(34px,4.4vw,54px); line-height:1.05; }
.split-head .pane-text p{ font-family:var(--sans); font-size:16px; color:rgba(255,255,255,.85); max-width:44ch; }
.split-head .pane-img{ overflow:hidden; background:var(--navy-deep); }
.split-head .pane-img img{ width:100%; height:100%; object-fit:cover; }

/* ---------- Filters bar ---------- */
.filters{ display:flex; align-items:center; gap:8px 26px; flex-wrap:wrap; padding-block:22px; border-bottom:1px solid var(--line); }
.filter-tab{
  font-family:var(--sans); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  font-size:12.5px; color:var(--muted); background:none; border:0; padding:6px 0; position:relative;
}
.filter-tab:hover{ color:var(--navy-ink); }
.filter-tab.active{ color:var(--blue); }
.filter-tab.active::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2.5px; background:var(--blue); }
.filter-search{ margin-left:auto; display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:30px; padding:11px 20px; min-width:280px; }
.filter-search input{ border:0; outline:0; flex:1; font-family:var(--sans); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--navy-ink); background:transparent; }
.filter-search input::placeholder{ color:var(--faint); letter-spacing:.08em; }

/* count + empty */
.result-meta{ font-family:var(--sans); font-size:13.5px; color:var(--muted); padding-block:24px 4px; }
.empty-state{ text-align:center; padding:80px 0; color:var(--muted); }
.empty-state h3{ color:var(--navy-ink); margin-bottom:10px; }

/* ---------- Article (detalle) ---------- */
.article-head{ max-width:820px; margin:0 auto; text-align:left; }
.article-head .kicker{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:22px; }
.article-head h1{ font-size:clamp(34px,4.6vw,56px); line-height:1.06; margin-bottom:20px; }
.article-head .lede{ font-family:var(--serif); font-size:clamp(19px,2vw,23px); line-height:1.5; color:var(--text); }
.byline{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin-top:26px; padding-top:22px; border-top:1px solid var(--line); font-family:var(--sans); font-size:14px; color:var(--muted); }
.byline strong{ color:var(--navy-ink); font-weight:600; }
.byline .dot{ color:var(--line); }
.article-hero{ margin:clamp(34px,5vw,56px) 0; }
.article-hero img{ width:100%; height:clamp(280px,42vw,540px); object-fit:cover; }
.article-hero figcaption{ font-family:var(--sans); font-size:13px; color:var(--muted); margin-top:12px; }
.prose{ max-width:720px; margin:0 auto; }
.prose p{ font-family:var(--serif); font-size:19px; line-height:1.72; color:#2A3242; margin-bottom:26px; }
.prose h2{ font-size:30px; margin:44px 0 18px; }
.prose h3{ font-size:23px; margin:36px 0 14px; }
.prose ul{ margin:0 0 26px; padding-left:22px; }
.prose li{ font-family:var(--serif); font-size:19px; line-height:1.7; margin-bottom:10px; }
.pullquote{ border-left:4px solid var(--blue); padding:6px 0 6px 28px; margin:38px 0; }
.pullquote p{ font-family:var(--serif); font-style:italic; font-size:clamp(22px,2.6vw,28px); line-height:1.4; color:var(--navy-ink); }
.pullquote cite{ display:block; font-family:var(--sans); font-style:normal; font-size:14px; font-weight:600; color:var(--muted); margin-top:14px; }
.download-box{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:space-between; border:1px solid var(--line); background:var(--bg-alt); padding:24px 28px; margin:40px auto; max-width:720px; }
.download-box .di{ display:flex; gap:16px; align-items:center; }
.download-box .di .ic{ width:44px; height:44px; background:var(--navy); color:#fff; display:grid; place-items:center; flex:none; border-radius:3px; }
.download-box .ti{ font-family:var(--serif); font-weight:700; font-size:17px; color:var(--navy-ink); }
.download-box .me{ font-family:var(--sans); font-size:13px; color:var(--muted); }

/* ---------- Indicator detail ---------- */
.kpi-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.kpi{ background:#fff; padding:22px 24px; }
.kpi .k{ font-family:var(--sans); font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:10.5px; color:var(--gold); }
.kpi .v{ font-family:var(--serif); font-weight:700; font-size:26px; color:var(--navy-ink); margin-top:6px; line-height:1; }
.kpi .v small{ font-family:var(--sans); font-size:13px; font-weight:600; color:var(--muted); }
.chart-card{ border:1px solid var(--line); background:#fff; }
.chart-toolbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 22px; border-bottom:1px solid var(--line); }
.seg{ display:flex; border:1px solid var(--line); border-radius:3px; overflow:hidden; }
.seg button{ border:0; background:#fff; font-family:var(--sans); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; padding:9px 15px; color:var(--muted); }
.seg button.on{ background:var(--navy); color:#fff; }
.chart-area{ padding:26px 22px; }
.data-table{ width:100%; border-collapse:collapse; font-family:var(--sans); font-size:14px; }
.data-table th{ text-align:left; font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:11px; color:var(--muted); padding:12px 14px; border-bottom:2px solid var(--line); }
.data-table td{ padding:12px 14px; border-bottom:1px solid var(--line-2); color:var(--navy-ink); }
.data-table td.num, .data-table th.num{ text-align:right; font-variant-numeric:tabular-nums; }
.data-table tbody tr:hover{ background:var(--bg-alt); }
.metabox{ border:1px solid var(--line); background:var(--bg-alt); padding:24px 26px; }
.metabox dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:10px 22px; }
.metabox dt{ font-family:var(--sans); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:10.5px; color:var(--gold); align-self:center; }
.metabox dd{ margin:0; font-family:var(--sans); font-size:14px; color:var(--navy-ink); }

/* ---------- Quiénes somos ---------- */
.lead-text{ font-family:var(--serif); font-size:clamp(22px,2.6vw,30px); line-height:1.42; color:var(--navy-ink); max-width:24ch; }
.feature-line{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); align-items:center; }
.lines-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.line-cell{ background:#fff; padding:30px 30px 34px; }
.line-cell .no{ font-family:var(--serif); font-size:15px; font-weight:700; color:var(--blue); }
.line-cell h3{ font-size:22px; margin:12px 0 10px; }
.line-cell p{ font-size:14.5px; color:var(--text); }
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2vw,26px); }
.person .ph{ aspect-ratio:1/1; background:var(--navy); position:relative; overflow:hidden; }
.person .ph img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.2); }
.person .ph .mono{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--serif); font-size:46px; font-weight:700; color:rgba(255,255,255,.9); background:linear-gradient(135deg,#16315e,#0F1F40); }
.person h4{ font-size:18px; margin:14px 0 3px; }
.person .role{ font-family:var(--sans); font-size:13px; color:var(--blue); font-weight:600; }
.person .aff{ font-family:var(--sans); font-size:12.5px; color:var(--muted); margin-top:2px; }
.allies{ display:flex; flex-wrap:wrap; gap:14px; }
.ally{ border:1px solid var(--line); padding:18px 24px; font-family:var(--serif); font-weight:700; color:var(--navy-ink); font-size:16px; background:#fff; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--navy-deep); color:rgba(255,255,255,.78); }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1.1fr 1fr; gap:clamp(28px,4vw,56px); padding-block:clamp(48px,6vw,72px); }
.footer-brand .fb-title{ font-family:var(--serif); font-weight:700; color:#fff; font-size:22px; }
.footer-brand .fb-sub{ font-family:var(--sans); font-size:14px; color:rgba(255,255,255,.6); margin-top:4px; }
.footer-brand .fb-logo{ display:flex; align-items:center; gap:12px; margin:26px 0 22px; }
.footer-brand .fb-logo img{ width:38px; }
.footer-brand .fb-logo .wm{ font-family:var(--serif); font-weight:700; color:#fff; font-size:12.5px; line-height:1.05; text-transform:uppercase; letter-spacing:.02em; }
.footer-brand p.about{ font-family:var(--sans); font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.62); max-width:38ch; }
.footer-col h4{ font-family:var(--sans); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:12px; color:#5E8BE6; margin-bottom:20px; }
.footer-col .frow{ display:flex; gap:11px; align-items:flex-start; font-family:var(--sans); font-size:14px; color:rgba(255,255,255,.78); margin-bottom:15px; line-height:1.45; }
.footer-col .frow svg{ flex:none; margin-top:2px; color:#5E8BE6; }
.footer-col a.frow:hover{ color:#fff; }
.socials{ display:flex; gap:10px; }
.socials a{ width:38px; height:38px; background:var(--blue); border-radius:3px; display:grid; place-items:center; color:#fff; transition:background .18s ease; }
.socials a:hover{ background:#0B43C4; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding-block:22px; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-family:var(--sans); font-size:12.5px; color:rgba(255,255,255,.5); }
.footer-bottom a:hover{ color:#fff; }

/* ---------- Breadcrumb / back ---------- */
.crumb{ font-family:var(--sans); font-size:13px; color:var(--muted); padding-block:22px; display:flex; gap:8px; align-items:center; }
.crumb a:hover{ color:var(--blue); }
.crumb .sep{ color:var(--line); }

/* ---------- Related strip ---------- */
.related{ background:var(--bg-alt); border-top:1px solid var(--line); }

/* reveal-on-scroll — transform-only so a throttled/background tab (paused rAF,
   frozen transitions) can never strand content hidden; worst case it sits a few px low */
.reveal{ transform:translateY(14px); transition:transform .6s ease; }
.reveal.in{ transform:none; }

/* page enter — base state is fully visible; animation is a safe enhancement
   (transform-only so a throttled/paused tab never strands content hidden) */
#root{ opacity:1; animation:pageIn .42s ease both; }
@keyframes pageIn{ from{ transform:translateY(10px);} to{ transform:none;} }

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .team-grid{ grid-template-columns:repeat(2,1fr); }
  .kpi-row{ grid-template-columns:repeat(2,1fr); }
  .stats-band .container{ grid-template-columns:repeat(2,1fr); gap:28px 24px; }
  .featured{ grid-template-columns:1fr; }
  .split-head{ grid-template-columns:1fr; }
  .split-head .pane-img{ min-height:220px; order:-1; }
  .split-head .pane-text::after{ display:none; }
  .feature-line{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  .main-nav{ display:none; }
  .header-inner{ height:68px; }
  .grid-3,.grid-2,.lines-grid{ grid-template-columns:1fr; }
  .meta-row{ grid-template-columns:1fr 1fr; }
  .filter-search{ min-width:100%; margin-left:0; order:5; }
  .footer-grid{ grid-template-columns:1fr; }
  .stats-band .container{ grid-template-columns:1fr 1fr; }
}