/* ═══════════════════════════════════════════════════════════════════
   Service Safe Ltd — Home page
   Hero banner, floating stat panel, horizontally scrollable rows,
   about, testimonials, pricing, contact.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hero card ─────────────────────────────────────────────────────── */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(400px, 52vh, 540px);
  padding: clamp(28px, 4vw, 48px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  background:
    radial-gradient(ellipse 74% 82% at 82% 12%, rgba(125, 201, 255, 0.16), transparent 66%),
    radial-gradient(ellipse 60% 60% at 6% 96%, rgba(125, 201, 255, 0.07), transparent 66%),
    var(--surface-1);
}

/* Background video. Starts hidden and is faded in by js/hero-video.js,
   which also dips the opacity at each end of the loop so the seam is not
   a visible jump. Opacity is driven from script, so no transition here. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

/* Keeps the headline legible over whatever frame is on screen */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(100deg, var(--surface-1) 0%, rgba(13, 17, 20, 0.86) 38%, rgba(13, 17, 20, 0.42) 72%, rgba(13, 17, 20, 0.55) 100%),
    linear-gradient(0deg, rgba(6, 8, 9, 0.55), rgba(6, 8, 9, 0.15));
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
  pointer-events: none;
}
.hero__canvas.is-ready { opacity: 1; }
/* The node graph is decoration for the static background; with footage
   behind it the two compete, so it steps aside once the video runs. */
.hero.has-video .hero__canvas { opacity: 0; }

.hero__inner { z-index: 3; }

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 620px;
  padding: 0;
}

.hero__tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: var(--sp-3); }
/* Reframed: squared bracket chips (not pills) with a leading accent tick */
.hero__tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  background: linear-gradient(150deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.hero__tag::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.hero__tag:hover { color: var(--text-1); border-color: var(--accent-line); }

/* Upper heading reframe: Space Grotesk display face, tighter tracking, and
   a short accent rule sitting above the H1 as a framing device. */
.hero__inner > .eyebrow { margin-bottom: var(--sp-2); }
.hero h1 {
  position: relative;
  margin: var(--sp-2) 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.875rem, 3.6vw, 3rem);
}
.hero .lede { font-size: clamp(0.875rem, 1.2vw, 0.9375rem); max-width: 52ch; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-top: var(--sp-3);
}

/* Stat strip — its own panel directly under the hero card */
.hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  overflow: hidden;
}
.hero-stat {
  padding: clamp(16px, 2.4vw, 24px) clamp(12px, 2vw, 24px);
  text-align: center;
  border-right: 1px solid var(--border);
}
.hero-stat:last-child { border-right: none; }
.hero-stat__value {
  display: block;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--accent);
}
.hero-stat__label {
  display: block;
  margin-top: var(--sp-05);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
}

@media (max-width: 720px) {
  .hero__stats { grid-template-columns: repeat(2, 1fr); }
  .hero-stat:nth-child(2) { border-right: none; }
  .hero-stat:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}

/* ── Ad carousel ────────────────────────────────────────────────────────
   Lives inside the same stat-panel frame (--ads modifier drops the grid).
   Three ad images slide left, one every 4s, driven by js/ad-carousel.js.
   The panel keeps its 24px radius + hairline; the strip clips to it. */
.hero__stats--ads {
  display: block;
  position: relative;
  padding: 0;
  /* the ads are 2064×220 (≈9.38:1) — lock the frame to that ratio so the
     image fills edge-to-edge with no letterboxing */
  aspect-ratio: 2064 / 220;
}
.ad-strip {
  display: flex;
  width: 100%;
  height: 100%;
  will-change: transform;
}
.ad-strip.is-animating { transition: transform 0.7s var(--ease-fluid); }
.ad-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}
.ad-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* dots */
.ad-dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}
.ad-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.35);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), width var(--t-fast) var(--ease);
}
.ad-dot.is-active { background: var(--accent); width: 16px; }

/* On phones restore the native image ratio so the full ad is visible edge-to-edge
   with no side-cropping. Height resolves automatically from the aspect ratio. */
