/* ==========================================================================
   Zinger — company site (zinger360.com)
   Shares the Zinger design language with zingerpm.com (navy / orange / cream,
   Lora + Inter) but carries its own structure: a dark hero for the company
   voice, and product rows keyed by maturity rather than a grid of equal cards.
   ========================================================================== */

:root {
  --navy-900: #061837;
  --navy-800: #0a2455;
  --navy-700: #082c7f;   /* brand navy */
  --blue-600: #1656d6;
  --sky-400: #4cc3ff;
  --orange-500: #f78e2a;
  --orange-600: #e97a12;
  --green-600: #1a8f4c;
  --cream: #faf7f2;
  --cream-2: #f3eee4;
  --white: #ffffff;
  --ink: #1c2434;
  --muted: #5b6474;
  --line: #e6e0d4;
  --line-dark: rgba(255, 255, 255, 0.16);

  --font-display: "Lora", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Segoe UI", -apple-system, Helvetica, Arial, sans-serif;

  --radius-lg: 20px;
  --radius-md: 13px;
  --radius-sm: 8px;
  --shadow-card: 0 10px 34px rgba(8, 44, 127, 0.10);
  --shadow-lift: 0 18px 46px rgba(8, 44, 127, 0.16);
  --container: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-600); text-decoration: none; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy-700);
  line-height: 1.18;
  margin: 0 0 0.5em;
  font-weight: 600;
  text-wrap: balance;
}
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: 88px 0; }
.section-alt { background: var(--cream-2); }
.d-none { display: none !important; }

.eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-600);
  margin-bottom: 16px;
}
.section-head { max-width: 720px; margin-bottom: 46px; }
.section-head h2 { font-size: clamp(28px, 3.4vw, 38px); margin-bottom: 14px; }
.section-head p { color: var(--muted); font-size: 18px; margin: 0; }
.section-head.centred { margin-left: auto; margin-right: auto; text-align: center; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  padding: 13px 26px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn-orange { background: var(--orange-500); color: #fff; box-shadow: 0 8px 22px rgba(247, 142, 42, 0.32); }
.btn-orange:hover { background: var(--orange-600); color: #fff; }
.btn-navy { background: var(--navy-700); color: #fff; }
.btn-navy:hover { background: var(--navy-800); color: #fff; }
.btn-ghost { background: transparent; color: var(--navy-700); border-color: rgba(8, 44, 127, 0.3); }
.btn-ghost:hover { border-color: var(--navy-700); }
.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.btn-ghost-light:hover { border-color: #fff; color: #fff; }
.btn-sm { padding: 9px 18px; font-size: 14px; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(6, 24, 55, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-stuck { border-bottom-color: var(--line-dark); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28); }
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
}
.brand img { height: 34px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav a { color: rgba(255, 255, 255, 0.82); font-weight: 500; font-size: 15.5px; }
.site-nav a:hover { color: #fff; }
.site-nav a.is-active {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--orange-500);
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}
.header-cta { flex-shrink: 0; }
.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav-toggle span {
  display: block; width: 24px; height: 2.5px; border-radius: 2px;
  background: #fff; margin: 5px 0;
}

/* --------------------------------------------------------------------------
   Hero — dark, because this is the company speaking, not a product
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 92px 0 96px;
  color: #fff;
  background:
    radial-gradient(900px 460px at 88% -10%, rgba(76, 195, 255, 0.20), transparent 62%),
    radial-gradient(760px 420px at -8% 15%, rgba(247, 142, 42, 0.16), transparent 58%),
    var(--navy-900);
}
.hero .eyebrow { color: var(--orange-500); }
.hero h1 {
  color: #fff;
  font-size: clamp(36px, 4.6vw, 54px);
  margin-bottom: 20px;
  max-width: 16ch;
}
.hero h1 .accent { color: var(--orange-500); }
.hero-lede {
  font-size: 19px;
  color: rgba(255, 255, 255, 0.78);
  max-width: 60ch;
  margin-bottom: 30px;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* The five products, stated as fact in the hero rather than hidden below */
.hero-index {
  margin-top: 54px;
  padding-top: 26px;
  border-top: 1px solid var(--line-dark);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}
.hero-index a { color: rgba(255, 255, 255, 0.9); display: block; }
.hero-index .hx-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 3px;
}
.hero-index .hx-role { font-size: 13.5px; color: rgba(255, 255, 255, 0.6); line-height: 1.45; }
.hero-index a:hover .hx-name { color: var(--sky-400); }

/* --------------------------------------------------------------------------
   Maturity marker — the spine of this site.
   Each product declares where it actually is, so "Register interest" reads as
   a stage rather than a weaker version of a shipped product.
   -------------------------------------------------------------------------- */
.stage {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 999px;
  padding: 5px 14px 5px 11px;
}
.stage::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.stage-live { color: var(--green-600); border-color: rgba(26, 143, 76, 0.32); }
.stage-production { color: var(--navy-700); border-color: rgba(8, 44, 127, 0.26); }
.stage-established { color: var(--blue-600); border-color: rgba(22, 86, 214, 0.26); }
.stage-emerging { color: var(--orange-600); border-color: rgba(233, 122, 18, 0.34); }
.stage-shared { color: var(--muted); }

/* --------------------------------------------------------------------------
   Value band
   -------------------------------------------------------------------------- */
.value-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.value-item { padding-top: 20px; border-top: 3px solid var(--orange-500); }
.value-item:nth-child(2) { border-top-color: var(--navy-700); }
.value-item:nth-child(3) { border-top-color: var(--sky-400); }
.value-item h3 { font-size: 20px; margin-bottom: 8px; }
.value-item p { color: var(--muted); font-size: 16px; margin: 0; }

/* --------------------------------------------------------------------------
   Clients marquee
   -------------------------------------------------------------------------- */
.clients-strip { padding: 44px 0 52px; background: var(--white); border-block: 1px solid var(--line); }
.clients-lead {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 28px;
}
.clients-marquee { overflow: hidden; position: relative; }
.clients-marquee::before, .clients-marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.clients-marquee::before { left: 0; background: linear-gradient(90deg, var(--white), transparent); }
.clients-marquee::after { right: 0; background: linear-gradient(270deg, var(--white), transparent); }
.clients-track { display: flex; align-items: center; gap: 68px; width: max-content; animation: client-scroll 46s linear infinite; }
.clients-marquee:hover .clients-track { animation-play-state: paused; }
/* Full colour, and sized by BOTH height and width: these logos range from
   square (Cisco, Audi) to an 11.6:1 wordmark, so a height-only rule would let
   one brand run away with the strip. object-fit letterboxes within the box, so
   each is sized optically rather than by one dimension. */
.clients-track img {
  height: calc(var(--lh, 46px) * var(--cscale, 1));
  width: auto;
  max-width: calc(210px * var(--cscale, 1));
  object-fit: contain;
}

/* Per-logo heights. These marks range from 1.05:1 (Audi, Premier) to 11.6:1
   (Blackwater), so a single height makes the wordmarks enormous and the square
   ones tiny. Each height is set so the marks occupy a similar optical AREA:
   h = 62 / aspect^0.35, capped so nothing exceeds 210px wide. Sources were also
   trimmed of baked-in padding (Hovione was 82% empty space), so these heights
   are the artwork itself, not its whitespace. */
.clients-track img[src*="image3.png"] { --lh: 38px; }   /* 3.94:1 -> 151x38 */
.clients-track img[src*="image4.png"] { --lh: 50px; }   /* 1.85:1 -> 92x50 */
.clients-track img[src*="image5.png"] { --lh: 39px; }   /* 3.84:1 -> 149x39 */
.clients-track img[src*="image6.png"] { --lh: 61px; }   /* 1.05:1 -> 64x61 */
.clients-track img[src*="image7.png"] { --lh: 36px; }   /* 4.55:1 -> 166x36 */
.clients-track img[src*="image8.png"] { --lh: 46px; }   /* 2.28:1 -> 106x46 */
.clients-track img[src*="image9.jpeg"] { --lh: 43px; }   /* 2.86:1 -> 123x43 */
.clients-track img[src*="image10.png"] { --lh: 61px; }   /* 1.05:1 -> 64x61 */
.clients-track img[src*="image11.png"] { --lh: 18px; }   /* 11.58:1 -> 210x18 */
.clients-track img[src*="image12.jpg"] { --lh: 38px; }   /* 4.10:1 -> 155x38 */
.clients-track img[src*="image13.png"] { --lh: 52px; }   /* 1.70:1 -> 87x52 */
.clients-track img[src*="image14.png"] { --lh: 38px; }   /* 3.94:1 -> 151x38 */
@keyframes client-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .clients-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; gap: 40px; }
}

/* --------------------------------------------------------------------------
   Product rows
   -------------------------------------------------------------------------- */
.products { display: grid; gap: 76px; }
.product-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 56px;
  align-items: center;
}
.product-row.flip .product-copy { order: 2; }
.product-copy .stage { margin-bottom: 16px; }
.product-copy h3 { font-size: clamp(25px, 2.7vw, 31px); margin-bottom: 4px; }
.product-kind {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange-600);
  margin-bottom: 14px;
}
.product-copy > p { color: var(--muted); margin-bottom: 20px; }
.product-points { display: grid; gap: 10px; margin-bottom: 26px; }
.product-points li { display: flex; gap: 11px; align-items: flex-start; font-size: 16px; }
.tick {
  flex: 0 0 auto;
  width: 21px; height: 21px; margin-top: 2px;
  border-radius: 50%;
  background: rgba(8, 44, 127, 0.09);
  display: grid; place-items: center;
}
.tick svg { width: 12px; height: 12px; stroke: var(--navy-700); fill: none; }
.product-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.product-shot {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
}
.product-shot img { width: 100%; }
/* Portrait captures (a phone screen) would otherwise tower over their row —
   cap the frame width so the row stays balanced against the copy beside it. */
.product-shot.portrait { max-width: 330px; margin: 0 auto; }

/* --------------------------------------------------------------------------
   How we work — a real sequence, so it is numbered
   -------------------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; counter-reset: step; }
.step { position: relative; padding-top: 46px; }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0; left: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--orange-600);
}
.step::after {
  content: "";
  position: absolute;
  top: 8px; left: 34px; right: -13px;
  height: 1px;
  background: var(--line);
}
.step:last-child::after { display: none; }
.step h3 { font-size: 19px; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 15.5px; margin: 0; }

/* --------------------------------------------------------------------------
   Portfolio band
   -------------------------------------------------------------------------- */
.band {
  background:
    radial-gradient(700px 340px at 15% 0%, rgba(76, 195, 255, 0.16), transparent 60%),
    var(--navy-800);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 54px 52px;
}
.band h2 { color: #fff; font-size: clamp(26px, 3vw, 34px); max-width: 22ch; }
.band > p { color: rgba(255, 255, 255, 0.78); max-width: 62ch; }
.band-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 36px; }
.band-points h3 { color: var(--sky-400); font-family: var(--font-body); font-size: 15px; font-weight: 700; letter-spacing: 0.04em; margin-bottom: 8px; }
.band-points p { color: rgba(255, 255, 255, 0.74); font-size: 15.5px; margin: 0; }

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */
.cta-band { background: var(--navy-900); color: #fff; padding: 76px 0; text-align: center; }
.cta-band h2 { color: #fff; font-size: clamp(27px, 3.2vw, 37px); max-width: 20ch; margin: 0 auto 14px; }
.cta-band p { color: rgba(255, 255, 255, 0.76); max-width: 56ch; margin: 0 auto 28px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--navy-900); color: rgba(255, 255, 255, 0.7); padding: 56px 0 30px; }
.footer-grid { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; align-items: flex-start; }
.footer-brand img { height: 34px; margin-bottom: 14px; }
.footer-tagline { font-family: var(--font-display); color: #fff; font-size: 17px; margin: 0; }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-links a { color: rgba(255, 255, 255, 0.72); font-size: 15px; }
.footer-links a:hover { color: #fff; }
.footer-social { display: flex; gap: 12px; }
.footer-social a {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line-dark);
  display: grid; place-items: center;
}
.footer-social svg { width: 16px; height: 16px; fill: rgba(255, 255, 255, 0.8); }
.footer-social a:hover { border-color: var(--orange-500); }
.footer-bottom {
  margin-top: 38px; padding-top: 20px;
  border-top: 1px solid var(--line-dark);
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   Cookie notice
   -------------------------------------------------------------------------- */
.cookie-container {
  position: fixed;
  left: 20px; right: 20px; bottom: 20px;
  z-index: 90;
  max-width: 520px;
  margin: 0 auto;
  background: var(--navy-800);
  color: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  padding: 22px 24px;
  display: none;
}
.cookie-container .cookie-text { font-size: 14px; margin-bottom: 14px; }
.cookie-container a { color: var(--sky-400); }
.cookie-container .agree { display: flex; flex-wrap: wrap; gap: 10px; }

/* --------------------------------------------------------------------------
   Inner pages
   -------------------------------------------------------------------------- */
.page-hero { padding: 64px 0 48px; background: var(--navy-900); color: #fff; text-align: center; }
.page-hero h1 { color: #fff; font-size: clamp(30px, 4vw, 44px); max-width: 800px; margin: 0 auto 12px; }
.page-hero p { color: rgba(255, 255, 255, 0.76); font-size: 17px; max-width: 640px; margin: 0 auto; }
.prose-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 38px 40px;
  box-shadow: var(--shadow-card);
}
.prose-card h2 { font-size: 22px; margin-top: 28px; }
.prose-card h2:first-child { margin-top: 0; }
.prose-card ol, .prose-card ul { padding-left: 20px; list-style: revert; }
.prose-card li { margin-bottom: 10px; }

/* --------------------------------------------------------------------------
   Reveal on scroll
   -------------------------------------------------------------------------- */
.reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
  .reveal.is-visible { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero-index { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; }
  .product-row { grid-template-columns: 1fr; gap: 32px; }
  .product-row.flip .product-copy { order: 0; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 34px; }
  .step::after { display: none; }
  .value-grid { grid-template-columns: 1fr; gap: 22px; }
  .band-points { grid-template-columns: 1fr; gap: 22px; }
  .band { padding: 40px 32px; }
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--navy-900);
    border-top: 1px solid var(--line-dark);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 24px 20px;
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 12px 0; width: 100%; }
  .header-cta { display: none; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .section { padding: 62px 0; }
  .hero { padding: 66px 0 72px; }
  .hero-index { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }
  .clients-strip { --cscale: 0.78; }
  .prose-card { padding: 26px 22px; }
}

/* --------------------------------------------------------------------------
   Contact form
   -------------------------------------------------------------------------- */
.contact-section { padding: 66px 0 88px; }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 52px;
  align-items: start;
}
.contact-intro h1 { font-size: clamp(30px, 3.6vw, 42px); margin-bottom: 14px; }
.contact-intro > p { color: var(--muted); font-size: 18px; }
.contact-aside {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 18px;
}
.contact-aside h2 {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
}
.contact-aside p { margin: 0; font-size: 15.5px; color: var(--muted); }
.contact-aside a { color: var(--navy-700); font-weight: 500; }

.contact-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 34px 34px 30px;
}
.contact-card h2 { font-size: 24px; margin-bottom: 6px; }
.contact-card .card-note { color: var(--muted); font-size: 15px; margin-bottom: 24px; }

.form-group { margin-bottom: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-control {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus {
  outline: none;
  border-color: var(--navy-700);
  box-shadow: 0 0 0 3px rgba(8, 44, 127, 0.12);
}
textarea.form-control { min-height: 118px; resize: vertical; }
select.form-control { appearance: none; background-image: none; }

.form-check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 18px; }
.form-check input { margin-top: 4px; flex: 0 0 auto; }
.form-check label { font-size: 14.5px; color: var(--muted); }
.form-check a { color: var(--navy-700); }

.error { display: block; font-size: 13.5px; color: #c0392b; margin-top: 6px; }
.success { display: block; font-size: 15px; color: var(--green-600); font-weight: 600; }
.form-status { margin-bottom: 18px; }
.form-status .success, .form-status .error {
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  margin-top: 0;
}
.form-status .success { background: rgba(26, 143, 76, 0.1); }
.form-status .error { background: rgba(192, 57, 43, 0.09); }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.loader-wrap { display: none; }
.loader-wrap.loader {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  background: rgba(6, 24, 55, 0.35);
  z-index: 120;
}
.loader-wrap.loader .loader-div {
  width: 42px; height: 42px;
  border: 3px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--orange-500);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 620px) {
  .form-row { grid-template-columns: 1fr; }
  .contact-card { padding: 24px 22px; }
}

/* --------------------------------------------------------------------------
   Policy pages — styles the legacy markup that carries the legal text, so the
   wording is re-presented rather than rewritten.
   -------------------------------------------------------------------------- */
.inner-banner {
  background: var(--navy-900);
  color: #fff;
  padding: 56px 24px 44px;
  text-align: center;
}
.inner-banner + .policy-section { padding-top: 44px; }
.banner-title {
  color: #fff;
  font-size: clamp(26px, 3.4vw, 38px);
  max-width: 860px;
  margin: 0 auto 10px;
}
.inner-banner p { color: rgba(255, 255, 255, 0.72); margin: 0; font-size: 15.5px; }

.policy-section { padding: 56px 0 24px; }
.policy-section .container { max-width: 880px; }
.policy-content {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 26px 30px;
  margin-bottom: 20px;
  box-shadow: 0 4px 18px rgba(8, 44, 127, 0.05);
}
.policy-content .headings { font-size: 21px; margin-bottom: 12px; }
.policy-content h3 { font-size: 17px; margin: 20px 0 8px; }
.policy-content p { font-size: 16px; color: var(--ink); }
.policy-content p:last-child { margin-bottom: 0; }
.policy-content ul, .policy-content ol { padding-left: 22px; list-style: revert; margin-bottom: 1em; }
.policy-content li { margin-bottom: 8px; font-size: 16px; }
.policy-content a { color: var(--navy-700); text-decoration: underline; }
.policy-content address { color: var(--muted); }
.policy-content table { width: 100%; border-collapse: collapse; margin-bottom: 1em; }
.policy-content th, .policy-content td {
  border: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
  font-size: 15px;
  vertical-align: top;
}
.policy-content th { background: var(--cream-2); font-weight: 600; }
.policy-wrap { overflow-x: auto; }

@media (max-width: 620px) {
  .policy-content { padding: 20px 18px; }
  .inner-banner { padding: 42px 20px 34px; }
}

/* --------------------------------------------------------------------------
   Testimonials carousel
   Mirrors zingerpm.com. A continuous ticker was rejected: a 50-word quote
   sliding past is unreadable and moving text needs a pause control for WCAG
   2.2.2. This dwells on each pair instead, scroll-snapped so touch swipe is
   native, and scales to any number of quotes.
   NOTE: the cards must NOT carry .reveal — cards outside the track's visible
   width never intersect the viewport, so they would stay at opacity 0 forever.
   The .reveal sits on the .tcarousel wrapper instead.
   -------------------------------------------------------------------------- */
.tcarousel { position: relative; }
.tcarousel-track {
  display: flex;
  gap: 26px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.tcarousel-track::-webkit-scrollbar { display: none; }
.tcarousel-track:focus-visible {
  outline: 2px solid var(--orange-500);
  outline-offset: 6px;
  border-radius: var(--radius-md);
}
.tcarousel-track > .testimonial-card {
  flex: 0 0 calc((100% - 26px) / 2);
  scroll-snap-align: start;
}

.tcarousel-dots { display: flex; justify-content: center; gap: 10px; margin-top: 26px; }
.tcarousel-dots button {
  width: 9px; height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(8, 44, 127, 0.22);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.tcarousel-dots button:hover { background: rgba(8, 44, 127, 0.42); }
.tcarousel-dots button[aria-current="true"] { background: var(--orange-500); transform: scale(1.35); }
.tcarousel-dots button:focus-visible { outline: 2px solid var(--orange-500); outline-offset: 3px; }
.tcarousel-dots:empty { display: none; }
.testimonial-card {
  position: relative;
  margin: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px 32px 28px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}
.testimonial-card .quote-mark {
  font-family: var(--font-display);
  font-size: 62px;
  line-height: 1;
  color: var(--orange-500);
  opacity: 0.5;
  display: block;
  margin-bottom: -14px;
}
.testimonial-card blockquote {
  margin: 0 0 20px;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink);
  flex: 1 1 auto;
}
.testimonial-card figcaption {
  font-weight: 600;
  font-size: 15px;
  color: var(--navy-700);
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.testimonial-card figcaption span {
  display: block;
  font-weight: 500;
  font-size: 14px;
  color: var(--muted);
  margin-top: 2px;
}

@media (max-width: 860px) {
  .tcarousel-track > .testimonial-card { flex: 0 0 100%; }
}

/* --------------------------------------------------------------------------
   Product page (window-door.html)
   -------------------------------------------------------------------------- */
.product-hero { padding: 62px 0 58px; }
.product-hero .stage { margin-bottom: 18px; background: rgba(255, 255, 255, 0.1); border-color: var(--line-dark); color: #fff; }
.product-hero h1 { max-width: 20ch; }
.product-hero p { margin-bottom: 26px; }

/* Six-stage journey: a real sequence, so it is numbered. Auto-fit rather than a
   fixed column count so it goes 6 / 3 / 2 / 1 as the viewport narrows without
   needing a breakpoint for each. */
.journey {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 30px 26px;
  counter-reset: stage;
  list-style: none;
  padding: 0;
}
.journey li { position: relative; padding-top: 44px; }
.journey li::before {
  counter-increment: stage;
  content: counter(stage, decimal-leading-zero);
  position: absolute;
  top: 0; left: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--orange-600);
}
.journey li::after {
  content: "";
  position: absolute;
  top: 8px; left: 34px; right: -13px;
  height: 1px;
  background: var(--line);
}
.journey li:last-child::after { display: none; }
.journey h3 { font-size: 19px; margin-bottom: 8px; }
.journey p { color: var(--muted); font-size: 15.5px; margin: 0; }

/* The connecting rule only makes sense between items on the same row; at the
   wrap points it would run off into nothing. */
@media (max-width: 1100px) {
  .journey li::after { display: none; }
}

/* Elevations feature + capability areas (window-door.html) */
.elev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(255px, 100%), 1fr));
  gap: 30px 34px;
}
.elev-point { padding-top: 18px; border-top: 3px solid var(--orange-500); }
.elev-point:nth-child(2) { border-top-color: var(--navy-700); }
.elev-point:nth-child(3) { border-top-color: var(--sky-400); }
.elev-point:nth-child(4) { border-top-color: var(--green-600); }
.elev-point h3 { font-size: 20px; margin-bottom: 8px; }
.elev-point p { color: var(--muted); font-size: 16px; margin: 0; }
.elev-note {
  margin: 40px auto 0;
  max-width: 680px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.5;
  color: var(--navy-700);
}

.area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px;
}
.area-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 26px 26px 24px;
  box-shadow: var(--shadow-card);
}
.area-card h3 {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-600);
  margin-bottom: 10px;
}
.area-card p { color: var(--ink); font-size: 16px; margin: 0; }

