/* ════════════════════════════════════════════════════════════════
   ICCOM HydroGuard — Vertical Overrides  v2.1.0
   Loaded after portal-shared.css.

   This file ONLY contains HydroGuard-specific overrides:
     • Brand token remapping (--blue → teal palette)
     • HydroGuard navbar (.hg-nav)
     • HydroGuard footer (.hg-footer)
     • Mobile hamburger
     • Minor local additions

   DO NOT duplicate design tokens or components defined in
   portal-shared.css — edit that file to change the base system.
   ════════════════════════════════════════════════════════════════ */

/* ── HydroGuard brand token overrides ─────────────────────────── */
/* Remaps --blue (portal primary) to HydroGuard teal so all shared
   components (buttons, kpi-cards, table headers, focus rings, …)
   automatically pick up the vertical's accent colour.            */
:root {
  --blue:            #0A6E8A;   /* HydroGuard teal (replaces portal blue) */
  --iccom-blue:      #0A6E8A;
  --iccom-blue-light:#E0F4F8;

  /* Retained as aliases for templates that reference them directly */
  --teal:            #0A6E8A;
  --teal-light:      #2BC4C3;
  --water:           #0A6E8A;
  --water-light:     #14A3A8;
}

/* ── HydroGuard Navbar ─────────────────────────────────────────────
   Sits directly below the fixed global header (<iccom-global-header>,
   80px tall on mobile / 100px from 1024px up — see portal-header.js).
   `top` below must track that same breakpoint or this bar either
   overlaps the global header or leaves a gap when it goes sticky. ─── */
.hg-nav {
  background: var(--white); border-bottom: 1px solid var(--border);
  padding: 0; position: sticky; top: 80px; z-index: 900;
  box-shadow: var(--shadow);
}
@media (min-width: 1024px) { .hg-nav { top: 100px; } }
.hg-nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 56px;
}
.hg-nav-brand {
  color: var(--navy); text-decoration: none; font-weight: 800;
  font-family: var(--font-display); font-size: 20px;
  display: flex; align-items: center; gap: 8px; letter-spacing: 0.3px;
}
.hg-nav-brand span { color: var(--blue); }
.hg-nav-links { display: flex; align-items: center; gap: 4px; list-style: none; }
.hg-nav-links a {
  color: var(--navy); text-decoration: none; font-size: 13.5px; font-weight: 700;
  padding: 6px 12px; border-radius: 6px; transition: all var(--transition);
}
.hg-nav-links a:hover,
.hg-nav-links a.active { color: var(--blue); background: var(--light); }
.hg-nav-cta {
  background: var(--navy); color: var(--white); padding: 8px 18px;
  border-radius: 6px; text-decoration: none; font-weight: 700;
  font-size: 13px; transition: all var(--transition); white-space: nowrap;
}
.hg-nav-cta:hover { background: var(--navy-light); transform: translateY(-1px); }

/* ── Hamburger ─────────────────────────────────────────────────── */
.hg-hamburger {
  display: none; background: none; border: none; cursor: pointer; padding: 4px;
  flex-direction: column; gap: 5px; width: 28px;
}
.hg-hamburger span {
  display: block; width: 100%; height: 2px;
  background: var(--navy); border-radius: 2px; transition: all var(--transition);
}
.hg-hamburger.open span:nth-child(1) { transform: rotate(45deg)  translate(5px, 5px);  }
.hg-hamburger.open span:nth-child(2) { opacity: 0; }
.hg-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ── HydroGuard Footer ─────────────────────────────────────────── */
.hg-footer { background: var(--navy); color: #8899AA; padding: 48px 0 32px; }
.hg-footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px;
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
}
.hg-footer-brand {
  font-size: 24px; font-weight: 800; color: var(--white);
  margin-bottom: 12px; letter-spacing: 0.5px;
}
.hg-footer-brand span   { color: var(--teal-light); }
.hg-footer p            { font-size: 13px; line-height: 1.7; }
.hg-footer h4 {
  color: var(--white); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px;
}
.hg-footer ul           { list-style: none; }
.hg-footer li           { padding: 3px 0; }
.hg-footer a            { color: #8899AA; text-decoration: none; font-size: 13px; transition: color var(--transition); }
.hg-footer a:hover      { color: var(--teal-light); }
.hg-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08); margin-top: 32px; padding-top: 24px;
  text-align: center; font-size: 12px;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 1024px) { .hg-footer-grid { grid-template-columns: 1fr 1fr; } }

