/*!
 * Stickfem Logistics - Unified Production Stylesheet
 * Built by Nattechs (https://nattechs.ng/)
 * Section 1: Core Engine & Design Tokens (ScrollCraft)
 * Section 2: Stickfem Brand System & Components
 */

/* === SECTION 1: CORE ENGINE & TOKENS === */

:root {
  --sc-canvas: #08090b;
  --sc-surface: #101217;
  --sc-ink: #f4f2ef;
  --sc-ink-soft: #9a9ba1;
  --sc-accent: #d8ff3e;
  --sc-accent-ink: #08090b;
  --sc-hairline: color-mix(in oklab, var(--sc-ink) 12%, transparent);
  --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 22%, transparent);
  --sc-font-display: "Instrument Sans", "Geist", system-ui, sans-serif;
  --sc-font-text: "Geist", system-ui, sans-serif;
  --sc-font-mono: "Geist Mono", ui-monospace, monospace;
  --sc-t-xs: clamp(.75rem, .72rem + .15vw, .82rem);
  --sc-t-sm: clamp(.875rem, .84rem + .18vw, .95rem);
  --sc-t-base: clamp(1rem, .96rem + .22vw, 1.125rem);
  --sc-t-lg: clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
  --sc-t-xl: clamp(1.6rem, 1.35rem + 1.2vw, 2.25rem);
  --sc-t-2xl: clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);
  --sc-t-3xl: clamp(2.8rem, 1.9rem + 4.2vw, 5rem);
  --sc-t-4xl: clamp(3.4rem, 1.9rem + 6.6vw, 7.5rem);
  --sc-track-tight: -.035em;
  --sc-track-snug: -.02em;
  --sc-track-normal: -.005em;
  --sc-track-wide: .08em;
  --sc-leading-none: .94;
  --sc-leading-tight: 1.06;
  --sc-leading-body: 1.62;
  --sc-measure: 62ch;
  --sc-1: .25rem;
  --sc-2: .5rem;
  --sc-3: .75rem;
  --sc-4: 1rem;
  --sc-5: 1.5rem;
  --sc-6: 2rem;
  --sc-7: 3rem;
  --sc-8: 4rem;
  --sc-9: 6rem;
  --sc-10: 8rem;
  --sc-11: 12rem;
  --sc-section: clamp(4.5rem, 9vw, 11rem);
  --sc-gutter: clamp(1.25rem, 5vw, 5.5rem);
  --sc-maxw: 72rem;
  --sc-r-sm: 6px;
  --sc-r-md: 12px;
  --sc-r-lg: 20px;
  --sc-r-pill: 999px;
  --sc-shadow-color: 220 40% 2%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / .28), 0 2px 6px -1px hsl(var(--sc-shadow-color) / .2);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / .24), 0 8px 18px -4px hsl(var(--sc-shadow-color) / .3);
  --sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / .22), 0 18px 40px -8px hsl(var(--sc-shadow-color) / .38), 0 48px 90px -24px hsl(var(--sc-shadow-color) / .3);
  --sc-edge: inset 0 1px 0 color-mix(in oklab, var(--sc-ink) 10%, transparent);
  --sc-ease-out: cubic-bezier(.23, 1, .32, 1);
  --sc-ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --sc-ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --sc-d-fast: .16s;
  --sc-d-base: .24s;
  --sc-d-slow: .42s;
  --sc-z-stage: 1;
  --sc-z-copy: 20;
  --sc-z-chrome: 60;
}

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

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

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-base);
  line-height: var(--sc-leading-body);
  letter-spacing: var(--sc-track-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
  overflow-x: clip;
}

img,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--sc-accent);
  color: var(--sc-accent-ink);
}

:root {
  caret-color: var(--sc-accent);
  accent-color: var(--sc-accent);
}

:focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 3px;
  border-radius: var(--sc-r-sm);
}

:where(a) {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}

@supports (scrollbar-color: auto) {
  html {
    scrollbar-color: color-mix(in oklab, var(--sc-ink) 26%, transparent) transparent;
    scrollbar-width: thin;
  }
}

:where(table, .sc-nums, [data-sc-count]) {
  font-variant-numeric: tabular-nums;
}

.sc-display {
  font-family: var(--sc-font-display);
  font-weight: 500;
  line-height: var(--sc-leading-none);
  letter-spacing: var(--sc-track-tight);
  text-wrap: balance;
  margin: 0;
}

.sc-display--xl {
  font-size: var(--sc-t-4xl);
}

.sc-display--lg {
  font-size: var(--sc-t-3xl);
}

.sc-display--md {
  font-size: var(--sc-t-2xl);
  letter-spacing: var(--sc-track-snug);
}

.sc-lede {
  font-size: var(--sc-t-lg);
  line-height: 1.44;
  letter-spacing: var(--sc-track-snug);
  color: var(--sc-ink);
  max-width: 46ch;
  text-wrap: pretty;
  margin: 0;
}

.sc-body {
  max-width: var(--sc-measure);
  color: var(--sc-ink-soft);
  text-wrap: pretty;
  margin: 0;
}

.sc-label {
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}

.sc-wrap {
  width: 100%;
  max-width: var(--sc-maxw);
  margin-inline: auto;
  padding-inline: 0;
}

.sc-section {
  padding-block: var(--sc-section);
  padding-inline: var(--sc-gutter);
}

.sc-stack>*+* {
  margin-top: var(--sc-4);
}

.sc-stack>:is(h1, h2, h3) {
  margin-top: var(--sc-7);
}

.sc-stack>:is(h1, h2, h3):first-child {
  margin-top: 0;
}

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

.sc-act--pinned {
  position: relative;
}

.sc-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: clip;
  z-index: var(--sc-z-stage);
}

.sc-stage :is(video[data-sc-scrub], canvas[data-sc-sequence], .sc-stage__poster) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

video[data-sc-scrub] {
  opacity: 0;
  transition: opacity .38s var(--sc-ease-out);
}

.sc-has-clip video[data-sc-scrub] {
  opacity: 1;
}

.sc-stage__poster {
  z-index: 0;
  transition: opacity .38s var(--sc-ease-out);
}

.sc-has-clip .sc-stage__poster {
  opacity: 0;
}

.sc-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(var(--sc-scrim-angle, 180deg), color-mix(in oklab, var(--sc-canvas) var(--sc-scrim-a, 78%), transparent) 0%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%, transparent 68%);
}

.sc-scrim--bottom {
  --sc-scrim-angle: 0deg;
}

.sc-scrim--left {
  --sc-scrim-angle: 90deg;
}

.sc-scrim--right {
  --sc-scrim-angle: 270deg;
}

.sc-scrim--lead {
  background: linear-gradient(to top right, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 72%, transparent) 30%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 52%, transparent 72%);
}

.sc-scrim--trail {
  background: linear-gradient(to top left, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 72%, transparent) 30%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 52%, transparent 72%);
}

.sc-scrim--band {
  background: linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 74%, transparent) 22%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%, transparent 58%);
}

