/* ============================================================
   BLUE CURRENT ELECTRICAL & SUPPLY  ·  shared stylesheet
   Light corporate style modeled on powerdepot.com's layout,
   in the Blue Current brand: white/light-gray sections, navy
   nav bar + footer, teal accent (the "pop" role PD gives yellow).
   Brand: navy #0F182E · teal #1FB5B8 · white.
   No build step. No em dashes. No pill chips.

   Extracted from index.html 2026-08-10 when the site went from
   one page to four. Every colour and face lives in the :root
   token block below; components reference the tokens, never a
   literal, so a brand change is one edit here.
   ============================================================ */
:root {
  --ink:#0f182e;        /* navy: nav bar, footer, headings */
  --ink-2:#1b2942;
  --ink-3:#26364f;
  --teal:#1fb5b8;       /* accent fills, icons, borders */
  --teal-bright:#4cc7ca;
  --teal-text:#0c7175;  /* accessible teal for links/text on white */
  --teal-deep:#0a5d61;
  --paper:#ffffff;
  --paper-2:#f3f6fa;    /* alt section bg */
  --paper-3:#e9eef5;
  --line:#e2e8f0;
  --line-2:#cdd8e6;
  --body:#3c4a5e;       /* body text */
  --muted:#6a7889;
  --danger:#c9524a;
  --danger-ink:#8e3730;
  --focus:#0c7175;      /* focus ring colour, same family as --teal-text */
  --display:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --maxw:1180px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:64px; overflow-x:clip; }
