/* ============================================================
   Varsity BioLogistics: shared stylesheet for every public page.

   A white page with deep navy panels. The top of every page is one
   large navy panel inset from the window edge, the guarantee and the
   closing call to action are navy panels, and everything else sits
   straight on the page. No decorative devices: type, the logo's
   colours and space do the work.

   Palette from the logo: wordmark navy #033664, tile stops #093e66
   to #5fbdbe, BioLogistics aqua #60c2c2. Self-hosted fonts (OFL).
   ============================================================ */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/libre-franklin-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/libre-franklin-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* logo */
  --navy:       #033664;
  --tile-1:     #093e66;
  --tile-2:     #15587b;
  --tile-3:     #227490;
  --tile-4:     #398fa3;
  --tile-5:     #4ea8b3;
  --tile-6:     #5fbdbe;
  --aqua:       #60c2c2;

  /* built from the logo */
  --navy-deep:  #062b4f;
  --navy-hover: #0b4777;
  --on-navy:    #bfd2e2;   /* body text on navy, 9:1 */
  --aqua-300:   #9ad8d6;
  --aqua-200:   #c6e9e7;
  --aqua-100:   #e3f3f2;
  --aqua-50:    #f1f8f8;
  --teal-text:  #1d6c89;   /* aqua is too light for text on white; this is 5.6:1 */

  --ink:        #0b2440;
  --body:       #3c5165;
  --muted:      #617486;   /* 4.8:1 on white */
  --line:       #e1eaed;
  --line-2:     #cddbe0;
  --white:      #ffffff;

  --font-sans: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", ui-monospace, monospace;

  --fs-display: clamp(2.5rem, 1.6rem + 3.1vw, 4rem);
  --fs-page:    clamp(2.25rem, 1.55rem + 2.4vw, 3.5rem);
  --fs-h2:      clamp(1.875rem, 1.4rem + 1.7vw, 2.75rem);
  --fs-lead:    clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --fs-sm:      0.9375rem;

  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --maxw:   1200px;
  --block:  clamp(5rem, 10vw, 8.5rem);
  --head-h: 76px;
  --util-h: 40px;
  --gap:    clamp(8px, 1vw, 14px);   /* the white margin around navy panels at the top */

  --r-xl: 28px;
  --r-sm: 10px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* names the moved form code was written against, mapped onto this palette */
  --ink-950: var(--ink);
  --ink-900: var(--ink);
  --ink-700: #2f4458;
  --ink-500: var(--body);
  --ink-450: var(--muted);
  --navy-900: var(--navy-deep);
  --teal-800: #1a5a73;
  --teal-700: var(--teal-text);
  --teal-600: var(--tile-3);
  --teal-500: var(--tile-5);
  --teal-400: #7ccfcd;
  --teal-300: var(--aqua-300);
  --teal-200: var(--aqua-200);
  --teal-100: var(--aqua-100);
  --line-200: var(--line);
  --line-300: var(--line-2);
  --paper: var(--aqua-50);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
}

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; font-size: 16px; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  position: relative;
  background: var(--white);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  padding-top: calc(var(--util-h) + var(--head-h));
}
::selection { background: var(--aqua-200); color: var(--ink); }
img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--tile-4);
  outline-offset: 3px;
  border-radius: 3px;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--navy); color: #fff;
  font-size: 0.875rem; font-weight: 600; padding: 11px 16px;
  border-radius: 8px; transition: top 0.18s var(--ease);
}
.skip:focus { top: 12px; }
.mono { font-family: var(--font-mono); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--read { max-width: calc(46rem + 2 * var(--gutter)); }
.block { margin-top: var(--block); }

/* the page ground: a soft wash of the logo's aqua running the full
   length of every page, with a stronger glow at the top left and a
   second one under the footer, so the canvas never reads as flat white */
.wash {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 1000px at 0% 0%, rgba(96, 194, 194, 0.40) 0%, rgba(96, 194, 194, 0) 100%),
    radial-gradient(55% 800px at 100% 0%, rgba(57, 143, 163, 0.14) 0%, rgba(57, 143, 163, 0) 100%),
    radial-gradient(60% 900px at 100% 45%, rgba(96, 194, 194, 0.14) 0%, rgba(96, 194, 194, 0) 100%),
    radial-gradient(60% 900px at 0% 70%, rgba(96, 194, 194, 0.12) 0%, rgba(96, 194, 194, 0) 100%),
    radial-gradient(80% 700px at 50% 100%, rgba(96, 194, 194, 0.30) 0%, rgba(96, 194, 194, 0) 100%),
    linear-gradient(to bottom, #e6f4f3 0%, #f4fafa 18%, #f6fbfb 50%, #f1f8f8 80%, #e4f2f1 100%);
}

/* ---- type ---- */
.display {
  font-size: var(--fs-display); line-height: 1.05; letter-spacing: -0.04em;
  font-weight: 600; color: var(--ink); margin: 0;
}
.display span { display: block; text-wrap: balance; }
.display--page { font-size: var(--fs-page); line-height: 1.07; letter-spacing: -0.036em; text-wrap: balance; }
.h2 {
  font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.034em;
  font-weight: 600; color: var(--ink); margin: 0; text-wrap: balance;
}
.h3 { font-size: 1.1875rem; line-height: 1.3; letter-spacing: -0.018em; font-weight: 600; color: var(--ink); margin: 0; }
.lead { font-size: var(--fs-lead); line-height: 1.62; color: var(--body); margin: 0; }
.label { font-size: var(--fs-sm); font-weight: 600; color: var(--teal-text); margin: 0 0 20px; }
.label a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---- buttons & links ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.005em;
  font-size: var(--fs-sm); line-height: 1.2;
  padding: 13px 20px; border-radius: var(--r-sm);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.btn svg { flex: none; transition: transform 0.24s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--sm { font-size: 0.875rem; padding: 10px 16px; }
.btn--lg { font-size: 1rem; padding: 16px 26px; }
.btn--primary, .btn--cta { background: var(--navy); color: #fff; }
.btn--primary:hover, .btn--cta:hover { background: var(--navy-hover); }
.btn--ghost { background: var(--white); color: var(--navy); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--navy); }
.btn--aqua { background: var(--aqua); color: var(--navy-deep); }
.btn--aqua:hover { background: #82d1d0; }
.btn--onDark { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.32); }
.btn--onDark:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.6); }

