/* Veterinary Falcon — responsive layer over the approved Direction A layouts.
   The page markup carries the desktop design as inline styles; everything here
   either supports it (images, focus states) or overrides it on narrow screens. */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #FBFAF6;
  color: #12163A;
  font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid #2A3FD1;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- photographs dropped into the design's image wells ---- */
.ph { position: relative !important; overflow: hidden !important; }
.ph > img.ph-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block; border: 0;
}
/* caption sits over the photo, bottom-left, legible on any image */
.ph > .ph-cap {
  position: relative; z-index: 2;
  background: linear-gradient(transparent, rgba(10,14,40,0.72));
  color: #FFFFFF !important;
  padding: 26px 2px 0;
  width: 100%;
}
.ph.no-cap > .ph-cap { display: none; }

/* a well with no photograph yet: keep the tinted block and label it honestly */
.ph-todo { position: relative; }
.ph-todo::after {
  content: 'photo to come';
  position: absolute; top: 10px; right: 12px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #8A8572; background: rgba(255,255,255,0.72);
  padding: 3px 8px; border-radius: 999px;
}

/* ---- the page shell ---- */
.page { width: 100% !important; height: auto !important; overflow: visible !important; }

/* skip link */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #151C5E; color: #fff; padding: 12px 18px; font-weight: 700;
}
.skip:focus { left: 8px; top: 8px; }

/* mobile nav toggle lives only on small screens */
.navbtn { display: none; }

/* =========================================================
   TABLET — 1100px and under
   The design is built at 1440. Below that, let the inline
   flex rows wrap and release the fixed column widths.
   ========================================================= */