.sc-scrim--vignette {
  background: radial-gradient(120% 90% at 50% 45%, transparent 40%, color-mix(in oklab, var(--sc-canvas) 70%, transparent) 100%);
}

.sc-copy {
  position: absolute;
  z-index: var(--sc-z-copy);
  inset-inline: var(--sc-gutter);
  max-width: min(46rem, 76vw);
  will-change: opacity, transform;
}

.sc-copy--lead {
  left: var(--sc-gutter);
  bottom: clamp(3rem, 12vh, 9rem);
}

.sc-copy--center {
  inset-inline: auto;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  text-align: center;
}

.sc-copy--trail {
  inset-inline: auto;
  right: var(--sc-gutter);
  bottom: clamp(3rem, 12vh, 9rem);
  text-align: right;
}

[data-sc-cue] {
  opacity: 0;
  will-change: opacity, transform;
}

.sc-ready [data-sc-cue] {
  transition: none;
}

.sc-split {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.sc-split--line {
  display: block;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}

.sc-split__i {
  display: inline-block;
  will-change: transform, opacity;
}

.sc-is-split {
  opacity: 1 !important;
}

[data-sc-pan] {
  display: flex;
  will-change: transform;
}

[data-sc-reveal] {
  will-change: clip-path;
}

[data-sc-parallax] {
  will-change: transform;
}

[data-sc-in],
[data-sc-stagger]>* {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity .62s var(--sc-ease-out), transform .62s var(--sc-ease-out);
}

[data-sc-in].sc-in,
[data-sc-stagger]>.sc-in {
  opacity: 1;
  transform: none;
}

[data-sc-tilt] {
  transform-style: preserve-3d;
  will-change: transform;
}

[data-sc-magnet] {
  will-change: transform;
}

[data-sc-spotlight] {
  isolation: isolate;
}

:where([data-sc-spotlight]) {
  position: relative;
}

[data-sc-spotlight]:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(28rem 28rem at calc(var(--sc-mx, .5) * 100%) calc(var(--sc-my, .5) * 100%), color-mix(in oklab, var(--sc-accent) 16%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity var(--sc-d-slow) var(--sc-ease-out);
}

[data-sc-spotlight]:hover:after {
  opacity: 1;
}

[data-sc-mode=worldflight] {
  position: relative;
}

.sc-world {
  position: fixed;
  inset: 0;
  overflow: clip;
  z-index: var(--sc-z-stage);
  background: var(--sc-canvas);
}

.sc-world__seg {
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: opacity;
}

.sc-world__seg>:is(video, img, canvas) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sc-world__poster {
  z-index: 0;
  transform-origin: 50% 50%;
  transition: opacity .42s var(--sc-ease-out);
}

.sc-world__seg>video {
  z-index: 1;
}

.sc-world__seg.sc-has-clip .sc-world__poster {
  opacity: 0;
}

video[data-sc-scrub].sc-has-clip {
  opacity: 1;
}

.sc-world__copy {
  position: fixed;
  inset: 0;
  z-index: var(--sc-z-copy);
  pointer-events: none;
}

.sc-world__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

[data-sc-copy] {
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}

.sc-ready [data-sc-copy] {
  transition: none;
}

.sc-world__spacer {
  pointer-events: none;
}

[data-sc-progress] {
  position: fixed;
  inset: 0 0 auto;
  height: 2px;
  z-index: var(--sc-z-chrome);
  background: var(--sc-accent);
  transform-origin: 0 50%;
  transform: scaleX(0);
  will-change: transform;
}

.sc-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: .045;
}

.sc-grain:before {
  content: "";
  position: absolute;
  inset: -50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

@media(prefers-reduced-motion:reduce) {

  [data-sc-in],
  [data-sc-stagger]>* {
    transform: none;
    transition-duration: .22s;
  }

  [data-sc-parallax],
  [data-sc-pan],
  .sc-split__i {
    transform: none !important;
  }

  [data-sc-reveal] {
    clip-path: none !important;
  }

  [data-sc-act=pan] .sc-stage,
  [data-sc-act=pan] [data-sc-stage] {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }

  [data-sc-pan]>* {
    scroll-snap-align: center;
  }

  [data-sc-spotlight]:after {
    display: none;
  }

  .sc-world__poster,
  [data-sc-copy] {
    transform: none !important;
  }
}

@media(max-width:860px) {
  .sc-copy {
    inset-inline: var(--sc-gutter);
    max-width: none;
  }

  .sc-copy--trail {
    text-align: left;
  }

  .sc-stage {
    height: 100svh;
  }

  .sc-scrim--trail {
    background: linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 74%, transparent) 22%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%, transparent 58%);
  }
}



/* === SECTION 2: STICKFEM BRAND & COMPONENTS === */
/**
 * Stickfem Logistics - Dedicated Frontend Stylesheet
 * ----------------------------------------------------
 * Official Brand Colors:
 * - Deep Navy Blue: #011949
 * - Bright Orange:  #F55904
 * - Vibrant Blue:   #0062FF
 */

