/* ==========================================================================
   Delgroce Holdings — Shared Design System  (v2 "Slate & Emerald" theme)
   Colour tokens sampled pixel-exact from the approved reference design:
   slate-navy base #0F172A, emerald #00D976, cyan #00D9F4,
   teal glow lower-left, green glow right, serif display headlines.
   ========================================================================== */

:root {
  /* --- Brand colour tokens (sampled from approved reference) --- */
  --color-green: #00D976;        /* emerald text / accents  */
  --color-green-bright: #00D946; /* nav active, CTAs        */
  --color-green-deep: #04A85C;
  --color-cyan: #00D9F4;         /* cyan display accent     */
  --color-cyan-deep: #0891B2;
  --color-grey: #7A818B;
  --color-grey-light: #BCC0C5;   /* small body text         */

  /* legacy aliases so older markup keeps working */
  --color-blue: #00D9F4;
  --color-blue-dark: #0891B2;

  /* --- Backgrounds (sampled) --- */
  --bg-base: #0F172A;            /* header + page base      */
  --bg-hero: #121B2D;
  --glow-teal: #135B73;          /* lower-left glow         */
  --glow-green: #16433A;         /* right-side glow         */

  /* --- Surfaces --- */
  --surface-base: #0C1322;
  --surface-raised: #141E33;
  --surface-raised-hover: #182640;
  --border-subtle: rgba(148, 163, 184, 0.14);
  --border-strong: rgba(148, 163, 184, 0.30);

  /* --- Text --- */
  --text-primary: #FFFFFF;
  --text-secondary: #BCC0C5;
  --text-muted: rgba(188, 192, 197, 0.62);
  --text-on-accent: #06281A;

  /* --- Typography --- */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* --- 8-point spacing system --- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-16: 128px;

  /* --- Radius --- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 200ms;
  --dur-base: 500ms;
  --dur-slow: 900ms;

  --max-width: 1280px;
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-base);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* Vehicle card photo — consistent landscape shape at every breakpoint.
   `height: auto` is required: an <img> with both width/height HTML attributes
   gets an implicit CSS height from that attribute, which silently overrides
   `aspect-ratio` (aspect-ratio only computes a dimension left as `auto`).
   Without it these boxes render at the attribute's raw height regardless of
   the actual rendered width — square or portrait instead of landscape. */
.vehicle-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  background: #E9EEF2; /* matches the light backdrop baked into the processed image */
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; }

/* ==========================================================================
   Typography — serif display, sans everything else
   ========================================================================== */

h1, h2 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0;
}

h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
}

h1 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 3.5vw, 2.9rem); }
h3 { font-size: 1.35rem; }

.accent-green { color: var(--color-green); }
.accent-cyan { color: var(--color-cyan); }
.accent-gradient {
  background: linear-gradient(90deg, var(--color-green) 0%, var(--color-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-green);
}

.lede {
  font-size: 1.15rem;
  color: var(--text-secondary);
  font-weight: 400;
  max-width: 720px;
}

.text-muted { color: var(--text-muted); }

/* ==========================================================================
   Layout
   ========================================================================== */

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.section {
  padding: var(--space-12) 0;
  border-top: 1px solid var(--border-subtle);
}

.section-head {
  max-width: 680px;
  margin: 0 auto var(--space-8);
  text-align: center;
}

.section-head h2 { margin-top: var(--space-2); }
.section-head p { margin-top: var(--space-2); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--color-green-bright);
  color: var(--text-on-accent);
}
.btn-primary:hover {
  background: var(--color-green);
  box-shadow: 0 6px 24px rgba(0, 217, 118, 0.28);
}

.btn-outline {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn-outline:hover { border-color: var(--color-cyan); background: rgba(0, 217, 244, 0.07); }

.btn svg { width: 18px; height: 18px; transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), background var(--dur-base);
}

.card:hover {
  border-color: var(--border-strong);
  background: var(--surface-raised-hover);
  transform: translateY(-4px);
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
  background: rgba(0, 217, 118, 0.10);
  color: var(--color-green);
}
.card-icon svg { width: 24px; height: 24px; }

.card h3 { margin-bottom: var(--space-1); }
.card p { color: var(--text-secondary); font-size: 0.95rem; }

.card-status {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  margin-top: var(--space-2);
}
.card-status.is-live { background: rgba(0, 217, 118, 0.14); color: var(--color-green); }
.card-status.is-soon { background: rgba(148, 163, 184, 0.16); color: var(--color-grey-light); }
.card-status.is-rented { background: rgba(245, 166, 35, 0.16); color: #F5A623; }
.card-status.is-maintenance { background: rgba(255, 107, 107, 0.16); color: #FF6B6B; }

/* Division cards (Holdings homepage "Our Portfolio" grid) — a scoped
   variant, not a change to the base .card used everywhere else on the
   site. Grid's default align-items:stretch already equalises the outer
   card heights; the badge/button misalignment came from there being
   nothing to equalise the *internal* layout when description text length
   differs. .division-card-body absorbs the leftover space via flex:1, so
   .division-card-footer (badge + button) always lands at the same Y
   position regardless of how long each card's paragraph is. Cards with no
   real CTA (Deliveries, Future Divisions) get an invisible .btn-slot
   placeholder — same height as a real button — purely so the badge above
   it still lines up with the cards that do have one. */
.division-card { display: flex; flex-direction: column; }
.division-card-body { flex: 1 1 auto; }
.division-card-footer { margin-top: var(--space-3); }
.division-card-footer .card-status { display: inline-block; margin-top: 0; }
.division-card-footer .btn-slot { margin-top: var(--space-3); }
.division-card-footer .btn-slot .btn { padding: 12px 22px; font-size: 0.88rem; }
.division-card-footer .btn-slot.is-placeholder { visibility: hidden; }

/* ==========================================================================
   Header / Nav
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border-subtle);
}

/* Part M §20.2 — one alignment model for every header.
   The brand takes the leftover space (margin-right:auto), so every other gap
   in the row is a fixed, deliberate figure rather than "whatever flexbox had
   left over" — which is what `justify-content: space-between` was producing
   and what made the row look off balance at some widths and fine at others.
   Everything is align-items:center against a fixed 96px row, so the logo,
   the nav text and the contact icons share one vertical centre line. */
.site-header .container {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: 96px;
}

.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.brand img { height: 44px; width: auto; }

.brand-stack {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.brand-stack .brand-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.06em;
  color: var(--text-primary);
}
.brand-stack .brand-name .dim { color: var(--color-grey-light); }
.brand-stack .brand-name .lift { color: var(--color-green); }
.brand-stack .brand-sub {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.34em;
  color: var(--color-cyan);
  text-transform: uppercase;
}

/* legacy inline brand word */
.brand-word {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}
.brand-word span { color: var(--color-green); }

.nav-links { display: flex; align-items: center; gap: var(--space-5); }
/* inline-flex + the 44px minimums are the §20.2 target-size rule: a nav link
   is a 23px-tall line of text, which is a legitimate pointer target on a
   mouse and a poor one on a touchscreen. The box grows, the type and the
   visible spacing do not. */
.nav-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-primary);
  transition: color var(--dur-fast);
}
.nav-links a:hover, .nav-links a.is-active { color: var(--color-green-bright); }

/* Part M §20.1 — the contact strip is icon buttons, not text strings. The
   full number and address live in the footer; the header only has to offer
   the action. Colour is var(--color-green), never a literal hex, so the
   body.theme-cyber override re-themes these to cyan for free. */