@media (max-width: 640px) {
  .hero__stats--ads { aspect-ratio: 2064 / 220; height: auto; }
  .ad-slide img { object-fit: cover; object-position: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ad-strip.is-animating { transition: none; }
}

/* ── Horizontal rows ───────────────────────────────────────────────── */
.row { position: relative; margin-bottom: clamp(40px, 5vw, 64px); }
.row:last-child { margin-bottom: 0; }

.row__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.row__title { font-size: clamp(1.125rem, 2vw, 1.375rem); font-weight: 700; }
.row__sub { font-size: var(--fs-sm); color: var(--text-3); margin-top: var(--sp-05); }

.row__nav { display: flex; gap: var(--sp-1); flex-shrink: 0; }
.row__btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-1);
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              opacity var(--t-fast) var(--ease);
}
.row__btn:hover:not(:disabled) {
  background: var(--accent);
  border-color: transparent;
  color: var(--on-accent);
}
.row__btn:disabled { opacity: 0.3; cursor: default; }
.row__btn svg { width: 17px; height: 17px; }

.row__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(272px, 100%), 1fr);
  gap: var(--sp-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* bleed so cards can lift without clipping */
  padding: var(--sp-1) var(--sp-05) var(--sp-3);
  margin: calc(var(--sp-1) * -1) calc(var(--sp-05) * -1) calc(var(--sp-3) * -1);
}
.row__track::-webkit-scrollbar { display: none; }
.row__track > * { scroll-snap-align: start; }

@media (min-width: 900px) { .row__track { grid-auto-columns: minmax(min(300px, 100%), 1fr); } }
@media (prefers-reduced-motion: reduce) { .row__track { scroll-behavior: auto; } }

/* ── Tile (row card) ───────────────────────────────────────────────── */
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-height: 246px;
  padding: var(--sp-3);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  transition: transform var(--t-mid) var(--ease-fluid),
              background var(--t-mid) var(--ease-fluid),
              border-color var(--t-mid) var(--ease-fluid),
              box-shadow var(--t-mid) var(--ease-fluid);
}

.tile:hover, .tile:focus-visible {
  transform: translateY(-6px);
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.tile:hover .tile__icon { background: var(--accent); color: var(--on-accent); }
.tile:hover .tile__link { gap: 11px; }

/* Artwork sits in the top-left corner in place of an icon chip, so the
   card needs a little more headroom above the title. */
.tile.art-wash { --art-opacity: 0.2; --art-opacity-hover: 0.36; padding-top: var(--sp-6); }
.tile.art-wash .tile__title { margin-top: auto; }

.tile--featured { border-color: var(--accent-line); }
/* "Popular" label removed — was rendering as a line across the card */

.tile__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-thumb);
  background: var(--accent-soft);
  color: var(--accent);
  transition: background var(--t-mid) var(--ease), color var(--t-mid) var(--ease);
}
.tile__icon svg { width: 22px; height: 22px; }

.tile__title { font-size: 1.0625rem; font-weight: 700; }
.tile__body { font-size: var(--fs-sm); color: var(--text-2); flex-grow: 1; }
.tile__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  transition: gap var(--t-fast) var(--ease);
}
.tile__link svg { width: 15px; height: 15px; }

/* ── Tech marquee ──────────────────────────────────────────────────── */
.marquee { margin-top: clamp(40px, 5vw, 64px); }
.marquee__label {
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--sp-3);
}
.marquee__stage {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: var(--sp-3);
  animation: marquee-slide 42s linear infinite;
}
.marquee__stage:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee__stage { overflow-x: auto; }
}

.tech-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 10px 18px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-2);
}
/* Monochrome marks — the palette stays accent-only */
.tech-chip img { width: 20px; height: 20px; object-fit: contain; opacity: 0.72; }

/* ── About ─────────────────────────────────────────────────────────── */
.about {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 900px) { .about { grid-template-columns: 1fr; } }

.about__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }

.metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
}
@media (max-width: 520px) { .metrics { grid-template-columns: 1fr; } }

.metric {
  padding: var(--sp-3) var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  transition: transform var(--t-mid) var(--ease-fluid), border-color var(--t-mid) var(--ease-fluid), box-shadow var(--t-mid) var(--ease-fluid);
}
.metric:hover { transform: translateY(-4px); border-color: var(--border-strong); }

.metric__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-1);
}
.metric__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-control);
  background: var(--accent-soft);
  color: var(--accent);
}
.metric__icon svg { width: 16px; height: 16px; }