.link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: var(--fs-sm); color: var(--navy);
  text-decoration: underline; text-decoration-color: var(--line-2);
  text-underline-offset: 6px; text-decoration-thickness: 1px;
  transition: text-decoration-color 0.18s var(--ease);
}
.link svg { transition: transform 0.24s var(--ease); }
.link:hover { text-decoration-color: currentColor; }
.link:hover svg { transform: translateX(4px); }

/* ============================================================
   header. Its own white bar above the page, fixed; once you scroll
   it gains a hairline and the phone/email strip folds away. Fixed
   rather than sticky so folding the strip never shifts the page.
   ============================================================ */
#top-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 8px; }

.site-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
/* a solid navy strip for the phone and email, and a solid white bar for
   the logo and menu, so the header stands apart from the page */
.util {
  height: var(--util-h); overflow: hidden; background: var(--navy-deep);
  transition: height 0.3s var(--ease), opacity 0.25s var(--ease);
}
.util .wrap { height: 100%; display: flex; align-items: center; gap: 28px; }
.util a {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.86); transition: color 0.18s var(--ease);
}
.util a:hover { color: #fff; }
.util svg { color: var(--aqua); }

.bar {
  height: var(--head-h); background: var(--white); box-shadow: 0 1px 0 var(--line);
  transition: height 0.3s var(--ease);
}
.bar .wrap { height: 100%; display: flex; align-items: center; gap: clamp(1.5rem, 3.5vw, 3rem); }
.bar__logo img { display: block; height: 42px; width: auto; transition: height 0.3s var(--ease); }
.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  position: relative; font-size: var(--fs-sm); font-weight: 500;
  color: var(--body); padding: 8px 0; transition: color 0.18s var(--ease);
}
.nav a:hover, .nav a[aria-current] { color: var(--ink); }
.nav a[aria-current]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--aqua); border-radius: 2px;
}
.bar__cta { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.bar__track { background: var(--white); color: var(--navy); border-color: var(--line-2); }
.bar__track:hover { border-color: var(--navy); }
.bar__track svg { color: var(--tile-4); }
.bar__book { background: var(--navy); color: #fff; }
.bar__book:hover { background: var(--navy-hover); }

.site-head.is-scrolled .bar { box-shadow: 0 1px 0 var(--line), 0 10px 30px -22px rgba(3, 54, 100, 0.35); }
.site-head.is-scrolled .util { height: 0; opacity: 0; }
.site-head.is-scrolled .bar { height: 66px; }
.site-head.is-scrolled .bar__logo img { height: 38px; }
.site-head.menu-open { background: var(--white); box-shadow: 0 1px 0 var(--line); }

.menu-btn {
  display: none; align-items: center; gap: 10px;
  font: 600 0.875rem/1 var(--font-sans); color: var(--navy);
  background: none; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 10px 13px; cursor: pointer;
}
.menu-btn i { position: relative; width: 16px; height: 10px; display: block; }
.menu-btn i::before, .menu-btn i::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px;
  background: currentColor; border-radius: 1px;
  transition: transform 0.25s var(--ease), top 0.25s var(--ease);
}
.menu-btn i::before { top: 1px; }
.menu-btn i::after { top: 7.5px; }
.menu-btn[aria-expanded="true"] i::before { top: 4.25px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] i::after { top: 4.25px; transform: rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 90; background: var(--white);
  padding: calc(var(--util-h) + var(--head-h) + 12px) var(--gutter) 32px;
  display: flex; flex-direction: column; gap: 28px; overflow-y: auto;
}
.menu[hidden] { display: none; }
.menu nav a {
  display: block; padding: 14px 0; border-bottom: 1px solid var(--line);
  font-size: 1.625rem; font-weight: 600; letter-spacing: -0.03em; color: var(--ink);
}
.menu nav a[aria-current] { color: var(--teal-text); }
.menu .btn { align-self: flex-start; }
.menu__contact { margin: 0; display: grid; gap: 6px; font-family: var(--font-mono); font-size: 0.9375rem; }

/* ============================================================
   the top of every page: straight on the page, on the aqua glow
   ============================================================ */
.top { position: relative; padding: clamp(2.75rem, 7vw, 6rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.top .display .accent { color: var(--tile-4); }   /* 3.7:1, for display sizes only */

/* home: text on the left, the lab photograph on the right */
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 5vw, 4rem); align-items: center;
}
.hero .display { font-size: clamp(2.5rem, 1.6rem + 2.2vw, 3.25rem); }
.hero .lead { margin: 26px 0 36px; max-width: 30em; }
.hero__cta { display: flex; align-items: center; gap: 18px 30px; flex-wrap: wrap; }
.hero__media {
  /* the photograph's own proportions, so it is shown whole */
  position: relative; overflow: hidden; margin: 0; background: var(--tile-2);
  aspect-ratio: 319 / 168; border-radius: var(--r-xl);
  box-shadow: 0 50px 90px -55px rgba(3, 54, 100, 0.6);
}
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* contact: the direct line sits at the top */
.top__split {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: end;
}
.direct { display: grid; gap: 4px; }
.direct__big { font-family: var(--font-mono); font-weight: 600; font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.5rem); letter-spacing: -0.03em; color: var(--ink); }
.direct__mid { font-family: var(--font-mono); font-size: 1rem; color: var(--ink); }
.direct small { margin-top: 10px; font-size: 0.875rem; color: var(--muted); }
.direct a:hover { color: var(--teal-text); }