@media (max-width: 1100px) {
  .page > section, .page > header, .page > footer, .page > div, .page > nav {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .page > section[style*="margin"] { margin-left: 32px !important; margin-right: 32px !important; }

  .page section, .page div, .page header, .page footer, .page span[style*="display: flex"] {
    flex-wrap: wrap !important;
  }

  .page [style*="flex: 0 0 "] { flex-basis: auto !important; }

  .page [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .page [style*="grid-template-columns: repeat(3"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

/* =========================================================
   PHONE — 760px and under
   ========================================================= */
@media (max-width: 760px) {
  .page > section, .page > header, .page > footer, .page > div, .page > nav {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .page > section[style*="margin"] { margin-left: 16px !important; margin-right: 16px !important; }

  /* every multi-column arrangement becomes one column */
  .page [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .page [style*="display: flex"] { flex-wrap: wrap !important; }

  /* headings step down */
  .page h1 { font-size: 34px !important; line-height: 1.1 !important; }
  .page h2 { font-size: 26px !important; line-height: 1.12 !important; }
  .page h3 { font-size: 19px !important; }

  /* image wells get a sane phone height */
  .ph { height: 220px !important; }
  .ph.portrait { height: 300px !important; }

  /* calls to action go full width and stay tappable */
  .page a[style*="border-radius: 999px"], .page a[style*="border-radius: 14px"] {
    min-height: 48px;
  }

  /* the utility bar loses its middle notice */
  .utilbar > span:nth-child(2) { display: none !important; }

  /* desktop nav collapses behind a button */
  .mainnav { display: none !important; width: 100%; order: 9 !important; }
  .page header > a:first-of-type { order: 0 !important; }
  .themebtn { order: 1 !important; margin-left: auto !important; }
  .navbtn { order: 2 !important; margin-left: 8px !important; }
  .page header > a[style*="border-radius: 999px"] {
    order: 1 !important; width: auto !important; height: 40px !important;
    padding: 0 14px !important; font-size: 14px !important; margin-left: auto !important;
  }
  .page header > a:first-of-type span span:last-child { display: none; }
  .themebtn { order: 2 !important; margin-left: 6px !important; width: 40px; height: 40px; }
  .navbtn { order: 3 !important; margin-left: 6px !important; height: 40px; padding: 0 13px; }
  .page header { min-height: 0 !important; padding-top: 10px !important; padding-bottom: 10px !important; gap: 0 !important; }
  .mainnav.open { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; padding: 10px 0 14px !important; }
  .navbtn {
    display: inline-flex !important; align-items: center; gap: 8px;
    margin-left: auto; height: 44px; padding: 0 16px;
    border: 1.5px solid #E8E4DA; border-radius: 999px; background: #fff;
    font: 700 15px/1 'Figtree', sans-serif; color: #151C5E; cursor: pointer;
  }
  .page header { height: auto !important; flex-wrap: wrap !important; padding-top: 14px !important; padding-bottom: 14px !important; gap: 12px !important; }

  /* horizontal scrollers keep their gutter */
  .page [style*="overflow-x: auto"] > span:first-child { flex: 0 0 2px !important; }

  /* tables of rows stack */
}

@media print {
  .utilbar, .navbtn, .mainnav { display: none !important; }
  .page { width: 100% !important; }
}

/* ---- Vet Care mega-menu: closed until asked for ---- */
.megamenu {
  display: none !important;
  opacity: 0;
  transition: opacity .14s ease;
}
.megamenu.open { display: flex !important; opacity: 1; }
.has-menu { position: relative; }

@media (max-width: 760px) {
  .megamenu.open {
    position: static !important;
    width: 100% !important;
    left: auto !important;
    box-shadow: none !important;
    border: 0 !important;
    border-top: 1px solid #E8E4DA !important;
    border-radius: 0 !important;
    padding: 16px 0 10px !important;
    flex-direction: column !important;
    gap: 14px !important;
  }
}

/* header lockup never overflows a narrow screen */
@media (max-width: 760px) {
  .page header > a:first-of-type { gap: 10px !important; min-width: 0; flex: 0 1 auto !important; }
  .page header > a:first-of-type img { width: 42px !important; height: 42px !important; flex: 0 0 auto; }
  .page header > a:first-of-type span { min-width: 0; }
  .page header > a:first-of-type span span:first-child { font-size: 17px !important; }
  .page header > a[style*="border-radius: 999px"] { order: 3; }
}

/* ---------------------------------------------------------------
   Releasing the design's fixed columns, by exact value only, so
   small fixed-size things (icon badges, rules, dots) keep their size.
   --------------------------------------------------------------- */
@media (max-width: 1100px) {
  .page [style*="width: 520px"],
  .page [style*="width: 530px"],
  .page [style*="width: 540px"],
  .page [style*="width: 560px"],
  .page [style*="width: 580px"],
  .page [style*="width: 600px"],
  .page [style*="width: 610px"],
  .page [style*="width: 620px"],
  .page [style*="width: 640px"],
  .page [style*="width: 650px"],
  .page [style*="width: 660px"],
  .page [style*="width: 680px"],
  .page [style*="width: 700px"],
  .page [style*="width: 720px"],
  .page [style*="width: 740px"],
  .page [style*="width: 760px"],
  .page [style*="width: 780px"],
  .page [style*="width: 800px"],
  .page [style*="width: 820px"],
  .page [style*="width: 830px"],
  .page [style*="width: 840px"],
  .page [style*="width: 850px"],
  .page [style*="width: 860px"],
  .page [style*="width: 880px"],
  .page [style*="width: 900px"],
  .page [style*="width: 1440px"] { max-width: 100% !important; }
}
@media (max-width: 760px) {
  .page [style*="width: 260px"],
  .page [style*="width: 270px"],
  .page [style*="width: 300px"],
  .page [style*="width: 330px"],
  .page [style*="width: 340px"],
  .page [style*="width: 360px"],
  .page [style*="width: 380px"],
  .page [style*="width: 400px"],
  .page [style*="width: 420px"],
  .page [style*="width: 430px"],
  .page [style*="width: 440px"],
  .page [style*="width: 460px"],
  .page [style*="width: 470px"],
  .page [style*="width: 480px"],
  .page [style*="width: 520px"],
  .page [style*="width: 530px"],
  .page [style*="width: 540px"],
  .page [style*="width: 560px"],
  .page [style*="width: 580px"],
  .page [style*="width: 600px"],
  .page [style*="width: 610px"],
  .page [style*="width: 620px"],
  .page [style*="width: 640px"],
  .page [style*="width: 650px"],
  .page [style*="width: 660px"],
  .page [style*="width: 680px"],
  .page [style*="width: 700px"],
  .page [style*="width: 720px"],
  .page [style*="width: 740px"],
  .page [style*="width: 760px"],
  .page [style*="width: 780px"],
  .page [style*="width: 800px"],
  .page [style*="width: 820px"],
  .page [style*="width: 830px"],
  .page [style*="width: 840px"],
  .page [style*="width: 850px"],
  .page [style*="width: 860px"],
  .page [style*="width: 880px"],
  .page [style*="width: 900px"],
  .page [style*="width: 1440px"] { width: 100% !important; max-width: 100% !important; }
  .page [style*="flex: 0 0 200px"],
  .page [style*="flex: 0 0 210px"],
  .page [style*="flex: 0 0 250px"],
  .page [style*="flex: 0 0 260px"],
  .page [style*="flex: 0 0 280px"],
  .page [style*="flex: 0 0 290px"],
  .page [style*="flex: 0 0 300px"],
  .page [style*="flex: 0 0 310px"],
  .page [style*="flex: 0 0 316px"],
  .page [style*="flex: 0 0 320px"],
  .page [style*="flex: 0 0 326px"],
  .page [style*="flex: 0 0 330px"],
  .page [style*="flex: 0 0 340px"],
  .page [style*="flex: 0 0 360px"],
  .page [style*="flex: 0 0 380px"],
  .page [style*="flex: 0 0 400px"],
  .page [style*="flex: 0 0 420px"],
  .page [style*="flex: 0 0 470px"],
  .page [style*="flex: 0 0 480px"],
  .page [style*="flex: 0 0 520px"],
  .page [style*="flex: 0 0 560px"] { flex: 1 1 100% !important; }
  .page [style*="flex: 1 1 0"] { flex: 1 1 100% !important; }
}

/* header reflows cleanly once the nav no longer fits on one line */
@media (max-width: 1100px) {
  .page header {
    height: auto !important;
    min-height: 76px;
    flex-wrap: wrap !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    gap: 14px !important;
  }
  .page header nav { gap: 16px !important; row-gap: 8px !important; flex-wrap: wrap !important; }
  .megamenu { top: auto !important; }
}

/* =========================================================
   DARK MODE
   The design carries its colour as inline styles, so each
   value is remapped by attribute selector rather than token.
   ========================================================= */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
[data-theme="dark"] body { background: #0E1230; color: #E9ECFF; }

[data-theme="dark"] [style*="color: #151C5E"] { color: #E9ECFF !important; }
[data-theme="dark"] [style*="color: #12163A"] { color: #F2F3FA !important; }
[data-theme="dark"] [style*="color: #2A2E4E"] { color: #D3D7EE !important; }
[data-theme="dark"] [style*="color: #4A4F73"] { color: #AEB4D4 !important; }
[data-theme="dark"] [style*="color: #2A3FD1"] { color: #93A3FF !important; }
[data-theme="dark"] [style*="color: #2F5A20"] { color: #9BD47F !important; }
[data-theme="dark"] [style*="color: #8A6A2E"] { color: #D9B16A !important; }
[data-theme="dark"] [style*="color: #C08A3E"] { color: #E2AB5C !important; }
[data-theme="dark"] [style*="color: #3E2E0C"] { color: #EBCA96 !important; }
[data-theme="dark"] [style*="color: #5A4315"] { color: #EBCA96 !important; }
[data-theme="dark"] [style*="color: #8A5A10"] { color: #EBCA96 !important; }
[data-theme="dark"] [style*="color: #4A3A18"] { color: #EBCA96 !important; }
[data-theme="dark"] [style*="color: #8A5F1E"] { color: #EBCA96 !important; }
[data-theme="dark"] [style*="color: #1D2A12"] { color: #BCE4A2 !important; }
[data-theme="dark"] [style*="color: #B8B2A2"] { color: #737A9B !important; }
[data-theme="dark"] [style*="color: #6B6455"] { color: #8E94B0 !important; }
[data-theme="dark"] [style*="color: #6B5350"] { color: #C0A19D !important; }
[data-theme="dark"] [style*="color: #5A5F82"] { color: #969CBC !important; }
[data-theme="dark"] [style*="color: #5A64A8"] { color: #9AA4E8 !important; }
[data-theme="dark"] [style*="background: #FBFAF6"], [data-theme="dark"] [style*="background-color: #FBFAF6"] { background-color: #0E1230 !important; }
[data-theme="dark"] [style*="background: #FFFFFF"], [data-theme="dark"] [style*="background-color: #FFFFFF"] { background-color: #171C3F !important; }
[data-theme="dark"] [style*="background: #F3F1E9"], [data-theme="dark"] [style*="background-color: #F3F1E9"] { background-color: #1C2149 !important; }
[data-theme="dark"] [style*="background: #F3F5FF"], [data-theme="dark"] [style*="background-color: #F3F5FF"] { background-color: #1A2050 !important; }
[data-theme="dark"] [style*="background: #EEF2FF"], [data-theme="dark"] [style*="background-color: #EEF2FF"] { background-color: #1A2050 !important; }
[data-theme="dark"] [style*="background: #E7ECFF"], [data-theme="dark"] [style*="background-color: #E7ECFF"] { background-color: #1A2050 !important; }
[data-theme="dark"] [style*="background: #EAEFFD"], [data-theme="dark"] [style*="background-color: #EAEFFD"] { background-color: #1A2050 !important; }
[data-theme="dark"] [style*="background: #EEF5E9"], [data-theme="dark"] [style*="background-color: #EEF5E9"] { background-color: #16301F !important; }
[data-theme="dark"] [style*="background: #FFF4E2"], [data-theme="dark"] [style*="background-color: #FFF4E2"] { background-color: #332711 !important; }
[data-theme="dark"] [style*="background: #151C5E"], [data-theme="dark"] [style*="background-color: #151C5E"] { background-color: #121735 !important; }
[data-theme="dark"] [style*="background: #1E2775"], [data-theme="dark"] [style*="background-color: #1E2775"] { background-color: #1A2156 !important; }
[data-theme="dark"] [style*="background: #12163A"], [data-theme="dark"] [style*="background-color: #12163A"] { background-color: #0A0D22 !important; }
[data-theme="dark"] [style*="background: #E4E0D6"], [data-theme="dark"] [style*="background-color: #E4E0D6"] { background-color: #262C55 !important; }
[data-theme="dark"] [style*="background: #E8E2D4"], [data-theme="dark"] [style*="background-color: #E8E2D4"] { background-color: #262C55 !important; }
[data-theme="dark"] [style*="background: #E8EBFF"], [data-theme="dark"] [style*="background-color: #E8EBFF"] { background-color: #232A5C !important; }
[data-theme="dark"] [style*="solid #ECE8DE"] { border-color: #2B3159 !important; }
[data-theme="dark"] [style*="solid #E8E4DA"] { border-color: #2B3159 !important; }
[data-theme="dark"] [style*="solid #EFEBE1"] { border-color: #2B3159 !important; }
[data-theme="dark"] [style*="solid #E4E0D6"] { border-color: #2F3663 !important; }
[data-theme="dark"] [style*="solid #E8E2D4"] { border-color: #2F3663 !important; }
[data-theme="dark"] [style*="solid #D7E8CC"] { border-color: #2C4D32 !important; }
[data-theme="dark"] [style*="solid #EBD9B8"] { border-color: #4C3C1E !important; }
[data-theme="dark"] [style*="solid #2C3576"] { border-color: #3A4180 !important; }
[data-theme="dark"] [style*="solid #33409A"] { border-color: #4551B4 !important; }
[data-theme="dark"] [style*="solid #FBFAF6"] { border-color: #0E1230 !important; }
[data-theme="dark"] [style*="solid #F3F1E9"] { border-color: #1C2149 !important; }

/* buttons and bands that must stay vivid in the dark */
[data-theme="dark"] [style*="background: #2A3FD1"] { background-color: #4257E8 !important; }
[data-theme="dark"] [style*="background: #7BBF5F"] { background-color: #7BBF5F !important; }
[data-theme="dark"] [style*="background: #C62828"] { background-color: #D93A3A !important; }
[data-theme="dark"] [style*="background: #2F5A20"] { background-color: #2F6B22 !important; }
[data-theme="dark"] [style*="background: #7BBF5F"] [style*="color: #151C5E"] { color: #0E1230 !important; }
[data-theme="dark"] [style*="background: #2A3FD1"] [style*="color"] { color: #FFFFFF !important; }

/* tinted image wells with no photograph yet shouldn't glow white */
[data-theme="dark"] .well-empty { filter: brightness(.42) saturate(.75); }

/* the honest pale gradients used as image wells */
[data-theme="dark"] [style*="linear-gradient(150deg, #EAF3E3"],
[data-theme="dark"] [style*="linear-gradient(150deg, #F5EFE0"],
[data-theme="dark"] [style*="linear-gradient(150deg, #E7ECFF"] { filter: brightness(.5); }
[data-theme="dark"] .ph > img.ph-img { filter: brightness(.92); }

/* inputs */
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea {
  background: #11163A !important; color: #E9ECFF !important; border-color: #2F3663 !important;
}
[data-theme="dark"] ::placeholder { color: #7D84A6 !important; }

/* =========================================================
   NAVIGATION DROPDOWNS
   ========================================================= */
.navitem { position: relative; display: inline-flex; align-items: center; }

.dropdown {
  position: absolute; top: 100%; left: 0; transform: translateY(8px);
  z-index: 60; display: block;
  max-width: calc(100vw - 40px); padding: 24px 28px 22px;
  background: #FFFFFF; border: 1px solid #E8E4DA; border-radius: 20px;
  box-shadow: 0 22px 48px rgba(21, 28, 94, 0.16);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
/* the bridge: keeps the pointer "inside" while it crosses the gap */
.dropdown::before {
  content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
}
.navitem.open > .dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
}
/* the last pillars open to the left so they stay on screen */
.navitem:nth-last-of-type(1) > .dropdown,
.navitem:nth-last-of-type(2) > .dropdown { left: auto; right: 0; }
.dropcols { display: flex; gap: 36px; align-items: flex-start; }
.dropcol { display: flex; flex-direction: column; gap: 2px; }
.dropdown a { white-space: nowrap; }
.drophead {
  font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  color: #8A6A2E; padding-bottom: 8px;
}
.dropdown a {
  font-size: 14.5px; line-height: 1.35; color: #2A2E4E; text-decoration: none;
  padding: 7px 10px; margin: 0 -10px; border-radius: 9px;
  transition: background .13s ease, color .13s ease, transform .13s ease;
}
.dropdown a:hover { background: #F1F3FF; color: #2A3FD1; transform: translateX(3px); }
.dropall {
  display: block; width: 100%; text-align: right;
  font-weight: 700 !important; color: #2A3FD1 !important;
  border-top: 1px solid #ECE8DE; padding: 12px 0 0 !important; margin: 4px 0 0 !important;
  border-radius: 0 !important;
}
.dropall:hover { background: transparent !important; transform: none !important; }
.navitem > a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: #2A3FD1; border-radius: 2px;
  transform: scaleX(0); transform-origin: center; transition: transform .18s ease;
}
.navitem.open > a::after { transform: scaleX(1); }
.navitem > a svg { transition: transform .18s ease; }
.navitem.open > a svg { transform: rotate(180deg); }

[data-theme="dark"] .dropdown { background: #171C3F; border-color: #2F3663; box-shadow: 0 22px 48px rgba(0,0,0,.5); }
[data-theme="dark"] .dropdown a { color: #D3D7EE; }
[data-theme="dark"] .dropdown a:hover { background: #222A5C; color: #A8B5FF; }
[data-theme="dark"] .drophead { color: #D9B16A; }

@media (max-width: 760px) {
  .navitem { display: block; width: 100%; }
  .dropcols { flex-direction: column; gap: 14px; }
  .dropdown a { white-space: normal; }
  .dropdown {
    position: static; transform: none; min-width: 0; width: 100%; max-width: none;
    display: none; flex-direction: column; gap: 14px;
    box-shadow: none; border: 0; border-left: 2px solid #ECE8DE;
    border-radius: 0; margin: 2px 0 8px; padding: 6px 0 6px 16px;
  }
  .navitem.open > .dropdown { display: flex; opacity: 1; visibility: visible; transform: none; }
  .navitem > a::after { display: none; }
}

/* =========================================================
   THEME TOGGLE / BACK TO TOP
   ========================================================= */
.themebtn {
  margin-left: 10px; width: 42px; height: 42px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid #E8E4DA; border-radius: 999px; background: #FFFFFF;
  color: #151C5E; cursor: pointer;
  transition: background .16s ease, color .16s ease, transform .16s ease, border-color .16s ease;
}
.themebtn:hover { transform: translateY(-2px) rotate(-8deg); border-color: #2A3FD1; color: #2A3FD1; }
.themebtn .ico-moon { display: none; }
[data-theme="dark"] .themebtn { background: #1C2149; border-color: #2F3663; color: #E9ECFF; }
[data-theme="dark"] .themebtn .ico-sun { display: none; }
[data-theme="dark"] .themebtn .ico-moon { display: block; }

.totop {
  position: fixed; right: 18px; bottom: 18px; z-index: 80;
  width: 46px; height: 46px; border-radius: 999px; border: 0; cursor: pointer;
  background: #151C5E; color: #FFFFFF;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(14px); pointer-events: none;
  box-shadow: 0 10px 26px rgba(21,28,94,.28);
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
}
.totop.show { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { background: #2A3FD1; transform: translateY(-3px); }
[data-theme="dark"] .totop { background: #4257E8; }

/* =========================================================
   MOVEMENT — cards lift, buttons respond, photos breathe
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {

  /* every bordered or shadowed box in the design becomes a card that lifts */
  .page [style*="border-radius"][style*="border: 1px solid"],
  .page [style*="border-radius"][style*="border: 1.5px solid"] {
    transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, border-color .2s ease;
  }
  .page article:hover,
  .page a[style*="border-radius"][style*="border: 1px solid"]:hover,
  .page div[style*="border-radius"][style*="border: 1px solid"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(21, 28, 94, 0.10);
  }
  [data-theme="dark"] .page article:hover,
  [data-theme="dark"] .page a[style*="border-radius"][style*="border: 1px solid"]:hover,
  [data-theme="dark"] .page div[style*="border-radius"][style*="border: 1px solid"]:hover {
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
  }

  /* pill buttons */
  .page a[style*="border-radius: 999px"],
  .page a[style*="border-radius: 14px"],
  .page a[style*="border-radius: 12px"] {
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
  }
  .page a[style*="border-radius: 999px"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(21, 28, 94, 0.18);
    filter: saturate(1.08);
  }
  .page a[style*="border-radius: 999px"]:active { transform: translateY(0); }

  /* photographs breathe inside their well */
  .ph > img.ph-img { transition: transform .5s cubic-bezier(.2,.7,.3,1); }
  .ph:hover > img.ph-img { transform: scale(1.045); }

  /* inline links underline on the way in */
  .page p a, .page span a { background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1.5px; background-repeat: no-repeat; background-position: 0 100%;
    transition: background-size .22s ease; text-decoration: none; }
  .page p a:hover, .page span a:hover { background-size: 100% 1.5px; }

  /* sections arrive as you reach them */
  .reveal { opacity: 0; transform: translateY(18px); }
  .reveal.seen { opacity: 1; transform: none;
    transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.seen { opacity: 1 !important; transform: none !important; }
  * { scroll-behavior: auto !important; }
}

/* the nav bar must never break a pillar name across two lines */
.mainnav > a, .navitem > a { white-space: nowrap; }
@media (min-width: 761px) and (max-width: 1320px) {
  .page header { padding-left: 28px !important; padding-right: 28px !important; }
  .mainnav { gap: 15px !important; }
  .mainnav > a, .navitem > a { font-size: 14px !important; }
}
/* empty wells read as a quiet placeholder rather than a dead grey box */
.well-empty { background-image: repeating-linear-gradient(135deg, rgba(21,28,94,.035) 0 10px, transparent 10px 20px); }

.page header > a:first-of-type span span:first-child { white-space: nowrap; }

/* =========================================================
   STICKY HEADER
   ========================================================= */
.page > .utilbar { position: relative; z-index: 71; }
.page > header {
  position: sticky !important; top: 0; z-index: 70;
  background: #FBFAF6;
  transition: box-shadow .2s ease, padding .2s ease, background .2s ease;
}
[data-theme="dark"] .page > header { background: #0E1230 !important; }
.page > header.stuck { box-shadow: 0 6px 24px rgba(21, 28, 94, .10); }
[data-theme="dark"] .page > header.stuck { box-shadow: 0 6px 24px rgba(0, 0, 0, .45); }
@media (min-width: 761px) {
  .page > header.stuck { height: 74px !important; }
  .page > header.stuck > a:first-of-type img { width: 44px !important; height: 44px !important; }
}

/* the emergency item earns its colour */
.emglink {
  display: inline-flex !important; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: 999px;
  border: 1.5px solid #E7C3C3; background: #FDF0F0;
  font-size: 15px; font-weight: 700; color: #C62828 !important; text-decoration: none;
  transition: background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.emglink:hover {
  background: #C62828; border-color: #C62828; color: #FFFFFF !important;
  transform: translateY(-2px); box-shadow: 0 8px 18px rgba(198, 40, 40, .30);
}
[data-theme="dark"] .emglink { background: #3A1515; border-color: #6E2A2A; color: #FF8A8A !important; }
[data-theme="dark"] .emglink:hover { background: #D93A3A; border-color: #D93A3A; color: #FFFFFF !important; }

/* =========================================================
   FLOATING CONTACT
   ========================================================= */
.floatbar {
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
}
.floatbar a {
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 18px 0 15px; border-radius: 999px;
  font: 700 15px/1 'Figtree', system-ui, sans-serif; text-decoration: none; color: #FFFFFF;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.floatbar a:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 16px 34px rgba(0,0,0,.28); filter: saturate(1.1); }
.floatbar .fl-wa { background: #25D366; color: #07351A; }
.floatbar .fl-call { background: #C62828; }
.floatbar .fl-label { white-space: nowrap; }
.floatbar a::after {
  content: ''; position: absolute; inset: 0; border-radius: 999px;
}
@media (max-width: 760px) {
  .floatbar { right: 12px; bottom: 12px; gap: 8px; }
  .floatbar a { height: 50px; padding: 0 16px 0 14px; font-size: 14px; }
  .totop { bottom: 128px !important; right: 14px !important; width: 40px; height: 40px; }
}
/* a soft pulse so the emergency route is noticed, once, not forever */
@media (prefers-reduced-motion: no-preference) {
  .floatbar .fl-call { animation: fvpulse 2.6s ease-out 3; }
  @keyframes fvpulse {
    0%, 100% { box-shadow: 0 10px 26px rgba(0,0,0,.22), 0 0 0 0 rgba(198,40,40,.55); }
    60%      { box-shadow: 0 10px 26px rgba(0,0,0,.22), 0 0 0 16px rgba(198,40,40,0); }
  }
}

/* =========================================================
   HIGHLIGHTS — cards take a brand outline and a tinted wash,
   buttons change colour rather than merely lifting.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {

  /* --- cards --- */
  .page article,
  .page a[style*="border-radius"][style*="border: 1px solid"],
  .page div[style*="border-radius"][style*="border: 1px solid"],
  .page div[style*="border-radius"][style*="border: 1.5px solid"] {
    position: relative;
    transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease,
                border-color .22s ease, background-color .22s ease;
  }
  .page article:hover,
  .page a[style*="border-radius"][style*="border: 1px solid"]:hover,
  .page div[style*="border-radius"][style*="border: 1px solid"]:hover,
  .page div[style*="border-radius"][style*="border: 1.5px solid"]:hover {
    transform: translateY(-5px);
    border-color: #2A3FD1 !important;
    box-shadow: 0 16px 34px rgba(42, 63, 209, .16), 0 0 0 3px rgba(42, 63, 209, .10);
  }
  /* green-tinted panels keep their own family colour on hover */
  .page div[style*="background: #EEF5E9"]:hover,
  .page div[style*="border: 1px solid #D7E8CC"]:hover {
    border-color: #4E8F37 !important;
    box-shadow: 0 16px 34px rgba(78, 143, 55, .18), 0 0 0 3px rgba(123, 191, 95, .16);
  }
  /* amber panels likewise */
  .page div[style*="background: #FFF4E2"]:hover,
  .page div[style*="border: 1px solid #EBD9B8"]:hover {
    border-color: #C08A3E !important;
    box-shadow: 0 16px 34px rgba(192, 138, 62, .18), 0 0 0 3px rgba(192, 138, 62, .16);
  }
  [data-theme="dark"] .page article:hover,
  [data-theme="dark"] .page a[style*="border-radius"][style*="border: 1px solid"]:hover,
  [data-theme="dark"] .page div[style*="border-radius"][style*="border: 1px solid"]:hover {
    border-color: #6E80FF !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.5), 0 0 0 3px rgba(110, 128, 255, .22);
  }

  /* a coloured bar wipes in along the top of a card */
  .page article::after,
  .page a[style*="border-radius"][style*="border: 1px solid"]::after {
    content: ''; position: absolute; left: 14px; right: 14px; top: 0; height: 3px;
    border-radius: 0 0 3px 3px; background: linear-gradient(90deg, #2A3FD1, #7BBF5F);
    transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
  }
  .page article:hover::after,
  .page a[style*="border-radius"][style*="border: 1px solid"]:hover::after { transform: scaleX(1); }

  /* --- buttons: the fill actually changes --- */
  .page a[style*="border-radius: 999px"] { position: relative; overflow: hidden; }
  .page a[style*="border-radius: 999px"]::before {
    content: ''; position: absolute; inset: 0;
    background: rgba(255,255,255,.18); opacity: 0;
    transition: opacity .18s ease;
  }
  .page a[style*="border-radius: 999px"]:hover::before { opacity: 1; }

  /* blue primary -> deeper navy */
  .page a[style*="border-radius: 999px"][style*="background: #2A3FD1"]:hover {
    background-color: #151C5E !important;
  }
  /* green primary -> deep green, white text */
  .page a[style*="border-radius: 999px"][style*="background: #7BBF5F"]:hover {
    background-color: #4E8F37 !important; color: #FFFFFF !important;
  }
  /* emergency red -> darker red */
  .page a[style*="border-radius: 999px"][style*="background: #C62828"]:hover {
    background-color: #9B1C1C !important;
  }
  /* outlined buttons fill in */
  .page a[style*="border-radius: 999px"][style*="border: 1.5px solid #FFFFFF"]:hover,
  .page a[style*="border-radius: 999px"][style*="border: 2px solid #FFFFFF"]:hover {
    background-color: #FFFFFF !important; color: #151C5E !important;
  }
  .page a[style*="border-radius: 999px"][style*="border: 1.5px solid #ECE8DE"]:hover {
    background-color: #2A3FD1 !important; border-color: #2A3FD1 !important; color: #FFFFFF !important;
  }

  /* --- section headings get a small moving rule --- */
  .page h2 { position: relative; }
  .page section:hover > h2::after,
  .page section:hover > span + h2::after {
    content: ''; position: absolute; left: 0; bottom: -8px; height: 3px; width: 56px;
    background: #7BBF5F; border-radius: 3px;
    animation: fvrule .4s cubic-bezier(.2,.7,.3,1) both;
  }
  @keyframes fvrule { from { width: 0; opacity: 0; } to { width: 56px; opacity: 1; } }

  /* --- list rows tint as you pass --- */
  .page div[style*="border-top: 1px solid"]:hover { background-color: rgba(42,63,209,.035); }
  [data-theme="dark"] .page div[style*="border-top: 1px solid"]:hover { background-color: rgba(147,163,255,.07); }
}

/* focus must look as strong as hover */
.page a:focus-visible, .floatbar a:focus-visible {
  outline: 3px solid #2A3FD1; outline-offset: 3px;
}

/* phone: the quote button lives inside the menu so the bar stays one row */
.quote-in-nav { display: none !important; }
@media (max-width: 760px) {
  .quote-in-nav {
    display: inline-flex !important; width: 100% !important; justify-content: center;
    height: 46px !important; margin-bottom: 6px;
  }
  .page header > a[style*="border-radius: 999px"]:not(.quote-in-nav) { display: none !important; }
  .page > header { padding-top: 9px !important; padding-bottom: 9px !important; }
}

/* the brand lockup must never collide with the nav */
@media (min-width: 761px) {
  .page header > a:first-of-type { flex: 0 0 auto !important; min-width: 0; }
  .mainnav { min-width: 0; }
  .mainnav > a, .navitem { flex: 0 0 auto; }
}
@media (min-width: 761px) and (max-width: 1240px) {
  .page header > a:first-of-type span span:last-child { display: none; }
  .page header > a:first-of-type span span:first-child { font-size: 17px !important; }
  .page header > a:first-of-type img { width: 44px !important; height: 44px !important; }
  .page header { gap: 14px !important; }
  .mainnav { justify-content: flex-end !important; gap: 13px !important; }
  .emglink { padding: 7px 11px !important; font-size: 13.5px !important; }
}
/* sticky header must not hide what an anchor jumps to */
.page h2, .page h3, .page section[id], .page div[id] { scroll-margin-top: 110px; }

/* An inner page already has a breadcrumb between the header and the hero,
   so the hero does not need its full top padding as well. */
.crumbs + .hero { padding-top: 26px !important; }
@media (max-width: 760px) { .crumbs + .hero { padding-top: 18px !important; } }

/* =========================================================
   HOMEPAGE RHYTHM
   The artboard was drawn at 1440 with generous air. On a live
   page that reads as drift, so the vertical gaps come in —
   nothing inside a section changes, only the space between.
   ========================================================= */
.p-index .hero { padding-top: 40px !important; padding-bottom: 58px !important; }
.p-index .page > section[style*="padding: 110px"] { padding-top: 76px !important; }
.p-index .page > section[style*="padding: 96px"]  { padding-top: 70px !important; }
.p-index .page > section[style*="margin: 110px"]  { margin-top: 76px !important; }
.p-index .page > section[style*="padding: 72px 64px"] {
  padding-top: 56px !important; padding-bottom: 56px !important;
}

@media (max-width: 1024px) {
  .p-index .hero { padding-top: 30px !important; padding-bottom: 40px !important; }
  .p-index .page > section[style*="padding: 110px"] { padding-top: 54px !important; }
  .p-index .page > section[style*="padding: 96px"]  { padding-top: 50px !important; }
  .p-index .page > section[style*="margin: 110px"]  { margin-top: 54px !important; }
  .p-index .page > section[style*="padding: 72px 64px"] {
    padding-top: 42px !important; padding-bottom: 42px !important;
  }
}
@media (max-width: 760px) {
  .p-index .hero { padding-top: 22px !important; padding-bottom: 30px !important; }
  .p-index .page > section[style*="padding: 110px"] { padding-top: 42px !important; }
  .p-index .page > section[style*="padding: 96px"]  { padding-top: 40px !important; }
  .p-index .page > section[style*="margin: 110px"]  { margin-top: 42px !important; }
}

/* =========================================================
   BREADCRUMB — a quiet wayfinder, not a second navigation
   ========================================================= */
.crumbs { height: 38px !important; gap: 8px !important; }
.crumbs a, .crumbs span { font-size: 12.5px !important; }
.crumbs a { color: #6B7093 !important; transition: color .14s ease; }
.crumbs a:hover { color: #2A3FD1 !important; }
[data-theme="dark"] .crumbs a { color: #8F96B8 !important; }
[data-theme="dark"] .crumbs a:hover { color: #A8B5FF !important; }

@media (max-width: 760px) {
  .crumbs { height: 32px !important; gap: 6px !important; }
  .crumbs a, .crumbs span { font-size: 11.5px !important; }
}

/* =========================================================
   FOOTER SOCIALS — the platform mark on its own
   ========================================================= */
.socialbtn {
  width: 40px !important; height: 40px !important;
  padding: 0 !important; gap: 0 !important;
  justify-content: center !important; align-items: center !important;
  border-radius: 999px !important;
  transition: background-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.socialbtn:hover {
  background-color: #7BBF5F !important;
  color: #0E1230 !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(123, 191, 95, .32);
}
.socialbtn svg { width: 19px; height: 19px; }

/* =========================================================
   MOBILE PASS 1 — stop the sideways scroll
   Everything below is inside the phone breakpoint, so the
   desktop layout is untouched. Placement only: no content
   is hidden, reworded or resized.
   ========================================================= */
@media (max-width: 760px) {

  /* --- nothing may be wider than the thing that contains it --- */
  .page *, .page *::before, .page *::after { max-width: 100% !important; }
  html, body { overflow-x: hidden; }

  /* --- the desktop 72px gutter, carried on inner wrappers --- */
  .page [style*="padding: 0 72px"],
  .page [style*="padding: 28px 72px"],
  .page [style*="padding: 60px 72px"],
  .page [style*="padding: 26px 72px"],
  .page [style*="padding: 30px 72px"] {
    padding-left: 18px !important; padding-right: 18px !important;
  }
  .page [style*="margin: 0 72px"],
  .page [style*="margin: 18px 72px"],
  .page [style*="margin: 22px 72px"],
  .page [style*="margin: 24px 72px"] {
    margin-left: 18px !important; margin-right: 18px !important;
  }
  /* the footer supplies its own gutter on its inner rows */
  .page > footer { padding-left: 0 !important; padding-right: 0 !important; }

  /* --- rows that refuse to shrink may wrap instead --- */
  .page [style*="flex: 0 0 auto"] { flex-shrink: 1 !important; min-width: 0 !important; }
  .page [style*="justify-content: space-between"] { row-gap: 14px !important; }
  .page [style*="align-items: flex-end"] { align-items: flex-start !important; }

  /* --- card strips scroll inside themselves, never the page --- */
  .page [style*="overflow-x: auto"] {
    max-width: 100% !important;
    padding-left: 18px !important; padding-right: 18px !important;
    scroll-padding-left: 18px;
  }
  .page [style*="overflow-x: auto"] > * { max-width: 86vw !important; }

  /* --- long unbroken strings (emails, URLs) wrap rather than push --- */
  .page a, .page p, .page span, .page h1, .page h2, .page h3 { overflow-wrap: anywhere; }
}

/* ===================== MOBILE PASS 2a — components =====================
   Hand-written. Everything is inside @media (max-width: 760px). */
@media (max-width: 760px) {

  /* the utility strip was a fixed 42px bar built for one line; on a phone its
     two halves need to sit one above the other instead of colliding */
  .page > .utilbar {
    height: auto !important;
    min-height: 42px;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-content: center;
    gap: 2px 14px !important;
    padding: 7px 18px !important;
    text-align: center;
  }
  .page > .utilbar > * { font-size: 12.5px !important; }

  /* the floating pair was two stacked labelled pills covering a third of the
     screen; on a phone they become two marks side by side */
  .floatbar { right: 12px !important; bottom: 12px !important; gap: 10px !important; flex-direction: row !important; }
  .floatbar .fl-label { display: none !important; }
  .floatbar a {
    width: 52px !important; height: 52px !important;
    padding: 0 !important; justify-content: center !important; border-radius: 50% !important;
  }
  .totop { bottom: 76px !important; right: 14px !important; }

  /* a stat strip that was four columns with rules between them is now four
     rows, so the rules belong underneath, not down the side */
  .page [style*="border-right"] { border-right: 0 !important; }

  /* photo wells still waiting on a photograph should not be the tallest thing
     on the page */
  .page .well-empty { height: 160px !important; }
  .page .well-empty[style*="border-radius: 22px"] { height: 220px !important; }  /* team portraits */

  /* two-up blocks that were a photo beside a card stack instead of squeezing */
  .page [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* long numbers and addresses never force the page wider */
  .page [style*="white-space: nowrap"] { white-space: normal !important; }
}

/* ===================== MOBILE PASS 2 — placement ====================
   Generated by work/mobile2.py from the inline values actually present
   in the built pages. Every rule is inside @media (max-width: 760px),
   so the desktop layout cannot be affected. */
@media (max-width: 760px) {
  .page [style*="margin: 0 72px"] { margin-left: 18px !important; margin-right: 18px !important; }   /* 1 */
  .page [style*="padding: 0 28px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 32 */
  .page [style*="padding: 0 30px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 63 */
  .page [style*="padding: 0 32px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 1 */
  .page [style*="padding: 0 34px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 21 */
  .page [style*="padding: 0 36px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 6 */
  .page [style*="padding: 0 38px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 2 */
  .page [style*="padding: 0 40px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 10 */
  .page [style*="padding: 0 44px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 1 */
  .page [style*="padding: 0 72px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 107 */
  .page [style*="padding: 56px 0 0"] { padding-top: 34px !important; }   /* 17 */
  .page [style*="padding: 20px 28px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 1 */
  .page [style*="padding: 20px 34px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 1 */
  .page [style*="padding: 22px 28px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 2 */
  .page [style*="padding: 22px 32px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 1 */
  .page [style*="padding: 24px 28px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 1 */
  .page [style*="padding: 24px 32px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 1 */
  .page [style*="padding: 26px 28px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 12 */
  .page [style*="padding: 26px 32px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 1 */
  .page [style*="padding: 28px 72px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 30 */
  .page [style*="padding: 30px 28px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 8 */
  .page [style*="padding: 30px 34px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 1 */
  .page [style*="padding: 30px 36px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 2 */
  .page [style*="padding: 30px 44px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 1 */
  .page [style*="padding: 32px 30px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 3 */
  .page [style*="padding: 34px 32px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 3 */
  .page [style*="padding: 34px 40px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 1 */
  .page [style*="padding: 34px 42px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 2 */
  .page [style*="padding: 36px 32px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 3 */
  .page [style*="padding: 36px 38px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 5 */
  .page [style*="padding: 36px 42px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 1 */
  .page [style*="padding: 38px 44px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 3 */
  .page [style*="padding: 40px 42px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 1 */
  .page [style*="padding: 44px 46px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 1 */
  .page [style*="padding: 46px 44px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 2 */
  .page [style*="padding: 46px 48px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 3 */
  .page [style*="padding: 48px 46px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 1 */
  .page [style*="padding: 52px 56px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 3 */
  .page [style*="padding: 56px 56px"] { padding-left: 18px !important; padding-right: 18px !important; padding-top: 34px !important; padding-bottom: 34px !important; }   /* 1 */
  .page [style*="padding: 58px 56px"] { padding-left: 18px !important; padding-right: 18px !important; padding-top: 34px !important; padding-bottom: 34px !important; }   /* 1 */
  .page [style*="padding: 60px 56px"] { padding-left: 18px !important; padding-right: 18px !important; padding-top: 34px !important; padding-bottom: 34px !important; }   /* 1 */
  .page [style*="padding: 62px 60px"] { padding-left: 18px !important; padding-right: 18px !important; padding-top: 34px !important; padding-bottom: 34px !important; }   /* 3 */
  .page [style*="padding: 64px 56px"] { padding-left: 18px !important; padding-right: 18px !important; padding-top: 35px !important; padding-bottom: 35px !important; }   /* 1 */
  .page [style*="padding: 66px 64px"] { padding-left: 18px !important; padding-right: 18px !important; padding-top: 36px !important; padding-bottom: 36px !important; }   /* 1 */
  .page [style*="padding: 72px 64px"] { padding-left: 18px !important; padding-right: 18px !important; padding-top: 40px !important; padding-bottom: 40px !important; }   /* 2 */
  .page [style*="margin: 18px 72px 0"] { margin-left: 18px !important; margin-right: 18px !important; }   /* 11 */
  .page [style*="margin: 22px 72px 0"] { margin-left: 18px !important; margin-right: 18px !important; }   /* 11 */
  .page [style*="margin: 40px 72px 0"] { margin-left: 18px !important; margin-right: 18px !important; }   /* 1 */
  .page [style*="margin: 42px 72px 0"] { margin-left: 18px !important; margin-right: 18px !important; }   /* 15 */
  .page [style*="margin: 44px 72px 0"] { margin-left: 18px !important; margin-right: 18px !important; }   /* 1 */
  .page [style*="margin: 52px 72px 0"] { margin-left: 18px !important; margin-right: 18px !important; }   /* 3 */
  .page [style*="margin: 56px 72px 0"] { margin-left: 18px !important; margin-right: 18px !important; margin-top: 34px !important; }   /* 43 */
  .page [style*="margin: 92px 72px 0"] { margin-left: 18px !important; margin-right: 18px !important; margin-top: 51px !important; }   /* 8 */
  .page [style*="margin: 96px 72px 0"] { margin-left: 18px !important; margin-right: 18px !important; margin-top: 53px !important; }   /* 4 */
  .page [style*="padding: 0 56px 52px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 1 */
  .page [style*="padding: 20px 72px 0"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 1 */
  .page [style*="padding: 24px 72px 0"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 2 */
  .page [style*="padding: 30px 72px 0"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 1 */
  .page [style*="padding: 34px 72px 0"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 1 */
  .page [style*="padding: 52px 72px 0"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 5 */
  .page [style*="padding: 56px 0 28px"] { padding-top: 34px !important; }   /* 1 */
  .page [style*="padding: 56px 72px 0"] { padding-left: 18px !important; padding-right: 18px !important; padding-top: 34px !important; }   /* 104 */
  .page [style*="padding: 82px 72px 0"] { padding-left: 18px !important; padding-right: 18px !important; padding-top: 45px !important; }   /* 2 */
  .page [style*="padding: 86px 72px 0"] { padding-left: 18px !important; padding-right: 18px !important; padding-top: 47px !important; }   /* 1 */
  .page [style*="padding: 92px 72px 0"] { padding-left: 18px !important; padding-right: 18px !important; padding-top: 51px !important; }   /* 12 */
  .page [style*="padding: 96px 72px 0"] { padding-left: 18px !important; padding-right: 18px !important; padding-top: 53px !important; }   /* 5 */
  .page [style*="margin: 110px 72px 0"] { margin-left: 18px !important; margin-right: 18px !important; margin-top: 61px !important; }   /* 2 */
  .page [style*="padding: 110px 72px 0"] { padding-left: 18px !important; padding-right: 18px !important; padding-top: 61px !important; }   /* 4 */
  .page [style*="padding: 10px 34px 22px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 1 */
  .page [style*="padding: 26px 28px 28px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 9 */
  .page [style*="padding: 26px 30px 22px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 1 */
  .page [style*="padding: 26px 30px 24px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 2 */
  .page [style*="padding: 26px 30px 28px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 4 */
  .page [style*="padding: 26px 32px 28px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 1 */
  .page [style*="padding: 28px 28px 24px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 3 */
  .page [style*="padding: 28px 32px 22px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 4 */
  .page [style*="padding: 30px 30px 32px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 2 */
  .page [style*="padding: 30px 32px 22px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 2 */
  .page [style*="padding: 30px 32px 32px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 15 */
  .page [style*="padding: 30px 34px 32px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 2 */
  .page [style*="padding: 32px 34px 30px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 2 */
  .page [style*="padding: 32px 34px 34px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 1 */
  .page [style*="padding: 32px 36px 36px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 1 */
  .page [style*="padding: 34px 34px 36px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 2 */
  .page [style*="padding: 34px 36px 36px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 2 */
  .page [style*="padding: 34px 36px 38px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 1 */
  .page [style*="padding: 34px 38px 36px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 1 */
  .page [style*="padding: 34px 40px 36px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 2 */
  .page [style*="padding: 34px 40px 38px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 5 */
  .page [style*="padding: 36px 34px 38px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 1 */
  .page [style*="padding: 36px 40px 38px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 1 */
  .page [style*="padding: 36px 42px 38px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 1 */
  .page [style*="padding: 38px 36px 40px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 16 */
  .page [style*="padding: 38px 42px 40px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 4 */
  .page [style*="padding: 38px 44px 40px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 2 */
  .page [style*="padding: 40px 36px 42px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 1 */
  .page [style*="padding: 40px 38px 42px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 4 */
  .page [style*="padding: 40px 44px 42px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 5 */
  .page [style*="padding: 40px 46px 42px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 2 */
  .page [style*="padding: 44px 44px 46px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 2 */
  .page [style*="padding: 48px 72px 50px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 2 */
  .page [style*="padding: 50px 72px 50px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 1 */
  .page [style*="padding: 50px 72px 52px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 4 */
  .page [style*="padding: 52px 56px 40px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 1 */
  .page [style*="padding: 52px 72px 54px"] { padding-left: 18px !important; padding-right: 18px !important; }   /* 16 */
  .page [style*="padding: 52px 72px 56px"] { padding-left: 18px !important; padding-right: 18px !important; padding-bottom: 34px !important; }   /* 1 */
  .page [style*="padding: 60px 72px 40px"] { padding-left: 18px !important; padding-right: 18px !important; padding-top: 34px !important; }   /* 30 */
  .page [style*="padding: 60px 72px 44px"] { padding-left: 18px !important; padding-right: 18px !important; padding-top: 34px !important; }   /* 1 */
  .page [style*="padding: 66px 72px 58px"] { padding-left: 18px !important; padding-right: 18px !important; padding-top: 36px !important; padding-bottom: 34px !important; }   /* 3 */
  .page [style*="padding: 70px 72px 64px"] { padding-left: 18px !important; padding-right: 18px !important; padding-top: 38px !important; padding-bottom: 35px !important; }   /* 1 */
  .page [style*="padding: 84px 72px 76px"] { padding-left: 18px !important; padding-right: 18px !important; padding-top: 46px !important; padding-bottom: 42px !important; }   /* 1 */
  .page [style*="padding: 30px 32px 30px 0"] { padding-right: 18px !important; }   /* 2 */
}

/* ===================== MOBILE PASS 2b — stacking ===================== */
@media (max-width: 760px) {

  /* the hairline between stats was a vertical rule in a row of four; stacked,
     it belongs across the row instead of down the side */
  .page span[style*="width: 1px"][style*="height: 44px"] {
    width: 100% !important; height: 1px !important;
  }

  /* a photo beside a card is a column on a phone, not a 124px sliver */
  .page div[style*="display: flex"]:has(> .ph),
  .page div[style*="display: flex"]:has(> .well-empty) {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .page div[style*="display: flex"]:has(> .ph) > *,
  .page div[style*="display: flex"]:has(> .well-empty) > * {
    width: auto !important; max-width: none !important;
    flex-basis: auto !important; align-self: stretch !important;
  }
  .page .ph, .page .well-empty { flex-direction: row !important; }
}

/* ===================== MOBILE PASS 2c — reading ===================== */
@media (max-width: 760px) {
  /* text set right because it sat in a right-hand column reads left on a phone */
  .page [style*="text-align: right"] { text-align: left !important; }
}

/* =========================================================
   FAQ ACCORDIONS  — every screen, question first, answer on a click
   ========================================================= */
.faqlist { max-width: 900px; }
details.faq {
  border-top: 1px solid #ECE8DE;
  transition: background .18s ease;
}
details.faq:last-of-type { border-bottom: 1px solid #ECE8DE; }
details.faq > summary.faq-q {
  list-style: none;
  cursor: pointer;
  position: relative;
  display: block;
  padding: 20px 52px 20px 2px;
  font: 700 18px/1.4 'Figtree', system-ui, sans-serif;
  color: #151C5E;
  transition: color .18s ease;
}
details.faq > summary.faq-q::-webkit-details-marker { display: none; }
details.faq > summary.faq-q::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  width: 11px; height: 11px;
  margin-top: -7px;
  border-right: 2.2px solid #2A3FD1;
  border-bottom: 2.2px solid #2A3FD1;
  transform: rotate(45deg);
  transform-origin: 60% 60%;
  transition: transform .22s cubic-bezier(.2,.7,.3,1);
}
details.faq[open] > summary.faq-q::after { transform: rotate(-135deg); }
details.faq[open] > summary.faq-q { color: #2A3FD1; }
details.faq > summary.faq-q:hover { color: #2A3FD1; }
details.faq > summary.faq-q:focus-visible {
  outline: 2px solid #2A3FD1; outline-offset: 3px; border-radius: 6px;
}
.faq-a { padding: 0 52px 22px 2px; }
.faq-a > p:last-child { margin-bottom: 0 !important; }
details.faq[open] .faq-a { animation: faqopen .26s cubic-bezier(.2,.7,.3,1); }
@keyframes faqopen { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

[data-theme="dark"] details.faq { border-top-color: #273056; }
[data-theme="dark"] details.faq:last-of-type { border-bottom-color: #273056; }
[data-theme="dark"] details.faq > summary.faq-q { color: #E8ECFB; }
[data-theme="dark"] details.faq[open] > summary.faq-q,
[data-theme="dark"] details.faq > summary.faq-q:hover { color: #8FA6FF; }
[data-theme="dark"] details.faq > summary.faq-q::after {
  border-right-color: #8FA6FF; border-bottom-color: #8FA6FF;
}

@media (prefers-reduced-motion: reduce) {
  details.faq[open] .faq-a { animation: none; }
  details.faq > summary.faq-q::after { transition: none; }
}

@media (max-width: 760px) {
  details.faq > summary.faq-q { padding: 17px 44px 17px 0; font-size: 16.5px; }
  .faq-a { padding: 0 8px 18px 0; }
}

/* =========================================================
   SCROLL — the page should move when a thumb moves it
   `overflow-x: hidden` on html AND body makes a second scroll container on a
   phone, which is what breaks momentum and makes the page catch. The widths
   are genuinely fixed now, so this only has to be a guard: `clip` guards
   without creating that container. Scroll anchoring is off for the same
   reason — it was yanking the page back when a photo settled.
   ========================================================= */
@media (max-width: 760px) {
  body { overflow-x: visible !important; }
  html { overflow-x: hidden; }
  html { scroll-behavior: auto; }
  .page, .page > section, .page > footer { overflow-anchor: none; }

  /* the arrival animation moves a whole section; on a phone that is a large
     repaint for every section, so it fades rather than travels */
  .reveal { transform: none !important; opacity: 0; }
  .reveal.seen {
    opacity: 1;
    transition: opacity .32s ease !important;
    transform: none !important;
  }
  /* the header's own transition fires on the first scroll of every page */
  .page > header { transition: box-shadow .2s ease !important; }
}
@supports (overflow-x: clip) {
  @media (max-width: 760px) { html { overflow-x: clip; } }
}

/* =========================================================
   MOBILE MENU — a panel that comes in from the right, full height
   ========================================================= */
@media (max-width: 760px) {
  .navscrim {
    position: fixed; inset: 0; z-index: 199;
    background: rgba(10, 14, 40, .46);
    backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity .26s ease;
  }
  .navscrim.show { opacity: 1; pointer-events: auto; }

  .page > header .mainnav,
  .mainnav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    position: fixed !important;
    top: 0; right: 0; bottom: 0; left: auto;
    width: min(86vw, 350px);
    max-width: none !important;
    z-index: 200;
    margin: 0 !important;
    padding: 22px 20px 36px !important;
    gap: 2px !important;
    background: #FBFAF6;
    box-shadow: -26px 0 64px rgba(16, 20, 60, .26);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(103%);
    transition: transform .3s cubic-bezier(.33,.9,.35,1);
    visibility: hidden;
  }
  /* this has to out-rank the closed rule above, whose `header` type selector
     makes it more specific than a bare `.mainnav.open` would be */
  .page > header .mainnav.open,
  .mainnav.open { transform: none !important; visibility: visible !important; }
  [data-theme="dark"] .page > header .mainnav,
  [data-theme="dark"] .mainnav { background: #0E1230; }

  /* its own close control, since the Menu button is now behind the panel */
  .navclose {
    align-self: flex-end;
    width: 42px; height: 42px; margin-bottom: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid #E8E4DA; border-radius: 50%;
    background: #fff; color: #151C5E; cursor: pointer;
  }
  [data-theme="dark"] .navclose { background: #161C44; border-color: #2B3360; color: #E8ECFB; }

  /* the pillars read as a list, each row a proper target */
  .mainnav .navitem { width: 100%; }
  .mainnav .navitem > a,
  .mainnav > a {
    display: flex !important; align-items: center; justify-content: space-between;
    width: 100%; min-height: 50px; padding: 12px 6px !important;
    border-bottom: 1px solid #EDE9DF;
    font-size: 16.5px !important; font-weight: 700 !important;
  }
  [data-theme="dark"] .mainnav .navitem > a,
  [data-theme="dark"] .mainnav > a { border-bottom-color: #242C52; }
  .mainnav .dropdown, .mainnav .megamenu {
    position: static !important; width: 100% !important; left: auto !important;
    box-shadow: none !important; border: 0 !important; border-radius: 0 !important;
    padding: 2px 0 10px 12px !important; background: transparent !important;
    transform: none !important; min-width: 0 !important;
  }
  .mainnav .dropdown a, .mainnav .megamenu a {
    display: block; min-height: 44px; padding: 11px 6px !important;
    font-size: 15.5px !important;
  }
  .mainnav .emglink { margin-top: 16px; justify-content: center !important; min-height: 50px; }
  body.navlock { overflow: hidden; }
}

/* =========================================================
   STAT STRIP — a row of figures on a desk, tiles on a phone
   ========================================================= */
@media (max-width: 760px) {
  section.statstrip {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 14px !important;
    background: transparent !important;
    border: 0 !important;
  }
  .statstrip > .statrule { display: none !important; }
  /* the small strip under a hero is not a card grid; it just wraps */
  div.statstrip { flex-wrap: wrap !important; gap: 8px 22px !important; }
  div.statstrip > .stat { padding: 0 !important; background: none !important; border: 0 !important; }
  section.statstrip > .stat {
    width: auto !important;
    box-sizing: border-box;
    padding: 16px 14px !important;
    border-radius: 18px;
    background: #FFFFFF;
    border: 1px solid #ECE8DE;
    gap: 2px !important;
    justify-content: flex-start;
  }
  [data-theme="dark"] section.statstrip > .stat { background: #161C44; border-color: #2B3360; }
  /* the figure leads, the label sits under it and stays readable */
  section.statstrip > .stat > :first-child { font-size: 30px !important; line-height: 1.05 !important; }
  section.statstrip > .stat > :last-child { font-size: 12.5px !important; line-height: 1.35 !important; }
}

/* the pillar and its sub-list stack inside the drawer, not side by side */
@media (max-width: 760px) {
  .mainnav .navitem {
    display: block !important;
    position: static !important;
    width: 100% !important;
  }
  /* the panel is a fixed-height flex column, so wrapping would push the rest
     of the list into a second column off the side of the screen once a
     sub-list opens; it scrolls instead */
  .page > header .mainnav,
  .mainnav {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
  }

  /* the header is sticky with a z-index of its own, which makes a stacking
     context: the panel's z-index is measured inside it, so the header itself
     has to rise above the scrim while the panel is open — otherwise the scrim
     dims the panel along with the page */
  body.navlock .page > header { z-index: 300 !important; }
  body.navlock .page > .utilbar { z-index: 60 !important; }

  /* the quote and the emergency line read as actions, not list rows */
  .mainnav > a.quote-in-nav {
    justify-content: center !important;
    margin-top: 4px; margin-bottom: 10px;
    border-bottom: 0 !important;
    border-radius: 999px;
    background: #2A3FD1; color: #FFFFFF !important;
    text-decoration: none !important;
  }
}

@media (max-width: 760px) {
  /* the header sits above the scrim so the panel stays crisp, so its own row
     is dimmed to match the page behind it */
  body.navlock .page > header > *:not(.mainnav) {
    opacity: .22; transition: opacity .22s ease; pointer-events: none;
  }
}

@media (max-width: 760px) {
  /* the mega-menu's desktop columns have fixed widths that make short link
     text wrap inside the panel; inside the drawer it is one plain list */
  .mainnav .dropdown > *, .mainnav .megamenu > *,
  .mainnav .dropdown > * > *, .mainnav .megamenu > * > * {
    width: auto !important; max-width: none !important; min-width: 0 !important;
    flex: 0 0 auto !important;
  }
  /* only the sub-list of the pillar you actually opened takes up room. Without
     the .open qualifier every closed sub-list is laid out at full height with
     opacity 0, which is what left the panel looking mostly empty. */
  .mainnav .navitem:not(.open) > .dropdown,
  .mainnav .navitem:not(.open) > .megamenu {
    display: none !important;
    height: 0 !important;
  }
  .mainnav .navitem.open > .dropdown,
  .mainnav .navitem.open > .megamenu {
    display: block !important;
    opacity: 1 !important;
    height: auto !important;
    visibility: visible !important;
  }
  .mainnav .dropdown > *, .mainnav .megamenu > * {
    display: block !important;
    grid-template-columns: none !important;
  }
  .mainnav .dropdown a, .mainnav .megamenu a { white-space: normal; padding: 9px 6px !important; }
}

@media (max-width: 760px) {
  .mainnav .dropdown > * + *, .mainnav .megamenu > * + * { margin-top: 16px !important; }
}

@media (max-width: 760px) {
  /* on a narrow phone the panel takes nearly the whole screen, so it reads as
     the menu rather than as a sliver beside the page */
  .page > header .mainnav, .mainnav { width: min(92vw, 350px); }
}

@media (max-width: 760px) {
  /* A mark followed by a line of text is one row. Flex rows wrap on a phone
     (needed elsewhere), and a text child's natural size is its whole sentence
     on one line — so the sentence was being pushed under its own tick. Giving
     the text child a zero basis means it takes the space that is left instead
     of demanding a line of its own.
     This is deliberately narrow: exactly two children, the first of which is
     a drawn mark. A wider version of this rule squeezed the utility bar and
     the hero stat rows, which are not this pattern at all. */
  .page [style*="display: flex"]:has(> :nth-child(2):last-child):has(> :first-child svg)
    > :last-child:not(:has(svg)):not(:has(img)),
  .page [style*="display: flex"]:has(> :nth-child(2):last-child):has(> svg:first-child)
    > :last-child:not(:has(svg)):not(:has(img)) {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
}

/* =========================================================
   REVIEWS — a strip you swipe, rather than a tall stack
   ========================================================= */
@media (max-width: 760px) {
  .page .revstrip {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* the strip runs to both edges of the screen, with the gutter as padding
       so the first and last card are not jammed against the sides */
    margin-left: -18px !important; margin-right: -18px !important;
    padding: 2px 18px 8px !important;
    scroll-padding-left: 18px;
  }
  .page .revstrip::-webkit-scrollbar { display: none; }
  .page .revstrip > .revcard {
    flex: 0 0 auto !important;
    width: 80vw !important; max-width: 320px !important;
    scroll-snap-align: start;
    min-height: 0 !important;
    padding: 22px 20px !important;
  }
  /* a hint that there is more to the right */
  .page .revstrip > .revcard:last-child { margin-right: 4px; }
}

/* the third floating action: the contact form */
.floatbar .fl-form { background: #151C5E; color: #FFFFFF; }
[data-theme="dark"] .floatbar .fl-form { background: #2A3FD1; }

/* the floating actions stay a row on anything hand-held, landscape included */
@media (max-width: 760px), ((max-height: 540px) and (pointer: coarse)) {
  body .floatbar {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    right: 12px !important; bottom: 12px !important; gap: 10px !important;
  }
  body .floatbar .fl-label { display: none !important; }
  body .floatbar a {
    width: 52px !important; height: 52px !important;
    padding: 0 !important; justify-content: center !important; border-radius: 50% !important;
  }
}

/* =========================================================
   HEADER ROW — logo, theme and Menu stay on one line
   At 360px, the width most Samsung phones report, the Menu button was being
   pushed onto a second row under the logo. The row no longer wraps; the brand
   gives up width instead, since it is the only part that can.
   ========================================================= */
@media (max-width: 760px) {
  .page > header {
    flex-wrap: nowrap !important;
    gap: 8px !important;
    align-items: center !important;
  }
  .page > header > a:first-of-type {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    overflow: hidden;
  }
  .page > header > a:first-of-type > span { min-width: 0 !important; }
  .page > header > a:first-of-type span:last-child { white-space: nowrap; }
  .themebtn, .navbtn { flex: 0 0 auto !important; }
}

/* on the narrowest handsets the brand name steps down rather than disappear */
@media (max-width: 374px) {
  .page > header > a:first-of-type img { width: 38px !important; height: 38px !important; }
  .page > header > a:first-of-type span { font-size: 17px !important; }
  .navbtn { padding: 0 13px !important; font-size: 14.5px !important; }
  .themebtn { width: 38px !important; height: 38px !important; }
}

@media (max-width: 760px) {
  /* last resort so the row can always fit: the name truncates rather than
     shoving the Menu button onto a line of its own */
  .page > header > a:first-of-type span:last-child {
    overflow: hidden; text-overflow: ellipsis; min-width: 0 !important;
  }
}
@media (max-width: 345px) {
  .page > header > a:first-of-type img { width: 34px !important; height: 34px !important; }
  .page > header > a:first-of-type span { font-size: 15.5px !important; }
  .page > header > a:first-of-type { gap: 8px !important; }
  .navbtn { padding: 0 11px !important; font-size: 14px !important; }
  .themebtn { width: 34px !important; height: 34px !important; }
  .page > header { padding-left: 12px !important; padding-right: 12px !important; }
}

@media (max-width: 760px) {
  .page > header > a:first-of-type * { min-width: 0 !important; }
  .page > header > a:first-of-type span { overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 760px) {
  /* `.page [style*="display: flex"]` sets wrap on everything with inline flex,
     and the header is one of those — so this has to match the attribute too,
     or it loses the cascade on specificity alone. */
  .page > header[style*="display: flex"] {
    flex-wrap: nowrap !important;
  }
}

@media (max-width: 760px) {
  .page > header[style*="display: flex"] { align-items: center !important; }
}

@media (max-width: 760px) {
  /* the brand lockup is a row too: mark beside name, never stacked */
  .page > header > a[style*="display: flex"]:first-of-type { flex-wrap: nowrap !important; }
}

/* =========================================================
   PACKAGE FILTER — the chips actually filter
   ========================================================= */
.pkgchip { transition: background .15s ease, border-color .15s ease, color .15s ease; }
.pkgchip:hover { border-color: #2A3FD1 !important; color: #2A3FD1 !important; }
.pkgchip.is-on {
  background: #151C5E !important; border-color: #151C5E !important;
  color: #FFFFFF !important; font-weight: 700 !important;
}
.pkgchip:focus-visible { outline: 2px solid #2A3FD1; outline-offset: 2px; }
[data-theme="dark"] .pkgchip.is-on { background: #2A3FD1 !important; border-color: #2A3FD1 !important; }
[data-theme="dark"] .pkgchip:hover { border-color: #8FA6FF !important; color: #8FA6FF !important; }
.pkgcard { transition: opacity .18s ease; }
.pkgcard.is-off { display: none !important; }
.pkgreset:hover { opacity: .75; }

@media (max-width: 760px) {
  /* the axis label sits above its chips rather than beside them */
  .page #packages .pkgchip { min-height: 38px; }
  .page #packages [style*="flex: 0 0 76px"] {
    flex: 0 0 100% !important; padding-top: 0 !important; padding-bottom: 2px !important;
  }
  .page #packages [style*="align-items: flex-start"] { flex-wrap: wrap !important; }
}

/* =========================================================
   HERO USP STRIP ON A PHONE — the same tiles as the homepage band
   The hero strips carry three figures, not four, so the third tile runs the
   full width rather than leaving a hole. Desktop keeps its row and rules.
   ========================================================= */
@media (max-width: 760px) {
  .page div.statstrip {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 14px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-sizing: border-box;
  }
  .page div.statstrip > .stat {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    width: auto !important;
    box-sizing: border-box;
    gap: 2px !important;
    padding: 16px 14px !important;
    border-radius: 18px !important;
    background: #FFFFFF !important;
    border: 1px solid #ECE8DE !important;
  }
  /* exactly three figures (three cells plus the two hairlines they sat
     between) means the last tile takes the whole width */
  .page div.statstrip > .stat:first-child:nth-last-child(5) ~ .stat:nth-last-child(1) {
    grid-column: 1 / -1 !important;
  }
  .page div.statstrip > .stat > :first-child { font-size: 26px !important; line-height: 1.05 !important; }
  .page div.statstrip > .stat > :last-child { font-size: 12.5px !important; line-height: 1.35 !important; }
  [data-theme="dark"] .page div.statstrip > .stat {
    background: #161C44 !important; border-color: #2B3360 !important;
  }
}

/* =========================================================
   THE "WE COLLECT" BAND — photo runs to the band's edges
   Scoped deliberately to the green collection CTA, which is the one section
   that was showing strips of its own background down both sides of the
   photograph. That section repeats on seven pages, so the fix follows it
   there; every other photograph on the site keeps its inset.
   ========================================================= */
@media (max-width: 760px) {
  .page section[style*="background: #7BBF5F"] { overflow: hidden !important; }
  .page section[style*="background: #7BBF5F"] > .ph,
  .page section[style*="background: #7BBF5F"] > .well-empty,
  .page section[style*="background: #7BBF5F"] > div > .ph,
  .page section[style*="background: #7BBF5F"] > div > .well-empty {
    margin-left: -18px !important;
    margin-right: -18px !important;
    width: calc(100% + 36px) !important;
    max-width: none !important;
    border-radius: 0 !important;
  }
}

/* the homepage stat band sat 16px further in than everything else on the
   page; its tiles now line up with the headings above and below it */
@media (max-width: 760px) {
  .page section.statstrip {
    margin-left: 18px !important;
    margin-right: 18px !important;
    padding: 0 !important;
  }
}

/* =========================================================
   PACKAGES — a floating way in, after the reader has settled
   ========================================================= */
.pkgfab {
  position: fixed; right: 12px; bottom: 74px; z-index: 95;
  display: inline-flex; align-items: center; gap: 9px;
  height: 46px; padding: 0 18px 0 15px;
  border-radius: 999px; border: 0;
  background: #151C5E; color: #FFFFFF;
  font: 700 14.5px/1 'Figtree', system-ui, sans-serif;
  text-decoration: none; cursor: grab;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .24);
  opacity: 0; transform: translateY(10px) scale(.96);
  pointer-events: none;
  transition: opacity .32s ease, transform .32s cubic-bezier(.2,.7,.3,1);
  touch-action: none;
  -webkit-user-select: none; user-select: none;
}
.pkgfab.show { opacity: 1; transform: none; pointer-events: auto; }
.pkgfab.dragging { cursor: grabbing; transition: none; box-shadow: 0 16px 36px rgba(0,0,0,.32); }
.pkgfab:hover { background: #2A3FD1; }
.pkgfab:focus-visible { outline: 2px solid #2A3FD1; outline-offset: 3px; }
[data-theme="dark"] .pkgfab { background: #2A3FD1; }
@media (prefers-reduced-motion: reduce) { .pkgfab { transition: opacity .2s ease; transform: none; } }

@media (max-width: 760px) {
  /* sits directly above the call button, and the back-to-top moves up to suit */
  .pkgfab { right: 12px; bottom: 74px; }
  .totop { bottom: 132px !important; }
}
@media (min-width: 761px) {
  /* clear of the labelled column of floating actions */
  .pkgfab { right: 16px; bottom: 206px; }
}

/* tiles in a row were sitting a few pixels out of line with each other,
   because the grid was not stretching them to a common height */
@media (max-width: 760px) {
  .page section.statstrip, .page div.statstrip {
    align-items: stretch !important;
    align-content: start !important;
  }
  .page section.statstrip > .stat, .page div.statstrip > .stat {
    align-self: stretch !important;
    margin: 0 !important;
  }
}

/* =========================================================
   SURGERY PAGE — each procedure column is one panel on a phone
   The tinted heading sat in its own rounded card with the list floating
   underneath at a different indent, so the two read as unrelated. On a phone
   they become a single framed block: tinted header, list inside the same
   frame, text on one left edge. Surgery page only — this pattern is nowhere
   else on the site.
   ========================================================= */
@media (max-width: 760px) {
  .page .proccol {
    border: 1px solid #E8E2D4 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    background: #FFFFFF !important;
    margin-bottom: 14px !important;
  }
  .page .proccol > .proccol-head {
    border: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid #E8E2D4 !important;
    padding: 16px 18px !important;
  }
  .page .proccol > .proccol-list {
    padding: 2px 18px 6px !important;
  }
  /* the rows line up with the heading above them, and the last loses its rule */
  .page .proccol > .proccol-list > * {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .page .proccol > .proccol-list > *:last-child { border-bottom: 0 !important; }
  .page .proccol > .proccol-head > span:first-child > span:first-child {
    font-size: 24px !important;
  }
  [data-theme="dark"] .page .proccol { background: #161C44 !important; border-color: #2B3360 !important; }
  [data-theme="dark"] .page .proccol > .proccol-head { border-bottom-color: #2B3360 !important; }
}

@media (max-width: 760px) {
  /* a bullet and its line of text are one row. The text's natural size is the
     whole phrase on one line, so on a wrapping flex row the longer items were
     dropping underneath their own dot and sitting at a different indent from
     the short ones. Scoped to the surgery columns. */
  .page .proccol > .proccol-list > * { flex-wrap: nowrap !important; }
  .page .proccol > .proccol-list > * > :last-child {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  .page .proccol > .proccol-list > * > :first-child { flex: 0 0 6px !important; }
}

/* =========================================================
   ONLINE CONSULTATION — two phone-only adjustments, that page only
   ========================================================= */
@media (max-width: 760px) {
  /* the number stays beside its heading instead of the heading dropping
     underneath it: the text column takes the space that is left rather than
     demanding a line of its own */
  .page .numstep { flex-wrap: nowrap !important; }
  .page .numstep > :first-child { flex: 0 0 28px !important; }
  .page .numstep > :last-child { flex: 1 1 0 !important; min-width: 0 !important; }

  /* fifteen situations is a lot to scroll past, so three show and the rest
     open on request */
  .page .foldrow.is-folded { display: none !important; }
  .foldmore {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 50px; margin-top: 16px;
    padding: 0 20px; border-radius: 999px;
    border: 1.5px solid #2A3FD1; background: transparent;
    font: 700 15.5px/1 'Figtree', system-ui, sans-serif; color: #2A3FD1;
    cursor: pointer;
  }
  .foldmore:hover { background: #2A3FD1; color: #FFFFFF; }
  .foldmore:focus-visible { outline: 2px solid #2A3FD1; outline-offset: 3px; }
  .foldmore svg { transition: transform .2s ease; }
  .foldmore[aria-expanded="true"] svg { transform: rotate(180deg); }
  [data-theme="dark"] .foldmore { border-color: #8FA6FF; color: #8FA6FF; }
  [data-theme="dark"] .foldmore:hover { background: #2A3FD1; color: #FFFFFF; }
}
/* above the phone breakpoint nothing is folded and no button exists */
@media (min-width: 761px) { .foldmore { display: none !important; } }

/* =========================================================
   TWO WIDE TABLES ON A PHONE
   A comparison (pet taxi) and an airline matrix (relocation). Neither can
   hold its columns at 390px, so each cell carries the heading it belongs to
   and the row stacks as label / value pairs. Desktop keeps both tables.
   ========================================================= */
@media (max-width: 760px) {
  .page .cmphead, .page .airhead { display: none !important; }

  .page .cmptable { border-radius: 18px !important; }
  .page .cmptable > div { padding-left: 0 !important; }

  .page .cmprow {
    display: block !important;
    grid-template-columns: none !important;
    padding: 4px 16px 14px !important;
  }
  .page .cmprow > :first-child {
    display: block !important;
    padding: 14px 0 8px !important;
    font-size: 17px !important;
  }
  .page .cmprow > [data-label] {
    display: block !important;
    margin-top: 8px !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
  }
  .page .cmprow > [data-label]::before,
  .page .airrow > [data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; opacity: .72;
  }

  .page .airrow {
    display: block !important;
    flex-wrap: nowrap !important;
    padding: 14px 0 !important;
    border-top: 1px solid #ECE8DE;
  }
  .page .airrow > :first-child {
    display: block !important;
    font-size: 17px !important; font-weight: 700 !important;
    margin-bottom: 8px !important;
  }
  .page .airrow > [data-label] {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 5px 0 !important;
    flex: 0 0 auto !important;
    width: auto !important;
  }
  .page .airrow > [data-label]::before { margin-bottom: 0; }
  [data-theme="dark"] .page .airrow { border-top-color: #2B3360; }
}

/* the drawer already opens with a Get a quote button, so the duplicate inside
   the Pet Taxi & Relocation sub-list comes out on a phone */
@media (max-width: 760px) {
  .mainnav .dropdown a[href="get-quote.html"],
  .mainnav .megamenu a[href="get-quote.html"] { display: none !important; }
}

/* =========================================================
   HERO FIGURES ON A PHONE
   These strips carry words, not numbers — "Vet in-house", "Vet-prescribed",
   "We collect" — and at 26px the longer ones ran into the tile wall or broke
   at a hyphen, while the full-width third tile read as a stray line of
   left-aligned text. A figure that scales with the screen gives the words
   room, and the wide tile centres.
   The same strip appears on five pages (relocation, grooming, flea & tick,
   spay & neuter and the vet clinic), so the fix follows it to all five.
   ========================================================= */
@media (max-width: 760px) {
  .page div.statstrip > .stat > :first-child {
    font-size: clamp(19px, 5.9vw, 23px) !important;
    letter-spacing: -0.012em !important;
  }
  .page div.statstrip > .stat:first-child:nth-last-child(5) ~ .stat:nth-last-child(1) {
    text-align: center !important;
  }
}

/* =========================================================
   TRAVEL REQUIREMENTS — country chips and the dossier columns
   ========================================================= */
.ctychip { transition: background .15s ease, border-color .15s ease, color .15s ease; }
.ctychip:hover { border-color: #2A3FD1 !important; }
.ctychip.is-on {
  background: #151C5E !important;
  border-color: #151C5E !important;
  color: #FFFFFF !important;
}
[data-theme="dark"] .ctychip.is-on {
  background: #2A3FD1 !important; border-color: #2A3FD1 !important;
}
.ctychip:focus-visible { outline: 2px solid #2A3FD1; outline-offset: 2px; }

@media (max-width: 760px) {
  /* the two packed columns of dossiers become one */
  .page .ctylist { column-count: 1 !important; column-gap: 0 !important; }
  .page .ctypanel { margin-bottom: 14px !important; }
  /* hazards and the FAQ drop to a single column too */
  .page .ctywarns,
  .page .faqgrid { grid-template-columns: 1fr !important; }
  /* the chip row scrolls sideways rather than stacking six deep */
  .page .ctybar {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -18px !important;
    margin-right: -18px !important;
    padding: 2px 18px 6px !important;
  }
  .page .ctybar::-webkit-scrollbar { display: none; }
  .page .ctychip { flex: 0 0 auto; }
}

/* =========================================================
   A GRID COLLAPSED TO ONE COLUMN CANNOT HONOUR A SPAN
   Two cards on the grooming and blog boards carry an inline
   "grid-column: span 2", written for the four-column desktop layout. On a
   phone the grid is forced to a single column, and a spanning item in a
   one-column grid invents a second, implicit column — which then takes all
   the width and squeezes every other card into a 30px sliver with its text
   running vertically. Resetting the span is the whole fix.
   ========================================================= */
@media (max-width: 760px) {
  .page [style*="grid-column: span"] { grid-column: auto !important; }
}

/* =========================================================
   NUMBERED ROWS — the number belongs at the start of the heading
   On a phone the row wrapped, leaving the marker stranded on a line of its
   own with the heading beneath it. The heading now comes up beside its
   number; any body text below drops to a full-width line underneath.
   ========================================================= */
@media (max-width: 760px) {
  .page .numrow {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 10px 12px !important;
  }
  .page .numrow > .numrow-n { flex: 0 0 auto !important; }
  .page .numrow > .numrow-t { flex: 1 1 0 !important; min-width: 0 !important; }
  /* must come after .numrow-t: the last column of a three-part row is body
     copy, and it reads better on its own line than squeezed beside a heading */
  .page .numrow > .numrow-body { flex: 1 1 100% !important; min-width: 0 !important; }
}

/* =========================================================
   LOCATION, NEXT TO EMERGENCY — phone only
   Red stays reserved for the emergency action, so this one is quiet.
   ========================================================= */
.loclink { display: none !important; }
@media (max-width: 760px) {
  .mainnav > a.loclink {
    display: inline-flex !important;
    align-items: center; justify-content: center !important;
    gap: 7px;
    margin-top: 10px; min-height: 50px;
    padding: 8px 15px;
    border: 1.5px solid #D7D2C4 !important;
    border-radius: 999px;
    background: #FFFFFF;
    font-size: 15px; font-weight: 700;
    color: #151C5E !important;
    text-decoration: none !important;
  }
  [data-theme="dark"] .mainnav > a.loclink {
    background: #161C44; border-color: #2B3360 !important; color: #FFFFFF !important;
  }
}

/* =========================================================
   DOG GROOMING — the before/after strip swipes again
   The strip was authored as a horizontal rail (overflow-x on a nowrap flex
   row). The general phone pass wraps every flex row and releases fixed
   flex-bases, which turned it into a tall vertical stack. Here it keeps its
   rail, one card at a time, snapping as you swipe.
   Dog grooming only — six other pages carry the same device untouched.
   ========================================================= */
@media (max-width: 760px) {
  .page .swiperail {
    flex-wrap: nowrap !important;
    gap: 14px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -18px !important;
    margin-right: -18px !important;
    padding: 2px 18px 12px !important;
  }
  .page .swiperail::-webkit-scrollbar { display: none; }
  .page .swiperail > .swipecard {
    flex: 0 0 84% !important;
    max-width: 84% !important;
    scroll-snap-align: start;
  }
}

/* =========================================================
   DOG GROOMING — coat types as cards on a phone
   Three rows of name, description and interval ran together as one column of
   grey text. Each coat is now its own card, with the grooming interval as a
   pill rather than another paragraph.
   ========================================================= */
@media (max-width: 760px) {
  .page .coatrow {
    border-top: 0 !important;
    border: 1px solid #ECE8DE !important;
    border-radius: 18px !important;
    background: #FFFFFF !important;
    margin-bottom: 12px !important;
    padding: 17px 17px 15px !important;
    gap: 9px !important;
  }
  .page .coatrow > * { flex: 1 1 100% !important; min-width: 0 !important; }
  .page .coatrow > .coat-freq {
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    padding: 7px 13px !important;
    border-radius: 999px !important;
    background: #EAF3E3 !important;
    border: 1px solid #CFE3C2 !important;
    font-size: 13.5px !important;
  }
  [data-theme="dark"] .page .coatrow {
    background: #161C44 !important; border-color: #2B3360 !important;
  }
  [data-theme="dark"] .page .coatrow > .coat-freq {
    background: rgba(123, 191, 95, .14) !important; border-color: #4E8F37 !important;
    color: #9BD47E !important;
  }
}

/* =========================================================
   PET FOOD — working filter chips
   ========================================================= */
.foodchip {
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.foodchip:hover { border-color: #2A3FD1 !important; }
.foodchip.is-on {
  background: #151C5E !important;
  border-color: #151C5E !important;
  color: #FFFFFF !important;
}
[data-theme="dark"] .foodchip.is-on { background: #2A3FD1 !important; border-color: #2A3FD1 !important; }
.foodchip:focus-visible { outline: 2px solid #2A3FD1; outline-offset: 2px; }

@media (max-width: 760px) {
  /* the chip rows scroll sideways rather than stacking four deep */
  .page .foodfilter > :last-child {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .page .foodfilter > :last-child::-webkit-scrollbar { display: none; }
  .page .foodchip { flex: 0 0 auto; }
}

/* =========================================================
   PET FOOD — the seven-day change-over on a phone
   Four columns divided by hairlines became four blocks with the hairline on
   the wrong edge, so the steps ran into one another. Each day now sits on its
   own with a rule above it and the day name clear of its description.
   ========================================================= */
@media (max-width: 760px) {
  .page .dayrow { margin: 0 !important; gap: 0 !important; }
  .page .dayrow > .daycol {
    flex: 1 1 100% !important;
    border-left: 0 !important;
    border-top: 1px solid #ECE8DE !important;
    padding: 12px 0 !important;
    gap: 3px !important;
  }
  .page .dayrow > .daycol:first-child { border-top: 0 !important; padding-top: 2px !important; }
  [data-theme="dark"] .page .dayrow > .daycol { border-top-color: #2B3360 !important; }
}

/* =========================================================
   A COLUMN DIVIDER BELONGS ON TOP ONCE THE COLUMNS STACK
   Two blocks on the site are a right-hand column separated by a hairline and
   a deep left indent. Stacked on a phone that leaves a stray vertical line
   running down the left edge and the text pushed in from it. The rule moves
   to the top, where it is doing the job it was drawn for.
   (About page and the homepage — the only two elements with this pattern.)
   ========================================================= */
@media (max-width: 760px) {
  .page [style*="border-left: 1px solid"][style*="padding-left:"] {
    border-left: 0 !important;
    padding-left: 0 !important;
    padding-top: 20px !important;
    margin-top: 18px !important;
    border-top: 1px solid #D7E8CC !important;
  }
  [data-theme="dark"] .page [style*="border-left: 1px solid"][style*="padding-left:"] {
    border-top-color: #2B3360 !important;
  }
}

/* =========================================================
   TEAM CARDS — the detail centres under the portrait on a phone
   ========================================================= */
@media (max-width: 760px) {
  .page .teamcard { text-align: center !important; }
  .page .teamcard > div { align-items: center !important; }
}

/* =========================================================
   AIRLINES PAGE — both tables stack into labelled rows on a phone
   ========================================================= */
@media (max-width: 760px) {
  .page .waygrid { grid-template-columns: 1fr !important; }

  .page .airhead2, .page .rthead { display: none !important; }
  .page .airtable2, .page .rttable { padding-left: 16px !important; padding-right: 16px !important; }

  .page .airrow2 { display: block !important; padding: 14px 0 2px !important; }
  .page .airrow2 > :nth-child(1) { display: block !important; font-size: 17px !important; }
  .page .airrow2 > :nth-child(2) { display: block !important; margin-bottom: 7px !important; }
  .page .airrow2 > [data-label] {
    display: flex !important;
    align-items: center; justify-content: space-between; gap: 12px;
    padding: 4px 0 !important;
  }
  .page .airrow2 > [data-label]::before {
    content: attr(data-label);
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: #6B6355;
  }
  .page .airtable2 p[style*="padding-left: 188px"] { padding-left: 0 !important; }

  .page .rtrow { display: block !important; padding: 14px 0 !important; }
  .page .rtrow > :first-child { display: block !important; font-size: 17px !important; margin-bottom: 4px; }
  .page .rtrow > [data-label] { display: block !important; margin-top: 9px !important; }
  .page .rtrow > [data-label]::before {
    content: attr(data-label);
    display: block; margin-bottom: 2px;
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: #6B6355;
  }
  [data-theme="dark"] .page .airrow2 > [data-label]::before,
  [data-theme="dark"] .page .rtrow > [data-label]::before { color: #AEB6EC; }
}

/* =========================================================
   CRATES AND CHARGES PAGES ON A PHONE
   The measuring diagram goes full width above its key, the formula columns
   stack with their rule on top rather than down one side, and the paired
   panels become one column.
   ========================================================= */
@media (max-width: 760px) {
  .page .measdiagram { flex: 1 1 100% !important; padding: 14px !important; }
  .page .measgrid,
  .page .boxgrid,
  .page .rejgrid,
  .page .partgrid { grid-template-columns: 1fr !important; }
  .page .measgrid { grid-template-columns: 1fr 1fr !important; }

  .page .formularow { flex-wrap: wrap !important; padding: 6px 16px 16px !important; }
  .page .formularow > div {
    flex: 1 1 100% !important;
    border-left: 0 !important;
    border-top: 1px solid #ECE8DE !important;
    padding: 13px 0 0 !important;
  }
  .page .formularow > div:first-child { border-top: 0 !important; }
  [data-theme="dark"] .page .formularow > div { border-top-color: #2B3360 !important; }

  .page .cwpair, .page .movepair { flex-wrap: wrap !important; gap: 16px !important; }
  .page .cwpair > div, .page .movepair > div { flex: 1 1 100% !important; min-width: 0 !important; }
}

/* =========================================================
   FORMS — validation, the sending state, and what happens after
   ========================================================= */
.fv-hp {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.fv-privacy { max-width: 420px; }
[data-theme="dark"] .fv-privacy { color: #AEB6EC !important; }

.page form .fv-invalid {
  border-color: #C62828 !important;
  box-shadow: 0 0 0 3px rgba(198, 40, 40, .12);
}
.fv-err {
  display: block;
  margin-top: 5px;
  font: 600 13px/1.4 'Figtree', system-ui, sans-serif;
  color: #C62828;
}
.page form button[type="submit"][disabled] { opacity: .62; cursor: progress; }

/* ---- the confirmation ---- */
.fv-done {
  box-sizing: border-box;
  padding: 26px 28px 28px;
  border-radius: 24px;
  background: #EEF5E9;
  border: 1px solid #D7E8CC;
  outline: none;
}
.fv-done-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 12px;
  border-radius: 999px; background: #4E8F37; color: #FFFFFF;
}
.fv-done h3 {
  margin: 0 0 8px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 26px; line-height: 1.12; font-weight: 600;
  letter-spacing: -0.03em; color: #151C5E;
}
.fv-done > p {
  margin: 0 0 18px;
  font-size: 16px; line-height: 1.65; color: #3F4A33;
}
[data-theme="dark"] .fv-done { background: rgba(123,191,95,.10); border-color: #4E8F37; }
[data-theme="dark"] .fv-done h3 { color: #FFFFFF; }
[data-theme="dark"] .fv-done > p { color: #C9D0FF; }

/* ---- the urgent route out, which a web form must never be ---- */
.fv-urgent {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 18px 18px;
  border-radius: 18px;
  background: #FDF0F0;
  border: 1px solid #E7C3C3;
  border-left: 4px solid #C62828;
}
.fv-urgent strong { font-size: 15.5px; color: #C62828; }
.fv-urgent span { font-size: 14.5px; line-height: 1.6; color: #5A3B3B; }
.fv-urgent-actions {
  display: flex !important; flex-wrap: wrap; gap: 10px; margin-top: 4px;
}
.fv-call, .fv-wa {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 20px;
  border-radius: 999px;
  font: 700 15px/1 'Figtree', system-ui, sans-serif;
  text-decoration: none;
}
.fv-call { background: #C62828; color: #FFFFFF !important; }
.fv-call:hover { background: #A81F1F; }
.fv-call-2 { background: #FFFFFF; color: #C62828 !important; border: 1.5px solid #C62828; }
.fv-call-2:hover { background: #FDF0F0; }
.fv-wa { background: #25D366; color: #0B3D1E !important; }
[data-theme="dark"] .fv-urgent { background: #3A1515; border-color: #6E2A2A; border-left-color: #D93A3A; }
[data-theme="dark"] .fv-urgent strong { color: #FF8A8A; }
[data-theme="dark"] .fv-urgent span { color: #E6C9C9; }
[data-theme="dark"] .fv-call-2 { background: transparent; color: #FF8A8A !important; border-color: #FF8A8A; }

/* ---- it did not send ---- */
.fv-failed {
  box-sizing: border-box;
  margin-bottom: 16px; padding: 18px 20px 20px;
  border-radius: 18px;
  background: #FFF4E2; border: 1px solid #EBD9B8; border-left: 4px solid #C08A3E;
}
.fv-failed h3 {
  margin: 0 0 6px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px; line-height: 1.15; font-weight: 600; color: #5A4315;
}
.fv-failed p { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: #5A4315; }
[data-theme="dark"] .fv-failed { background: rgba(192,138,62,.12); border-color: #6E5A2A; }
[data-theme="dark"] .fv-failed h3, [data-theme="dark"] .fv-failed p { color: #E3C488; }

@media (max-width: 760px) {
  .fv-done { padding: 22px 18px 24px; border-radius: 20px; }
  .fv-done h3 { font-size: 23px; }
  .fv-urgent-actions { flex-direction: column; }
  .fv-call, .fv-wa { width: 100%; }
}

/* =========================================================
   THE CONFIRMATION PAGE
   ========================================================= */
@media (max-width: 760px) {
  .page #ty { padding-top: 34px !important; }
  .page .ty-head { font-size: 32px !important; }
  .page #ty .fv-urgent-actions { flex-direction: column; }
  .page #ty .fv-call, .page #ty .fv-wa { width: 100%; }
}

/* ------------------------------------------------------------------
   CROP POINTS FOR TWO OF THE NEW GROOMING PHOTOGRAPHS
   Both wells are wider than the source, so the browser crops top and
   bottom. Left alone, the About hero cuts the top off the Arabic on
   the shop sign, and the nails card catches the last line of the
   caption printed into that image. Scoped by filename: no other
   photograph on the site can be touched by these two rules.
   ------------------------------------------------------------------ */
.page img[src$="falcon_vets_storefront_wide.webp"] { object-position: center 32% !important; }
.page img[src$="nails_ears_care.webp"]             { object-position: center 56% !important; }

/* ------------------------------------------------------------------
   THE TWO VET PORTRAITS
   Real photographs, shot tall (2:3), dropped into wells that are wider
   than they are high. Centred, the crop lands on the chest and cuts
   both faces off. Anchored to the top it reads as a head-and-shoulders
   portrait, which is the whole point of the card. Scoped by filename.
   ------------------------------------------------------------------ */
.page img[src$="dr_mehboob_ahmad.webp"],
.page img[src$="dr_ahmad_fawzi_orook.webp"] { object-position: center top !important; }

/* ------------------------------------------------------------------
   BEFORE / AFTER LABELS ON THE GROOMING RAIL
   The design already draws a "Before" and an "After" pill inside each
   half of these cards, but those wells carry no position of their own,
   so the photograph lays over the top of the pill and hides it. On a
   phone the two halves stack, and without the pills nothing says which
   way round they go. .swipecard appears on the dog grooming page only,
   so nothing else on the site can be reached by this.
   ------------------------------------------------------------------ */
.page .swipecard .ph { position: relative; }
.page .swipecard .ph > span {
  position: relative;
  z-index: 2;
  box-shadow: 0 1px 6px rgba(21, 28, 94, 0.22);
}

/* ------------------------------------------------------------------
   PRODUCT PACK SHOTS FIT WHOLE, THEY DO NOT FILL
   Every other photograph on this site is a scene, and cropping a scene
   to fill its well is right. A pack shot is the opposite: the thing
   the customer has to recognise is the whole bag, and cover crops the
   bottom off it. These are the only images named food_* and acc_*.
   ------------------------------------------------------------------ */
.page .ph > img.ph-img[src*="images/pharmcard_"],
.page .ph > img.ph-img[src*="images/food_"],
.page .ph > img.ph-img[src*="images/surg_"],
.page .ph > img.ph-img[src*="images/acc_"] {
  object-fit: contain !important;
  padding: 12px;
  box-sizing: border-box;
}

/* ------------------------------------------------------------------
   THE FOUR CATEGORY CARDS, ON A PHONE
   Four cards stacked vertically push the product list most of a screen
   further down, and each card is mostly empty space. On a phone they
   become one sideways-scrolling row that snaps, so the whole set is one
   thumb movement and the list stays near the top of the page.
   ------------------------------------------------------------------ */
@media (max-width: 760px) {
  .page .fourcat {
    display: flex !important;
    flex-wrap: nowrap !important;   /* a wrapping row just stacks again */
    grid-template-columns: none !important;
    gap: 12px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding: 2px 16px 6px;
  }
  .page .fourcat::-webkit-scrollbar { display: none; }
  .page .fourcat > * {
    flex: 0 0 76%;
    scroll-snap-align: start;
  }
}

/* ------------------------------------------------------------------
   FULL-BLEED CHROME ON A WIDE SCREEN
   Every page is a fixed 1440px column. The bands that carry their own
   background -- the navy utility bar, the sticky header, the hero and
   the footer -- were that width too, so on a monitor wider than 1440,
   or simply zoomed out, the header stopped short of both edges and sat
   in the middle of the window like a floating card.

   Each band now stretches to the window while its contents stay on the
   1440 column: a negative margin of (50vw - 50%) a side, and padding
   put back so the type does not move. 50vw counts the scrollbar, so the
   bands overhang by its width -- overflow-x: clip trims that without
   making a scroll container, which would break the sticky header.
   Below 1441px nothing here applies and the page is untouched.
   ------------------------------------------------------------------ */
@media (min-width: 1441px) {
  .page { overflow-x: clip; }

  .page > .utilbar,
  .page > header,
  .page > nav.crumbs,
  .page > section.hero,
  .page > footer {
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  /* the breadcrumb has no background of its own but it does draw the rule
     under the header, and a rule that stopped short of the window looked
     like the header had come loose again */
  .page > .utilbar,
  .page > header,
  .page > nav.crumbs,
  .page > section.hero {
    padding-left: calc(50vw - 648px) !important;
    padding-right: calc(50vw - 648px) !important;
  }
  .page > footer {
    padding-left: calc(50vw - 720px) !important;
    padding-right: calc(50vw - 720px) !important;
  }
}

/* ------------------------------------------------------------------
   READING A SHEET WITHOUT LEAVING THE PAGE
   The treatment sheets used to open as a raw image file in a new tab.
   That takes the reader off the site onto a bare file URL, which is a
   dead end with no way back except the back button -- and on some hosts
   it does not open at all. The sheet now opens over the page instead.
   Escape, the close button, or a click on the backdrop all close it.
   ------------------------------------------------------------------ */
.fvzoom { cursor: zoom-in; }

.fvlightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 13, 38, 0.88);
  opacity: 0;
  transition: opacity .18s ease;
}
.fvlightbox.is-open { opacity: 1; }
.fvlightbox img {
  max-width: min(92vw, 820px);
  max-height: 92vh;
  width: auto;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
  background: #FFFFFF;
}
.fvlightbox button {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: #FFFFFF;
  color: #151C5E;
  font-size: 22px;
  line-height: 1;
}
.fvlightbox button:focus-visible { outline: 3px solid #2A3FD1; outline-offset: 2px; }
body.fv-noscroll { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .fvlightbox { transition: none; }
}

/* ------------------------------------------------------------------
   BEFORE & AFTER PAIRS  (grooming hub + cat grooming)
   Two photographs side by side in one frame with the label over each.
   The label has to be positioned: .ph fills itself with an absolutely
   placed photograph, so anything left in normal flow ends up underneath
   it. .bapair exists on these two pages only -- the dog grooming page
   has its own older .swipecard rail and is not touched by any of this.
   ------------------------------------------------------------------ */
.page .bapair .balabel {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 1px 6px rgba(21, 28, 94, 0.22);
}
.page .bapair .balabel.is-before { background: #F6DFC0; color: #8A5A10; }
.page .bapair .balabel.is-after  { background: #CFE6C2; color: #2F5A20; }

/* ------------------------------------------------------------------
   THE SAME PAIRS ON A PHONE
   The phone rules above turn every grid into one column and let every
   flex row wrap, which is right nearly everywhere and wrong here: it
   puts the before above the after, and a before and after you have to
   scroll between is not a comparison, it is two photographs.

   So each pair says which shape it is and gets the phone layout that
   suits its photographs. The dog pair is landscape, and two landscape
   frames side by side on a 390px screen would be two slivers, so that
   one does stack -- full width, where the shape is right. The cat pair
   is portrait and stays side by side, where it fits. Nothing in here
   is reachable above 760px, so the desktop layout is unaffected.
   ------------------------------------------------------------------ */
@media (max-width: 760px) {
  .page .bapairs { grid-template-columns: 1fr !important; gap: 16px !important; }
  .page .bawide  { grid-template-columns: 1fr !important; gap: 26px !important; }

  /* The rows are grids, not flex rows. A flex row holding an image well
     is caught by the phone rule that turns any such row into a column,
     and that rule out-specifies anything reasonable written here. A grid
     is not caught by it and does what it is told. */

  /* landscape pairs: one above the other, each the full width */
  .page .bapair.is-land .bapics { grid-template-columns: 1fr !important; }
  .page .bapair.is-land .ph { height: 188px !important; border-right: 0 !important; }
  .page .bapair.is-land .ph:first-child { border-bottom: 1px solid #ECE8DE; }

  /* portrait pairs: still side by side */
  .page .bapair.is-port .bapics { grid-template-columns: 1fr 1fr !important; }
  .page .bapair.is-port .ph { height: 234px !important; }

  .page .bapair .balabel {
    left: 8px; bottom: 8px; height: 21px; padding: 0 9px;
  }
}

/* ------------------------------------------------------------------
   DOG GROOMING — THE PAIRS STAY A PAIR ON A PHONE
   The halves were stacking, because the phone rules turn any flex row
   holding an image well into a column. A before above an after is not a
   comparison, and the crop that comes with it is worse than the
   stacking: a wide short well cut the head off the portrait pair and
   cut the dog out of the landscape ones entirely.

   The rows are grids now, which that rule does not reach, and 185px of
   height against a half-card width gives roughly the same proportion
   the desktop wells use -- the one shape that suits both the portrait
   pair and the two landscape ones. Nothing here applies above 760px.
   ------------------------------------------------------------------ */
@media (max-width: 760px) {
  .page .swipecard .bapics { grid-template-columns: 1fr 1fr !important; }
  .page .swipecard .ph { height: 185px !important; }
}

/* ------------------------------------------------------------------
   THE TEAM, ON A PHONE
   The headshots are 1024x1536. One column made each well about 354 wide
   and 220 tall, which crops a 2:3 photograph down to roughly 3:2 and
   throws away about two thirds of it -- a head in a letterbox, and on
   the taller-framed portrait the top of his head as well.

   Two across with a 2:3 well is the shape the photographs already are,
   so nothing is cropped, and two people side by side reads as the pair
   they are rather than as two unrelated faces.

   The rule is keyed to the photographs, not to a class on one page.
   This block appears on the home page and the about page with different
   well heights and no shared marker, and would reappear on the next
   page that introduces the vets; keying it to images/dr_ means it is
   right wherever it lands instead of right where it was remembered.
   Nothing here applies above 760px.
   ------------------------------------------------------------------ */
@media (max-width: 760px) {
  .page .teamgrid,
  .page div[style*="grid-template-columns"]:has(.ph > img[src*="images/dr_"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
  .page .teamgrid .ph,
  .page .ph:has(> img[src*="images/dr_"]) { height: 252px !important; }
}

/* ------------------------------------------------------------------
   THE BRAND LOCKUP IN THE HEADER
   Two sub-pixel faults, both created by putting the name the right way
   round. "Falcon Veterinary" kept its only descender at the end of the
   line, over the gap after LLC. "Veterinary Falcon" puts that same y
   directly above PET CLINIC, and at line-height 1.05 the tail landed
   1px INSIDE the subtitle's line box -- the two lines were genuinely
   touching, not just looking tight. 1.25 clears it by 2px, measured
   with the real font rather than assumed, and the header stays 96px
   so nothing below it moves.

   The second fault is horizontal. Both spans begin at exactly the same
   x, so the browser considers them aligned -- but a serif V carries its
   apex right out to the edge of its box while a sans P has a side
   bearing before its stem, so the P's ink starts half a pixel to the
   right and the eye reads the subtitle as indented. Boxes were aligned;
   ink was not. Half a pixel back puts the stems on one line.
   ------------------------------------------------------------------ */
/* the 1.05 is written into the markup on every page, so this has to
   outrank an inline style rather than merely follow it. */
.page header > a:first-of-type > span { line-height: 1.25 !important; }
.page header > a:first-of-type > span > span:last-child { margin-left: -0.5px; }