/* Photographic variant. The accent gradient is kept and laid over the
   image, so the chip reads as part of the same system as the glyph
   version it replaces. Larger than 32px because a photograph needs the
   room to be legible. */
.metric__icon--img {
  width: 46px;
  height: 46px;
  border-radius: var(--r-thumb);
  border: 1px solid var(--accent-line);
  background-image:
    linear-gradient(150deg, rgba(125, 201, 255, 0.5) 0%, rgba(125, 201, 255, 0.12) 48%, rgba(6, 8, 9, 0.3) 100%),
    var(--art);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform var(--t-mid) var(--ease-fluid), border-color var(--t-mid) var(--ease-fluid), box-shadow var(--t-mid) var(--ease-fluid);
}
.metric:hover .metric__icon--img {
  transform: scale(1.06);
  border-color: var(--accent);
}
.metric__pct {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-1);
}
.metric__label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 10px;
}
.metric__bar {
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}
.metric__fill {
  height: 100%;
  width: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
  transition: width 1.1s var(--ease);
}

/* Terminal panel */
.terminal {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
}
.terminal__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 13px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
/* Neutral window dots — the palette carries no red/amber/green */
.terminal__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); }
.terminal__dot--g { background: var(--accent-line); }
.terminal__body {
  margin: 0;
  padding: var(--sp-3);
  min-height: 250px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.85;
  color: var(--accent);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Testimonials ──────────────────────────────────────────────────── */
.review-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}
/* Both marks are dark-on-light artwork, so they sit on a light chip
   rather than being recoloured — keeps each brand's mark intact. */
.review-logo {
  display: block;
  padding: 12px 20px;
  background: #EEF2F5;
  border-radius: var(--r-thumb);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.review-logo:hover { transform: translateY(-4px); background: #FFFFFF; }
.review-logo img { height: 32px; width: auto; object-fit: contain; }

.review {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-height: 246px;
  padding: var(--sp-3);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  transition: transform var(--t-mid) var(--ease-fluid), border-color var(--t-mid) var(--ease-fluid), box-shadow var(--t-mid) var(--ease-fluid);
}
.review:hover { transform: translateY(-4px); border-color: var(--border-strong); }
.review__stars { color: var(--star); font-size: 1rem; letter-spacing: 0.12em; }
.review__quote {
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.75;
  flex-grow: 1;
}
.review__footer {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
}
.review__mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 700;
}
.review__name { font-size: var(--fs-sm); font-weight: 600; font-style: normal; color: var(--text-1); }

/* ── Pricing ───────────────────────────────────────────────────────── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--sp-3);
  align-items: start;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-4) var(--sp-3);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  transition: transform var(--t-mid) var(--ease-fluid), border-color var(--t-mid) var(--ease-fluid), box-shadow var(--t-mid) var(--ease-fluid);
}
.plan:hover { transform: translateY(-4px); border-color: var(--border-strong); }

.plan--popular {
  background: var(--surface-2);
  border-color: var(--accent);
}
.plan--popular:hover { border-color: var(--accent); }

.plan__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: var(--r-pill);
  padding: 5px 16px;
  white-space: nowrap;
}

.plan__name { font-size: 1.1875rem; font-weight: 700; }
.plan__tag {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: var(--sp-05);
}
.plan__price {
  display: flex;
  align-items: flex-start;
  gap: 3px;
  margin-top: var(--sp-3);
  color: var(--text-1);
}
.plan__from {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  align-self: center;
  margin-right: 6px;
}
.plan__currency { font-size: 1.375rem; font-weight: 700; margin-top: 6px; }
.plan__amount { font-size: 2.875rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.plan__amount sup { font-size: 1.375rem; }
.plan__delivery { font-size: var(--fs-sm); color: var(--text-2); margin-top: 6px; }

.plan__divider {
  height: 1px;
  background: var(--border);
  margin-block: var(--sp-3);
}

.plan__features { flex-grow: 1; margin-bottom: var(--sp-3); }
.plan__features li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: var(--fs-sm);
  color: var(--text-2);
  margin-bottom: 12px;
}
.plan__features svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 4px;
  color: var(--accent);
}
.plan__features strong { color: var(--accent); font-weight: 700; }

.plan .btn { width: 100%; }

.pricing-note {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-2);
  margin-top: var(--sp-4);
}
.pricing-note a { color: var(--accent); font-weight: 500; }
.pricing-note a:hover { text-decoration: underline; }

/* ── Contact ───────────────────────────────────────────────────────── */
.contact {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 960px) { .contact { grid-template-columns: 1fr; } }

.contact-detail {
  padding-block: var(--sp-2);
  border-bottom: 1px solid var(--border);
}
.contact-detail strong {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--sp-05);
}
.contact-detail a, .contact-detail span, .contact-detail button {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-1);
}
.contact-detail a, .contact-detail button {
  transition: color var(--t-fast) var(--ease);
}
.contact-detail button { text-align: left; }
.contact-detail a:hover, .contact-detail button:hover { color: var(--accent); }