.header-contact {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.header-contact .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44×44 is the §20.2 minimum target size, not a visual choice. */
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--color-green);
  background: transparent;
  transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);
}
.header-contact .icon-btn svg { width: 19px; height: 19px; }
.header-contact .icon-btn:hover,
.header-contact .icon-btn:focus-visible {
  color: var(--text-on-accent);
  background: var(--color-green);
  border-color: var(--color-green);
}

/* Right-hand cluster: contact icons + whatever CTA a layout carries (quote
   button, cart, hamburger). Grouping them means the nav-to-actions gap is a
   single fixed value on every layout. */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.nav-cta { display: flex; align-items: center; gap: var(--space-2); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-primary);
  width: 40px; height: 40px;
}

/* ==========================================================================
   Hero — dark slate with teal glow lower-left, green glow right
   ========================================================================== */

.hero {
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding-top: 96px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 55% at 8% 100%, rgba(19, 91, 115, 0.55), transparent 70%),
    radial-gradient(ellipse 55% 65% at 96% 78%, rgba(0, 217, 118, 0.20), transparent 70%),
    radial-gradient(ellipse 50% 50% at 85% 100%, rgba(22, 67, 58, 0.9), transparent 75%),
    linear-gradient(180deg, var(--bg-base) 0%, var(--bg-hero) 100%);
}

.hero-inner {
  max-width: 980px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  text-align: center;
}

.hero-inner .lede { margin-left: auto; margin-right: auto; }

.hero-sub {
  font-size: 1.02rem;
  color: var(--text-secondary);
  margin-top: var(--space-3);
}

.hero-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-5);
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 720px) {
  .hero { min-height: auto; padding: 150px 0 var(--space-8); }
}

/* ==========================================================================
   Mobile nav panel
   ========================================================================== */

.mobile-nav {
  display: none;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3) var(--space-3);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-base);
}
.mobile-nav a {
  padding: 12px 0;
  font-size: 0.95rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
}

@media (max-width: 900px) {
  .mobile-nav.is-open { display: flex; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-8) 0 var(--space-4);
  color: var(--text-muted);
  font-size: 0.9rem;
  background: var(--surface-base);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.footer-grid h4 {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.footer-grid ul li { margin-bottom: var(--space-1); }
.footer-grid ul li a:hover { color: var(--color-green); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
  gap: var(--space-2);
}

.footer-bottom .brand img { height: 28px; }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Utility grids
   ========================================================================== */

.grid { display: grid; gap: var(--space-3); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.stat { text-align: center; }
.stat .num {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--color-green);
}
.stat .num.alt { color: var(--color-cyan); }
.stat .label { color: var(--text-muted); font-size: 0.85rem; margin-top: 4px; }

/* ==========================================================================
   Form fields (shared component)
   ========================================================================== */

.field { margin-bottom: var(--space-3); }

.field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 0.95rem;
  color: var(--text-primary);
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.field textarea { resize: vertical; min-height: 120px; }

.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23BCC0C5' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 42px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-green);
  box-shadow: 0 0 0 3px rgba(0, 217, 118, 0.16);
}

.field input::placeholder,
.field textarea::placeholder { color: var(--text-muted); }

.field input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.8);
  cursor: pointer;
}

.hp-field {
  display: none !important;
}

/* ==========================================================================
   Feature list
   ========================================================================== */

.feature-list { margin-top: var(--space-2); }

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  padding: 6px 0;
}

.feature-list li svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 4px;
  color: var(--color-green);
}

/* ==========================================================================
   Step flow
   ========================================================================== */

.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
}

