/* Asset URLs are content-hashed by build.py. If these files are ever served
   with a wrong Content-Type while carrying max-age=31536000,immutable, every
   visitor caches the broken copy for a year at that URL and no invalidation
   reaches them. Changing the bytes here is what mints a new URL. */
/* ===========================================================================
   Stirling's Security Services
   Written for this site. Replaces the TemplateMo "Noir Fashion" stylesheet
   the previous build inherited, which was a clothing store template.

   Structure
     1  Tokens
     2  Reset and base
     3  Layout primitives
     4  Buttons and links
     5  Header and navigation
     6  Hero
     7  Sections and cards
     8  Prose, lists, pillars, values
     9  Quotes
    10  Forms
    11  Contact and map
    12  Footer
    13  Cookie notice
    14  Motion and print

   Mobile first. Media queries only ever step UP with min-width.
   =========================================================================== */

/* ---- 1  Tokens ---------------------------------------------------------- */

:root {
  /* Surfaces. Warm blacks rather than pure #000, which flattens on OLED. */
  --bg: #0b0b0c;
  --surface: #131316;
  --surface-2: #1a1a1e;
  --line: #26262c;
  --line-strong: #35353d;

  /* Ink */
  --text: #f2f0ec;
  --text-dim: #a2a0a8;
  --text-faint: #6f6d76;

  /* Brand. Their mark is dark with gold, so gold stays, but as brass rather
     than the template's shiny casino gradient. Used sparingly. */
  --brand: #c9a227;
  --brand-bright: #e6c455;
  --brand-dim: #8a6f1a;
  --brand-wash: rgba(201, 162, 39, 0.09);

  --danger: #e0654f;
  --ok: #4fbf7f;

  /* Type */
  --font-display: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Spacing scale */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
  --s9: 6rem;

  --radius: 10px;
  --radius-lg: 16px;
  --container: 1180px;
  --header-h: 76px;

  --shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.9);
}

/* ---- 2  Reset and base -------------------------------------------------- */

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

* { margin: 0; }

html {
  scroll-behavior: smooth;
  /* Anchors must clear the fixed header */
  scroll-padding-top: calc(var(--header-h) + var(--s5));
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 6.5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 4.2vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 2.4vw, 1.4rem); }

p { text-wrap: pretty; }

a { color: var(--brand-bright); text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--brand-bright);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--brand); color: #12100a; }

/* ---- 3  Layout primitives ----------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s5);
}

.section { padding-block: var(--s8); }
.section--tight { padding-block: var(--s7); }
.section--alt { background: var(--surface); }

.section__head { max-width: 62ch; margin-bottom: var(--s6); }
.section__head--center { margin-inline: auto; text-align: center; }

.section__title { margin-bottom: var(--s3); }

.section__lead {
  color: var(--text-dim);
  font-size: 1.05rem;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--s3);
}

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

@media (min-width: 768px) {
  .section { padding-block: var(--s9); }
  .section--tight { padding-block: var(--s8); }
}

/* ---- 4  Buttons --------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 0.85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease,
              color 0.18s ease, transform 0.18s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #14110a;
}

.btn--primary:hover { background: var(--brand-bright); border-color: var(--brand-bright); }

.btn--ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text);
}

.btn--ghost:hover { border-color: var(--brand); color: var(--brand-bright); }

.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s6);
}

/* ---- 5  Header and navigation ------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(11, 11, 12, 0.86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.site-header.is-scrolled {
  background: rgba(11, 11, 12, 0.97);
  border-bottom-color: var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  width: 100%;
}

.nav__logo { display: flex; flex-shrink: 0; }
.nav__logo img { height: 46px; width: auto; }

.nav__links {
  display: none;
  align-items: center;
  gap: var(--s5);
  list-style: none;
  padding: 0;
}

.nav__link {
  color: var(--text-dim);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  padding-block: var(--s2);
  border-bottom: 2px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.nav__link:hover { color: var(--text); }

.nav__link.is-current {
  color: var(--brand-bright);
  border-bottom-color: var(--brand);
}

/* ---- Services dropdown ----
   Opens on hover and on keyboard focus, so it works without JavaScript. */
.nav__item.has-menu { position: relative; }

.nav__caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 5px;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.2s ease;
}