@media (max-width: 768px) {
  .hg-hamburger   { display: flex; }
  .hg-nav-links {
    display: none; position: absolute; top: 56px; left: 0; right: 0;
    background: var(--white); flex-direction: column; padding: 16px 24px; gap: 4px;
    border-top: 1px solid var(--border); box-shadow: var(--shadow-lg);
  }
  .hg-nav-links.open { display: flex; }
  .hg-nav-links a    { padding: 10px 12px; font-size: 14px; }
  .hg-nav-cta        { margin-top: 8px; text-align: center; display: block; }
  .hg-footer-grid    { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   HydroGuard Design System v3 — shared across ALL public pages.
   Established with the 2026 index.html redesign; every public page
   (technology, case-studies, roi-calculator, faq, demo) uses these
   classes. Page files should carry little or no inline CSS.
   ════════════════════════════════════════════════════════════════ */

:root{ --ink:#16232E; --ice:#E0F4F8; --line:#D8E4EC; --paper:#F7FAFC; --hg-green:#128167; }

.kicker{ font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); text-align:center; margin-bottom:10px; }

/* ── Heroes ────────────────────────────────────────────────────── */
.hero { background:linear-gradient(135deg,#081F30 0%,var(--navy) 55%,#0E4E63 100%); color:white; padding:88px 0 0; position:relative; overflow:hidden; }
.hero-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; padding-bottom:88px; }
.hero-tag { display:inline-block; background:rgba(43,196,195,.14); border:1px solid rgba(43,196,195,.35); color:var(--teal-light); padding:6px 16px; border-radius:20px; font-size:13px; font-weight:700; margin-bottom:18px; }
.hero h1 { font-size:46px; font-weight:900; line-height:1.08; margin-bottom:18px; letter-spacing:-.015em; }
.hero h1 span { color:var(--teal-light); }
.hero p.lead { font-size:17.5px; color:#B9D2DE; margin-bottom:30px; max-width:560px; line-height:1.55; }
.hero-cta { display:inline-block; background:var(--teal-light); color:#08303C; padding:15px 34px; border-radius:10px; text-decoration:none; font-weight:800; font-size:16px; transition:transform .2s,box-shadow .2s; }
.hero-cta:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(43,196,195,.35); }
.hero-cta-sec { display:inline-block; color:var(--teal-light); padding:15px 22px; text-decoration:none; font-weight:700; font-size:15px; margin-left:6px; }
.hero-stats { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.hero-stat { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:22px 18px; text-align:center; backdrop-filter:blur(4px); }
.hero-stat .num { font-size:30px; font-weight:900; color:var(--teal-light); letter-spacing:-.01em; }
.hero-stat .label { font-size:12px; color:#8FB0C0; margin-top:6px; line-height:1.35; }
.hero-wave{ display:block; width:100%; height:80px; }

/* Subpage hero: same gradient, centered, more compact */
.page-hero{ background:linear-gradient(135deg,#081F30 0%,var(--navy) 55%,#0E4E63 100%); color:white; padding:64px 0 0; text-align:center; position:relative; overflow:hidden; }
.page-hero .kicker{ color:var(--teal-light); }
.page-hero h1{ font-size:38px; font-weight:900; line-height:1.12; letter-spacing:-.015em; margin-bottom:14px; }
.page-hero h1 span{ color:var(--teal-light); }
.page-hero p.lead{ font-size:16.5px; color:#B9D2DE; max-width:700px; margin:0 auto 28px; line-height:1.55; }
.page-hero .hero-wave{ margin-top:36px; }

/* ── Sections ──────────────────────────────────────────────────── */
.section { padding:72px 0; }
.section-alt { background:var(--paper); }
.section-dark { background:linear-gradient(135deg,#081F30,var(--navy)); color:#fff; }
.section-title { font-size:34px; font-weight:900; color:var(--navy); text-align:center; margin-bottom:12px; letter-spacing:-.01em; }
.section-dark .section-title{ color:#fff; }
.section-dark .kicker{ color:var(--teal-light); }
.section-subtitle { font-size:16px; color:var(--mid); text-align:center; max-width:760px; margin:0 auto 48px; line-height:1.55; }
.section-dark .section-subtitle{ color:#B9D2DE; }

/* ── Cards ─────────────────────────────────────────────────────── */
.problem-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.problem-card { background:white; border-radius:14px; padding:26px 22px; box-shadow:0 2px 14px rgba(13,53,80,.07); border-top:3px solid var(--water); }
.problem-card .num { font-size:34px; font-weight:900; color:var(--water); letter-spacing:-.01em; }
.problem-card h3 { font-size:15px; color:var(--navy); margin:10px 0 6px; font-weight:800; }
.problem-card p { font-size:13px; color:var(--mid); line-height:1.5; }

.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.feat{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px; }
.feat .ic{ width:44px; height:44px; border-radius:12px; background:var(--ice); display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:14px; }
.feat h3{ font-size:15.5px; font-weight:800; color:var(--navy); margin-bottom:8px; }
.feat p{ font-size:13px; color:var(--mid); line-height:1.55; }

.util-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.util-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px 22px; text-align:center; transition:transform .2s, box-shadow .2s; }
.util-card:hover{ transform:translateY(-4px); box-shadow:0 10px 30px rgba(13,53,80,.10); }
.util-card .ic{ font-size:34px; margin-bottom:12px; }
.util-card h3{ font-size:17px; font-weight:800; color:var(--navy); margin-bottom:8px; }
.util-card p{ font-size:13px; color:var(--mid); line-height:1.55; }

.comp-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.comp{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:16px; padding:24px; }
.comp h3{ font-size:16px; font-weight:800; color:var(--teal-light); margin-bottom:8px; }
.comp p{ font-size:13px; color:#C9DCE6; line-height:1.55; }
.comp ul{ list-style:none; margin-top:6px; }
.comp li{ font-size:13px; color:#C9DCE6; padding:4px 0 4px 20px; position:relative; line-height:1.5; }
.comp li::before{ content:'✓'; position:absolute; left:0; color:var(--teal-light); font-weight:800; }

.kpi-band{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.kpi{ text-align:center; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:26px 16px; }
.kpi .v{ font-size:34px; font-weight:900; color:var(--teal-light); letter-spacing:-.01em; }
.kpi .k{ font-size:12.5px; color:#8FB0C0; margin-top:8px; line-height:1.4; }

.chips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:860px; margin:0 auto; }
.chip{ border:1px solid var(--line); border-radius:10px; padding:9px 16px; font-size:13px; font-weight:700; color:var(--navy); background:#fff; }
.chip.hi{ background:var(--navy); color:#fff; border-color:var(--navy); }

.hg-note{ background:var(--ice); border-radius:14px; padding:20px 26px; font-size:14px; color:var(--navy); text-align:center; line-height:1.55; }
.hg-note-left{ text-align:left; }

/* ── Architecture flow ─────────────────────────────────────────── */
.arch-flow{ display:grid; grid-template-columns:1fr 34px 1fr 34px 1.25fr 34px 1fr; gap:0; align-items:stretch; }
.arch-step{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:0 2px 14px rgba(13,53,80,.06); }
.arch-step.core{ background:linear-gradient(160deg,var(--navy),#1E3A5F); border-color:var(--navy); color:#fff; }
.arch-step .lv{ font-size:11px; font-weight:800; letter-spacing:.14em; color:var(--teal); margin-bottom:6px; }
.arch-step.core .lv{ color:var(--teal-light); }
.arch-step h3{ font-size:17px; font-weight:800; color:var(--navy); margin-bottom:10px; }
.arch-step.core h3{ color:#fff; }
.arch-step ul{ list-style:none; font-size:12.5px; color:var(--mid); line-height:1.5; }
.arch-step.core ul{ color:#C9DCE6; }
.arch-step li{ padding:3px 0 3px 16px; position:relative; }
.arch-step li::before{ content:''; position:absolute; left:0; top:10px; width:7px; height:7px; border-radius:50%; background:var(--teal-light); }
.arch-arrow{ display:flex; align-items:center; justify-content:center; color:var(--teal); font-size:20px; font-weight:800; }

/* ── Tables ────────────────────────────────────────────────────── */
.roi-table{ width:100%; border-collapse:collapse; font-size:14px; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 2px 14px rgba(13,53,80,.07); }
.roi-table th{ background:var(--navy); color:#fff; text-align:left; font-weight:700; padding:13px 18px; font-size:13px; }
.roi-table td{ padding:12px 18px; border-bottom:1px solid var(--line); color:var(--mid); }
.roi-table td b{ color:var(--ink); }
.roi-table tr:nth-child(even) td{ background:var(--paper); }
.roi-table .up{ color:var(--hg-green); font-weight:800; }

/* ── FAQ (details/summary) ─────────────────────────────────────── */
.faq-wrap{ max-width:820px; margin:0 auto; }
.faq-cat{ font-size:20px; font-weight:900; color:var(--navy); margin:36px 0 14px; letter-spacing:-.01em; }
.faq-cat:first-child{ margin-top:0; }
.faq-item{ background:#fff; border:1px solid var(--line); border-radius:14px; margin-bottom:12px; overflow:hidden; }
.faq-item summary{ padding:18px 22px; font-size:15px; font-weight:700; color:var(--navy); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:'+'; font-size:22px; color:var(--teal); font-weight:800; flex-shrink:0; }
.faq-item[open] summary::after{ content:'–'; }
.faq-item .a{ padding:0 22px 20px; font-size:14px; color:var(--mid); line-height:1.6; }
.faq-item .a a{ color:var(--teal); font-weight:700; }

/* ── Pricing ───────────────────────────────────────────────────── */
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.price-card { background:white; border-radius:18px; overflow:hidden; box-shadow:0 4px 18px rgba(13,53,80,.08); border:2px solid transparent; transition:transform .2s; }
.price-card:hover { transform:translateY(-4px); }
.price-card.featured { border-color:var(--teal); position:relative; }
.price-card.featured::before{ content:'PIÙ SCELTO'; position:absolute; top:14px; right:14px; background:var(--teal); color:#fff; font-size:10px; font-weight:800; letter-spacing:.1em; padding:4px 10px; border-radius:12px; }
.price-header { padding:30px 24px 16px; text-align:center; }
.price-header h3 { font-size:22px; font-weight:800; color:var(--navy); }
.price-header .price { font-size:30px; font-weight:900; color:var(--teal); margin:8px 0; }
.price-header .price small { font-size:14px; font-weight:400; color:var(--mid); }
.price-body { padding:0 24px 20px; }
.price-feature { display:flex; gap:10px; padding:8px 0; font-size:14px; color:var(--dark); border-bottom:1px solid #F0F4F7; }
.price-feature:last-child { border-bottom:none; }
.price-feature .ck { color:var(--teal); font-weight:800; flex-shrink:0; }
.price-extra { background:var(--paper); padding:14px 24px; font-size:13px; color:var(--mid); text-align:center; }
.price-cta { display:block; margin:16px 24px 24px; text-align:center; padding:13px; border-radius:10px; text-decoration:none; font-weight:800; font-size:14px; }
.price-cta.primary { background:var(--teal); color:#fff; }
.price-cta.secondary { background:var(--ice); color:var(--navy); }

/* ── Demo box ──────────────────────────────────────────────────── */
.demo-box { background:linear-gradient(135deg,var(--water),var(--water-light)); border-radius:18px; padding:44px; color:white; display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center; }
.demo-box h2 { font-size:28px; font-weight:900; margin-bottom:12px; }
.demo-box p { font-size:15px; opacity:.92; margin-bottom:16px; }
.demo-features { list-style:none; }
.demo-features li { padding:6px 0; font-size:14px; }
.demo-features li::before { content:'\2713 '; font-weight:800; margin-right:8px; }
.demo-price { display:inline-block; background:rgba(255,255,255,.16); padding:9px 20px; border-radius:10px; font-weight:800; font-size:16px; margin-top:12px; }

/* ── CTA + forms ───────────────────────────────────────────────── */
.cta-section { background:linear-gradient(135deg,#081F30,var(--navy)); color:white; padding:64px 0; text-align:center; }
.cta-section h2 { font-size:32px; font-weight:900; margin-bottom:12px; }
.cta-section p { font-size:16px; color:#B9D2DE; margin-bottom:28px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:620px; margin:0 auto; }
.form-grid .full { grid-column:1/-1; }

/* ── ROI calculator widgets ────────────────────────────────────── */
.roi-box { background:white; border-radius:18px; padding:34px; box-shadow:0 4px 18px rgba(13,53,80,.08); max-width:820px; margin:0 auto; }
.roi-inputs { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; margin-bottom:24px; }
.roi-input label { display:block; font-size:13px; font-weight:700; color:var(--navy); margin-bottom:6px; }
.roi-input input { width:100%; padding:11px 14px; border:2px solid #E2E8F0; border-radius:10px; font-size:16px; font-weight:600; outline:none; }
.roi-input input:focus { border-color:var(--teal); }
.roi-btn { background:var(--teal); color:#fff; border:none; padding:13px 28px; border-radius:10px; font-weight:800; font-size:15px; cursor:pointer; width:100%; }
.roi-results { display:none; margin-top:24px; }
.roi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.roi-card { background:var(--paper); border-radius:12px; padding:18px 14px; text-align:center; }
.roi-card .val { font-size:24px; font-weight:900; color:var(--water); }
.roi-card .lbl { font-size:11px; color:var(--mid); margin-top:4px; }

.calc-wrapper { display:grid; grid-template-columns:1fr 1.1fr; gap:40px; max-width:1140px; margin:0 auto; align-items:start; }
.calc-panel { background:white; border-radius:18px; padding:34px; box-shadow:0 4px 18px rgba(13,53,80,.08); }
.calc-panel h2 { font-size:22px; font-weight:900; color:var(--navy); margin-bottom:22px; }
.input-group { margin-bottom:22px; }
.input-group label { display:block; font-size:14px; font-weight:800; color:var(--navy); margin-bottom:6px; }
.input-group .sublabel { font-size:12px; color:var(--mid); margin-bottom:6px; }
.input-group input { width:100%; padding:12px 16px; border:2px solid #E2E8F0; border-radius:10px; font-size:16px; font-weight:600; outline:none; }
.input-group input:focus { border-color:var(--teal); }
.input-note { font-size:12px; color:var(--mid); margin-top:6px; padding:8px 12px; background:var(--paper); border-radius:8px; }
.metric-duo { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:28px; }
.metric-card { background:linear-gradient(135deg,var(--water) 0%,var(--water-light) 100%); color:white; border-radius:14px; padding:20px; text-align:center; }
.metric-card .val { font-size:30px; font-weight:900; line-height:1.1; }
.metric-card .lbl { font-size:12px; margin-top:8px; opacity:.92; }
.breakdown h3 { font-size:16px; font-weight:800; color:var(--navy); margin:22px 0 10px; }
.breakdown-table { width:100%; border-collapse:collapse; }
.breakdown-table th { text-align:left; padding:10px 0; font-weight:800; border-bottom:2px solid var(--teal); font-size:13px; color:var(--navy); }
.breakdown-table td { padding:10px 0; border-bottom:1px solid var(--line); font-size:13px; color:var(--mid); }
.breakdown-table td:last-child { text-align:right; font-weight:600; }
.summary-box { background:rgba(43,196,195,.08); border:2px solid var(--teal); border-radius:14px; padding:20px; margin-top:22px; }
.summary-box h4 { font-size:14px; font-weight:800; color:var(--navy); margin-bottom:8px; }
.summary-box p { font-size:13px; color:var(--mid); line-height:1.6; }

/* ── Demo page widgets ─────────────────────────────────────────── */
.benefit-item { display:flex; gap:16px; margin-bottom:22px; }
.benefit-icon { flex-shrink:0; width:48px; height:48px; border-radius:12px; background:var(--ice); display:flex; align-items:center; justify-content:center; font-size:22px; }
.benefit-text h3 { font-size:16px; font-weight:800; color:var(--navy); margin-bottom:4px; }
.benefit-text p { font-size:14px; color:var(--mid); line-height:1.5; }
.form-card { background:white; border-radius:18px; padding:36px; box-shadow:0 4px 24px rgba(13,53,80,.08); }
.form-card h2 { font-size:22px; font-weight:900; color:var(--navy); margin-bottom:6px; }
.form-card .subtitle { font-size:14px; color:var(--mid); margin-bottom:28px; }
.form-group { margin-bottom:20px; }
.form-group label { display:block; font-size:13px; font-weight:700; color:var(--navy); margin-bottom:6px; }
.form-group label .req { color:#C0392B; }
.form-group input, .form-group select, .form-group textarea {
  width:100%; padding:12px 14px; border:1.5px solid #DCE1E8; border-radius:10px;
  font-size:14px; font-family:inherit; transition:border-color .2s; background:white;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(43,196,195,.1);
}
.form-group textarea { min-height:80px; resize:vertical; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-submit {
  width:100%; background:var(--teal); color:#fff; font-size:16px; font-weight:800;
  padding:14px; border:none; border-radius:10px; cursor:pointer; transition:all .2s; margin-top:8px;
}
.form-submit:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(43,196,195,.3); }
.process-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.process-step { text-align:center; position:relative; }
.process-step::after { content:'→'; position:absolute; right:-16px; top:24px; font-size:24px; color:var(--line); }
.process-step:last-child::after { display:none; }
.step-num { width:56px; height:56px; border-radius:50%; background:var(--ice); color:var(--navy); font-size:22px; font-weight:900; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; border:2px solid var(--teal); }
.process-step h3 { font-size:15px; font-weight:800; color:var(--navy); margin-bottom:6px; }
.process-step p { font-size:13px; color:var(--mid); line-height:1.5; }

/* ── Case studies ──────────────────────────────────────────────── */
.case-study { background:white; border-radius:18px; overflow:hidden; box-shadow:0 4px 18px rgba(13,53,80,.08); margin-bottom:40px; }
.case-header { background:linear-gradient(160deg,var(--navy),#1E3A5F); color:white; padding:32px; }
.case-header h2 { font-size:26px; font-weight:900; margin-bottom:6px; letter-spacing:-.01em; }
.case-header .location { font-size:14px; color:#B9D2DE; margin-bottom:20px; }
.case-header-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.stat-block { text-align:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:16px; }
.stat-block .num { font-size:24px; font-weight:900; color:var(--teal-light); }
.stat-block .label { font-size:12px; color:#8FB0C0; margin-top:4px; }
.case-body { padding:32px; }
.case-section { margin-bottom:24px; }
.case-section h3 { font-size:17px; font-weight:800; color:var(--navy); margin-bottom:10px; }
.case-section p { font-size:14.5px; color:var(--mid); line-height:1.65; }
.case-results { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:18px 0; }
.result-item { background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:16px; text-align:center; }
.result-item .val { font-size:22px; font-weight:900; color:var(--water); }
.result-item .desc { font-size:12px; color:var(--mid); margin-top:8px; line-height:1.4; }
.case-timeline { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:14px; }
.timeline-step { background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:16px; text-align:center; }
.timeline-step .title { font-size:13px; font-weight:800; color:var(--navy); }
.timeline-step .desc { font-size:12px; color:var(--mid); margin-top:6px; line-height:1.4; }

/* ── Responsive (design system) ────────────────────────────────── */
@media(max-width:900px){
  .arch-flow{ grid-template-columns:1fr; } .arch-arrow{ transform:rotate(90deg); padding:6px 0; }
}
@media(max-width:768px){
  .hero-grid,.demo-box,.calc-wrapper{ grid-template-columns:1fr; }
  .problem-grid,.util-grid,.comp-grid,.kpi-band,.case-timeline{ grid-template-columns:1fr 1fr; }
  .feat-grid,.pricing-grid,.roi-inputs,.form-row,.case-results,.case-header-stats,.metric-duo{ grid-template-columns:1fr; }
  .roi-grid{ grid-template-columns:1fr 1fr; }
  .hero h1{ font-size:30px; }
  .page-hero h1{ font-size:28px; }
  .form-grid{ grid-template-columns:1fr; }
  .process-steps{ grid-template-columns:1fr 1fr; }
  .process-step::after{ display:none; }
}