/* ==========================================================================
   PLATEAUS LTD - site.css
   Shared styles for all four pages.

   PHONE FIRST. Every base rule below is the 360px rule. Wider screens are
   handled by min-width media queries further down each block, never the
   other way round.

   Tailwind (CDN) is used for layout utilities only - grid, flex, spacing,
   max-width. Everything visual lives here, so the two never fight over the
   same property. Do not put a Tailwind colour or display utility on an
   element that already carries one of the component classes below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  --white: #FFFFFF;
  --page:  #F7F9FB;
  --navy:  #152238;
  --sky:   #00ADEF;
  --sky-d: #0090C9;
  --red:   #ED1C24;
  --line:  #E4E7EC;
  --grey:  #52606D;
  --ph:    #EEF2F6;
  --ph-ink:#8B95A5;

  --r: 12px;
  --head-h: 3.75rem;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* Clearance kept at the foot of every page so the floating contact pill
     never comes to rest on top of a card. */
  --pill-space: 4.75rem;
}
@media (min-width: 1024px) { :root { --head-h: 4.5rem; } }

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--white);
  color: var(--navy);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: .9375rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  /* Safety net against sideways scroll at 360px. `clip` rather than `hidden`
     so the sticky header keeps working. */
  overflow-x: clip;
}
@media (min-width: 768px) { body { font-size: 1rem; } }

h1, h2, h3, h4, p, dl, dd, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

[hidden] { display: none !important; }

[id] { scroll-margin-top: calc(var(--head-h) + .75rem); }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
  border-radius: 4px;
}

.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;
}
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; }
.skip:focus {
  left: 0; margin: .5rem; padding: .75rem 1rem;
  background: var(--white); color: var(--navy);
  border: 1px solid var(--line); border-radius: var(--r);
}

/* --------------------------------------------------------------------------
   3. TYPE
   -------------------------------------------------------------------------- */
/* Capped so the h1 never runs past four lines on a 360px screen. */
.h1 { font-size: clamp(1.4rem, 7.2vw, 3.25rem); font-weight: 700; letter-spacing: -.022em; line-height: 1.16; }
.h2 { font-size: clamp(1.25rem, 5.6vw, 2.25rem); font-weight: 700; letter-spacing: -.02em;  line-height: 1.2; }
.h3 { font-size: clamp(1.0625rem, .49vw + .95rem, 1.1875rem); font-weight: 700; letter-spacing: -.012em; line-height: 1.3; }
.h4 { font-size: clamp(.9375rem, .35vw + .86rem, 1.0625rem); font-weight: 700; letter-spacing: -.008em; line-height: 1.35; }

.lead  { font-size: 1rem; line-height: 1.6; color: var(--grey); }
@media (min-width: 768px) { .lead { font-size: 1.0625rem; } }
.meta  { font-size: .8125rem; line-height: 1.45; color: var(--grey); }
.small { font-size: .8125rem; line-height: 1.5; }
.measure { max-width: 60ch; }

.eyebrow {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sky);
}

.c-navy { color: var(--navy); }
.c-grey { color: var(--grey); }
.c-sky  { color: var(--sky); }
.c-white{ color: var(--white); }
.c-w70  { color: rgba(255, 255, 255, .72); }

.s-white { background: var(--white); }
.s-page  { background: var(--page); }
.s-navy  { background: var(--navy); color: var(--white); }

.rule { height: 1px; background: var(--line); border: 0; }

.badge {
  display: inline-block;
  padding: .25rem .5rem;
  border-radius: 999px;
  background: var(--red);
  color: var(--white);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.2;
}

/* Section rhythm */
.sec { padding-block: 3rem; }
@media (min-width: 768px)  { .sec { padding-block: 4.5rem; } }
@media (min-width: 1024px) { .sec { padding-block: 5.5rem; } }

/* The one page container. Kept here rather than as Tailwind classes so that
   elements which reflow at a breakpoint cannot lose a cascade fight. */