/* Document outputs (window-door.html) */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 26px; }
.doc-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 30px 28px 26px;
  box-shadow: var(--shadow-card);
  border-top: 3px solid var(--navy-700);
}
.doc-card:nth-child(2) { border-top-color: var(--orange-500); }
.doc-card:nth-child(3) { border-top-color: var(--sky-400); }
.doc-card h3 { font-size: 21px; margin-bottom: 12px; }
.doc-card p { color: var(--muted); font-size: 15.5px; }
.doc-card p:last-child { margin-bottom: 0; }
.doc-card .doc-kicker {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--navy-700);
  font-weight: 500;
}

/* Elevation before/after. A draggable slider would read better still, but a
   labelled pair needs no JS, works on touch, and cannot half-fail. */
.elev-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-bottom: 46px;
}
.elev-shot { margin: 0; position: relative; }
.elev-shot img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
}
.elev-tag {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(6, 24, 55, 0.82);
  border-radius: 999px;
  padding: 5px 13px;
  backdrop-filter: blur(4px);
}
.elev-tag.is-after { background: var(--orange-600); }
.elev-shot figcaption {
  margin-top: 12px;
  font-size: 14.5px;
  color: var(--muted);
}

/* The product itself, so the feature reads as a tool and not a rendering service */
.elev-app, .cal-figure { margin: 46px 0 0; }
.elev-app img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
}
/* Pipeline: the checklist row sits under the board figure, so it needs its own
   top gap - .product-row has none of its own. */