/* ---- Typography -------------------------------------------------------- */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url("../fonts/Outfit.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/SourceSans3.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/SourceSans3-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Brand & Design Tokens --------------------------------------------- */
:root {
  --sc-canvas: #f6f7f9;
  --sc-surface: #ffffff;
  --sc-ink: #0f172a;
  --sc-ink-soft: #4f5d6d;

  /* Official Stickfem Brand Tokens */
  --sf-navy: #011949;
  --sf-navy-deep: #001133;
  --sf-orange: #F55904;
  --sf-orange-hover: #e04f00;
  --sf-blue: #0062FF;
  --sf-blue-hover: #0050d4;
  --sf-blue-light: #ebf3ff;

  /* Compatibility Aliases */
  --sc-accent: var(--sf-orange);
  --sc-accent-ink: #ffffff;
  --bk-navy: var(--sf-navy);
  --bk-navy-deep: var(--sf-navy-deep);
  --bk-sky: var(--sf-orange);
  --bk-blue: var(--sf-blue);
  --bk-line: #d5dfea;

  --sc-font-display: "Outfit", system-ui, -apple-system, sans-serif;
  --sc-font-text: "Source Sans 3", system-ui, -apple-system, sans-serif;
  --sc-shadow-color: 214 60% 12%;
  --sc-r-sm: 4px;
  --sc-r-md: 8px;
  --sc-r-lg: 14px;
  --bar-h: 4rem;
  --sc-maxw: 72rem;
}

.g-navy {
  --sc-canvas: var(--sf-navy);
  --sc-surface: var(--sf-navy-deep);
  --sc-ink: #ffffff;
  --sc-ink-soft: #b8c7db;
  --sc-accent: var(--sf-orange);
  --sc-accent-ink: #ffffff;
  background: var(--sf-navy);
  color: var(--sc-ink);
}

html {
  scroll-padding-top: var(--bar-h);
}

html,
body {
  overflow-x: clip;
}

body {
  background: var(--sc-canvas);
}

.sc-display {
  font-weight: 800;
}

h2.sc-display {
  color: var(--sf-navy);
}

.g-navy h2.sc-display {
  color: #ffffff;
}

.sc-body {
  font-size: var(--sc-t-lg);
  line-height: 1.5;
}

p {
  margin: 0;
}

.skip {
  position: fixed;
  top: -120px;
  left: 1.5rem;
  background: var(--sf-orange, #f46a25);
  color: #fff;
  padding: 0.65rem 1.35rem;
  font-family: var(--sc-font-display, "Plus Jakarta Sans", system-ui, sans-serif);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(244, 106, 37, 0.4);
  z-index: 99999;
  transition: top 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
  pointer-events: none;
}

.skip:focus,
.skip:focus-visible {
  top: 0;
  pointer-events: auto;
  outline: 3px solid var(--sf-navy, #011949);
  outline-offset: 3px;
}

.symbols {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  min-height: 3rem;
  padding: .7rem 1.35rem;
  border-radius: var(--sc-r-md);
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: var(--sc-t-base);
  letter-spacing: var(--sc-track-snug);
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform var(--sc-d-fast) var(--sc-ease-out), background-color var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out), box-shadow var(--sc-d-fast) var(--sc-ease-out);
  cursor: pointer;
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px) scale(.98);
}

.btn--call {
  background: var(--sf-orange);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(245, 89, 4, 0.3);
}

.btn--call:hover {
  background: var(--sf-orange-hover);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(245, 89, 4, 0.45);
}

.g-navy .btn--call {
  background: var(--sf-orange);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(245, 89, 4, 0.4);
}

.g-navy .btn--call:hover {
  background: var(--sf-orange-hover);
  color: #ffffff;
}

.btn--wa {
  background: transparent;
  color: var(--sf-navy);
  border-color: var(--sf-navy);
}

.btn--wa:hover {
  background: var(--sf-blue);
  color: #ffffff;
  border-color: var(--sf-blue);
}

.g-navy .btn--wa {
  color: #ffffff;
  border-color: rgba(255, 255, 255, .55);
}

.g-navy .btn--wa:hover {
  background: var(--sf-blue);
  border-color: var(--sf-blue);
  color: #ffffff;
}

.btn--email {
  background: transparent;
  color: var(--sf-navy);
  border-color: var(--sf-navy);
}

.btn--email:hover {
  background: var(--sf-blue);
  color: #ffffff;
  border-color: var(--sf-blue);
}

.g-navy .btn--email {
  color: #ffffff;
  border-color: rgba(255, 255, 255, .55);
}

.g-navy .btn--email:hover {
  background: var(--sf-blue);
  border-color: var(--sf-blue);
  color: #ffffff;
}

.btn svg {
  width: 1.1em;
  height: 1.1em;
  flex: none;
}

.btn--sm {
  min-height: 2.5rem;
  padding: .45rem 1rem;
  font-size: var(--sc-t-sm);
}

/* ---- Navigation Bar ---------------------------------------------------- */
.bar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--bar-h);
  z-index: var(--sc-z-chrome);
  display: flex;
  align-items: center;
  padding-inline: var(--sc-gutter);
  background: var(--sc-surface);
  box-shadow: 0 1px 0 rgba(1, 25, 73, .08);
}

.bar__wrap {
  width: 100%;
  max-width: var(--sc-maxw);
  margin-inline: auto;
  padding-inline: 0;
  display: flex;
  align-items: center;
  gap: var(--sc-6);
  height: 100%;
}

.bar__mark {
  display: flex;
  align-items: center;
  height: 2.4rem;
  color: var(--sf-navy);
}

.bar__mark svg {
  height: 100%;
  width: auto;
}

.bar__logo {
  height: 38px;
  width: auto;
  object-fit: contain;
  border-radius: 4px;
}

.bar__nav {
  display: flex;
  gap: var(--sc-5);
  margin-left: auto;
}

.bar__nav a {
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: var(--sc-t-sm);
  text-decoration: none;
  color: var(--sc-ink);
  padding: .4rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-bottom-color 0.15s ease;
}

.bar__nav a:hover {
  border-bottom-color: var(--sf-orange);
  color: var(--sf-blue);
}

.bar .btn {
  margin-left: var(--sc-2);
}

/* ---- Header Social Media Icons ----------------------------------------- */
.bar__socials {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: var(--sc-3);
  flex-shrink: 0;
}

.bar__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  color: var(--sf-navy, #011949);
  background: rgba(1, 25, 73, 0.05);
  border: 1px solid rgba(1, 25, 73, 0.08);
  text-decoration: none;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  flex-shrink: 0;
}

.bar__social svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: currentColor;
  transition: transform 0.22s ease, fill 0.22s ease;
}

.bar__social:hover {
  transform: translateY(-2px);
  color: #fff;
  border-color: transparent;
}

.bar__social:hover svg {
  transform: scale(1.1);
}

.bar__social--facebook:hover {
  background: #1877F2;
  box-shadow: 0 4px 12px rgba(24, 119, 242, 0.38);
}

.bar__social--instagram:hover {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  box-shadow: 0 4px 12px rgba(214, 36, 159, 0.38);
}

.bar__social--linkedin:hover {
  background: #0A66C2;
  box-shadow: 0 4px 12px rgba(10, 102, 194, 0.38);
}

.bar__social--tiktok:hover {
  background: #000000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.bar__social--twitter:hover {
  background: #0f1419;
  box-shadow: 0 4px 12px rgba(15, 20, 25, 0.38);
}

.bar__social--youtube:hover {
  background: #FF0000;
  box-shadow: 0 4px 12px rgba(255, 0, 0, 0.38);
}

.bar__social:focus-visible {
  outline: 2px solid var(--sf-orange, #ff5500);
  outline-offset: 2px;
}

/* ---- Hero Section ------------------------------------------------------ */
.hero__stage {
  min-height: 100svh;
  overflow: clip;
}

.hero__film {
  position: absolute;
  inset: -6% 0;
  z-index: 0;
}

.hero__video,
.hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__poster {
  z-index: 0;
}

.hero__video {
  z-index: 1;
  opacity: 0;
  transition: opacity 500ms var(--sc-ease-out);
}

.hero__video.is-playing {
  opacity: 1;
}

.hero .sc-scrim {
  z-index: 2;
  background:
    linear-gradient(to right, rgba(246, 247, 249, .98) 0%, rgba(246, 247, 249, .95) 36%, rgba(246, 247, 249, .84) 48%, rgba(246, 247, 249, .5) 60%, rgba(246, 247, 249, .12) 70%, transparent 78%),
    linear-gradient(to top, rgba(246, 247, 249, .96) 0%, rgba(246, 247, 249, .7) 22%, rgba(246, 247, 249, .2) 46%, transparent 62%);
}

.hero .sc-copy--lead {
  left: max(var(--sc-gutter), calc((100% - var(--sc-maxw)) / 2));
}

.hero .sc-copy {
  max-width: min(var(--sc-maxw), 86vw);
}

.hero__h {
  color: var(--sf-navy);
  font-size: clamp(2.2rem, 1rem + 2.9vw, 3.6rem);
  max-width: none;
}

.hero__l {
  display: block;
}

.hero__sub {
  margin-top: var(--sc-4);
  font-size: var(--sc-t-lg);
  color: var(--sc-ink);
  max-width: 38ch;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-3);
  margin-top: var(--sc-6);
}