.nav__menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 6px);
  min-width: 270px;
  margin: 0;
  padding: var(--s2);
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 10;
}

/* A gap between the link and the panel would close the menu as the pointer
   crosses it, so bridge it with a transparent strip. */
.nav__item.has-menu::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 14px;
}

.nav__item.has-menu:hover .nav__menu,
.nav__item.has-menu:focus-within .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 10px);
}

.nav__item.has-menu:hover .nav__caret,
.nav__item.has-menu:focus-within .nav__caret { transform: rotate(180deg); }

.nav__menu a {
  display: block;
  padding: 0.6rem 0.85rem;
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 0.9rem;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nav__menu a:hover,
.nav__menu a:focus-visible {
  background: var(--surface-2);
  color: var(--brand-bright);
}

/* Drawer grouping for the same links on mobile */
.nav__drawer-label {
  display: block;
  padding: var(--s4) var(--s2) var(--s2);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.nav__drawer a.nav__drawer-sub {
  padding-left: var(--s5);
  font-size: 0.98rem;
  color: var(--text-dim);
}

/* Burger */
.nav__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 9px;
  background: none;
  border: 0;
  cursor: pointer;
}

.nav__toggle span {
  display: block;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Drawer */
.nav__drawer {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: var(--s4) var(--s5) var(--s6);
  display: grid;
  gap: var(--s1);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
}

.nav__drawer.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.nav__drawer a {
  display: block;
  padding: var(--s3) var(--s2);
  color: var(--text);
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 500;
  border-bottom: 1px solid var(--line);
}

.nav__drawer a:last-of-type { border-bottom: 0; }
.nav__drawer .btn { margin-top: var(--s4); }

@media (min-width: 960px) {
  .nav__links { display: flex; }
  .nav__toggle { display: none; }
  .nav__drawer { display: none; }
}

/* ---- 6  Hero ------------------------------------------------------------ */

.hero {
  position: relative;
  padding-top: calc(var(--header-h) + var(--s7));
  padding-bottom: var(--s7);
  overflow: hidden;
}

/* Soft brand glow, replaces the template's spinning conic gradient */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 55% at 15% 0%, var(--brand-wash), transparent 70%),
    radial-gradient(60% 50% at 100% 20%, rgba(201, 162, 39, 0.05), transparent 70%);
  pointer-events: none;
}

.hero__grid { position: relative; display: grid; gap: var(--s7); }

.hero__title { margin-bottom: var(--s4); }
.hero__title em { font-style: normal; color: var(--brand-bright); }

.hero__lead {
  color: var(--text-dim);
  font-size: 1.08rem;
  max-width: 52ch;
}

.hero__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 3;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Slides stack; only the current one is shown */
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.hero__slide.is-active { opacity: 1; }

.hero__dots {
  position: absolute;
  left: 50%;
  bottom: var(--s4);
  transform: translateX(-50%);
  display: flex;
  gap: var(--s2);
  z-index: 2;
}

.hero__dot {
  width: 26px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.hero__dot.is-active { background: var(--brand); }

@media (min-width: 960px) {
  .hero { padding-top: calc(var(--header-h) + var(--s8)); }

  .hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
    /* Stretch, not center: a centred 4:3 image left a dead band under the
       hero because it was shorter than the text column beside it. */
    align-items: stretch;
    gap: var(--s8);
  }

  .hero__media {
    aspect-ratio: auto;
    min-height: 440px;
  }
}

/* ---- Stats -------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4) var(--s3);
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}

.stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  font-weight: 700;
  color: var(--brand-bright);
  line-height: 1;
  margin-bottom: var(--s2);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  display: block;
  font-size: 0.72rem;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---- 7  Cards ----------------------------------------------------------- */

.cards {
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.card:hover {
  border-color: var(--brand-dim);
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

/* Each service gets its own colour via a per-card --accent. This is the
   "eye catching coloured symbols" the client asked for, done as a designed
   badge rather than an emoji dropped into the markup.
   Anchored to the top edge of the body so it straddles the photo boundary. */
.card__icon {
  position: absolute;
  top: 0;
  right: var(--s5);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--accent);
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.95);
  transform: translateY(-50%);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.card__icon svg { width: 26px; height: 26px; stroke: var(--accent); }

.card:hover .card__icon {
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 10px 26px -8px var(--accent);
}

.card__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface-2); }

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.card:hover .card__media img { transform: scale(1.04); }