.step {
  position: relative;
  padding: var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.step-num {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--color-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(0, 217, 118, 0.4);
  background: rgba(0, 217, 118, 0.08);
  margin-bottom: var(--space-2);
}

.step h3 { font-size: 1rem; margin-bottom: 4px; }
.step p { font-size: 0.85rem; color: var(--text-secondary); }

@media (max-width: 1080px) { .steps { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .steps { grid-template-columns: 1fr; } }

/* ==========================================================================
   Footer wordmark sizing
   ========================================================================== */

.footer-wordmark { width: 128px; height: auto; }
.footer-bottom .footer-wordmark { width: 96px; }

/* ==========================================================================
   WhatsApp floating button
   ========================================================================== */

.whatsapp-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  /* Clips hit-testing to the visible circle, not just its paint — the square anchor box's
     transparent corners no longer swallow clicks meant for whatever sits behind them. */
  clip-path: circle(50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: transform var(--dur-fast) var(--ease-out);
}
.whatsapp-float:hover { transform: scale(1.08); }
.whatsapp-float svg { width: 30px; height: 30px; }

@media (max-width: 600px) {
  .whatsapp-float {
    width: 46px;
    height: 46px;
    right: 14px;
    bottom: 14px;
  }
  .whatsapp-float svg { width: 24px; height: 24px; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Part M §20.1 — the contact strip used to be hidden below 1180px because it
   was two long text strings. As two 44px icon buttons it costs 96px, so it
   now stays visible at every width: on a phone "call us" is the single most
   useful control in the header. */

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
  .nav-toggle { display: flex; align-items: center; justify-content: center; }
}

@media (max-width: 720px) {
  .nav-cta .btn { display: none; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .section { padding: var(--space-8) 0; }
  .site-header .container { height: 80px; }
  .site-header .container { gap: var(--space-2); }
}

/* Narrow phones: the brand wordmark yields space before anything is dropped —
   the icon buttons stay at their full 44px target size. */
@media (max-width: 420px) {
  .brand-stack .brand-name { font-size: 0.92rem; }
  .brand img { height: 38px; }
  .header-actions { gap: var(--space-1); }
}

/* ==========================================================================
   v2.1 additions — components for the full multi-page site
   ========================================================================== */

/* Sub-page hero (shorter than homepage hero) */
.page-hero {
  min-height: 56vh;
  display: flex;
  align-items: center;
  padding-top: 96px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 55% at 8% 100%, rgba(19, 91, 115, 0.5), transparent 70%),
    radial-gradient(ellipse 55% 65% at 96% 78%, rgba(0, 217, 118, 0.18), transparent 70%),
    linear-gradient(180deg, var(--bg-base) 0%, var(--bg-hero) 100%);
}
.page-hero .hero-inner { max-width: 880px; }
@media (max-width: 720px) { .page-hero { min-height: auto; padding: 140px 0 var(--space-8); } }

/* Media block atop solution cards (swap the gradient for a real photo later) */
.card-media {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(140deg, #16433A 0%, #0E2A3E 55%, #135B73 100%);
  color: rgba(0, 217, 118, 0.65);
}
.card-media svg { width: 72px; height: 72px; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-flush { padding: 0; overflow: hidden; }
.card-flush .card-body { padding: var(--space-4); }

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-green);
  margin-top: var(--space-2);
  transition: gap var(--dur-fast);
}
.link-more:hover { gap: 12px; }
.link-more svg { width: 16px; height: 16px; }

/* Circular icon for "Why Choose" rows */
.icon-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-2);
  background: rgba(0, 217, 118, 0.12);
  border: 1px solid rgba(0, 217, 118, 0.35);
  color: var(--color-green);
}
.icon-circle svg { width: 28px; height: 28px; }
.why-item { text-align: center; }
.why-item h3 { font-size: 1.05rem; margin-bottom: 6px; }
.why-item p { color: var(--text-secondary); font-size: 0.9rem; }

/* Green gradient CTA band with dark text */
.cta-band {
  background: linear-gradient(100deg, var(--color-green) 0%, #00C9A7 55%, var(--color-cyan) 100%);
  color: #06281A;
  padding: var(--space-10) 0;
  text-align: center;
}
.cta-band h2 { color: #06281A; }
.cta-band p { color: rgba(6, 40, 26, 0.8); margin-top: var(--space-2); font-size: 1.05rem; }
.cta-band .hero-actions { justify-content: center; }
.btn-dark {
  background: var(--bg-base);
  color: #FFFFFF;
}
.btn-dark:hover { background: #1A2540; box-shadow: 0 6px 24px rgba(15, 23, 42, 0.4); }
.btn-dark-outline {
  background: transparent;
  color: #06281A;
  border-color: rgba(6, 40, 26, 0.5);
}
.btn-dark-outline:hover { border-color: #06281A; background: rgba(6, 40, 26, 0.08); }

/* 4-column step flow */
.steps-4 { grid-template-columns: repeat(4, 1fr); }
.step-big-num {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.3rem; font-weight: 700;
  background: var(--color-green-bright);
  color: var(--text-on-accent);
  margin-bottom: var(--space-2);
}
@media (max-width: 1080px) { .steps-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .steps-4 { grid-template-columns: 1fr; } }

/* 3-column step flow (Delgroce Shield on /cyber-security) */
.steps-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px)  { .steps-3 { grid-template-columns: 1fr; } }

/* Price / earnings cards */
.price-card { text-align: center; }
.price-card .price {
  font-family: var(--font-heading);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--color-green);
  margin-top: var(--space-1);
}
.price-card .price small { font-size: 0.85rem; font-weight: 500; color: var(--text-muted); }
.price-card .models { color: var(--text-muted); font-size: 0.85rem; margin-top: 6px; }

/* Legal / policy prose pages */
.legal-body {
  max-width: 800px;
  margin: 0 auto;
  color: var(--text-secondary);
  font-size: 0.97rem;
}
.legal-body h2 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--text-primary);
  margin: var(--space-6) 0 var(--space-2);
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body p { margin-bottom: var(--space-2); }
.legal-body ul { list-style: disc; padding-left: var(--space-4); margin-bottom: var(--space-2); }
.legal-body ul li { margin-bottom: 6px; }
.legal-body .legal-updated {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: var(--space-6);
}
.legal-body a { color: var(--color-green); }

/* Social icons */
.social-row { display: flex; gap: 12px; margin-top: var(--space-2); }
.social-row a {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.social-row a:hover { color: var(--color-green); border-color: var(--color-green); }
.social-row svg { width: 17px; height: 17px; }

/* ==========================================================================
   v3 additions — wizard, tabs, tables, hero scroll cue
   ========================================================================== */

.scroll-cue {
  position: absolute;
  bottom: 40px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: rgba(255,255,255,0.45);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-family: var(--font-heading);
}
.scroll-cue::after {
  content: '';
  width: 1px; height: 44px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.45), transparent);
}

.checkline { display: flex; align-items: flex-start; gap: 14px; margin-top: var(--space-2); }
.checkline svg { width: 22px; height: 22px; color: var(--color-green); flex-shrink: 0; margin-top: 3px; }
.checkline h3 { font-size: 0.98rem; margin-bottom: 2px; }
.checkline p { color: var(--text-secondary); font-size: 0.85rem; }

/* Wizard */
.wizard-progress {
  display: flex; align-items: center; justify-content: center;
  gap: 0;
  margin: 0 auto var(--space-6);
  max-width: 560px;
}
.wizard-progress .wp-step {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-heading);
  font-size: 0.78rem; font-weight: 600;
  color: var(--text-muted);
}
.wizard-progress .wp-dot {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong);
  background: var(--surface-raised);
  color: var(--text-secondary);
  font-size: 0.85rem;
}
.wizard-progress .wp-step.is-current .wp-dot,
.wizard-progress .wp-step.is-done .wp-dot {
  background: var(--color-green-bright);
  border-color: var(--color-green-bright);
  color: var(--text-on-accent);
}
.wizard-progress .wp-step.is-current { color: var(--text-primary); }
.wizard-progress .wp-bar {
  flex: 1; height: 2px;
  min-width: 32px;
  background: var(--border-subtle);
  margin: 0 10px;
}
.wizard-progress .wp-bar.is-done { background: var(--color-green-bright); }
.wizard-progress .wp-label { display: none; }
@media (min-width: 720px) { .wizard-progress .wp-label { display: inline; } }

.wizard-panel { display: none; }
.wizard-panel.is-active { display: block; animation: wiz-in 400ms var(--ease-out); }
@keyframes wiz-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.option-card {
  cursor: pointer;
  position: relative;
  text-align: left;
  width: 100%;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  color: var(--text-primary);
  transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}
.option-card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.option-card.is-selected {
  border-color: var(--color-green-bright);
  background: rgba(0, 217, 118, 0.06);
  box-shadow: 0 0 0 1px var(--color-green-bright);
}
.option-card .oc-check {
  position: absolute; top: 14px; right: 14px;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  color: transparent;
}
.option-card.is-selected .oc-check {
  background: var(--color-green-bright);
  border-color: var(--color-green-bright);
  color: var(--text-on-accent);
}
.option-card .oc-check svg { width: 14px; height: 14px; }
.option-card h3 { font-size: 1.05rem; margin-bottom: 4px; padding-right: 32px; }
.option-card p { color: var(--text-secondary); font-size: 0.88rem; }
.option-card .price { font-family: var(--font-heading); font-weight: 700; color: var(--color-green); margin-top: var(--space-1); }
.option-card .price small { color: var(--text-muted); font-weight: 500; }

.wizard-nav {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--space-5);
  gap: var(--space-2);
}

.review-list { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.review-list .rl-row {
  display: flex; justify-content: space-between; gap: var(--space-3);
  padding: 14px var(--space-3);
  font-size: 0.92rem;
  border-bottom: 1px solid var(--border-subtle);
}
.review-list .rl-row:last-child { border-bottom: none; }
.review-list .rl-row span:first-child { color: var(--text-muted); }
.review-list .rl-row span:last-child { color: var(--text-primary); text-align: right; }

/* Legal tabs */
.tab-bar {
  display: flex; flex-wrap: wrap; gap: 6px;
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 6px;
  margin-bottom: var(--space-5);
}
.tab-bar button {
  flex: 1;
  min-width: 130px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.82rem;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.tab-bar button:hover { color: var(--text-primary); }
.tab-bar button.is-active {
  background: var(--color-green-bright);
  color: var(--text-on-accent);
}
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

.data-table { width: 100%; border-collapse: collapse; margin: var(--space-2) 0 var(--space-3); font-size: 0.9rem; }
.data-table th, .data-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
}
.data-table th { color: var(--text-primary); font-family: var(--font-heading); font-size: 0.82rem; }
.data-table td { color: var(--text-secondary); }

/* ==========================================================================
   v4 additions — booking widget, trust bar, loyalty band, SEO links
   ========================================================================== */

/* Scroll cue: in normal flow so it can never overlap content */
.scroll-cue {
  position: static;
  transform: none;
  margin: var(--space-8) auto 0;
}

.booking-widget {
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  text-align: left;
  max-width: 980px;
  margin: var(--space-6) auto 0;
}
.booking-widget .bw-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr auto;
  gap: var(--space-2);
  align-items: end;
}
.booking-widget .field { margin-bottom: 0; }
.booking-widget .bw-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.booking-widget .bw-meta label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.booking-widget input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--color-green-bright);
}
@media (max-width: 1000px) {
  .booking-widget .bw-grid { grid-template-columns: 1fr 1fr; }
  .booking-widget .bw-grid .bw-submit { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .booking-widget .bw-grid { grid-template-columns: 1fr; }
}

.trust-bar {
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-base);
  padding: var(--space-4) 0;
}
.trust-bar .grid { gap: var(--space-3); }
.trust-item { display: flex; align-items: flex-start; gap: 12px; }
.trust-item svg { width: 26px; height: 26px; color: var(--color-green); flex-shrink: 0; margin-top: 2px; }
.trust-item h3 { font-family: var(--font-heading); font-size: 0.92rem; margin-bottom: 2px; }
.trust-item p { color: var(--text-muted); font-size: 0.8rem; line-height: 1.45; }