.hero__tagline {
  display: none;
}

.hero__tag {
  bottom: clamp(3rem, 14vh, 10rem);
}

.hero__tag p {
  color: var(--sf-navy);
  font-family: var(--sc-font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 1.2rem + 4.2vw, 5rem);
  line-height: var(--sc-leading-none);
  letter-spacing: var(--sc-track-tight);
  max-width: 12ch;
  text-wrap: balance;
}

.hero__tag p span {
  display: block;
}

.hero__line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(1.6rem, 6vh, 4rem);
  height: 6px;
  z-index: 3;
  pointer-events: none;
}

.hero__line line {
  stroke: var(--sf-orange);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - clamp(0, (var(--sc-p, 0) - .5) / .4, 1));
}

/* ---- Trust Strip ------------------------------------------------------- */
.trust {
  position: relative;
  z-index: 2;
}

.trust__band {
  background: var(--sf-navy);
  color: #ffffff;
  padding-inline: var(--sc-gutter);
}

.trust__list {
  list-style: none;
  margin: 0;
  padding: var(--sc-5) 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sc-4) clamp(1rem, 2vw, 2.5rem);
  max-width: var(--sc-maxw);
  margin-inline: auto;
  width: 100%;
}

.trust__list li {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: var(--sc-t-lg);
  letter-spacing: var(--sc-track-snug);
}

.trust__list svg {
  width: 1.35em;
  height: 1.35em;
  flex: none;
  color: var(--sf-orange);
}

.trust__list small {
  display: block;
  font-family: var(--sc-font-text);
  font-weight: 400;
  font-size: var(--sc-t-sm);
  color: var(--sc-ink-soft, #b9c8dc);
  letter-spacing: 0;
}

.trust__band .trust__list small {
  color: #b9c8dc;
}

/* ---- Services Section -------------------------------------------------- */
.svc__lead {
  font-family: var(--sc-font-display);
  font-weight: 800;
  font-size: var(--sc-t-2xl);
  line-height: var(--sc-leading-tight);
  letter-spacing: var(--sc-track-snug);
  color: var(--sc-ink);
  max-width: 18ch;
}

.svc__row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--sc-8);
  align-items: center;
  margin-top: var(--sc-9);
}

.svc__row--flip {
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}

.svc__row--flip .svc__fig {
  order: 2;
}

.svc__fig {
  margin: 0;
  aspect-ratio: 4/5;
  overflow: clip;
  border-radius: var(--sc-r-lg);
  box-shadow: var(--sc-e2);
  background: var(--bk-line);
}

.svc__fig div {
  height: 112%;
  margin-top: -6%;
}

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

.svc__text>*+* {
  margin-top: var(--sc-4);
}

.svc__text h2 {
  font-size: var(--sc-t-2xl);
}

.svc__price {
  display: inline-block;
  margin-top: var(--sc-5);
  padding: .5rem .9rem;
  border: 1.5px solid var(--sf-orange);
  border-radius: var(--sc-r-md);
  font-family: var(--sc-font-display);
  font-weight: 700;
  color: var(--sf-navy);
  background: rgba(245, 89, 4, 0.06);
}

.svc__price small {
  font-family: var(--sc-font-text);
  font-weight: 400;
  color: var(--sc-ink-soft);
}

.svc--one .svc__row {
  margin-top: 0;
}

.svc--one+.svc--one {
  padding-top: 0;
}

.svc__spec {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .4rem var(--sc-5);
  margin: var(--sc-5) 0 0;
  padding-top: var(--sc-4);
  border-top: 1px solid var(--sc-hairline-strong);
}

.svc__spec dt {
  font-family: var(--sc-font-display);
  font-weight: 700;
  color: var(--sf-navy);
}

.svc__spec dd {
  margin: 0;
  color: var(--sc-ink);
}

.svc__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sc-3) var(--sc-4);
  margin-top: var(--sc-5);
}

.svc__cta span {
  font-size: var(--sc-t-sm);
  color: var(--sc-ink-soft);
}

.g-navy .svc__cta span {
  color: #b9c8dc;
}

/* ---- Comparison Chooser ------------------------------------------------ */
.cmp h2 {
  font-size: var(--sc-t-2xl);
  margin-top: var(--sc-3);
  max-width: 22ch;
}

.cmp__intro {
  margin-top: var(--sc-4);
  color: var(--sc-ink-soft);
  max-width: 56ch;
}

.cmp__table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--sc-7);
  background: var(--sc-surface);
  border-radius: var(--sc-r-lg);
  box-shadow: var(--sc-e1);
  overflow: clip;
}

.cmp__table th,
.cmp__table td {
  text-align: left;
  vertical-align: top;
  padding: var(--sc-4) var(--sc-5);
  border-top: 1px solid var(--sc-hairline);
}

.cmp__table thead th {
  border-top: 0;
  border-bottom: 2px solid var(--sf-navy);
  font-family: var(--sc-font-display);
  font-weight: 800;
  font-size: var(--sc-t-lg);
  color: var(--sf-navy);
  letter-spacing: var(--sc-track-snug);
}

.cmp__table tbody th {
  font-family: var(--sc-font-display);
  font-weight: 700;
  color: var(--sc-ink);
  width: 8rem;
}

.cmp__table td {
  color: var(--sc-ink);
}

.cmp__table td:last-child,
.cmp__table thead th:last-child {
  background: rgba(0, 98, 255, .07);
  border-left: 1px solid rgba(0, 98, 255, 0.12);
}

.cmp__price td {
  font-family: var(--sc-font-display);
  font-weight: 800;
  font-size: var(--sc-t-xl);
  color: var(--sf-navy);
  letter-spacing: var(--sc-track-snug);
  line-height: var(--sc-leading-tight);
}

.cmp__price td small,
.cmp__cardprice small {
  display: block;
  margin-top: .3rem;
  font-family: var(--sc-font-text);
  font-weight: 400;
  font-size: var(--sc-t-sm);
  color: var(--sc-ink-soft);
  letter-spacing: 0;
}

.cmp__cards {
  display: none;
}

.cmp__card {
  background: var(--sc-surface);
  border-radius: var(--sc-r-lg);
  padding: var(--sc-5);
  box-shadow: var(--sc-e1);
}

.cmp__card--courier {
  background: #f0f5ff;
  border: 1px solid rgba(0, 98, 255, 0.15);
}

.cmp__card h3 {
  margin: 0;
  font-family: var(--sc-font-display);
  font-weight: 800;
  font-size: var(--sc-t-xl);
  color: var(--sf-navy);
  letter-spacing: var(--sc-track-snug);
  line-height: var(--sc-leading-tight);
}

.cmp__card dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .4rem var(--sc-4);
  margin: var(--sc-4) 0 0;
  padding-top: var(--sc-4);
  border-top: 1px solid var(--sc-hairline);
}

