/* ============================================================
   CRESTWATCH — SHARED STYLES
   Edit colours and fonts here once; every page uses this file.
   ============================================================ */

:root {
  /* Brand colours — change these to re-theme the whole site */
  --green: #1e9e54;
  --green-dark: #157a40;
  --navy: #15212e;
  --ink: #1c2530;
  --grey: #5b6470;
  --line: #e6e9ed;
  --bg: #ffffff;
  --bg-soft: #f5f7f9;

  /* Status colours (match sensors.js) */
  --st-normal: #1e9e54;
  --st-elevated: #e8a818;
  --st-high: #d83a2e;
  --st-offline: #8a8f98;

  --radius: 10px;
  --shadow: 0 8px 28px rgba(21, 33, 46, .10);
  --maxw: 1180px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

/* ---------------- NAVIGATION ----------------
   Transparent over the hero, solid white after scrolling.
   JS on each page toggles the .solid class.           */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1100;
  transition: background .25s ease, box-shadow .25s ease;
  background: linear-gradient(to bottom, rgba(11, 20, 30, .55), rgba(11, 20, 30, 0));
}
.nav .nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 14px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.nav .brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 1.15rem; letter-spacing: .2px; color: #fff; transition: color .25s; }
.nav .brand svg { width: 44px; height: 24px; }
.nav .links { display: flex; align-items: center; gap: 19px; list-style: none; }
.nav .links a { color: rgba(255,255,255,.92); font-weight: 600; font-size: .92rem; transition: color .2s; white-space: nowrap; }
.nav .links a:hover, .nav .links a.active { color: var(--green); }
.nav .cta {
  background: var(--green); color: #fff !important; padding: 9px 22px;
  border-radius: 6px; font-weight: 700; font-size: .9rem; letter-spacing: .3px;
  white-space: nowrap;
}
.nav .cta:hover { background: var(--green-dark); color: #fff !important; }

/* Grouped nav dropdowns (Product ▾ / More ▾) — fewer items in the top bar */
.nav .nav-dd { position: relative; }
.nav .nav-dd-btn {
  background: none; border: 0; cursor: pointer; font: inherit; font-weight: 600;
  font-size: .92rem; color: rgba(255,255,255,.92); display: inline-flex; align-items: center;
  gap: 5px; padding: 4px 2px; transition: color .2s; white-space: nowrap;
}
.nav .nav-dd-btn svg { width: 12px; height: 12px; transition: transform .2s; }
.nav.solid .nav-dd-btn { color: var(--ink); }
.nav .nav-dd-btn:hover, .nav .nav-dd-btn.active { color: var(--green); }
.nav .nav-dd-menu {
  display: none; position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  background: #fff; border-radius: 12px; box-shadow: 0 14px 40px rgba(21,33,46,.22);
  padding: 8px 0; min-width: 190px; z-index: 1300;
}
.nav .nav-dd.open .nav-dd-menu { display: block; }
.nav .nav-dd.open .nav-dd-btn svg { transform: rotate(180deg); }
.nav .nav-dd-menu a {
  display: block; padding: 10px 20px; color: var(--ink) !important;
  font-weight: 600; font-size: .92rem;
}
.nav .nav-dd-menu a:hover, .nav .nav-dd-menu a.active { color: var(--green) !important; background: var(--bg-soft); }

/* Easy (elder) mode toggle button in the nav */
.nav .easy-btn {
  display: inline-flex; align-items: center; gap: 6px; background: none;
  border: 1.5px solid currentColor; opacity: .85; color: #fff; border-radius: 99px;
  padding: 5px 12px; font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer;
  letter-spacing: .4px; white-space: nowrap; transition: opacity .2s;
}
.nav .easy-btn:hover { opacity: 1; }
.nav.solid .easy-btn { color: var(--navy); }

.nav.solid { background: #fff; box-shadow: 0 2px 14px rgba(21,33,46,.08); }
.nav.solid .brand { color: var(--navy); }
.nav.solid .links a { color: var(--ink); }
.nav.solid .links a:hover, .nav.solid .links a.active { color: var(--green); }

/* Search button + mobile nav */
.nav .nav-right { display: flex; align-items: center; gap: 4px; order: 3; }
.nav .search-btn { background: none; border: 0; cursor: pointer; padding: 7px; color: #fff; transition: color .25s; }
.nav .search-btn svg { width: 21px; height: 21px; display: block; }
.nav.solid .search-btn { color: var(--navy); }
.nav .search-btn:hover { color: var(--green); }
.nav .burger { display: none; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav .burger span { display: block; width: 24px; height: 2.5px; background: #fff; margin: 5px 0; border-radius: 2px; transition: background .25s; }
.nav.solid .burger span { background: var(--navy); }

/* Search overlay */
.search-overlay {
  display: none; position: fixed; inset: 0; z-index: 2000;
  background: rgba(11,20,30,.55); backdrop-filter: blur(3px);
  padding: 12vh 20px 20px;
}
.search-overlay.open { display: block; }
.search-box { max-width: 560px; margin: 0 auto; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.search-box input { border: 0; border-bottom: 1.5px solid var(--line); border-radius: 0; padding: 18px 22px; font-size: 1.05rem; }
.search-box input:focus { border-color: var(--green); }
.search-results { max-height: 50vh; overflow-y: auto; }
.search-tip { padding: 18px 22px; color: var(--grey); font-size: .9rem; }
.search-hit { display: flex; gap: 14px; align-items: center; padding: 13px 22px; border-bottom: 1px solid var(--line); }
.search-hit:hover { background: var(--bg-soft); }
.search-hit .t { flex-shrink: 0; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--green); background: #e3f4ea; border-radius: 99px; padding: 3px 10px; }
.search-hit b { color: var(--navy); font-size: .95rem; display: block; }
.search-hit small { color: var(--grey); font-size: .8rem; }

@media (max-width: 1020px) {
  .nav .burger { display: block; }
  .nav .links {
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; flex-direction: column; gap: 0; padding: 8px 0 14px;
    box-shadow: 0 14px 24px rgba(21,33,46,.12);
    display: none;
  }
  .nav .links.open { display: flex; }
  .nav .links a { color: var(--ink) !important; padding: 12px 26px; display: block; width: 100%; }
  .nav .links .cta { margin: 10px 26px 0; width: auto; text-align: center; background: var(--green); color: #fff !important; }

  /* ---- Phone menu: groups become collapsible sections ----
     Every group used to dump all its links straight into the burger
     menu, which made one long undifferentiated list. Now each group
     is a labelled row you tap to open, so the menu opens as five
     tidy sections instead of fifteen loose links. */
  .nav .nav-dd { width: 100%; border-top: 1px solid var(--line); }
  .nav .nav-dd-btn {
    display: flex; width: 100%; justify-content: space-between; align-items: center;
    padding: 13px 26px; color: var(--ink); font-size: .92rem; font-weight: 700;
  }
  .nav.solid .nav-dd-btn { color: var(--ink); }
  .nav .nav-dd-btn svg { width: 15px; height: 15px; opacity: .5; }
  .nav .nav-dd-menu {
    display: none; position: static; transform: none; box-shadow: none;
    border-radius: 0; padding: 0 0 6px; min-width: 0; background: var(--bg-soft);
  }
  /* open by tap, or automatically for the section holding this page */
  .nav .nav-dd.open .nav-dd-menu,
  .nav .nav-dd.has-active .nav-dd-menu { display: block; }
  .nav .nav-dd.has-active .nav-dd-btn svg { transform: rotate(180deg); }
  /* indented and slightly smaller, so links read as children of the heading */
  .nav .nav-dd-menu a {
    padding: 11px 26px 11px 40px; font-size: .89rem; font-weight: 600;
    border-left: 3px solid transparent;
  }
  .nav .nav-dd-menu a.active { border-left-color: var(--green); background: #fff; }
}

/* ============================================================
   EASY MODE (elder-friendly): toggled with the nav button.
   <html class="cw-elder"> turns everything bigger and simpler.
   ============================================================ */
html.cw-elder body { font-size: 1.18rem; }
html.cw-elder .nav .links a,
html.cw-elder .nav .nav-dd-btn { font-size: 1.05rem; }
html.cw-elder .nav .cta { font-size: 1.02rem; padding: 12px 26px; }
html.cw-elder .auth-btn { font-size: 1rem; padding: 10px 22px; }
html.cw-elder .easy-btn { font-size: .95rem; padding: 8px 16px; border-width: 2px; }
html.cw-elder .btn { font-size: 1.1rem; padding: 16px 32px; }
html.cw-elder input, html.cw-elder select, html.cw-elder textarea { font-size: 1.1rem; padding: 15px 17px; }
html.cw-elder label { font-size: 1rem; }
html.cw-elder .sensor-item { padding: 20px 22px; }
html.cw-elder .sensor-item .nm { font-size: 1.15rem; }
html.cw-elder .sensor-item .rv, html.cw-elder .sensor-item .lvl { font-size: 1rem; }
html.cw-elder .filters button { font-size: .95rem; padding: 8px 18px; }
html.cw-elder .sidebar .head h1 { font-size: 1.5rem; }
html.cw-elder .sidebar .head p { font-size: 1rem; }
html.cw-elder .search-box input { font-size: 1.25rem; padding: 22px 24px; }
html.cw-elder .search-hit b { font-size: 1.1rem; }
html.cw-elder .search-hit small { font-size: .95rem; }
html.cw-elder table.cw { font-size: 1.05rem; }
/* hide the advanced nav items so only the essentials remain */
html.cw-elder .nav [data-elder-hide] { display: none !important; }
/* items that only appear in Easy mode (flat Help/Contact links) */
.nav [data-elder-only] { display: none !important; }
html.cw-elder .nav [data-elder-only] { display: revert !important; }
/* the big, always-visible exit button */
.easy-exit { display: none; }
html.cw-elder .easy-exit {
  display: flex; align-items: center; gap: 10px;
  position: fixed; bottom: 22px; right: 22px; z-index: 3000;
  background: var(--navy); color: #fff; border: 3px solid var(--green);
  border-radius: 99px; padding: 14px 26px; font: inherit; font-size: 1.1rem;
  font-weight: 800; cursor: pointer; box-shadow: 0 10px 30px rgba(21,33,46,.35);
}
.easy-exit:hover { background: var(--green); }

/* Easy mode bumps every input's padding, which was hiding the map
   search's magnifier under the (now larger) text. Restore room for
   it and centre the icon so nothing overlaps. */
html.cw-elder .s-search input { padding-left: 48px; }
html.cw-elder .s-search svg { width: 20px; height: 20px; transform: translateY(-50%); }

/* ---------------- LANGUAGE SWITCHER (nav) ----------------
   The button uses currentColor, which over a dark page header
   (e.g. the News hero) resolved to dark-on-dark and vanished.
   Pin it white over the transparent hero nav, navy once the nav
   turns solid — matching every other control in the bar. */
.nav .cw-lang-btn { color: #fff; border-color: rgba(255,255,255,.6); opacity: 1; }
.nav .cw-lang-btn:hover { border-color: #fff; }
.nav.solid .cw-lang-btn { color: var(--navy); border-color: rgba(21,33,46,.35); }
.nav.solid .cw-lang-btn:hover { border-color: var(--navy); }

/* ---------------- BUTTONS ---------------- */
.btn { display: inline-block; padding: 13px 28px; border-radius: 6px; font-weight: 700; font-size: .95rem; letter-spacing: .3px; cursor: pointer; border: 0; transition: all .2s; }
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-dark); }
.btn-outline { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.85); }
.btn-outline:hover { background: rgba(255,255,255,.15); }
.btn-dark { background: var(--navy); color: #fff; }
.btn-dark:hover { background: #0d1620; }

/* ---------------- "SUPPORT US" (crowdfunding) ----------------
   Shared by the home page, alerts.html, vision.html and the
   crowdfunding page itself. A warm green gradient with a heart,
   so it reads as a donation and not as another product button. */
.btn-support {
  display: inline-flex; align-items: center; gap: 9px;
  background: linear-gradient(135deg, #2bb765, var(--green-dark));
  color: #fff; box-shadow: 0 10px 26px rgba(30, 158, 84, .30);
}
.btn-support:hover {
  background: linear-gradient(135deg, #34c973, var(--green));
  transform: translateY(-2px); box-shadow: 0 14px 32px rgba(30, 158, 84, .42);
}
.btn-support svg { flex-shrink: 0; fill: rgba(255, 255, 255, .18); }
@media (prefers-reduced-motion: reduce) { .btn-support:hover { transform: none; } }

/* The banner that tells visitors the campaign exists. Light card by
   default; add .dark when it sits on a navy background. */
.cw-fund-banner {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  justify-content: space-between; max-width: var(--maxw); margin: 0 auto;
  background: linear-gradient(120deg, #f2fbf5, #e7f6ee);
  border: 2px solid #bfe6cf; border-left: 6px solid var(--green);
  border-radius: 14px; padding: 20px 24px;
}
.cw-fund-banner .fb-txt { flex: 1 1 320px; min-width: 260px; }
.cw-fund-banner .fb-eyebrow {
  color: var(--green-dark); font-weight: 800; text-transform: uppercase;
  letter-spacing: 2px; font-size: .72rem; margin-bottom: 5px;
  display: flex; align-items: center; gap: 8px;
}
.cw-fund-banner .fb-eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  animation: cwFundPulse 1.8s infinite;
}
@keyframes cwFundPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(30, 158, 84, .55); }
  70%      { box-shadow: 0 0 0 9px rgba(30, 158, 84, 0); }
}
.cw-fund-banner b { color: var(--navy); font-size: 1.04rem; display: block; }
.cw-fund-banner p { color: var(--grey); font-size: .92rem; margin-top: 4px; }
.cw-fund-banner.dark {
  background: rgba(255, 255, 255, .06); border-color: rgba(79, 217, 138, .45);
  border-left-color: #4fd98a;
}
.cw-fund-banner.dark b { color: #fff; }
.cw-fund-banner.dark p { color: #b9c5d0; }
.cw-fund-banner.dark .fb-eyebrow { color: #4fd98a; }
@media (prefers-reduced-motion: reduce) { .cw-fund-banner .fb-eyebrow .dot { animation: none; } }

/* ---------------- SECTIONS ---------------- */
.section { padding: 76px 0; }
.section.soft { background: var(--bg-soft); }
.kicker { color: var(--green); font-weight: 800; text-transform: uppercase; letter-spacing: 2.5px; font-size: .78rem; margin-bottom: 10px; }
h2.title { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 800; color: var(--navy); line-height: 1.25; margin-bottom: 14px; }
.lead { color: var(--grey); font-size: 1.05rem; max-width: 640px; }

/* ---------------- CARDS / TILES ---------------- */
.tile-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.tile {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 14px; text-align: center; font-weight: 700; font-size: .88rem;
  color: var(--navy); transition: all .2s; box-shadow: 0 2px 8px rgba(21,33,46,.04);
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--green); }
.tile svg { width: 38px; height: 38px; margin: 0 auto 12px; stroke: var(--green); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; box-shadow: 0 2px 8px rgba(21,33,46,.04);
}

/* Numbered features (theGov style 01 / 02 / 03) */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 34px; }
.feature .num { font-size: 3.4rem; font-weight: 800; color: var(--line); line-height: 1; margin-bottom: 10px; }
.feature h3 { font-size: 1.15rem; color: var(--navy); margin-bottom: 8px; }
.feature p { color: var(--grey); font-size: .95rem; }
.feature a { color: var(--green); font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: 1.5px; }
.feature a:hover { text-decoration: underline; }

/* ---------------- STATUS BADGES ---------------- */
.badge { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: .8rem; padding: 4px 12px; border-radius: 99px; color: #fff; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* ---------------- FOOTER ---------------- */
footer { background: var(--navy); color: #aeb8c2; padding: 56px 0 30px; margin-top: 0; }
footer .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
footer h4 { color: #fff; font-size: .95rem; margin-bottom: 14px; letter-spacing: .5px; }
footer a { display: block; padding: 4px 0; font-size: .92rem; }
footer a:hover { color: var(--green); }
footer .foot-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 40px; padding: 22px 22px 0; text-align: center; font-size: .82rem; color: #7d8893; }
/* Companies Act 2006 s.82 / e-Commerce Regs 2002 reg.6 trading disclosure —
   the registered name, number and office must appear on the website. */
footer .foot-bottom .foot-legal { font-size: .78rem; line-height: 1.6; color: #93a0ab; max-width: 640px; margin: 0 auto 10px; }
footer .foot-bottom .foot-legal b { color: #b6c3ce; letter-spacing: .3px; }
footer .foot-bottom .foot-disclaimer { font-size: .75rem; line-height: 1.6; color: #6f7b86; max-width: 640px; margin: 0 auto 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
footer .brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; font-size: 1.15rem; margin-bottom: 12px; }
footer .brand svg { width: 44px; height: 24px; }
@media (max-width: 700px) { footer .foot-grid { grid-template-columns: 1fr; gap: 26px; } }

/* ---------------- FORMS ---------------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
label { font-weight: 700; font-size: .85rem; color: var(--navy); display: block; margin-bottom: 6px; }
input, select, textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 8px;
  font: inherit; font-size: .95rem; color: var(--ink); background: #fff;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--green); }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------------- AUTH: LOG IN BUTTON + ACCOUNT DROPDOWN ---------------- */
.nav .auth-slot { order: 4; display: flex; align-items: center; }
.auth-btn {
  display: inline-block; background: transparent; color: #fff !important;
  border: 2px solid rgba(255,255,255,.85); padding: 7px 18px; border-radius: 6px;
  font-weight: 700; font-size: .88rem; letter-spacing: .3px; transition: all .2s;
}
.auth-btn:hover { background: var(--green); border-color: var(--green); }
.nav.solid .auth-btn { color: var(--navy) !important; border-color: var(--navy); }
.nav.solid .auth-btn:hover { background: var(--green); border-color: var(--green); color: #fff !important; }

.account-dd { position: relative; }
.account-btn {
  display: flex; align-items: center; gap: 6px; background: none; border: 0;
  cursor: pointer; color: #fff; padding: 4px;
}
.nav.solid .account-btn { color: var(--navy); }
.account-btn .avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: #fff;
  font-weight: 800; font-size: .95rem; display: flex; align-items: center; justify-content: center;
}
.account-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 10px); min-width: 230px;
  background: #fff; border-radius: 12px; box-shadow: 0 14px 40px rgba(21,33,46,.22);
  padding: 8px 0; z-index: 1200; overflow: hidden;
}
.account-dd.open .account-menu { display: block; }
.account-menu .acc-email { padding: 10px 18px 2px; font-weight: 700; font-size: .88rem; color: var(--navy); word-break: break-all; }
.account-menu .acc-role { padding: 0 18px 10px; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: var(--green); border-bottom: 1px solid var(--line); }
.account-menu a, .account-menu button {
  display: block; width: 100%; text-align: left; padding: 11px 18px; background: none;
  border: 0; font: inherit; font-size: .9rem; font-weight: 600; color: var(--ink); cursor: pointer;
}
.account-menu a:hover, .account-menu button:hover { background: var(--bg-soft); color: var(--green); }
@media (max-width: 1020px) {
  .nav .auth-slot { order: 2; margin-left: auto; }
  .nav .nav-right { order: 3; }
}

/* ---------------- LOADING SCREEN ----------------
   Injected on every page by cwRenderNav() (site.js).
   The logo builds itself: the wave draws in, the drop
   falls onto the crest, the eye blinks awake. Fades out
   as soon as the page has loaded. First visit gets the
   full intro; later pages in the same session get a
   quick version so navigation never feels slow. */
.cw-loader {
  position: fixed; inset: 0; z-index: 5000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; background: linear-gradient(120deg, var(--navy), #1d3a52);
  transition: opacity .45s ease, visibility .45s ease;
}
.cw-loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.cw-loader svg { width: 170px; height: 85px; color: #fff; overflow: visible; }
.cw-loader .cw-l-word {
  color: #fff; font-weight: 800; font-size: 1.18rem; letter-spacing: 4px;
  text-transform: uppercase;
}
.cw-loader .cw-l-dots { display: flex; gap: 7px; }
.cw-loader .cw-l-dots i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  animation: cwlDot 1.2s ease-in-out infinite;
}
.cw-loader .cw-l-dots i:nth-child(2) { animation-delay: .18s; }
.cw-loader .cw-l-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes cwlDot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-5px); } }

/* the blinking eye + ripple run on every visit (they're the heartbeat) */
.cw-loader .cw-l-eyew, .cw-loader .cw-l-eyep {
  transform-box: fill-box; transform-origin: center;
  animation: cwlBlink 2.6s ease-in-out infinite 1.5s;
}
@keyframes cwlBlink { 0%, 4%, 100% { transform: scaleY(1); } 2% { transform: scaleY(.06); } }
.cw-loader .cw-l-ripple {
  fill: none; stroke: rgba(255,255,255,.5); stroke-width: 2;
  transform-box: fill-box; transform-origin: center;
  animation: cwlRipple 2.2s ease-out infinite 1.3s;
}
.cw-loader .cw-l-ripple.r2 { animation-delay: 2.1s; }
@keyframes cwlRipple { 0% { transform: scale(.2); opacity: 0; } 12% { opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }

/* entrance choreography — only when the visitor is OK with motion,
   and only the first time this session (.quick skips it) */
@media (prefers-reduced-motion: no-preference) {
  .cw-loader:not(.quick) .cw-l-wave {
    stroke-dasharray: 330; stroke-dashoffset: 330;
    animation: cwlWave 1s ease forwards .1s;
  }
  .cw-loader:not(.quick) .cw-l-drop {
    transform-box: fill-box; transform-origin: center bottom; opacity: 0;
    animation: cwlDrop .65s cubic-bezier(.25, 1.35, .4, 1) forwards .75s;
  }
  .cw-loader:not(.quick) .cw-l-word,
  .cw-loader:not(.quick) .cw-l-dots {
    opacity: 0; animation: cwlFadeUp .5s ease forwards 1.25s;
  }
}
@keyframes cwlWave { to { stroke-dashoffset: 0; } }
@keyframes cwlDrop {
  0% { transform: translateY(-52px) scale(.55); opacity: 0; }
  55% { opacity: 1; }
  75% { transform: translateY(3px) scale(1.06, .9); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes cwlFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .cw-loader .cw-l-dots i, .cw-loader .cw-l-eyew, .cw-loader .cw-l-eyep, .cw-loader .cw-l-ripple { animation: none; }
  .cw-loader .cw-l-ripple { opacity: 0; }
}

/* ---------------- TABLES ---------------- */
table.cw { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.cw th { text-align: left; padding: 12px 14px; background: var(--bg-soft); color: var(--navy); font-size: .78rem; text-transform: uppercase; letter-spacing: 1px; }
table.cw td { padding: 12px 14px; border-bottom: 1px solid var(--line); }

/* ---------------- SMALL SCREENS (phones) ----------------
   Keep every nav control on screen and make wide tables usable:
   tighter paddings, icon-only Easy Mode button, and smooth
   swipe-scrolling on tables instead of clipped columns. */
@media (max-width: 560px) {
  .nav .nav-inner { padding: 10px 12px; gap: 8px; }
  .nav .brand { font-size: 1rem; gap: 6px; }
  .nav .brand svg { width: 36px; height: 20px; }
  .nav .easy-btn { padding: 5px 9px; }
  .nav .easy-btn span { display: none; }          /* icon-only, stays tappable */
  .nav .cw-lang-btn { padding: 4px 8px; }
  .auth-btn { padding: 6px 12px; font-size: .8rem; }
  .account-btn .avatar { width: 30px; height: 30px; font-size: .85rem; }

  table.cw { font-size: .84rem; }
  table.cw th { padding: 9px 9px; font-size: .68rem; letter-spacing: .5px; }
  table.cw td { padding: 9px 9px; }
}

/* ============================================================
   THE BURGER MUST ALWAYS BE REACHABLE
   ------------------------------------------------------------
   THE BUG THIS FIXES. .nav-inner is a single nowrap flex row
   holding, in source order: brand · nav-right(search+burger) ·
   links · Easy Mode · language · cart · Log In. Only .nav-right
   and .auth-slot carried an `order`, so on a phone the row laid
   out as
       brand · Easy · lang · cart · [Log In] · search · burger
   and nothing capped its width. On a 390px iPhone that row wants
   roughly 450px, so the tail — which is the burger — was pushed
   past the right edge of a POSITION:FIXED bar. A fixed bar does
   not scroll, so the menu button was not merely awkward, it was
   physically unreachable. Pinch-zooming out (what Isabella had to
   do on a smaller phone) shrinks the CSS pixel and is the only
   reason it ever came back.

   THE FIX, in two halves:
     1. Here — the burger and the account control are pinned to
        the right and marked flex:0 0 auto so they are the last
        things that can ever be squeezed, and the brand is the
        first (it truncates instead of pushing).
     2. In site.js — cwNavResponsive() physically MOVES the three
        low-priority controls (Easy Mode, language, cart) out of
        the bar and into the burger panel below 900px. Moving the
        real nodes, not cloning them, keeps their ids, their cart
        badge and their event handlers intact.
   ============================================================ */
@media (max-width: 1020px) {
  /* nowrap + min-width:0 = children shrink instead of overflowing */
  .nav .nav-inner { flex-wrap: nowrap; min-width: 0; }

  /* brand gives way first: it ellipsises rather than shoving the
     burger off the end */
  .nav .brand {
    order: 0; flex: 0 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .nav .brand svg { flex: 0 0 auto; }

  /* …and these two never shrink at all */
  .nav .auth-slot { order: 2; margin-left: auto; flex: 0 0 auto; }
  .nav .nav-right { order: 3; flex: 0 0 auto; }
  .nav .burger    { flex: 0 0 auto; }

  /* the utils sit between, and are the ones JS lifts out below 900px */
  .nav .nav-utils { order: 1; display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }

  /* Bigger tap targets. 44px is the WCAG 2.2 target-size minimum
     and the burger was a 36px visual with 6px padding. */
  .nav .burger, .nav .search-btn {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* ...and the burger MUST stack its three bars.
     The rule above turns the button into a flex container, and a
     flex container's default direction is ROW — which laid the
     three <span> bars out side by side and turned the icon into
     three short horizontal dashes in a line. flex-direction:column
     puts them back one above the other. Do not delete this
     alongside the rule above; they only work as a pair. */
  .nav .burger { flex-direction: column; }

  /* the menu panel can be taller than a phone — let it scroll */
  .nav .links.open {
    max-height: calc(100dvh - 64px);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

/* The utils' home inside the burger panel. Empty and invisible
   until cwNavResponsive() moves something into it, so a browser
   with JS off simply keeps the old (still usable) layout. */
.nav .nav-utils-slot { display: none; }
.nav .nav-utils-slot:not(:empty) {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 10px; flex-wrap: wrap;
  width: 100%; padding: 14px 26px 4px; margin-top: 4px;
  border-top: 1px solid var(--line);
}
/* inside the white panel these must not stay white-on-white */
.nav .nav-utils-slot .easy-btn,
.nav .nav-utils-slot .cw-lang-btn,
.nav .nav-utils-slot .cw-cart-btn { color: var(--navy) !important; }
.nav .nav-utils-slot .easy-btn span { display: inline !important; }  /* room for the label again */
.nav .nav-utils-slot .cw-lang-menu { top: auto; bottom: calc(100% + 8px); }

/* ============================================================
   NOTHING MAY EXCEED THE SCREEN
   ------------------------------------------------------------
   Same class of bug as the burger, everywhere else: one element
   wider than the viewport drags the whole page sideways, and on
   a phone the parts that end up off-screen are simply gone. These
   are blanket guards so a single wide table, image or unbroken
   URL can never do it again.

   overflow-x: clip (not hidden) on <html>: hidden would turn the
   root into a scroll container and break every position:sticky
   heading on the site. clip does not. The hidden line before it
   is the fallback for browsers without clip, where nothing is
   sticky-critical anyway.
   ============================================================ */
html { overflow-x: hidden; overflow-x: clip; }
body { overflow-x: clip; }

img, svg, video, canvas, iframe { max-width: 100%; }
img, video { height: auto; }

/* …EXCEPT inside the film. The film is composed at a fixed
   1200 × 800 and scaled as a whole by fit(), so its own children
   are deliberately larger than the screen and must stay that way
   — capping them would break the composition on exactly the small
   phones this section exists to fix. */
.an-wrap img, .an-wrap svg, .an-wrap video, .an-wrap canvas {
  max-width: none;
}

/* long unbroken strings — unit ids, URLs, emails in a narrow cell */
p, li, td, dd, .hint, .mini, .tm-empty { overflow-wrap: break-word; }

/* any wide table gets a swipe rail rather than being clipped */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 760px) {
  /* tables are the commonest offender: give them their own rail */
  table.cw { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  table.cw td, table.cw th { white-space: normal; }

  /* grids that were pinned to a minimum column width */
  .wrap { padding: 0 16px; }
}

/* ---- very small phones (≤380px: iPhone SE, Galaxy A-series) ---- */
@media (max-width: 380px) {
  .nav .nav-inner { padding: 8px 10px; gap: 6px; }
  .nav .brand { font-size: .95rem; }
  .auth-btn { padding: 5px 10px; font-size: .76rem; }
  .btn { padding-left: 16px; padding-right: 16px; }
  h1 { word-break: break-word; }
}

/* ============================================================
   COOKIE CONSENT BANNER + PREFERENCES (GDPR / UK PECR)
   "Accept all" and "Reject all" share one identical style so they
   have equal prominence on the first layer (EDPB/ICO requirement).
   ============================================================ */
.cw-ck {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100000;
  background: var(--bg); border-top: 1px solid var(--line);
  box-shadow: 0 -8px 28px rgba(21, 33, 46, .12);
  padding: 16px 18px; animation: cwCkUp .25s ease-out;
}
@keyframes cwCkUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.cw-ck-in {
  max-width: var(--maxw); margin: 0 auto; display: flex; gap: 18px 26px;
  align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.cw-ck-txt { flex: 1 1 340px; min-width: 260px; }
.cw-ck-txt strong { display: block; color: var(--navy); font-size: 1rem; margin-bottom: 4px; }
.cw-ck-txt span { display: block; color: var(--grey); font-size: .9rem; line-height: 1.5; }
.cw-ck-link { display: inline-block; margin-top: 6px; color: var(--green); font-size: .88rem; font-weight: 700; text-decoration: underline; }
.cw-ck-btns { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.cw-ck-btn {
  font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer;
  border: 2px solid transparent; border-radius: 99px; padding: 11px 22px;
  line-height: 1; transition: filter .15s, background .15s, color .15s;
}
.cw-ck-btn:focus-visible { outline: 3px solid rgba(30, 158, 84, .45); outline-offset: 2px; }
/* Accept all + Reject all — IDENTICAL (equal prominence, no nudging) */
.cw-ck-accept, .cw-ck-reject {
  background: var(--green); color: #fff; border-color: var(--green); min-width: 120px;
}
.cw-ck-accept:hover, .cw-ck-reject:hover { filter: brightness(1.06); }
/* Customise — clearly available but secondary (allowed for a third option) */
.cw-ck-custom { background: transparent; color: var(--navy); border-color: var(--line); }
.cw-ck-custom:hover { border-color: var(--navy); }
/* Save choices — the confirm action inside the preferences panel */
.cw-ck-save { background: var(--navy); color: #fff; border-color: var(--navy); min-width: 120px; }
.cw-ck-save:hover { filter: brightness(1.15); }

/* ---- preferences modal ---- */
.cw-cp-overlay {
  position: fixed; inset: 0; z-index: 100001; background: rgba(21, 33, 46, .55);
  display: flex; align-items: center; justify-content: center; padding: 18px;
  animation: cwCkFade .2s ease-out;
}
@keyframes cwCkFade { from { opacity: 0; } to { opacity: 1; } }
.cw-cp {
  background: var(--bg); border-radius: var(--radius); box-shadow: var(--shadow);
  width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; padding: 22px 24px;
}
.cw-cp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cw-cp-head h2 { color: var(--navy); font-size: 1.25rem; }
.cw-cp-x { background: none; border: none; font-size: 1.7rem; line-height: 1; color: var(--grey); cursor: pointer; padding: 0 4px; }
.cw-cp-x:hover { color: var(--navy); }
.cw-cp-intro { color: var(--grey); font-size: .9rem; line-height: 1.5; margin: 8px 0 6px; }
.cw-cp-note { color: var(--grey); font-size: .82rem; line-height: 1.5; margin: 12px 0 4px; }
.cw-cp-note a, .cw-cp-intro a { color: var(--green); font-weight: 700; }
.cw-cp-row { border-top: 1px solid var(--line); padding: 14px 0; }
.cw-cp-row-h { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.cw-cp-title { color: var(--navy); font-weight: 700; font-size: .98rem; }
.cw-cp-title em { color: var(--grey); font-weight: 600; font-style: normal; font-size: .82rem; }
.cw-cp-desc { color: var(--grey); font-size: .86rem; line-height: 1.5; margin-top: 6px; }
.cw-cp-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; margin-top: 18px; }

/* toggle switch */
.cw-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: none; }
.cw-switch input { opacity: 0; width: 0; height: 0; }
.cw-slider { position: absolute; cursor: pointer; inset: 0; background: #c6ccd4; border-radius: 99px; transition: .2s; }
.cw-slider::before { content: ""; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.cw-switch input:checked + .cw-slider { background: var(--green); }
.cw-switch input:checked + .cw-slider::before { transform: translateX(20px); }
.cw-switch input:disabled + .cw-slider { opacity: .55; cursor: not-allowed; }

@media (max-width: 620px) {
  .cw-ck-in { flex-direction: column; align-items: stretch; }
  .cw-ck-btns { justify-content: stretch; }
  .cw-ck-btns .cw-ck-btn { flex: 1 1 auto; }
  .cw-cp-btns .cw-ck-btn { flex: 1 1 auto; }
}

/* ============================================================
   THE TEAM  —  cards drawn by cwRenderTeam() in site.js
   Used on about.html. The grid works out its own layout from
   how many people are in CW_TEAM, so adding a colleague needs
   no change here.
   ============================================================ */
.cw-team { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: stretch; }
.cw-team.is-solo { grid-template-columns: minmax(0, 720px); justify-content: center; }
.cw-team.is-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; margin: 0 auto; }

.cw-team-card {
  background: #fff; border: 2px solid var(--line); border-radius: 16px;
  padding: 26px; box-shadow: var(--shadow);
  display: flex; gap: 24px; align-items: flex-start;
  transition: border-color .2s, transform .2s;
}
.cw-team-card:hover { border-color: var(--green); transform: translateY(-4px); }

/* The photo slot. Sits to the side of the name and role.
   Drop a square photo in img/team/ and it fills this box. */
.cw-team-photo {
  position: relative; flex: none;
  width: 132px; height: 132px; border-radius: 14px; overflow: hidden;
  background: var(--navy);
}
.cw-team-photo img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 2; }

/* The placeholder that shows until the photo file exists. */
.cw-team-ph {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: linear-gradient(140deg, var(--navy), #24384c);
  border: 2px dashed rgba(79, 217, 138, .45); border-radius: 14px;
}
.cw-team-initials { color: #4fd98a; font-weight: 800; font-size: 1.7rem; letter-spacing: 1px; line-height: 1; }
.cw-team-hint { color: #8fa0b0; font-size: .64rem; text-transform: uppercase; letter-spacing: .5px; text-align: center; padding: 0 8px; }

.cw-team-text { min-width: 0; }
.cw-team-text h3 { color: var(--navy); font-size: 1.2rem; font-weight: 800; line-height: 1.3; }
.cw-team-role { color: var(--green-dark); font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }
.cw-team-loc { color: var(--grey); font-size: .82rem; margin-top: 4px; }
.cw-team-text p { color: var(--grey); font-size: .92rem; margin-top: 12px; }

/* LinkedIn button */
.cw-team-li {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  padding: 8px 15px; border-radius: 99px;
  border: 2px solid var(--line); background: var(--bg-soft);
  color: var(--navy); font-weight: 700; font-size: .84rem;
  transition: background .2s, border-color .2s, color .2s;
}
.cw-team-li svg { width: 16px; height: 16px; fill: #0a66c2; transition: fill .2s; }
.cw-team-li:hover { background: #0a66c2; border-color: #0a66c2; color: #fff; }
.cw-team-li:hover svg { fill: #fff; }
.cw-team-li:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

@media (max-width: 560px) {
  .cw-team-card { flex-direction: column; align-items: center; text-align: center; gap: 18px; }
  .cw-team-li { margin-left: auto; margin-right: auto; }
  .cw-team.is-pair { grid-template-columns: minmax(0, 1fr); }
}