.wrap { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 640px)  { .wrap { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .wrap { padding-inline: 2rem; } }

/* --------------------------------------------------------------------------
   3b. HERO (landing) - photo first on a phone, side by side on a laptop
   -------------------------------------------------------------------------- */
.hero__media { height: 40vh; min-height: 190px; max-height: 340px; }
.hero__copy {
  width: 100%; max-width: 72rem; margin-inline: auto;
  padding: 1.5rem 1rem 2.5rem;
}
@media (min-width: 640px) { .hero__copy { padding-inline: 1.5rem; } }
@media (min-width: 1024px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3.5rem;
    align-items: center;
    width: 100%; max-width: 72rem; margin-inline: auto;
    padding: 4rem 2rem 4.5rem;
  }
  .hero__media { order: 2; height: auto; max-height: none; aspect-ratio: 4 / 3; border-radius: var(--r); }
  .hero__copy  { order: 1; padding: 0; max-width: none; }
  .hero--no-media { grid-template-columns: minmax(0, 44rem); }
}

/* Division page header photo, with the name sitting on it */
.pagehead { position: relative; }
.pagehead__media { height: 38vh; min-height: 210px; max-height: 380px; }
@media (min-width: 1024px) { .pagehead__media { height: 46vh; max-height: 460px; } }
.pagehead__body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding-bottom: 1.25rem;
}
@media (min-width: 768px) { .pagehead__body { padding-bottom: 2rem; } }
.pagehead--no-media { background: var(--navy); }
/* The scrim exists to keep white text readable on a photograph. With no
   photograph yet there is nothing to darken, and it just reads as a smudge on
   the grey slot - so it only applies once a real image has loaded. */
.pagehead--no-media .pagehead__media.overlay::after { content: none; }
.pagehead--no-media .pagehead__body {
  position: relative;
  padding-block: 3rem;
}
@media (min-width: 768px) {
  .pagehead--no-media .pagehead__body { padding-block: 4rem; }
}

/* "Why Plateaus" points */
.why__ico {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: none;
  border-radius: 10px;
  background: #EAF7FE; color: var(--sky);
}
.why__ico svg { width: 1.35rem; height: 1.35rem; }

/* --------------------------------------------------------------------------
   4. BUTTONS - minimum 44px tall everywhere for thumbs
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .75rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.btn svg { width: 1.05rem; height: 1.05rem; flex: none; }
.btn:active { transform: translateY(1px); }
.btn--sky     { background: var(--sky); color: var(--white); }
.btn--sky:hover     { background: var(--sky-d); }
.btn--outline { border-color: var(--line); color: var(--navy); background: var(--white); }
.btn--outline:hover { border-color: var(--sky); color: var(--sky); }
.btn--white   { background: var(--white); color: var(--navy); }
.btn--white:hover   { background: #EAF7FE; }
.btn--sm      { min-height: 44px; padding: .5rem .85rem; font-size: .8125rem; border-radius: 10px; }
.btn--block   { width: 100%; }
.btn--lg      { min-height: 56px; font-size: .9375rem; }

/* --------------------------------------------------------------------------
   5. HEADER
   -------------------------------------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-head__bar { height: var(--head-h); }

.brand { display: flex; align-items: center; gap: .5rem; min-width: 0; min-height: 44px; }
.brand img, .brand svg { height: 1.75rem; width: auto; flex: none; }
@media (min-width: 640px) { .brand img, .brand svg { height: 2rem; } }
.brand__name {
  font-size: .75rem; font-weight: 700; letter-spacing: .04em;
  white-space: nowrap; color: var(--navy);
}
@media (min-width: 640px) { .brand__name { font-size: .875rem; } }

.navlink {
  font-size: .875rem; font-weight: 500; color: var(--grey);
  padding-block: .25rem; transition: color .18s ease;
}
.navlink:hover, .navlink[aria-current="page"] { color: var(--navy); }
.navlink[aria-current="page"] { font-weight: 600; }

.nav-wide { display: none; }
@media (min-width: 960px) { .nav-wide { display: flex; } }

.burger {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--line); border-radius: 10px;
  color: var(--navy);
}
.burger svg { width: 1.15rem; height: 1.15rem; }
@media (min-width: 960px) { .burger { display: none; } }

.drawer { background: var(--white); border-bottom: 1px solid var(--line); }
.drawer a {
  display: block; padding: .9rem .25rem;
  border-bottom: 1px solid var(--line);
  font-size: .9375rem; font-weight: 500;
}
.drawer a:last-child { border-bottom: 0; }
/* The one WhatsApp item the header still allows itself, at the bottom of the
   menu where it is found rather than shouted. */