.page-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 26px; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--muted); }

/* ============================================================
   on the page
   ============================================================ */
/* who we work with: a slow strip, read like a row of client logos */
.sectors { margin-top: clamp(2rem, 4vw, 3.25rem); }
.sectors__band {
  padding: 28px 0 30px; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
}
.sectors__lab { margin: 0 0 18px; text-align: center; font-size: 0.875rem; font-weight: 600; color: var(--muted); }
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.marquee__track { display: flex; width: max-content; }
.marquee ul { display: flex; list-style: none; margin: 0; padding: 0; }
.marquee li {
  display: inline-flex; align-items: center; gap: 12px; white-space: nowrap;
  padding-right: clamp(3rem, 6vw, 5rem);
  font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; color: var(--muted);
}
.marquee li svg { flex: none; color: var(--tile-4); }
@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: marquee 42s linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* with reduced motion it is simply a still, centred list */
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__track { width: auto; justify-content: center; }
  .marquee ul { flex-wrap: wrap; justify-content: center; row-gap: 10px; }
  .marquee li { padding: 0 1.5rem; }
  .marquee ul[aria-hidden] { display: none; }
}

.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px 32px; flex-wrap: wrap; }

/* what we do: centred heading, three columns split by fine dividers */
.wwd .wrap { text-align: center; }
.wwd__more { margin: clamp(2.75rem, 5vw, 3.75rem) 0 0; }
.pillars {
  list-style: none; margin: clamp(3rem, 6vw, 4.5rem) 0 0; padding: 0; text-align: left;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pillar { position: relative; padding: 0 clamp(1.5rem, 4vw, 3.5rem); }
.pillar:first-child { padding-left: 0; }
.pillar:last-child { padding-right: 0; }
.pillar + .pillar::before {
  content: ""; position: absolute; left: 0; top: 64px; bottom: 6px; width: 1px; background: var(--line-2);
}
.pillar__ic {
  display: grid; place-content: center; width: 60px; height: 60px; margin-bottom: 30px;
  border-radius: 50%; background: var(--navy-deep); color: var(--aqua);
}
.pillar__ic svg, .box .pillar__ic svg, .reach__card .pillar__ic svg { stroke-width: 2.2; }
.pillar h3 { margin: 0 0 10px; font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.026em; font-weight: 650; color: var(--ink); }
.pillar p { margin: 0; font-size: 1.0625rem; line-height: 1.6; max-width: 24em; color: var(--ink-700); }

/* navy panels further down the page */
.panel {
  position: relative; border-radius: var(--r-xl); padding: clamp(2.25rem, 6vw, 4.75rem);
  background: var(--navy-deep); color: var(--on-navy); overflow: hidden;
}
.panel .h2 { color: #fff; }
.panel .lead { color: var(--on-navy); }
.panel--close { background: linear-gradient(125deg, var(--navy-deep) 0%, var(--tile-1) 55%, var(--tile-2) 100%); }

.guar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.5rem, 6vw, 5rem); align-items: center; }
.guar__pct {
  margin: 0; font-weight: 600; color: var(--aqua);
  font-size: clamp(4.5rem, 2.5rem + 7vw, 8.5rem); line-height: 0.9; letter-spacing: -0.055em;
}
.guar .lead { margin-top: 16px; max-width: 30em; }