.founder-note {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.founder-note blockquote {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--text-primary);
}
.founder-note cite {
  display: block;
  margin-top: var(--space-3);
  font-style: normal;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  color: var(--color-green);
}

.loyalty-band {
  background: linear-gradient(100deg, rgba(0, 217, 118, 0.12), rgba(0, 217, 244, 0.10));
  border: 1px solid rgba(0, 217, 118, 0.3);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.loyalty-band h3 { font-size: 1.3rem; }
.loyalty-band p { color: var(--text-secondary); margin-top: 4px; }

.seo-links {
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-5) 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.seo-links h4 {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}
.seo-links ul { display: flex; flex-wrap: wrap; gap: 8px var(--space-3); }

/* ==========================================================================
   Cart widget (Cyber Security / Compliance package checkout)
   ========================================================================== */

.cart-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 10px 16px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color var(--dur-fast);
}
.cart-toggle:hover { border-color: var(--color-cyan); }
.cart-toggle svg { width: 18px; height: 18px; }
.cart-toggle .cart-count {
  background: var(--color-green-bright);
  color: var(--text-on-accent);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 7px;
  min-width: 18px;
  text-align: center;
}

.cart-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  padding: var(--space-3);
  z-index: 60;
  display: none;
}
.cart-panel.is-open { display: block; }
.cart-panel h4 { font-family: var(--font-heading); font-size: 0.95rem; margin-bottom: var(--space-2); }
.cart-panel .cart-empty { color: var(--text-muted); font-size: 0.85rem; padding: var(--space-2) 0; }

.cart-line {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.cart-line:last-of-type { border-bottom: none; }
.cart-line .cart-line-name { font-size: 0.88rem; font-weight: 500; }
.cart-line .cart-line-meta { color: var(--text-muted); font-size: 0.78rem; margin-top: 2px; }
.cart-line .cart-line-price { font-family: var(--font-heading); font-weight: 600; color: var(--color-green); font-size: 0.85rem; white-space: nowrap; }
.cart-line .cart-line-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.75rem;
  text-decoration: underline;
  padding: 0;
  margin-top: 4px;
}
.cart-line .cart-line-remove:hover { color: #FF8B8B; }

.cart-panel-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-strong);
  font-family: var(--font-heading);
  font-weight: 600;
}
.cart-panel-total .amount { color: var(--color-green); }

/* Part N §21 — package groups are <details>/<summary>, not a scripted toggle.
   The cards stay in the DOM when a group is closed, so browser find-in-page
   and search engines still see all 86 packages; a display:none div would hide
   them from both. Everything below is presentation only — open/closed is the
   element's own behaviour and works with JavaScript switched off. */
.package-group { margin-bottom: var(--space-6); }
.package-group:last-child { margin-bottom: 0; }
.package-group-heading {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}

/* summary carries .package-group-heading, so it inherits the rule above and
   the closed/open states look identical to the old static heading. */
summary.package-group-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  /* Remove the default disclosure triangle in favour of the chevron below —
     both syntaxes are needed to cover WebKit and everything else. */
  list-style: none;
  /* §20.2's 44px minimum applies here too: the heading IS the control. */
  min-height: 44px;
  padding-top: var(--space-1);
  transition: color var(--dur-fast);
}
summary.package-group-heading::-webkit-details-marker { display: none; }
/* A closed group is a row in a list, not a section: it keeps only the gap it
   needs, so a page of closed headings reads as a tight index rather than a
   column of empty space. The section-sized gaps come back when it opens. */
summary.package-group-heading { margin-bottom: 0; }
.package-group[open] > summary.package-group-heading { margin-bottom: var(--space-3); }
.package-group:not([open]) { margin-bottom: var(--space-2); }
summary.package-group-heading:hover { color: var(--color-green); }
summary.package-group-heading:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}
.package-group-count {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}
.package-group-chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-green);
  transition: transform var(--dur-fast) var(--ease-out);
}
.package-group[open] > summary .package-group-chevron { transform: rotate(180deg); }
.package-card { display: flex; flex-direction: column; }
.package-card .package-price {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-green);
  font-size: 1.3rem;
  margin: var(--space-2) 0;
}
.package-card .package-price small { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); }
.package-card .btn { margin-top: auto; justify-content: center; }
.package-card .btn.is-added { background: var(--color-green-deep); }

.checkout-summary {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.checkout-summary .cart-line-price { color: var(--color-green); }
.checkout-total-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-strong);
}
.checkout-total-row .amount { color: var(--color-green); }

.confirmation-box {
  background: rgba(0, 217, 118, 0.08);
  border: 1px solid rgba(0, 217, 118, 0.35);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.confirmation-box .reference {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--color-green);
  letter-spacing: 0.02em;
}
.banking-details-table { width: 100%; border-collapse: collapse; margin-top: var(--space-3); }
.banking-details-table td { padding: 8px 0; border-bottom: 1px solid var(--border-subtle); font-size: 0.92rem; }
.banking-details-table td:first-child { color: var(--text-muted); width: 40%; }
.banking-details-table td:last-child { font-weight: 600; }

/* ==========================================================================
   Per-division page themes (accent-colour override only — same layout and
   structure everywhere; every "accent" rule above is already written against
   --color-green/--color-green-bright/--color-green-deep, so overriding just
   those three custom properties re-themes buttons, highlights, headings, and
   the cart/CTA buttons without touching a single existing rule).
   ========================================================================== */

/* Delgroce Cyber Services — blue/cyan-led (security & technology). */
body.theme-cyber {
  --color-green: var(--color-cyan);
  --color-green-bright: var(--color-cyan);
  --color-green-deep: var(--color-cyan-deep);
}

/* Compliance & Consulting — leafy-green-led (trust & growth). This already
   matches the site-wide default, kept explicit for symmetry with theme-cyber. */
body.theme-compliance {
  --color-green: #00D976;
  --color-green-bright: #00D946;
  --color-green-deep: #04A85C;
}
.seo-links a:hover { color: var(--color-green); }