.drawer__wa { display: flex; align-items: center; gap: .5rem; color: var(--sky); font-weight: 600; }
.drawer__wa svg { width: 1.05rem; height: 1.05rem; flex: none; }
@media (min-width: 960px) { .drawer { display: none !important; } }

/* --------------------------------------------------------------------------
   6. PHOTO SLOTS AND PLACEHOLDERS
   Every image on the site sits in a .ph box. The grey placeholder underneath
   is what shows until a real photo loads, so a missing file is a designed
   state rather than a hole in the page.
   -------------------------------------------------------------------------- */
.ph { display: block; position: relative; overflow: hidden; background: var(--ph); }
.ph__fill {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .5rem; padding: .875rem;
  text-align: center; color: var(--ph-ink);
}
.ph__fill svg { width: 1.5rem; height: 1.5rem; opacity: .8; flex: none; }
.ph__cap {
  font-size: .6875rem; font-weight: 500; line-height: 1.35;
  max-width: 24ch;
}
@media (min-width: 768px) {
  .ph__fill svg { width: 1.75rem; height: 1.75rem; }
  .ph__cap { font-size: .75rem; }
}
.ph > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  /* Light touch only - a slight contrast lift, no heavy overlay. */
  filter: contrast(1.04) saturate(1.03);
  transition: opacity .45s ease;
}
.ph > img.is-ready { opacity: 1; }

.ph--4x3  { aspect-ratio: 4 / 3; }
.ph--3x2  { aspect-ratio: 3 / 2; }
.ph--1x1  { aspect-ratio: 1 / 1; }
.ph--wide { aspect-ratio: 16 / 9; }

/* Text sitting over a photograph: the gradient covers the text only, not the
   whole picture. */
