/* Brand palette sampled from the logo itself (header_files/3341ppc-logo-02.png):
   a white wordmark, a gold mark (#f0c000) and a deep navy (#002050). The gold
   is the accent, the navy is the ground. Neither is invented -- both are read
   straight off the mark, which is why the header finally looks like the brand. */
:root {
  /* Neutrals biased toward the brand navy, so the greys sit in one family. */
  --c-bg:            #F4F6FB;
  --c-surface:       #FFFFFF;
  --c-surface-2:     #E9EDF6;
  --c-ink:           #0A1526;
  --c-ink-2:         #33415C;
  --c-muted:         #61708C;
  --c-rule:          #D9E0EC;
  --c-rule-strong:   #B8C3D6;

  /* The brand ground -- header, hero and CTA bands, in both themes. */
  --c-navy:          #001B45;
  --c-navy-2:        #002B63;
  --c-navy-deep:     #00102B;
  --c-on-navy:       #EAF0FA;
  --c-on-navy-muted: #9DB0CE;

  /* One accent, spent carefully: the gold from the mark. On light grounds it
     is darkened to --c-accent so text on it clears contrast; the bright gold
     is reserved for use ON navy, where it is legible and does the shouting. */
  --c-accent:        #B37400;
  --c-accent-ink:    #FFFFFF;
  --c-accent-soft:   #FFF3D6;
  --c-accent-hover:  #8C5A00;
  --c-gold:          #FFC219;
  --c-gold-ink:      #2A1D00;

  /* Buttons carry their own colour rather than borrowing --c-accent.
     --c-accent is a LINK colour: on a light ground it has to be dark enough
     to read as text, which is why it is #B37400 -- and a whole button filled
     with that reads as mud. A button is a block, not a glyph, so it can take
     the bright mark gold and put the dark ink on top, which clears contrast
     comfortably and is the same button the header already shows. One button
     colour on navy and on white, instead of two that look unrelated. */
  --c-btn:           #FFC219;
  --c-btn-hover:     #FFD256;
  --c-btn-ink:       #2A1D00;
  --c-btn-glow:      rgba(191,134,0,.42);
  --radius-btn:      9px;

  /* Semantic signal -- deliberately separate from the accent. */
  --c-pos:           #0B6B57;
  --c-pos-soft:      #DDF0EA;
  --c-warn:          #8A5D00;
  --c-warn-soft:     #FAEFD9;
  --c-neg:           #B32B44;
  --c-neg-soft:      #FBE7EB;
  --c-whatsapp:      #1EA855;

  --c-focus:         #B37400;

  /* Type */
  --f-display: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body:    "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --t--1:  0.8125rem;
  --t-0:   1rem;
  --t-1:   1.1875rem;
  --t-2:   1.4375rem;
  --t-3:   1.8125rem;
  --t-4:   2.375rem;
  --t-5:   clamp(2.5rem, 1.6rem + 3.6vw, 4rem);

  /* Space -- a 4px base, so everything lands on a grid. */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;

  --measure: 68ch;
  --wrap: 1360px;
  /* Page gutter. 4vw left roughly 200px of empty margin either side of a
     1200px shell on a 1536px viewport, so the page read as a narrow column
     floating in whitespace. Capped at 2.5rem: the shell keeps real edges on
     a laptop and stops widening on a big monitor, where max-width takes over. */
  --gutter: clamp(1.15rem, 2.6vw, 2.5rem);
  --radius: 6px;
  --radius-lg: 10px;

  --shadow-1: 0 1px 2px rgba(0,27,69,.06), 0 1px 3px rgba(0,27,69,.05);
  --shadow-2: 0 4px 16px rgba(0,27,69,.10), 0 1px 3px rgba(0,27,69,.06);
  --shadow-3: 0 18px 48px rgba(0,27,69,.16), 0 2px 8px rgba(0,27,69,.08);

  color-scheme: light dark;
}

/* Dark values are written twice on purpose: once for viewers whose OS is dark
   and who never made an explicit choice (the un-stamped document, which is the
   common case), once for the explicit toggle. Components read only the tokens,
   never these blocks -- a colour defined solely in here would never apply in
   the un-stamped state, which is the classic unreadable-page bug. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg:          #060C18;
    --c-surface:     #0D1526;
    --c-surface-2:   #152034;
    --c-ink:         #E7EDF8;
    --c-ink-2:       #B6C3D9;
    --c-muted:       #8494B0;
    --c-rule:        #1E2B42;
    --c-rule-strong: #33445F;

    --c-navy:        #05102A;
    --c-navy-2:      #0B1D44;
    --c-navy-deep:   #030A1B;

    --c-accent:      #FFC219;
    --c-accent-ink:  #2A1D00;
    --c-accent-soft: #2A2100;
    --c-accent-hover:#FFD256;
    --c-btn-glow:    rgba(0,0,0,.55);

    --c-pos:         #58C4A8;
    --c-pos-soft:    #0F2A25;
    --c-warn:        #DCA94E;
    --c-warn-soft:   #2A2113;
    --c-neg:         #F08099;
    --c-neg-soft:    #2C1620;
    --c-whatsapp:    #25D366;

    --c-focus:       #FFC219;

    --shadow-1: 0 1px 2px rgba(0,0,0,.5);
    --shadow-2: 0 6px 22px rgba(0,0,0,.55);
    --shadow-3: 0 18px 48px rgba(0,0,0,.6);
  }
}

:root[data-theme="dark"] {
  --c-bg:          #060C18;
  --c-surface:     #0D1526;
  --c-surface-2:   #152034;
  --c-ink:         #E7EDF8;
  --c-ink-2:       #B6C3D9;
  --c-muted:       #8494B0;
  --c-rule:        #1E2B42;
  --c-rule-strong: #33445F;

  --c-navy:        #05102A;
  --c-navy-2:      #0B1D44;
  --c-navy-deep:   #030A1B;

  --c-accent:      #FFC219;
  --c-accent-ink:  #2A1D00;
  --c-accent-soft: #2A2100;
  --c-accent-hover:#FFD256;
  --c-btn-glow:    rgba(0,0,0,.55);

  --c-pos:         #58C4A8;
  --c-pos-soft:    #0F2A25;
  --c-warn:        #DCA94E;
  --c-warn-soft:   #2A2113;
  --c-neg:         #F08099;
  --c-neg-soft:    #2C1620;
  --c-whatsapp:    #25D366;

  --c-focus:       #FFC219;

  --shadow-1: 0 1px 2px rgba(0,0,0,.5);
  --shadow-2: 0 6px 22px rgba(0,0,0,.55);
  --shadow-3: 0 18px 48px rgba(0,0,0,.6);
}

/* ----------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  /* Explicit token background: the page must not borrow the host's ground. */
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--t-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

:where(a):focus-visible,
:where(button, [role="button"], summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ------------------------------------------------------------------ type */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  margin: 0;
  text-wrap: balance;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--c-ink);
}
h1 { font-size: var(--t-5); font-weight: 700; letter-spacing: -.03em; }
h2 { font-size: var(--t-4); font-weight: 650; }
h3 { font-size: var(--t-2); font-weight: 600; }
h4 { font-size: var(--t-1); font-weight: 600; letter-spacing: -.01em; }
p  { margin: 0; }

a { color: var(--c-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--c-accent-hover); }

.eyebrow {
  font-family: var(--f-display);
  font-size: var(--t--1);
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.lede { font-size: var(--t-1); color: var(--c-ink-2); max-width: var(--measure); }

/* Editor-authored HTML from the CMS. Scoped so CMS markup cannot leak styles. */
.rich { max-width: var(--measure); color: var(--c-ink-2); }
.rich > * + * { margin-top: var(--s-4); }
.rich h2 { font-size: var(--t-2); margin-top: var(--s-6); color: var(--c-ink); }
.rich h3 { font-size: var(--t-1); margin-top: var(--s-5); color: var(--c-ink); }
.rich ul, .rich ol { padding-left: 1.25rem; }
.rich li + li { margin-top: var(--s-2); }
.rich li::marker { color: var(--c-muted); }
.rich strong { color: var(--c-ink); font-weight: 600; }
.rich img { border-radius: var(--radius); margin-block: var(--s-5); }
.rich table { width: 100%; border-collapse: collapse; font-size: var(--t--1); }
.rich :is(th, td) { border: 1px solid var(--c-rule); padding: var(--s-2) var(--s-3); text-align: left; }

/* ---------------------------------------------------------------- layout */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.stack > * + * { margin-top: var(--s-4); }
.section { padding-block: clamp(var(--s-7), 6vw, var(--s-9)); }
.section--tight { padding-block: var(--s-7); }

.grid { display: grid; gap: var(--s-5); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Wide content must scroll in its own container, never the page body. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.skip-link {
  position: absolute; left: var(--s-4); top: -3rem;
  background: var(--c-accent); color: var(--c-accent-ink);
  padding: var(--s-2) var(--s-4); border-radius: var(--radius); z-index: 100;
  font-family: var(--f-display); font-weight: 600; text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: var(--s-4); color: var(--c-accent-ink); }

/* ------------------------------------------------------------ components */

/* Buttons
   Three of them, and they are the same three everywhere on the site: gold for
   the one action being asked for, an outlined button beside it for the other
   route, and a quiet text arrow for "there is more of this". The gold sits on
   navy in the header and hero and on white in the body, which is the reason it
   has its own token instead of the link colour -- see --c-btn.

   The lift on hover is 1px. Any more and a row of them bounces as the pointer
   crosses; 1px reads as pressable without moving the layout. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-family: var(--f-display); font-size: var(--t-0); font-weight: 650;
  letter-spacing: -.005em;
  padding: .78rem 1.35rem; border-radius: var(--radius-btn);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  line-height: 1.2;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease,
              box-shadow .16s ease, transform .16s ease;
}
/* Two rings, because these buttons stand on navy AND on white and a single
   ring that reads on one ground disappears on the other. The inner ring is
   the surface colour, the outer is the focus colour; whichever ground the
   button is on, one of the two has contrast against it. */
.btn:focus-visible {
  outline: 2px solid var(--c-surface); outline-offset: 1px;
  box-shadow: 0 0 0 5px var(--c-focus);
}

.btn--primary {
  background: var(--c-btn); color: var(--c-btn-ink); border-color: transparent;
  /* Top highlight then a drop shadow tinted with the button's own hue, so the
     shadow reads as the button casting it rather than a grey smudge under it. */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5),
              0 6px 16px -8px var(--c-btn-glow);
}
.btn--primary:hover {
  background: var(--c-btn-hover); color: var(--c-btn-ink);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6),
              0 12px 22px -10px var(--c-btn-glow);
}
.btn--primary:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.18);
}

.btn--ghost {
  background: var(--c-surface); color: var(--c-ink);
  border-color: var(--c-rule-strong);
  box-shadow: 0 1px 2px rgba(10,21,38,.05);
}
.btn--ghost:hover {
  background: var(--c-surface-2); color: var(--c-ink);
  border-color: var(--c-navy-2);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -12px rgba(10,21,38,.55);
}
.btn--ghost:active { transform: translateY(0); box-shadow: none; }

/* Buttons standing on the navy ground -- header, hero, CTA panel. The outlined
   one cannot use a light-theme border there or it disappears. */
.on-navy .btn--ghost,
.site-header .btn--ghost,
.lead .btn--ghost,
.svc-hero .btn--ghost,
.svc-handoff .btn--ghost,
.cta__panel .btn--ghost {
  background: rgba(255,255,255,.06); color: #fff;
  border-color: rgba(255,255,255,.36); box-shadow: none;
}
.on-navy .btn--ghost:hover,
.site-header .btn--ghost:hover,
.lead .btn--ghost:hover,
.svc-hero .btn--ghost:hover,
.svc-handoff .btn--ghost:hover,
.cta__panel .btn--ghost:hover {
  background: rgba(255,255,255,.13); color: #fff;
  border-color: rgba(255,255,255,.6);
}

/* The arrow, where a button has one, walks forward on hover. */
.btn svg { flex: none; transition: transform .16s ease; }
.btn:hover svg { transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn svg { transition: none; }
  .btn:hover, .btn:hover svg { transform: none; }
}

/* Metric tiles — the signature element of this direction. */
.metrics {
  display: grid; gap: 1px; background: var(--c-rule);
  border: 1px solid var(--c-rule); border-radius: var(--radius-lg); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.metric { background: var(--c-surface); padding: var(--s-5) var(--s-4); display: flex; flex-direction: column; gap: var(--s-1); }
.metric__n {
  font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  font-size: var(--t-4); font-weight: 700; line-height: 1; letter-spacing: -.03em;
  color: var(--c-ink);
}
.metric__k {
  font-family: var(--f-display); font-size: var(--t--1); font-weight: 650;
  letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted);
}

/* Cards */
.card {
  background: var(--c-surface); border: 1px solid var(--c-rule);
  border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.card:hover { border-color: var(--c-rule-strong); box-shadow: var(--shadow-2); }
.card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-surface-2); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.card__title { font-family: var(--f-display); font-size: var(--t-1); font-weight: 600; letter-spacing: -.01em; }
.card__title a { color: var(--c-ink); text-decoration: none; }
.card__title a:hover { color: var(--c-accent); }
.card__text { font-size: var(--t--1); color: var(--c-muted); }

/* Chips / pills */
.chip {
  display: inline-flex; align-items: center; gap: var(--s-1);
  font-family: var(--f-display); font-size: var(--t--1); font-weight: 600;
  padding: .2rem .6rem; border-radius: 100px;
  background: var(--c-accent-soft); color: var(--c-accent);
}

/* Breadcrumbs */
.crumbs { padding-block: var(--s-4); }
.crumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  font-size: var(--t--1); color: var(--c-muted);
}
.crumbs li { display: flex; align-items: center; gap: var(--s-2); }
.crumbs li + li::before { content: "/"; color: var(--c-rule-strong); }
.crumbs a { color: var(--c-muted); text-decoration: none; }
.crumbs a:hover { color: var(--c-accent); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--c-ink-2); font-weight: 500; }

/* Header
   Navy, because the supplied logo is a light wordmark with a gold mark -- on a
   white bar the brand name vanished. The bar carries three jobs and they are
   ranked: the logo home, the sections, and one gold action. Nothing else. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--c-navy);
  border-bottom: 1px solid rgba(255,255,255,.10);
  transition: box-shadow .2s ease;
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); min-height: 76px;
  transition: min-height .2s ease;
}
.site-header__logo img { max-height: 40px; width: auto; transition: max-height .2s ease; }

/* Condensed once the page has moved, so the bar costs less of a small screen
   the further down you read. Progressive: with no JS the attribute never
   changes and the header simply stays at full height. */
.site-header[data-stuck="true"]{ box-shadow: 0 16px 34px -26px rgba(0,0,0,.95); }
.site-header[data-stuck="true"] .site-header__inner{ min-height: 62px; }
.site-header[data-stuck="true"] .site-header__logo img{ max-height: 34px; }

.nav { display: flex; align-items: center; gap: var(--s-5); }
.nav__links { display: flex; align-items: center; gap: .15rem; }
.nav__end { display: flex; align-items: center; }

.nav a:not(.btn) {
  font-family: var(--f-display); font-size: var(--t-0); font-weight: 550;
  color: #C3D2E8; text-decoration: none;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem .7rem; border-radius: var(--radius);
  transition: color .15s ease, background .15s ease;
}
.nav a:not(.btn):hover { color: #FFFFFF; background: rgba(255,255,255,.07); }
.nav__links > a, .nav__top { position: relative; }

/* Colour alone has never been enough to say "you are here" -- it fails a
   colour-blind reader and it fails in greyscale. The rule under the label is
   the part that carries the meaning; the colour lift is the bonus. */
.nav__links > a[aria-current="page"],
.nav__group.is-here > .nav__top { color: #FFFFFF; }
.nav__links > a[aria-current="page"]::after,
.nav__group.is-here > .nav__top::after {
  content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .18rem;
  height: 2px; border-radius: 2px; background: var(--c-gold);
}

.nav__caret { display: inline-flex; transition: transform .18s ease; }
.nav__caret svg { width: 13px; height: 13px; }
.nav__group:hover .nav__caret,
.nav__group:focus-within .nav__caret { transform: rotate(180deg); }

/* The label and its disclosure read as one control, so the button carries no
   chrome of its own and sits tight against the word. */
.nav__disc {
  display: inline-flex; align-items: center;
  background: none; border: 0; cursor: pointer; color: #C3D2E8;
  padding: .5rem .55rem .5rem .1rem; margin-left: -.55rem;
  border-radius: var(--radius);
  transition: color .15s ease, background .15s ease;
}
.nav__group:hover .nav__disc,
.nav__group.is-here .nav__disc { color: #FFFFFF; }

.nav__group { position: relative; display: flex; align-items: center; }
.nav__panel {
  position: absolute; top: calc(100% + .4rem); left: 50%;
  width: min(34rem, calc(100vw - 2rem));
  transform: translateX(-50%) translateY(-.35rem);
  background: var(--c-navy-2); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-3);
  padding: var(--s-3); margin: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
/* The gap between trigger and panel is a dead zone the cursor falls into and
   closes the menu. Bridge it. */
.nav__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -.6rem; height: .6rem; }
.nav__group:hover .nav__panel,
.nav__group:focus-within .nav__panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Nine channels in two columns, each in its own brand colour, so the panel is
   scanned rather than read. One long grey column was the previous answer. */
.nav__chan {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2px;
}
.nav__panel .nav__chan a {
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem .6rem; border-radius: var(--radius);
  font-size: var(--t--1); font-weight: 500; color: #C3D2E8;
}
.nav__panel .nav__chan a:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav__panel .nav__chan a[aria-current="page"] { background: rgba(255,255,255,.10); color: #fff; }
.nav__dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ch, var(--c-gold));
  box-shadow: 0 0 0 3px rgba(255,255,255,.10);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ch, #FFC219) 26%, transparent);
}

.nav__panel a.nav__all {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--s-3); padding: .6rem .6rem 0;
  border-top: 1px solid rgba(255,255,255,.10); border-radius: 0;
  color: var(--c-gold); font-size: var(--t--1); font-weight: 600;
}
.nav__panel a.nav__all:hover { background: none; color: #fff; }
.nav__panel a.nav__all svg { width: 15px; height: 15px; }

.nav__cta { display: inline-flex; align-items: center; gap: .45rem; }
.nav__cta svg { width: 15px; height: 15px; }

.nav-toggle {
  display: none; align-items: center; gap: .45rem;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius); padding: .45rem .7rem;
  color: #EAF0FA; font-family: var(--f-display); font-weight: 600; font-size: var(--t--1);
}
.nav-toggle svg { width: 18px; height: 18px; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: var(--s-3);
    background: var(--c-navy); border-bottom: 1px solid rgba(255,255,255,.10);
    padding: var(--s-4); max-height: 78vh; overflow-y: auto;
  }
  .nav[data-open="true"] { display: flex; }
  .nav__links { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__links > a, .nav__top { display: flex; }
  .nav__group { flex-wrap: wrap; }
  .nav__top { flex: 1 1 auto; }
  .nav__disc {
    flex: none; margin-left: 0; padding: .6rem .7rem;
    border: 1px solid rgba(255,255,255,.18);
  }
  /* The underline is a wide-screen device; on a stacked list a filled row is
     the clearer signal and does not collide with the row above. */
  .nav__links > a[aria-current="page"]::after,
  .nav__group.is-here > .nav__top::after { display: none; }
  /* Gold at 16%% over this navy composites to a desaturated slate -- it read
     as a grey box, not as an accent. A solid gold spine says the same thing
     and cannot be washed out by the ground behind it. */
  .nav__links > a[aria-current="page"],
  .nav__group.is-here > .nav__top {
    background: rgba(255,255,255,.06);
    box-shadow: inset 3px 0 0 var(--c-gold);
  }
  /* Collapsed by default once the script has run. With no script the
     attribute is never set, the panel stays open, and the drawer is exactly
     what it was -- long, but complete. */
  .nav__group[data-open="false"] .nav__panel { display: none; }
  .nav__group[data-open="true"] .nav__caret { transform: rotate(180deg); }
  .nav__panel {
    flex: 1 1 100%;
    position: static; width: auto; transform: none;
    opacity: 1; visibility: visible; pointer-events: auto;
    background: none; border: 0; box-shadow: none;
    padding: 0 0 0 var(--s-3); margin-top: 2px;
  }
  .nav__panel::before { display: none; }
  /* The wide-screen open state centres the panel on its trigger. That rule is
     more specific than the block above and a tap leaves the group focused, so
     without this the drawer panel is dragged half its own width off-screen. */
  .nav__group:hover .nav__panel,
  .nav__group:focus-within .nav__panel { transform: none; }
  .nav__chan { grid-template-columns: minmax(0,1fr); }
  .nav__end { margin-top: var(--s-2); }
  .nav__cta { width: 100%; justify-content: center; padding-block: .8rem; }
}