.globe-wrap { margin-top: var(--sp-4); text-align: center; }
#contact-globe {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1;
  margin-inline: auto;
  opacity: 0;
  cursor: grab;
  transition: opacity 0.9s var(--ease);
}
.globe-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 10px;
}

/* ── Forms (shared by home + web-app-security) ─────────────────────── */
.form-card {
  padding: clamp(24px, 3.5vw, 32px);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
}

.form-group { margin-bottom: var(--sp-3); }
.form-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: var(--sp-1);
}
.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 13px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  font-size: var(--fs-sm);
  color: var(--text-1);
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-3); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  background: var(--surface-3);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-textarea { resize: vertical; min-height: 132px; }
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A6AFB8' 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 15px center;
  background-size: 17px;
  padding-right: 44px;
}
.form-select option { background: var(--surface-2); color: var(--text-1); }

.form-status {
  display: none;
  margin-top: var(--sp-2);
  padding: 13px 16px;
  border-radius: var(--r-control);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.form-status.is-ok  { display: block; background: var(--ok-bg);  color: var(--ok);  border: 1px solid var(--ok-line); }
.form-status.is-err { display: block; background: var(--err-bg); color: var(--err); border: 1px solid var(--err-line); }

.form-card .btn { width: 100%; margin-top: var(--sp-05); }

/* ── Metric icon background images (used on index.html, loaded via home.css) */
.metric__icon--trusted-expertise    { --art: url('/assets/metric-trusted-expertise.jpg'); }
.metric__icon--fast-results         { --art: url('/assets/metric-fast-results.jpg'); }
.metric__icon--expert-team          { --art: url('/assets/metric-expert-team.jpg'); }
.metric__icon--customised-solutions { --art: url('/assets/metric-customised-solutions.jpg'); }

/* ── Areas We Cover (SEO section before footer) ────────────────────── */
.areas-we-cover {
  padding: 40px 20px;
  text-align: center;
}
.areas-we-cover h2 { margin-bottom: var(--sp-2); }
.areas-we-cover p  { max-width: 70ch; margin: 0 auto; color: var(--text-2); }

/* ── Services section background video ────────────────────────────── */
#services { position: relative; overflow: hidden; }
.services-vid {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; pointer-events: none; z-index: 0;
  transition: opacity 1.2s ease;
}
#services.has-video .services-vid { opacity: 0.28; }
.services-vid__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,13,16,0.82) 0%, rgba(10,13,16,0.55) 40%, rgba(10,13,16,0.55) 60%, rgba(10,13,16,0.82) 100%),
    linear-gradient(90deg,  rgba(10,13,16,0.65) 0%, transparent 30%, transparent 70%, rgba(10,13,16,0.65) 100%);
}
#services > *:not(.services-vid):not(.services-vid__scrim) { position: relative; z-index: 2; }

/* ── About / Contact section background videos ────────────────────── */
#about, #contact { position: relative; overflow: hidden; }
.panel-vid {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; pointer-events: none; z-index: 0;
  transition: opacity 1.2s ease;
}
#about.has-video   .panel-vid { opacity: 0.28; }
#contact.has-video .panel-vid { opacity: 0.28; }
.panel-vid__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,13,16,0.85) 0%, rgba(10,13,16,0.60) 35%, rgba(10,13,16,0.60) 65%, rgba(10,13,16,0.85) 100%);
}
#about   > *:not(.panel-vid):not(.panel-vid__scrim),
#contact > *:not(.panel-vid):not(.panel-vid__scrim) { position: relative; z-index: 2; }