@charset "UTF-8";
/* ==========================================================================
   Full Circle Detective Agency — design system v15
   Light-blue palette · full-bleed image sections · motion-rich
   ========================================================================== */

/* ---------- 0. Fonts ---------- */
/* Self-hosted (latin + latin-ext only) and preloaded from shell.py. Loading
   them from Google Fonts meant every first visit painted the fallback face and
   then swapped, and the swap re-wrapped headings: the Jaipur H1 went from two
   lines to one, a 0.28 layout shift. Files are served immutable, so a changed
   font needs a new filename. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url(/assets/fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url(/assets/fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 500 600; font-display: swap;
  src: url(/assets/fonts/playfair-display-latin-ext-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 500 600; font-display: swap;
  src: url(/assets/fonts/playfair-display-latin-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/assets/fonts/source-sans-3-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/assets/fonts/source-sans-3-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- 1. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, picture, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }
table { border-collapse: collapse; width: 100%; }
:where(h1,h2,h3,h4,h5,h6) { overflow-wrap: break-word; text-wrap: balance; }
:where(p, li, dd) { overflow-wrap: break-word; }

/* ---------- 2. Tokens ---------- */
:root {
  /* Light-blue brand scale.
     Surfaces, chips and icon wells use the pale end so the page reads airy.
     Anything carrying text uses 700 or darker, which is where the scale first
     clears 4.5:1 on white — lighter than that and button labels fail WCAG AA. */
  --blue-800:#0e4a8f;
  --blue-700:#1263bd;   /* buttons, links — 5.9:1 on white */
  --blue-600:#1f7ddb;   /* accents and non-text UI */
  --blue-500:#4a9ded;
  --blue-400:#79bbf6;
  --blue-300:#a5d3fb;
  --blue-200:#cbe6ff;
  --blue-100:#e6f3ff;
  --blue-050:#f4faff;
  --sky:#eaf4ff;
  --sky-2:#d9ebff;

  --navy:#0b2440;
  --ink-base:#0b2440;        /* headings — near-black navy reads calmer than mid-blue */
  --ink-base-soft:#2d4357;   /* body copy, 10.2:1 */
  --ink-base-mute:#5a7691;   /* captions, 4.75:1 */
  --line-base:#dbeafb;

  --gold-600:#b8801d;
  --gold-500:#e8a33d;
  --gold-200:#fbe7c2;
  --green-600:#13793c;
  --red-600:#b4352c;
  --wa:#157f45;
  --wa-dark:#116a39;

  /* active surface pair */
  --surface:#ffffff;
  --ink:var(--ink-base);
  --ink-soft:var(--ink-base-soft);
  --ink-mute:var(--ink-base-mute);
  --line:var(--line-base);
  --accent:var(--blue-700);
  --card-bg:#ffffff;
  --card-ink:var(--ink-base);
  --card-line:var(--line-base);
  /* Hairline borders carry the structure; the shadow only lifts the card off
     the page a little. Heavy drop shadows are what make a layout look dated. */
  --card-shadow:0 1px 2px rgba(11,36,64,.04), 0 8px 20px -14px rgba(11,36,64,.18);
  --card-shadow-hi:0 1px 2px rgba(11,36,64,.05), 0 18px 34px -20px rgba(11,36,64,.26);

  /* type */
  --font-display:"Archivo","Archivo Expanded",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-script:"Playfair Display",Georgia,"Times New Roman",serif;

  --fs-xs:clamp(.78rem,.76rem + .08vw,.83rem);
  --fs-sm:clamp(.88rem,.85rem + .12vw,.95rem);
  --fs-base:clamp(1rem,.96rem + .18vw,1.08rem);
  --fs-md:clamp(1.09rem,1.03rem + .28vw,1.22rem);
  --fs-lg:clamp(1.24rem,1.14rem + .46vw,1.5rem);
  --fs-xl:clamp(1.42rem,1.24rem + .8vw,1.95rem);
  --fs-2xl:clamp(1.66rem,1.36rem + 1.3vw,2.5rem);
  --fs-3xl:clamp(1.9rem,1.45rem + 2vw,3.1rem);
  --fs-4xl:clamp(2.1rem,1.45rem + 2.9vw,3.8rem);

  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem; --sp-7:2.75rem; --sp-8:3.5rem;
  --sp-9:4.5rem; --sp-10:6rem;
  --band:clamp(3.25rem,2rem + 5vw,6rem);
  --gutter:clamp(1rem,.55rem + 1.9vw,2rem);
  --shell:1200px;
  --shell-wide:1340px;

  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px; --r-pill:999px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-1:140ms; --dur-2:260ms; --dur-3:440ms; --dur-4:760ms;

  --header-h:74px;
  --focus:0 0 0 3px rgba(15,115,220,.4), 0 0 0 6px rgba(255,255,255,.85);
}

/* ---------- 3. Base ---------- */
html { overflow-x: clip; }
body {
  margin: 0; background: #fff; color: var(--ink-base);
  font-family: var(--font-body); font-size: var(--fs-base);
  line-height: 1.68; font-weight: 400;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5,h6,p,li,dt,dd,blockquote,figcaption,td,th,label,legend,summary { color: inherit; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; letter-spacing: -.022em; color: var(--ink-base); }
h1 { font-size: var(--fs-4xl); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; }
h2 { font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }
p { max-width: 72ch; }
.lede { font-size: var(--fs-md); color: var(--ink-soft); line-height: 1.6; max-width: 62ch; }
.muted { color: var(--ink-soft); }
small,.small { font-size: var(--fs-sm); }
strong,b { font-weight: 700; }
a { color: var(--accent); text-decoration-color: color-mix(in srgb,currentColor 35%,transparent); text-underline-offset: .18em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
::selection { background: var(--blue-600); color: #fff; }

.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 300;
  background: var(--blue-700); color: #fff; padding: .7rem 1.1rem;
  border-radius: var(--r-md); font-weight: 600; text-decoration: none;
  transition: top var(--dur-2) var(--ease);
}
.skip-link:focus { top: var(--sp-4); }

/* scroll progress */
.progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 200;
  background: linear-gradient(90deg,var(--blue-600),var(--blue-400),var(--gold-500));
  transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
}

/* ---------- 4. Surfaces ---------- */
.band { padding-block: var(--band); background: var(--surface); color: var(--ink); position: relative; }
.band--tight { padding-block: calc(var(--band) * .64); }

.band--paper { --surface:#fff; }
.band--sky   { --surface:var(--sky); --line:#d9eafc; --accent:var(--blue-700); }
.band--sky-2 { --surface:var(--sky-2); --line:#c9e0f8; --accent:var(--blue-700); }

/* tint — the alternating surface between two white sections. Visibly blue,
   not a hint of blue: with a dozen sections on a page the alternation has to be
   legible or the whole run reads as one undifferentiated white block. */
.band--tint {
  --surface:#edf6ff; --line:#cbe3fa; --accent:var(--blue-700);
  --card-bg:#ffffff; --card-line:#cfe6fb;
  background-color: #edf6ff;
  background-image: linear-gradient(180deg,#e2f0ff 0%,#edf6ff 46%,#f6fbff 100%);
}
.band--tint::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(680px 300px at 96% 0%, rgba(31,125,219,.16), transparent 64%);
}
.band--tint > * { position: relative; z-index: 1; }

/* Soft light-blue accent band — white/blue combination, dark text.
   This is the default accent surface; the solid blue band is used sparingly. */
.band--soft {
  --surface:var(--blue-050);
  --ink:var(--ink-base); --ink-soft:var(--ink-base-soft); --ink-mute:var(--ink-base-mute);
  --line:#c5defa; --accent:var(--blue-700);
  --card-bg:#ffffff; --card-ink:var(--ink-base); --card-line:#cfe3f8;
  --card-shadow:0 1px 2px rgba(11,43,79,.04), 0 16px 36px -20px rgba(11,43,79,.22);
  background-color: var(--blue-050);
  background-image: linear-gradient(165deg,#ffffff 0%,var(--blue-050) 42%,var(--blue-100) 100%);
}
.band--soft::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .7;
  background-image: radial-gradient(760px 340px at 92% -12%, rgba(90,169,246,.22), transparent 62%),
                    radial-gradient(520px 300px at -4% 108%, rgba(232,163,61,.12), transparent 60%);
}
.band--soft > * { position: relative; z-index: 1; }

/* bright blue section — this replaces the old navy */
.band--blue {
  --surface:var(--blue-600);
  --ink:#ffffff; --ink-soft:#dcecff; --ink-mute:#c4dffd;
  --line:rgba(255,255,255,.26);
  --accent:#ffffff;
  --card-bg:rgba(255,255,255,.12);
  --card-ink:#ffffff; --card-line:rgba(255,255,255,.26);
  --card-shadow:none;
  background-color: var(--blue-600);
  background-image: linear-gradient(135deg,var(--blue-700) 0%,var(--blue-600) 45%,var(--blue-500) 100%);
}
.band--blue::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(900px 420px at 88% -10%, rgba(255,255,255,.3), transparent 62%),
                    radial-gradient(640px 380px at 2% 108%, rgba(232,163,61,.26), transparent 60%);
}
.band--blue > * { position: relative; z-index: 1; }

/* deep section for contrast variety */
.band--deep {
  --surface:var(--navy);
  --ink:#eef6ff; --ink-soft:#b7d3f0; --ink-mute:#9ec2e6;
  --line:rgba(255,255,255,.18);
  --accent:var(--blue-300);
  --card-bg:rgba(255,255,255,.07);
  --card-ink:#eef6ff; --card-line:rgba(255,255,255,.18);
  --card-shadow:none;
  background-color: var(--navy);
  background-image: radial-gradient(1000px 480px at 85% -8%, rgba(47,142,240,.42), transparent 62%),
                    linear-gradient(160deg,#0a2748,var(--navy) 60%,#0d3360);
}

/* ---------- 5. Image-backed sections ---------- */
.imgsec { position: relative; isolation: isolate; overflow: hidden; }
/* solid fallback under the photograph so text never lands on bare white */
.imgsec.veil-blue { background-color: #103e76; }
.imgsec.veil-soft { background-color: #f3f9ff; }
.imgsec__bg {
  position: absolute; inset: -8% 0; z-index: -2;
  background-size: cover; background-position: center;
  will-change: transform; overflow: hidden;
}
.imgsec__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  /* A touch of contrast and a cooler cast stop stock photography reading flat
     under a light veil. */
  filter: saturate(.94) contrast(1.07);
}
/* The home hero frames a bright window at dead centre, which washes out to
   near-white behind the veil. Biasing the crop downward puts the desk and the
   case file on screen instead. */
.hero .imgsec__bg img { object-position: 50% 72%; }
.imgsec__veil { position: absolute; inset: 0; z-index: -1; }

/* Light veil: a scrim that sits behind the copy column and then gets out of
   the way. The previous version washed the whole frame to near-white, which
   threw away the photograph the page is built around. */
.veil-light::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(255,255,255,.97) 0%,
    rgba(255,255,255,.95) 34%,
    rgba(255,255,255,.80) 46%,
    rgba(255,255,255,.38) 57%,
    rgba(255,255,255,.06) 69%,
    rgba(255,255,255,0) 100%);
}
@media (max-width: 900px) {
  /* Stacked layout, so the scrim runs top to bottom: solid under the copy,
     fading out over the lower part of the frame where the photograph shows. */
  .veil-light::after {
    background: linear-gradient(180deg,
      rgba(255,255,255,.95) 0%, rgba(255,255,255,.92) 46%,
      rgba(255,255,255,.72) 70%, rgba(255,255,255,.3) 88%,
      rgba(255,255,255,.06) 100%);
  }
  .hero .imgsec__bg img, .phead .imgsec__bg img { object-position: 68% center; }
  .hero__inner { padding-block: clamp(2rem,1rem + 5vw,3.25rem); }
  .hero h1 { max-width: none; }
}
/* Soft veil: the interior-page version of the same scrim — opaque behind the
   headline column, clear of the photograph from about two thirds across. */
.veil-soft::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(255,255,255,.96) 0%,
    rgba(255,255,255,.93) 36%,
    rgba(255,255,255,.76) 50%,
    rgba(255,255,255,.34) 62%,
    rgba(255,255,255,.06) 76%,
    rgba(255,255,255,0) 100%);
}
@media (max-width: 900px) {
  .veil-soft::after {
    background: linear-gradient(180deg,
      rgba(255,255,255,.95) 0%, rgba(255,255,255,.92) 48%,
      rgba(255,255,255,.72) 72%, rgba(255,255,255,.32) 90%,
      rgba(255,255,255,.08) 100%);
  }
}

/* blue veil: white text over an image — used sparingly */
.veil-blue::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(10,45,88,.93) 0%, rgba(13,66,130,.88) 40%, rgba(15,115,220,.66) 70%, rgba(47,142,240,.42) 100%);
}
@media (max-width: 900px) {
  .veil-blue::after {
    background: linear-gradient(180deg, rgba(10,45,88,.92), rgba(13,74,146,.88) 60%, rgba(15,115,220,.8));
  }
}