/* ==========================================================================
   Header nav — shared responsive fix (applies to every .site-header: Holdings,
   Digital, Cyber Services / Compliance, Car Rentals). Every division now
   links to every other division, so every nav is carrying more items than
   the original single-brand design assumed. Nav link text must never wrap
   mid-word (that's the actual crowding bug — flex items were shrinking below
   their text width, and on the header with a CTA button the shrink landed on
   the button's own label instead). .container caps at --max-width (1280px),
   so there is never any extra room to give the "full size" spacing beyond
   that — the compact gap/font sizing below is the unconditional default, not
   a narrow-viewport special case, and it's what actually made everything fit
   at exactly 1280px. It then steps down twice more for the 900–1180px zone,
   before .nav-links hands off to the hamburger menu at 900px. Was previously
   scoped to .holdings-header only (6 items) — the same crowding turned out to
   affect the Digital and Cyber/Compliance headers too (4 items + a header CTA
   button), so this is now the base rule for every header instead of a
   one-page special case.
   ========================================================================== */
.nav-links {
  gap: var(--space-3);
}
.nav-links a {
  font-size: 0.88rem;
  white-space: nowrap;
}
.nav-cta .btn {
  padding: 10px 16px;
  font-size: 0.85rem;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .nav-links { gap: var(--space-2); }
}

/* ==========================================================================
   Holdings header — 2026-08-18 fix, superseded by Part M (§20, 7 Sep 2026).

   History: the homepage header carried more than any other (logo, 4 division
   links, About Us, Contact, phone AND email as full text strings) and its
   natural content width measured ~1449px. That was patched by widening the
   container to 1700px, shrinking this header's fonts below every other
   header's, and hiding the contact strip entirely below 1300px — three
   compensations that made the homepage header a different shape from the
   rest of the site, which is a large part of what read as "off balance".

   §20.1 removes the cause instead: the two text strings became two 44px icon
   buttons, which gives back ~230px. Measured after that change (2026-09-07),
   this header's full-length content fits inside the standard 1280px container
   at 1280px with 61px to spare — no wrap, no overflow — so all three
   compensations are gone and the homepage header is now laid out by exactly
   the same rules as every other header. §20.2's shortened-label fallback was
   therefore NOT needed and the full division names are kept.
   ========================================================================== */

/* ==========================================================================
   Section sub-nav (Part M §20.3) — the row that sits directly under the hero
   on every Delgroce Digital page. Deliberately reads as part of the page, not
   as a second header: no fixed positioning, no background of its own beyond a
   hairline rule, and it scrolls away with the hero.
   ========================================================================== */
.section-subnav {
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-base);
}
.section-subnav-inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  /* Long enough to overflow on a phone: scroll it rather than wrap it. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.section-subnav-inner::-webkit-scrollbar { display: none; }
.section-subnav-inner a {
  display: inline-flex;
  align-items: center;
  /* 44px minimum target, same rule as the header icons. */
  min-height: 44px;
  padding: 0 2px;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.section-subnav-inner a:hover { color: var(--text-primary); }
.section-subnav-inner a.is-active {
  color: var(--color-green);
  border-bottom-color: var(--color-green);
}

/* ==========================================================================
   Cookie notice banner — lightweight, dismissible, site-wide.
   ========================================================================== */

.cookie-banner {
  position: fixed;
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 200;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  padding: var(--space-3);
}
.cookie-banner-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
}
.cookie-banner p {
  color: var(--text-secondary);
  font-size: 0.88rem;
  margin: 0;
  flex: 1 1 320px;
}
.cookie-banner a { color: var(--color-green); }
.cookie-banner .btn { padding: 10px 20px; font-size: 0.85rem; flex-shrink: 0; }

/* ==========================================================================
   Digital add-on configurator (/digital) — checkbox-driven quote builder.
   Two running totals (once-off / monthly) are kept visually and
   structurally separate throughout; never summed together.
   ========================================================================== */

.configurator {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
}
.configurator-main { flex: 1 1 auto; min-width: 0; }
.configurator-summary {
  flex: 0 0 300px;
  position: sticky;
  top: var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
.configurator-summary h4 {
  font-family: var(--font-heading);
  font-size: 1rem;
  margin-bottom: var(--space-2);
}
.configurator-totals-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-1) 0;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.9rem;
}
.configurator-totals-row:first-of-type { border-top: none; }
.configurator-totals-row .label { color: var(--text-muted); }
.configurator-totals-row .amount {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-green);
}
.configurator-totals-row.is-monthly .amount { color: var(--color-cyan); }
.configurator-summary .btn { width: 100%; justify-content: center; margin-top: var(--space-2); }
.configurator-summary .hint { font-size: 0.78rem; color: var(--text-muted); margin-top: var(--space-2); }

.config-base-build {
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.config-base-build .name { font-family: var(--font-heading); font-size: 1.05rem; }
.config-base-build .price { color: var(--color-green); font-weight: 700; font-size: 1.15rem; }
.config-base-build .included-badge {
  display: inline-block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(0, 217, 118, 0.15);
  color: var(--color-green);
  padding: 3px 10px;
  border-radius: 999px;
  margin-left: var(--space-1);
}

.config-category { margin-bottom: var(--space-3); }
.config-category summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-size: 1rem;
}
.config-category summary::-webkit-details-marker { display: none; }
.config-category summary .count { font-family: var(--font-body); font-size: 0.8rem; color: var(--text-muted); font-weight: 400; }
.config-category summary .chevron { transition: transform 0.2s; }
.config-category[open] summary .chevron { transform: rotate(180deg); }
.config-category-items {
  padding: var(--space-2) 0 0;
  display: grid;
  gap: var(--space-2);
}

.config-item {
  display: block;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.config-item:hover { border-color: var(--border-strong); }
.config-item.is-checked {
  border-color: var(--color-green);
  background: rgba(0, 217, 118, 0.06);
}
.config-item-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.config-item-row input[type="checkbox"] { margin-top: 4px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--color-green); }
.config-item-body { flex: 1; }
.config-item-name { font-weight: 600; }
.config-item-note { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }
.config-item-price { font-weight: 700; color: var(--color-green); white-space: nowrap; }
.config-item[data-recurring="1"] .config-item-price { color: var(--color-cyan); }
.config-item-qty {
  margin-top: var(--space-1);
  margin-left: 26px;
  display: none;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.85rem;
}
.config-item.is-checked .config-item-qty { display: flex; }
.config-item-qty input[type="number"] {
  width: 64px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--surface-base);
  color: var(--text-primary);
}

.configurator-mobile-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  background: var(--surface-raised);
  border-top: 1px solid var(--border-strong);
  padding: var(--space-2) var(--space-3);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.35);
}
.configurator-mobile-bar .totals {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  margin-bottom: var(--space-1);
}
.configurator-mobile-bar .totals strong { color: var(--color-green); }
.configurator-mobile-bar .totals strong.is-monthly { color: var(--color-cyan); }
.configurator-mobile-bar .btn { width: 100%; justify-content: center; padding: 10px; }

@media (max-width: 900px) {
  .configurator { flex-direction: column; }
  .configurator-summary { display: none; }
  .configurator-mobile-bar { display: block; }
  body.has-configurator { padding-bottom: 92px; }
}

/* ==========================================================================
   Portfolio / "Our Work" (/our-work) — spec DASHBOARD-CONTROL §11.
   Card grid + detail page. Reuses the existing surface/border/text tokens
   throughout; no new colours introduced.
   ========================================================================== */

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-3);
}