.overlay { position: relative; }
.overlay::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 68%;
  background: linear-gradient(to top, rgba(21, 34, 56, .86) 0%, rgba(21, 34, 56, .5) 46%, rgba(21, 34, 56, 0) 100%);
  pointer-events: none;
}
.overlay__body { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   7. CARDS
   -------------------------------------------------------------------------- */
.card {
  display: block;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: transform .18s var(--ease), box-shadow .18s ease, border-color .18s ease;
}
.card:active { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(21, 34, 56, .35); }
@media (hover: hover) {
  .card:hover { transform: translateY(-2px); border-color: #CFD8E3; box-shadow: 0 10px 26px -16px rgba(21, 34, 56, .35); }
  .card:hover .card__go { background: var(--sky); color: var(--white); }
}
.card__body { padding: 1rem; }
@media (min-width: 768px) { .card__body { padding: 1.25rem; } }
.card__go {
  display: grid; place-items: center;
  width: 32px; height: 32px; flex: none;
  border-radius: 999px;
  background: #EAF7FE; color: var(--sky);
  transition: background-color .18s ease, color .18s ease;
}
.card__go svg { width: 1rem; height: 1rem; }

/* --------------------------------------------------------------------------
   8. SWIPE RAIL
   -------------------------------------------------------------------------- */
.rail {
  display: flex;
  gap: .75rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  padding-inline: 1rem;
  scroll-padding-inline-start: 1rem;
  padding-bottom: .25rem;
}
.rail::-webkit-scrollbar { display: none; }
@media (min-width: 640px) {
  .rail { gap: 1rem; padding-inline: 1.5rem; scroll-padding-inline-start: 1.5rem; }
}
@media (min-width: 1024px) {
  .rail {
    padding-inline: max(2rem, calc((100% - 72rem) / 2 + 2rem));
    scroll-padding-inline-start: max(2rem, calc((100% - 72rem) / 2 + 2rem));
  }
}
.rail__item {
  flex: 0 0 74vw;
  max-width: 320px;
  scroll-snap-align: start;
  text-align: left;
}
@media (min-width: 640px) { .rail__item { flex-basis: 17rem; max-width: none; } }

.railbtn {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line); border-radius: 10px;
  color: var(--navy); background: var(--white);
  transition: border-color .18s ease, color .18s ease, opacity .18s ease;
}
.railbtn svg { width: 1.05rem; height: 1.05rem; }
.railbtn:hover:not(:disabled) { border-color: var(--sky); color: var(--sky); }
.railbtn:disabled { opacity: .35; cursor: default; }
.railbtns { display: none; gap: .5rem; }
@media (min-width: 960px) { .railbtns { display: flex; } }

.swipe-hint { display: inline-flex; align-items: center; gap: .35rem; }
@media (min-width: 960px) { .swipe-hint { display: none; } }

/* --------------------------------------------------------------------------
   9. WORK GRID (division pages)
   -------------------------------------------------------------------------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
@media (min-width: 768px)  { .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 1280px) { .work-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.tile { display: block; text-align: left; }
.tile__shot { border-radius: var(--r); border: 1px solid var(--line); }
.tile__name { display: block; margin-top: .5rem; font-size: .8125rem; font-weight: 600; line-height: 1.3; }
.tile__loc  { display: block; font-size: .75rem; color: var(--grey); line-height: 1.3; }
.tile:active .tile__shot { transform: translateY(-2px); }
.tile__shot { transition: transform .18s var(--ease), border-color .18s ease; }
@media (hover: hover) {
  .tile:hover .tile__shot { transform: translateY(-2px); border-color: #CFD8E3; }
}

/* --------------------------------------------------------------------------
   10. SERVICE LIST AND CTA BAND
   -------------------------------------------------------------------------- */
.svc { display: grid; gap: .8rem; }
.svc li { display: flex; align-items: flex-start; gap: .65rem; font-weight: 500; line-height: 1.45; }
.svc li svg { width: 1.15rem; height: 1.15rem; flex: none; color: var(--sky); margin-top: .18rem; }

.cta-band { background: var(--sky); color: var(--white); }
.cta-band .btn--white:hover { background: #F0FAFF; }

/* Back link on a division page header photo */
.backlink {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px;
  font-size: .8125rem; font-weight: 600;
  color: rgba(255, 255, 255, .88);
}
.backlink svg { width: .95rem; height: .95rem; }
.backlink:hover { color: var(--white); }

/* --------------------------------------------------------------------------
   11. FORM AND CONTACT ROWS
   -------------------------------------------------------------------------- */
.label {
  display: block; margin-bottom: .35rem;
  font-size: .8125rem; font-weight: 600; color: var(--navy);
}
.field {
  width: 100%;
  min-height: 48px;
  padding: .75rem .9rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--navy);
  font-size: 1rem;                 /* 16px stops iOS zooming on focus */
  font-family: inherit;
  transition: border-color .18s ease;
}
.field:hover { border-color: #C9D2DE; }
.field::placeholder { color: #9AA5B4; }
textarea.field { resize: vertical; min-height: 120px; }

.crow {
  display: flex; align-items: center; gap: .875rem;
  min-height: 56px;
  /* The link inside now supplies the height, so the row does not need to pad
     itself out as well. */
  padding-block: .25rem;
  border-bottom: 1px solid var(--line);
}
.crow__ico {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: none;
  border-radius: 10px;
  background: #EAF7FE; color: var(--sky);
}
.crow__ico svg { width: 1.15rem; height: 1.15rem; }
/* The email and address links are real tap targets and get the full 44px. */
.crow a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.crow a:hover { color: var(--sky); }

/* --------------------------------------------------------------------------
   12. FOOTER
   -------------------------------------------------------------------------- */
.site-foot { background: var(--navy); color: var(--white); }
.site-foot a { color: rgba(255, 255, 255, .72); transition: color .18s ease; }
/* Footer navigation is a real tap target, so it gets the full 44px like every
   other link on the site. The list gap is dropped to nothing in the markup to
   stop that turning the footer into a ladder. */
.site-foot li > a:not(.social) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.site-foot a:hover { color: var(--sky); }
.social {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 10px;
  color: rgba(255, 255, 255, .8);
  transition: color .18s ease, border-color .18s ease;
}
.social svg { width: 1.05rem; height: 1.05rem; }
.social:hover { color: var(--sky); border-color: var(--sky); }

/* --------------------------------------------------------------------------
   13. LIGHTBOX
   -------------------------------------------------------------------------- */
.lb {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  background: rgba(15, 23, 40, .95);
  animation: lb-in .22s ease both;
}
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
.lb__fig {
  margin: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: 1rem;
  width: 100%; max-width: 62rem;
}
.lb__shot {
  width: 100%;
  max-height: 52vh;
  border-radius: var(--r);
  background: #1B2740;
}
@media (min-width: 768px) { .lb__shot { max-height: 66vh; } }
.lb__shot .ph__fill { color: rgba(255, 255, 255, .55); }
.lb__shot > img { object-fit: contain; }
.lb__cap { max-width: 46rem; text-align: center; color: var(--white); }
.lb__btn {
  position: absolute;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 10px;
  color: var(--white);
  transition: background-color .18s ease, border-color .18s ease;
}
.lb__btn svg { width: 1.2rem; height: 1.2rem; }
.lb__btn:hover { background: var(--sky); border-color: var(--sky); }
.lb__close { top: .75rem; right: .75rem; }
.lb__prev  { left: .5rem;  top: 50%; transform: translateY(-50%); }
.lb__next  { right: .5rem; top: 50%; transform: translateY(-50%); }
@media (min-width: 768px) { .lb__prev { left: 1.5rem; } .lb__next { right: 1.5rem; } }

/* --------------------------------------------------------------------------
   13a. HERO SLIDESHOW - the first thing a visitor sees

   A photograph of the work, cross-fading every five seconds, covering all
   three divisions. The gradient sits over the bottom third only, so the
   caption is readable without dimming the picture itself.

   It is built to stand up with no photographs at all: a slide with no image
   keeps the grey slot, its camera icon and its caption, and the slideshow
   still runs and still swipes. The six slides live in index.html as real
   markup, so the hero is never empty - not while Firestore is answering, not
   if Firestore never answers, and not with JavaScript switched off.
   -------------------------------------------------------------------------- */
.hslides { background: var(--white); }

.hslides__frame {
  position: relative;
  width: 100%;
  /* Roughly 58% of a phone screen, never shorter than 20rem, and capped at
     the 32.5rem (520px) a laptop should see. Fluid at every width in between,
     so nothing here is tied to one particular handset. */
  height: clamp(20rem, 58vh, 32.5rem);
  overflow: hidden;
  background: var(--ph);
  /* Sideways gestures belong to the slideshow, vertical ones to the page. */
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
@media (hover: hover) and (pointer: fine) {
  .hslides__frame { cursor: grab; }
  .hslides__frame.is-dragging { cursor: grabbing; }
}

/* Every slide is stacked in the same box and cross-faded. `.ph` gives it the
   grey slot, the camera icon and the image fade already used site-wide; the
   position is overridden here because the stack has to overlap. */
.hslide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .55s ease;
}
.hslide.is-on { opacity: 1; pointer-events: auto; }

/* An empty slide is a full-height grey slot, not a 3:2 one. */
.hslide.ph { aspect-ratio: auto; }
.hslide .ph__fill { justify-content: center; padding-bottom: 9rem; }
.hslide .ph__cap { max-width: 28ch; font-size: .75rem; }

/* The caption band. Its own height is what the gradient covers, which lands
   it on the bottom third and leaves the photograph above it untouched. */
.hslide__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start;
  /* The generous top padding is the gradient's run-up, not empty space. */
  padding: 3.25rem 1rem 1.25rem;
  background: linear-gradient(to top,
    rgba(9, 16, 28, .90) 0%,
    rgba(9, 16, 28, .74) 32%,
    rgba(9, 16, 28, .34) 66%,
    rgba(9, 16, 28, 0) 100%);
  color: var(--white);
}
@media (min-width: 640px)  { .hslide__cap { padding: 3.5rem 1.5rem 1.5rem; } }
@media (min-width: 1024px) {
  .hslide__cap {
    padding-inline: max(2rem, calc((100% - 72rem) / 2 + 2rem));
    padding-bottom: 1.75rem;
  }
}

.hslide__title {
  font-size: clamp(1.0625rem, 4.6vw, 1.625rem);
  font-weight: 700; letter-spacing: -.015em; line-height: 1.22;
  max-width: 24ch;
}
.hslide__desc {
  margin-top: .3rem;
  font-size: clamp(.8125rem, 3.3vw, .9375rem);
  line-height: 1.45;
  color: rgba(255, 255, 255, .88);
  max-width: 44ch;
  /* One line of description. Narrow screens are allowed a second rather than
     having the sentence cut in half. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.hslide__cta { margin-top: .85rem; max-width: 100%; }

/* Dots sit beneath the picture, on the white, where a thumb can reach them
   without covering the photograph. */
.hslides__dots { justify-content: center; padding-block: .25rem; }

/* --------------------------------------------------------------------------
   13a-ii. BUTTON ROW - wraps, never shrinks past readability

   Two buttons sit side by side wherever both still fit at a readable width,
   and stack full-width below roughly 380px instead of squeezing. `flex-basis`
   does the deciding, so it changes with the actual space available rather
   than at a breakpoint guessed in advance.
   -------------------------------------------------------------------------- */
.btnrow { display: flex; flex-wrap: wrap; gap: .75rem; }
.btnrow > * { flex: 1 1 10.5rem; min-width: 0; }

/* --------------------------------------------------------------------------
   13b. TRUST STRIP - the rotating trade ticker under the header

   The visible text starts life as the full comma-separated list, so a visitor
   with no JavaScript, or with prefers-reduced-motion set, always sees every
   trade at once. site.js collapses it to one rotating item only when motion
   is allowed. Nothing here ever fixes us to a single trade.
   -------------------------------------------------------------------------- */
.trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
}
/* The resting state is the whole list as a plain line - what a visitor with no
   JavaScript, or with reduced motion asked for, sees. A red slab of eight
   trades would be a banner, not a pill, so the pill chrome belongs only to the
   rotating single item below. */
.trust__pill {
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--navy);
}
/* Once JS takes over it is one trade at a time, and that is a pill. Light
   grey with navy text: a rotating list of the trades is information, not a
   warning, so red is kept for the one badge that means something by it. */
.trust__pill.is-ticking {
  display: inline-block;
  /* Fluid, so it cannot force a sideways scroll on a 320px screen. */
  min-width: min(13.5rem, 100%);
  padding: .3rem .7rem;
  border-radius: 999px;
  background: var(--ph);
  border: 1px solid var(--line);
  color: var(--navy);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  transition: opacity .32s ease;
}
.trust__pill.is-fading { opacity: 0; }
.trust__note { font-size: .8125rem; color: var(--grey); }

/* --------------------------------------------------------------------------
   13c. SERVICE CARD - the product-style card used on every page

   White box, hairline border, photo on top, thumbnails that swap the photo,
   an icon row, a short spec list and its own WhatsApp button. This is the
   single card design; the hero carousel and the division pages both use it.
   -------------------------------------------------------------------------- */
.scard {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.scard__shot { border-bottom: 1px solid var(--line); }
.scard__shot > img { cursor: zoom-in; }

.scard__thumbs {
  display: flex; gap: .5rem;
  padding: .625rem .875rem 0;
}
.scard__thumb {
  /* 44px tall so a thumb can hit it, and the row of four still fits inside the
     card at 360px. */
  width: 58px; height: 44px; flex: none;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--ph);
  transition: border-color .18s ease;
}
.scard__thumb > img { width: 100%; height: 100%; object-fit: cover; }
.scard__thumb[aria-current="true"] { border-color: var(--sky); box-shadow: 0 0 0 1px var(--sky); }
@media (hover: hover) { .scard__thumb:hover { border-color: var(--sky); } }

.scard__body { display: flex; flex-direction: column; padding: .875rem; }
@media (min-width: 768px) { .scard__body { padding: 1.125rem; } }
.scard__desc { margin-top: .35rem; }

/* Icon row - what the service covers, at a glance */
.scard__icons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .4rem;
  margin-top: .875rem;
}
.scard__icons li { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; }
.scard__icons svg {
  width: 34px; height: 34px; padding: 7px;
  border-radius: 9px;
  background: #EAF7FE; color: var(--sky);
}
.scard__icons span {
  font-size: .625rem; font-weight: 600; line-height: 1.2;
  color: var(--grey);
}