/* ---------- 6. Layout ---------- */
.shell { width: min(100% - (var(--gutter) * 2), var(--shell)); margin-inline: auto; }
.shell--wide { width: min(100% - (var(--gutter) * 2), var(--shell-wide)); }

.stack > * + * { margin-top: var(--sp-4); }

.grid > *, .split > *, .stats > *, .steps > *, .scope > *, .footer-grid > *,
.rev-grid > *, .form__row > *, .hero__inner > *, .footer-cta__inner > * { min-width: 0; }

.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%,320px),1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%,280px),1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%,215px),1fr)); }

.section-head { max-width: 62ch; margin-bottom: var(--sp-7); }
.section-head > * + * { margin-top: var(--sp-3); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center p { margin-inline: auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 700;
  color: var(--accent); letter-spacing: .02em;
}
.eyebrow {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em;
}
.eyebrow::before {
  content: ""; width: 1.4rem; height: 1px; flex: none;
  background: currentColor; opacity: .5;
}
.rule { height: 1px; background: var(--line); border: 0; margin-block: var(--sp-6); }

/* ---------- 7. Buttons ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.5rem; min-height: 50px;
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 700;
  border-radius: var(--r-pill); text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent; text-align: center;
  transition: transform var(--dur-1) var(--ease), background-color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.btn > * { position: relative; z-index: 1; }
/* shine sweep */
.btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.26), transparent);
  transform: skewX(-18deg); transition: left var(--dur-4) var(--ease);
}
.btn:hover::after { left: 115%; }
.btn:active { transform: translateY(1px) scale(.995); }
.btn .ic { width: 1.05em; height: 1.05em; flex: none; }

.btn--primary { background: var(--blue-700); color: #fff; box-shadow: 0 1px 2px rgba(11,36,64,.1); }
.btn--primary:hover { background: var(--blue-800); box-shadow: 0 6px 16px -8px rgba(11,36,64,.45); transform: translateY(-1px); }
.btn--wa { background: var(--wa); color: #fff; box-shadow: 0 1px 2px rgba(11,36,64,.1); }
.btn--wa:hover { background: var(--wa-dark); box-shadow: 0 6px 16px -8px rgba(11,36,64,.45); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb,var(--accent) 7%,transparent); transform: translateY(-1px); }
.btn--on-dark { background: #fff; color: var(--blue-700); }
.btn--on-dark:hover { background: var(--blue-050); transform: translateY(-1px); }
.btn--outline-light { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.55); }
.btn--outline-light:hover { background: #fff; color: var(--blue-700); border-color: #fff; transform: translateY(-1px); }
.btn--sm { padding: .55rem 1.05rem; min-height: 42px; font-size: var(--fs-xs); }
.btn--lg { padding: 1.05rem 1.9rem; min-height: 58px; font-size: var(--fs-base); }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
/* the phone number is the better label, but it does not fit two-up on a small
   phone — the short form takes over there rather than wrapping to two lines */
.btn__t { display: inline; }
.btn__t--s { display: none; }
@media (max-width: 400px) {
  .btn__t { display: none; }
  .btn__t--s { display: inline; }
}

.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; padding-block: .2rem;
  font-weight: 700; color: var(--accent); text-decoration: none; font-size: var(--fs-sm);
}
.link-arrow .ic { width: 1em; height: 1em; transition: transform var(--dur-2) var(--ease); }
.link-arrow:hover .ic { transform: translateX(4px); }
.link-arrow:hover { text-decoration: underline; text-underline-offset: .22em; }

/* ---------- 8. Header ---------- */
.site-header { position: sticky; top: 0; z-index: 120; }
.topbar {
  background-color: var(--blue-700);
  background-image: linear-gradient(90deg,var(--blue-800),var(--blue-700) 52%,var(--blue-600));
  color: #e4f1ff; font-size: var(--fs-xs); line-height: 1.4;
}
.topbar__inner { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; min-height: 38px; padding-block: .35rem; }
.topbar__item { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.topbar__item .ic { width: .95em; height: .95em; color: var(--gold-500); flex: none; }
.topbar__spacer { margin-left: auto; }
.topbar__call { color: #fff; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .2rem; min-height: 36px; white-space: nowrap; flex: none; }
.topbar__call:hover { color: var(--blue-200); }
@media (max-width: 859px) {
  /* Kept on phones, as one trust line plus the number, scrolling sideways. */
  .topbar__inner { flex-wrap: nowrap; gap: var(--sp-4); overflow-x: auto; scrollbar-width: none; }
  .topbar__inner::-webkit-scrollbar { display: none; }
  .topbar__spacer { display: none; }
  .topbar__call {
    position: sticky; right: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1);
    padding-left: 1.5rem; padding-right: var(--gutter);
    background: linear-gradient(90deg, rgba(18,99,189,0), var(--blue-700) 24%, var(--blue-600) 100%);
  }
}

.nav {
  position: relative; background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line-base);
  transition: box-shadow var(--dur-2) var(--ease);
}
.site-header.is-stuck .nav { box-shadow: 0 1px 0 var(--blue-100), 0 10px 26px -22px rgba(11,36,64,.5); }
.nav__inner { display: flex; align-items: center; gap: clamp(.5rem,1.5vw,1.5rem); min-height: var(--header-h); min-width: 0; }

.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--navy); min-width: 0; flex: 0 1 auto; padding-block: .35rem; }
.brand__mark { width: 50px; height: 50px; flex: none; border-radius: 50%; overflow: hidden; transition: transform var(--dur-3) var(--ease-spring); }
.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.06); }
.brand__mark img { width: 100%; height: 100%; object-fit: contain; }
.brand__copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.08; }
.brand__name {
  font-family: var(--font-script); font-style: italic; font-weight: 600;
  font-size: clamp(1.24rem,1.04rem + .68vw,1.68rem);
  color: var(--navy); white-space: nowrap;
}
.brand__sub {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(.745rem,.71rem + .18vw,.8rem);
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--blue-600); white-space: nowrap; margin-top: .16rem;
}
.brand__tag { font-size: .72rem; letter-spacing: .04em; color: var(--ink-base-mute); white-space: nowrap; margin-top: .16rem; display: none; }
@media (min-width: 1280px) { .brand__tag { display: block; } }
@media (max-width: 400px) { .brand__mark { width: 42px; height: 42px; } .brand__name { font-size: 1.14rem; } }

.nav__desktop { display: none; }
.nav__tools { display: flex; align-items: center; gap: .55rem; margin-left: auto; flex: none; }
@media (min-width: 1100px) {
  /* Stretching the row and each dropdown group to the full bar height removes
     the dead strip between a nav button and its panel. Without it the pointer
     is briefly inside neither element on the way down, mouseleave fires, and
     the panel shuts before you can reach it. */
  .nav__desktop { display: flex; align-items: stretch; align-self: stretch; gap: clamp(.1rem,.5vw,.45rem); margin-left: auto; min-width: 0; }
  .nav__desktop > .nav-link { align-self: center; }
}