.cmp__card dt {
  font-family: var(--sc-font-display);
  font-weight: 700;
  color: var(--sc-ink-soft);
  font-size: var(--sc-t-sm);
  padding-top: .15em;
}

.cmp__card dd {
  margin: 0;
  color: var(--sc-ink);
}

.cmp__cardprice {
  margin-top: var(--sc-4);
  padding-top: var(--sc-4);
  border-top: 1px solid var(--sc-hairline);
  font-family: var(--sc-font-display);
  font-weight: 800;
  font-size: var(--sc-t-xl);
  color: var(--sf-navy);
  letter-spacing: var(--sc-track-snug);
  line-height: var(--sc-leading-tight);
}

.terms {
  margin-top: var(--sc-6);
  padding: var(--sc-4) var(--sc-5);
  border-left: 4px solid var(--sf-orange);
  background: var(--sc-surface);
  border-radius: var(--sc-r-md);
  max-width: 72ch;
  color: var(--sc-ink);
}

.terms b {
  font-family: var(--sc-font-display);
  font-weight: 700;
  color: var(--sf-navy);
}

.pick__h {
  font-size: var(--sc-t-xl);
  margin-top: var(--sc-8);
}

.pick {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sc-5);
  margin-top: var(--sc-5);
}

.pick__q {
  background: var(--sc-surface);
  border-radius: var(--sc-r-lg);
  padding: var(--sc-5);
  box-shadow: var(--sc-e1);
}

.pick__q h4 {
  margin: 0;
  font-family: var(--sc-font-display);
  font-weight: 800;
  font-size: var(--sc-t-lg);
  color: var(--sf-navy);
  letter-spacing: var(--sc-track-snug);
  line-height: var(--sc-leading-tight);
}

.pick__q p {
  margin-top: var(--sc-3);
  color: var(--sc-ink-soft);
}

.pick__q a {
  color: var(--sf-blue);
  font-weight: 600;
  text-decoration: none;
}

.pick__q a:hover {
  text-decoration: underline;
}

/* ---- Direct Delivery (Peak Route & Estimator) --------------------------- */
.dd {
  padding-inline: var(--sc-gutter);
}

.dd__stage {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 7fr);
  gap: var(--sc-7);
  align-items: center;
  padding: calc(var(--bar-h) + var(--sc-5)) 0 var(--sc-6);
  max-width: var(--sc-maxw);
  margin-inline: auto;
  width: 100%;
}

.dd__map {
  position: relative;
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
}

.dd__map svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.dd__land {
  fill: var(--sf-navy-deep);
  stroke: rgba(0, 98, 255, 0.35);
  stroke-width: 1.2;
  stroke-linejoin: round;
}

.dd__courier {
  fill: none;
  stroke: #b9c8dc;
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - clamp(0, (var(--sc-p, 0) - .04) / .3, 1));
}

.dd__stop {
  fill: var(--sf-navy);
  stroke: #b9c8dc;
  stroke-width: 3;
  opacity: clamp(0, (var(--sc-p, 0) - .24) / .1, 1);
}

.dd__direct {
  fill: none;
  stroke: var(--sf-orange);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - clamp(0, (var(--sc-p, 0) - .36) / .24, 1));
  filter: drop-shadow(0 2px 8px rgba(245, 89, 4, .6));
}

.dd__pin {
  fill: #ffffff;
  stroke: var(--sf-orange);
  stroke-width: 3;
}

.dd__pin--b {
  opacity: clamp(0, (var(--sc-p, 0) - .55) / .08, 1);
}

.dd__lab {
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: 22px;
  fill: #ffffff;
  paint-order: stroke;
  stroke: var(--sf-navy-deep);
  stroke-width: 6px;
  stroke-linejoin: round;
}

.dd__miles {
  font-family: var(--sc-font-display);
  font-weight: 800;
  font-size: 26px;
  fill: #ffffff;
  text-anchor: middle;
  paint-order: stroke;
  stroke: var(--sf-navy-deep);
  stroke-width: 8px;
  stroke-linejoin: round;
  opacity: clamp(0, (var(--sc-p, 0) - .58) / .08, 1);
}

.dd__key {
  display: flex;
  gap: var(--sc-5);
  margin-top: var(--sc-3);
  font-size: var(--sc-t-sm);
  color: var(--sc-ink-soft);
}

.dd__key span::before {
  content: "";
  display: inline-block;
  width: 1.4rem;
  height: 0;
  border-top: 3px solid #b9c8dc;
  vertical-align: middle;
  margin-right: .45rem;
}

.dd__key span+span::before {
  border-top: 5px solid var(--sf-orange);
}

.dd__h h2 {
  font-size: var(--sc-t-2xl);
  max-width: 16ch;
}

.dd__h p {
  margin-top: var(--sc-4);
  font-size: var(--sc-t-lg);
  color: var(--sc-ink-soft);
  max-width: 40ch;
  transition: none;
}

.dd__slot {
  position: relative;
  min-height: 23rem;
  margin-top: var(--sc-5);
}

.dd__slot>* {
  position: absolute;
  inset-inline: 0;
  top: 0;
}

.dd__beat p {
  font-family: var(--sc-font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem);
  line-height: var(--sc-leading-tight);
  letter-spacing: var(--sc-track-snug);
  max-width: 18ch;
}

.dd__beat p+p {
  margin-top: var(--sc-3);
  font-family: var(--sc-font-text);
  font-weight: 400;
  font-size: var(--sc-t-lg);
  color: var(--sc-ink-soft);
  letter-spacing: 0;
  max-width: 40ch;
}

.est {
  top: auto;
  bottom: 0;
  background: var(--sf-navy-deep);
  border-radius: var(--sc-r-lg);
  padding: var(--sc-5);
  box-shadow: var(--sc-e3), 0 0 0 1px rgba(0, 98, 255, .2);
}

.est__title {
  font-family: var(--sc-font-display);
  font-weight: 800;
  font-size: var(--sc-t-lg);
  color: #ffffff;
  letter-spacing: var(--sc-track-snug);
}

.est__rule {
  margin: .3rem 0 var(--sc-4);
  font-size: var(--sc-t-sm);
  color: #b9c8dc;
}

.est__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sc-3) var(--sc-4);
}

.est__why {
  margin-top: var(--sc-4);
  padding-top: var(--sc-3);
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: var(--sc-t-sm);
  color: #b9c8dc;
}

.est label {
  display: block;
  font-size: var(--sc-t-sm);
  color: var(--sc-ink-soft);
  font-weight: 600;
}

.est input,
.est select {
  width: 100%;
  margin-top: .25rem;
  min-height: 2.75rem;
  padding: .45rem .7rem;
  border-radius: var(--sc-r-md);
  border: 1.5px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .06);
  color: #ffffff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.est input:focus,
.est select:focus {
  border-color: var(--sf-orange);
  outline: none;
  box-shadow: 0 0 0 3px rgba(245, 89, 4, .25);
}

.est input::placeholder {
  color: #8ea3bb;
}