.portfolio-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.portfolio-card:hover {
  background: var(--surface-raised-hover);
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

/* Fixed 16:10 media box so a grid of differently-proportioned screenshots
   still lines up row to row. */
.portfolio-card-media {
  aspect-ratio: 16 / 10;
  background: var(--surface-base);
  overflow: hidden;
}
.portfolio-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.portfolio-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
.portfolio-card-placeholder svg { width: 46px; height: 46px; }

.portfolio-card-body { padding: var(--space-3); display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.portfolio-card-body h3 { margin: 0; font-family: var(--font-heading); font-size: 1.12rem; }
.portfolio-card-client { margin: 0; font-size: .86rem; color: var(--color-green); font-weight: 600; }
.portfolio-card-summary { margin: 0; font-size: .93rem; color: var(--text-secondary); flex: 1 1 auto; }
.portfolio-card-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--space-1);
  font-size: .9rem; font-weight: 600; color: var(--color-green);
}
.portfolio-card-link svg { width: 15px; height: 15px; }

.portfolio-detail-image {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  display: block;
  margin-bottom: var(--space-4);
}
.portfolio-detail-body { max-width: 720px; }
.portfolio-detail-summary { font-size: 1.06rem; color: var(--text-secondary); }
.portfolio-detail-body h2 { margin-top: var(--space-4); font-size: 1.3rem; }
.portfolio-detail-body p { color: var(--text-secondary); }

.portfolio-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.portfolio-gallery img {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  display: block;
}

@media (max-width: 640px) {
  .portfolio-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Managed website subscriptions (/digital/subscriptions) — spec §18 (Part K).
   Reuses existing tokens; the "notice" blocks carry the §18.5 disclosures
   that must read as prominent, not as small print.
   ========================================================================== */

.subscription-notice {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--color-green);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}
.subscription-notice h2,
.subscription-notice h3 { margin: 0 0 var(--space-1); font-size: 1.1rem; }
.subscription-notice p { margin: 0; color: var(--text-secondary); }
.subscription-notice-primary { border-left-width: 4px; }
.subscription-notice-primary h2 { font-size: 1.25rem; }

.subscription-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
}
.subscription-card {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  text-align: center;
}
.subscription-card h3 { margin: 0; font-family: var(--font-heading); font-size: 1.3rem; }
.subscription-price { margin: 0; font-size: 2rem; font-weight: 700; color: var(--color-green); }
.subscription-price span { font-size: .95rem; font-weight: 500; color: var(--text-secondary); }
.subscription-desc { margin: 0; color: var(--text-secondary); font-size: .93rem; flex: 1 1 auto; }
.subscription-term { margin: 0 0 var(--space-2); font-size: .82rem; color: var(--text-muted); }

/* Wide comparison tables must scroll inside their own box rather than
   forcing the whole page to scroll sideways on a phone. */
.subscription-table-wrap { overflow-x: auto; margin-top: var(--space-3); }
.subscription-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
  font-size: .93rem;
}
.subscription-table th,
.subscription-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
  text-align: center;
}
.subscription-table thead th { font-family: var(--font-heading); color: var(--text-primary); }
.subscription-table tbody th,
.subscription-table thead tr th:first-child { text-align: left; font-weight: 500; color: var(--text-secondary); }
.subscription-table-price td { color: var(--color-green); font-weight: 700; }
.subscription-table .tick { color: var(--color-green); font-weight: 700; }
.subscription-table .dash { color: var(--text-muted); }

@media (max-width: 640px) {
  .subscription-grid { grid-template-columns: 1fr; }
}

/* Business Systems (/digital/business-systems) — spec §10.1. The mandatory
   Priority Care cost sits next to the price in the same size type, never as a
   footnote: it is R21,600/year on top of the build and over three years
   exceeds the Till build itself. */
.business-care-required {
  margin: 0;
  font-size: 1rem;
  color: var(--color-green);
  font-weight: 600;
}
.business-care-required strong { text-transform: uppercase; letter-spacing: .02em; font-size: .82rem; }

/* ==========================================================================
   Our Work — templates & viewer (/our-work)
   Spec PASTE-TO-CLAUDE-CODE-our-work-templates.md decisions 7–9; design
   approved by Brian on 28 Sep 2026 (APPROVED-DESIGN-our-work-preview.html).
   Every selector is .ow- scoped. The design's .eyebrow, .lede, .btn,
   .btn-primary, .btn-outline, .accent-gradient, .hero, .section and
   .container are the site's own and are reused here, never redefined.
   Colours are the :root tokens only; a translucent surface is the token's
   own rgb value with an alpha (this file's existing pattern), and the
   comment beside it names the token. Small print that the design set in
   --text-muted uses --text-secondary instead: muted is under 4.5:1 there.
   ========================================================================== */

.ow-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* [hidden] must beat the display values set below: the viewer itself, a
   card the filter hides, the "Use this template" button and the pills. */
.ow-viewer[hidden],
.ow-viewer [hidden],
.ow-card[hidden],
.ow-group[hidden],
.ow-empty[hidden] { display: none; }

/* Hero — the site .hero supplies the glows; this makes it content-height and
   two-column like the design (the site .hero is a centred 92vh block). The
   top padding clears the fixed 96px header (80px on phones, see below). */
.ow-hero {
  display: block;
  min-height: 0;
  padding: calc(96px + var(--space-10)) 0 var(--space-8);
}
.ow-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: var(--space-6);
  align-items: end;
}
.ow-hero h1 { margin: 14px 0 18px; }
.ow-hero .lede { max-width: 620px; font-size: 1.12rem; }
.ow-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* Compact button (jump links, viewer bar). 44px stays the minimum target. */
.ow-btn-sm { min-height: 44px; padding: 10px 16px; font-size: 0.84rem; }

.ow-stats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: rgba(12, 19, 34, 0.55); /* --surface-base */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.ow-stat { padding: 22px 20px; border-right: 1px solid var(--border-subtle); }
.ow-stat:last-child { border-right: 0; }
.ow-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
}
.ow-stat span {
  display: block;
  margin-top: 8px;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Sections — the sub-nav above already draws a rule, so the first section
   under it does not add a second one. */
.ow-section--first { border-top: 0; }
.ow-sec-head { max-width: 640px; margin-bottom: 36px; }
.ow-sec-head h2 { margin-top: var(--space-1); }
.ow-sec-lede { max-width: 600px; margin-top: 12px; color: var(--text-secondary); }

/* Cards — client projects and templates share one card. */
.ow-clients { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.ow-clients .ow-card h3 { font-size: 1.75rem; }
.ow-clients .ow-card-body { padding: 24px 26px 28px; }

.ow-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  color: inherit;
  text-align: left;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: transform var(--dur-base) var(--ease-out), border-color 0.4s, background 0.4s, box-shadow var(--dur-base) var(--ease-out);
}
.ow-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-strong);
  background: var(--surface-raised-hover);
  box-shadow: 0 28px 60px -24px rgba(0, 0, 0, 0.6);
}
.ow-card:focus-visible { outline: 2px solid var(--color-green); outline-offset: 4px; }