.pipeline-row { margin-top: 70px; }

/* Schedule: rather than crossfading two screenshots, the booking pill is a real
   sprite with an alpha channel sitting on a "clean plate" of the calendar that
   has BOTH slots empty - so what you see is the actual UI element being dragged.
   Offsets are percentages of the plate, so they stay correct at every width. */
.map-figure { max-width: 1016px; margin-left: auto; margin-right: auto; }
.map-stage { position: relative; }
/* Scoped to .map-plate, not `.map-figure > img` - that would also frame the
   popup sprite with a border and shadow of its own. */
.map-plate {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
}

/* Clicking a pin, on a loop. Everything is positioned as a percentage of the
   map, and the popup's offset is the real anchor measured off its own
   screenshot (the marker sits 122x142 inside the card), so it lands on the
   Carrigaline pin exactly where Leaflet would put it. */
.map-pop {
  position: absolute;
  left: 52.953%;
  top: 25.148%;
  width: 24.114%;
  height: auto;
  opacity: 0;
  transform-origin: 50% 118%;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .28));
  animation: map-pop 11s ease-in-out infinite;
}
.map-cursor {
  position: absolute;
  left: 70.079%;
  top: 55.030%;
  width: 1.3%;
  height: auto;
  opacity: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
  animation: map-cursor 11s ease-in-out infinite;
}
.map-ping {
  position: absolute;
  left: 63.681%;
  top: 44.231%;
  width: 2.559%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid rgba(109, 168, 26, .95);
  opacity: 0;
  animation: map-ping 11s ease-out infinite;
}