/* Hero */
.hero { padding-block: clamp(var(--s-7), 7vw, var(--s-9)) var(--s-7); }
.hero__grid { display: grid; gap: var(--s-7); align-items: center; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
@media (max-width: 860px) { .hero__grid { grid-template-columns: 1fr; } }
.hero h1 { margin-bottom: var(--s-4); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.hero__media img { border-radius: var(--radius-lg); border: 1px solid var(--c-rule); box-shadow: var(--shadow-2); }

/* Location directory — the internal-link mesh, presented as a real index. */
.dir { border: 1px solid var(--c-rule); border-radius: var(--radius-lg); background: var(--c-surface); overflow: hidden; }
.dir__group + .dir__group { border-top: 1px solid var(--c-rule); }
.dir__summary {
  cursor: pointer; padding: var(--s-4); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  font-family: var(--f-display); font-weight: 600; color: var(--c-ink); list-style: none;
}
.dir__summary::-webkit-details-marker { display: none; }
.dir__summary::after { content: "+"; font-family: var(--f-mono); color: var(--c-muted); font-size: var(--t-2); line-height: 1; }
.dir__group[open] .dir__summary::after { content: "\2212"; }
.dir__summary:hover { background: var(--c-surface-2); }
.dir__count { font-family: var(--f-mono); font-size: var(--t--1); color: var(--c-muted); font-variant-numeric: tabular-nums; }
.dir__links { padding: 0 var(--s-4) var(--s-4); display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.dir__links a { font-size: var(--t--1); color: var(--c-ink-2); text-decoration: none; padding: var(--s-2); border-radius: var(--radius); border: 1px solid transparent; }
.dir__links a:hover { color: var(--c-accent); background: var(--c-accent-soft); }

/* Answer blocks — AEO. Question as heading, answer immediately after. */
.answers { display: grid; gap: var(--s-4); }
.answer { background: var(--c-surface); border: 1px solid var(--c-rule); border-radius: var(--radius-lg); padding: var(--s-5); }
.answer h3 { margin-bottom: var(--s-3); }
.answer p, .answer li { color: var(--c-ink-2); }
.answer ol, .answer ul { margin: 0; padding-left: 1.2rem; }
.answer li + li { margin-top: var(--s-2); }

/* Footer */
.site-footer { background: var(--c-surface); border-top: 1px solid var(--c-rule); margin-top: var(--s-8); }
.site-footer__grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); padding-block: var(--s-7); }
.site-footer h4 { font-size: var(--t--1); letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); margin-bottom: var(--s-3); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.site-footer a { color: var(--c-ink-2); text-decoration: none; font-size: var(--t--1); }
.site-footer a:hover { color: var(--c-accent); }
.site-footer__base { border-top: 1px solid var(--c-rule); padding-block: var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between; font-size: var(--t--1); color: var(--c-muted); }
.social { display: flex; gap: var(--s-3); }
.social a { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border: 1px solid var(--c-rule); border-radius: var(--radius); }
.social a:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* Utility */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tabular { font-variant-numeric: tabular-nums; font-family: var(--f-mono); }

/* =========================================================================
   SERVICE PAGE
   1,341 URLs run through this. The copy is long-form Q&A that ContentBlocks
   recovers into typed sections -- so the page sets each KIND as what it is
   rather than printing nine identical white cards: a benefits list is a grid,
   an ad-format list is a numbered set, a price is a figure and its small
   print, a question is a question.

   Each page also carries its channel's own colour in --ch, set inline on the
   article. It is used for the dot beside the eyebrow, the rule under a section
   number and the edge a channel card lifts on -- never for text, where several
   of the nine would fail contrast. Navy and gold still carry the brand; --ch
   is only what stops nine pages built from one template looking identical.
   ========================================================================= */

.svc{ --ch: var(--c-gold); }

/* --- hero ------------------------------------------------------------------
   Navy, because everything below it is white and the page needs somewhere to
   start. The first background is the fallback: if color-mix does not parse,
   the whole declaration is dropped, and without a plain one underneath the
   hero would render transparent with white text on it. */
.svc-hero{
  padding-block: var(--s-8);
  color:#fff;
  background: linear-gradient(146deg, var(--c-navy-2) 0%, var(--c-navy) 72%);
  background:
    radial-gradient(50rem 30rem at 84% -12%, color-mix(in srgb, var(--ch) 32%, transparent), transparent 62%),
    radial-gradient(30rem 20rem at 4% 108%, rgba(255,194,25,.10), transparent 60%),
    linear-gradient(146deg, var(--c-navy-2) 0%, var(--c-navy) 72%);
}
.svc-hero__grid{
  display:grid; gap: var(--s-7); align-items:center;
  grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr);
}
.svc-hero__eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family: var(--f-display); font-weight:700; font-size: var(--t--1);
  letter-spacing:.12em; text-transform:uppercase; color: var(--c-gold);
}
.svc-hero__dot{
  width:9px; height:9px; border-radius:50%; background: var(--ch);
  box-shadow: 0 0 0 4px rgba(255,255,255,.10);
}
.svc-hero__copy h1{
  color:#fff; margin: var(--s-4) 0;
  font-size: clamp(2.1rem, 1.3rem + 2.9vw, 3.3rem);
  line-height:1.07; letter-spacing:-.025em; text-wrap:balance;
}
.svc-hero__lede{
  color:#C7D6EC; font-size: var(--t-1); line-height:1.62; max-width: 54ch;
}
.svc-hero__lede :is(p, li){ color:inherit; }
.svc-hero__actions{ display:flex; flex-wrap:wrap; gap: var(--s-3); margin-top: var(--s-6); }
.svc-hero__actions .btn svg{ width:17px; height:17px; }

.svc-hero__media{
  margin:0; position:relative; overflow:hidden;
  border-radius: 18px; border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  box-shadow: 0 32px 64px -34px rgba(0,0,0,.85);
}
.svc-hero__media img{ display:block; width:100%; height:auto; }

/* Figures the page can actually prove, stated as figures. */
.statbar{
  display:grid; gap:1px; margin: var(--s-6) 0 0;
  background: var(--c-rule);
  grid-template-columns: repeat(auto-fit, minmax(170px,1fr));
  border:1px solid var(--c-rule); border-radius: var(--radius-lg); overflow:hidden;
}
.stat{ background: var(--c-surface); padding: var(--s-4); }
.stat dt{
  font-family: var(--f-display); font-size: var(--t--1); font-weight:650;
  letter-spacing:.08em; text-transform:uppercase; color: var(--c-muted);
}
.stat dd{
  margin: var(--s-1) 0 0; font-family: var(--f-mono);
  font-variant-numeric: tabular-nums; font-size: var(--t-3);
  font-weight:700; letter-spacing:-.02em; color: var(--c-ink); line-height:1.1;
}
.stat dd.stat__text{ font-family: var(--f-display); font-size: var(--t-2); }
.stat__unit{
  display:block; font-family: var(--f-body); font-size: var(--t--1);
  font-weight:400; letter-spacing:0; color: var(--c-muted); margin-top:2px;
}

/* Inside the hero rather than in a band under it -- these figures are the
   answer to the first question a reader has. */
.statbar--seam{
  margin-top: var(--s-7);
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.16);
}
.statbar--seam .stat{ background: rgba(255,255,255,.045); }
.statbar--seam .stat dt{ color: var(--c-on-navy-muted); }
.statbar--seam .stat dd{ color:#fff; }
.statbar--seam .stat__unit{ color: var(--c-on-navy-muted); }

/* --- reading column + rail ------------------------------------------------- */
.svc-body{
  display:grid; gap: clamp(2rem, 4.4vw, 4.5rem); align-items:start;
  grid-template-columns: minmax(0,1fr) 20rem;
  padding-block: var(--s-8);
}
.svc-body__main{ display:flex; flex-direction:column; gap: var(--s-7); min-width:0; }

/* --- a section -------------------------------------------------------------
   Not a card. Nine bordered boxes stacked down a page read as nine unrelated
   things; a rule and a number read as one document with parts. */
.answer{
  background:none; border:0; border-radius:0; padding:0;
  border-top:1px solid var(--c-rule); padding-top: var(--s-7);
  scroll-margin-top: 96px;
  /* The number lives in a gutter of its own, so the heading and everything
     under it start on one line rather than the heading alone being pushed in
     by however wide the number happened to be. */
  display:grid; align-items:start;
  grid-template-columns: 2.5rem minmax(0,1fr);
  column-gap: .75rem; row-gap: var(--s-5);
}
.answer > *{ grid-column: 2; }
.answer:first-child{ border-top:0; padding-top:0; }
.answer__n{
  grid-column: 1; align-self:start;
  font-family: var(--f-mono); font-size: var(--t--1); font-weight:700;
  letter-spacing:.06em; color: var(--c-muted); padding-top:.45rem;
  font-variant-numeric: tabular-nums;
}
.answer__n::after{
  content:""; display:block; height:2px; width:20px; margin-top:.4rem;
  background: var(--ch); border-radius:2px;
}
.answer h2{
  font-size: var(--t-3); margin:0; letter-spacing:-.018em;
  line-height:1.2; text-wrap:balance;
}
.answer .rich{ max-width:none; font-size: 1.0625rem; line-height:1.7; }
/* Lists, tables and grids take the whole column -- a term list wants that
   width. Prose does not: uncapped here it ran past 120 characters a line. */
.answer .rich > p{ max-width: 74ch; }
.answer .answer__intro > p{ max-width: 74ch; }

/* --- a typed list: benefits, why us, ad formats ---------------------------- */
.pts{
  list-style:none; margin:0; padding:0; display:grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(15rem,1fr));
}
/* .rich stacks list items; a grid spaces its own. */
.pts > li + li,
.termlist > li + li{ margin-top:0; }
.pt{
  display:flex; align-items:flex-start; gap: var(--s-3);
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-4);
  border:1px solid var(--c-rule); border-radius: var(--radius-lg);
  background: var(--c-surface);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.pt:hover{ transform: translateY(-2px); box-shadow: var(--shadow-2); }
.pt__mark{
  flex:none; width:26px; height:26px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--c-pos-soft); color: var(--c-pos);
  font-family: var(--f-mono); font-size:11px; font-weight:700;
  font-variant-numeric: tabular-nums;
}
.pt__mark svg{ width:14px; height:14px; }
.pt__t{ font-size: var(--t-0); line-height:1.5; color: var(--c-ink); }
.pt__t em{ font-style: italic; }

/* Reasons to choose us are not the same kind of claim as what the channel
   does for you, so they do not carry the same green tick. */
.pts--why .pt__mark{ background: var(--c-accent-soft); color: var(--c-accent); }

/* Ad formats are a set, not a checklist -- numbered, and edged in the
   channel's colour so the set reads as belonging to this page. */
.pts--types .pt{ border-top: 2px solid var(--ch); }
.pts--types .pt__mark{
  background: var(--c-surface-2); color: var(--c-ink-2);
  border:1px solid var(--c-rule);
}

/* --- price -----------------------------------------------------------------
   The one section on a page of ruled sections that gets a panel round it. It
   is the section stating money, and an exception is how you say so. */
.svc-price{
  display:grid; gap: var(--s-5);
  padding: var(--s-5); border-radius: var(--radius-lg);
  background: var(--c-surface); border:1px solid var(--c-rule);
  box-shadow: var(--shadow-1);
}
.svc-price__copy{ max-width: 74ch; }
.svc-price__copy p:first-child strong{
  font-family: var(--f-display); font-size: var(--t-1); color: var(--c-ink);
}
/* The caveats under "Note:" are the small print and are set as small print --
   still there, still readable, no longer the same weight as the price. */
.svc-price__note{
  border-left:3px solid var(--c-rule-strong); padding-left: var(--s-4);
}
.svc-price__notek{
  font-family: var(--f-display); font-weight:700; font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color: var(--c-muted);
  margin-bottom: var(--s-2);
}
.svc-price__note .rich{ font-size: var(--t--1); color: var(--c-muted); line-height:1.6; }
.svc-price__note .rich > * + *{ margin-top: var(--s-2); }

.termlist{
  list-style:none; margin:0; padding:0; max-width:none;
  display:flex; flex-wrap:wrap; gap: var(--s-2);
}
.termlist li{
  font-size: var(--t--1); color: var(--c-ink-2);
  background: var(--c-surface-2); border:1px solid var(--c-rule);
  border-radius: 100px; padding:.25rem .7rem;
}

/* --- the copy's own call to action ----------------------------------------- */
.svc-handoff{
  display:grid; gap: var(--s-4); padding: var(--s-6);
  border-radius: var(--radius-lg); color:#fff;
  background: linear-gradient(150deg, var(--c-navy-2), var(--c-navy));
  box-shadow: 0 24px 48px -32px rgba(0,27,69,.85);
}
.svc-handoff__text{
  font-family: var(--f-display); font-weight:700; font-size: var(--t-2);
  line-height:1.25; color:#fff; margin:0; max-width: 32ch;
}
.svc-handoff .rich{ color: var(--c-on-navy-muted); font-size: var(--t--1); }
.svc-handoff__acts{ display:flex; flex-wrap:wrap; gap: var(--s-3); }
.svc-handoff__acts .btn svg{ width:17px; height:17px; }

/* --- rail ------------------------------------------------------------------
   The rail is the sticky thing now, not the contents block inside it, so the
   proposal card travels with the reader instead of scrolling away at the top
   of a long page. */
.svc-rail{ display:grid; gap: var(--s-5); align-content:start; position:sticky; top: 88px; }

.svc-toc{
  border:1px solid var(--c-rule); border-radius: var(--radius-lg);
  background: var(--c-surface); padding: var(--s-4);
}
.svc-toc__title{
  font-family: var(--f-display); font-size: var(--t--1); font-weight:650;
  letter-spacing:.1em; text-transform:uppercase; color: var(--c-muted);
  margin-bottom: var(--s-3);
}
.svc-toc :is(ol, ul){ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.svc-toc li a{
  display:block; padding:.4rem .5rem; border-radius: var(--radius);
  font-size: var(--t--1); color: var(--c-ink-2); text-decoration:none;
  border-left: 2px solid transparent;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.svc-toc li a:hover{ background: var(--c-accent-soft); color: var(--c-accent); border-left-color: var(--c-accent); }
.svc-toc__cta{ margin-top: var(--s-4); padding-top: var(--s-4); border-top:1px solid var(--c-rule); }

.btn--block{ width:100%; justify-content:center; }

.svc-ask{
  position:relative; overflow:hidden;
  border-radius: var(--radius-lg); padding: var(--s-5);
  background: linear-gradient(158deg, var(--c-navy-2) 0%, var(--c-navy) 78%);
  box-shadow: 0 18px 36px -24px rgba(0,27,69,.75);
  display:grid; gap: var(--s-2);
}
.svc-ask__k{
  font-family: var(--f-display); font-weight:700; font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color: var(--c-gold);
}
.svc-ask__h{
  font-family: var(--f-display); font-weight:700; font-size: var(--t-1);
  line-height:1.22; color:#fff; letter-spacing:-.012em;
}
.svc-ask__p{ font-size: var(--t--1); color:#C7D6EC; line-height:1.55; margin-bottom: var(--s-2); }
.svc-ask .btn{ padding:.72rem 1rem; font-size:.9375rem; }
.svc-ask__tel{
  margin-top: var(--s-3); padding-top: var(--s-3);
  border-top:1px solid rgba(255,255,255,.14);
  font-size: var(--t--1); color:#9DB0CE; text-align:center;
}
.svc-ask__tel a{
  color:#fff; text-decoration:none; font-weight:600;
  font-variant-numeric: tabular-nums;
}
.svc-ask__tel a:hover{ color: var(--c-gold); text-decoration:underline; }

/* --- the enquiry ----------------------------------------------------------
   On the page, not a link to the contact page: the reader is already looking
   at the channel and the city, and the row this writes carries both. */
.svc-enq{
  padding-block: var(--s-8); color:#fff; scroll-margin-top: 72px;
  background: linear-gradient(150deg, var(--c-navy-2) 0%, var(--c-navy) 74%);
  background:
    radial-gradient(38rem 24rem at 8% 0%, color-mix(in srgb, var(--ch) 26%, transparent), transparent 62%),
    linear-gradient(150deg, var(--c-navy-2) 0%, var(--c-navy) 74%);
}
.svc-enq__grid{
  display:grid; gap: var(--s-7); align-items:start;
  grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr);
}
.svc-enq .eyebrow{ color: var(--c-gold); }
.svc-enq__copy h2{
  color:#fff; margin: var(--s-3) 0 var(--s-4);
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
  line-height:1.1; letter-spacing:-.022em; text-wrap:balance;
}
.svc-enq__blurb{ color: var(--c-on-navy-muted); max-width: 46ch; line-height:1.65; }

.svc-enq__alt{ margin-top: var(--s-6); display:grid; gap: var(--s-3); max-width: 21rem; }
.svc-enq__altk{
  font-family: var(--f-display); font-weight:700; font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color: var(--c-on-navy-muted);
}
.svc-enq__act{
  display:flex; align-items:center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border-radius: var(--radius-lg);
  border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05);
  color:#fff; text-decoration:none;
  transition: background .15s ease, border-color .15s ease;
}
.svc-enq__act:hover{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.42); }
.svc-enq__act--wa:hover{ background: var(--c-whatsapp); border-color: var(--c-whatsapp); }
.svc-enq__act svg{ width:18px; height:18px; flex:none; }
.svc-enq__actk{ display:block; font-size: var(--t--1); color: var(--c-on-navy-muted); }
.svc-enq__act:hover .svc-enq__actk{ color: rgba(255,255,255,.85); }
.svc-enq__actv{
  display:block; font-family: var(--f-display); font-weight:650;
  font-variant-numeric: tabular-nums;
}

.svc-enq__panel .enqf{ box-shadow: 0 34px 64px -34px rgba(0,0,0,.75); }
.svc-enq__done{
  display:grid; gap: var(--s-3); padding: var(--s-6);
  background: var(--c-surface); border:1px solid var(--c-rule);
  border-radius: var(--radius-lg); color: var(--c-ink);
  box-shadow: 0 34px 64px -34px rgba(0,0,0,.75);
}
.svc-enq__tick{
  width:44px; height:44px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--c-pos-soft); color: var(--c-pos);
}
.svc-enq__tick svg{ width:22px; height:22px; }
.svc-enq__done h3{ margin:0; font-size: var(--t-2); }
.svc-enq__done p{ margin:0; color: var(--c-ink-2); }


/* --- the location browser --------------------------------------------------
   Eight regions holding 149 areas. As an accordion that is eight near-empty
   bars and one open drawer: to compare Mumbai with Delhi you close one and
   open the other, and the list of regions itself is never visible as a list.

   Here the regions stay on screen down the left while their areas change on
   the right. It runs on a radio group -- no script, no dependency, and every
   one of the 149 links stays in the markup for a crawler to follow. */
.places{
  margin: var(--s-5) 0 0; padding:0; min-width:0;
  display:grid; gap:1px; align-items:stretch;
  grid-template-columns: 16.5rem minmax(0,1fr);
  background: var(--c-rule);
  border:1px solid var(--c-rule); border-radius: var(--radius-lg);
  overflow:hidden;
}

/* Off-screen but still focusable: a keyboard can walk the region list with the
   arrow keys exactly as it would any other radio group. */
.places__r{
  position:absolute; width:1px; height:1px; margin:-1px;
  clip-path: inset(50%); overflow:hidden; white-space:nowrap;
}