.ow-frame {
  margin: 14px 14px 0;
  overflow: hidden;
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.ow-frame-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  background: var(--surface-base);
  border-bottom: 1px solid var(--border-subtle);
}
.ow-frame-dot {
  display: block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
}
.ow-frame-bar em {
  margin-left: 10px;
  overflow: hidden;
  font-size: 0.68rem;
  font-style: normal;
  color: var(--text-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* The screenshot is a tall page capture (520 × 1381). On hover it scrolls to
   the bottom inside a fixed 16:10 window; 100cqh is that window's height. */
.ow-shot {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  container-type: size;
  background: var(--surface-base);
}
.ow-shot img {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  max-width: none;
  height: auto;
  transition: transform 7s cubic-bezier(0.45, 0.05, 0.3, 1);
}
.ow-card:hover .ow-shot img { transform: translateY(calc(-100% + 100cqh)); }
.ow-shot::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 36%;
  background: linear-gradient(to top, rgba(12, 19, 34, 0.55), transparent); /* --surface-base */
  pointer-events: none;
  transition: opacity 0.4s;
}
.ow-card:hover .ow-shot::after { opacity: 0; }
/* An uploaded client image has unknown proportions: cropped, never scrolled. */
.ow-shot--cover img { inset: 0; height: 100%; object-fit: cover; }
.ow-card:hover .ow-shot--cover img { transform: none; }
.ow-shot-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
.ow-shot-placeholder svg { width: 46px; height: 46px; }

.ow-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px 22px;
}
.ow-card-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ow-sector {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-green);
}
.ow-card h3,
.ow-card h4 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.22;
}
.ow-card p { flex: 1; font-size: 0.9rem; color: var(--text-secondary); }
.ow-view {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-green);
}
.ow-view svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease-out); }
.ow-card:hover .ow-view svg { transform: translateX(4px); }

.ow-pill {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.ow-pill--soon { background: rgba(0, 217, 244, 0.12); color: var(--color-cyan); }
.ow-pill--soon::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-cyan);
  box-shadow: 0 0 0 3px rgba(0, 217, 244, 0.2);
}
.ow-pill--template { background: rgba(0, 217, 118, 0.12); color: var(--color-green); }

/* Templates — the three-step strip, filters and grid. */
.ow-how {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 36px;
  list-style: none;
}
.ow-how li {
  padding: 20px 22px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: rgba(12, 19, 34, 0.5); /* --surface-base */
}
.ow-how-title {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-heading);
  font-weight: 600;
}
.ow-how-n {
  margin-right: 8px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-green);
}
.ow-how-text { font-size: 0.88rem; color: var(--text-secondary); }

.ow-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.ow-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ow-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.ow-chip:hover { border-color: var(--border-strong); color: var(--text-primary); }
.ow-chip[aria-pressed="true"] {
  background: var(--color-green-bright);
  border-color: var(--color-green-bright);
  color: var(--text-on-accent);
}
.ow-chip small { margin-left: 4px; opacity: 0.7; }
.ow-chip:focus-visible { outline: 2px solid var(--color-green); outline-offset: 2px; }

.ow-search { position: relative; margin-left: auto; }
.ow-search svg {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  transform: translateY(-50%);
  pointer-events: none;
}
.ow-search input {
  width: 300px; /* the design's 260px cut off its own placeholder */
  min-height: 44px;
  padding: 10px 14px 10px 38px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.88rem;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.ow-search input::placeholder { color: var(--text-muted); opacity: 1; }
.ow-search input:focus { border-color: var(--color-cyan); box-shadow: 0 0 0 3px rgba(0, 217, 244, 0.25); }

.ow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
  gap: var(--space-3);
}
.ow-empty {
  padding: 40px;
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
  text-align: center;
}
.ow-groups + .ow-empty { margin-top: var(--space-3); }

/* Templates grouped by business type, A–Z (29 Sep 2026). */
.ow-group + .ow-group { margin-top: var(--space-8); }
.ow-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.ow-group-head h3 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}
.ow-group-count {
  flex-shrink: 0;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ow-empty a { color: var(--color-green); text-decoration: underline; text-underline-offset: 3px; }

.ow-cta { text-align: center; }
.ow-cta-inner { max-width: 680px; }
.ow-cta p { max-width: 560px; margin: 14px auto 28px; color: var(--text-secondary); }

/* The viewer — a modal above the fixed header (100), the WhatsApp button
   (90) and the cookie notice (200). While it is open our-work.js makes the
   page behind it inert and the root stops scrolling. */
.ow-viewer-open,
.ow-viewer-open body { overflow: hidden; }

.ow-viewer {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  background: rgba(12, 19, 34, 0.96); /* --surface-base */
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  overscroll-behavior: contain;
  animation: ow-fade 0.35s var(--ease-out);
}
@keyframes ow-fade { from { opacity: 0; } to { opacity: 1; } }

.ow-vbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  min-height: 68px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(15, 23, 42, 0.9); /* --bg-base */
}
.ow-vleft,
.ow-vright { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ow-vright { justify-content: flex-end; }

.ow-back {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-heading);
  font-size: 0.86rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.ow-back:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.06); }
.ow-back svg,
.ow-icon-btn svg { width: 18px; height: 18px; }

.ow-vtitle { min-width: 0; }
.ow-vtitle h2 {
  overflow: hidden;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ow-vtitle p {
  overflow: hidden;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ow-devices {
  display: flex;
  padding: 4px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-base);
}
.ow-devices button {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 7px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-heading);
  font-size: 0.8rem;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.ow-devices button svg { width: 16px; height: 16px; }
.ow-devices button[aria-pressed="true"] { background: var(--surface-raised-hover); color: var(--text-primary); }

.ow-icon-btn {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.ow-icon-btn:hover { color: var(--text-primary); border-color: var(--border-strong); background: rgba(255, 255, 255, 0.04); }
.ow-icon-btn:disabled { opacity: 0.4; cursor: default; }

.ow-back:focus-visible,
.ow-devices button:focus-visible,
.ow-icon-btn:focus-visible,
.ow-viewer .btn:focus-visible { outline: 2px solid var(--color-green); outline-offset: 2px; }

.ow-stage {
  display: flex;
  flex: 1;
  align-items: stretch;
  justify-content: center;
  min-height: 0;
  padding: 22px;
}
.ow-device {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--text-primary); /* white: the page behind a site still loading */
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--border-subtle);
  transition: width var(--dur-base) var(--ease-out), border-radius var(--dur-base);
}
.ow-device.is-tablet { width: 834px; }
.ow-device.is-mobile {
  width: 390px;
  border-radius: calc(var(--radius-lg) * 1.4);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8), 0 0 0 10px var(--surface-raised), 0 0 0 11px var(--border-strong);
}
.ow-device iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--text-primary);
}

.ow-loader {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  background: var(--surface-base);
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
  transition: opacity 0.4s;
}
.ow-loader.is-done { opacity: 0; pointer-events: none; }
.ow-spin {
  width: 34px;
  height: 34px;
  margin: 0 auto 12px;
  border: 2px solid var(--border-subtle);
  border-top-color: var(--color-green);
  border-radius: 50%;
  animation: ow-spin 1s linear infinite;
}
@keyframes ow-spin { to { transform: rotate(360deg); } }

.ow-vfoot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 12px;
  padding: 0 20px 14px;
  color: var(--text-secondary);
  font-size: 0.74rem;
  text-align: center;
}

@media (max-width: 980px) {
  .ow-hero-grid,
  .ow-clients,
  .ow-how { grid-template-columns: minmax(0, 1fr); }
  .ow-search { width: 100%; margin-left: 0; }
  /* 16px: iOS Safari zooms the whole page into any smaller focused field. */
  .ow-search input { width: 100%; font-size: 1rem; }
  .ow-vbar { grid-template-columns: minmax(0, 1fr) auto; }
  .ow-devices { display: none; }
}

@media (max-width: 720px) {
  .ow-hero { padding: calc(80px + var(--space-6)) 0 var(--space-6); }
}