.est select option {
  color: var(--sc-ink);
}

.est__go {
  margin-top: var(--sc-4);
}

.est__out {
  margin-top: var(--sc-4);
  padding-top: var(--sc-4);
  border-top: 1px solid rgba(255, 255, 255, .18);
}

.est__out[hidden],
.est__min[hidden],
.est__callcta[hidden] {
  display: none;
}

.est__break {
  margin-top: var(--sc-2);
  color: #ffffff;
}

.est__min {
  margin-top: var(--sc-2);
  color: var(--sf-orange);
  font-weight: 700;
}

.est__wait,
.est__extra {
  margin-top: var(--sc-2);
  font-size: var(--sc-t-sm);
  color: var(--sc-ink-soft);
}

.est__callcta {
  margin-top: var(--sc-4);
  padding-top: var(--sc-4);
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: var(--sc-t-lg);
}

.est__callcta a {
  color: var(--sf-orange);
  text-decoration: none;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.est__callcta a:hover {
  color: #ffffff;
  opacity: 0.95;
  text-decoration: none;
}

.est__range {
  font-family: var(--sc-font-display);
  font-weight: 800;
  font-size: var(--sc-t-2xl);
  line-height: 1;
  letter-spacing: var(--sc-track-snug);
  color: #ffffff;
}

.est__note {
  margin-top: var(--sc-2);
  font-size: var(--sc-t-sm);
  color: var(--sc-ink-soft);
}

.est__line {
  margin-top: var(--sc-3);
  color: #ffffff;
}

.est__send {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-3);
  margin-top: var(--sc-4);
}

.est__err {
  color: #ffd4d4;
  margin-top: var(--sc-3);
}

.est__err:empty {
  display: none;
}

/* ---- Coverage Rail ----------------------------------------------------- */
.cov__stage {
  display: flex;
  align-items: center;
  overflow: clip;
}

.cov__head {
  position: absolute;
  left: max(var(--sc-gutter), calc((100% - var(--sc-maxw)) / 2));
  top: calc(var(--bar-h) + var(--sc-7));
  max-width: 26rem;
  z-index: 2;
}

.cov__head h2 {
  font-size: var(--sc-t-2xl);
}

.cov__head p {
  margin-top: var(--sc-3);
  color: var(--sc-ink-soft);
  max-width: 28ch;
}

.cov__rail {
  gap: var(--sc-9);
  padding-inline: var(--sc-gutter);
  align-items: baseline;
  padding-top: var(--sc-8);
}

.cov__lead {
  flex: none;
  width: clamp(18rem, 30vw, 28rem);
}

.cov__town {
  flex: none;
  font-family: var(--sc-font-display);
  font-weight: 800;
  font-size: clamp(3rem, 2rem + 6.4vw, 8rem);
  line-height: 1;
  letter-spacing: var(--sc-track-tight);
  color: var(--sf-navy);
  white-space: nowrap;
}

.cov__town small {
  display: block;
  font-family: var(--sc-font-text);
  font-weight: 400;
  font-size: var(--sc-t-base);
  letter-spacing: 0;
  color: var(--sc-ink-soft);
  margin-top: .4rem;
}

.cov__town--rest {
  color: var(--sc-ink-soft);
}

.cov__town--uk {
  color: var(--sf-blue);
}

/* ---- Reviews Section --------------------------------------------------- */
.rev__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sc-6);
  align-items: end;
}

.rev__score {
  font-family: var(--sc-font-display);
  font-weight: 800;
  font-size: var(--sc-t-4xl);
  line-height: .9;
  letter-spacing: var(--sc-track-tight);
  color: var(--sf-navy);
}

.rev__score small {
  display: block;
  font-size: var(--sc-t-lg);
  font-weight: 700;
  letter-spacing: var(--sc-track-snug);
  margin-top: var(--sc-3);
}

.rev__stars {
  color: var(--sf-orange);
  letter-spacing: .1em;
  font-size: var(--sc-t-lg);
}

.rev__head p {
  color: var(--sc-ink-soft);
  max-width: 36ch;
}

.rev__head a {
  color: var(--sf-blue);
  font-weight: 600;
  text-decoration: none;
}

.rev__head a:hover {
  text-decoration: underline;
}

.rev__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sc-5);
  margin-top: var(--sc-8);
}

.rev__q {
  grid-column: span 2;
  background: var(--sc-surface);
  border-radius: var(--sc-r-lg);
  padding: var(--sc-6);
  box-shadow: var(--sc-e1);
  display: flex;
  flex-direction: column;
  gap: var(--sc-4);
  margin: 0;
}

.rev__q:nth-child(1),
.rev__q:nth-child(4) {
  grid-column: span 3;
}

.rev__q:nth-child(6) {
  grid-column: span 2;
}

.rev__q p {
  font-size: var(--sc-t-lg);
  line-height: 1.45;
}

.rev__q:nth-child(1) p,
.rev__q:nth-child(4) p {
  font-size: var(--sc-t-xl);
  font-family: var(--sc-font-display);
  font-weight: 700;
  letter-spacing: var(--sc-track-snug);
  line-height: 1.25;
  color: var(--sf-navy);
}

.rev__q figcaption {
  margin-top: auto;
  color: var(--sc-ink-soft);
  font-size: var(--sc-t-sm);
}

.rev__q figcaption b {
  color: var(--sc-ink);
  font-weight: 600;
}

/* ---- Gallery Section --------------------------------------------------- */
.gal {
  padding-block: var(--sc-section) 0;
  padding-inline: var(--sc-gutter);
  overflow: clip;
}

.gal__lead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sc-4);
}

.gal__lead h2 {
  font-size: var(--sc-t-2xl);
}

.gal__lead p {
  color: var(--sc-ink-soft);
  max-width: 34ch;
}

.gal__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sc-5);
  margin-top: var(--sc-7);
  padding-bottom: var(--sc-8);
}

.gal__col {
  display: flex;
  flex-direction: column;
  gap: var(--sc-5);
}

.gal__col:nth-child(2) {
  padding-top: var(--sc-8);
}

.gal__col:nth-child(3) {
  padding-top: var(--sc-6);
}

.gal figure {
  margin: 0;
  border-radius: var(--sc-r-lg);
  overflow: clip;
  box-shadow: var(--sc-e2);
  background: var(--bk-line);
}

.gal img {
  width: 100%;
  height: auto;
}

/* ---- FAQ Section ------------------------------------------------------- */
.faq .sc-wrap {
  max-width: var(--sc-maxw);
}

.faq h2 {
  font-size: var(--sc-t-2xl);
}

.faq details {
  border-top: 1px solid var(--sc-hairline-strong);
  padding: var(--sc-4) 0;
}

.faq details:last-of-type {
  border-bottom: 1px solid var(--sc-hairline-strong);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--sc-4);
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: var(--sc-t-lg);
  color: var(--sc-ink);
  padding: .25rem 0;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  color: var(--sf-orange);
  font-weight: 800;
  flex: none;
}

.faq details[open] summary::after {
  content: "\2013";
}