.places__rail{
  background: var(--c-surface-2);
  display:flex; flex-direction:column; gap:2px; padding: var(--s-3);
}
.places__tab{
  display:flex; align-items:center; gap: var(--s-3);
  padding:.55rem .7rem; border-radius: var(--radius);
  cursor:pointer; color: var(--c-ink-2);
  border-left: 2px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.places__tab:hover{ background: var(--c-surface); color: var(--c-ink); }
.places__pin{ flex:none; display:inline-flex; color: var(--c-muted); }
.places__pin svg{ width:16px; height:16px; }
.places__tname{
  flex:1 1 auto; min-width:0; font-family: var(--f-display); font-weight:600;
  font-size: var(--t-0); line-height:1.25;
}
.places__tn{
  flex:none; font-family: var(--f-mono); font-size: var(--t--1);
  font-variant-numeric: tabular-nums; color: var(--c-muted);
}

.places__panels{ background: var(--c-surface); padding: var(--s-5); }
.places__panel{ display:none; }
.places__grid{
  display:grid; gap: var(--s-2);
  grid-template-columns: repeat(auto-fill, minmax(11rem,1fr));
}
.places__a{
  display:block; padding:.5rem .7rem; border-radius: var(--radius);
  font-size: var(--t--1); line-height:1.3; color: var(--c-ink-2);
  text-decoration:none; border:1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.places__a:hover{
  background: var(--c-accent-soft); color: var(--c-accent);
  border-color: var(--c-accent-soft);
}
/* The region's own page leads its own list, and says so. */
.places__a--hub{
  font-family: var(--f-display); font-weight:650; color: var(--c-ink);
  background: var(--c-surface-2); border-color: var(--c-rule);
}
.places__a--hub:hover{ border-color: var(--ch); background: var(--c-surface-2); color: var(--c-ink); }
/* The page you are on. */
.places__a--now{
  background: var(--c-navy); border-color: var(--c-navy); color:#fff; font-weight:650;
}
.places__a--now:hover{ background: var(--c-navy-2); border-color: var(--c-navy-2); color:#fff; }

/* Which region is showing, and which tab looks chosen. There is no loop in
   CSS, so the pairing is written out an index at a time; sixteen regions are
   covered and .places--all catches anything past that. */
.places__r:nth-of-type(1):checked  ~ .places__panels > .places__panel:nth-child(1),
.places__r:nth-of-type(2):checked  ~ .places__panels > .places__panel:nth-child(2),
.places__r:nth-of-type(3):checked  ~ .places__panels > .places__panel:nth-child(3),
.places__r:nth-of-type(4):checked  ~ .places__panels > .places__panel:nth-child(4),
.places__r:nth-of-type(5):checked  ~ .places__panels > .places__panel:nth-child(5),
.places__r:nth-of-type(6):checked  ~ .places__panels > .places__panel:nth-child(6),
.places__r:nth-of-type(7):checked  ~ .places__panels > .places__panel:nth-child(7),
.places__r:nth-of-type(8):checked  ~ .places__panels > .places__panel:nth-child(8),
.places__r:nth-of-type(9):checked  ~ .places__panels > .places__panel:nth-child(9),
.places__r:nth-of-type(10):checked ~ .places__panels > .places__panel:nth-child(10),
.places__r:nth-of-type(11):checked ~ .places__panels > .places__panel:nth-child(11),
.places__r:nth-of-type(12):checked ~ .places__panels > .places__panel:nth-child(12),
.places__r:nth-of-type(13):checked ~ .places__panels > .places__panel:nth-child(13),
.places__r:nth-of-type(14):checked ~ .places__panels > .places__panel:nth-child(14),
.places__r:nth-of-type(15):checked ~ .places__panels > .places__panel:nth-child(15),
.places__r:nth-of-type(16):checked ~ .places__panels > .places__panel:nth-child(16),
.places--all .places__panel{ display:block; }

.places__r:nth-of-type(1):checked  ~ .places__rail > .places__tab:nth-child(1),
.places__r:nth-of-type(2):checked  ~ .places__rail > .places__tab:nth-child(2),
.places__r:nth-of-type(3):checked  ~ .places__rail > .places__tab:nth-child(3),
.places__r:nth-of-type(4):checked  ~ .places__rail > .places__tab:nth-child(4),
.places__r:nth-of-type(5):checked  ~ .places__rail > .places__tab:nth-child(5),
.places__r:nth-of-type(6):checked  ~ .places__rail > .places__tab:nth-child(6),
.places__r:nth-of-type(7):checked  ~ .places__rail > .places__tab:nth-child(7),
.places__r:nth-of-type(8):checked  ~ .places__rail > .places__tab:nth-child(8),
.places__r:nth-of-type(9):checked  ~ .places__rail > .places__tab:nth-child(9),
.places__r:nth-of-type(10):checked ~ .places__rail > .places__tab:nth-child(10),
.places__r:nth-of-type(11):checked ~ .places__rail > .places__tab:nth-child(11),
.places__r:nth-of-type(12):checked ~ .places__rail > .places__tab:nth-child(12),
.places__r:nth-of-type(13):checked ~ .places__rail > .places__tab:nth-child(13),
.places__r:nth-of-type(14):checked ~ .places__rail > .places__tab:nth-child(14),
.places__r:nth-of-type(15):checked ~ .places__rail > .places__tab:nth-child(15),
.places__r:nth-of-type(16):checked ~ .places__rail > .places__tab:nth-child(16){
  background: var(--c-surface); color: var(--c-ink);
  border-left-color: var(--ch); box-shadow: var(--shadow-1);
}
.places__r:nth-of-type(1):checked  ~ .places__rail > .places__tab:nth-child(1)  .places__pin,
.places__r:nth-of-type(2):checked  ~ .places__rail > .places__tab:nth-child(2)  .places__pin,
.places__r:nth-of-type(3):checked  ~ .places__rail > .places__tab:nth-child(3)  .places__pin,
.places__r:nth-of-type(4):checked  ~ .places__rail > .places__tab:nth-child(4)  .places__pin,
.places__r:nth-of-type(5):checked  ~ .places__rail > .places__tab:nth-child(5)  .places__pin,
.places__r:nth-of-type(6):checked  ~ .places__rail > .places__tab:nth-child(6)  .places__pin,
.places__r:nth-of-type(7):checked  ~ .places__rail > .places__tab:nth-child(7)  .places__pin,
.places__r:nth-of-type(8):checked  ~ .places__rail > .places__tab:nth-child(8)  .places__pin,
.places__r:nth-of-type(9):checked  ~ .places__rail > .places__tab:nth-child(9)  .places__pin,
.places__r:nth-of-type(10):checked ~ .places__rail > .places__tab:nth-child(10) .places__pin,
.places__r:nth-of-type(11):checked ~ .places__rail > .places__tab:nth-child(11) .places__pin,
.places__r:nth-of-type(12):checked ~ .places__rail > .places__tab:nth-child(12) .places__pin,
.places__r:nth-of-type(13):checked ~ .places__rail > .places__tab:nth-child(13) .places__pin,
.places__r:nth-of-type(14):checked ~ .places__rail > .places__tab:nth-child(14) .places__pin,
.places__r:nth-of-type(15):checked ~ .places__rail > .places__tab:nth-child(15) .places__pin,
.places__r:nth-of-type(16):checked ~ .places__rail > .places__tab:nth-child(16) .places__pin{
  color: var(--ch);
}

/* Keyboard focus has to land on the label, because the radio itself is not on
   screen to show a ring. */
.places__r:nth-of-type(1):focus-visible  ~ .places__rail > .places__tab:nth-child(1),
.places__r:nth-of-type(2):focus-visible  ~ .places__rail > .places__tab:nth-child(2),
.places__r:nth-of-type(3):focus-visible  ~ .places__rail > .places__tab:nth-child(3),
.places__r:nth-of-type(4):focus-visible  ~ .places__rail > .places__tab:nth-child(4),
.places__r:nth-of-type(5):focus-visible  ~ .places__rail > .places__tab:nth-child(5),
.places__r:nth-of-type(6):focus-visible  ~ .places__rail > .places__tab:nth-child(6),
.places__r:nth-of-type(7):focus-visible  ~ .places__rail > .places__tab:nth-child(7),
.places__r:nth-of-type(8):focus-visible  ~ .places__rail > .places__tab:nth-child(8),
.places__r:nth-of-type(9):focus-visible  ~ .places__rail > .places__tab:nth-child(9),
.places__r:nth-of-type(10):focus-visible ~ .places__rail > .places__tab:nth-child(10),
.places__r:nth-of-type(11):focus-visible ~ .places__rail > .places__tab:nth-child(11),
.places__r:nth-of-type(12):focus-visible ~ .places__rail > .places__tab:nth-child(12),
.places__r:nth-of-type(13):focus-visible ~ .places__rail > .places__tab:nth-child(13),
.places__r:nth-of-type(14):focus-visible ~ .places__rail > .places__tab:nth-child(14),
.places__r:nth-of-type(15):focus-visible ~ .places__rail > .places__tab:nth-child(15),
.places__r:nth-of-type(16):focus-visible ~ .places__rail > .places__tab:nth-child(16){
  outline: 2px solid var(--c-focus); outline-offset: -2px;
}

/* Past sixteen regions, or with the rail stacked away: every region shows, each
   under its own heading. */
.places--all{ grid-template-columns: minmax(0,1fr); }
.places--all .places__panels{ display:grid; gap: var(--s-5); }
.places__ph{
  font-family: var(--f-display); font-weight:700; font-size: var(--t-0);
  color: var(--c-ink); margin-bottom: var(--s-3);
  display:flex; align-items:center; gap: var(--s-2);
}
.places__ph span{
  font-family: var(--f-mono); font-size: var(--t--1); color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

/* Narrow: the region list becomes a strip across the top, scrolled sideways
   inside itself so the page never does. */
@media (max-width: 860px){
  .places{ grid-template-columns: minmax(0,1fr); }
  .places__rail{
    flex-direction:row; overflow-x:auto; gap: var(--s-2);
    padding: var(--s-3); scrollbar-width: thin;
  }
  /* Outlined chips at rest; the chosen one is the only filled one, which is
     the same signal the left edge gives on a wide screen. */
  .places__tab{
    flex:none; border:1px solid var(--c-rule); background:transparent;
    border-radius: var(--radius);
  }
  .places__panels{ padding: var(--s-4); }
  .places__grid{ grid-template-columns: repeat(auto-fill, minmax(9.5rem,1fr)); }
}
@media (prefers-reduced-motion: reduce){
  .places__tab, .places__a{ transition:none; }
}

/* --- other channels, locations --------------------------------------------- */
.svc-section{ padding-block: var(--s-7); }
.svc-section__note{ color: var(--c-muted); margin-top: var(--s-2); }
.svc-section > h2{ font-size: var(--t-3); letter-spacing:-.018em; }
.svc-section .dir{ margin-top: var(--s-5); }

.chan-grid{
  display:grid; gap: var(--s-3); margin-top: var(--s-5);
  grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
}
.chan{
  position:relative; display:flex; flex-direction:column; gap:2px;
  text-decoration:none; padding: var(--s-4);
  border:1px solid var(--c-rule); border-left:3px solid transparent;
  border-radius: var(--radius-lg); background: var(--c-surface);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.chan:hover{
  border-color: var(--c-rule); border-left-color: var(--ch);
  transform: translateY(-2px); box-shadow: var(--shadow-2);
}
.chan__name{ font-family: var(--f-display); font-weight:600; color: var(--c-ink); }
.chan__meta{ font-size: var(--t--1); color: var(--c-muted); }
.chan__go{
  position:absolute; right: var(--s-4); top: var(--s-4);
  color: var(--c-muted); opacity:0; transition: opacity .15s ease;
}
.chan__go svg{ width:16px; height:16px; }
.chan:hover .chan__go{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  .pt:hover, .chan:hover{ transform:none; }
}

@media (max-width: 1000px){
  .svc-enq__grid{ grid-template-columns:1fr; }
  .svc-enq__alt{ max-width:none; grid-template-columns: repeat(auto-fit, minmax(14rem,1fr)); }
}
@media (max-width: 960px){
  .svc-body{ grid-template-columns: 1fr; gap: var(--s-6); }
  .svc-rail{ position:static; }
  .svc-hero__grid{ grid-template-columns: 1fr; }
  .svc-hero__media{ order:-1; }
}
@media (max-width: 620px){
  .answer{ grid-template-columns: 1.9rem minmax(0,1fr); column-gap:.5rem; }
  .svc-handoff, .svc-ask{ padding: var(--s-5); }
}


/* =========================================================================
   HEADER - the brand navy
   The supplied logo is a light wordmark (measured luminance 222/255) with a
   gold mark, so on a white bar the brand name simply vanished. The navy comes
   off the logo itself, which is why the asset finally reads correctly. Fixed
   in both themes on purpose: there is no dark variant of the logo.

   That navy now lives in the Header block above rather than being painted over
   a light definition here. This note stays because the reason is not obvious
   from the rules.
   ========================================================================= */

/* Tighter vertical rhythm: the first pass left dead bands that read as empty
   rather than airy. */
.section          { padding-block: var(--s-7); }
.section--tight   { padding-block: var(--s-7); }
.hero             { padding-block: var(--s-7) var(--s-6); }
.svc-section      { padding-block: var(--s-5); }
.svc-body         { padding-block: var(--s-6); }

/* CMS images arrive at wildly different crops, so pin a consistent frame
   rather than letting every card set its own height. */
.card__media{ aspect-ratio: 16 / 9; }
.card__media img{ object-position: center; }

/* =========================================================================
   HOMEPAGE
   The reference sites the client pointed at share one trait worth taking:
   density. Every band teaches something. Each block below is fed from copy
   that already exists in the database - nothing here is written by the
   renderer.
   ========================================================================= */

/* --- section headers, shared ------------------------------------------- */
.sec-head{ max-width: 62ch; }
.sec-head .eyebrow{ color: var(--c-accent); }
.sec-head h2{ margin: var(--s-2) 0 var(--s-3); }
.sec-head p{ color: var(--c-ink-2); margin: 0; }
.sec-head--center{ margin-inline: auto; text-align: center; }

/* --- hero on navy ------------------------------------------------------- */
.lead{
  background:
    radial-gradient(60rem 30rem at 82% -10%, rgba(255,194,25,.20), transparent 60%),
    radial-gradient(48rem 28rem at 8% 110%, rgba(0,110,220,.24), transparent 62%),
    linear-gradient(180deg, var(--c-navy) 0%, var(--c-navy-deep) 100%);
  color: var(--c-on-navy);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
/* align-items:start, not center. The copy column is the taller of the two, so
   centring the panel against it pushed the panel down and left a block of empty
   navy above it -- roughly 150px of nothing in the top right of the page. Both
   columns now begin on the same line, which is also where the eye starts. */
.lead__grid{
  display: grid; gap: var(--s-7); align-items: start;
  grid-template-columns: minmax(0,1.06fr) minmax(0,.94fr);
  /* The stat band below is pulled up 4rem over the hero, so the hero has to
     keep at least that much clear at the bottom or the band lands on the
     Certified Google Partner badge -- which is exactly what happened once the
     headline stopped taking three lines. 6rem leaves the badge 2rem of air. */
  padding-block: clamp(var(--s-6), 4.5vw, var(--s-8)) var(--s-9);
}
@media (max-width: 900px){ .lead__grid{ grid-template-columns: 1fr; } }
/* The headline is the one thing on the page allowed to be this size, but at the
   old cap it ran to three lines in a 620px column and pushed everything under
   it down a screen. text-wrap:balance evens the lines it does take. */
.lead h1{
  color:#fff; font-size: clamp(2.4rem, 1.5rem + 3.1vw, 3.5rem);
  line-height:1.05; letter-spacing:-.022em; text-wrap:balance;
  margin: 0 0 var(--s-4);
}
.lead h1 em{ font-style: normal; color: var(--c-gold); }
.lead__lede{ color: #C7D6EC; font-size: var(--t-1); line-height: 1.55; max-width: 46ch; margin: 0; }
.lead .eyebrow{ color: var(--c-gold); }
.lead__actions{ display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
/* The hero pair is set a size up -- the colours now come from the shared
   button rules, which already handle the navy ground. */
.lead .btn{ font-size: var(--t-1); padding: .88rem 1.5rem; }

/* Credential chips. Each states a claim the site copy already makes. */
/* Two chips, one row. It was three, two of which the price panel beside it was
   already printing -- see the note in home.php. */
.creds{ display:flex; flex-wrap:wrap; gap: var(--s-2) var(--s-3); margin-top: var(--s-5); padding:0; list-style:none; }
.creds li{
  display:inline-flex; align-items:center; gap: var(--s-2);
  background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  border-radius: 999px; padding: .38rem .8rem;
  font-size: var(--t--1); color:#DDE8F8; font-weight:500;
}
.creds svg{ width:14px; height:14px; flex:none; color: var(--c-gold); }

/* The hero's right-hand panel: the actual price, not a stock photo. */
.quote{
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-3);
}
.quote__label{ font-size: var(--t--1); text-transform: uppercase; letter-spacing:.09em; color: var(--c-gold); font-family: var(--f-display); font-weight:650; }
.quote__fig{ display:flex; align-items:baseline; gap:.35rem; margin-top: var(--s-3); }
.quote__cur{ font-size: var(--t-2); color:#fff; font-weight:600; }
.quote__amt{ font-family: var(--f-display); font-weight:700; font-size: clamp(2.6rem,1.4rem+3.4vw,3.4rem); line-height:1; color:#fff; letter-spacing:-.02em; font-variant-numeric: tabular-nums; }
.quote__per{ color:#A9BEDC; font-size: var(--t-0); }
.quote__note{ color:#A9BEDC; font-size: var(--t--1); margin: var(--s-3) 0 0; line-height:1.5; }
.quote__rule{ border:0; border-top:1px solid rgba(255,255,255,.14); margin: var(--s-5) 0; }
.quote__list{ list-style:none; margin:0; padding:0; display:grid; gap: var(--s-3); }
.quote__list li{ display:flex; gap: var(--s-3); align-items:flex-start; font-size: var(--t--1); color:#D6E2F3; }
.quote__list svg{ width:15px; height:15px; flex:none; margin-top:.16rem; color: var(--c-gold); }

/* --- proof strip -------------------------------------------------------- */
.proof{ background: var(--c-surface); border-bottom:1px solid var(--c-rule); }
.proof__grid{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: var(--s-5); padding-block: var(--s-6);
}
@media (max-width: 760px){ .proof__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.proof__item{ display:grid; gap: .2rem; border-left:3px solid var(--c-gold); padding-left: var(--s-4); }
.proof__n{ font-family: var(--f-display); font-weight:700; font-size: var(--t-4); line-height:1; color: var(--c-ink); letter-spacing:-.02em; font-variant-numeric: tabular-nums; }
.proof__k{ font-size: var(--t--1); color: var(--c-muted); line-height:1.35; }

/* --- channel cards ------------------------------------------------------ */
.chans{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-5); margin-top: var(--s-6); }
@media (max-width: 980px){ .chans{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px){ .chans{ grid-template-columns: 1fr; } }
.chanc{
  display:flex; flex-direction:column;
  background: var(--c-surface); border:1px solid var(--c-rule);
  border-radius: var(--radius-lg); padding: var(--s-5);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.chanc:hover{ border-color: var(--c-rule-strong); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.chanc__top{ display:flex; align-items:center; gap: var(--s-3); }
.chanc__mark{
  width:40px; height:40px; flex:none; border-radius: 10px;
  background: var(--c-navy); color: var(--c-gold);
  display:grid; place-items:center;
  font-family: var(--f-display); font-weight:700; font-size: var(--t-0);
}
.chanc__name{ font-family: var(--f-display); font-weight:650; font-size: var(--t-1); margin:0; letter-spacing:-.01em; }
.chanc__name a{ color: var(--c-ink); text-decoration:none; }
.chanc__name a:hover{ color: var(--c-accent); }
.chanc__text{ color: var(--c-ink-2); font-size: var(--t--1); line-height:1.55; margin: var(--s-3) 0 0; }
.chanc__types{ list-style:none; margin: var(--s-4) 0 0; padding:0; display:flex; flex-wrap:wrap; gap: var(--s-2); }
.chanc__types li{
  font-size: 11.5px; letter-spacing:.02em; color: var(--c-ink-2);
  background: var(--c-surface-2); border:1px solid var(--c-rule);
  border-radius: 5px; padding: .2rem .45rem;
}
.chanc__foot{ margin-top: auto; padding-top: var(--s-5); }
.chanc__link{ font-size: var(--t--1); font-weight:600; color: var(--c-accent); text-decoration:none; display:inline-flex; align-items:center; gap:.35rem; }
.chanc__link:hover{ color: var(--c-accent-hover); gap:.6rem; }
.chanc__link svg{ width:13px; height:13px; }



/* --- closing CTA band --------------------------------------------------- */

/* =========================================================================
   HOW IT WORKS
   Four steps, numbered because they are genuinely sequential -- the setup month
   happens before the months after it, and whose money buys the clicks has to be
   answered before either. The numerals are set large and low-contrast so they
   order the list without competing with it.
   ========================================================================= */
.flow{
  list-style:none; margin: var(--s-6) 0 0; padding:0;
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s-5);
  counter-reset: flow;
}
@media (max-width: 1000px){ .flow{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px){ .flow{ grid-template-columns:1fr; } }

.flow__step{
  position:relative;
  padding: var(--s-5);
  background: var(--c-surface);
  border:1px solid var(--c-rule);
  border-radius: var(--radius-lg);
  display:flex; flex-direction:column; gap: var(--s-3);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.flow__step:hover{ border-color: var(--c-rule-strong); box-shadow: var(--shadow-2); }
/* The rule between steps reads as a sequence on a wide screen and is dropped
   the moment the row wraps, where it would be pointing at nothing. */
@media (min-width: 1001px){
  .flow__step:not(:last-child)::after{
    content:""; position:absolute; top:50%; right: calc(var(--s-5) * -1 - 1px);
    width: var(--s-5); height:1px; background: var(--c-rule);
  }
}
.flow__num{
  font-family: var(--f-display); font-weight:700;
  font-size: var(--t-3); line-height:1; letter-spacing:-.03em;
  color: var(--c-accent); opacity:.4;
  font-variant-numeric: tabular-nums;
}
.flow__kicker{
  margin:0; font-family: var(--f-display); font-weight:700;
  font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color: var(--c-muted);
}
.flow__h{
  margin:0; font-family: var(--f-display); font-weight:650;
  font-size: var(--t-0); line-height:1.35; color: var(--c-ink);
}
.flow__p{ margin:0; font-size: var(--t--1); line-height:1.65; color: var(--c-ink-2); }
.flow__body{ display:flex; flex-direction:column; gap: var(--s-2); }

/* =========================================================================
   TEAM
   Prints nothing until the four members in the CMS are set Active -- see the
   note in home.php. Built now because the photographs and the roles are already
   in the database and a named specialist per channel is worth more on this page
   than anything that could be written to replace it.
   ========================================================================= */
.crew{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: var(--s-5); margin-top: var(--s-6);
}
@media (max-width: 900px){ .crew{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px){ .crew{ grid-template-columns:1fr; } }

.crew__card{
  margin:0; background: var(--c-surface);
  border:1px solid var(--c-rule); border-radius: var(--radius-lg);
  overflow:hidden; display:flex; flex-direction:column;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.crew__card:hover{ border-color: var(--c-rule-strong); box-shadow: var(--shadow-2); }
.crew__pic{
  aspect-ratio: 1 / 1; background: var(--c-surface-2);
  display:grid; place-items:center; overflow:hidden;
  border-bottom:1px solid var(--c-rule);
}
.crew__pic img{ width:100%; height:100%; object-fit:cover; display:block; }
.crew__init{
  font-family: var(--f-display); font-weight:700; font-size: var(--t-4);
  color: var(--c-gold); background: var(--c-navy);
  width:100%; height:100%; display:grid; place-items:center;
}
.crew__body{ padding: var(--s-4) var(--s-5) var(--s-5); }
.crew__name{
  margin:0; font-family: var(--f-display); font-weight:650;
  font-size: var(--t-0); color: var(--c-ink);
}
.crew__role{ margin:.15rem 0 0; font-size: var(--t--1); color: var(--c-accent); font-weight:600; }
.crew__bio{ margin: var(--s-3) 0 0; font-size: var(--t--1); line-height:1.6; color: var(--c-ink-2); }

/* =========================================================================
   BLOG -- mosaic
   Six posts at three sizes, newest largest, on a six-column track:

     lead   3 cols x 2 rows      wide   3 cols x 1 row (x2)
     small  2 cols x 1 row (x3)

   which fills the grid exactly, with no orphan cell to leave a hole.
   Every frame is 16:9 because every one of these images is roughly 16:9 --
   the old 4:3 thumbnails were cropping the sides off all of them.
   ========================================================================= */
/* .sec-head is capped at 62ch, which is right for a paragraph and wrong for a
   row that also has to hold a button on the far side -- the cap was what pushed
   All articles onto its own line. The cap moves to the text half. */
.sec-head--row{
  max-width:none;
  display:flex; flex-wrap:wrap; align-items:flex-end;
  justify-content:space-between; gap: var(--s-5);
}
.sec-head--row > div{ max-width: 62ch; }

.mosaic{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--s-4); margin-top: var(--s-6);
}
/* The lead takes two columns and two rows; the two cards stacked beside it come
   out within a few pixels of its height on their own, because a 16:9 frame at a
   third of the width plus a title is almost exactly half a lead. Nothing has to
   stretch to make the block line up, which is what keeps every image at 16:9. */
.tile--lead{ grid-column: span 2; grid-row: span 2; }

@media (max-width: 1020px){
  .mosaic{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .tile--lead{ grid-column: span 2; grid-row: auto; }
}
@media (max-width: 620px){
  .mosaic{ grid-template-columns:1fr; }
  .tile--lead{ grid-column: span 1; }
}

.tile{
  background: var(--c-surface);
  border:1px solid var(--c-rule);
  border-radius: var(--radius-lg);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.tile:hover{
  border-color: var(--c-rule-strong); box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce){ .tile:hover{ transform:none; } }

.tile__media{
  display:block; aspect-ratio: 16 / 9; overflow:hidden;
  background: var(--c-surface-2);
  border-bottom:1px solid var(--c-rule);
}
.tile__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .4s ease;
}
.tile:hover .tile__media img{ transform: scale(1.04); }
@media (prefers-reduced-motion: reduce){ .tile:hover .tile__media img{ transform:none; } }

.tile__body{
  padding: var(--s-4) var(--s-5) var(--s-5);
  display:flex; flex-direction:column; gap: var(--s-2); flex:1;
}
.tile__kicker{
  margin:0; display:flex; flex-wrap:wrap; align-items:center; gap: var(--s-2);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  font-family: var(--f-display); font-weight:700; color: var(--c-muted);
}
.tile__flag{
  color: var(--c-gold-ink); background: var(--c-gold);
  padding:.2rem .5rem; border-radius:4px;
}
.tile__title{
  margin:0; font-family: var(--f-display); font-weight:650;
  line-height:1.3; letter-spacing:-.01em;
  font-size: var(--t-0);
}
.tile__title a{ color: var(--c-ink); text-decoration:none; }
.tile__title a:hover{ color: var(--c-accent); }
.tile__text{ margin:0; font-size: var(--t--1); line-height:1.65; color: var(--c-ink-2); }
.tile__more{
  margin-top:auto; padding-top: var(--s-3);
  display:inline-flex; align-items:center; gap:.35rem;
  font-size: var(--t--1); font-weight:600; color: var(--c-accent);
}
.tile__more svg{ width:13px; height:13px; flex:none; }
.tile:hover .tile__more{ text-decoration:underline; }

/* The lead is the only one with room for a headline at size and a summary
   under it; the other five are a title and a reading time. */
.tile--lead .tile__title{ font-size: var(--t-2); line-height:1.22; }
.tile--lead .tile__body{ padding: var(--s-5) var(--s-6) var(--s-6); gap: var(--s-3); }

/* Everything that is not the lead is the same card: a 16:9 frame, a reading
   time and a title. An earlier pass ran the two beside the lead horizontally,
   which meant their frame had to stretch to the card height -- and cover then
   took the crown off one image and the wordmark off the other. */
.tile:not(.tile--lead) .tile__body{ padding: var(--s-4) var(--s-4) var(--s-5); }

/* =========================================================================
   COVERAGE
   Eight regions in one column ran to roughly 600px of near-empty rows. Two
   columns halve it, and an open region takes the whole row so nothing empty
   opens beside it -- the FAQ above behaves the same way, for the same reason,
   and dense packing pulls the next region up into the vacated slot.
   ========================================================================= */
.geo{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--s-4); margin-top: var(--s-6);
  align-items:start; grid-auto-flow: dense;
}
.geo__g[open]{ grid-column: 1 / -1; }
@media (max-width: 860px){ .geo{ grid-template-columns:1fr; } }

.geo__g{
  background: var(--c-surface);
  border:1px solid var(--c-rule);
  border-radius: var(--radius-lg);
  overflow:hidden;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.geo__g:hover{ border-color: var(--c-rule-strong); }
.geo__g[open]{ border-color: var(--c-accent); box-shadow: var(--shadow-2); }

.geo__s{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
}
.geo__s::-webkit-details-marker{ display:none; }
.geo__pin{
  width:30px; height:30px; flex:none; border-radius:8px;
  display:grid; place-items:center;
  background: var(--c-navy); color: var(--c-gold);
}
.geo__pin svg{ width:16px; height:16px; }
.geo__n{
  flex:1 1 auto; min-width:0;
  font-family: var(--f-display); font-weight:650;
  font-size: var(--t-0); color: var(--c-ink);
}
.geo__g[open] .geo__n{ color: var(--c-accent); }
.geo__c{
  flex:none; font-size: var(--t--1); color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
.geo__sign{ width:18px; height:18px; flex:none; position:relative; color: var(--c-muted); }
.geo__sign::before, .geo__sign::after{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:2px; margin-top:-1px; background: currentColor; border-radius:2px;
  transition: transform .18s ease;
}
.geo__sign::after{ transform: rotate(90deg); }
.geo__g[open] .geo__sign{ color: var(--c-accent); }
.geo__g[open] .geo__sign::after{ transform: rotate(0deg); }

/* Chips rather than a link list: a city name is one or two words, and thirty of
   them in a grid of full-width rows is a lot of empty track per name. */
.geo__links{
  padding: 0 var(--s-5) var(--s-5);
  padding-left: calc(var(--s-5) + 30px + var(--s-3));
  display:flex; flex-wrap:wrap; gap: var(--s-2);
}
.geo__links a{
  font-size: var(--t--1); text-decoration:none; color: var(--c-ink-2);
  background: var(--c-surface-2);
  border:1px solid var(--c-rule);
  border-radius: 999px; padding:.3rem .75rem;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.geo__links a:hover{
  color: var(--c-accent); border-color: var(--c-accent);
  background: var(--c-accent-soft);
}

/* =========================================================================
   TESTIMONIALS -- Google review widget
   Built to the shape people already recognise: a summary bar carrying the score
   and the link out to the profile, then a rail of cards.
   The four reviews run from 41 to 230 characters, which is why the card holds
   three lines and hands the rest to a Read more. Every card is then the same
   size whatever its review says, and no review is edited to make that true.
   Stars are drawn only where test_images/reviews.json carries a rating and the
   bar only where it carries an aggregate, so with the file empty -- how it ships
   -- the section is plain cards with no Google marks. See the note in home.php.
   ========================================================================= */
/* The preview flag. Deliberately loud: this block only ever appears on a local
   hostname, and it has to be impossible to screenshot the sample data without
   the word SAMPLE in the frame. */
.rev-sample{
  margin: var(--s-5) 0 0; padding: var(--s-3) var(--s-4);
  border:1px dashed #B37400; border-left-width:4px; border-left-style:solid;
  border-radius: 6px; background: var(--c-accent-soft);
  font-size: var(--t--1); line-height:1.55; color: var(--c-ink-2);
}
.rev-sample strong{ color: var(--c-accent); }
.rev-sample code{ font-family: var(--f-mono); font-size:.92em; }

.rev-bar{
  margin-top: var(--s-6);
  padding: var(--s-5) var(--s-6);
  background: var(--c-surface-2);
  border:1px solid var(--c-rule);
  border-radius: var(--radius-lg);
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap: var(--s-4);
}
.rev-bar__title{
  margin:0; display:flex; align-items:center; gap:.5rem;
  font-family: var(--f-display); font-weight:700;
  font-size: var(--t-2); line-height:1.1; color: var(--c-ink);
}
.rev-bar__g svg{ width:24px; height:24px; display:block; }
.rev-bar__score{
  margin: var(--s-3) 0 0; display:flex; align-items:center; gap:.55rem; flex-wrap:wrap;
}
.rev-bar__num{
  font-family: var(--f-display); font-weight:700;
  font-size: var(--t-3); line-height:1; letter-spacing:-.02em;
  color: var(--c-ink); font-variant-numeric: tabular-nums;
}
.rev-bar__count{ font-size: var(--t--1); color: var(--c-muted); }
/* Google's own blue, because this button goes to Google and nowhere else. */
.rev-bar__cta{
  flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  padding:.72rem 1.35rem; border-radius:999px;
  background:#1A73E8; color:#fff; text-decoration:none;
  font-family: var(--f-display); font-weight:650; font-size: var(--t-0);
  transition: background .15s ease;
}
.rev-bar__cta:hover{ background:#1667D2; color:#fff; }
.rev-bar__cta:focus-visible{ outline:2px solid var(--c-ink); outline-offset:3px; }

/* --- the rail ------------------------------------------------------------ */
.rev-rail{ position:relative; margin-top: var(--s-5); }
.rev{
  display:flex; gap: var(--s-4);
  overflow-x:auto; scroll-snap-type: x mandatory;
  padding: var(--s-2) 2px;              /* room for the cards' focus ring */
  scrollbar-width:thin;
}
.rev > *{ scroll-snap-align:start; }
.rev__card{
  flex:0 0 calc((100% - var(--s-4) * 3) / 4);
  min-width: 232px;
  margin:0; padding: var(--s-5);
  background: var(--c-surface);
  border:1px solid var(--c-rule);
  border-radius: var(--radius-lg);
  display:flex; flex-direction:column; gap: var(--s-3);
  transition: border-color .16s ease, box-shadow .16s ease;
}
@media (max-width: 1000px){ .rev__card{ flex-basis: calc((100% - var(--s-4) * 2) / 3); } }
@media (max-width: 780px){ .rev__card{ flex-basis: calc((100% - var(--s-4)) / 2); } }
@media (max-width: 560px){ .rev__card{ flex-basis: 84%; } }
.rev__card:hover{ border-color: var(--c-rule-strong); box-shadow: var(--shadow-2); }

.rev__top{ display:flex; align-items:center; gap: var(--s-3); }
/* A disc with the initial, not a face. The four photographs in test_images/ are
   stock portraits; Google draws exactly this for a reviewer with no photo. */
.rev__pic{
  width:42px; height:42px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  font-family: var(--f-display); font-weight:700; font-size: var(--t-1);
  color:#fff;
}
.rev__id{ min-width:0; }
/* The name wraps rather than truncating. A card is about 215px wide and plenty
   of real names do not fit on one line of it; an ellipsis through somebody name
   is worse than a second line. The company and date below it do truncate, which
   is what Google does with them too. */
.rev__who{
  display:block; font-family: var(--f-display); font-weight:650;
  font-size: var(--t-0); line-height:1.3; color: var(--c-ink);
}
.rev__meta{
  display:block; font-size: var(--t--1); color: var(--c-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rev__src{ margin-left:auto; flex:none; }
.rev__src svg{ width:19px; height:19px; display:block; }

.rev__stars{ display:flex; gap:2px; }
.rev__stars svg{ width:17px; height:17px; display:block; }
.rev__stars .is-on svg{ fill:#FBBC04; }              /* the Google review star */
.rev__stars .is-off svg{ fill: var(--c-rule-strong); }

/* Three lines, then Read more. min-height holds a one-line review to the same
   card size as a six-line one, so the rail reads as a row of equal cards. */
.rev__txt{
  margin:0; font-size: var(--t--1); line-height:1.6; color: var(--c-ink-2);
  min-height: calc(1.6em * 3);
}
.rev__body summary .rev__txt{
  display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:3; line-clamp:3; overflow:hidden;
}
.rev__body[open] summary .rev__txt{
  -webkit-line-clamp:unset; line-clamp:unset; overflow:visible;
}
.rev__body summary{ list-style:none; cursor:pointer; }
.rev__body summary::-webkit-details-marker{ display:none; }
.rev__more{
  display:inline-block; margin-top:.4rem;
  font-size: var(--t--1); font-weight:600; color:#1A73E8;
}
.rev__more::after{ content: attr(data-more); }
.rev__body[open] .rev__more::after{ content: attr(data-less); }
.rev__body summary:hover .rev__more{ text-decoration:underline; }

/* --- the arrows ---------------------------------------------------------- */
/* app.js unhides these, and only when the rail overflows. */
.rev-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background: var(--c-surface); color: var(--c-ink);
  border:1px solid var(--c-rule); box-shadow: var(--shadow-2);
  cursor:pointer; padding:0;
  transition: background .15s ease, border-color .15s ease;
}
.rev-nav[hidden]{ display:none; }
.rev-nav:hover{ background: var(--c-surface-2); border-color: var(--c-rule-strong); }
.rev-nav:focus-visible{ outline:2px solid var(--c-accent); outline-offset:2px; }
.rev-nav svg{ width:18px; height:18px; }
.rev-nav--prev{ left:-14px; }
.rev-nav--next{ right:-14px; }
@media (max-width: 900px){ .rev-nav{ display:none; } }

/* --- sticky mobile action bar ------------------------------------------- */
.callbar{ display:none; }
@media (max-width: 720px){
  .callbar{
    display:grid; grid-template-columns:1fr 1fr; gap:1px;
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    background: var(--c-rule); border-top:1px solid var(--c-rule);
    box-shadow: 0 -6px 20px rgba(0,27,69,.16);
  }
  .callbar a{
    display:flex; align-items:center; justify-content:center; gap:.45rem;
    padding: .85rem; font-family: var(--f-display); font-weight:650;
    font-size: var(--t--1); text-decoration:none;
  }
  .callbar svg{ width:16px; height:16px; }
  .callbar__call{ background: var(--c-navy); color:#fff; }
  .callbar__wa{ background: var(--c-whatsapp); color:#fff; }
  body{ padding-bottom: 56px; }
}


/* =========================================================================
   RICHER TREATMENT
   The five sites the client referenced share a playbook this design was not
   using: a utility bar above the header, a two-tone headline, a partner/trust
   badge next to the call to action, a floating gradient stat band, real
   channel artwork on every card, and visible proof of work. Every asset used
   below already exists in this installation - the nine channel images are the
   ones tbl_category already points at, and the campaign screenshots are the
   files sitting unused in case-study-images/.
   ========================================================================= */

/* --- utility bar -------------------------------------------------------- */
.topbar{
  background: var(--c-navy-deep);
  color: #9DB0CE;
  font-size: var(--t--1);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; gap: var(--s-4); min-height:40px; flex-wrap:wrap; }
.topbar__set{ display:flex; align-items:center; gap: var(--s-4); flex-wrap:wrap; }
.topbar__set > a + a{
  padding-left: var(--s-4); border-left: 1px solid rgba(255,255,255,.12);
}
.topbar a{ color:#C3D2E8; text-decoration:none; display:inline-flex; align-items:center; gap:.4rem; }
.topbar a:hover{ color:#fff; }
.topbar svg{ width:13px; height:13px; color: var(--c-gold); flex:none; }
.topbar__cta{
  color: var(--c-gold) !important; font-weight:600;
  border:1px solid rgba(255,194,25,.32); border-radius:100px;
  padding:.18rem .7rem;
  transition: background .15s ease, border-color .15s ease;
}
.topbar__cta:hover{ background: rgba(255,194,25,.12); border-color: var(--c-gold); color: var(--c-gold) !important; }
.topbar__cta svg{ width:14px; height:14px; }
@media (max-width: 720px){ .topbar{ display:none; } }

/* --- hero: two-tone headline + partner badge ---------------------------- */
.lead h1 em{ font-style:normal; color: var(--c-gold); }
.lead__lede strong{ color:#fff; font-weight:600; }


/* --- floating gradient stat band ---------------------------------------- */
/* =========================================================================
   STAT BAND
   It straddles the join: pulled 4rem up so it sits half on the navy hero and
   half on the light page, which is the one place a card can do that and mean
   something.

   It used to be a bright cyan-to-blue gradient, a third colour in a palette of
   navy and gold that appears nowhere else on the site. It is a white card now,
   which is also the more useful choice on this boundary -- against navy above
   and near-white below, white reads as a step forward rather than as another
   coloured slab.

   The Certified Google Partner credential is the first cell. It used to be a
   separate card at the bottom of the hero, exactly where this band lands, and
   the two collided every time the hero got shorter.
   ========================================================================= */
.statband{ margin-top: calc(var(--s-8) * -1); position:relative; z-index:5; }
.statband__card{
  background: var(--c-surface);
  border:1px solid var(--c-rule);
  border-radius: 16px;
  box-shadow: 0 22px 50px rgba(0,27,69,.22);
  /* the credential cell is wider so "Certified Google Partner" sits on one line */
  display:grid; grid-template-columns: 1.7fr repeat(4, minmax(0,1fr));
  overflow:hidden;
}
@media (max-width: 1040px){ .statband__card{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px){ .statband__card{ grid-template-columns:1fr; } }

/* --- the credential ------------------------------------------------------ */
.statband__cred{
  display:flex; align-items:center; gap: var(--s-4);
  padding: var(--s-5);
  background: var(--c-surface-2);
  border-right:1px solid var(--c-rule);
}
@media (max-width: 1040px){
  .statband__cred{ grid-column: 1 / -1; border-right:0; border-bottom:1px solid var(--c-rule); }
}
.statband__cred img{
  width:88px; height:auto; flex:none; display:block;
  border-radius:6px; border:1px solid var(--c-rule);
}
.statband__cred span{
  font-size: var(--t--1); line-height:1.5; color: var(--c-ink-2);
}
.statband__cred b{
  display:block; color: var(--c-ink);
  font-family: var(--f-display); font-weight:650; font-size: var(--t-0);
  margin-bottom:.15rem;
}

/* --- the numbers --------------------------------------------------------- */
.statband__item{
  padding: var(--s-5) var(--s-4);
  text-align:center;
  border-right:1px solid var(--c-rule);
  display:flex; flex-direction:column; justify-content:center;
}
.statband__item:last-child{ border-right:0; }
@media (max-width: 1040px){
  .statband__item:nth-child(odd){ border-right:0; }
  .statband__item{ border-top:1px solid var(--c-rule); }
}
.statband__n{
  font-family: var(--f-display); font-weight:700;
  font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.2rem); line-height:1;
  letter-spacing:-.03em; color: var(--c-navy);
  font-variant-numeric: tabular-nums;
}
/* the gold is spent on one number: the one with a currency symbol on it */
.statband__item:last-child .statband__n{ color: var(--c-accent); }
.statband__k{
  display:block; margin-top:.45rem;
  font-size: var(--t--1); color: var(--c-muted); line-height:1.4;
}

/* --- channel cards with real artwork ------------------------------------ */
.chanc{ padding:0; overflow:hidden; }
.chanc__media{
  aspect-ratio: 16/9; background: var(--c-surface-2);
  border-bottom:1px solid var(--c-rule); overflow:hidden;
}
.chanc__media img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .3s ease; }
.chanc:hover .chanc__media img{ transform: scale(1.04); }
.chanc__in{ padding: var(--s-5); display:flex; flex-direction:column; flex:1 1 auto; }
.chanc__top{ display:flex; align-items:center; gap: var(--s-3); }
.chanc__mark{ width:34px; height:34px; font-size:var(--t--1); border-radius:8px; }

/* --- proof of work ------------------------------------------------------ */
.cases{ background: var(--c-surface-2); }
.case-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-5); margin-top: var(--s-6); }
@media (max-width: 980px){ .case-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px){ .case-grid{ grid-template-columns: 1fr; } }
/* A browser chrome around each screenshot, so it reads as "this is a real
   search result page" rather than as decorative artwork. */
.case{
  background: var(--c-surface); border:1px solid var(--c-rule);
  border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-1);
}
.case__bar{
  display:flex; align-items:center; gap:6px;
  padding: var(--s-3) var(--s-4); background: var(--c-surface-2);
  border-bottom:1px solid var(--c-rule);
}
.case__dot{ width:9px; height:9px; border-radius:50%; background: var(--c-rule-strong); flex:none; }
.case__url{
  margin-left: var(--s-3); font-family: var(--f-mono); font-size:11px;
  color: var(--c-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.case__shot{ display:block; width:100%; height:auto; }
.case__cap{ padding: var(--s-4); font-size: var(--t--1); color: var(--c-ink-2); line-height:1.5; border-top:1px solid var(--c-rule); }

/* --- about, with the illustration the install already carries ----------- */
.about__grid{ display:grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: var(--s-7); align-items:center; }
@media (max-width: 860px){ .about__grid{ grid-template-columns:1fr; } }
.about__media img{ width:100%; height:auto; border-radius: var(--radius-lg); display:block; }

/* --- section heading rule ----------------------------------------------- */
.sec-head .eyebrow{ display:inline-flex; align-items:center; gap:.5rem; }
.sec-head .eyebrow::before{
  content:""; width:22px; height:3px; border-radius:2px;
  background: var(--c-gold); display:inline-block;
}

/* --- floating enquire button (desktop) ---------------------------------- */
.enquire{
  position:fixed; right: var(--s-5); bottom: var(--s-5); z-index:55;
  display:inline-flex; align-items:center; gap:.5rem;
  background: var(--c-whatsapp); color:#fff; text-decoration:none;
  padding:.7rem 1.1rem; border-radius:999px;
  font-family: var(--f-display); font-weight:650; font-size: var(--t--1);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}
.enquire:hover{ background:#17914A; color:#fff; }
.enquire svg{ width:18px; height:18px; }
@media (max-width: 720px){ .enquire{ display:none; } }   /* the call bar takes over */

/* =========================================================================
   SEARCH TERMS - live result previews
   Two earlier passes put the raw screenshots on the page, first as a grid and
   then behind tabs. Both failed for the same reason: a screenshot of Google is
   grey, dense and low-contrast, and no amount of framing makes it look
   designed. None of the referenced agency sites shows one.
   What is actually valuable inside those images is the ad copy. So the copy is
   lifted out and set as ad previews - which, on a PPC agency's site, is exactly
   the right thing to be looking at - and the screenshot moves behind a
   disclosure for anyone who wants to verify it.
   The section is dark on purpose: the page runs navy, light, light, light, and
   this puts a band of contrast back in the middle of it.
   ========================================================================= */
.serp{
  position: relative; overflow: hidden;
  background:
    radial-gradient(46rem 24rem at 85% -10%, rgba(255,194,25,.16), transparent 62%),
    radial-gradient(40rem 22rem at 5% 110%, rgba(0,110,220,.20), transparent 62%),
    linear-gradient(180deg, var(--c-navy) 0%, var(--c-navy-deep) 100%);
  color: var(--c-on-navy);
}
.serp::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(75% 70% at 50% 30%, #000 25%, transparent 100%);
  -webkit-mask-image: radial-gradient(75% 70% at 50% 30%, #000 25%, transparent 100%);
}
.serp > *{ position: relative; z-index: 1; }
.serp .sec-head h2{ color: #fff; }
.serp .sec-head p{ color: #BFD0E8; }
.serp .sec-head .eyebrow{ color: var(--c-gold); }

.serp__grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: var(--s-5); margin-top: var(--s-6);
}

/* --- one search --------------------------------------------------------- */
.term{
  display:flex; flex-direction:column;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.term:hover{ border-color: rgba(255,194,25,.5); transform: translateY(-3px); background: rgba(255,255,255,.07); }

/* The query, dressed as the search box it came from. */
.term__q{
  display:flex; align-items:center; gap: var(--s-3);
  background: rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  padding: .55rem .9rem;
}
.term__q svg{ width:15px; height:15px; flex:none; color: var(--c-gold); }
.term__qt{
  font-family: var(--f-mono); font-size: 12.5px; color:#fff;
  line-height:1.4; word-break: break-word;
}
.term__meta{
  margin: var(--s-3) 0 0; font-size: var(--t--1); color: var(--c-on-navy-muted);
  font-variant-numeric: tabular-nums;
}

/* --- the listings ------------------------------------------------------- */
.term__list{ list-style:none; margin: var(--s-4) 0 0; padding:0; display:grid; gap: var(--s-4); }
.ad{
  border-left:2px solid rgba(255,255,255,.16);
  padding-left: var(--s-4);
}
.ad__top{ display:flex; align-items:center; gap: var(--s-2); flex-wrap:wrap; }
.ad__tag{
  font-family: var(--f-display); font-weight:700; font-size:10px;
  letter-spacing:.08em; text-transform:uppercase;
  padding:.12rem .38rem; border-radius:3px;
}
.ad__tag--ad{ background: var(--c-gold); color: var(--c-gold-ink); }
.ad__tag--organic{ background: rgba(88,196,168,.18); color:#7FE0C4; border:1px solid rgba(88,196,168,.35); }
.ad__url{ font-size: var(--t--1); color:#9DB0CE; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
/* Google's own dark-mode link blue, so the preview reads as a real result. */
.ad__title{
  display:block; margin-top:.2rem;
  font-size: var(--t-0); line-height:1.35; color:#A8C7FA;
  font-weight:500;
}
.term:hover .ad__title{ color:#C6DAFC; }

/* --- verification disclosure -------------------------------------------- */
.term__proof{ margin-top: auto; padding-top: var(--s-5); }
.term__proof summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:.4rem;
  font-family: var(--f-display); font-weight:650; font-size: var(--t--1);
  color: var(--c-gold);
}
.term__proof summary::-webkit-details-marker{ display:none; }
.term__proof summary:hover{ color:#FFD256; }
.term__proof summary svg{ width:13px; height:13px; transition: transform .18s ease; }
.term__proof[open] summary svg{ transform: rotate(90deg); }
.term__proof img{
  display:block; width:100%; height:auto; margin-top: var(--s-4);
  border-radius: var(--radius); border:1px solid rgba(255,255,255,.16);
  background:#fff;
}

.serp__note{
  margin-top: var(--s-6); font-size: var(--t--1); color: var(--c-on-navy-muted);
  line-height:1.6; max-width: 78ch;
}
.serp__note a{ color: var(--c-gold); font-weight:600; text-decoration:none; }
.serp__note a:hover{ text-decoration:underline; }

/* =========================================================================
   WHY US
   Third attempt, and the first two failed for the same reason: the source is
   eight labels of two to four words with no descriptions anywhere in the
   database. Eight big cards - ticks first, then a bento - both left a void
   inside every tile, because there was nothing to put in them. Inflating a
   three-word label into a card-sized block cannot be done without writing
   copy, and writing copy here would be inventing claims.
   So the layout is sized to the content instead: the three points that carry a
   figure become a compact stat stack beside the heading, and the five
   qualitative ones become a tight list of rows. Every element is now as big as
   what it holds, which is why the emptiness is gone.
   ========================================================================= */
.whyx{
  background:
    radial-gradient(40rem 22rem at 92% 8%, rgba(255,194,25,.10), transparent 60%),
    var(--c-surface-2);
}
.whyx__split{
  display:grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr);
  gap: var(--s-7); align-items:start; margin-top: var(--s-2);
}
@media (max-width: 900px){ .whyx__split{ grid-template-columns:1fr; gap: var(--s-6); } }

/* --- left: heading + the three figures ---------------------------------- */
.whyx__stats{
  margin-top: var(--s-6);
  border:1px solid var(--c-rule);
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, var(--c-navy-2) 0%, var(--c-navy) 100%);
  overflow:hidden;
}
.wstat{
  display:flex; align-items:center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.wstat:last-child{ border-bottom:0; }
.wstat__ico{
  width:36px; height:36px; flex:none; border-radius:9px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.10); color: var(--c-gold);
}
.wstat__ico svg{ width:18px; height:18px; }
.wstat__n{
  font-family: var(--f-display); font-weight:700; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2rem); line-height:1;
  color: var(--c-gold); font-variant-numeric: tabular-nums;
  flex:none; min-width: 4.6ch;
}
.wstat__k{ font-size: var(--t--1); color:#C7D6EC; line-height:1.4; }
.whyx__cta{ margin-top: var(--s-5); }

/* --- right: the five qualitative points --------------------------------- */
.whyx__list{
  list-style:none; margin:0; padding:0;
  background: var(--c-surface);
  border:1px solid var(--c-rule);
  border-radius: var(--radius-lg);
  overflow:hidden;
}
.wrow{
  display:flex; align-items:center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-bottom:1px solid var(--c-rule);
  transition: background .15s ease, padding-left .15s ease;
}
.wrow:last-child{ border-bottom:0; }
.wrow:hover{ background: var(--c-surface-2); padding-left: calc(var(--s-5) + 4px); }
.wrow__ico{
  width:38px; height:38px; flex:none; border-radius:10px;
  display:grid; place-items:center;
  background: var(--c-accent-soft); color: var(--c-accent);
}
.wrow__ico svg{ width:19px; height:19px; }
.wrow__t{
  font-family: var(--f-display); font-weight:600;
  font-size: var(--t-0); line-height:1.35; color: var(--c-ink); margin:0;
}

/* =========================================================================
   PRICING
   The previous version printed the two figures in cards and then printed the
   same two figures again in the note underneath, because the note is the whole
   pricing paragraph and the paragraph states the prices. Reading it, you were
   told 8000 and 5000 twice in a row.
   Now the tiers carry the figures and the note keeps only the caveats - the
   two numbered points about ad credit and about the price varying. One panel,
   each fact stated once.
   ========================================================================= */
.plan{
  margin-top: var(--s-6);
  background: var(--c-surface);
  border:1px solid var(--c-rule);
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-2);
}
.plan__tiers{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 760px){ .plan__tiers{ grid-template-columns:1fr; } }

.tier{ padding: var(--s-6); }
.tier + .tier{ border-left:1px solid var(--c-rule); }
@media (max-width: 760px){ .tier + .tier{ border-left:0; border-top:1px solid var(--c-rule); } }

/* The first month is the one being sold, so it takes the brand ground. */
.tier--lead{
  background: linear-gradient(155deg, var(--c-navy-2) 0%, var(--c-navy) 100%);
  color:#fff;
}
.tier--lead + .tier{ border-left-color: transparent; }

.tier__chip{
  display:inline-block;
  font-family: var(--f-display); font-weight:700; font-size:10.5px;
  letter-spacing:.09em; text-transform:uppercase;
  padding:.22rem .55rem; border-radius:4px;
  background: var(--c-gold); color: var(--c-gold-ink);
}
.tier--plain .tier__chip{ background: var(--c-surface-2); color: var(--c-muted); }
.tier__fig{ display:flex; align-items:baseline; gap:.4rem; margin-top: var(--s-4); flex-wrap:wrap; }
.tier__amt{
  font-family: var(--f-display); font-weight:700; letter-spacing:-.025em;
  font-size: clamp(2.1rem, 1.5rem + 2vw, 2.9rem); line-height:1;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
}
.tier--lead .tier__amt{ color: var(--c-gold); }
.tier__per{ font-size: var(--t--1); color: var(--c-muted); }
.tier--lead .tier__per{ color:#A9BEDC; }
.tier__desc{
  margin: var(--s-4) 0 0; font-size: var(--t--1); line-height:1.6;
  color: var(--c-ink-2);
}
.tier--lead .tier__desc{ color:#C7D6EC; }

/* --- the caveats + the action ------------------------------------------- */
.plan__foot{
  background: var(--c-surface-2);
  border-top:1px solid var(--c-rule);
  padding: var(--s-6);
  display:grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr);
  gap: var(--s-6); align-items:center;
}
@media (max-width: 860px){ .plan__foot{ grid-template-columns:1fr; gap: var(--s-5); } }
.plan__notes{ list-style:none; margin:0; padding:0; display:grid; gap: var(--s-3); }
.plan__notes li{ display:flex; gap: var(--s-3); align-items:flex-start; }
.plan__notes svg{ width:16px; height:16px; flex:none; margin-top:.16rem; color: var(--c-accent); }
.plan__notes span{ font-size: var(--t--1); line-height:1.6; color: var(--c-ink-2); }
.plan__act{ display:grid; gap: var(--s-3); justify-items:start; }
@media (min-width: 861px){ .plan__act{ justify-items:end; text-align:right; } }
.plan__lead{
  margin:0; font-family: var(--f-display); font-weight:650;
  font-size: var(--t-0); color: var(--c-ink); line-height:1.4;
}

/* =========================================================================
   ABOUT
   The illustration is a 503x496 square. The old rule let it fill its grid
   column, so it rendered around 700px wide and towered over two sentences of
   copy -- the section read as a picture with a caption.
   The image is now held in a fixed, tinted frame at its own scale, the text
   column is the wider of the two, and the channels named in the sentence are
   rendered as links so the block does some navigational work instead of just
   sitting there. The copy is 262 characters and that is all there is; the
   layout is built for that length rather than stretched past it.
   ========================================================================= */
.about2{
  display:grid; grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr);
  gap: var(--s-7); align-items:center; margin-top: var(--s-5);
}
@media (max-width: 860px){ .about2{ grid-template-columns:1fr; gap: var(--s-6); } }

.about2__media{
  background:
    radial-gradient(22rem 16rem at 50% 30%, rgba(255,194,25,.16), transparent 65%),
    var(--c-surface-2);
  border:1px solid var(--c-rule);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  display:grid; place-items:center;
}
.about2__media img{
  display:block; width:100%; max-width: 300px; height:auto;
  mix-blend-mode: multiply;          /* the PNG ships a white ground */
}
/* multiply turns the artwork black on a dark surface, so it is dropped there
   and the frame carries the contrast instead. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .about2__media img{ mix-blend-mode: normal; }
  :root:not([data-theme="light"]) .about2__media{ background: #fff; }
}
:root[data-theme="dark"] .about2__media img{ mix-blend-mode: normal; }
:root[data-theme="dark"] .about2__media{ background: #fff; }

.about2__body .rich p{ font-size: var(--t-1); line-height:1.65; color: var(--c-ink-2); }
.about2__body .rich p:last-child{ margin-bottom:0; }

.about2__label{
  margin: var(--s-6) 0 var(--s-3);
  font-family: var(--f-display); font-weight:700; font-size: var(--t--1);
  letter-spacing:.08em; text-transform:uppercase; color: var(--c-muted);
}
.about2__chips{ display:flex; flex-wrap:wrap; gap: var(--s-2); list-style:none; margin:0; padding:0; }
.about2__chips a{
  display:inline-block;
  font-size: var(--t--1); font-weight:500; text-decoration:none;
  color: var(--c-ink-2);
  background: var(--c-surface); border:1px solid var(--c-rule);
  border-radius: 999px; padding:.34rem .8rem;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.about2__chips a:hover{
  color: var(--c-accent); border-color: var(--c-accent);
  background: var(--c-accent-soft);
}
.about2__act{ display:flex; flex-wrap:wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* =========================================================================
   FAQ
   The old treatment was nine hairline rows in a single column, every one shut.
   That is roughly 900px of near-empty page that tells a reader nothing until
   they start clicking, and nine rows beginning "What are ... Ads?" read as one
   sentence repeated nine times.
   Two columns halves the height, each item is a card so the rows have edges,
   and the channel's initial sits on every one so they are told apart at a
   glance.
   ========================================================================= */
/* Two things are being avoided here, and they are the same thing seen twice.
   Stretching the row made the shut card beside an open one grow to match, and it
   had nothing to put in the space. Leaving the row unstretched instead left the
   space empty beside the open card. Either way a box you did not click changed.
   So an open card takes the whole row (grid-column below) and there is no beside
   any more; align-items:start keeps every shut card at its own height, and dense
   packing pulls the next card up into the slot the open one vacated, so the grid
   never carries a hole.
   All nine load shut -- the section is a list first, and opens on click. */
.faq2{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--s-4); margin-top: var(--s-6);
  align-items:start; grid-auto-flow: dense;
}
.qa[open]{ grid-column: 1 / -1; }
@media (max-width: 860px){ .faq2{ grid-template-columns:1fr; } }

.qa{
  background: var(--c-surface);
  border:1px solid var(--c-rule);
  border-radius: var(--radius-lg);
  overflow:hidden;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.qa:hover{ border-color: var(--c-rule-strong); }
.qa[open]{ border-color: var(--c-accent); box-shadow: var(--shadow-2); }

.qa__q{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
}
.qa__q::-webkit-details-marker{ display:none; }
.qa__mark{
  width:30px; height:30px; flex:none; border-radius:8px;
  display:grid; place-items:center;
  background: var(--c-navy); color: var(--c-gold);
  font-family: var(--f-display); font-weight:700; font-size: var(--t--1);
}
.qa__t{
  flex:1 1 auto; min-width:0;
  font-family: var(--f-display); font-weight:600;
  font-size: var(--t-0); line-height:1.35; color: var(--c-ink);
}
.qa[open] .qa__t{ color: var(--c-accent); }
.qa__sign{ width:18px; height:18px; flex:none; position:relative; color: var(--c-muted); }
.qa__sign::before, .qa__sign::after{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:2px; margin-top:-1px; background: currentColor; border-radius:2px;
  transition: transform .18s ease;
}
.qa__sign::after{ transform: rotate(90deg); }
.qa[open] .qa__sign{ color: var(--c-accent); }
.qa[open] .qa__sign::after{ transform: rotate(0deg); }

.qa__a{
  padding: 0 var(--s-5) var(--s-5);
  /* line the answer up under the question text, past the initial tile */
  padding-left: calc(var(--s-5) + 30px + var(--s-3));
}
.qa__a p{ margin:0; font-size: var(--t--1); line-height:1.65; color: var(--c-ink-2); }
.qa__more{
  display:inline-flex; align-items:center; gap:.35rem;
  margin-top: var(--s-3);
  font-size: var(--t--1); font-weight:600; color: var(--c-accent); text-decoration:none;
}
.qa__more:hover{ color: var(--c-accent-hover); text-decoration:underline; }
/* The shared arrow icon has no intrinsic size; without this it renders about
   50px wide and wraps the label onto three lines. */
.qa__more svg{ width:13px; height:13px; flex:none; }

/* The open card is the full width of the section. A line of text that wide is
   unreadable, so the answer keeps a measure and the link to the full page takes
   the room beside it rather than that room being left blank. */
@media (min-width: 861px){
  .qa[open] .qa__a{
    display:grid; grid-template-columns: minmax(0,1fr) auto;
    gap: var(--s-6); align-items:center;
  }
  .qa[open] .qa__a p{ max-width: 74ch; font-size: var(--t-0); }
  .qa[open] .qa__more{ margin-top:0; white-space:nowrap; }
}

/* =========================================================================
   FOOTER
   The old one was the five-equal-columns footer every site has: the logo given
   the same width as a list of nine one-word links, a brand column that ran out
   of content two thirds of the way down, and everything set at one weight so
   nothing led.

   Three tiers instead. A masthead the full width of the page, three link
   columns under it with the two long lists running in two tracks each so they
   come out the same depth, then the page links as one inline row, the two
   addresses, and the legal line. A gold hairline across the top gives the whole
   block a top edge instead of letting it bleed out of the CTA band above it.
   ========================================================================= */
/* The base sheet paints the footer on a light surface. It has been navy since
   the rebuild, and that override lived in the block this file used to end with,
   so it belongs here now -- one place, not two. The footer goes a shade deeper
   than the CTA band directly above it, or the two read as one navy slab. */
.site-footer{
  background: var(--c-navy-deep);
  border-top: 3px solid var(--c-gold);
  margin-top: 0;
}
.site-footer__base{
  border-top:1px solid rgba(255,255,255,.09);
  padding-block: var(--s-4);
  display:flex; flex-wrap:wrap; gap: var(--s-3);
  justify-content:space-between;
  font-size: var(--t--1); color:#8FA6C4;
}

/* --- masthead ------------------------------------------------------------ */
/* One line: the logo on the left, the social row on the right, both on the same
   centre. It was two lines while the about crop sat under the logo. */
.ft-top{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap: var(--s-5);
  padding-block: var(--s-6) var(--s-5);
}
.ft-top__logo{ display:block; }
.ft-top__social{ flex:none; display:flex; align-items:center; gap: var(--s-4); }
.ft-top__sociallabel{
  margin:0; font-family: var(--f-display); font-weight:700;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--c-gold);
}
.social{ display:flex; flex-wrap:wrap; gap: var(--s-2); }
.social a{
  width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.16); color:#C3D2E8;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.social a svg{ width:16px; height:16px; }
.social a:hover{
  background: var(--c-gold); border-color: var(--c-gold); color: var(--c-gold-ink);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce){ .social a:hover{ transform:none; } }

/* --- the three columns --------------------------------------------------- */
.ft-cols{
  display:grid; grid-template-columns: 1.25fr 1.15fr .95fr;
  gap: var(--s-6);
  padding-block: var(--s-5);
  border-top:1px solid rgba(255,255,255,.09);
}
@media (max-width: 940px){ .ft-cols{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .ft-cols{ grid-template-columns:1fr; gap: var(--s-5); } }

.site-footer h4{
  font-family: var(--f-display); font-weight:700;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color: var(--c-gold); margin:0 0 var(--s-4);
}
.ft-col__list{ list-style:none; margin:0; padding:0; display:grid; gap: var(--s-2) var(--s-5); }
/* Nine services and nine areas set the height of the whole footer when they ran
   in one track each. Two tracks puts both at five rows. */
.ft-col__list--split{ grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 620px){ .ft-col__list--split{ grid-template-columns:1fr; } }
.site-footer a{ color:#C3D2E8; text-decoration:none; font-size: var(--t--1); }
.site-footer a:hover{ color:#fff; text-decoration:underline; }
.ft-col__all{ color: var(--c-gold) !important; font-weight:600; }

/* --- talk to us ---------------------------------------------------------- */
.ft-reach__list{ list-style:none; margin:0; padding:0; display:grid; gap: var(--s-3); }
.ft-reach__list li{ display:flex; align-items:center; gap: var(--s-3); }
.ft-reach__ico{
  width:30px; height:30px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  background: rgba(255,255,255,.07); color: var(--c-gold);
}
.ft-reach__ico svg{ width:14px; height:14px; stroke: currentColor; }
.ft-reach__list a{ word-break:break-word; }
/* --- the page links, as one row ------------------------------------------ */
/* Six short page names. As a column they were a fifth of the footer's width for
   six words; as a row they are one line and the columns get the space. */
.ft-inline{
  display:flex; flex-wrap:wrap; gap: var(--s-2) var(--s-5);
  padding-block: var(--s-3);
  border-top:1px solid rgba(255,255,255,.09);
}
.ft-inline a{
  font-family: var(--f-display); font-weight:600; font-size: var(--t--1);
  color:#DCE7F5;
}

/* --- addresses ----------------------------------------------------------- */
.ft-addr{
  border-top:1px solid rgba(255,255,255,.09);
  padding-block: var(--s-4);
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-5);
}
@media (max-width: 720px){ .ft-addr{ grid-template-columns:1fr; } }
.ft-addr__item{ display:flex; gap: var(--s-3); align-items:flex-start; }
.ft-addr__item .ft-reach__ico{ margin-top:2px; }
.ft-addr address{
  font-style:normal; font-size: var(--t--1); line-height:1.6; color:#A9BEDC;
}
.ft-addr address strong{
  display:block; color:#fff;
  font-family: var(--f-display); font-weight:650;
  letter-spacing:.06em; text-transform:uppercase; font-size:11px;
  margin-bottom:.25rem;
}
.ft-addr address span{ display:block; }

/* =========================================================================
   PRE-FOOTER CALL TO ACTION
   The old band was full-bleed navy with margin-top:4rem sitting on top of the
   previous section's 3rem of bottom padding -- 7rem of empty white between the
   last location card and the band, which is what the page looked like it was
   ending twice.
   It is a panel now. The section has no bottom padding and the panel drops into
   the top of the footer, so the gap is closed by the construction rather than by
   trimming a number, and the seam between page and footer becomes the one place
   on the page where something deliberately crosses it.
   ========================================================================= */
/* No bottom padding at all -- the panel is what ends the page. The top is one
   step tighter than a normal section gap because the section above it already
   carries 3rem of its own. */
.cta{ padding-block: var(--s-6) 0; }

.cta__panel{
  position:relative; z-index:2;
  /* the overlap: the panel finishes inside the footer */
  margin-bottom: calc(var(--s-6) * -1);
  padding: var(--s-7);
  border-radius: 18px;
  color:#fff;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 24px 60px rgba(0,16,43,.34);
  background:
    /* the same grid the hero and the blog covers carry */
    repeating-linear-gradient(0deg,  rgba(255,255,255,.045) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 60px),
    radial-gradient(38rem 22rem at 92% 4%, rgba(255,194,25,.30), transparent 62%),
    linear-gradient(135deg, var(--c-navy-2) 0%, var(--c-navy-deep) 78%);
  display:grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: var(--s-7); align-items:center;
}
@media (max-width: 900px){
  .cta__panel{ grid-template-columns:1fr; gap: var(--s-5); padding: var(--s-6); }
}

.cta__eyebrow{
  margin:0 0 var(--s-3); font-family: var(--f-display); font-weight:700;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color: var(--c-gold);
}
.cta__copy h2{
  color:#fff; margin:0 0 var(--s-3);
  font-size: var(--t-4); letter-spacing:-.02em; text-wrap:balance; line-height:1.1;
}
.cta__copy p{ margin:0; color:#BFD0E8; max-width: 46ch; line-height:1.65; }

/* --- the actions ---------------------------------------------------------
   Three rows rather than two buttons, each carrying the number or the address
   itself. "Call" tells you nothing you did not know; the number is the reason
   to press it, and on a phone it is also what gets dialled. */
.cta__acts{ display:grid; gap: var(--s-3); }
.cta__act{
  display:flex; align-items:center; gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-radius: 12px;
  background: rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.10);
  text-decoration:none; color:#fff;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.cta__act:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
  transform: translateX(3px);
  color:#fff;
}
@media (prefers-reduced-motion: reduce){ .cta__act:hover{ transform:none; } }

.cta__ico{
  width:42px; height:42px; flex:none; border-radius:10px;
  display:grid; place-items:center;
}
.cta__ico svg{ width:19px; height:19px; }
.cta__act--call .cta__ico{ background: var(--c-gold); color: var(--c-gold-ink); }
.cta__act--wa   .cta__ico{ background: var(--c-whatsapp); color:#fff; }
.cta__act--mail .cta__ico{ background: rgba(255,255,255,.14); color:#fff; }

.cta__txt{ display:grid; min-width:0; }
.cta__k{
  font-family: var(--f-display); font-weight:700;
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#9FB6D6;
}
.cta__v{
  font-family: var(--f-display); font-weight:650; font-size: var(--t-0);
  color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Room for the panel to land in. The gold rule still runs the full width and
   passes behind it. */
.site-footer{ padding-top: var(--s-6); }

/* =========================================================================
   ABOUT PAGE
   The page's own CMS copy is a single forty-word paragraph, so the layout
   cannot lean on prose. It leans on the things this installation actually
   holds instead -- the channel list, the fee, the why-choose-us list, the
   location surface, the two office addresses -- and reuses the homepage's
   blocks for all of them so the two pages read as one site.
   ========================================================================= */

/* The hero lede here is CMS HTML rather than a plain string, so it needs the
   .rich rules to survive the navy ground. */
.lead__copy{ margin-top: var(--s-4); max-width: 52ch; }
.lead__copy p{ color:#C7D6EC; font-size: var(--t-1); line-height:1.6; }
.lead__copy p + p{ margin-top: var(--s-3); }
.lead__copy a{ color: var(--c-gold); }
.lead__copy :is(strong, b){ color:#fff; }
/* CKEditor leaves empty paragraphs behind; they would print as blank lines. */
.lead__copy p:empty{ display:none; }

/* --- the nine channels, as a list rather than nine more cards -------------
   The homepage already gives every channel a full card with artwork and a
   blurb. Repeating that here would be the same section twice on one site, so
   this is the index version: name, how many formats its own page lists, and a
   way in. Three columns of short rows instead of nine tall cards. */
.chanlist{
  list-style:none; margin: var(--s-6) 0 0; padding:0;
  display:grid; gap: var(--s-3);
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 900px){ .chanlist{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .chanlist{ grid-template-columns: 1fr; } }

.chanrow{
  display:flex; align-items:center; gap: var(--s-3);
  padding: var(--s-4) var(--s-4);
  background: var(--c-surface); border:1px solid var(--c-rule);
  border-radius: var(--radius-lg); text-decoration:none; color: var(--c-ink);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.chanrow:hover{
  border-color: var(--c-accent); color: var(--c-ink);
  transform: translateY(-2px); box-shadow: var(--shadow-2);
}
.chanrow__mark{
  width:34px; height:34px; flex:none; border-radius:9px;
  display:grid; place-items:center;
  background: var(--c-navy); color: var(--c-gold);
  font-family: var(--f-display); font-weight:800; font-size: var(--t--1);
}
.chanrow__name{
  font-family: var(--f-display); font-weight:650; font-size: var(--t-0);
  line-height:1.25; min-width:0;
}
.chanrow__n{
  margin-left:auto; flex:none;
  font-size: var(--t--1); color: var(--c-muted);
  font-variant-numeric: tabular-nums; white-space:nowrap;
}
.chanrow__go{ flex:none; color: var(--c-muted); display:grid; place-items:center; }
.chanrow__go svg{ width:17px; height:17px; }
.chanrow:hover .chanrow__go{ color: var(--c-accent); }
@media (prefers-reduced-motion: reduce){ .chanrow:hover{ transform:none; } }

/* --- offices + the ways to reach them ------------------------------------
   Two addresses and four contact rows, all of them fields of tbl_admin that
   until now only the footer printed. */
.offices{
  display:grid; gap: var(--s-4); margin-top: var(--s-6);
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 900px){ .offices{ grid-template-columns: 1fr; } }

.office{
  display:flex; gap: var(--s-3); align-items:flex-start;
  background: var(--c-surface); border:1px solid var(--c-rule);
  border-radius: var(--radius-lg); padding: var(--s-5);
}
.office__pin{
  width:34px; height:34px; flex:none; border-radius:10px;
  display:grid; place-items:center;
  background: var(--c-accent-soft); color: var(--c-accent);
}
.office__pin svg{ width:19px; height:19px; }
.office__c{
  margin:0; font-family: var(--f-display); font-weight:700;
  font-size: var(--t--1); letter-spacing:.09em; text-transform:uppercase;
  color: var(--c-ink);
}
.office__a{
  margin: var(--s-2) 0 0; font-style:normal;
  font-size: var(--t--1); line-height:1.65; color: var(--c-ink-2);
}
.office--reach{ background: var(--c-surface-2); }

.reach{ list-style:none; margin:0; padding:0; display:grid; gap: var(--s-3); width:100%; }
.reach li{ display:flex; gap: var(--s-3); align-items:center; }
.reach__ico{
  width:30px; height:30px; flex:none; border-radius:8px;
  display:grid; place-items:center;
  background: var(--c-surface); border:1px solid var(--c-rule); color: var(--c-accent);
}
.reach__ico svg{ width:16px; height:16px; }
.reach a{
  font-size: var(--t--1); color: var(--c-ink); text-decoration:none;
  font-weight:500; word-break:break-word;
}
.reach a:hover{ color: var(--c-accent); text-decoration:underline; }

/* The about hero carries a picture where the homepage carries the price panel.
   A picture has no natural bottom edge to line up with, so the two columns are
   centred against each other rather than top-aligned, and the artwork is capped
   -- the uploaded file is nearly square and at full column width it made the
   hero twice as tall as its own text. */
.lead--about .lead__grid{ align-items:center; }
.lead--about .hero__media img{
  max-height: 25rem; width:auto; margin-inline:auto;
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.14);
}
@media (max-width: 900px){
  .lead--about .hero__media img{ max-height:18rem; }
}

/* =========================================================================
   CONTACT PAGE
   tbl_site_pages carries no copy at all for this page, so nothing here is
   laid out around prose. It is laid out around the two things a contact page
   exists to do: put the direct routes in front of someone who wants to talk
   now, and give someone who does not a form that works.
   ========================================================================= */

.lead__grid--contact{
  grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr);
  align-items:center;
}
@media (max-width: 900px){ .lead__grid--contact{ grid-template-columns:1fr; } }

/* --- the direct routes, on the navy ---------------------------------------
   Rows rather than buttons: each one carries the number itself, because the
   number is the reason to tap it. */
.direct{ list-style:none; margin: var(--s-5) 0 0; padding:0; display:grid; gap: var(--s-2); max-width: 24rem; }
.direct__row{
  display:flex; align-items:center; gap: var(--s-3);
  padding: .6rem var(--s-3);
  border-radius: 11px; text-decoration:none;
  background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.13);
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.direct__row:hover{
  background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.3);
  transform: translateX(2px);
}
.direct__ico{
  width:32px; height:32px; flex:none; border-radius:9px;
  display:grid; place-items:center; color: var(--c-gold-ink); background: var(--c-gold);
}
.direct__row--wa .direct__ico{ background: var(--c-whatsapp); color:#fff; }
.direct__row--mail .direct__ico{ background: rgba(255,255,255,.14); color:#fff; }
.direct__ico svg{ width:17px; height:17px; }
.direct__txt{ display:grid; gap:1px; min-width:0; }
.direct__k{
  font-family: var(--f-display); font-size:10.5px; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; color:#9DB0CE;
}
.direct__v{ font-family: var(--f-display); font-weight:650; color:#fff; font-size: var(--t-0); }
@media (prefers-reduced-motion: reduce){ .direct__row:hover{ transform:none; } }

/* --- the second column of the hero --------------------------------------- */
.hours{
  background: rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg); padding: var(--s-5) var(--s-5) var(--s-6);
}
.hours__k{
  margin:0 0 var(--s-3); font-family: var(--f-display); font-weight:700;
  font-size: var(--t--1); letter-spacing:.1em; text-transform:uppercase; color: var(--c-gold);
}
.hours__list{ list-style:none; margin:0; padding:0; display:grid; gap: var(--s-3); }
.hours__list li{ display:flex; gap: var(--s-3); align-items:flex-start; font-size: var(--t--1); color:#C7D6EC; line-height:1.6; }
.hours__list li > span:first-child{ width:18px; height:18px; flex:none; margin-top:2px; color: var(--c-gold); }
.hours__list svg{ width:18px; height:18px; }
.hours__list a{ color:#fff; text-decoration:none; font-weight:500; word-break:break-word; }
.hours__list a:hover{ color: var(--c-gold); text-decoration:underline; }
.hours__list b{ color:#fff; font-weight:650; }

/* --- form + aside --------------------------------------------------------- */
.enqx{
  display:grid; gap: var(--s-4); margin-top: var(--s-6);
  grid-template-columns: minmax(0,1.62fr) minmax(0,1fr);
  align-items:start;
}
@media (max-width: 900px){ .enqx{ grid-template-columns:1fr; } }

.enqf, .enqx__done{
  position:relative;   /* contains the off-screen honeypot */
  background: var(--c-surface); border:1px solid var(--c-rule);
  border-radius: var(--radius-lg); padding: var(--s-6);
  box-shadow: var(--shadow-1);
}
.enqf__row{ display:grid; gap: var(--s-4) var(--s-5); grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 620px){ .enqf__row{ grid-template-columns:1fr; } }
/* Only stack the blocks that follow one another down the form. Written as
   .fld + .fld this also matched the two fields sitting SIDE BY SIDE inside a
   row, which pushed the right-hand one 16px lower than its partner and left
   every label pair out of line. Direct children of the form only. */
.enqf > * + *{ margin-top: var(--s-4); }

/* Off-screen rather than display:none -- some bots skip hidden inputs but
   fill anything that is in the DOM and focusable-looking. */
.enqf__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.fld{ display:grid; gap: .35rem; align-content:start; }
.fld label{
  font-family: var(--f-display); font-weight:600; font-size: var(--t--1);
  color: var(--c-ink); display:flex; align-items:baseline; gap:.4rem;
}
.fld label span[aria-hidden]{ color: var(--c-accent); }
.fld__opt{ font-family: var(--f-body); font-weight:400; color: var(--c-muted); font-size: 12px; }
.fld :is(input, textarea){
  width:100%; font: inherit; font-size: var(--t-0); color: var(--c-ink);
  background: var(--c-bg); border:1px solid var(--c-rule-strong);
  border-radius: var(--radius-btn); padding: .7rem .85rem;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.fld textarea{ resize:vertical; min-height: 7rem; line-height:1.6; }
.fld :is(input, textarea)::placeholder{ color: var(--c-muted); }
.fld :is(input, textarea):hover{ border-color: var(--c-muted); }
.fld :is(input, textarea):focus{
  outline:none; background: var(--c-surface);
  border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft);
}
.fld--bad :is(input, textarea){ border-color: var(--c-neg); }
.fld--bad :is(input, textarea):focus{ box-shadow: 0 0 0 3px var(--c-neg-soft); }
.fld__e{ font-size: var(--t--1); color: var(--c-neg); }

.enqf__alert{
  margin-bottom: var(--s-4); padding: var(--s-3) var(--s-4);
  border-radius: var(--radius); font-size: var(--t--1); line-height:1.6;
  background: var(--c-neg-soft); color: var(--c-ink);
  border:1px solid var(--c-neg);
}
.enqf__foot{
  margin-top: var(--s-5); display:flex; flex-wrap:wrap; align-items:center;
  gap: var(--s-4); padding-top: var(--s-4); border-top:1px solid var(--c-rule);
}
.enqf__note{ font-size: var(--t--1); color: var(--c-muted); max-width: 34ch; line-height:1.55; }
.enqf__note span[aria-hidden]{ color: var(--c-accent); }

/* --- the sent state ------------------------------------------------------- */
.enqx__done{ display:flex; gap: var(--s-4); align-items:flex-start; border-color: var(--c-pos); }
.enqx__tick{
  width:42px; height:42px; flex:none; border-radius:50%;
  display:grid; place-items:center; background: var(--c-pos-soft); color: var(--c-pos);
}
.enqx__tick svg{ width:22px; height:22px; }
.enqx__done h3{ font-size: var(--t-1); margin-bottom: var(--s-2); }
.enqx__done p{ color: var(--c-ink-2); line-height:1.65; }
.enqx__again{ margin-top: var(--s-3); font-size: var(--t--1); }

/* --- the aside ------------------------------------------------------------ */
.enqa{
  background: var(--c-surface-2); border:1px solid var(--c-rule);
  border-radius: var(--radius-lg); padding: var(--s-6);
  display:grid; gap: var(--s-3);
}
.enqa__k{
  font-family: var(--f-display); font-weight:700; font-size: var(--t--1);
  letter-spacing:.1em; text-transform:uppercase; color: var(--c-muted);
  margin-bottom: var(--s-1);
}
.enqa__list{ list-style:none; margin: var(--s-2) 0 0; padding: var(--s-4) 0 0; display:grid; gap: var(--s-3); border-top:1px solid var(--c-rule); }
.enqa__list li{ display:flex; gap: var(--s-3); align-items:flex-start; font-size: var(--t--1); color: var(--c-ink-2); line-height:1.55; }
.enqa__list li > span{ width:17px; height:17px; flex:none; margin-top:2px; color: var(--c-pos); }
.enqa__list svg{ width:17px; height:17px; }

/* --- map + addresses ------------------------------------------------------ */
.findus__map{
  margin-top: var(--s-5);
  border:1px solid var(--c-rule); border-radius: var(--radius-lg);
  overflow:hidden; background: var(--c-surface-2);
  height: clamp(20rem, 34vw, 27rem);
}
.findus__map iframe{ display:block; width:100%; height:100%; border:0; }

/* The offices, inside the aside: no card of their own, since the aside is
   already one. A rule between them instead of a border around each. */
.enqa__offices{
  margin-top: var(--s-2); padding-top: var(--s-4);
  border-top:1px solid var(--c-rule);
  display:grid; gap: var(--s-4);
}
.office--bare{ background:none; border:0; padding:0; border-radius:0; }
.office--bare + .office--bare{ border-top:1px dashed var(--c-rule); padding-top: var(--s-4); }

/* =========================================================================
   BLOG INDEX
   The old page was a heading, two paragraphs of lorem ipsum and twelve
   identical cards. One article leads now and the rest sit under it, which is
   how a reader actually meets a blog: something to start with, then a shelf.
   ========================================================================= */

.lead--blog .wrap{ padding-block: clamp(var(--s-6), 4vw, var(--s-8)) var(--s-7); }
.lead--blog h1{ margin-bottom: var(--s-4); }
.lead__lede--wide{ max-width: 56ch; }
.lead__count{
  margin-top: var(--s-5); font-family: var(--f-display); font-weight:700;
  font-size: var(--t--1); letter-spacing:.1em; text-transform:uppercase;
  color: var(--c-gold); font-variant-numeric: tabular-nums;
}

/* --- the lead article ----------------------------------------------------
   Pulled up over the navy/light boundary, the same move the stat band makes
   on the other pages, so the first thing under the hero is the article rather
   than a band of empty background. */
.feat{
  display:grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  align-items:stretch; gap:0; text-decoration:none; color:inherit;
  margin-top: calc(var(--s-8) * -1); position:relative; z-index:5;
  background: var(--c-surface); border:1px solid var(--c-rule);
  border-radius: 16px; overflow:hidden;
  box-shadow: 0 22px 50px rgba(0,27,69,.22);
  transition: transform .18s ease, box-shadow .18s ease;
}
.feat:hover{ transform: translateY(-3px); box-shadow: 0 28px 60px rgba(0,27,69,.28); color:inherit; }
@media (max-width: 860px){ .feat{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){ .feat:hover{ transform:none; } }

.feat__media{ display:block; background: var(--c-navy); overflow:hidden; }
.feat__media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:16/9; }
@media (max-width: 860px){ .feat__media img{ height:auto; } }

.feat__body{
  display:flex; flex-direction:column; align-items:flex-start;
  gap: var(--s-3); padding: var(--s-7) var(--s-6);
  justify-content:center;
}
.feat__kicker{
  display:flex; flex-wrap:wrap; align-items:center; gap: var(--s-2);
  font-family: var(--f-display); font-weight:700; font-size:11px;
  letter-spacing:.09em; text-transform:uppercase; color: var(--c-muted);
}
.feat__flag{
  background: var(--c-gold); color: var(--c-gold-ink);
  padding:.2rem .5rem; border-radius:4px;
}
.feat__h{
  font-family: var(--f-display); font-weight:700; letter-spacing:-.018em;
  font-size: clamp(1.5rem, 1.05rem + 1.5vw, 2.05rem); line-height:1.2;
  color: var(--c-ink); text-wrap:balance;
}
.feat__p{ color: var(--c-ink-2); line-height:1.65; max-width: 46ch; }
.feat__more{
  display:inline-flex; align-items:center; gap:.4rem; margin-top: var(--s-2);
  font-family: var(--f-display); font-weight:650; font-size: var(--t--1);
  color: var(--c-accent);
}
.feat__more svg{ width:16px; height:16px; transition: transform .16s ease; }
.feat:hover .feat__more svg{ transform: translateX(3px); }
@media (prefers-reduced-motion: reduce){ .feat:hover .feat__more svg{ transform:none; } }

/* --- the rest ------------------------------------------------------------- */
.postgrid{
  display:grid; gap: var(--s-4); margin-top: var(--s-6);
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 1000px){ .postgrid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px){ .postgrid{ grid-template-columns:1fr; } }

.pcard{
  display:flex; flex-direction:column;
  background: var(--c-surface); border:1px solid var(--c-rule);
  border-radius: var(--radius-lg); overflow:hidden;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.pcard:hover{ border-color: var(--c-accent); transform: translateY(-3px); box-shadow: var(--shadow-2); }
@media (prefers-reduced-motion: reduce){ .pcard:hover{ transform:none; } }

.pcard__media{ display:block; position:relative; background: var(--c-navy); }
.pcard__media img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.pcard__topic{
  position:absolute; left: var(--s-3); bottom: var(--s-3);
  font-family: var(--f-display); font-weight:700; font-size:10.5px;
  letter-spacing:.09em; text-transform:uppercase;
  background: rgba(0,16,43,.82); color:#fff;
  padding:.24rem .55rem; border-radius:4px;
  backdrop-filter: blur(3px);
}
.pcard__body{ padding: var(--s-4) var(--s-5) var(--s-5); display:flex; flex-direction:column; gap: var(--s-2); flex:1; }
.pcard__kicker{
  font-family: var(--f-display); font-weight:700; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color: var(--c-muted);
}
.pcard__h{
  font-family: var(--f-display); font-weight:650; font-size: var(--t-1);
  line-height:1.3; letter-spacing:-.01em;
}
.pcard__h a{ color: var(--c-ink); text-decoration:none; }
.pcard__h a:hover{ color: var(--c-accent); }
.pcard__p{
  font-size: var(--t--1); color: var(--c-ink-2); line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
.pcard__more{
  margin-top:auto; padding-top: var(--s-3);
  display:inline-flex; align-items:center; gap:.35rem;
  font-family: var(--f-display); font-weight:650; font-size: var(--t--1);
  color: var(--c-accent);
}
.pcard__more svg{ width:15px; height:15px; transition: transform .16s ease; }
.pcard:hover .pcard__more svg{ transform: translateX(3px); }
@media (prefers-reduced-motion: reduce){ .pcard:hover .pcard__more svg{ transform:none; } }

/* =========================================================================
   POLICY PAGES
   Built on the service page's furniture -- a reading column beside a sticky
   contents rail -- because a policy is read the way a long answer is: mostly
   by someone hunting one clause.
   ========================================================================= */

.legal-top{
  background:
    radial-gradient(34rem 20rem at 88% 8%, rgba(255,194,25,.16), transparent 62%),
    linear-gradient(140deg, var(--c-navy-2) 0%, var(--c-navy) 72%);
  color:#fff;
}
.legal-top .wrap{ padding-block: clamp(var(--s-6), 4vw, var(--s-8)); }
.legal-top .eyebrow{ color: var(--c-gold); }
.legal-top h1{
  color:#fff; margin: var(--s-2) 0 var(--s-4);
  font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3rem); letter-spacing:-.02em; line-height:1.08;
}
.legal-top__lede{ color:#C7D6EC; font-size: var(--t-1); line-height:1.6; max-width: 62ch; }
.legal-top__meta{
  margin-top: var(--s-4); font-size: var(--t--1); color:#8FA5C6;
  padding-top: var(--s-4); border-top:1px solid rgba(255,255,255,.13); max-width: 62ch;
}

.legal-ask{ display:flex; flex-wrap:wrap; gap: var(--s-3); margin-top: var(--s-5); }
.answer--ask{ background: var(--c-surface-2); }
.legal-other{
  margin-top: var(--s-4); padding-top: var(--s-4);
  border-top:1px solid var(--c-rule); font-size: var(--t--1);
}
.legal-other a{ font-weight:600; text-decoration:none; }
.legal-other a:hover{ text-decoration:underline; }

.ft-legal{ display:flex; flex-wrap:wrap; gap: var(--s-2) var(--s-5); }
@media (max-width: 620px){ .ft-legal{ gap: var(--s-2) var(--s-4); } }


/* =========================================================================
   PRICING
   Three cards, and the middle one lifted -- the shape a reader expects on a
   pricing page. What is IN them is not the shape a reader expects, because the
   business has one fee and not three tiers: the cards are the first month,
   every month after, and the ad budget, which is the part people assume is
   included. Inventing a Basic / Pro / Ultra ladder would mean inventing two
   prices, which is the one thing a pricing page must never do.
   ========================================================================= */

/* The service pages set --ch per channel; here it is simply the brand gold,
   declared rather than left undefined so the shared enquiry panel below picks
   up a real colour instead of dropping its gradient. */
.pricing{ --ch: var(--c-gold); }

.pr-hero{
  padding-block: var(--s-7) calc(var(--s-8) + 4.5rem); color:#fff; text-align:center;
  background: linear-gradient(150deg, var(--c-navy-2) 0%, var(--c-navy) 74%);
  background:
    radial-gradient(46rem 26rem at 82% -12%, rgba(255,194,25,.20), transparent 62%),
    linear-gradient(150deg, var(--c-navy-2) 0%, var(--c-navy) 74%);
}
.pr-hero .eyebrow{ color: var(--c-gold); }
.pr-hero h1{
  color:#fff; margin: var(--s-3) 0 var(--s-4);
  font-size: clamp(2.2rem, 1.3rem + 3vw, 3.4rem);
  line-height:1.06; letter-spacing:-.025em; text-wrap:balance;
}
.pr-hero__lede{
  color:#C7D6EC; font-size: var(--t-1); line-height:1.62;
  max-width: 62ch; margin-inline:auto;
}
.pr-hero__lede strong{
  color:#fff; font-family: var(--f-display); font-weight:700;
  font-variant-numeric: tabular-nums;
}
.pr-hero__cms{ color:#C7D6EC; margin-top: var(--s-5); max-width: 62ch; margin-inline:auto; text-align:left; }
.pr-hero__cms :is(p, li){ color:inherit; }

/* The cards lift out of the navy rather than starting under it, so the fee
   is what the boundary is drawn around. align-items:end sends the featured
   card's extra height upward, deeper into the navy, instead of downward. */
.plans-wrap{ margin-top: -4.5rem; position:relative; z-index:2; }
.plans{
  display:grid; gap: var(--s-4); align-items:end;
  grid-template-columns: repeat(3, minmax(0,1fr));
}

.plan{
  display:flex; flex-direction:column; gap: var(--s-3);
  padding: var(--s-6);
  border-radius: 18px; border:1px solid var(--c-rule);
  background: var(--c-surface);
  box-shadow: 0 26px 52px -34px rgba(0,27,69,.7);
}
.plan__head{
  margin: calc(var(--s-6) * -1) calc(var(--s-6) * -1) 0;
  padding: var(--s-4) var(--s-5);
  display:flex; justify-content:center;
  background: var(--c-surface-2);
  border-bottom:1px solid var(--c-rule);
}
.plan__badge{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.42rem .95rem; border-radius:100px;
  background: var(--c-surface); border:1px solid var(--c-rule);
  font-family: var(--f-display); font-weight:700; font-size: var(--t--1);
  letter-spacing:.07em; text-transform:uppercase; color: var(--c-ink);
  box-shadow: 0 2px 6px -4px rgba(0,27,69,.5);
}
.plan__badge svg{ width:17px; height:17px; flex:none; color: var(--c-muted); }
.plan--feat .plan__head{
  margin-top: calc(var(--s-7) * -1);
  background: rgba(255,255,255,.07);
  border-bottom-color: rgba(255,255,255,.13);
}
.plan--feat .plan__badge{
  background: rgba(255,194,25,.14); border-color: rgba(255,194,25,.38);
  color:#fff; box-shadow:none;
}
.plan--feat .plan__badge svg{ color: var(--c-gold); }
.plan__v{
  font-family: var(--f-display); font-weight:800; letter-spacing:-.03em;
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem); line-height:1;
  color: var(--c-ink); font-variant-numeric: tabular-nums;
  display:flex; align-items:baseline; justify-content:center; gap:0; flex-wrap:wrap;
  text-align:center; margin-top: var(--s-2);
}
.plan__v sup{
  font-size:.44em; font-weight:700; line-height:1;
  align-self:flex-start; margin-top:.18em; margin-right:.1em;
  color: var(--c-muted); letter-spacing:0;
}
.plan--feat .plan__v sup{ color: var(--c-gold); }
.plan__v span{
  font-family: var(--f-body); font-weight:500; font-size: var(--t--1);
  letter-spacing:0; color: var(--c-muted); white-space:nowrap;
  margin-left:.4rem;
}
.plan__l{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.plan__l li{
  display:flex; align-items:flex-start; gap:.6rem; padding-block:.62rem;
  font-size: var(--t--1); line-height:1.5; color: var(--c-ink);
}
.plan__l li + li{ border-top:1px solid var(--c-rule); }
.plan--feat .plan__l li + li{ border-top-color: rgba(255,255,255,.13); }
.plan__ic{
  flex:none; width:20px; height:20px; border-radius:6px; margin-top:1px;
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--c-pos-soft); color: var(--c-pos);
}
.plan__l svg{ width:12px; height:12px; }
.plan__tx{ flex:1 1 auto; min-width:0; }
.plan__tx strong{ font-family: var(--f-display); font-weight:700; color:inherit; }
.plan .btn{ margin-top:auto; padding-top:.8rem; padding-bottom:.8rem; }

/* The one people take. Navy, taller than its neighbours, gold ticks. */
.plan--feat{
  background: linear-gradient(158deg, var(--c-navy-2) 0%, var(--c-navy) 78%);
  border-color: transparent; color:#fff;
  padding-block: var(--s-7);
  box-shadow: 0 34px 64px -30px rgba(0,27,69,.85);
  position:relative;
}
.plan--feat .plan__v{ color:#fff; }
.plan--feat .plan__v span{ color:#9DB0CE; }
.plan--feat .plan__l li{ color:#fff; }
.plan--feat .plan__ic{ background: rgba(255,194,25,.16); color: var(--c-gold); }
/* The rate the CMS states on the service pages, kept where an Indian reader
   will look for it. One line, no card, so it cannot be mistaken for a tier. */
.pr-rate{
  margin-top: var(--s-5);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem var(--s-4);
  padding: var(--s-4) var(--s-5);
  border:1px solid var(--c-rule); border-radius: var(--radius-lg);
  background: var(--c-surface-2);
}
.pr-rate__k{
  flex:none; font-family: var(--f-display); font-weight:700; font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color: var(--c-muted);
}
.pr-rate__v{
  flex:1 1 22rem; min-width:0; margin:0;
  font-size: var(--t--1); line-height:1.65; color: var(--c-ink-2);
}
.pr-rate__v strong{
  color: var(--c-ink); font-family: var(--f-display); font-weight:700;
  font-variant-numeric: tabular-nums;
}

/* The package select. The form never had one, so it is styled here rather than
   folded into the shared input rule, which several pages depend on. */
.fld select{
  width:100%; font: inherit; font-size: var(--t-0); color: var(--c-ink);
  background: var(--c-bg); border:1px solid var(--c-rule-strong);
  border-radius: var(--radius-btn); padding: .7rem 2.4rem .7rem .85rem;
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23708099' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right .8rem center;
  background-size: 18px 18px;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.fld select:hover{ border-color: var(--c-muted); }
.fld select:focus{
  outline:none; background-color: var(--c-surface);
  border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft);
}

/* The author's caveats, set as the small print they are rather than buried. */
.pr-note{
  border:1px solid var(--c-rule); border-left:3px solid var(--c-warn);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: var(--c-surface); padding: var(--s-5);
  max-width: 74ch;
}
.pr-note__k{
  font-family: var(--f-display); font-weight:700; font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color: var(--c-warn);
  margin-bottom: var(--s-3);
}
.pr-note .rich{ font-size: var(--t--1); color: var(--c-ink-2); line-height:1.65; max-width:none; }
.pr-note .rich > * + *{ margin-top: var(--s-2); }

@media (max-width: 900px){
  .plans{ grid-template-columns: minmax(0,1fr); align-items:stretch; }
  .plan--feat{ padding-block: var(--s-6); order:-1; }
}

/* =========================================================================
   BLOG POST
   The article gets a reading column and a rail, the same shape the service
   pages use, because the body now has an outline to put in that rail --
   App\Article promotes the headings CKEditor flattened into paragraphs.
   ========================================================================= */

.post-top{
  background:
    radial-gradient(36rem 22rem at 86% 6%, rgba(255,194,25,.15), transparent 62%),
    linear-gradient(142deg, var(--c-navy-2) 0%, var(--c-navy) 74%);
  color:#fff;
}
/* Hero, cover and body share one measure -- 68rem -- so the headline, the
   picture and the first paragraph all start on the same vertical line. The
   related posts and the CTA below keep the full shell, which is what makes
   the article read as a column inside the site rather than a page of its own.

   74rem, not the site's 85: an article is read line by line, so the shell is
   sized so that what is left over after the rail is a reading measure rather
   than whatever the page happens to leave. The measure is held by the type
   size rather than by a narrow column -- 18px across 720px is about 74
   characters, which is where an eye tracks a line without losing the next. */
.post-top .wrap{ padding-block: clamp(var(--s-6), 4vw, var(--s-8)) var(--s-8); max-width: 74rem; }
.post-top .eyebrow{ color: var(--c-gold); }
.post-top .eyebrow a{ color: inherit; text-decoration:none; }
.post-top .eyebrow a:hover{ text-decoration:underline; }
.post-top h1{
  color:#fff; margin: var(--s-3) 0 0;
  font-size: clamp(2rem, 1.25rem + 2.6vw, 3rem); line-height:1.1;
  letter-spacing:-.022em; text-wrap:balance; max-width: 26ch;
}
.post-top__dek{
  margin-top: var(--s-4); color:#C7D6EC;
  font-size: var(--t-1); line-height:1.6; max-width: 64ch;
}
.post-meta{
  margin-top: var(--s-5); display:flex; flex-wrap:wrap; gap: var(--s-2);
  align-items:center; font-size: var(--t--1); color:#9DB0CE;
  font-variant-numeric: tabular-nums;
}
.post-meta span[aria-hidden]{ opacity:.5; }

/* The cover straddles the navy and the page, the move the stat band makes
   elsewhere -- it stops the hero ending on a flat edge. */
.post-cover{
  margin-top: calc(var(--s-8) * -1); position:relative; z-index:5;
  max-width: 74rem;
}
.post-cover img{
  width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  border-radius: 16px; border:1px solid var(--c-rule);
  box-shadow: 0 22px 50px rgba(0,27,69,.22); background: var(--c-navy);
}

.post-body{
  display:grid; align-items:start;
  grid-template-columns: minmax(0,1fr) 21rem;
  gap: clamp(2.5rem, 6.5vw, 6.5rem);
  padding-block: var(--s-7);
  max-width: 74rem;
}
/* Stacked, the column has no rail to borrow its measure from, so it takes one
   of its own and stays centred rather than stretching to the shell. */
@media (max-width: 940px){
  .post-body{ grid-template-columns: minmax(0,1fr); gap: var(--s-6); }
  .post-body__main,
  .post-rail{ max-width: 40rem; width:100%; margin-inline:auto; }
}

.post-body__main{ min-width:0; }

/* --- the article itself ---------------------------------------------------
   The grid sets the measure, so the inherited .rich cap is dropped: with both
   in play the text stopped short of the column and left a strip of nothing
   between the last word and the rail. */
.post-rich{ max-width:none; font-size: 1.1875rem; line-height:1.68; }
.post-rich > * + *{ margin-top: 1.2rem; }
.post-rich h2{
  font-family: var(--f-display); font-weight:700; letter-spacing:-.015em;
  font-size: var(--t-2); line-height:1.25; color: var(--c-ink);
  margin-top: var(--s-7); scroll-margin-top: 90px;
  padding-top: var(--s-5); border-top:1px solid var(--c-rule);
}
.post-rich h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.post-rich :is(h2, h3) a{ color: inherit; text-decoration:none; }
.post-rich :is(h2, h3) a:hover{ color: var(--c-accent); text-decoration:underline; }
.post-rich h3{ font-size: var(--t-1); margin-top: var(--s-6); }
.post-rich :is(ul, ol){ padding-left: 1.35rem; }
/* 19px across a 353px phone column is 37 characters a line -- more wrapping
   than reading. The measure comes back by dropping the size, not the column. */
@media (max-width: 620px){
  .post-rich{ font-size: 1.0625rem; }
  .post-rich .lead-in{ padding: var(--s-4); }
}
.post-rich li + li{ margin-top: var(--s-2); }
.post-rich a{ text-decoration-thickness: 1px; text-underline-offset: 2px; }
.post-rich img{ border-radius: var(--radius-lg); margin-block: var(--s-5); }
.post-rich mark{
  background: var(--c-accent-soft); color: var(--c-ink);
  padding: .06em .28em; border-radius: 4px;
}

/* "1-Image Ads: Simple picture promotions are..." -- a definition list that
   was typed as paragraphs. Set as terms so the label carries and the body
   under it reads as its definition. */
.post-rich .lead-in{
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--c-surface-2);
  border: 1px solid var(--c-rule);
  border-left: 3px solid var(--c-accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  scroll-margin-top: 96px;
}
/* Consecutive terms are one list; give them list spacing, not section spacing. */
.post-rich .lead-in + .lead-in{ margin-top: var(--s-3); }
/* The FIRST bold run only. The rule used to catch every <strong> in the
   paragraph, so a bolded link mid-sentence became a block and split the
   sentence across three lines. */
.post-rich .lead-in > :is(strong, b):first-child{
  display:block; color: var(--c-ink);
  font-family: var(--f-display); font-weight:700; font-size: var(--t-0);
  letter-spacing:-.005em; margin-bottom: .3rem;
}

/* Inside a list the number is already the structure. Boxing the item as well
   fences the marker out into the margin beside it. */
.post-rich li > .lead-in{
  margin:0; padding:0; background:none; border:0; border-radius:0;
}
.post-rich :is(ol, ul) > li + li{ margin-top: var(--s-4); }
.post-rich .lead-in:target{ border-left-color: var(--c-accent); box-shadow: var(--shadow-2); }

/* --- share ---------------------------------------------------------------- */
.post-share{
  margin-top: var(--s-7); padding-top: var(--s-5);
  border-top:1px solid var(--c-rule);
  display:flex; flex-wrap:wrap; align-items:center; gap: var(--s-4);
}
.post-share__k{
  font-family: var(--f-display); font-weight:700; font-size: var(--t--1);
  letter-spacing:.09em; text-transform:uppercase; color: var(--c-muted);
}
.post-share ul{ list-style:none; margin:0; padding:0; display:flex; gap: var(--s-2); }
.post-share__b{
  width:38px; height:38px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--c-rule); background: var(--c-surface);
  color: var(--c-ink-2);
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.post-share__b svg{ width:17px; height:17px; }
.post-share__b:hover{ transform: translateY(-2px); color:#fff; }
.post-share__b--x:hover{ background:#000; border-color:#000; }
.post-share__b--li:hover{ background:#0A66C2; border-color:#0A66C2; }
.post-share__b--wa:hover{ background: var(--c-whatsapp); border-color: var(--c-whatsapp); }
@media (prefers-reduced-motion: reduce){ .post-share__b:hover{ transform:none; } }

/* --- prev / next ---------------------------------------------------------- */
.post-nav{
  margin-top: var(--s-5); display:grid; gap: var(--s-3);
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 620px){ .post-nav{ grid-template-columns:1fr; } }
.post-nav__a{
  display:grid; gap:.2rem; padding: var(--s-4);
  border:1px solid var(--c-rule); border-radius: var(--radius-lg);
  background: var(--c-surface); text-decoration:none;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.post-nav__a:hover{ border-color: var(--c-accent); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.post-nav__a--next{ text-align:right; }
.post-nav__k{
  font-family: var(--f-display); font-weight:700; font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; color: var(--c-accent);
}
.post-nav__t{
  font-family: var(--f-display); font-weight:650; font-size: var(--t-0);
  line-height:1.35; color: var(--c-ink);
}
@media (prefers-reduced-motion: reduce){ .post-nav__a:hover{ transform:none; } }

/* --- the rail -------------------------------------------------------------
   Two objects, deliberately unalike: the contents is a spine with no box round
   it, so it reads as part of the page's margin, and the one card that is left
   is navy -- the same ground as the hero, which gives the article a second
   anchor at the foot of the screen instead of a grey rectangle floating in
   white space. A long index scrolls inside the rail rather than pushing the
   card off the bottom of a sticky column. */
.post-rail{
  display:grid; gap: var(--s-6); align-content:start;
  position:sticky; top: 84px;
}
@media (max-width: 940px){ .post-rail{ position:static; } }

.post-toc{ border-left:1px solid var(--c-rule); padding-left: var(--s-4); }
.post-toc__title{
  font-family: var(--f-display); font-weight:700; font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color: var(--c-muted);
  margin-bottom: var(--s-3);
}
/* The labels these link to are numbered by the author -- "1-Image Ads",
   "3. Bumper Ads" -- so the list carries no counter of its own. */
.post-toc ol{ list-style:none; margin:0; padding:0; display:grid; gap:1px; }
.post-toc li a{
  display:block; margin-left: calc(var(--s-4) * -1 - 1px);
  padding:.28rem .6rem .28rem calc(var(--s-4) - 2px);
  border-left:2px solid transparent;
  font-size: var(--t--1); line-height:1.45; color: var(--c-ink-2);
  text-decoration:none;
  transition: color .15s ease, border-color .15s ease;
}
.post-toc li a:hover{ color: var(--c-accent); border-left-color: var(--c-accent); }

.post-svc{
  position:relative; overflow:hidden;
  border-radius: var(--radius-lg); padding: var(--s-5);
  background:
    radial-gradient(18rem 12rem at 112% -10%, rgba(255,194,25,.22), transparent 62%),
    linear-gradient(158deg, var(--c-navy-2) 0%, var(--c-navy) 78%);
  box-shadow: 0 18px 36px -24px rgba(0,27,69,.75);
  display:grid; gap: var(--s-2);
}
.post-svc__k{
  font-family: var(--f-display); font-weight:700; font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color: var(--c-gold);
}
.post-svc__h{
  font-family: var(--f-display); font-weight:700; font-size: var(--t-1);
  line-height:1.22; color:#fff; letter-spacing:-.012em;
}
.post-svc__p{ font-size: var(--t--1); color:#C7D6EC; line-height:1.55; margin-bottom: var(--s-2); }
.post-svc .btn{ padding:.72rem 1rem; font-size:.9375rem; }
.post-svc__tel{
  margin-top: var(--s-3); padding-top: var(--s-3);
  border-top:1px solid rgba(255,255,255,.14);
  font-size: var(--t--1); color:#9DB0CE; text-align:center;
}
.post-svc__tel a{
  color:#fff; text-decoration:none; font-weight:600;
  font-variant-numeric: tabular-nums;
}
.post-svc__tel a:hover{ color: var(--c-gold); text-decoration:underline; }


/* =========================================================================
   SERVICES INDEX
   Nine cards is a 3x3 grid and nothing else -- the previous auto-fill grid
   made four columns on a wide screen and left the ninth card alone on a row
   of its own. The images are CMS uploads with no agreed aspect ratio, so the
   frame is fixed and the image is cropped into it; left to themselves they
   ranged from square to wide and every card in a row started at a different
   height.
   ========================================================================= */
/* The page-level fallback for the per-card --ch, declared once rather than
   repeated as a default in every var() below. */
.svcs{ --ch: var(--c-gold); }

.svcs-hero{
  padding-block: var(--s-7) var(--s-8); color:#fff; text-align:center;
  background:
    radial-gradient(46rem 26rem at 82% -12%, rgba(255,194,25,.20), transparent 62%),
    linear-gradient(150deg, var(--c-navy-2) 0%, var(--c-navy) 74%);
}
.svcs-hero .eyebrow{ color: var(--c-gold); }
.svcs-hero h1{
  color:#fff; margin: var(--s-3) 0 var(--s-4);
  font-size: clamp(2.1rem, 1.2rem + 3vw, 3.2rem);
  line-height:1.07; letter-spacing:-.025em; text-wrap:balance;
}
.svcs-hero__lede{
  color:#C7D6EC; font-size: var(--t-1); line-height:1.62;
  max-width: 64ch; margin-inline:auto;
}
.svcs-hero__lede strong{ color:#fff; font-family: var(--f-display); font-weight:700; }
.svcs-hero__cms{ color:#C7D6EC; max-width: 64ch; margin-inline:auto; text-align:left; }
.svcs-hero__cms :is(p, li){ color:inherit; }

.svcs-hero__facts{
  list-style:none; margin: var(--s-6) 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap: var(--s-3) var(--s-6);
}
.svcs-hero__facts li{
  display:flex; flex-direction:column; align-items:center; gap:.15rem;
  padding-inline: var(--s-5);
}
.svcs-hero__facts li + li{ border-left:1px solid rgba(255,255,255,.14); }
.svcs-hero__facts strong{
  font-family: var(--f-display); font-weight:800; letter-spacing:-.02em;
  font-size: var(--t-3); line-height:1; color: var(--c-gold);
  font-variant-numeric: tabular-nums;
}
.svcs-hero__facts span{
  font-size: var(--t--1); color:#9DB0CE; white-space:nowrap;
}
/* A left border is only a divider while the items share a line. Once the row
   wraps it becomes a rule hanging in space to the left of the item that
   wrapped, so below the wrap point the gap does the separating instead. */
@media (max-width: 700px){
  .svcs-hero__facts{ gap: var(--s-5) var(--s-6); }
  .svcs-hero__facts li{ padding-inline: 0; }
  .svcs-hero__facts li + li{ border-left: 0; }
}

.svcs-grid{
  display:grid; gap: var(--s-4);
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 960px){ .svcs-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px){ .svcs-grid{ grid-template-columns: minmax(0,1fr); } }

.svcard{
  display:flex; flex-direction:column; min-width:0;
  background: var(--c-surface);
  border:1px solid var(--c-rule); border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: 0 18px 40px -34px rgba(0,27,69,.7);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* The channel's own colour, carried as a rule across the top of its card. It
   is the only place the nine cards differ from one another at a glance. */
.svcard::before{
  content:""; display:block; height:3px; background: var(--ch, var(--c-gold));
}
.svcard:hover{
  transform: translateY(-3px);
  border-color: var(--ch, var(--c-rule-strong));
  box-shadow: 0 26px 50px -30px rgba(0,27,69,.75);
}

.svcard__media{ display:block; background: var(--c-surface-2); }
.svcard__media img{
  display:block; width:100%; aspect-ratio: 16 / 10; object-fit: cover;
  transition: transform .3s ease;
}
.svcard:hover .svcard__media img{ transform: scale(1.035); }

.svcard__body{ padding: var(--s-5) var(--s-5) var(--s-3); display:grid; gap:.45rem; }
.svcard__k{
  display:flex; align-items:center; gap:.5rem;
  font-family: var(--f-display); font-weight:700; font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color: var(--c-muted);
}
.svcard__dot{
  flex:none; width:8px; height:8px; border-radius:50%;
  background: var(--ch, var(--c-gold));
  box-shadow: 0 0 0 3px rgba(0,27,69,.08);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ch, #FFC219) 22%, transparent);
}
.svcard__t{ font-size: var(--t-1); margin:0; line-height:1.25; }
.svcard__t a{ color: var(--c-ink); text-decoration:none; }
.svcard__t a:hover{ color: var(--ch, var(--c-accent)); }
.svcard__d{
  color: var(--c-ink-2); font-size: var(--t--1); line-height:1.55; margin:0;
}

.svcard__foot{ margin-top:auto; padding: var(--s-3) var(--s-5) var(--s-5); }
.svcard__btn{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
}
.svcard__btn svg{ width:15px; height:15px; transition: transform .18s ease; }
.svcard:hover .svcard__btn{
  border-color: var(--ch, var(--c-rule-strong));
  color: var(--ch, var(--c-accent));
}
.svcard:hover .svcard__btn svg{ transform: translateX(3px); }

@media (prefers-reduced-motion: reduce){
  .svcard, .svcard__media img, .svcard__btn svg{ transition:none; }
  .svcard:hover{ transform:none; }
  .svcard:hover .svcard__media img{ transform:none; }
  .svcard:hover .svcard__btn svg{ transform:none; }
}

/* =========================================================================
   SITEMAP
   Fifteen hundred links on one page. The previous version set them as bare
   lists under display-size h2s, so the headings were four times the size of
   anything they introduced and the links themselves were spread six sparse
   columns wide. Here the headings are labels, the links are chips sized to
   their own text, and the count sits next to the thing it counts.
   ========================================================================= */
.sm-hero{
  padding-block: var(--s-7) var(--s-8); color:#fff; text-align:center;
  background:
    radial-gradient(46rem 26rem at 82% -12%, rgba(255,194,25,.20), transparent 62%),
    linear-gradient(150deg, var(--c-navy-2) 0%, var(--c-navy) 74%);
}
.sm-hero .eyebrow{ color: var(--c-gold); }
.sm-hero h1{
  color:#fff; margin: var(--s-3) 0 var(--s-4);
  font-size: clamp(2.1rem, 1.2rem + 3vw, 3.2rem);
  line-height:1.07; letter-spacing:-.025em; text-wrap:balance;
}
.sm-hero__lede{
  color:#C7D6EC; font-size: var(--t-1); line-height:1.62;
  max-width: 60ch; margin-inline:auto;
}
.sm-hero__lede a{ color: var(--c-gold); }
.sm-hero__facts{
  list-style:none; margin: var(--s-6) 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap: var(--s-3) var(--s-6);
}
.sm-hero__facts li{
  display:flex; flex-direction:column; align-items:center; gap:.15rem;
  padding-inline: var(--s-5);
}
.sm-hero__facts li + li{ border-left:1px solid rgba(255,255,255,.14); }
.sm-hero__facts strong{
  font-family: var(--f-display); font-weight:800; letter-spacing:-.02em;
  font-size: var(--t-3); line-height:1; color: var(--c-gold);
  font-variant-numeric: tabular-nums;
}
.sm-hero__facts span{ font-size: var(--t--1); color:#9DB0CE; white-space:nowrap; }
@media (max-width: 700px){
  .sm-hero__facts{ gap: var(--s-5) var(--s-6); }
  .sm-hero__facts li{ padding-inline: 0; }
  .sm-hero__facts li + li{ border-left: 0; }
}

.sm-body{ display:grid; gap: var(--s-7); }

/* The heading is a label with its count beside it, and the rule runs on to the
   edge -- so a section announces itself without shouting. */
.sm-sec__h{
  display:flex; align-items:center; gap: var(--s-3);
  padding-bottom: var(--s-3); border-bottom:1px solid var(--c-rule);
}
.sm-sec__h h2{
  margin:0; font-size: var(--t-1); letter-spacing:-.01em;
}
.sm-sec__n{
  font-family: var(--f-mono); font-size: var(--t--1); font-variant-numeric: tabular-nums;
  color: var(--c-accent); background: var(--c-accent-soft);
  padding:.12rem .5rem; border-radius:100px;
}
.sm-sec__note{ color: var(--c-muted); font-size: var(--t--1); margin: var(--s-3) 0 0; }

/* Chips size to their own text, so nine service names do not get stretched
   across a six-column grid with an inch of air between each. */
.sm-chips{
  list-style:none; margin: var(--s-4) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.sm-chips a{
  display:inline-block; text-decoration:none;
  padding:.42rem .8rem; border-radius:100px;
  border:1px solid var(--c-rule); background: var(--c-surface);
  color: var(--c-ink-2); font-size: var(--t--1); line-height:1.35;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.sm-chips a:hover{
  color: var(--c-accent); border-color: var(--c-accent);
  background: var(--c-accent-soft);
}
.sm-chips--sm{ margin-top: var(--s-2); gap:.35rem; }
.sm-chips--sm a{ padding:.28rem .6rem; font-size: 12.5px; }

.sm-dir{
  margin-top: var(--s-4);
  border:1px solid var(--c-rule); border-radius: var(--radius-lg);
  background: var(--c-surface); overflow:hidden;
}
.sm-grp + .sm-grp{ border-top:1px solid var(--c-rule); }
.sm-grp__s{
  cursor:pointer; list-style:none;
  display:flex; align-items:center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  transition: background .15s ease;
}
.sm-grp__s::-webkit-details-marker{ display:none; }
.sm-grp__s:hover{ background: var(--c-surface-2); }
.sm-grp__name{
  flex:1 1 auto; min-width:0;
  font-family: var(--f-display); font-weight:600; font-size: var(--t-0); color: var(--c-ink);
}
.sm-grp__n{
  flex:none; font-family: var(--f-mono); font-size: var(--t--1);
  font-variant-numeric: tabular-nums; color: var(--c-muted);
}
.sm-grp__i{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%;
  border:1px solid var(--c-rule-strong); color: var(--c-muted);
  transition: transform .18s ease, color .15s ease, border-color .15s ease;
}
.sm-grp__i svg{ width:13px; height:13px; }
.sm-grp[open] .sm-grp__i{
  transform: rotate(45deg); color: var(--c-accent); border-color: var(--c-accent);
}
.sm-grp[open] > .sm-grp__s{ background: var(--c-surface-2); }

.sm-grp__body{
  padding: var(--s-2) var(--s-4) var(--s-5);
  border-top:1px solid var(--c-rule);
  display:grid; gap: var(--s-4);
}
.sm-place__h{ margin:0; font-size: var(--t-0); line-height:1.3; }
.sm-place__h a{ color: var(--c-ink); text-decoration:none; }
.sm-place__h a:hover{ color: var(--c-accent); text-decoration:underline; }

@media (prefers-reduced-motion: reduce){
  .sm-grp__i, .sm-chips a{ transition:none; }
}