.nav-link {
  position: relative; display: inline-flex; align-items: center; gap: .32rem;
  padding: .55rem .62rem; border-radius: var(--r-md);
  font-size: .905rem; font-weight: 650; color: var(--navy);
  text-decoration: none; white-space: nowrap;
  transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.nav-link::after {
  content: ""; position: absolute; left: .62rem; right: .62rem; bottom: .3rem; height: 2px;
  border-radius: 2px; background: var(--blue-600);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-2) var(--ease);
}
.nav-link:hover { color: var(--blue-600); background: var(--blue-050); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link[aria-current="page"], .nav-link.is-active { color: var(--blue-600); }
.nav-link[aria-current="page"]::after, .nav-link.is-active::after { transform: scaleX(1); }
.nav-link .ic { width: .72em; height: .72em; opacity: .65; transition: transform var(--dur-2) var(--ease); }
.nav-group { position: static; display: flex; align-items: center; }
.nav-group.is-open > .nav-link .ic { transform: rotate(180deg); }
.nav-group.is-open > .nav-link { color: var(--blue-600); background: var(--blue-050); }

.nav-panel {
  position: absolute; top: calc(100% - .25rem); left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: min(calc(100vw - 2rem), 900px);
  max-height: calc(100vh - var(--header-h) - 4rem); overflow-y: auto;
  background: #fff; color: var(--ink-base);
  border: 1px solid var(--line-base); border-radius: var(--r-lg);
  box-shadow: 0 34px 80px -34px rgba(11,43,79,.5), 0 2px 6px rgba(11,43,79,.06);
  padding: var(--sp-5); z-index: 140;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility var(--dur-2);
}
.nav-group.is-open .nav-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
/* locations panel is narrower and hangs from the right of the bar */
.nav-panel--right {
  left: auto; right: var(--gutter); transform: translateX(0) translateY(-8px);
  width: min(calc(100vw - 2rem), 680px);
}
.nav-group.is-open .nav-panel--right { transform: translateX(0) translateY(0); }
.nav-panel__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line-base); }
.nav-panel__head strong { font-family: var(--font-display); font-size: var(--fs-md); color: var(--navy); }
.nav-panel__grid { display: grid; gap: .25rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
.nav-item {
  display: flex; gap: .7rem; padding: .62rem .7rem; border-radius: var(--r-md);
  text-decoration: none; color: var(--navy); position: relative;
  transition: background-color var(--dur-1) var(--ease), transform var(--dur-2) var(--ease);
}
.nav-item:hover { background: var(--blue-050); transform: translateX(4px); }
.nav-item .ic { width: 1.05rem; height: 1.05rem; color: var(--blue-600); flex: none; margin-top: .22rem; }
.nav-item__t { display: block; font-weight: 700; font-size: .9rem; line-height: 1.35; }
.nav-item__d { display: block; font-size: .78rem; color: var(--ink-base-mute); line-height: 1.45; margin-top: .1rem; }

.nav-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.nav-chip {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .46rem 1rem; min-width: 48px; min-height: 40px; justify-content: center;
  border-radius: var(--r-pill);
  background: var(--blue-050); border: 1px solid var(--blue-100);
  font-size: .85rem; font-weight: 650; color: var(--navy); text-decoration: none;
  transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.nav-chip::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--blue-700);
  transform: translateY(102%); transition: transform var(--dur-3) var(--ease-out);
}
.nav-chip > * , .nav-chip { position: relative; }
.nav-chip span, .nav-chip svg { position: relative; z-index: 1; }
.nav-chip:hover { color: #fff; border-color: var(--blue-700); transform: translateY(-1px); }
.nav-chip:hover::before { transform: translateY(0); }

.nav__cta { display: none; }
@media (min-width: 880px) { .nav__cta { display: inline-flex; } }

/* compact hamburger — flex column so the bars never stretch apart */
.nav__burger {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; width: 42px; height: 42px; padding: 0;
  border-radius: var(--r-md); border: 1px solid var(--line-base);
  background: #fff; flex: none;
  transition: border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
.nav__burger:hover { border-color: var(--blue-400); background: var(--blue-050); box-shadow: 0 8px 18px -12px rgba(11,43,79,.6); }
.nav__burger:active { transform: scale(.94); }
.nav__burger span {
  display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--navy);
  transform-origin: center;
  transition: transform var(--dur-2) var(--ease-spring), opacity 120ms var(--ease), width var(--dur-2) var(--ease);
}
.nav__burger:hover span:nth-child(2) { width: 14px; }
.nav__burger[aria-expanded="true"] span { width: 20px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (min-width: 1100px) { .nav__burger { display: none; } }

/* drawer */
.drawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; pointer-events: none; }
.drawer.is-open { visibility: visible; pointer-events: auto; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(8,30,58,.55); opacity: 0; transition: opacity var(--dur-3) var(--ease); backdrop-filter: blur(3px); }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(92vw,400px);
  background: #fff; color: var(--ink-base);
  transform: translateX(102%); transition: transform var(--dur-3) var(--ease-out);
  display: flex; flex-direction: column; box-shadow: -26px 0 64px -32px rgba(11,43,79,.6);
}
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line-base); }
.drawer__close { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-md); border: 1px solid var(--line-base); color: var(--navy); }
.drawer__close:hover { background: var(--blue-050); }
.drawer__body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--sp-3) var(--sp-5) var(--sp-6); flex: 1; }
.drawer__foot { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line-base); display: grid; gap: .5rem; background: var(--sky); }
.drawer__social { display: flex; gap: .5rem; justify-content: center; margin-top: .4rem; }
.drawer__social a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line-base); color: var(--blue-600); }
.drawer__social a:hover { background: var(--blue-600); color: #fff; }
.drawer__social .ic { width: 1.1rem; height: 1.1rem; }

.m-link { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: .8rem 0; font-weight: 650; font-size: 1.02rem; color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--line-base); }
.m-link[aria-current="page"] { color: var(--blue-600); }
.m-acc { border-bottom: 1px solid var(--line-base); }
.m-acc__btn { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); width: 100%; padding: .8rem 0; font-weight: 650; font-size: 1.02rem; color: var(--navy); text-align: left; }
.m-acc__btn .ic { width: 1rem; height: 1rem; color: var(--blue-600); transition: transform var(--dur-2) var(--ease); flex: none; }
.m-acc__btn[aria-expanded="true"] .ic { transform: rotate(180deg); }
.m-acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-3) var(--ease); }
.m-acc__btn[aria-expanded="true"] + .m-acc__panel { grid-template-rows: 1fr; }
.m-acc__inner { overflow: hidden; }
.m-acc__list { display: grid; gap: .1rem; padding: 0 0 .8rem; }
.m-sub { display: block; padding: .56rem .8rem; border-radius: var(--r-sm); color: var(--ink-base-soft); text-decoration: none; font-size: .95rem; font-weight: 550; }
.m-sub:hover { background: var(--blue-050); color: var(--blue-600); }