.faq details p {
  margin-top: var(--sc-3);
  color: var(--sc-ink-soft);
  max-width: 60ch;
}

/* ---- Close & Quote Section --------------------------------------------- */
.close__stage {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--bar-h) + var(--sc-6)) var(--sc-gutter) clamp(2.5rem, 5vh, 4rem);
}

.close__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sc-8);
  max-width: var(--sc-maxw);
  margin-inline: auto;
  width: 100%;
}

.close__lead h2 {
  font-size: var(--sc-t-3xl);
}

.close__lead p {
  margin-top: var(--sc-4);
  color: var(--sc-ink-soft);
  max-width: 34ch;
}

.close__tel {
  display: block;
  margin-top: var(--sc-6);
  font-family: var(--sc-font-display);
  font-weight: 800;
  font-size: clamp(2rem, 1.4rem + 2.8vw, 3.6rem);
  letter-spacing: var(--sc-track-tight);
  color: #ffffff;
  text-decoration: none;
  line-height: 1;
}

.close__tel:hover {
  color: var(--sf-orange);
}

.close__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-3);
  margin-top: var(--sc-5);
}

.close__email {
  margin-top: 1.25rem;
}

.close__email-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--sc-font-display, "Plus Jakarta Sans", system-ui, sans-serif);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  transition: color var(--sc-d-fast, 0.2s) ease, text-decoration-color var(--sc-d-fast, 0.2s) ease;
}

.close__email-link svg {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  color: var(--sf-orange, #f46a25);
  transition: transform var(--sc-d-fast, 0.2s) ease;
}

.close__email-link:hover {
  color: #ffffff;
  text-decoration-color: var(--sf-orange, #f46a25);
}

.close__email-link:hover svg {
  transform: scale(1.1);
}

.qf {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sc-3) var(--sc-4);
}

.qf label {
  display: block;
  font-size: var(--sc-t-sm);
  color: var(--sc-ink-soft);
  font-weight: 600;
}

.qf input,
.qf textarea,
.qf select {
  width: 100%;
  margin-top: .25rem;
  min-height: 2.75rem;
  padding: .5rem .7rem;
  border-radius: var(--sc-r-md);
  border: 1.5px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .06);
  color: #ffffff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.qf input:focus,
.qf textarea:focus,
.qf select:focus {
  border-color: var(--sf-orange);
  outline: none;
  box-shadow: 0 0 0 3px rgba(245, 89, 4, .25);
}

.qf textarea {
  min-height: 6rem;
  resize: vertical;
}

.qf .qf__full {
  grid-column: 1 / -1;
}

.qf__hp {
  position: absolute;
  left: -9999px;
}

.qf__foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sc-4);
  margin-top: var(--sc-2);
}

.qf__msg {
  grid-column: 1 / -1;
  margin: 0;
  min-height: 1.2em;
  font-weight: 600;
  font-size: var(--sc-t-sm);
  color: var(--sf-orange);
}

.qf__msg:empty {
  display: none;
}

.qf__alert {
  grid-column: 1 / -1;
  padding: 12px 16px;
  border-radius: var(--sc-r-md);
  margin-bottom: 12px;
  font-weight: 600;
}

.qf__alert--success {
  background: rgba(46, 125, 50, 0.2);
  border: 1px solid #4caf50;
  color: #a5d6a7;
}

.qf__req {
  color: var(--sf-orange);
  font-weight: 700;
  margin-left: 2px;
}

.qf__hint {
  color: var(--sc-ink-soft);
  font-size: var(--sc-t-sm);
}

/* ---- Footer ------------------------------------------------------------ */
.foot {
  margin-top: auto;
  padding-top: var(--sc-8);
  padding-bottom: var(--sc-4);
  max-width: var(--sc-maxw);
  margin-inline: auto;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-3) var(--sc-5);
  font-size: var(--sc-t-sm);
  color: var(--sc-ink-soft);
}

.foot__start {
  display: flex;
  align-items: center;
  gap: var(--sc-4);
  flex-wrap: wrap;
}

.foot__mark {
  height: auto;
  color: #ffffff;
  display: flex;
  align-items: center;
}

.foot__mark svg {
  height: 100%;
  width: auto;
}

.foot a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.18s ease;
}

.foot a:hover {
  color: var(--sf-orange);
}

.foot__notes {
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  line-height: 1.4;
}

.foot__sep {
  opacity: 0.45;
  user-select: none;
}

.foot__credit {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.foot__socials {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}

.foot__socials .bar__social {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(4px);
}

.foot__socials .bar__social:hover {
  color: #fff;
  border-color: transparent;
}

/* ---- Mobile Call Bar --------------------------------------------------- */
.callbar {
  display: none;
}

@media (max-width: 899px) {
  .callbar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: var(--sc-z-chrome);
    display: flex;
    gap: var(--sc-2);
    padding: .6rem var(--sc-4) calc(.6rem + env(safe-area-inset-bottom));
    background: var(--sc-surface);
    box-shadow: 0 -1px 0 var(--sc-hairline), var(--sc-e2);
    transform: translateY(110%);
    transition: transform var(--sc-d-slow) var(--sc-ease-out);
  }

  .callbar.is-on {
    transform: none;
  }

  .callbar .btn {
    flex: 1;
    justify-content: center;
  }

  body {
    padding-bottom: 4.5rem;
  }
}