@media (max-width: 560px) {
  .ow-stat { padding: 16px 12px; }
  .ow-stat strong { font-size: 1.5rem; }
  .ow-grid { grid-template-columns: minmax(0, 1fr); }
  .ow-vbar { gap: var(--space-1); padding: 8px 12px; }
  .ow-stage { padding: 0; }
  .ow-device,
  .ow-device.is-tablet,
  .ow-device.is-mobile { width: 100%; border-radius: 0; box-shadow: none; }
  .ow-viewer .ow-hide-sm,
  .ow-vfoot-sep { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* The site-wide rule already makes transitions instant, but a screenshot
     that jumps a whole page length on hover is still motion: it stays put. */
  .ow-card:hover .ow-shot img { transform: none; }
  .ow-viewer { animation: none; }
}


/* ==========================================================================
   Compliance subscriptions (/compliance, 29 Sep 2026) — the four tiers fitted
   to businesses. Built on the existing tokens; the theme's --color-green
   carries the accent, so a division re-theme needs nothing here.
   ========================================================================== */
.cs-tiers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: stretch;
}
.cs-tier {
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-3);
  position: relative;
  overflow: hidden;
}
.cs-tier::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-green), var(--color-cyan));
  opacity: 0.85;
}
.cs-name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  margin: 0;
}
.cs-fits {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 6px 0 0;
  /* Two lines always, so the prices line up across the four cards. */
  min-height: 3em;
}
.cs-price {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-green);
  font-size: 1.6rem;
  margin: var(--space-2) 0 0;
}
.cs-price small { font-size: 0.85rem; font-weight: 500; color: var(--text-muted); margin-left: 2px; }
.cs-note { font-size: 0.8rem; color: var(--text-muted); margin: 2px 0 0; }
.cs-allowance {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: var(--space-2) 0 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(0, 217, 118, 0.07);
  border: 1px solid rgba(0, 217, 118, 0.18);
}
.cs-subhead {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-green);
  margin: var(--space-3) 0 var(--space-1);
}
.cs-plus { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 6px; font-style: italic; }
.cs-list { list-style: none; margin: 0; padding: 0; }
.cs-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.cs-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.45em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--color-green);
  border-bottom: 2px solid var(--color-green);
  transform: rotate(-45deg);
}
.cs-list--setup li::before {
  width: 7px;
  height: 7px;
  top: 0.5em;
  border: 2px solid var(--color-cyan);
  border-radius: 50%;
  transform: none;
}
.cs-list--excluded li::before {
  width: 10px;
  height: 2px;
  top: 0.7em;
  border: 0;
  background: #F2A65A;
  transform: none;
}
.cs-list--excluded strong { color: var(--text-primary); font-weight: 600; }
.cs-cta { margin-top: auto; justify-content: center; }
.cs-list--setup { margin-bottom: var(--space-3); }

.cs-terms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.cs-terms-block {
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.cs-terms-block h3 { font-family: var(--font-heading); font-size: 1rem; margin: 0 0 var(--space-1); }
.cs-terms-block p { color: var(--text-secondary); font-size: 0.9rem; margin: 0 0 var(--space-3); }
.cs-terms-block p:last-child { margin-bottom: 0; }
.cs-terms-block--excluded { border-color: rgba(242, 166, 90, 0.35); }
.cs-fees { font-size: 0.85rem !important; color: var(--text-muted) !important; margin-top: var(--space-2) !important; }

.cs-group {
  margin-top: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: linear-gradient(135deg, rgba(0, 217, 118, 0.06), rgba(0, 217, 244, 0.04));
}
.cs-group h3 { font-family: var(--font-heading); font-size: 1.05rem; margin: 0 0 var(--space-1); }
.cs-group p { color: var(--text-secondary); margin: 0; }
.cs-payment { text-align: center; font-size: 0.85rem; color: var(--text-muted); margin: var(--space-3) auto 0; max-width: 62ch; }

@media (max-width: 1100px) {
  .cs-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .cs-tiers, .cs-terms { grid-template-columns: 1fr; }
  .cs-fits { min-height: 0; }
}

/* ==========================================================================
   Specials (Brian, 30 September 2026)
   The banner that goes first on a division's page, and the special price on a
   service card. The normal price is always visible, struck through, beside
   the special price, and the terms line is never hidden: a special price
   without its end date or months reads as the new list price (CPA s41).
   Colours come from --color-green, so body.theme-cyber re-themes them to cyan.
   ========================================================================== */

.division-specials {
  /* First on the page, under the fixed 96px header — so it clears the header
     itself, and the hero after it drops most of its own top padding. */
  padding: calc(96px + var(--space-3)) 0 var(--space-3);
  background: var(--bg-base);
}
.division-specials + .hero { padding-top: var(--space-5); }

.special-banner {
  position: relative;
  max-width: 980px;
  margin: 0 auto var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 217, 118, 0.45);
  border-color: color-mix(in srgb, var(--color-green) 45%, transparent);
  background:
    radial-gradient(ellipse 70% 120% at 100% 0%, rgba(0, 217, 118, 0.16), transparent 70%),
    var(--surface-raised);
  text-align: left;
}
.special-banner:last-child { margin-bottom: 0; }
.special-banner-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--space-1);
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.special-banner-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.2;
  margin: 0;
}
.special-banner-details { color: var(--text-secondary); margin: var(--space-1) 0 0; max-width: 68ch; }
.special-banner-items {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.special-banner-items li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}
.special-banner-items a { color: var(--text-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.special-banner-items a:hover { color: var(--color-green); }
.special-banner-price { font-family: var(--font-heading); color: var(--color-green); }
.special-banner-price s { color: var(--text-muted); font-weight: 400; margin-right: 6px; }
.special-banner-items small { flex-basis: 100%; color: var(--text-muted); font-size: 0.8rem; }

.special-flag { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.special-flag-label {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-on-accent);
  background: var(--color-green);
  border-radius: 999px;
  padding: 3px 10px;
}
.special-flag-title { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); font-family: var(--font-body); }
.special-price { line-height: 1.25; }
.special-price-was { color: var(--text-muted); font-weight: 400; font-size: 0.72em; margin-right: 6px; }
.special-price-now { color: var(--color-green); }
/* An amount never breaks between its "R" and its figure, however narrow the
   card (the compliance tiers are four abreast). */
.special-price-was, .special-price-now, .special-banner-price s, .special-banner-price strong { white-space: nowrap; }
.special-terms {
  display: block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: normal;
}
.has-special { border-color: rgba(0, 217, 118, 0.45); border-color: color-mix(in srgb, var(--color-green) 45%, transparent); }

/* The configurator's price column is narrow and nowrap: keep the special
   compact there, and let its terms wrap under it. */
.config-item-price .special-flag-title,
.config-base-build .price .special-flag-title { display: none; }
.config-item-price .special-terms,
.config-base-build .price .special-terms { max-width: 22ch; margin-left: auto; text-align: right; }
.config-item-price .special-flag,
.config-base-build .price .special-flag { justify-content: flex-end; margin-bottom: 2px; }

/* A banner link lands on its card below the fixed header, not under it. */
[id^="service-"] { scroll-margin-top: 120px; }

@media (max-width: 760px) {
  .division-specials { padding-top: calc(96px + var(--space-2)); }
  .special-banner { padding: var(--space-3); }
  .config-item-price .special-terms,
  .config-base-build .price .special-terms { max-width: 16ch; }
}