/* ---------- 9. Hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero__inner { position: relative; z-index: 2; display: grid; gap: clamp(1.5rem,3vw,3rem); padding-block: clamp(3rem,1.6rem + 7vw,6.5rem); align-items: center; }
@media (min-width: 980px) { .hero__inner { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); } }

.hero__flag {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .5rem 1.05rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.86); border: 1px solid rgba(255,255,255,.95);
  font-size: var(--fs-xs); font-weight: 700; color: var(--blue-800);
  letter-spacing: .005em;
  backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px);
  box-shadow: 0 1px 2px rgba(11,36,64,.05), 0 10px 24px -16px rgba(11,36,64,.4);
}
.hero__flag .dot { width: 8px; height: 8px; border-radius: 50%; background: #1cc06a; flex: none; box-shadow: 0 0 0 4px rgba(28,192,106,.22); animation: fc-pulse 2.4s ease-in-out infinite; }
@keyframes fc-pulse { 0%,100% { box-shadow: 0 0 0 4px rgba(28,192,106,.22); } 50% { box-shadow: 0 0 0 9px rgba(28,192,106,0); } }

.hero h1 { margin-top: var(--sp-4); color: var(--navy); max-width: 16ch; }
.hero h1 .accent { color: var(--blue-600); }
.hero__sub { margin-top: var(--sp-4); font-size: var(--fs-md); color: var(--ink-base-soft); max-width: 54ch; line-height: 1.62; }
.hero__actions { margin-top: var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.hero__trust {
  margin-top: var(--sp-7); display: grid; gap: var(--sp-4) var(--sp-5);
  grid-template-columns: repeat(2, minmax(0,1fr));
  border-top: 1px solid var(--blue-200); padding-top: var(--sp-5);
}
.hero__stat > span { letter-spacing: .01em; }
@media (min-width: 560px) { .hero__trust { grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--sp-4); } }
.hero__stat { min-width: 0; }
.hero__stat b { display: block; font-family: var(--font-display); font-size: clamp(1.55rem,1.1rem + 1.4vw,2.2rem); font-weight: 800; color: var(--ink-base); line-height: 1; letter-spacing: -.03em; }
.hero__stat > span { display: block; font-size: var(--fs-xs); color: var(--ink-base-mute); margin-top: .35rem; letter-spacing: .02em; font-weight: 600; }

.hero__cards { display: grid; gap: .75rem; }
.hero-card {
  display: flex; gap: .85rem; align-items: flex-start;
  background: rgba(255,255,255,.76); border: 1px solid rgba(255,255,255,.9);
  border-radius: var(--r-lg); padding: 1.05rem 1.2rem;
  box-shadow: 0 1px 2px rgba(11,36,64,.05), 0 14px 34px -22px rgba(11,36,64,.4);
  backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px);
  transition: transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease), border-color var(--dur-2) var(--ease);
}
.hero-card:hover { transform: translateY(-3px); background: rgba(255,255,255,.9); box-shadow: var(--card-shadow-hi); border-color: #fff; }
.hero-card .ic-wrap { width: 42px; height: 42px; border-radius: var(--r-md); display: grid; place-items: center; flex: none; background: linear-gradient(135deg,var(--blue-600),var(--blue-400)); color: #fff; box-shadow: 0 6px 14px -6px rgba(31,125,219,.6); }
.hero-card .ic-wrap .ic { width: 1.2rem; height: 1.2rem; }
.hero-card b { display: block; font-family: var(--font-display); font-size: .99rem; color: var(--navy); line-height: 1.25; }
.hero-card span { display: block; font-size: .83rem; color: var(--ink-base-mute); line-height: 1.45; margin-top: .18rem; }

/* ---------- 10. Page header (interior) ---------- */
.phead { position: relative; isolation: isolate; overflow: hidden; color: #fff; }

.phead__inner { position: relative; z-index: 2; padding-block: clamp(2.5rem,1.4rem + 4.6vw,4.75rem); }
.phead h1 { color: #fff; margin-top: var(--sp-3); max-width: 20ch; font-size: var(--fs-3xl); text-shadow: 0 2px 20px rgba(5,25,50,.35); }
.phead__sub { margin-top: var(--sp-4); color: #dbeaff; font-size: var(--fs-md); max-width: 60ch; }
.phead__actions { margin-top: var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.phead__facts { margin-top: var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.phead__fact { display: inline-flex; align-items: center; gap: .45rem; padding: .48rem .95rem; border-radius: var(--r-pill); background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); font-size: var(--fs-xs); font-weight: 650; color: #fff; backdrop-filter: blur(4px); }
.phead__fact .ic { width: .95em; height: .95em; color: var(--gold-500); flex: none; }

.crumbs { font-size: var(--fs-xs); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; list-style: none; padding: 0; margin: 0; }
.crumbs li { display: inline-flex; align-items: center; gap: .5rem; color: #bcd8f5; }
.crumbs a { color: #ddeeff; text-decoration: none; display: inline-flex; align-items: center; min-height: 36px; padding: .15rem; }
.crumbs a:hover { color: #fff; text-decoration: underline; text-underline-offset: .2em; }
.crumbs li + li::before { content: "/"; color: rgba(255,255,255,.4); }
.crumbs [aria-current="page"] { color: #fff; font-weight: 650; }

/* Light page header — the default. White/blue wash with the photo showing through. */
.phead--light { color: var(--navy); border-bottom: 1px solid var(--blue-100); }
.phead--light h1 { color: var(--navy); text-shadow: none; }
.phead--light .phead__sub { color: var(--ink-base-soft); }
.phead--light .crumbs li { color: var(--ink-base-mute); }
.phead--light .crumbs a { color: var(--blue-700); }
.phead--light .crumbs a:hover { color: var(--blue-800); }
.phead--light .crumbs li + li::before { color: var(--blue-300); }
.phead--light .crumbs [aria-current="page"] { color: var(--navy); }
.phead--light .phead__fact {
  background: rgba(255,255,255,.88); border-color: var(--blue-200); color: var(--navy);
  box-shadow: 0 6px 16px -10px rgba(11,43,79,.3);
}
.phead--light .phead__fact .ic { color: var(--gold-600); }
.phead--light .eyebrow { color: var(--blue-700) !important; }


/* ---------- 11. Cards ---------- */
.card {
  position: relative; background: var(--card-bg); color: var(--card-ink);
  border: 1px solid var(--card-line); border-radius: var(--r-lg);
  padding: var(--sp-5); box-shadow: var(--card-shadow);
  display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0;
  overflow: hidden;
}
.card > p { max-width: none; }
.card > * { position: relative; z-index: 1; }
/* Filled blue icon wells, on a lighter gradient than the original. Outline
   discs drained the colour out of every card on the site. */
.card__ic {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex: none;
  background: linear-gradient(135deg,var(--blue-600),var(--blue-400)); color: #fff;
  box-shadow: 0 8px 18px -8px rgba(31,125,219,.55);
  transition: transform var(--dur-3) var(--ease-spring), box-shadow var(--dur-2) var(--ease);
}
@media (hover: hover) {
  .card:hover .card__ic { transform: rotate(-6deg) scale(1.07); box-shadow: 0 12px 24px -8px rgba(31,125,219,.7); }
}
.card__ic .ic { width: 1.35rem; height: 1.35rem; }
.card h3 { font-size: var(--fs-lg); }
.card__foot { margin-top: auto; padding-top: var(--sp-2); }
.band--blue .card__ic, .band--deep .card__ic { background: rgba(255,255,255,.2); }

.card--link { text-decoration: none; transition: transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease), border-color var(--dur-2) var(--ease); }
.card--link::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0;
  background: linear-gradient(160deg, rgba(15,115,220,.07), rgba(47,142,240,0) 60%);
  transition: opacity var(--dur-3) var(--ease);
}
.card--link:hover { transform: translateY(-3px); border-color: var(--blue-300); box-shadow: var(--card-shadow-hi); }
.card--link:hover::before { opacity: 1; }
.card--flat { box-shadow: none; }
.card--pad-lg { padding: var(--sp-6); }

/* numbered feature card — used for the "why" section */
.feat {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--line-base); border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  box-shadow: var(--card-shadow);
  transition: transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease), border-color var(--dur-2) var(--ease);
}
.feat::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg,var(--blue-600),var(--blue-400),var(--gold-500));
  transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-3) var(--ease-out);
}
.feat:hover { transform: translateY(-3px); border-color: var(--blue-300); box-shadow: var(--card-shadow-hi); }
.feat:hover::before { transform: scaleX(1); }
/* `.feat > *` further down sets position:relative at the same specificity and
   would win on source order, so the index is scoped one level deeper. */
.feat .feat__n {
  position: absolute; right: 1.1rem; top: .8rem;
  font-family: var(--font-display); font-weight: 800; font-size: 1.5rem;
  color: var(--blue-300); line-height: 1; letter-spacing: -.02em; z-index: 0;
  transition: color var(--dur-3) var(--ease);
}
.feat:hover .feat__n { color: var(--blue-600); }
.feat h3 { padding-right: 2.2rem; }
.feat > * { position: relative; z-index: 1; }
.feat__ic { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg,var(--blue-600),var(--blue-400)); color: #fff; margin-bottom: var(--sp-4); box-shadow: 0 9px 20px -8px rgba(31,125,219,.6); transition: transform var(--dur-3) var(--ease-spring); }
@media (hover: hover) { .feat:hover .feat__ic { transform: rotate(-7deg) scale(1.08); } }
.feat__ic .ic { width: 1.4rem; height: 1.4rem; }
.feat h3 { font-size: var(--fs-lg); margin-bottom: .55rem; color: var(--navy); }
.feat p { font-size: var(--fs-sm); color: var(--ink-base-soft); max-width: none; }

/* city / service tile with image */
.tile { position: relative; overflow: hidden; border-radius: var(--r-lg); text-decoration: none; display: block; min-height: 240px; background: var(--navy); border: 1px solid var(--card-line); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,32,62,.94) 6%, rgba(10,45,88,.55) 46%, rgba(15,115,220,.18) 100%); transition: opacity var(--dur-3) var(--ease); }
.tile:hover img { transform: scale(1.09); }
.tile__body { position: relative; z-index: 2; padding: var(--sp-5); height: 100%; display: flex; flex-direction: column; justify-content: flex-end; min-height: 240px; color: #fff; }
.tile__body b { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; display: block; }
.tile__body span { font-size: var(--fs-sm); color: #cfe3fa; margin-top: .2rem; display: block; }
.tile__go { display: inline-flex; align-items: center; gap: .4rem; margin-top: .7rem; font-size: var(--fs-sm); font-weight: 700; color: #fff; opacity: 0; transform: translateY(6px); transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); }
.tile:hover .tile__go, .tile:focus-visible .tile__go { opacity: 1; transform: translateY(0); }
.tile__go .ic { width: 1em; height: 1em; }

/* city card — photo above, label below (locations hub) */
.city-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-lg); background: var(--card-bg); color: var(--card-ink);
  border: 1px solid var(--card-line); box-shadow: var(--card-shadow);
  text-decoration: none; min-width: 0; height: 100%;
  transition: transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease), border-color var(--dur-2) var(--ease);
}
.city-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 900ms var(--ease-out); }
.city-card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg,var(--blue-600),var(--blue-400),var(--gold-500));
  transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-3) var(--ease-out);
}
.city-card:hover { transform: translateY(-3px); border-color: var(--blue-300); box-shadow: var(--card-shadow-hi); }
.city-card:hover img { transform: scale(1.06); }
.city-card:hover::after, .city-card:focus-visible::after { transform: scaleX(1); }
.city-card__body {
  display: flex; flex-direction: column; gap: .15rem;
  padding: var(--sp-4) var(--sp-5) var(--sp-5); min-width: 0;
}
.city-card__body b { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; color: var(--navy); line-height: 1.25; }
.city-card__body span { font-size: var(--fs-sm); color: var(--ink-mute); }
.city-card__body::after {
  content: "View city page →"; margin-top: .55rem;
  font-size: var(--fs-xs); font-weight: 700; color: var(--accent);
  opacity: .72; transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.city-card:hover .city-card__body::after { opacity: 1; transform: translateX(3px); }

/* ---------- 12. Check lists ---------- */
.checks { display: grid; gap: .8rem; list-style: none; padding: 0; margin: 0; }
.checks li { display: flex; gap: .7rem; align-items: flex-start; line-height: 1.6; }
.checks .ic { width: 1.2rem; height: 1.2rem; flex: none; margin-top: .26rem; }
.checks--yes .ic { color: var(--green-600); }
.checks--no .ic { color: var(--red-600); }
.band--blue .checks--yes .ic, .band--blue .checks--no .ic { color: #fff; }
.band--deep .checks--yes .ic { color: #4ddc9a; }
.band--deep .checks--no .ic { color: #ff9a8f; }

.scope { display: grid; gap: var(--sp-5); }
@media (min-width: 820px) { .scope { grid-template-columns: repeat(2,minmax(0,1fr)); } }
.scope__col { border-radius: var(--r-lg); padding: var(--sp-5); border: 1px solid var(--card-line); background: var(--card-bg); color: var(--card-ink); }
.scope__col h3 { display: flex; align-items: center; gap: .55rem; font-size: var(--fs-md); margin-bottom: var(--sp-4); }
.scope__col--yes { border-left: 4px solid var(--green-600); }
.scope__col--no { border-left: 4px solid var(--red-600); }

/* ---------- 13. Stats ---------- */
.stats { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit,minmax(min(100%,170px),1fr)); }
.stat { border-left: 3px solid var(--blue-400); padding-left: var(--sp-4); min-width: 0; }
.stat b { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem,1.25rem + 1.8vw,2.7rem); line-height: 1; letter-spacing: -.03em; color: var(--accent); }
.band--blue .stat b, .band--deep .stat b { color: #fff; }
.band--blue .stat, .band--deep .stat { border-left-color: rgba(255,255,255,.4); }
.stat > span { display: block; font-size: var(--fs-sm); color: var(--ink-soft); margin-top: .45rem; }

/* ---------- 14. Steps ---------- */
.steps { display: grid; gap: var(--sp-5); counter-reset: step; }
@media (min-width: 760px) { .steps--row { grid-template-columns: repeat(auto-fit,minmax(min(100%,230px),1fr)); } }
.step { position: relative; padding-top: var(--sp-6); counter-increment: step; min-width: 0; }
.step::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg,var(--blue-500),var(--blue-200)); }
.step::before {
  content: counter(step,decimal-leading-zero);
  position: absolute; top: .9rem; left: 0;
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-sm);
  color: var(--accent); letter-spacing: .04em;
}
.step h3 { font-size: var(--fs-md); margin: 1.4rem 0 .5rem; }
.step p { font-size: var(--fs-sm); color: var(--ink-soft); max-width: none; }