.card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s5);
  flex: 1;
}

.card__tag {
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  background: var(--brand-wash);
  border: 1px solid rgba(201, 162, 39, 0.25);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
}

.card__title { color: var(--text); transition: color 0.2s ease; }
.card:hover .card__title { color: var(--brand-bright); }

.card__text { color: var(--text-dim); font-size: 0.94rem; }

.card__more {
  margin-top: auto;
  padding-top: var(--s3);
  color: var(--brand);
  font-size: 0.88rem;
  font-weight: 600;
}

/* ---- 8  Prose, lists, pillars, values ----------------------------------- */

.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--s4); }
.prose h2 { margin-top: var(--s7); }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--text-dim); }
.prose strong { color: var(--text); font-weight: 600; }

.checklist {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.5;
}

.checklist li::before {
  content: '';
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--brand-wash);
  border: 1px solid var(--brand-dim);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e6c455' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 11px;
  background-repeat: no-repeat;
  background-position: center;
}

.pillars {
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

.pillar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius);
  padding: var(--s5);
}

.pillar__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--brand-bright);
  margin-bottom: var(--s2);
}

.pillar__text { color: var(--text-dim); font-size: 0.95rem; }

.values {
  display: grid;
  gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.value {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s5);
}

.value__title {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--s3);
}

.value__title svg { flex: 0 0 auto; width: 22px; height: 22px; stroke: var(--brand); }

.value__text { color: var(--text-dim); font-size: 0.92rem; }

/* Image trio used on the about page */
.gallery {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

/* ---- 9  Quotes ---------------------------------------------------------- */

.quotes {
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}

.quote {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s6) var(--s5) var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.quote__stars { color: var(--brand); font-size: 0.85rem; letter-spacing: 2px; }

.quote__text { color: var(--text); font-size: 1rem; flex: 1; }

.quote__by { display: flex; align-items: center; gap: var(--s3); }

.quote__avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--brand-wash);
  border: 1px solid var(--brand-dim);
  color: var(--brand-bright);
  font-family: var(--font-display);
  font-weight: 700;
}

.quote__name { font-weight: 600; font-size: 0.95rem; }
.quote__role { color: var(--text-faint); font-size: 0.85rem; }

/* ---- 10  Forms ---------------------------------------------------------- */

.form { display: grid; gap: var(--s4); }

.form__row { display: grid; gap: var(--s4); }

@media (min-width: 560px) {
  .form__row { grid-template-columns: 1fr 1fr; }
}

.field { display: grid; gap: var(--s2); }

.field__label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
  /* 16px minimum or iOS Safari zooms the page when the field is focused */
  font-size: 1rem;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.field textarea { resize: vertical; min-height: 130px; }

.field select { appearance: none; padding-right: 2.6rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a2a0a8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px;
}

/* The dropdown list is painted by the OS, so it needs an opaque colour */
.field select option { background: var(--surface-2); color: var(--text); }

.field input[type="date"] { color-scheme: dark; }

.field input::placeholder,
.field textarea::placeholder { color: var(--text-faint); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--surface);
}

.form__note { font-size: 0.9rem; margin-top: var(--s2); }
.form__note--ok { color: var(--ok); }
.form__note--error { color: var(--danger); }
.form__note--busy { color: var(--brand); }

.form__legend {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--brand-bright);
  margin-top: var(--s3);
}

/* ---- 11  Contact and map ------------------------------------------------ */

.contact__grid { display: grid; gap: var(--s7); }

@media (min-width: 900px) {
  .contact__grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--s8); }
}

.info { display: grid; gap: var(--s5); align-content: start; }

.info__item { display: flex; gap: var(--s4); }

.info__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--brand-wash);
  border: 1px solid rgba(201, 162, 39, 0.25);
}

.info__icon svg { width: 20px; height: 20px; stroke: var(--brand-bright); }

.info__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: var(--s1);
}

.info__text { color: var(--text-dim); font-size: 0.95rem; }
.info__text a { color: var(--brand-bright); text-decoration: none; }
.info__text a:hover { text-decoration: underline; }