/* "What's included" - label on the left, value on the right */
.scard__lbl {
  margin-top: 1rem;
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--grey);
}
.scard__spec { margin-top: .4rem; }
.scard__spec > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-block: .5rem;
  border-bottom: 1px solid var(--line);
  font-size: .8125rem;
}
.scard__spec dt { color: var(--grey); }
.scard__spec dd { font-weight: 600; text-align: right; }
/* A value we have not confirmed yet is never dressed up as a fact. */
.scard__tbc { font-weight: 600; color: var(--ph-ink); font-style: italic; }

.scard__cta { margin-top: auto; padding-top: .875rem; }

/* --------------------------------------------------------------------------
   13d. HERO SERVICE CAROUSEL - swipe on touch, drag on desktop
   -------------------------------------------------------------------------- */
.svcs__rail {
  display: flex;
  gap: .75rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  padding-inline: 1rem;
  scroll-padding-inline-start: 1rem;
  padding-bottom: .25rem;
}
.svcs__rail::-webkit-scrollbar { display: none; }
@media (min-width: 640px) {
  .svcs__rail { gap: 1rem; padding-inline: 1.5rem; scroll-padding-inline-start: 1.5rem; }
}
@media (min-width: 1024px) {
  .svcs__rail {
    padding-inline: max(2rem, calc((100% - 72rem) / 2 + 2rem));
    scroll-padding-inline-start: max(2rem, calc((100% - 72rem) / 2 + 2rem));
  }
}
.svcs__rail > .scard {
  flex: 0 0 86vw;
  max-width: 25rem;
  scroll-snap-align: start;
}
@media (min-width: 640px)  { .svcs__rail > .scard { flex-basis: 21rem; max-width: none; } }
@media (min-width: 1024px) { .svcs__rail > .scard { flex-basis: 22rem; } }