body { margin:0; font-family:var(--sans); color:var(--body); background:var(--paper); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:clip; }
h1,h2,h3,h4,.display { font-family:var(--display); font-weight:800; line-height:1.04; letter-spacing:-.01em; margin:0; color:var(--ink); font-style:normal; overflow-wrap:anywhere; }
p { margin:0; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.teal { color:var(--teal-text); }

/* Visible keyboard focus everywhere. Mouse users never see it. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline:3px solid var(--focus); outline-offset:2px; border-radius:4px;
}
.skip-link { position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:#fff; padding:12px 18px; font-family:var(--display); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.06em; }
.skip-link:focus { left:0; }

.eyebrow { font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.16em; font-size:12.5px; color:var(--teal-text); display:inline-flex; align-items:center; gap:11px; }
.eyebrow::before { content:""; width:26px; height:3px; background:var(--teal); flex:none; }

/* ---------- buttons: all 8 states ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; cursor:pointer; font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:13.5px; padding:13px 24px; border-radius:6px; border:2px solid transparent; transition:transform .16s ease, background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease; }
.btn:active { transform:translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity:.55; cursor:not-allowed; transform:none; }
.btn-primary { background:var(--teal); color:var(--ink); border-color:var(--teal); }
.btn-primary:hover:not(:disabled) { background:var(--teal-bright); border-color:var(--teal-bright); transform:translateY(-1px); }
.btn-primary:active:not(:disabled) { background:var(--teal-deep); border-color:var(--teal-deep); color:#fff; transform:translateY(1px); }
.btn-outline { background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn-outline:hover:not(:disabled) { border-color:var(--ink); background:var(--ink); color:#fff; }
.btn-outline:active:not(:disabled) { background:var(--ink-2); border-color:var(--ink-2); color:#fff; }
.btn-onnavy { background:var(--teal); color:var(--ink); border-color:var(--teal); }
.btn-onnavy:hover:not(:disabled) { background:#fff; border-color:#fff; }
.btn-ghost-navy { background:transparent; color:#fff; border-color:rgba(255,255,255,.32); }
.btn-ghost-navy:hover:not(:disabled) { border-color:var(--teal); color:var(--teal-bright); }
.btn.is-loading { opacity:.75; cursor:progress; }

.section { padding:82px 0; position:relative; }
.section.alt { background:var(--paper-2); }
.sec-head { max-width:680px; margin:0 auto 46px; text-align:center; }
.sec-head h2 { font-size:clamp(28px,4vw,44px); text-transform:uppercase; margin:12px 0 14px; }
.sec-head p { color:var(--muted); font-size:17px; }
.link-more { font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:12.5px; color:var(--teal-text); display:inline-flex; align-items:center; gap:7px; }
.link-more svg { width:15px; height:15px; stroke:currentColor; fill:none; transition:transform .2s ease; }
.link-more:hover svg { transform:translateX(4px); }

/* ---------- brand mark + wordmark ---------- */
.mark { width:44px; height:44px; flex:none; }
.wordmark { display:flex; flex-direction:column; line-height:1; }
.wordmark b { font-family:var(--display); font-weight:800; letter-spacing:.01em; font-size:20px; }
.wordmark span { font-family:var(--display); font-weight:600; letter-spacing:.2em; font-size:9px; color:var(--teal-text); text-transform:uppercase; margin-top:3px; }
.brand--onnavy .wordmark b { color:#fff; } .brand--onnavy .wordmark span { color:var(--teal-bright); }
.brand--onlight .wordmark b { color:var(--ink); }

/* ---------- header ---------- */
.topbar { background:#fff; border-bottom:1px solid var(--line); }
.topbar-in { display:flex; align-items:center; justify-content:space-between; height:70px; gap:16px; }
.brand { display:flex; align-items:center; gap:12px; }
.top-right { display:flex; align-items:center; gap:20px; }
.top-badge { font-size:12.5px; color:var(--muted); font-weight:600; display:flex; align-items:center; gap:8px; }
.top-badge svg { width:16px; height:16px; stroke:var(--teal); fill:none; flex:none; }
.top-phone { font-family:var(--display); font-weight:800; font-size:17px; color:var(--ink); display:flex; align-items:center; gap:8px; }
.top-phone svg { width:17px; height:17px; stroke:var(--teal); fill:none; flex:none; }

.mainnav { background:var(--ink); position:sticky; top:0; z-index:100; box-shadow:0 2px 12px -6px rgba(15,24,46,.5); }
.mainnav-in { display:flex; align-items:center; justify-content:space-between; height:56px; }
.nav-brand-sm { display:flex; align-items:center; gap:9px; }
.nav-brand-sm img { height:36px; width:auto; display:block; }
.nav-brand-sm .wm { display:flex; flex-direction:column; line-height:1; }
.nav-brand-sm .wm b { font-family:var(--display); font-weight:800; font-size:16px; color:#fff; letter-spacing:.02em; }
.nav-brand-sm .wm span { font-family:var(--display); font-weight:600; font-size:8px; letter-spacing:.2em; color:var(--teal-bright); text-transform:uppercase; margin-top:2px; }
.nav-links { display:flex; align-items:center; gap:6px; }
.nav-links a { font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:13px; color:rgba(255,255,255,.82); padding:8px 15px; border-radius:5px; transition:color .18s ease, background .18s ease; }
.nav-links a:hover, .nav-links a.active { color:#fff; background:rgba(255,255,255,.08); }
.nav-links a.active { box-shadow:inset 0 -3px 0 var(--teal); border-radius:5px 5px 0 0; }
.nav-links a:active { background:rgba(255,255,255,.14); }
.hamburger { display:none; background:none; border:1px solid rgba(255,255,255,.3); border-radius:7px; width:44px; height:38px; cursor:pointer; padding:0; }
.hamburger span { display:block; width:20px; height:2px; background:#fff; margin:4px auto; }
.hamburger:hover { border-color:var(--teal); }

/* ---------- hero (home) ---------- */
.hero { display:grid; grid-template-columns:1.05fr .95fr; min-height:520px; }
.hero-l { background:#fff; display:flex; align-items:center; padding:56px 0; }
.hero-l .inner { max-width:560px; margin-left:auto; padding:0 44px 0 24px; width:100%; min-width:0; }
.hero h1 { font-size:clamp(34px,4.6vw,58px); text-transform:uppercase; margin:16px 0 18px; }
.hero h1 em { font-style:normal; color:var(--teal-text); }
.hero-sub { font-size:18px; color:var(--body); margin-bottom:26px; max-width:480px; }
.hero-cta { display:flex; gap:13px; flex-wrap:wrap; margin-bottom:26px; }
.hero-trust { display:flex; gap:12px 26px; flex-wrap:wrap; }
.hero-trust span { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13.5px; font-weight:600; }
.hero-trust svg { width:17px; height:17px; stroke:var(--teal); fill:none; flex:none; }
.hero-r { position:relative; background:#0e162d; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:24px; min-height:540px; }
.hero-logo { position:relative; z-index:2; max-height:72%; max-width:78%; object-fit:contain; }
.hero-wave { position:absolute; left:0; right:0; bottom:0; width:100%; height:auto; z-index:1; pointer-events:none;
  -webkit-mask-image:linear-gradient(to top,#000 52%,transparent); mask-image:linear-gradient(to top,#000 52%,transparent); }

/* ---------- page head (sub-pages) ---------- */
.pagehead { background:linear-gradient(160deg,var(--ink),var(--ink-2)); color:#fff; padding:56px 0 60px; position:relative; overflow:hidden; }
.pagehead::after { content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--teal); }
.pagehead .eyebrow { color:var(--teal-bright); }
.pagehead .eyebrow::before { background:var(--teal-bright); }
.pagehead h1 { color:#fff; font-size:clamp(30px,4.4vw,50px); text-transform:uppercase; margin:14px 0 16px; }
.pagehead p { color:rgba(214,230,240,.82); font-size:17px; max-width:620px; }
.pagehead .head-cta { display:flex; gap:13px; flex-wrap:wrap; margin-top:26px; }
.crumb { font-size:13px; color:rgba(214,230,240,.6); margin-bottom:6px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.crumb a:hover { color:var(--teal-bright); }
.crumb span { opacity:.5; }

/* ---------- announcement strip ---------- */
.strip { background:var(--teal); color:var(--ink); }
.strip-in { display:flex; align-items:center; justify-content:center; gap:14px 26px; padding:16px 24px; flex-wrap:wrap; text-align:center; }
.strip b { font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:.02em; font-size:16px; }
.strip span { font-size:15px; font-weight:600; }

/* ---------- what we do ---------- */
.do-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.do { text-align:center; padding:8px 14px; min-width:0; }
.do .ico { width:64px; height:64px; margin:0 auto 18px; border-radius:14px; display:grid; place-items:center; background:var(--paper-2); border:1px solid var(--line); }
.do .ico svg { width:32px; height:32px; stroke:var(--teal); fill:none; }
.do h3 { font-size:20px; text-transform:uppercase; margin-bottom:9px; }
.do p { color:var(--muted); font-size:15px; margin-bottom:14px; }

/* ---------- category / subcategory tiles ---------- */
.cat-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:30px; flex-wrap:wrap; }
.cat-head h2 { font-size:clamp(26px,3.6vw,40px); text-transform:uppercase; }
.cat-head p { color:var(--muted); font-size:16px; margin-top:10px; max-width:560px; }
.tiles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.tiles.cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.tile { position:relative; display:block; background:#fff; border:1px solid var(--line); border-radius:10px; padding:22px 20px; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; min-width:0; }
.tile::before { content:""; position:absolute; left:0; top:0; height:3px; width:100%; background:var(--teal); border-radius:10px 10px 0 0; transform:scaleX(0); transform-origin:left; transition:transform .28s ease; }
.tile:hover { transform:translateY(-4px); border-color:var(--line-2); box-shadow:0 14px 30px -18px rgba(15,24,46,.4); }
.tile:hover::before { transform:scaleX(1); }
.tile:active { transform:translateY(-1px); }
.tile-ico { width:44px; height:44px; border-radius:9px; display:grid; place-items:center; margin-bottom:15px; background:rgba(31,181,184,.1); }
.tile-ico svg { width:23px; height:23px; stroke:var(--teal-deep); fill:none; }
.tile-t { display:block; font-family:var(--display); font-weight:700; font-size:15.5px; text-transform:uppercase; letter-spacing:.01em; color:var(--ink); margin-bottom:5px; overflow-wrap:anywhere; }
.tile-d { display:block; color:var(--muted); font-size:13px; line-height:1.45; }
.alt .tile { background:#fff; }
.cat-note { margin-top:22px; color:var(--muted); font-size:15px; display:flex; align-items:flex-start; gap:10px; }
.cat-note b { color:var(--ink); font-weight:700; }
.cat-note svg { width:19px; height:19px; stroke:var(--teal); fill:none; flex:none; margin-top:3px; }

/* product cards (bigger, four to a page) */
.prod-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.prod { border:1px solid var(--line); border-radius:12px; padding:30px 28px; background:#fff; display:flex; flex-direction:column; gap:14px; transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; min-width:0; }
.prod:hover { border-color:var(--line-2); box-shadow:0 16px 34px -22px rgba(15,24,46,.45); transform:translateY(-3px); }
.prod-top { display:flex; align-items:center; gap:16px; }
.prod-ico { width:56px; height:56px; border-radius:12px; display:grid; place-items:center; background:rgba(31,181,184,.1); flex:none; }
.prod-ico svg { width:29px; height:29px; stroke:var(--teal-deep); fill:none; }
.prod h3 { font-size:21px; text-transform:uppercase; }
.prod .abbr { font-family:var(--display); font-weight:700; font-size:12.5px; letter-spacing:.1em; color:var(--teal-text); text-transform:uppercase; margin-top:5px; display:block; }
.prod p { color:var(--muted); font-size:15px; }
.prod ul { margin:0; padding-left:19px; color:var(--muted); font-size:14.5px; }
.prod ul li { margin-bottom:6px; }
.prod .prod-foot { margin-top:auto; padding-top:6px; }

/* generators stats */
.gen-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:30px; }
.gstat { border:1px solid var(--line); border-radius:10px; padding:24px; background:var(--paper-2); text-align:center; min-width:0; }
.gstat .n { font-family:var(--display); font-weight:800; font-size:30px; color:var(--ink); overflow-wrap:anywhere; }
.gstat .l { color:var(--muted); font-size:14px; margin-top:4px; }

/* ---------- licence / sister company block ---------- */
.lic { border:1px solid var(--line-2); border-radius:12px; background:var(--paper-2); padding:30px 32px; display:grid; gap:18px; }
.lic-top { display:flex; align-items:center; gap:15px; }
.lic-top svg { width:32px; height:32px; stroke:var(--teal-deep); fill:none; flex:none; }
.lic-top h3 { font-size:19px; text-transform:uppercase; }
.lic p { color:var(--body); font-size:15.5px; }
.lic-row { display:flex; gap:14px 40px; flex-wrap:wrap; padding-top:4px; border-top:1px solid var(--line); }
.lic-row .k { font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:11.5px; color:var(--muted); margin-bottom:4px; }
.lic-row .v { color:var(--ink); font-size:16px; font-weight:600; overflow-wrap:anywhere; }
.lic-row .v.pending { color:var(--muted); font-weight:500; font-style:normal; }

/* ---------- catalog search (supplies) ---------- */
.searchbar { position:relative; display:flex; gap:12px; flex-wrap:wrap; align-items:stretch; margin-bottom:14px; }
.searchbar .field-wrap { position:relative; flex:1 1 340px; min-width:0; }
.searchbar svg.mag { position:absolute; left:15px; top:50%; transform:translateY(-50%); width:19px; height:19px; stroke:var(--muted); fill:none; pointer-events:none; }
.searchbar input { width:100%; font-family:var(--sans); font-size:16px; color:var(--ink); background:#fff; border:1px solid var(--line-2); border-radius:8px; padding:15px 44px 15px 44px; transition:border-color .18s ease, box-shadow .18s ease; }
.searchbar input::placeholder { color:var(--muted); }
.searchbar input:hover { border-color:var(--muted); }
.searchbar input:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(31,181,184,.16); }
.searchbar input:disabled { background:var(--paper-2); cursor:not-allowed; }
.search-clear { position:absolute; right:8px; top:50%; transform:translateY(-50%); width:30px; height:30px; border:none; background:none; cursor:pointer; border-radius:50%; display:none; place-items:center; color:var(--muted); font-size:20px; line-height:1; }
.search-clear.show { display:grid; }
.search-clear:hover { background:var(--paper-3); color:var(--ink); }
.search-meta { color:var(--muted); font-size:14px; margin-bottom:22px; min-height:21px; }
.search-meta b { color:var(--ink); font-weight:700; }
.search-empty { display:none; border:1px dashed var(--line-2); border-radius:12px; padding:40px 28px; text-align:center; background:var(--paper-2); }
.search-empty.show { display:block; }
.search-empty h4 { font-size:17px; text-transform:uppercase; margin-bottom:8px; }
.search-empty p { color:var(--muted); font-size:15px; margin-bottom:18px; }
.search-loading { color:var(--muted); font-size:15px; padding:30px 0; display:none; }
.search-loading.show { display:block; }
.search-error { display:none; border:1px solid var(--danger); border-radius:12px; padding:22px 24px; background:rgba(201,82,74,.07); color:var(--danger-ink); font-size:15px; font-weight:600; }
.search-error.show { display:block; }
.cat-card { position:relative; display:block; background:#fff; border:1px solid var(--line); border-radius:10px; padding:20px 18px; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; min-width:0; }
.cat-card:hover { transform:translateY(-3px); border-color:var(--line-2); box-shadow:0 14px 30px -18px rgba(15,24,46,.4); }
.cat-card .n { display:block; font-family:var(--display); font-weight:700; font-size:14.5px; text-transform:uppercase; color:var(--ink); margin-bottom:6px; overflow-wrap:anywhere; }
.cat-card .d { display:block; color:var(--muted); font-size:13px; line-height:1.45; }
.cat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; }
.stock-note { display:flex; align-items:center; gap:10px; background:rgba(31,181,184,.09); border:1px solid rgba(31,181,184,.35); border-radius:9px; padding:13px 17px; color:var(--ink); font-size:14.5px; font-weight:600; margin-bottom:26px; }
.stock-note svg { width:19px; height:19px; stroke:var(--teal-deep); fill:none; flex:none; }

/* ---------- who we serve (dark band) ---------- */
.band { background:linear-gradient(160deg,var(--ink),var(--ink-2)); color:#fff; }
.band .sec-head h2 { color:#fff; }
.band .sec-head p { color:rgba(214,230,240,.8); }
.serve-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.serve { border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:26px 22px; background:rgba(255,255,255,.03); transition:border-color .2s ease, background .2s ease; min-width:0; }
.serve:hover { border-color:rgba(76,199,202,.5); background:rgba(31,181,184,.08); }
.serve svg { width:30px; height:30px; stroke:var(--teal-bright); fill:none; margin-bottom:14px; }
.serve h4 { color:#fff; font-size:17px; text-transform:uppercase; margin-bottom:6px; }
.serve p { color:rgba(214,230,240,.72); font-size:14px; }
.band-foot { text-align:center; margin-top:36px; color:rgba(214,230,240,.9); font-size:15px; }
.band-foot b { color:var(--teal-bright); }

/* ---------- about ---------- */
.about-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:52px; align-items:center; }
.about p + p { margin-top:14px; }
/* Added 2026-08-23. Niko asked for the "three things well" sentence to stop being a
   comma run and become a short list: "too many commas ... maybe we have like a little
   bullet list" [call-niko-2026-08-23, 24:08]. Marker is a token-coloured square rather
   than a disc so it matches the flat, no-shadow house style. */
.about-list { list-style:none; margin:16px 0 0; padding:0; display:grid; gap:10px; }
.about-list li { position:relative; padding-left:26px; color:var(--body); font-size:16px; font-weight:600; min-width:0; overflow-wrap:anywhere; }
.about-list li::before { content:""; position:absolute; left:0; top:.55em; width:10px; height:10px; border-radius:3px; background:var(--teal); }
.about-list + p { margin-top:16px; }
.values { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.value { border:1px solid var(--line); border-radius:12px; padding:22px; background:#fff; min-width:0; }
.value svg { width:26px; height:26px; stroke:var(--teal-deep); fill:none; margin-bottom:11px; }
.value h4 { font-size:16px; text-transform:uppercase; margin-bottom:5px; }
.value p { color:var(--muted); font-size:13.5px; }
.stat-row { display:flex; gap:40px; margin-top:30px; flex-wrap:wrap; }
.stat-row .s .n { font-family:var(--display); font-weight:800; font-size:38px; color:var(--teal-text); line-height:1; }
.stat-row .s .l { color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.06em; margin-top:6px; }

/* ---------- contact ---------- */
.contact-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px; }
form { display:grid; gap:15px; }
.field { display:grid; gap:6px; min-width:0; }
.field label { font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:11.5px; color:var(--muted); }
.field input, .field select, .field textarea { font-family:var(--sans); font-size:15px; color:var(--ink); background:#fff; border:1px solid var(--line-2); border-radius:8px; padding:12px 14px; transition:border-color .18s ease, box-shadow .18s ease; width:100%; min-width:0; }
.field input:hover, .field select:hover, .field textarea:hover { border-color:var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(31,181,184,.16); }
.field input:disabled, .field select:disabled, .field textarea:disabled { background:var(--paper-2); color:var(--muted); cursor:not-allowed; }
.field textarea { resize:vertical; min-height:118px; }
.row2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.form-note { color:var(--muted); font-size:13px; }
.form-ok { display:none; padding:13px 15px; border:1px solid var(--teal); border-radius:8px; background:rgba(31,181,184,.1); color:var(--teal-deep); font-weight:600; font-size:15px; }
.form-err { display:none; padding:13px 15px; border:1px solid var(--danger); border-radius:8px; background:rgba(201,82,74,.09); color:var(--danger-ink); font-weight:600; font-size:15px; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.contact-info { display:grid; gap:13px; align-content:start; }
.cinfo { display:flex; gap:15px; align-items:flex-start; border:1px solid var(--line); border-radius:12px; padding:20px 22px; background:var(--paper-2); min-width:0; }
.cinfo svg { width:23px; height:23px; stroke:var(--teal-deep); fill:none; flex:none; margin-top:2px; }
.cinfo .k { font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:11.5px; color:var(--muted); margin-bottom:4px; }
.cinfo .v { color:var(--ink); font-size:16px; font-weight:600; overflow-wrap:anywhere; }
.cinfo .v span { display:block; color:var(--muted); font-size:14px; font-weight:400; margin-top:2px; }

/* ---------- footer ---------- */
footer { background:var(--ink); color:rgba(214,230,240,.72); padding:56px 0 26px; }
.foot-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:34px; margin-bottom:38px; }
footer .brand { display:flex; align-items:center; gap:11px; }
footer .brand img { height:44px; width:auto; display:block; }
footer .brand .wm { display:flex; flex-direction:column; line-height:1; }
footer .brand .wm b { font-family:var(--display); font-weight:800; font-size:19px; color:#fff; letter-spacing:.02em; }
footer .brand .wm span { font-family:var(--display); font-weight:600; font-size:9px; letter-spacing:.2em; color:var(--teal-bright); text-transform:uppercase; margin-top:2px; }
.foot-about p { font-size:14px; margin-top:16px; max-width:300px; }
.foot-col h5 { font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.09em; font-size:12px; color:#fff; margin-bottom:15px; }
.foot-col a, .foot-col p { display:block; font-size:14px; margin-bottom:9px; transition:color .18s ease; }
.foot-col a:hover { color:var(--teal-bright); }
.foot-bottom { display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.1); padding-top:22px; font-size:13px; }
.foot-bottom a { color:rgba(214,230,240,.72); } .foot-bottom a:hover { color:var(--teal-bright); }

/* ---------- motion ----------
   Scroll reveal is OPT-IN, not opt-out. `.reveal` is visible by default; the
   hidden state only applies under `.js-anim`, which site.js adds to <html>
   once it has confirmed IntersectionObserver exists and it can un-hide again.

   Why it is built this way: site.js is an external file since the 2026-08-10
   split into sub-pages. If it 404s, is blocked, or throws, a hide-by-default
   rule would leave every section at opacity:0 forever and the site would
   render as a blank page with a working nav. Failing to "no animation" is
   survivable; failing to "no content" is not. Do not invert this. */
.reveal { opacity:1; transform:none; }
.js-anim .reveal { opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.js-anim .reveal.in { opacity:1; transform:none; }
@keyframes float { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }
.hero-r .hero-logo { animation:float 6.5s ease-in-out infinite; }

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .cat-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:940px){
  .hero{ grid-template-columns:1fr; } .hero-r{ min-height:460px; order:-1; padding:20px; }
  .hero-logo{ width:auto; max-width:76%; max-height:62%; }
  .hero-l .inner{ margin:0 auto; padding:0 24px; }
  .do-grid{ grid-template-columns:1fr; gap:14px; } .do{ text-align:left; display:flex; gap:18px; align-items:flex-start; padding:0; }
  .do .ico{ margin:0; flex:none; } .about-grid{ grid-template-columns:1fr; gap:34px; }
  .tiles,.tiles.cols-3,.serve-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .prod-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; gap:34px; }
  .foot-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cat-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px){
  .nav-links{ display:none; } .hamburger{ display:block; }
  .top-badge{ display:none; }
  .topbar .brand{ display:none; }                 /* redundant with the navy nav bar below */
  .topbar-in{ justify-content:flex-end; height:58px; gap:14px; }
  .top-right{ gap:14px; } .top-right .btn{ padding:11px 16px; }
  .nav-links.open{ display:flex; position:absolute; top:56px; left:0; right:0; flex-direction:column; gap:0; background:var(--ink); border-top:1px solid rgba(255,255,255,.12); padding:6px 24px 16px; }
  .nav-links.open a{ padding:13px 0; width:100%; }
  .pagehead{ padding:42px 0 46px; }
}
@media (max-width:560px){
  .tiles,.tiles.cols-3,.serve-grid,.gen-stats,.values,.row2,.cat-grid{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; } .section{ padding:60px 0; }
  .lic{ padding:24px 20px; }
  .prod{ padding:24px 20px; }
  .stat-row{ gap:26px; }
}
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } .reveal, .js-anim .reveal{ opacity:1; transform:none; } html{ scroll-behavior:auto; } }