@keyframes map-pop {
  0%,   12% { opacity: 0; transform: scale(.72); }
  19%,  80% { opacity: 1; transform: scale(1); }
  86%, 100% { opacity: 0; transform: scale(.72); }
}
@keyframes map-cursor {
  0%        { left: 70.079%; top: 55.030%; opacity: 0; transform: scale(1); }
  4%        { left: 70.079%; top: 55.030%; opacity: 1; transform: scale(1); }
  11%       { left: 64.961%; top: 46.154%; opacity: 1; transform: scale(1); }
  13%       { left: 64.961%; top: 46.154%; opacity: 1; transform: scale(.78); }
  16%,  80% { left: 64.961%; top: 46.154%; opacity: 1; transform: scale(1); }
  90%, 100% { left: 70.079%; top: 55.030%; opacity: 0; transform: scale(1); }
}
@keyframes map-ping {
  0%,   11% { opacity: 0;   transform: scale(.4); }
  13%       { opacity: .95; transform: scale(.55); }
  24%, 100% { opacity: 0;   transform: scale(2.4); }
}

@media (prefers-reduced-motion: reduce) {
  .map-pop { animation: none; opacity: 1; transform: none; }
  .map-cursor, .map-ping { animation: none; opacity: 0; }
}

.cal-stage { position: relative; }
.cal-plate {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
}
.cal-drag {
  position: absolute;
  left: 57.391%;
  top: 49.878%;
  width: 12.899%;
  animation: cal-move 9s cubic-bezier(.65, 0, .35, 1) infinite;
}
.cal-drag > img {
  display: block;
  width: 100%;
  height: auto;
  animation: cal-lift 9s cubic-bezier(.65, 0, .35, 1) infinite;
}
.cal-cursor {
  position: absolute;
  left: 62%;
  top: 46%;
  width: 13px;
  height: auto;
}