/* ---------- 15. Accordion / FAQ ---------- */
.faq { display: grid; gap: .7rem; }
.faq__item { border: 1px solid var(--card-line); border-radius: var(--r-md); background: var(--card-bg); color: var(--card-ink); overflow: hidden; transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.faq__item:hover { border-color: var(--blue-300); }
.faq__item.is-open { border-color: var(--blue-500); box-shadow: 0 18px 38px -24px rgba(11,43,79,.45); }
.faq__q { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); width: 100%; padding: 1.05rem 1.2rem; text-align: left; font-family: var(--font-display); font-weight: 650; font-size: var(--fs-md); line-height: 1.4; color: inherit; }
.faq__q:hover { color: var(--accent); }
.faq__q .ic { width: 1.1rem; height: 1.1rem; flex: none; margin-top: .25rem; color: var(--accent); transition: transform var(--dur-3) var(--ease-spring); }
.faq__q[aria-expanded="true"] .ic { transform: rotate(135deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-3) var(--ease); }
.faq__q[aria-expanded="true"] + .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p, .faq__a ul, .faq__a ol { padding-inline: 1.2rem; max-width: 78ch; }
.faq__a > div > *:first-child { padding-top: .1rem; }
.faq__a > div > *:last-child { padding-bottom: 1.2rem; }
.faq__a p + p, .faq__a p + ul { margin-top: .7rem; }
.faq__a ul { list-style: disc; padding-left: 2.4rem; display: grid; gap: .35rem; }
.faq-nav { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: var(--sp-6); }

/* ---------- 16. Tabs ---------- */
.tabs { }
.tabs__list { display: flex; flex-wrap: wrap; gap: .4rem; border-bottom: 2px solid var(--line); margin-bottom: var(--sp-6); padding-bottom: .5rem; }
.tabs__btn {
  position: relative; padding: .6rem 1.05rem; border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink-soft);
  min-height: 42px; display: inline-flex; align-items: center; gap: .45rem;
  transition: color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
.tabs__btn .ic { width: 1em; height: 1em; }
.tabs__btn:hover { color: var(--accent); background: color-mix(in srgb,var(--accent) 8%,transparent); }
.tabs__btn[aria-selected="true"] { color: #fff; background: var(--blue-700); box-shadow: none; }
.band--blue .tabs__btn[aria-selected="true"] { background: #fff; color: var(--blue-700); }
.tabs__panel[hidden] { display: none; }
.tabs__panel { animation: fc-fade-up var(--dur-3) var(--ease-out) both; }
@keyframes fc-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- 17. Carousel ---------- */
.carousel { position: relative; }
.carousel__track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(min(84vw,330px),1fr);
  gap: var(--sp-4); overflow-x: auto; scroll-snap-type: x mandatory;
  padding: .3rem .3rem 1.1rem; margin: -.3rem -.3rem 0;
  scrollbar-width: thin; scrollbar-color: var(--blue-300) transparent;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
@media (min-width: 760px) { .carousel__track { grid-auto-columns: minmax(330px,1fr); } }
.carousel__track > * { scroll-snap-align: start; }
.carousel__track::-webkit-scrollbar { height: 6px; }
.carousel__track::-webkit-scrollbar-thumb { background: var(--blue-300); border-radius: 99px; }
.carousel__track::-webkit-scrollbar-track { background: transparent; }
.carousel__nav { display: flex; align-items: center; gap: .5rem; margin-top: var(--sp-4); }
.carousel__btn {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--card-bg); color: var(--accent);
  transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.carousel__btn:hover:not(:disabled) { background: var(--blue-600); border-color: var(--blue-600); color: #fff; transform: scale(1.08); }
.carousel__btn:disabled { opacity: .35; cursor: default; }
.carousel__btn .ic { width: 1.1rem; height: 1.1rem; }
.carousel__hint { margin-left: auto; font-size: var(--fs-xs); color: var(--ink-mute); }

/* ---------- 18. Reviews ---------- */
.rev-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); justify-content: space-between; margin-bottom: var(--sp-6); }
.rev-score { display: flex; align-items: center; gap: .9rem; }
.rev-score__n { font-family: var(--font-display); font-weight: 800; font-size: 2.7rem; line-height: 1; letter-spacing: -.03em; color: var(--accent); }
.band--blue .rev-score__n { color: #fff; }
.stars { display: inline-flex; gap: .12rem; color: var(--gold-500); }
.stars .ic { width: 1.05rem; height: 1.05rem; }
.rev-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit,minmax(min(100%,290px),1fr)); }
.rev { border: 1px solid var(--card-line); border-radius: var(--r-lg); background: var(--card-bg); color: var(--card-ink); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); position: relative; overflow: hidden; transition: transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease); }
.rev:hover { transform: translateY(-3px); border-color: var(--blue-300); box-shadow: var(--card-shadow-hi); }
.rev__text { font-size: var(--fs-md); line-height: 1.6; max-width: none; }
.rev__foot { margin-top: auto; display: flex; align-items: center; gap: .7rem; font-size: var(--fs-sm); color: var(--ink-soft); padding-top: var(--sp-2); border-top: 1px solid var(--card-line); }
.rev__av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg,var(--blue-600),var(--blue-400)); color: #fff; font-weight: 700; font-size: .92rem; flex: none; }

/* ---------- 19. Forms ---------- */
.form { display: grid; gap: var(--sp-4); }
.form__row { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: repeat(2,minmax(0,1fr)); } }
.field { display: grid; gap: .4rem; min-width: 0; }
.field > label { font-size: var(--fs-sm); font-weight: 700; }
.field > label .req { color: var(--red-600); }
.field .hint { font-size: var(--fs-xs); color: var(--ink-mute); }
.input,.select,.textarea {
  width: 100%; padding: .8rem 1rem; min-height: 50px;
  border: 1.5px solid var(--line-base); border-radius: var(--r-md);
  background: #fff; color: var(--ink-base); font-size: var(--fs-base);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.textarea { min-height: 132px; resize: vertical; line-height: 1.6; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235d7693'%3E%3Cpath d='M8 11 3.5 6.5 4.56 5.44 8 8.88l3.44-3.44L12.5 6.5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; background-size: 1rem; padding-right: 2.5rem; }
.input::placeholder,.textarea::placeholder { color: #9bb3cc; }
.input:focus,.select:focus,.textarea:focus { outline: none; border-color: var(--blue-600); box-shadow: 0 0 0 4px rgba(15,115,220,.14); }
.input:user-invalid,.textarea:user-invalid { border-color: var(--red-600); }
.notice { border-radius: var(--r-md); padding: .95rem 1.15rem; border: 1px solid var(--line); background: color-mix(in srgb,var(--accent) 8%,transparent); font-size: var(--fs-sm); display: flex; gap: .65rem; align-items: flex-start; }
.notice .ic { width: 1.1rem; height: 1.1rem; flex: none; margin-top: .2rem; color: var(--accent); }
.notice--warn { border-color: var(--gold-200); background: #fff8ea; color: #6b4a08; }
.notice--warn .ic { color: var(--gold-600); }
.form__status { font-size: var(--fs-sm); font-weight: 650; min-height: 1.2em; }
.form__status[data-state="ok"] { color: var(--green-600); }
.form__status[data-state="err"] { color: var(--red-600); }

/* ---------- 20. Prose ---------- */
.prose { max-width: 74ch; min-width: 0; }
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 { font-size: var(--fs-2xl); margin-top: var(--sp-8); color: var(--navy); }
.prose h3 { font-size: var(--fs-lg); margin-top: var(--sp-6); color: var(--navy); }
.prose h2 + p,.prose h3 + p,.prose h2 + ul,.prose h3 + ul { margin-top: var(--sp-3); }
.prose ul,.prose ol { padding-left: 1.4rem; display: grid; gap: .5rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--blue-600); }
.prose a { font-weight: 650; }
.prose blockquote { border-left: 4px solid var(--blue-500); padding: .4rem 0 .4rem 1.2rem; color: var(--ink-soft); font-size: var(--fs-md); background: var(--blue-050); border-radius: 0 var(--r-md) var(--r-md) 0; padding-right: 1rem; }
.prose table { font-size: var(--fs-sm); margin-block: var(--sp-5); }
.prose th,.prose td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-weight: 700; background: var(--blue-050); font-family: var(--font-display); }
.prose img { border-radius: var(--r-md); }
.toc { background: var(--blue-050); border: 1px solid var(--blue-100); border-radius: var(--r-lg); padding: var(--sp-5); position: sticky; top: calc(var(--header-h) + 1rem); }
.toc h2 { font-size: var(--fs-md); margin: 0 0 var(--sp-3); }
.toc ol { display: grid; gap: .4rem; padding-left: 1.2rem; }
/* Guide contents links are tapped on a phone, so they get a 24px-high target. */
.toc a { font-size: var(--fs-sm); font-weight: 650;
  display: inline-flex; align-items: center; min-height: 24px; }

.tag { display: inline-flex; align-self: flex-start; padding: .3rem .75rem; border-radius: var(--r-pill); background: var(--blue-050); color: var(--blue-700); font-size: var(--fs-xs); font-weight: 700; border: 1px solid var(--blue-100); }
.band--blue .tag, .band--deep .tag { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.3); }
.post-meta { font-size: var(--fs-xs); color: var(--ink-mute); display: flex; flex-wrap: wrap; gap: .4rem .9rem; }