/* While a pointer drag is in progress the browser must not also snap or
   select text, or the two fight each other. */
.svcs__rail.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }
.svcs__rail.is-dragging * { pointer-events: none; user-select: none; }

.svcs__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: .75rem;
}

.dots { display: flex; }
.dot {
  display: grid; place-items: center;
  width: 44px; height: 44px;      /* full 44px tap target, adjacent, no gap */
  padding: 0;
}
.dot::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 999px;
  background: #C6CFDA;
  transition: background-color .18s ease, transform .18s ease;
}
.dot[aria-current="true"]::before { background: var(--sky); transform: scale(1.45); }

/* --------------------------------------------------------------------------
   13e. FLOATING CONTACT PILL - one call to action, and only when it is needed

   It stays out of the way until the visitor has scrolled past the hero, and
   ducks out again whenever the contact section - which already carries a
   WhatsApp button - is on screen, so there is never a second one competing
   with it. Brand colours, not WhatsApp's: navy body, sky icon, white text.
   -------------------------------------------------------------------------- */
.wapill {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 60;                    /* above the sticky header (50), below the lightbox (80) */
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 48px;
  max-width: calc(100% - 2rem);   /* never wider than the screen it sits on */
  padding: .75rem 1.1rem;
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  font-size: .875rem; font-weight: 700;
  box-shadow: 0 10px 28px -10px rgba(21, 34, 56, .5);
  transition: transform .28s var(--ease), opacity .28s ease;
}
.wapill svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--sky); }
.wapill:hover { background: #0E1930; }
/* Parked: off the bottom of the screen and out of the tab order. Both the
   "not past the hero yet" and the "contact is on screen" states use this. */
.wapill--parked { transform: translateY(150%); opacity: 0; pointer-events: none; }
@media (min-width: 1024px) { .wapill { right: 1.5rem; bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); } }