@keyframes cal-move {
  0%,  18% { left: 57.391%; top: 49.878%; }
  40%, 66% { left: 2.101%;  top: 64.878%; }
  88%      { left: 57.391%; top: 49.878%; }
  100%     { left: 57.391%; top: 49.878%; }
}
/* Lifts while it travels and settles on each drop. A transparent drop-shadow
   rather than `none` so the shadow interpolates instead of snapping. */
@keyframes cal-lift {
  0%,  14% { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)); }
  22%, 38% { transform: scale(1.05); filter: drop-shadow(0 5px 9px rgba(0, 0, 0, .32)); }
  46%, 62% { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)); }
  70%, 86% { transform: scale(1.05); filter: drop-shadow(0 5px 9px rgba(0, 0, 0, .32)); }
  94%,100% { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)); }
}

@media (prefers-reduced-motion: reduce) {
  .cal-drag, .cal-drag > img { animation: none; }
}

/* A six-column board cannot be legible on a phone: shrunk to fit, the card text
   is about 3px. So below the breakpoint it keeps a readable size and pans
   instead. Note .reveal stays on the <figure>, never on anything inside the
   scroller - a child wider than the viewport never intersects and would stay
   invisible forever. */
.board-scroll { border-radius: var(--radius-md); }
@media (max-width: 860px) {
  .board-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line);
  }
  /* The pipeline figure holds a bare <img>; the calendar holds a positioned
     stage, which is what must carry the width - its plate stays at 100% of it
     so the drag sprite's percentage offsets still land on the right cells. */
  .board-scroll > img {
    width: auto;
    max-width: none;
    min-width: 1150px;
  }
  .board-scroll > .cal-stage { min-width: 1150px; }
  .board-scroll > img,
  .board-scroll > .cal-stage > .cal-plate {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

.elev-app figcaption,
.cal-figure figcaption {
  margin: 14px auto 0;
  max-width: 640px;
  text-align: center;
  font-size: 14.5px;
  color: var(--muted);
}

@media (max-width: 760px) {
  .elev-compare { grid-template-columns: 1fr; }
}

/* Product hero: copy left, product shot right */
.product-hero { text-align: left; }
.product-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: 54px;
  align-items: center;
}
.product-hero-copy h1 { max-width: 18ch; margin-bottom: 18px; }
.product-hero-copy p { margin-bottom: 26px; max-width: 54ch; }
.product-hero-shot img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.34);
}

/* Single column until the home-screen shot lands beside it */
@media (max-width: 900px) {
  .product-hero { text-align: center; }
  .product-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .product-hero-copy h1, .product-hero-copy p { max-width: none; }
  .product-hero-copy .hero-ctas { justify-content: center; }
}