/* ---------- 21. Footer ---------- */
.site-footer { background: var(--navy); color: #cfe2f7; position: relative; }

/* 21a. closing call to action */
.footer-cta {
  position: relative; overflow: hidden; padding-block: var(--band);
  background-color: var(--blue-100);
  background-image: linear-gradient(130deg,#eef6ff 0%,#d6eaff 52%,#bcdcfb 100%);
  color: var(--navy); border-top: 1px solid var(--blue-200);
}
.footer-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(760px 340px at 88% -20%, rgba(255,255,255,.75), transparent 62%), radial-gradient(520px 280px at 4% 120%, rgba(232,163,61,.18), transparent 60%); }
.footer-cta__inner { position: relative; z-index: 1; display: grid; gap: var(--sp-6); align-items: center; }
.footer-cta__copy { min-width: 0; }
@media (min-width: 900px) { .footer-cta__inner { grid-template-columns: minmax(0,1.3fr) minmax(0,auto); } }
.footer-cta h2 { color: var(--navy); font-size: var(--fs-2xl); }
.footer-cta p { color: var(--ink-base-soft); margin-top: var(--sp-3); }
.footer-cta__pts { display: grid; gap: .45rem; margin-top: var(--sp-5); }
.footer-cta__pts li { display: flex; gap: .55rem; align-items: flex-start; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-base); }
.footer-cta__pts .ic { width: 1.05rem; height: 1.05rem; flex: none; margin-top: .3rem; color: var(--green-600); }
.footer-cta__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
@media (min-width: 900px) { .footer-cta__actions { flex-direction: column; align-items: stretch; min-width: 15rem; } }

/* 21b. trust strip */
.footer-strip {
  background: linear-gradient(90deg,#082647,#0d3a6b 55%,#0b56a8);
  border-block: 1px solid rgba(255,255,255,.1);
}
.footer-strip__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .5rem clamp(.9rem,2.4vw,2.2rem); padding-block: .9rem;
}
.f-badge {
  display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
  font-size: var(--fs-xs); font-weight: 650; color: #dcebff; letter-spacing: .01em;
}
.f-badge .ic { width: 1rem; height: 1rem; color: var(--gold-500); flex: none; }
@media (max-width: 859px) {
  .footer-strip__inner {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  }
  .footer-strip__inner::-webkit-scrollbar { display: none; }
  .f-badge { scroll-snap-align: start; }
}

/* 21c. main body */
.footer-main { padding-block: var(--sp-8) var(--sp-7); }
.footer-grid { display: grid; gap: var(--sp-7); }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: minmax(0,18rem) minmax(0,1fr); gap: var(--sp-7); } }

.footer-brand p { font-size: var(--fs-sm); color: #a9c6e4; margin-top: var(--sp-4); max-width: 42ch; }
.site-footer .brand { color: #fff; }
.site-footer .brand__name { color: #fff; }
.site-footer .brand__sub { color: var(--blue-300); }
.site-footer .brand__tag { color: #a9c6e4; }

.f-contact { display: grid; gap: .2rem; margin-top: var(--sp-5); }
.f-contact li { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--fs-sm); color: #bed8f2; line-height: 1.55; padding-block: .35rem; }
.f-contact .ic { width: 1.05rem; height: 1.05rem; flex: none; margin-top: .3rem; color: var(--blue-300); }
/* Phone, WhatsApp and email in the footer are tapped often, so they get a full
   24px-high target rather than the 22px the text alone produced. */
.f-contact a { color: #fff; text-decoration: none; font-weight: 650;
  display: inline-flex; align-items: center; min-height: 24px; }
.f-contact a:hover { color: var(--blue-300); text-decoration: underline; text-underline-offset: .2em; }

/* 21d. link columns — accordions on small screens, columns above */
.footer-cols { display: grid; gap: 0; }
@media (min-width: 620px) and (max-width: 999px) { .footer-cols { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 var(--sp-6); } }
/* Six link columns need real width. Below that the set reflows to three,
   which fills the row far more evenly than four with one column left over. */
@media (min-width: 1000px) { .footer-cols { grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--sp-6) var(--sp-5); } }
@media (min-width: 1400px) { .footer-cols { grid-template-columns: repeat(6,minmax(0,1fr)); gap: var(--sp-6) var(--sp-4); } }

.f-col { min-width: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.f-col__h { margin: 0; }
.f-col__btn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  width: 100%; padding: .95rem 0; text-align: left;
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--blue-300);
}
.f-col__btn .ic { width: 1.05rem; height: 1.05rem; flex: none; transition: transform var(--dur-2) var(--ease); }
.f-col__btn[aria-expanded="true"] .ic { transform: rotate(180deg); }
/* The panel is a sibling of the <h3>, not of the button inside it, so the open
   state is carried on .f-col by fc.js rather than by a sibling selector. */
.f-col__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-3) var(--ease); }
.f-col.is-open .f-col__panel { grid-template-rows: 1fr; }
.f-col__panel > ul { overflow: hidden; }
.f-col__panel ul { display: grid; gap: .1rem; list-style: none; padding: 0 0 .7rem; margin: 0; }
.f-col a {
  position: relative; color: #cfe2f7; text-decoration: none; font-size: var(--fs-sm);
  display: inline-flex; align-items: center; min-height: 38px; padding: .2rem 0 .2rem 0;
  /* Short labels such as "Pali" and "UAE" would otherwise be a 22px-wide tap
     target, under the 24px minimum. */
  min-width: 24px; justify-content: flex-start;
  transition: color var(--dur-1) var(--ease), transform var(--dur-2) var(--ease);
}
.f-col a::before {
  content: ""; position: absolute; left: -.72rem; top: 50%; width: 3px; height: 3px;
  border-radius: 50%; background: var(--blue-400); opacity: 0;
  transform: translateY(-50%) scale(.4); transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
@media (hover: hover) {
  .f-col a:hover { color: #fff; transform: translateX(6px); }
  .f-col a:hover::before { opacity: 1; transform: translateY(-50%) scale(1); }
}
.f-col a:focus-visible { color: #fff; }
@media (min-width: 1000px) {
  .f-col { border-bottom: 0; }
  .f-col__btn { padding: 0 0 var(--sp-4); cursor: default; }
  .f-col__btn .ic { display: none; }
  .f-col__panel { grid-template-rows: 1fr; }
}

.social { display: flex; gap: .55rem; margin-top: var(--sp-5); }
.social a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-md); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); color: #ddeeff; transition: background-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.social a:hover { background: var(--blue-500); border-color: var(--blue-400); transform: translateY(-3px) scale(1.05); }
.social a:active { transform: scale(.94); }
.social .ic { width: 1.15rem; height: 1.15rem; }

/* 21e. bottom bar */
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-block: var(--sp-5); font-size: var(--fs-xs); color: #9dbbd9; }
.footer-bottom__inner { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); align-items: center; justify-content: space-between; }
.footer-bottom a { color: #c2d9f0; text-decoration: none; }
.footer-bottom a:hover { color: #fff; }
.footer-legal { display: flex; flex-wrap: wrap; gap: .1rem .6rem; }
.footer-legal a { position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: .2rem .4rem; border-radius: var(--r-sm); }
.footer-legal a::after {
  content: ""; position: absolute; left: .4rem; right: .4rem; bottom: .35rem; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--dur-2) var(--ease);
}
.footer-legal a:hover::after { transform: scaleX(1); }
.footer-note { color: #7fa0c2; max-width: 92ch; }

/* ---------- 22. Floating actions ---------- */
/* Retired: a fixed stack of five brand-coloured icons is visual noise, and it
   forced every container to be narrowed to avoid it. The sticky header keeps
   the phone number and a Call button on screen instead. */
.quick { display: none; }
.quick a {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .2rem;
  width: 86px; padding: .7rem .4rem; background: #fff; color: var(--navy);
  text-decoration: none; font-size: .72rem; font-weight: 700; text-align: center; line-height: 1.2;
  border: 1px solid var(--line-base); border-right: 0;
  transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), width var(--dur-2) var(--ease);
}
.quick a:first-child { border-radius: var(--r-md) 0 0 0; }
.quick a:last-child { border-radius: 0 0 0 var(--r-md); }
.quick a span {
  display: block; white-space: nowrap; max-width: 0; opacity: 0; margin-top: 0;
  transition: max-width var(--dur-3) var(--ease), opacity var(--dur-2) var(--ease), margin-top var(--dur-2) var(--ease);
}
.quick:hover a { width: 96px; }
.quick:hover a span, .quick a:focus-visible span { max-width: 90px; opacity: 1; margin-top: .18rem; }
.quick a .ic { width: 1.2rem; height: 1.2rem; color: var(--blue-600); transition: transform var(--dur-2) var(--ease-spring); }
.quick a:hover { background: var(--blue-600); color: #fff; }
.quick a:hover .ic { color: #fff; transform: scale(1.18); }
.quick a.is-wa .ic { color: var(--wa); }
.quick a.is-wa:hover { background: var(--wa); }
.quick a.is-ig .ic { color: #c13584; }
.quick a.is-ig:hover { background: linear-gradient(135deg,#f58529,#dd2a7b,#8134af); }
.quick a.is-fb .ic { color: #1877f2; }
.quick a.is-fb:hover { background: #1877f2; }

/* Three actions, each a real target. Five cramped items with brand-coloured
   social glyphs read as clutter and pushed the labels under 11px. */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: grid; grid-template-columns: repeat(3,1fr); gap: .5rem;
  padding: .55rem var(--gutter) calc(.55rem + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--blue-100);
}
@media (min-width: 1100px) { .mobile-bar { display: none; } }
.mobile-bar a {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 48px; border-radius: var(--r-pill); text-decoration: none;
  font-size: .86rem; font-weight: 700; letter-spacing: -.01em;
  background: var(--blue-050); border: 1px solid var(--blue-200); color: var(--blue-800);
  transition: transform var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.mobile-bar a:active { transform: scale(.96); }
.mobile-bar a .ic { width: 1.05rem; height: 1.05rem; flex: none; }
.mobile-bar a.is-call { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }
.mobile-bar a.is-wa { background: var(--wa); border-color: var(--wa); color: #fff; }
@media (max-width: 1099px) { body { padding-bottom: 76px; } }
@media (max-width: 359px) { .mobile-bar a { font-size: .78rem; gap: .3rem; } }

/* scroll-to-top with progress ring */
.to-top {
  position: fixed; right: 1rem; bottom: 88px; z-index: 92;
  width: 52px; height: 52px; border-radius: 50%;
  background: #fff; color: var(--blue-700); display: grid; place-items: center;
  box-shadow: 0 12px 30px -12px rgba(11,43,79,.6); border: 1px solid var(--line-base);
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.9);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-3) var(--ease-spring), visibility var(--dur-2), background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.to-top.is-on { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.to-top:hover { background: var(--blue-600); color: #fff; }
.to-top .ic { width: 1.1rem; height: 1.1rem; position: relative; z-index: 1; transition: transform var(--dur-2) var(--ease); }
.to-top:hover .ic { transform: translateY(-2px); }
.to-top__ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.to-top__ring circle { fill: none; stroke-width: 2.5; }
.to-top__ring .trk { stroke: var(--blue-100); }
.to-top__ring .bar { stroke: var(--blue-600); stroke-linecap: round; transition: stroke-dashoffset 120ms linear; }
.to-top:hover .to-top__ring .trk { stroke: rgba(255,255,255,.3); }
.to-top:hover .to-top__ring .bar { stroke: #fff; }
@media (min-width: 1100px) { .to-top { right: 1.5rem; bottom: 1.5rem; } }

/* ---------- 23. Misc ---------- */
.pill-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-width: 48px; padding: .46rem .95rem; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--card-bg); color: var(--card-ink); font-size: var(--fs-xs); font-weight: 650; text-decoration: none; min-height: 38px; transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), transform var(--dur-2) var(--ease); }
a.pill:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.pill .ic { width: .9em; height: .9em; color: var(--accent); flex: none; }

.split { display: grid; gap: clamp(2rem,4vw,3.5rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .split--wide-l { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); }
  .split--wide-r { grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); }
}
.media-frame { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--card-shadow-hi); position: relative; }
.media-frame img { width: 100%; display: block; transition: transform 1.1s var(--ease-out); }
.media-frame:hover img { transform: scale(1.04); }

.contact-card { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-5); border: 1px solid var(--card-line); border-radius: var(--r-lg); background: var(--card-bg); color: var(--card-ink); text-decoration: none; transition: border-color var(--dur-2) var(--ease), transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease); }
a.contact-card:hover { border-color: var(--blue-300); transform: translateY(-3px); box-shadow: var(--card-shadow-hi); }
.contact-card .ic-wrap { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg,var(--blue-600),var(--blue-400)); color: #fff; flex: none; box-shadow: 0 8px 18px -8px rgba(31,125,219,.55); transition: transform var(--dur-3) var(--ease-spring); }
.contact-card .ic-wrap .ic { width: 1.3rem; height: 1.3rem; }
.contact-card b { display: block; font-family: var(--font-display); font-size: var(--fs-md); }
.contact-card span { display: block; font-size: var(--fs-sm); color: var(--ink-soft); margin-top: .18rem; }

.kv { display: grid; }
.kv > div { display: grid; gap: .2rem .9rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 560px) { .kv > div { grid-template-columns: minmax(0,15ch) minmax(0,1fr); } }
.kv dt { font-weight: 700; font-size: var(--fs-sm); }
.kv dd { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); }
/* Phone, WhatsApp and email sit in this list on the contact page: give the links
   a 24px-high tap target instead of the 20px the text alone produces. */
.kv dd a, .table-wrap td a { display: inline-flex; align-items: center; min-height: 26px; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r-lg); max-width: 100%; }
.table-wrap table { min-width: 520px; font-size: var(--fs-sm); }
.table-wrap th,.table-wrap td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
.table-wrap thead th { background: var(--blue-050); font-family: var(--font-display); font-weight: 700; color: var(--navy); }
.table-wrap tbody tr { transition: background-color var(--dur-1) var(--ease); }
.table-wrap tbody tr:hover { background: var(--blue-050); }
.table-wrap tbody tr:last-child td { border-bottom: 0; }

.map-frame { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); line-height: 0; }
.map-frame iframe { width: 100%; height: 340px; border: 0; }

.ic { display: inline-block; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.ic--fill { fill: currentColor; stroke: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- 24. Motion ---------- */
.fc-js .reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); }
.fc-js .reveal.is-in { opacity: 1; transform: none; }
.fc-js .reveal-l { opacity: 0; transform: translateX(-26px); transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); }
.fc-js .reveal-l.is-in { opacity: 1; transform: none; }
.fc-js .reveal-r { opacity: 0; transform: translateX(26px); transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); }
.fc-js .reveal-r.is-in { opacity: 1; transform: none; }
.fc-js .reveal-zoom { opacity: 0; transform: scale(.94); transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); }
.fc-js .reveal-zoom.is-in { opacity: 1; transform: none; }