/* --------------------------------------------------------------------------
   14. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rail, .svcs__rail { scroll-behavior: auto; }
  .ph > img { transition: none; opacity: 1; }
  /* The ticker never animates here; site.js leaves the full list on screen. */
  .trust__pill.is-ticking { transition: none; }
  .wapill { transition: none; }
  /* The slideshow does not advance on its own here (site.js sees to that);
     the dots still change the picture, they just change it instantly. */
  .hslide { transition: none; }
  .dot[aria-current="true"]::before { transform: none; }
  .lb { animation: none; }
  .card:active, .card:hover, .tile:hover .tile__shot, .tile:active .tile__shot,
  .btn:active { transform: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* --------------------------------------------------------------------------
   15. SMALL SHARED UTILITIES
   Replacements for what would otherwise be inline styles in the HTML.
   -------------------------------------------------------------------------- */
.band-pad { padding-block: 2.5rem; }
@media (min-width: 768px) { .band-pad { padding-block: 3rem; } }

.cta-band__sub { color: rgba(255, 255, 255, .92); }

.foot-legal { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 1.25rem; }

.ico-sm { width: .9rem; height: .9rem; }

/* --------------------------------------------------------------------------
   16. HOLDING THE LAYOUT AT EVERY WIDTH

   A flex or grid child keeps `min-width: auto` by default, which means it
   refuses to shrink below the width of its own content. That is what cuts a
   button in half at 375px while the same page looks correct at 390px: the row
   is not too narrow, the child simply will not give. Setting it to 0 lets
   every child shrink and wrap with the space it actually has, so the layout
   is fluid across 320, 360, 375, 390, 393, 402, 414 and 430px rather than
   correct at some of them and clipped at others.
   -------------------------------------------------------------------------- */
.flex > *, .grid > *,
.card__body > *, .crow > *, .svcs__foot > *, .scard__spec > div > *,
.trust > *, .hslide__cap > *, .btnrow > * {
  min-width: 0;
}

/* The exceptions: controls and icons that are a fixed size on purpose. These
   must keep that size rather than being squeezed to nothing by the rule
   above, so they are told not to shrink at all. */
.railbtn, .dot, .burger, .why__ico, .crow__ico, .social, .lb__btn,
.badge, .scard__thumb, .card__go, .brand img, .brand svg { flex: none; }

/* Long, unbroken strings - an email address, a URL - wrap instead of pushing
   the page sideways. */
.crow a, .site-foot a { overflow-wrap: anywhere; }

/* Room at the foot of the page for the floating pill, so the last card on a
   page always clears it. */
main { padding-bottom: var(--pill-space); }