.map {
  margin-top: var(--s7);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 21 / 9;
}

.map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.35) contrast(1.05); }

/* ---- 12  Footer --------------------------------------------------------- */

.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-block: var(--s8) var(--s5);
  margin-top: var(--s8);
}

.footer__grid {
  display: grid;
  gap: var(--s7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.footer__brand img { height: 54px; width: auto; margin-bottom: var(--s4); }
.footer__about { color: var(--text-dim); font-size: 0.92rem; max-width: 42ch; }

.footer__title {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: var(--s4);
}

.footer__list { list-style: none; padding: 0; display: grid; gap: var(--s3); }

.footer__list a, .footer__list span {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  color: var(--text-dim);
  font-size: 0.92rem;
  text-decoration: none;
  transition: color 0.18s ease;
}

.footer__list a:hover { color: var(--brand-bright); }
.footer__list svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 4px; stroke: var(--brand); }

/* Bullets on the services column only. The contact column shares .footer__list
   but every row there already leads with an icon, and a marker in front of that
   reads as a second bullet. */
.footer__list--bulleted a,
.footer__list--bulleted span { position: relative; padding-left: var(--s5); }

.footer__list--bulleted a::before,
.footer__list--bulleted span::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 7px;
  height: 7px;
  background: var(--brand);
  transform: rotate(45deg);
}

.social { display: flex; gap: var(--s3); margin-top: var(--s5); }

.social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--text-dim);
  transition: border-color 0.18s ease, color 0.18s ease;
}

.social a:hover { border-color: var(--brand); color: var(--brand-bright); }
.social svg { width: 17px; height: 17px; }

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  color: var(--text-faint);
  font-size: 0.82rem;
}

.footer__badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }

.footer__badges img {
  height: 34px;
  width: auto;
  border-radius: 4px;
  background: #fff;
  padding: 2px 5px;
}

.chip {
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 0.25rem 0.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

/* ---- 12b  WhatsApp float ------------------------------------------------
   Sits under the cookie notice in the stacking order and is nudged up while
   that notice is on screen, so the two never overlap on a phone. */

.wa {
  position: fixed;
  right: var(--s4);
  bottom: var(--s4);
  z-index: 150;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 56px;
  padding: 0 16px;
  border-radius: 999px;
  background: #25D366;
  color: #0b1408;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  transition: transform .2s ease, box-shadow .2s ease, gap .2s ease, padding .2s ease;
}

.wa svg { width: 26px; height: 26px; flex: 0 0 auto; }

/* The word is revealed on hover on pointer devices only, so the resting
   state stays a clean circle and never covers the page on a phone. */
.wa__label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 800;
  font-size: .95rem;
  transition: max-width .25s ease;
}

.wa:hover,
.wa:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .55);
  color: #0b1408;
}

@media (hover: hover) and (min-width: 640px) {
  .wa:hover, .wa:focus-visible { gap: 10px; }
  .wa:hover .wa__label, .wa:focus-visible .wa__label { max-width: 160px; }
}

/* While the cookie bar is up, lift the button clear of it. --cookie-h is the
   measured height of that bar, set by site.js. */
body.has-cookie .wa { bottom: calc(var(--s4) + var(--cookie-h, 0px) + var(--s3)); }

@media (min-width: 640px) {
  .wa { right: var(--s5); bottom: var(--s5); }
  body.has-cookie .wa { bottom: calc(var(--s5) + var(--cookie-h, 0px) + var(--s3)); }
}

@media print { .wa { display: none; } }

/* ---- 13  Cookie notice -------------------------------------------------- */

.cookie {
  position: fixed;
  left: var(--s4);
  right: var(--s4);
  bottom: var(--s4);
  z-index: 200;
  display: none;
  gap: var(--s4);
  align-items: center;
  flex-wrap: wrap;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: var(--s4) var(--s5);
  box-shadow: var(--shadow);
}

.cookie.is-visible { display: flex; }
.cookie p { flex: 1 1 260px; font-size: 0.88rem; color: var(--text-dim); }

@media (min-width: 640px) {
  .cookie { left: auto; right: var(--s5); bottom: var(--s5); max-width: 520px; }
}

/* ---- 14  Motion and print ----------------------------------------------- */