.fc-js .stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out); }
.fc-js .stagger.is-in > * { opacity: 1; transform: none; }
.fc-js .stagger.is-in > *:nth-child(1) { transition-delay: 0ms; }
.fc-js .stagger.is-in > *:nth-child(2) { transition-delay: 80ms; }
.fc-js .stagger.is-in > *:nth-child(3) { transition-delay: 160ms; }
.fc-js .stagger.is-in > *:nth-child(4) { transition-delay: 240ms; }
.fc-js .stagger.is-in > *:nth-child(5) { transition-delay: 320ms; }
.fc-js .stagger.is-in > *:nth-child(6) { transition-delay: 400ms; }
.fc-js .stagger.is-in > *:nth-child(7) { transition-delay: 480ms; }
.fc-js .stagger.is-in > *:nth-child(8) { transition-delay: 560ms; }
.fc-js .stagger.is-in > *:nth-child(n+9) { transition-delay: 620ms; }

.fc-js .hero__anim { opacity: 0; transform: translateY(20px); animation: fc-rise 900ms var(--ease-out) forwards; }
.fc-js .hero__anim--1 { animation-delay: 60ms; }
.fc-js .hero__anim--2 { animation-delay: 170ms; }
.fc-js .hero__anim--3 { animation-delay: 280ms; }
.fc-js .hero__anim--4 { animation-delay: 390ms; }
.fc-js .hero__anim--5 { animation-delay: 500ms; }
.fc-js .hero__anim--6 { animation-delay: 610ms; }
@keyframes fc-rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .fc-js .reveal, .fc-js .reveal-l, .fc-js .reveal-r, .fc-js .reveal-zoom,
  .fc-js .stagger > * { opacity: 1; transform: none; transition: none; }
  .fc-js .hero__anim { opacity: 1; transform: none; animation: none; }
  .imgsec__bg { transform: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------- 25. Utilities ---------- */
.mt-0{margin-top:0}.mt-3{margin-top:var(--sp-3)}.mt-4{margin-top:var(--sp-4)}
.mt-5{margin-top:var(--sp-5)}.mt-6{margin-top:var(--sp-6)}.mt-7{margin-top:var(--sp-7)}
.mb-4{margin-bottom:var(--sp-4)}.mb-5{margin-bottom:var(--sp-5)}.mb-6{margin-bottom:var(--sp-6)}
.text-center{text-align:center}.max-none{max-width:none}.nowrap{white-space:nowrap}
.flow > * + * { margin-top: var(--sp-4); }

/* ==========================================================================
   27. Touch-safe hover
   On touch devices a :hover rule sticks after a tap, leaving cards lifted and
   chips filled. Everything that moves is re-stated behind (hover: hover), and
   touch gets a press state instead.
   ========================================================================== */
@media (hover: none) {
  .card--link:hover, .feat:hover, .rev:hover, .city-card:hover,
  a.contact-card:hover, .hero-card:hover, a.pill:hover, .nav-chip:hover {
    transform: none; box-shadow: var(--card-shadow);
  }
  .card:hover .card__ic, .feat:hover .feat__ic { transform: none; }
  .tile:hover img, .media-frame:hover img, .city-card:hover img { transform: none; }
  .nav-chip:hover::before { transform: translateY(102%); }
  .nav-chip:hover { color: var(--navy); border-color: var(--blue-100); }
  .btn:hover::after { left: -60%; }
}
.card--link:active, .city-card:active, .tile:active, a.contact-card:active,
.rev:active, .feat:active { transform: scale(.985); }
.nav-chip:active, a.pill:active, .tabs__btn:active { transform: scale(.95); }
.m-sub:active, .m-link:active, .f-col a:active { opacity: .6; }
/* every tappable target clears 44px and never highlights blue on tap */
a, button, summary, [role="tab"] { -webkit-tap-highlight-color: rgba(15,115,220,.12); }

/* ==========================================================================
   28. Mobile rails — vertical stacks become horizontal swipe decks
   Keeps every word in the DOM and on screen while cutting page height.
   ========================================================================== */
/* min-width:0 keeps a rail from forcing its grid cell wider than the viewport */
.rail-wrap { min-width: 0; }
.rail-hint {
  display: none; align-items: center; gap: .4rem; margin-top: .9rem;
  font-size: var(--fs-xs); font-weight: 700; color: var(--accent);
  letter-spacing: .02em;
}
.rail-hint .ic { width: 1em; height: 1em; animation: fc-nudge 1.9s var(--ease-out) infinite; }
@keyframes fc-nudge { 0%,60%,100% { transform: translateX(0); } 30% { transform: translateX(5px); } }

@media (max-width: 759px) {
  .grid.m-rail, .stats.m-rail, .rev-grid.m-rail, .scope.m-rail, .steps.m-rail {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(80vw, 310px);
    gap: var(--sp-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* bleed to the screen edge so the next card peeks */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    padding-block: .35rem 1rem;
  }
  .grid.m-rail::-webkit-scrollbar, .stats.m-rail::-webkit-scrollbar,
  .rev-grid.m-rail::-webkit-scrollbar, .scope.m-rail::-webkit-scrollbar,
  .steps.m-rail::-webkit-scrollbar { display: none; }

  .m-rail > * { scroll-snap-align: start; min-width: 0; height: 100%; }
  .m-rail > .card, .m-rail > .feat, .m-rail > .rev,
  .m-rail > .city-card, .m-rail > .scope__col, .m-rail > .contact-card { height: 100%; }
  .m-rail > .tile { min-height: 210px; }
  .m-rail > .tile .tile__body { min-height: 210px; }

  .stats.m-rail { grid-auto-columns: min(56vw, 215px); }
  .steps.m-rail { grid-auto-columns: min(80vw, 300px); }
  .steps.m-rail .step { padding-top: var(--sp-6); }
  .scope.m-rail { grid-auto-columns: min(86vw, 330px); }

  .rail-hint { display: inline-flex; }

  /* the tile deck keeps its own ratio rather than a tall stacked block */
  .m-rail > .tile img { position: absolute; }
}

/* ==========================================================================
   29. Mobile polish
   ========================================================================== */
@media (max-width: 759px) {
  /* page headers read as one clean block rather than a full screen of padding */
  .phead__inner { padding-block: clamp(1.75rem,1rem + 4vw,2.6rem); }
  .phead h1 { font-size: var(--fs-2xl); max-width: none; }
  .phead__sub { font-size: var(--fs-base); margin-top: var(--sp-3); }
  .phead__facts { gap: .4rem; margin-top: var(--sp-5); }
  .phead__fact { padding: .4rem .75rem; font-size: .74rem; }
  /* the two header CTAs sit side by side instead of stacking */
  .phead__actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; margin-top: var(--sp-5); }
  .phead__actions .btn { width: 100%; padding-inline: .7rem; font-size: var(--fs-xs); min-height: 52px; }

  .hero__actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; }
  .hero__actions .btn { width: 100%; padding-inline: .7rem; font-size: var(--fs-xs); min-height: 52px; }
  .hero__trust { gap: var(--sp-4) var(--sp-3); padding-top: var(--sp-4); margin-top: var(--sp-6); }
  .hero__cards { gap: .6rem; }

  .section-head { margin-bottom: var(--sp-5); }
  .footer-cta__actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .footer-cta__actions .btn { width: 100%; padding-inline: .7rem; font-size: var(--fs-xs); }
  .footer-cta__actions .btn:last-child { grid-column: 1 / -1; }

  /* two buttons share a row instead of stacking into a tall column */
  .btn-row { gap: .55rem; }
  .btn-row > .btn { flex: 1 1 auto; min-width: calc(50% - .3rem); padding-inline: .9rem; }
  .btn-row > .btn--block { min-width: 100%; }

  .card { padding: var(--sp-4); }
  .card--pad-lg { padding: var(--sp-5); }
  .feat { padding: var(--sp-5) var(--sp-4) var(--sp-4); }
  .faq__q { padding: .9rem 1rem; font-size: var(--fs-base); }
  .faq__a p, .faq__a ul, .faq__a ol { padding-inline: 1rem; }
  .faq__a ul { padding-left: 2.1rem; }

}