/* ---- Responsive Layouts ------------------------------------------------ */
@media (max-width: 899px) {
  :root {
    --bar-h: 3.5rem;
  }

  .bar,
  .bar__wrap {
    gap: var(--sc-3);
  }

  .bar__nav {
    display: none;
  }

  .bar .btn,
  .bar__wrap .btn {
    margin-left: auto;
  }

  .bar__socials {
    margin-left: auto;
    gap: 0.25rem;
  }

  .bar__social {
    width: 1.75rem;
    height: 1.75rem;
  }

  .bar__social svg {
    width: 0.88rem;
    height: 0.88rem;
  }

  .hero__stage {
    min-height: 100svh;
  }

  .hero__h {
    font-size: clamp(1.9rem, 1.1rem + 5vw, 2.6rem);
    max-width: none;
  }

  .hero__tag,
  .hero__line,
  .hero__sub {
    display: none;
  }

  .hero__tagline {
    display: block;
    margin-top: var(--sc-3);
    font-family: var(--sc-font-display);
    font-weight: 800;
    font-size: var(--sc-t-lg);
    color: var(--sf-navy);
    line-height: var(--sc-leading-tight);
    letter-spacing: var(--sc-track-snug);
  }

  .hero__cta {
    margin-top: var(--sc-5);
  }

  .hero .sc-copy {
    bottom: clamp(1.25rem, 4vh, 3rem);
  }

  .svc__row,
  .svc__row--flip {
    grid-template-columns: 1fr;
    gap: var(--sc-6);
    margin-top: var(--sc-8);
  }

  .svc__row--flip .svc__fig {
    order: 0;
  }

  .svc__fig {
    aspect-ratio: 4/3;
  }

  .svc__fig div {
    height: 100%;
    margin: 0;
  }

  .svc__spec {
    grid-template-columns: 1fr;
    gap: .15rem;
  }

  .svc__spec dd {
    margin-bottom: .5rem;
  }

  .cmp__table {
    display: none;
  }

  .cmp__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sc-4);
    margin-top: var(--sc-6);
  }

  .pick {
    grid-template-columns: 1fr;
    gap: var(--sc-4);
  }

  .dd__stage {
    grid-template-columns: 1fr;
    gap: 0;
    padding: calc(var(--bar-h) + var(--sc-5)) 0 var(--sc-7);
    min-height: 0;
  }

  .dd__copy {
    display: contents;
  }

  .dd__h {
    order: 1;
  }

  .dd__h p {
    display: none;
  }

  .dd__map {
    order: 2;
    position: sticky;
    top: var(--bar-h);
    z-index: 1;
    max-width: none;
    margin: var(--sc-5) 0 0;
    padding: var(--sc-3) 0 var(--sc-2);
    background: var(--sf-navy);
  }

  .dd__map svg {
    height: min(44svh, 400px);
    width: auto;
    max-width: 100%;
    margin-inline: auto;
  }

  .dd__key {
    justify-content: center;
    margin-top: var(--sc-2);
  }

  .dd__slot {
    order: 3;
    min-height: 0;
    margin-top: var(--sc-6);
  }

  .dd__slot>*,
  .est {
    position: static;
  }

  .dd .dd__slot .est {
    position: relative;
    z-index: 2;
  }

  .dd__slot>*+* {
    margin-top: var(--sc-7);
  }

  .dd__beat p {
    max-width: none;
  }

  .hero .sc-scrim {
    background: linear-gradient(to top, rgba(246, 247, 249, .97) 0%, rgba(246, 247, 249, .9) 30%, rgba(246, 247, 249, .62) 48%, rgba(246, 247, 249, .15) 60%, transparent 68%);
  }

  .est__grid {
    grid-template-columns: 1fr 1fr;
  }

  .cov__head {
    top: calc(var(--bar-h) + var(--sc-6));
    max-width: min(22rem, 84vw);
  }

  .cov__rail {
    gap: var(--sc-6);
    padding-top: var(--sc-6);
  }

  .cov__lead {
    width: 62vw;
  }

  .cov__town {
    font-size: clamp(2.4rem, 1.4rem + 6vw, 3.4rem);
  }

  .rev__head {
    grid-template-columns: 1fr;
  }

  .rev__grid {
    grid-template-columns: 1fr;
    gap: var(--sc-4);
  }

  .rev__q,
  .rev__q:nth-child(1),
  .rev__q:nth-child(4),
  .rev__q:nth-child(6) {
    grid-column: auto;
    padding: var(--sc-5);
  }

  .gal__cols {
    grid-template-columns: 1fr 1fr;
    gap: var(--sc-3);
  }

  .gal__col:nth-child(2) {
    padding-top: var(--sc-7);
  }

  .gal__col:nth-child(3) {
    display: contents;
  }

  .close__grid {
    grid-template-columns: 1fr;
    gap: var(--sc-7);
  }

  .close__stage {
    min-height: 0;
    padding-bottom: var(--sc-8);
  }

  .qf {
    grid-template-columns: 1fr;
  }

  .foot {
    padding-top: var(--sc-7);
  }

  .foot .foot__credit {
    margin-left: 0;
  }

  .m .hero [data-sc-cue],
  .m .dd [data-sc-cue],
  .m .close [data-sc-cue] {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .m .dd__courier,
  .m .dd__direct {
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.4s var(--sc-ease-out);
  }

  .m .dd__stop,
  .m .dd__pin--b,
  .m .dd__miles {
    opacity: 0;
    transition: opacity .5s var(--sc-ease-out);
  }

  .m .dd__map.sc-in .dd__courier {
    stroke-dashoffset: 0;
  }

  .m .dd__map.sc-in .dd__stop {
    opacity: 1;
    transition-delay: .9s;
  }

  .m .dd__map.sc-in .dd__direct {
    stroke-dashoffset: 0;
    transition-delay: 1.2s;
  }

  .m .dd__map.sc-in .dd__pin--b,
  .m .dd__map.sc-in .dd__miles {
    opacity: 1;
    transition-delay: 2.2s;
  }
}

@media (max-width: 480px) {
  .est__grid {
    grid-template-columns: 1fr;
  }

  .trust__list {
    flex-wrap: wrap;
    padding: var(--sc-5) 0;
    gap: var(--sc-3) var(--sc-5);
    justify-content: flex-start;
  }
}

/* ---- No JavaScript Fallbacks ------------------------------------------- */
.no-js [data-sc-cue],
.no-js [data-sc-in],
.no-js [data-sc-stagger]>* {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.no-js [data-sc-reveal] {
  clip-path: none !important;
}

.no-js .dd__courier,
.no-js .dd__direct {
  stroke-dashoffset: 0 !important;
}

.no-js .dd__stop,
.no-js .dd__pin--b,
.no-js .dd__miles,
.no-js .cov__town {
  opacity: 1 !important;
}

.no-js .hero__line line {
  stroke-dashoffset: 0;
}

.no-js .hero__tag {
  display: none;
}

.no-js .hero__tagline {
  display: block;
}

.no-js .dd__slot>*,
.no-js .est {
  position: static;
}

.no-js .dd__slot>*+* {
  margin-top: var(--sc-6);
}

.no-js .dd__slot {
  min-height: 0;
}

/* ---- Reduced Motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-sc-cue] {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .dd__courier,
  .dd__direct,
  .hero__line line {
    stroke-dashoffset: 0 !important;
  }

  .dd__stop,
  .dd__pin--b,
  .dd__miles,
  .cov__town {
    opacity: 1 !important;
  }

  .hero__video {
    display: none;
  }

  .hero__tag,
  .hero__line {
    display: none;
  }

  .hero__tagline {
    display: block;
  }

  .callbar {
    transition: none;
  }
}

/* ---- Brand Header & Footer Logos --------------------------------------- */
.bar__logo {
  height: 38px;
  width: auto;
  object-fit: contain;
  border-radius: 4px;
}

.foot__logo {
  height: 28px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.98);
  padding: 2px 7px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  display: block;
}

/* ---- Quote Form Utilities ---------------------------------------------- */
.qf__alert {
  grid-column: 1 / -1;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 12px;
  font-weight: 600;
}

.qf__alert--success {
  background: rgba(46, 125, 50, 0.2);
  border: 1px solid #4caf50;
  color: #a5d6a7;
}

.qf__req {
  color: #ff8a80;
}

.qf__hp {
  display: none !important;
}

.qf__msg {
  grid-column: 1 / -1;
  margin: 0;
  min-height: 1.2em;
  font-weight: 600;
}

.qf__msg--sending {
  color: var(--sf-orange);
}

.qf__msg--success {
  color: #81c784;
}

.qf__msg--error {
  color: #ff8a80;
}

.qf__hint {
  color: var(--sc-ink-soft);
  font-size: var(--sc-t-sm);
}