.cards {
  list-style: none; margin: clamp(2.25rem, 4vw, 3rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.25rem);
}
.card a { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.card__txt { display: flex; flex-direction: column; gap: 10px; }
.cards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* a single post: one wide card, picture left and words right */
.cards--one { grid-template-columns: minmax(0, 1fr); }
.cards--one .card a { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px clamp(2rem, 4vw, 3.5rem); align-items: center; }
.cards--one .cover { margin: 0; }
.cards--one .card b { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -0.03em; }
.cards--one .card p { font-size: 1.0625rem; }
.cover {
  position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; margin-bottom: 8px;
  border-radius: 16px; overflow: hidden; color: rgba(255, 255, 255, 0.92);
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--tile-2) 100%);
}
.cover--2 { background: linear-gradient(135deg, var(--tile-1) 0%, var(--tile-4) 100%); }
.cover--3 { background: linear-gradient(135deg, var(--tile-2) 0%, var(--tile-5) 100%); }
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover img, .cover svg { transition: transform 0.6s var(--ease); }
.card a:hover .cover img, .card a:hover .cover svg { transform: scale(1.05); }
.card time { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--teal-text); }
.card b { font-size: 1.1875rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.018em; color: var(--ink); transition: color 0.18s var(--ease); }
.card p { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.card a:hover b { color: var(--teal-text); }
.post-photo { margin: 0 auto; }
.post-photo img { display: block; width: 100%; border-radius: 16px; }

.close { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.close .lead { margin: 16px 0 32px; }
.close__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.close__direct { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 32px 0 0; font-family: var(--font-mono); font-size: 0.9375rem; color: #fff; }
.close__direct a:hover { color: var(--aqua); }
.close__art { justify-self: end; width: min(100%, 380px); margin: -1rem -0.5rem -2rem 0; }
.close__art svg { display: block; width: 100%; height: auto; }

/* ---- services ---- */
.scale { margin-top: clamp(2.75rem, 6vw, 4.5rem); }
.scale__bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: clamp(56px, 6vw, 80px); border-radius: 8px; overflow: hidden; }
.scale__seg--deep    { background: #1b4f7a; }
.scale__seg--frozen  { background: var(--tile-3); }
.scale__seg--refrig  { background: var(--tile-5); }
.scale__seg--ambient { background: var(--aqua-200); }
.scale__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.scale__col { padding: 18px 26px 0 0; }
.scale__v { display: block; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); font-weight: 600; color: var(--aqua); }
.scale__col h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; color: #fff; margin: 8px 0 6px; }
.scale__col p { margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: #a9bfd2; max-width: 24ch; }
@media (prefers-reduced-motion: no-preference) {
  .js .scale .scale__bar { clip-path: inset(0 100% 0 0); }
  .js .scale.in .scale__bar { clip-path: inset(0 0 0 0); transition: clip-path 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.12s; }
}

.svc-list { margin-top: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--line); }
.svc {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 8px clamp(2rem, 5vw, 4rem);
  align-items: baseline; padding: clamp(1.5rem, 3vw, 2.125rem) 0; border-top: 1px solid var(--line);
  scroll-margin-top: 96px;
}
.svc .h3 { font-size: 1.375rem; letter-spacing: -0.025em; }
.svc p { margin: 0; font-size: 1.0625rem; }
.svc .link { margin-top: 12px; }

/* ---- boxed cards with an icon: services and contact ---- */
.boxes {
  list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem);
}
.box {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(1.75rem, 3vw, 2.25rem); background: var(--white);
  border: 1px solid var(--line); border-radius: 20px; scroll-margin-top: 110px;
  box-shadow: 0 24px 50px -40px rgba(3, 54, 100, 0.45);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.box:hover { border-color: var(--line-2); box-shadow: 0 28px 60px -38px rgba(3, 54, 100, 0.5); }
.box .pillar__ic { margin-bottom: 24px; }
.box h3 { margin: 0 0 8px; font-size: 1.375rem; line-height: 1.3; letter-spacing: -0.024em; font-weight: 650; color: var(--ink); }
.box p { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-700); }
.card__more { margin-top: auto; padding-top: 22px; }
.btn.card__more { margin-top: 24px; padding-top: 13px; }
.box .btn.card__more { margin-top: auto; }
.box p + .btn.card__more { margin-top: 24px; }

/* contact: call and email, side by side */
.reach { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.reach__card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: clamp(1.75rem, 3.5vw, 2.75rem); border-radius: 20px;
  background: var(--white); border: 1px solid var(--line); color: var(--body);
  box-shadow: 0 24px 50px -40px rgba(3, 54, 100, 0.45); transition: border-color 0.2s var(--ease);
}
.reach__card:hover { border-color: var(--line-2); }
.reach__card .pillar__ic { margin-bottom: 22px; }
.reach__card--navy { background: linear-gradient(125deg, var(--navy-deep) 0%, var(--tile-1) 60%, var(--tile-2) 100%); border-color: transparent; color: var(--on-navy); }
.reach__card--navy .pillar__ic { background: rgba(255, 255, 255, 0.1); }
.reach__lb { font-size: 0.875rem; font-weight: 600; color: var(--teal-text); }
.reach__card--navy .reach__lb { color: var(--aqua-300); }
.reach__big { font-family: var(--font-mono); font-weight: 600; font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.375rem); letter-spacing: -0.03em; color: var(--ink); word-break: break-word; }
.reach__big--sm { font-size: clamp(0.875rem, 0.6rem + 1.2vw, 1.5rem); word-break: normal; overflow-wrap: anywhere; }
.reach__card--navy .reach__big { color: #fff; }
.reach__sm { margin-top: 6px; font-size: 0.9375rem; }

/* ---- privacy policy ---- */
.policy { padding-top: 1rem; }
.policy h2 {
  margin: 3rem 0 0.875rem; padding-top: 1.75rem; border-top: 1px solid var(--line);
  font-size: 1.375rem; scroll-margin-top: 110px;
}
.policy h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.policy h3 { margin: 1.5rem 0 0.5rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.policy p, .policy li { font-size: 1rem; }
.policy .toc {
  margin-bottom: 3rem; padding: clamp(1.5rem, 3vw, 2rem); background: var(--white);
  border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 24px 50px -40px rgba(3, 54, 100, 0.45);
}
.policy .toc h4 { margin: 0 0 14px; font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.policy .toc ol { margin: 0; padding-left: 1.25rem; columns: 2; column-gap: 2rem; }
.policy .toc li { margin-bottom: 0.5rem; font-size: 0.9375rem; break-inside: avoid; }
.policy .toc li::marker { color: var(--muted); font-family: var(--font-mono); font-size: 0.8125rem; }
.policy .toc a:not(.btn):not(.link) { text-decoration: none; }
.policy .toc a:not(.btn):not(.link):hover { text-decoration: underline; }
.policy table { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1.25rem; font-size: 0.9375rem; }
.policy th, .policy td { text-align: left; padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.policy th { font-size: 0.8125rem; font-weight: 600; color: var(--ink); border-bottom-color: var(--line-2); }
.policy tbody tr:last-child td { border-bottom: 0; }
.policy .scroll { overflow-x: auto; }
.policy .callout {
  padding: 18px 20px; border: 1px solid var(--aqua-200); border-left: 3px solid var(--aqua);
  border-radius: 12px; background: var(--aqua-50); font-size: 0.9375rem;
}
.policy .contact {
  margin-top: 0.5rem; padding: 22px 24px; background: var(--white);
  border: 1px solid var(--line); border-radius: 16px;
}
.policy .contact .mono { font-size: 0.875rem; color: var(--body); }
@media (max-width: 680px) { .policy .toc ol { columns: 1; } }

/* ---- track a shipment ---- */
.trk { max-width: calc(46rem + 2 * var(--gutter)); }
.trk-search {
  margin-top: clamp(2rem, 4vw, 2.75rem); padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--white); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 24px 50px -40px rgba(3, 54, 100, 0.45);
}
.trk-search__lb { display: block; margin-bottom: 10px; font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.trk-search__row { display: flex; gap: 10px; }
.trk-search input {
  flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 1.0625rem; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 14px 16px; color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--aqua-50);
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease);
}
.trk-search input::placeholder { color: var(--muted); }
.trk-search input:focus { outline: none; border-color: var(--tile-4); background: var(--white); box-shadow: 0 0 0 3px rgba(57, 143, 163, 0.18); }
.trk-search .btn:disabled { opacity: 0.6; cursor: not-allowed; }
.trk-hint { margin: 14px 0 0; font-size: 0.8125rem; color: var(--muted); }
.trk-hint b { font-family: var(--font-mono); font-weight: 600; color: var(--body); white-space: nowrap; }
#result { margin-top: 18px; }
.trk-panel {
  padding: clamp(1.5rem, 3vw, 2rem); background: var(--white); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 24px 50px -40px rgba(3, 54, 100, 0.45);
}
.trk-panel__code { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.trk-panel__code .cd { font-family: var(--font-mono); font-size: 1rem; font-weight: 600; color: var(--ink); letter-spacing: 0.03em; }
.trk-panel__code .cd span { display: block; margin-bottom: 3px; font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.trk-pill { font-size: 0.8125rem; font-weight: 600; padding: 6px 13px; border-radius: 999px; white-space: nowrap; }
.trk-pill--awaiting_collection { background: var(--aqua-100); color: var(--teal-text); }
.trk-pill--in_transit { background: #e3edf8; color: var(--navy); }
.trk-pill--delivered { background: #d9f0e4; color: #1f7a52; }
.trk-steps { display: flex; align-items: flex-start; margin: 6px 0 4px; }
.trk-step { flex: 1; text-align: center; position: relative; }
.trk-step .dot {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin: 0 auto 12px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--line); color: var(--muted); font-weight: 700; font-size: 0.9375rem;
}
.trk-step .lbl { font-size: 0.875rem; font-weight: 600; color: var(--muted); line-height: 1.3; }
.trk-step .ts { margin-top: 5px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); }
.trk-step .bar { position: absolute; top: 19px; left: -50%; width: 100%; height: 2px; background: var(--line); }
.trk-step:first-child .bar { display: none; }
.trk-step.done .dot { background: var(--tile-3); border-color: var(--tile-3); color: #fff; }
.trk-step.done .lbl { color: var(--ink); }
.trk-step.done .bar { background: var(--tile-3); }
.trk-step.current .dot { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 0 0 5px rgba(3, 54, 100, 0.12); }
.trk-step.current .lbl { color: var(--ink); }
.trk-err { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 16px; border-radius: var(--r-sm); background: #fdf1ed; color: #a3301a; font-size: 0.9375rem; }
.trk-err svg { flex-shrink: 0; }
.trk-help { margin: 22px 0 0; font-size: 0.9375rem; }
.trk-help a { color: var(--teal-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---- contact ---- */
.opts { border-bottom: 1px solid var(--line); }
.opt {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 40px; align-items: center;
  padding: clamp(1.5rem, 3vw, 2.125rem) 0; border-top: 1px solid var(--line);
}
.opt p { margin: 6px 0 0; max-width: 34em; }
.office { display: flex; flex-wrap: wrap; gap: 20px 56px; margin-top: clamp(2.5rem, 5vw, 3.5rem); font-size: var(--fs-sm); }
.office p { margin: 0 0 4px; font-weight: 600; color: var(--ink); }
.office address { font-style: normal; }
.office a:hover { color: var(--teal-text); }

.prose { padding-top: clamp(2.5rem, 5vw, 3.5rem); }
.prose p, .prose li { font-size: 1.0625rem; line-height: 1.75; }
.prose p { margin: 0 0 1.25rem; }
.prose h2 { font-size: 1.375rem; line-height: 1.3; letter-spacing: -0.022em; font-weight: 600; color: var(--ink); margin: 2.5rem 0 0.875rem; }
.prose ul { margin: 0 0 1.25rem; padding-left: 1.25rem; }
.prose li { margin-bottom: 0.5rem; }
.prose li::marker { color: var(--tile-4); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a:not(.btn):not(.link) { color: var(--teal-text); text-decoration: underline; text-underline-offset: 3px; }
.prose a:not(.btn):not(.link):hover { color: var(--navy); }
.prose figure { margin: 2rem 0; }
.prose figure img { display: block; width: 100%; border-radius: 14px; }
.prose figcaption { margin-top: 10px; font-size: 0.875rem; color: var(--muted); }
.callout { border-left: 3px solid var(--aqua); padding: 4px 0 4px 20px; margin: 1.75rem 0; }
.callout p { margin: 0; }
.callout .mono { font-size: 1.125rem; font-weight: 600; color: var(--ink); }
.post-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.share { display: inline-flex; align-items: center; gap: 10px; font-size: 0.875rem; color: var(--muted); }
.share a { display: inline-grid; place-content: center; width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: var(--r-sm); color: var(--navy); transition: border-color 0.18s var(--ease); }
.share a:hover { border-color: var(--navy); }

/* ============================================================
   motion. Load: the top of the page rises in, the temperature key
   draws across. Scroll: sections ease in once. Nothing loops except
   the sector strip, and none of it runs with reduced motion on.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .js .anim { animation: rise 0.9s var(--ease) both; animation-delay: calc(var(--d, 0) * 0.1s); }
  .js .reveal {
    opacity: 0; transform: translateY(18px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
    transition-delay: calc(var(--d, 0) * 0.09s);
  }
  .js .reveal.in { opacity: 1; transform: none; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ============================================================
   footer
   ============================================================ */
.foot { margin-top: var(--block); padding: 0 0 28px; }
.foot__grid {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(2rem, 4vw, 3.5rem); padding-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--line);
}
.foot__logo { display: block; height: 40px; width: auto; }
.foot__tag { margin: 18px 0 0; max-width: 30ch; font-size: var(--fs-sm); }
.foot__social { display: inline-flex; margin-top: 20px; color: var(--navy); transition: color 0.16s var(--ease); }
.foot__social:hover { color: var(--teal-text); }
.foot__h { margin: 0 0 16px; font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: var(--fs-sm); }
.foot ul a:hover, .foot address a:hover { color: var(--teal-text); }
.foot address { font-style: normal; font-size: var(--fs-sm); line-height: 1.8; }
.foot address b { color: var(--ink); font-weight: 600; }
.foot address .mono { font-size: 0.875rem; }
.foot__bottom {
  display: flex; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap;
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 22px; border-top: 1px solid var(--line);
  font-size: 0.8125rem; color: var(--muted);
}
.foot__bottom .r { display: flex; gap: 20px; flex-wrap: wrap; }
.foot__bottom a:hover { color: var(--navy); }
.foot__hours { font-family: var(--font-mono); font-size: 0.75rem; }

/* ============================================================
   responsive
   ============================================================ */
@media (max-width: 1080px) {
}
@media (max-width: 960px) {
  .boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .nav, .bar__track { display: none; }
  .menu-btn { display: inline-flex; }
  .guar, .close, .top__split { grid-template-columns: minmax(0, 1fr); }
  .close__art { justify-self: start; width: min(100%, 280px); margin: 0; }
  .scale__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .pillars { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pillar, .pillar:first-child, .pillar:last-child { padding: 28px 0; }
  .pillar + .pillar { border-top: 1px solid var(--line-2); }
  .pillar + .pillar::before { display: none; }
  .pillar__ic { margin-bottom: 20px; }
  .scale__bar { display: none; }
  .scale__col { padding: 2px 0 2px 16px; border-left: 3px solid; }
  .scale__col--deep    { border-color: #2a6595; }
  .scale__col--frozen  { border-color: var(--tile-3); }
  .scale__col--refrig  { border-color: var(--tile-5); }
  .scale__col--ambient { border-color: var(--aqua-200); }
  .svc { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  :root { --util-h: 36px; --head-h: 64px; --r-xl: 22px; }
  .util .util__mail { display: none; }
  .bar__logo img { height: 36px; }
  .site-head.is-scrolled .bar { height: 60px; }
  .site-head.is-scrolled .bar__logo img { height: 34px; }
  .opt { grid-template-columns: minmax(0, 1fr); }
  .opt .btn { justify-self: start; }
  .foot__grid { grid-template-columns: minmax(0, 1fr); }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .boxes, .reach { grid-template-columns: minmax(0, 1fr); }
  .cards--one .card a { grid-template-columns: minmax(0, 1fr); }
  .trk-search__row { flex-direction: column; }
  .trk-step .lbl { font-size: 0.75rem; }
}
@media (max-width: 560px) {
  .scale__cols { grid-template-columns: minmax(0, 1fr); }
  .bar__cta .btn { padding: 9px 12px; font-size: 0.8125rem; }
  .menu-btn { padding: 9px 11px; }
  .hero__cta .btn { flex: 1 1 auto; }
}
@media (max-width: 380px) {
  .bar__logo img { height: 32px; }
  .menu-btn span { display: none; }
}

/* ============================================================
   booking / enquiry / contact popups. Class names are load-bearing
   for site.js, so they are kept; only the styling is new.
   ============================================================ */
.qm-ovl {
  position: fixed; inset: 0; z-index: 150;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 5vh, 48px) 16px; overflow-y: auto;
  background: rgba(6, 26, 46, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: qm-fade 0.2s var(--ease);
}
@keyframes qm-fade { from { opacity: 0; } to { opacity: 1; } }
.qm {
  width: 100%; max-width: 780px; background: var(--white);
  border-radius: 20px; box-shadow: 0 40px 90px -30px rgba(6, 26, 46, 0.6);
  animation: qm-rise 0.28s var(--ease);
  /* the dialog scrolls internally, so the header stays put without
     position:sticky pinning against the overlay's scrollport */
  display: flex; flex-direction: column;
  max-height: calc(100dvh - 2 * clamp(16px, 5vh, 48px)); overflow: hidden;
}
@keyframes qm-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .qm-ovl, .qm { animation: none; } }

.qm__submit { margin-top: 22px; width: 100%; }
.qm__head {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 22px; border-bottom: 1px solid var(--line); background: var(--aqua-50);
}
.qm__brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.qm__brand img { height: 30px; width: auto; display: block; }
.qm__pill {
  font-size: 0.8125rem; font-weight: 600; color: var(--teal-text);
  padding-left: 14px; border-left: 1px solid var(--line-2); white-space: nowrap;
}
.qm__x {
  width: 36px; height: 36px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--white); color: var(--body);
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none;
  transition: background 0.16s var(--ease), color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.qm__x:hover { background: var(--aqua-50); color: var(--ink); border-color: var(--line-2); }

.qm__body { padding: 26px 22px 24px; overflow-y: auto; flex: 1 1 auto; }
@media (min-width: 560px) { .qm__body { padding: 30px 28px 28px; } }

.qm__title { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); margin: 0 0 8px; line-height: 1.15; }
.qm__sub { font-size: 0.90625rem; color: var(--body); margin: 0 0 24px; line-height: 1.6; }
.qm__sub strong { font-weight: 600; color: var(--ink-700); }

.qm__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.qm__f label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--ink-700); margin-bottom: 7px; }
.qm__sel, .qm__inp {
  width: 100%; height: 46px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--white); padding: 0 14px;
  font-family: var(--font-sans); font-size: 0.9375rem; color: var(--ink);
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.qm__sel {
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23617486' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center;
  padding-right: 38px; appearance: none; -webkit-appearance: none; cursor: pointer;
}
.qm__inp::placeholder { color: var(--muted); }
.qm__sel:focus, .qm__inp:focus { outline: none; border-color: var(--tile-4); box-shadow: 0 0 0 3px rgba(57, 143, 163, 0.18); }
.qm__area { height: auto; min-height: 64px; padding: 11px 14px; line-height: 1.55; resize: vertical; }
.qm__area--tall { min-height: 124px; }
.qm__full { grid-column: 1 / -1; }

.qm__grp {
  font-size: 0.875rem; font-weight: 600; color: var(--ink);
  margin: 28px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}

.qm__consent { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.qm__consent label { display: flex; align-items: flex-start; gap: 11px; font-size: 0.8125rem; color: var(--body); line-height: 1.5; cursor: pointer; }
/* a real checkbox, not the browser default */
.qm__consent input {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; margin: 1px 0 0; flex: none;
  border: 1px solid var(--line-2); border-radius: 4px; background: var(--white);
  cursor: pointer; display: grid; place-content: center;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease);
}
.qm__consent input::before {
  content: ""; width: 10px; height: 10px; transform: scale(0);
  transition: transform 0.16s var(--ease); box-shadow: inset 1em 1em #fff;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.qm__consent input:checked { background: var(--navy); border-color: var(--navy); }
.qm__consent input:checked::before { transform: scale(1); }
.qm__consent a { color: var(--teal-text); text-decoration: underline; text-underline-offset: 2px; }
.qm__req { color: var(--muted); }

.qm__err {
  display: block; margin: 16px 0 0; font-size: 0.8125rem; color: #a3301a; line-height: 1.45;
  background: #fdf1ed; border: 1px solid #f5d3c8; border-radius: var(--r-sm); padding: 11px 13px;
}
.qm__err svg { color: #a3301a; vertical-align: -2px; margin-right: 7px; }

/* Block, not flex: these strings contain inline links and trailing
   punctuation, which flex would break into separate items with gaps. */
.qm__pricenote, .qm__leadnote { display: block; margin: 16px 0 0; font-size: 0.8125rem; color: var(--muted); line-height: 1.5; }
.qm__pricenote svg, .qm__leadnote svg { color: var(--tile-4); vertical-align: -2px; margin-right: 7px; }
.qm__pricenote a { color: var(--teal-text); text-decoration: underline; text-underline-offset: 2px; }

/* honeypot: off-screen rather than display:none, which some bots skip */
.qm__hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

.qm--enq { max-width: 580px; }
.qm--sm { max-width: 470px; }

.cx {
  display: flex; align-items: center; gap: 14px; padding: 15px 17px; margin-top: 12px;
  border: 1px solid var(--line); border-radius: 12px; color: inherit;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease);
}
.cx:hover { border-color: var(--tile-4); background: var(--aqua-50); }
.cx__ic {
  width: 40px; height: 40px; border-radius: 10px; background: var(--aqua-100); color: var(--teal-text);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.cx b { display: block; font-size: 0.9375rem; font-weight: 600; color: var(--ink); word-break: break-word; }
.cx small { display: block; font-size: 0.78125rem; color: var(--muted); margin-top: 2px; }
.cx__hours { margin: 20px 0 0; font-size: 0.8125rem; color: var(--muted); line-height: 1.55; }

.qm__donebox { margin-top: 4px; background: var(--aqua-50); border: 1px solid var(--aqua-200); border-radius: 14px; padding: 26px; }
.qm__doneic {
  width: 46px; height: 46px; border-radius: 50%; background: var(--white); border: 1px solid var(--aqua-200);
  color: var(--tile-3); display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.qm__donebox h4 { margin: 0 0 8px; font-size: 1.1875rem; color: var(--ink); letter-spacing: -0.02em; font-weight: 600; }
.qm__donebox p { margin: 0; font-size: 0.90625rem; color: var(--teal-800); line-height: 1.65; }

/* a disabled CTA should read as inert, not as a half-loaded button */
.btn[disabled], .btn:disabled {
  background: var(--line); color: var(--muted); border-color: var(--line); box-shadow: none; cursor: not-allowed;
}
.btn[disabled]:hover, .btn:disabled:hover { background: var(--line); }
.btn[disabled] svg, .btn:disabled svg { transform: none; }

/* These live at the end deliberately: an override placed earlier loses to
   `.qm__grid { grid-template-columns: 1fr 1fr }` on source order and the
   booking form stays two-up on a phone. */
@media (max-width: 640px) {
  .qm__grid { grid-template-columns: 1fr; }
  .qm__title { font-size: 1.3125rem; }
  .qm__body { padding: 22px 18px 20px; }
  .qm__head { padding: 14px 16px; }
  .qm__brand img { height: 26px; }
  .qm__pill { display: none; }
}