/* contact rail on the smallest phones: five labels still fit without clipping */
@media (max-width: 380px) {
  .mobile-bar a { font-size: .66rem; padding-inline: .1rem; }
  .mobile-bar a .ic { width: 1.12rem; height: 1.12rem; }
}

/* ==========================================================================
   30. Effects — reveal, text and hover
   ========================================================================== */

/* 30a. reveal variants (JS adds .is-in) */
.fc-js .reveal-mask { clip-path: inset(0 100% 0 0); opacity: .001; transition: clip-path 900ms var(--ease-out), opacity 500ms var(--ease-out); }
.fc-js .reveal-mask.is-in { clip-path: inset(0 0 0 0); opacity: 1; }
.fc-js .reveal-up { opacity: 0; transform: translateY(34px); transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); }
.fc-js .reveal-up.is-in { opacity: 1; transform: none; }
.fc-js .reveal-blur { opacity: 0; filter: blur(10px); transform: translateY(14px); transition: opacity var(--dur-4) var(--ease-out), filter var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); }
.fc-js .reveal-blur.is-in { opacity: 1; filter: blur(0); transform: none; }
.fc-js .reveal-tilt { opacity: 0; transform: perspective(900px) rotateX(10deg) translateY(26px); transform-origin: 50% 100%; transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); }
.fc-js .reveal-tilt.is-in { opacity: 1; transform: none; }
.fc-js .reveal-rise { opacity: 0; transform: translateY(18px) scale(.97); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-spring); }
.fc-js .reveal-rise.is-in { opacity: 1; transform: none; }

/* 30b. word-by-word headline reveal (JS wraps words in .w) */
.fc-js .t-split .w { display: inline-block; opacity: 0; transform: translateY(.5em) rotate(1.5deg); transition: opacity 560ms var(--ease-out), transform 620ms var(--ease-out); transition-delay: calc(var(--i, 0) * 42ms); }
.fc-js .t-split.is-in .w { opacity: 1; transform: none; }

/* 30c. gradient / shine on accent words */
/* A slow, blue-only shimmer. The earlier version swept gold through the word,
   which fought the palette and read as decoration rather than emphasis. */
.t-grad {
  background-image: linear-gradient(100deg, var(--blue-700) 0%, var(--blue-500) 46%, var(--blue-700) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: fc-grad 16s linear infinite;
}
@keyframes fc-grad { to { background-position: -220% 0; } }
.band--blue .t-grad, .band--deep .t-grad, .veil-blue .t-grad {
  background-image: linear-gradient(100deg,#ffffff 0%,#bcdcff 46%,#ffffff 100%);
}

/* marker-pen highlight that wipes in on reveal */
.t-mark { position: relative; display: inline; background-image: linear-gradient(transparent 62%, rgba(232,163,61,.42) 62%); background-repeat: no-repeat; background-size: 0% 100%; transition: background-size 760ms var(--ease-out) 180ms; }
.fc-js .is-in .t-mark, .fc-js .t-mark.is-in { background-size: 100% 100%; }
html:not(.fc-js) .t-mark { background-size: 100% 100%; }

/* 30d. link underline wipe */
.t-link { position: relative; text-decoration: none; }
.t-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: currentColor; border-radius: 2px; transform: scaleX(0); transform-origin: 100% 50%; transition: transform var(--dur-2) var(--ease-out); }
@media (hover: hover) { .t-link:hover::after { transform: scaleX(1); transform-origin: 0 50%; } }

/* 30e. card spotlight — JS feeds --mx / --my */
.spot { position: relative; }
.spot::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  border-radius: inherit;
  background: radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(15,115,220,.14), transparent 62%);
  transition: opacity var(--dur-2) var(--ease);
}
@media (hover: hover) { .spot:hover::after { opacity: 1; } }
.band--blue .spot::after, .band--deep .spot::after { background: radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.16), transparent 62%); }

/* 30f. gradient border sweep on key cards */
.edge { position: relative; }
.edge::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg,var(--blue-600),var(--blue-400),var(--gold-500));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--dur-3) var(--ease-out);
}
@media (hover: hover) { .edge:hover::before { transform: scaleX(1); } }
.edge:focus-within::before { transform: scaleX(1); }

/* 30g. magnetic buttons (JS sets --tx / --ty, desktop pointer only) */
@media (hover: hover) and (pointer: fine) {
  .mag { transform: translate3d(var(--tx,0),var(--ty,0),0); transition: transform 260ms var(--ease-out); }
  .mag:hover { transition: transform 90ms linear; }
}

/* 30h. section entry for whole bands */
.fc-js .band-in > .shell { opacity: 0; transform: translateY(16px); transition: opacity 720ms var(--ease-out), transform 720ms var(--ease-out); }
.fc-js .band-in.is-in > .shell { opacity: 1; transform: none; }

/* 30i. icon pop shared by every icon chip */
.card__ic, .feat__ic, .ic-wrap, .rev__av { will-change: transform; }
@media (hover: hover) {
  a.contact-card:hover .ic-wrap { transform: rotate(-6deg) scale(1.08); }
  .hero-card:hover .ic-wrap { transform: rotate(-6deg) scale(1.08); }
}
.ic-wrap { transition: transform var(--dur-3) var(--ease-spring); }

/* 30j. respect reduced motion for everything added above */
@media (prefers-reduced-motion: reduce) {
  .fc-js .reveal-mask, .fc-js .reveal-up, .fc-js .reveal-blur,
  .fc-js .reveal-tilt, .fc-js .reveal-rise,
  .fc-js .band-in > .shell { opacity: 1; transform: none; filter: none; clip-path: none; transition: none; }
  .fc-js .t-split .w { opacity: 1; transform: none; transition: none; }
  .t-grad { animation: none; }
  .t-mark { background-size: 100% 100%; transition: none; }
  .rail-hint .ic { animation: none; }
  .mag { transform: none !important; }
}

/* ---------- 26. Print ---------- */
@media print {
  .site-header,.quick,.mobile-bar,.to-top,.footer-cta,.drawer,.progress { display: none !important; }
  body { padding-bottom: 0; color: #000; background: #fff; }
  .band,.hero,.phead { background: #fff !important; color: #000 !important; padding-block: 1rem; }
  .imgsec__bg,.imgsec__veil,.veil-light::after,.veil-blue::after { display: none; }
  .phead h1,.phead__sub,.crumbs { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .72em; }
}