.skip-link {
  position: absolute;
  left: var(--s4);
  top: -100px;
  z-index: 300;
  background: var(--brand);
  color: #14110a;
  padding: var(--s3) var(--s4);
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-link:focus { top: var(--s4); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero__slide { transition: none; }
}

/* ===========================================================================
   15. Comparison table
   =========================================================================== */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.compare {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}

.compare__head,
.compare__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s1);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
}
.compare__row:last-child { border-bottom: 0; }

.compare__head { display: none; }

.compare__label {
  font-family: var(--font-display);
  font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint);
  margin-bottom: var(--s2);
}

.compare__them, .compare__us {
  display: flex; align-items: flex-start; gap: var(--s3);
  font-size: .95rem; line-height: 1.55;
}
.compare__them { color: var(--text-dim); }
.compare__us { color: var(--text); font-weight: 500; }

/* Marks are drawn, not typed, so they never depend on an icon font. */
.compare__mark {
  position: relative; flex-shrink: 0;
  width: 20px; height: 20px; margin-top: 2px;
  border-radius: 50%;
}
.compare__mark--no { background: rgba(255, 255, 255, .06); border: 1px solid var(--line-strong); }
.compare__mark--no::before, .compare__mark--no::after {
  content: ""; position: absolute; left: 5px; top: 9px;
  width: 9px; height: 1.5px; background: var(--text-faint);
}
.compare__mark--no::before { transform: rotate(45deg); }
.compare__mark--no::after { transform: rotate(-45deg); }

.compare__mark--yes { background: var(--brand); }
.compare__mark--yes::before {
  content: ""; position: absolute; left: 6px; top: 6px;
  width: 8px; height: 4px;
  border-left: 1.8px solid #14120a; border-bottom: 1.8px solid #14120a;
  transform: rotate(-45deg);
}

@media (min-width: 860px) {
  .compare__head,
  .compare__row { grid-template-columns: 1.05fr 1.35fr 1.35fr; gap: var(--s5); align-items: start; }
  .compare__head { display: grid; background: var(--surface-2); padding-block: var(--s3) var(--s3); }
  .compare__label { margin-bottom: 0; align-self: center; }
  .compare__them-head, .compare__us-head {
    font-family: var(--font-display); font-size: .78rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
  }
  .compare__them-head { color: var(--text-faint); }
  .compare__us-head { color: var(--brand); }
  /* The winning column is tinted the brand colour so the eye lands on it. The
     negative right margin pulls the tint out through the row's own padding so
     it meets the table edge instead of stopping short of it. */
  .compare__row .compare__us,
  .compare__head .compare__us-head {
    background: var(--brand-wash);
    margin: calc(var(--s4) * -1) calc(var(--s5) * -1) calc(var(--s4) * -1) 0;
    padding: var(--s4) var(--s5) var(--s4) var(--s3);
  }
  .compare__head .compare__us-head {
    margin-block: calc(var(--s3) * -1);
    padding-block: var(--s3);
  }
}

/* ===========================================================================
   16. Process
   =========================================================================== */

.process { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s6); counter-reset: none; }
@media (min-width: 780px) { .process { grid-template-columns: repeat(4, 1fr); gap: var(--s5); } }

.process__step { position: relative; padding-top: var(--s5); }
.process__step::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: var(--line);
}
.process__step::after {
  content: ""; position: absolute; top: 0; left: 0;
  width: 34px; height: 2px; background: var(--brand);
}
.process__num {
  display: block; font-family: var(--font-display); font-size: .84rem; font-weight: 700;
  letter-spacing: .14em; color: var(--brand); margin-bottom: var(--s2);
}
.process__title { font-size: 1.12rem; margin-bottom: var(--s2); }
.process__text { font-size: .93rem; color: var(--text-dim); }

/* ===========================================================================
   17. Scroll reveal
   Progressive enhancement: the .reveal class only does anything once the
   script adds .reveal-on, so with JavaScript off every element is visible and
   nothing is hidden from a crawler.
   =========================================================================== */

.reveal-on .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1),
              transform .6s cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal-on .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal-on .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

@media print {
  .site-header, .nav__drawer, .cookie, .map, .hero__dots { display: none !important; }
  body { background: #fff; color: #000; }
  .reveal-on .reveal { opacity: 1 !important; transform: none !important; }
}