/* ==========================================================================
   Darius Removals — design system
   --------------------------------------------------------------------------
   1.  Tokens
   2.  Reset & base
   3.  Typography
   4.  Layout primitives
   5.  Buttons
   6.  Section headers & shared decoration
   7.  Cards
   8.  Header, top bar, navigation, mobile menu
   9.  Heroes
   10. Home page sections
   11. Content blocks (split, feature list, steps, areas, FAQ, legal)
   12. Forms
   13. Footer
   14. Breadcrumbs, 404, mobile action bar
   15. Motion & accessibility
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
    /* Brand ------------------------------------------------------------- */
    --primary:        #071a33;   /* deep navy — dark sections            */
    --primary-dark:   #041225;   /* darkest navy — footer, gradients     */
    --primary-mid:    #0b2854;   /* logo navy — mid tone                 */
    --blue:           #1769ff;   /* action / trust blue — fills, icons   */
    --blue-ink:       #1257d8;   /* text-safe blue: >=4.5:1 on off-white */
    --blue-dark:      #0b47b8;
    --blue-soft:      #e8f0ff;
    --accent:         #ff7a00;   /* CTA orange — used sparingly          */
    --accent-dark:    #e56a00;
    --accent-soft:    #fff3e6;

    /* Neutrals ---------------------------------------------------------- */
    --white:          #ffffff;
    --light:          #f6f8fb;
    --grey-100:       #eef2f7;
    --grey-200:       #e9edf3;
    --text:           #111827;
    --muted:          #5c6675;
    --line:           #e4e9f1;
    --line-dark:      rgba(255, 255, 255, .12);
    --on-dark:        #c3d0e2;

    /* Typography -------------------------------------------------------- */
    --font-heading: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

    --fs-hero:  clamp(2.15rem, 1.15rem + 4.3vw, 4.25rem);
    --fs-h1:    clamp(2rem,    1.35rem + 2.7vw, 3.35rem);
    --fs-h2:    clamp(1.75rem, 1.25rem + 2.1vw, 2.85rem);
    --fs-h3:    clamp(1.2rem,  1.08rem + .5vw,  1.45rem);
    --fs-h4:    clamp(1.05rem, 1rem + .25vw,    1.18rem);
    --fs-lead:  clamp(1.03rem, .99rem + .3vw,   1.2rem);
    --fs-body:  1rem;
    --fs-sm:    .925rem;
    --fs-xs:    .8rem;

    /* Space ------------------------------------------------------------- */
    --container:     1200px;
    --container-wide:1340px;
    --container-pad: clamp(1.15rem, .6rem + 1.8vw, 2rem);
    --section-y:     clamp(3.75rem, 2.4rem + 4.6vw, 7rem);
    --section-y-sm:  clamp(2.75rem, 2rem + 2.8vw, 4.5rem);

    /* Radii ------------------------------------------------------------- */
    --r-sm:  8px;
    --r-md:  12px;
    --r-lg:  18px;
    --r-xl:  24px;
    --r-pill:999px;

    /* Shadows ----------------------------------------------------------- */
    --shadow-xs: 0 1px 2px rgba(7, 26, 51, .06);
    --shadow-sm: 0 1px 2px rgba(7, 26, 51, .05), 0 4px 12px rgba(7, 26, 51, .06);
    --shadow-md: 0 4px 10px rgba(7, 26, 51, .06), 0 14px 32px rgba(7, 26, 51, .09);
    --shadow-lg: 0 10px 24px rgba(7, 26, 51, .09), 0 30px 64px rgba(7, 26, 51, .14);
    --shadow-accent: 0 8px 20px rgba(255, 122, 0, .32);
    --shadow-blue:   0 8px 20px rgba(23, 105, 255, .28);

    /* Motion ------------------------------------------------------------ */
    --t-fast: .18s cubic-bezier(.4, 0, .2, 1);
    --t:      .3s  cubic-bezier(.4, 0, .2, 1);
    --t-slow: .5s  cubic-bezier(.22, 1, .36, 1);

    /* Chrome ------------------------------------------------------------ */
    --topbar-h: 42px;
    --nav-h:    78px;
    --header-h: calc(var(--topbar-h) + var(--nav-h));
}

@media (max-width: 991px) {
    :root {
        --topbar-h: 0px;
        --nav-h:    68px;
    }
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 20px);
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.7;
    color: var(--text);
    background: var(--white);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.is-locked {
    overflow: hidden;
    touch-action: none;
}

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

/* Link text uses --blue-ink rather than --blue: at body and small sizes the
   brighter blue only reaches 4.39:1 on the off-white section background, just
   under the WCAG AA threshold. --blue is kept for fills, icons and borders,
   where the 3:1 non-text requirement applies. */
a {
    color: var(--blue-ink);
    text-decoration: none;
    transition: color var(--t-fast);
}

a:hover { color: var(--blue-dark); }

/* Links sitting inside body copy must be identifiable by more than colour
   (WCAG 1.4.1), so they carry an underline. Buttons, arrow links, nav items,
   card links and the footer signature are excluded — those read as links from
   their shape and position, not their colour. */
p a:not(.btn):not(.link-arrow):not(.credit),
.ticks a,
.faq__body a {
    text-decoration: underline;
    text-underline-offset: .18em;
    text-decoration-thickness: .06em;
}

p a:not(.btn):not(.link-arrow):not(.credit):hover,
.ticks a:hover,
.faq__body a:hover { text-decoration-thickness: .12em; }

ul, ol { margin: 0; padding: 0; }

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

button { cursor: pointer; border: 0; background: none; }

hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 2.5rem 0;
}

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

/* ==========================================================================
   3. Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: -.02em;
    color: var(--text);
    margin: 0 0 .6em;
    text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -.012em; }
h4 { font-size: var(--fs-h4); line-height: 1.35; letter-spacing: -.01em; font-weight: 700; }

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

.lead {
    font-size: var(--fs-lead);
    line-height: 1.72;
    color: var(--muted);
}

.text-muted  { color: var(--muted); }
.text-center { text-align: center; }

strong, b { font-weight: 700; color: inherit; }

/* Dark surfaces ------------------------------------------------------- */
.on-dark,
.on-dark h1,
.on-dark h2,
.on-dark h3,
.on-dark h4 { color: var(--white); }

.on-dark p,
.on-dark li,
.on-dark .lead { color: var(--on-dark); }

.on-dark a { color: var(--white); }

/* ==========================================================================
   4. Layout primitives
   ========================================================================== */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: 860px; }

/* `clip` rather than `hidden`: it contains the horizontal offset that AOS
   fade-left / fade-right apply before an element animates in, without creating
   a scroll container (which would break the sticky table of contents). The
   vertical axis stays visible so cards that sit proud of their section — like
   .split__tag — are not cut off. */
.section {
    padding-block: var(--section-y);
    overflow-x: clip;
}
.section--sm { padding-block: var(--section-y-sm); }
.section--tight-top { padding-top: 0; }

.section--light { background: var(--light); }
.section--grey  { background: var(--grey-100); }

/* Dark section with a soft directional glow so large navy blocks don't
   read as flat. */
.section--dark {
    position: relative;
    isolation: isolate;
    background: linear-gradient(165deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--white);
    overflow: hidden;
}

.section--dark::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(70ch 60ch at 12% 0%,   rgba(23, 105, 255, .22), transparent 62%),
        radial-gradient(60ch 50ch at 92% 100%, rgba(255, 122, 0, .13),  transparent 60%);
}

/* Section separated from the next by a diagonal navy edge. */
.section--dark.has-slant { padding-bottom: calc(var(--section-y) + 3vw); }

/* Grids ---------------------------------------------------------------- */
.grid { display: grid; gap: clamp(1.15rem, .8rem + 1.1vw, 1.85rem); }

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 991px) {
    .grid--3,
    .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
    .grid--2,
    .grid--3,
    .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

.stack   { display: grid; gap: 1rem; }
.cluster { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: -100%;
    z-index: 2000;
    padding: .85rem 1.4rem;
    background: var(--primary);
    color: var(--white);
    font-weight: 700;
    border: 2px solid var(--accent);
    border-top: 0;
    border-radius: 0 0 var(--r-md) var(--r-md);
    transition: top var(--t-fast);
}

.skip-link:focus {
    top: 0;
    color: var(--white);
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .95rem 1.8rem;
    min-height: 52px;
    font-family: var(--font-heading);
    font-size: .97rem;
    font-weight: 700;
    letter-spacing: .005em;
    line-height: 1.2;
    text-align: center;
    border-radius: var(--r-md);
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform var(--t-fast), box-shadow var(--t), background var(--t), border-color var(--t), color var(--t);
    will-change: transform;
}

.btn i,
.btn svg { font-size: .95em; }

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

/* Deep navy label rather than white. White on the brand orange only reaches
   2.6:1, well under WCAG AA for text; navy reads 5.6–8.1:1 across the whole
   gradient, so the brand orange is kept exactly as specified and the label is
   still legible in bright outdoor light. */
.btn--primary {
    background: linear-gradient(135deg, #ff9026 0%, var(--accent) 62%, var(--accent-dark) 100%);
    color: var(--primary-dark);
    box-shadow: var(--shadow-accent);
}

.btn--primary:hover {
    color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 122, 0, .42);
}

/* Gradient starts at --blue rather than a lighter tint: white label text on
   the lighter stop only reached 3.9:1. From --blue down it is 4.7:1 or better. */
.btn--secondary {
    background: linear-gradient(135deg, var(--blue) 0%, #0f52d0 58%, var(--blue-dark) 100%);
    color: var(--white);
    box-shadow: var(--shadow-blue);
}

.btn--secondary:hover {
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(23, 105, 255, .4);
}

.btn--light {
    background: var(--white);
    color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.btn--light:hover {
    color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn--outline {
    background: transparent;
    color: var(--white);
    border-color: rgba(255, 255, 255, .42);
    backdrop-filter: blur(2px);
}

.btn--outline:hover {
    color: var(--white);
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .8);
    transform: translateY(-2px);
}

.btn--outline-dark {
    background: transparent;
    color: var(--primary);
    border-color: var(--line);
}

.btn--outline-dark:hover {
    color: var(--primary);
    border-color: var(--blue);
    background: var(--blue-soft);
    transform: translateY(-2px);
}

.btn--block { width: 100%; }
.btn--lg { padding: 1.1rem 2.15rem; min-height: 58px; font-size: 1.03rem; }
.btn--sm { padding: .65rem 1.2rem; min-height: 44px; font-size: .88rem; }

.btn[disabled],
.btn.is-loading {
    opacity: .72;
    cursor: not-allowed;
    transform: none;
}

/* Inline text link with a moving arrow ---------------------------------- */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: .93rem;
    color: var(--blue-ink);
}

.link-arrow i { transition: transform var(--t); }
.link-arrow:hover i { transform: translateX(4px); }

.on-dark .link-arrow { color: #7fb0ff; }
.on-dark .link-arrow:hover { color: var(--white); }

/* ==========================================================================
   6. Section headers & shared decoration
   ========================================================================== */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 1rem;
    font-family: var(--font-heading);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--blue-ink);
}

.eyebrow::before {
    content: '';
    width: 30px;
    height: 3px;
    border-radius: 2px;
    background: var(--accent);
    flex: none;
}

/* The hero sits on a photographic navy wash, so its eyebrow needs the light
   treatment even though the markup is not inside an .on-dark block. */
.on-dark .eyebrow,
.hero .eyebrow { color: #8fbaff; }

.section-head {
    max-width: 720px;
    margin-bottom: clamp(2.25rem, 1.6rem + 2vw, 3.5rem);
}

.section-head--center {
    margin-inline: auto;
    text-align: center;
}

.section-head--center .eyebrow { justify-content: center; }

.section-head h2 { margin-bottom: .7rem; }
.section-head .lead { margin-bottom: 0; }

/* Route motif — echoes the speed lines in the logo ---------------------- */
.route {
    display: flex;
    align-items: center;
    gap: .85rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: .95rem;
    color: var(--white);
}

.route__pin {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .25);
    color: var(--accent);
    font-size: .85rem;
}

.route__track {
    flex: 1 1 auto;
    height: 2px;
    min-width: 28px;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, .55) 50%, transparent 0);
    background-size: 14px 2px;
    background-repeat: repeat-x;
    position: relative;
}

.route__track::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 50%;
    translate: 0 -50%;
    border: 5px solid transparent;
    border-left-color: var(--accent);
}

/* Small pill badge ------------------------------------------------------ */
.pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    border-radius: var(--r-pill);
    font-family: var(--font-heading);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
    background: var(--blue-soft);
    color: var(--blue-dark);
}

.pill--accent { background: var(--accent-soft); color: #b45200; }

.pill--dark {
    background: rgba(255, 255, 255, .1);
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, .18);
}

.pill i { color: var(--accent); }

/* ==========================================================================
   7. Cards
   ========================================================================== */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(1.5rem, 1.2rem + .9vw, 2.15rem);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(23, 105, 255, .22);
}

.card h3 { margin-bottom: .55rem; }

.card p {
    color: var(--muted);
    font-size: var(--fs-sm);
    margin-bottom: 1.15rem;
}

.card .link-arrow { margin-top: auto; }

/* Card variant used on dark backgrounds -------------------------------- */
.card--dark {
    background: rgba(255, 255, 255, .045);
    border-color: var(--line-dark);
    box-shadow: none;
    backdrop-filter: blur(4px);
}

.card--dark h3 { color: var(--white); }
.card--dark p  { color: var(--on-dark); }

.card--dark:hover {
    background: rgba(255, 255, 255, .075);
    border-color: rgba(255, 255, 255, .26);
    box-shadow: 0 22px 48px rgba(0, 0, 0, .3);
}

/* Service card — photo on top, orange rule reveals on hover ------------- */
.service-card {
    overflow: hidden;
    padding: 0;
}

.service-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--grey-100);
}

.service-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow);
}

.service-card:hover .service-card__media img { transform: scale(1.06); }

.service-card__media::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 55%;
    background: linear-gradient(to top, rgba(4, 18, 37, .78), transparent);
}

.service-card__badge {
    position: absolute;
    left: 1.15rem;
    bottom: 1.15rem;
    z-index: 1;
}

.service-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: clamp(1.4rem, 1.1rem + .8vw, 1.9rem);
}

.service-card::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), #ffb066);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t);
    z-index: 2;
}

.service-card:hover::after { transform: scaleX(1); }

/* Icon tile ------------------------------------------------------------- */
.icon-tile {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-bottom: 1.25rem;
    flex: none;
    border-radius: 16px;
    font-size: 1.42rem;
    color: var(--white);
    background: linear-gradient(140deg, #3d86ff 0%, var(--blue) 55%, var(--blue-dark) 100%);
    box-shadow: var(--shadow-blue);
    transition: transform var(--t);
}

.card:hover .icon-tile { transform: translateY(-2px) rotate(-4deg); }

/* Navy glyph on the orange tile, matching the primary button treatment. */
.icon-tile--accent {
    background: linear-gradient(140deg, #ffa347 0%, var(--accent) 55%, var(--accent-dark) 100%);
    color: var(--primary-dark);
    box-shadow: var(--shadow-accent);
}

.icon-tile--ghost {
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .2);
    box-shadow: none;
    color: var(--accent);
}

.icon-tile--sm { width: 46px; height: 46px; font-size: 1.1rem; border-radius: 13px; margin-bottom: 0; }

/* Numbered step card ---------------------------------------------------- */
.steps {
    position: relative;
    display: grid;
    gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Connector drawn behind the step numbers on desktop. */
.steps::before {
    content: '';
    position: absolute;
    top: 34px;
    left: 16%;
    right: 16%;
    height: 2px;
    background-image: linear-gradient(90deg, var(--line) 55%, transparent 0);
    background-size: 12px 2px;
    background-repeat: repeat-x;
}

.step { position: relative; text-align: center; }

.step__num {
    position: relative;
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin: 0 auto 1.4rem;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--line);
    font-family: var(--font-heading);
    font-size: 1.28rem;
    font-weight: 800;
    color: var(--primary);
    box-shadow: var(--shadow-sm);
    transition: transform var(--t), border-color var(--t), color var(--t), background var(--t);
}

.step:hover .step__num {
    background: linear-gradient(140deg, #ff9026, var(--accent));
    border-color: transparent;
    color: var(--primary-dark);
    transform: translateY(-4px);
    box-shadow: var(--shadow-accent);
}

.step h3 { margin-bottom: .5rem; }
.step p { color: var(--muted); font-size: var(--fs-sm); margin: 0; }

@media (max-width: 767px) {
    .steps { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .steps::before {
        top: 34px;
        bottom: 34px;
        left: 50%;
        right: auto;
        width: 2px;
        height: auto;
        translate: -50% 0;
        background-image: linear-gradient(180deg, var(--line) 55%, transparent 0);
        background-size: 2px 12px;
        background-repeat: repeat-y;
    }
}

/* Feature row — icon beside text ---------------------------------------- */
.feature {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
}

.feature h3 { font-size: 1.08rem; margin-bottom: .3rem; }
.feature p { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.on-dark .feature p { color: var(--on-dark); }

/* Tick list -------------------------------------------------------------- */
.ticks { list-style: none; display: grid; gap: .8rem; }

.ticks li {
    position: relative;
    padding-left: 2rem;
    font-size: var(--fs-sm);
    color: var(--muted);
    line-height: 1.6;
}

.ticks li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: .12em;
    display: grid;
    place-items: center;
    width: 21px;
    height: 21px;
    font-size: .62rem;
    border-radius: 50%;
    color: var(--white);
    background: var(--blue);
}

.ticks--accent li::before { background: var(--accent); }
.on-dark .ticks li { color: var(--on-dark); }

.ticks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 639px) { .ticks--2 { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   8. Header, top bar, navigation, mobile menu
   ========================================================================== */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
    transition: background var(--t), box-shadow var(--t), backdrop-filter var(--t);
}

/* Scrim so white nav text stays readable over a photographic hero.
   It extends below the header and fades out there, which keeps a usable
   contrast ratio across the whole navigation row — even where the photograph
   underneath is bright — without leaving a visible band at the bottom edge. */
.site-header::before {
    content: '';
    position: absolute;
    inset: 0 0 -48px 0;
    background: linear-gradient(
        to bottom,
        rgba(4, 18, 37, .90) 0%,
        rgba(4, 18, 37, .72) 62%,
        rgba(4, 18, 37, 0) 100%
    );
    opacity: 1;
    transition: opacity var(--t);
    pointer-events: none;
}

.site-header.is-scrolled {
    background: rgba(7, 26, 51, .97);
    box-shadow: 0 6px 26px rgba(4, 18, 37, .28);
    backdrop-filter: blur(10px);
}

.site-header.is-scrolled::before { opacity: 0; }

/* Top bar --------------------------------------------------------------- */
.topbar {
    height: var(--topbar-h);
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    font-size: .82rem;
    color: var(--on-dark);
    transition: height var(--t), opacity var(--t), border-color var(--t);
}

.site-header.is-scrolled .topbar {
    height: 0;
    opacity: 0;
    border-color: transparent;
}

.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    height: var(--topbar-h);
}

.topbar__list {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    list-style: none;
    flex-wrap: wrap;
}

.topbar a {
    color: var(--on-dark);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
}

.topbar a:hover { color: var(--white); }
.topbar i { color: var(--accent); font-size: .82em; }

.topbar__hours {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
}

@media (max-width: 991px) {
    .topbar { display: none; }
}

/* Navbar ---------------------------------------------------------------- */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    height: var(--nav-h);
    transition: height var(--t);
}

.brand {
    display: inline-flex;
    align-items: center;
    flex: none;
    z-index: 2;
}

.brand img {
    width: auto;
    height: clamp(30px, 2.1vw, 40px);
    transition: height var(--t);
}

.site-header.is-scrolled .brand img { height: clamp(28px, 1.9vw, 35px); }

/* Desktop navigation ---------------------------------------------------- */
.nav {
    display: flex;
    align-items: center;
    gap: clamp(.25rem, .9vw, 1.4rem);
    list-style: none;
    margin-left: auto;
}

.nav__link {
    position: relative;
    display: inline-block;
    padding: .55rem .3rem;
    font-family: var(--font-heading);
    font-size: .93rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .88);
    white-space: nowrap;
}

.nav__link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--t);
}

.nav__link:hover,
.nav__link.is-active { color: var(--white); }

.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }

.nav-actions {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex: none;
}

.nav-phone {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .3rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: .93rem;
    color: var(--white);
    white-space: nowrap;
}

.nav-phone i { color: var(--accent); }
.nav-phone:hover { color: var(--accent); }

@media (max-width: 1199px) {
    .nav { gap: .2rem; }
    .nav__link { font-size: .87rem; }
    .nav-phone { display: none; }
}

@media (max-width: 991px) {
    .nav,
    .nav-actions .btn { display: none; }
}

/* Hamburger ------------------------------------------------------------- */
.nav-toggle {
    display: none;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: var(--r-md);
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .08);
    color: var(--white);
    transition: background var(--t), border-color var(--t);
}

.nav-toggle:hover { background: rgba(255, 255, 255, .16); }

.nav-toggle__bars {
    position: relative;
    width: 20px;
    height: 14px;
}

.nav-toggle__bars span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform var(--t), opacity var(--t-fast), top var(--t);
}

.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 6px; }
.nav-toggle__bars span:nth-child(3) { top: 12px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

@media (max-width: 991px) {
    .nav-toggle { display: grid; }
}

/* Off-canvas mobile menu ------------------------------------------------ */
.menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(4, 18, 37, .6);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t), visibility 0s linear var(--t);
}

.menu-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--t), visibility 0s linear 0s;
}

.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1060;
    width: min(360px, 88vw);
    display: flex;
    flex-direction: column;
    background: linear-gradient(170deg, var(--primary) 0%, var(--primary-dark) 100%);
    box-shadow: -20px 0 60px rgba(0, 0, 0, .4);
    transform: translateX(100%);
    visibility: hidden;
    /* `visibility` is a discrete property. Transitioning it over the same
       duration as the slide would leave the panel computed as hidden for the
       whole animation, and focus() on a hidden element silently does nothing —
       so the dialog would never receive keyboard focus. Flipping it with a 0s
       duration and a trailing delay keeps the slide-out visible on close while
       making the panel focusable the instant it opens. */
    transition: transform var(--t-slow), visibility 0s linear var(--t-slow);
    overscroll-behavior: contain;
}

.mobile-menu.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--t-slow), visibility 0s linear 0s;
}

/* An author `display` value beats the UA rule for [hidden], so the attribute
   has to be honoured explicitly or the panel stays in the layout. */
.mobile-menu[hidden],
.menu-backdrop[hidden] { display: none; }

.mobile-menu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid var(--line-dark);
    flex: none;
}

.mobile-menu__head img { height: 30px; width: auto; }

.mobile-menu__close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: var(--r-md);
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .08);
    color: var(--white);
    font-size: 1.05rem;
    transition: background var(--t);
}

.mobile-menu__close:hover { background: rgba(255, 255, 255, .18); }

.mobile-menu__body {
    flex: 1;
    overflow-y: auto;
    padding: 1.1rem 1.4rem 1.6rem;
    -webkit-overflow-scrolling: touch;
}

.mobile-nav { list-style: none; margin-bottom: 1.5rem; }

.mobile-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .95rem .25rem;
    font-family: var(--font-heading);
    font-size: 1.02rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .9);
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.mobile-nav a i {
    font-size: .7rem;
    color: rgba(255, 255, 255, .4);
    transition: transform var(--t), color var(--t);
}

.mobile-nav a:hover,
.mobile-nav a.is-active { color: var(--white); }

.mobile-nav a:hover i,
.mobile-nav a.is-active i { color: var(--accent); transform: translateX(3px); }

.mobile-menu__cta { display: grid; gap: .7rem; margin-bottom: 1.6rem; }

.mobile-menu__contact {
    display: grid;
    gap: .85rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--line-dark);
    font-size: var(--fs-sm);
}

.mobile-menu__contact a,
.mobile-menu__contact div {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    color: var(--on-dark);
    line-height: 1.5;
}

.mobile-menu__contact a:hover { color: var(--white); }
.mobile-menu__contact i { color: var(--accent); margin-top: .28em; width: 16px; flex: none; }

/* ==========================================================================
   9. Heroes
   ========================================================================== */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    isolation: isolate;
    padding-top: calc(var(--header-h) + clamp(2.5rem, 1rem + 5vw, 5rem));
    padding-bottom: clamp(3rem, 1.5rem + 5vw, 6rem);
    background: var(--primary-dark);
    color: var(--white);
    overflow: hidden;
}

.hero--home { min-height: min(94vh, 860px); }

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(3, 14, 31, .94) 0%, rgba(3, 14, 31, .78) 45%, rgba(3, 14, 31, .34) 100%),
        linear-gradient(to top, rgba(3, 14, 31, .75) 0%, transparent 45%);
}

/* On narrow screens the text sits over the whole width, so the wash needs
   to be even rather than directional. */
@media (max-width: 767px) {
    .hero__overlay {
        background:
            linear-gradient(180deg, rgba(3, 14, 31, .86) 0%, rgba(3, 14, 31, .8) 45%, rgba(3, 14, 31, .92) 100%);
    }
}

.hero__content { position: relative; max-width: 760px; }

.hero--home h1 {
    font-size: var(--fs-hero);
    color: var(--white);
    margin-bottom: 1.15rem;
}

.hero h1 { color: var(--white); }

/* Second line of the home headline drops to its own row. */
.hero__line { display: block; }

.hero__lead {
    font-size: var(--fs-lead);
    line-height: 1.68;
    color: #d7e1ef;
    max-width: 62ch;
    margin-bottom: 2rem;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.25rem);
}

/* Trust row beneath the hero CTAs --------------------------------------- */
.hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(.65rem, .4rem + 1vw, 1.5rem);
    list-style: none;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.hero__trust li {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--font-heading);
    font-size: .87rem;
    font-weight: 600;
    color: #dbe5f2;
}

.hero__trust i {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 9px;
    font-size: .8rem;
    color: var(--accent);
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .16);
}

/* Inner page hero -------------------------------------------------------- */
.hero--page {
    min-height: clamp(340px, 42vh, 460px);
    padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.hero--page .hero__overlay {
    background:
        linear-gradient(90deg, rgba(3, 14, 31, .94) 0%, rgba(3, 14, 31, .84) 50%, rgba(3, 14, 31, .58) 100%),
        linear-gradient(to top, rgba(3, 14, 31, .8) 0%, transparent 55%);
}

/* Legal / 404 heroes have no photograph — a gradient carries them. */
.hero--plain {
    background:
        radial-gradient(60ch 46ch at 15% 0%, rgba(23, 105, 255, .3), transparent 62%),
        radial-gradient(50ch 40ch at 88% 110%, rgba(255, 122, 0, .18), transparent 60%),
        linear-gradient(165deg, var(--primary) 0%, var(--primary-dark) 100%);
}

.hero--page .hero__lead { margin-bottom: 0; max-width: 68ch; }

/* ==========================================================================
   10. Home page sections
   ========================================================================== */

/* Interstate feature band ------------------------------------------------ */
.feature-band {
    position: relative;
    isolation: isolate;
    padding-block: clamp(4rem, 2.6rem + 5vw, 7.5rem);
    color: var(--white);
    overflow: hidden;
}

.feature-band__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feature-band__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(4, 18, 37, .96) 0%, rgba(4, 18, 37, .86) 48%, rgba(4, 18, 37, .5) 100%);
}

@media (max-width: 767px) {
    .feature-band__overlay {
        background: linear-gradient(180deg, rgba(4, 18, 37, .9), rgba(4, 18, 37, .95));
    }
}

.feature-band__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(2rem, 1.2rem + 3vw, 4.5rem);
    align-items: center;
}

@media (max-width: 991px) {
    .feature-band__inner { grid-template-columns: minmax(0, 1fr); }
}

/* Route card sitting inside the interstate band -------------------------- */
.route-card {
    display: grid;
    gap: 1.35rem;
    padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
    border-radius: var(--r-lg);
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(8px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .34);
}

.route-card__title {
    font-family: var(--font-heading);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8fbaff;
    margin: 0;
}

.route-card__note {
    margin: 0;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: .87rem;
    line-height: 1.6;
    color: var(--on-dark);
}

.route-card__note i { color: var(--accent); margin-right: .45rem; }

/* Split section — image one side, copy the other ------------------------- */
.split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 1.2rem + 3.4vw, 4.5rem);
    align-items: center;
}

.split--reverse .split__media { order: 2; }

@media (max-width: 991px) {
    .split { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
    .split--reverse .split__media { order: 0; }
}

.split__media { position: relative; }

.split__media img {
    width: 100%;
    aspect-ratio: 4 / 3.2;
    object-fit: cover;
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
}

/* Small floating stat/label card over the split image. */
.split__tag {
    position: absolute;
    right: clamp(-.5rem, -1vw, 0rem);
    bottom: clamp(-1rem, -1.5vw, -.5rem);
    display: flex;
    align-items: center;
    gap: .9rem;
    max-width: 78%;
    padding: 1rem 1.35rem;
    border-radius: var(--r-lg);
    background: var(--white);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--line);
}

.split__tag strong {
    display: block;
    font-family: var(--font-heading);
    font-size: .98rem;
    line-height: 1.25;
    color: var(--text);
}

.split__tag span {
    font-size: .8rem;
    color: var(--muted);
    line-height: 1.4;
}

.split--dark .split__tag {
    background: var(--primary);
    border-color: rgba(255, 255, 255, .16);
}

.split--dark .split__tag strong { color: var(--white); }
.split--dark .split__tag span { color: var(--on-dark); }

@media (max-width: 575px) {
    .split__tag {
        position: static;
        max-width: none;
        margin-top: 1rem;
    }
}

/* Service-area tiles ----------------------------------------------------- */
.area-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.4rem 1.5rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 3px solid var(--blue);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-xs);
    transition: transform var(--t), box-shadow var(--t), border-left-color var(--t);
}

.area-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-left-color: var(--accent);
}

.area-card h3 { font-size: 1.02rem; margin-bottom: .28rem; }
.area-card p { margin: 0; font-size: .87rem; color: var(--muted); line-height: 1.55; }
.area-card i { color: var(--blue); font-size: 1.1rem; margin-top: .3rem; flex: none; }
.area-card:hover i { color: var(--accent); }

/* Hours panel ------------------------------------------------------------ */
.hours-card {
    display: grid;
    gap: 1.5rem;
    padding: clamp(1.6rem, 1.2rem + 1.4vw, 2.35rem);
    border-radius: var(--r-lg);
    background: var(--white);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
}

.hours-card--dark {
    background: rgba(255, 255, 255, .05);
    border-color: var(--line-dark);
    box-shadow: none;
}

.hours-row { display: flex; gap: 1rem; align-items: flex-start; }

.hours-row__label {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--blue-ink);
    margin-bottom: .35rem;
}

.hours-card--dark .hours-row__label { color: #8fbaff; }

.hours-row__value {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--text);
    line-height: 1.4;
}

.hours-card--dark .hours-row__value { color: var(--white); }

.hours-row__note {
    margin: .45rem 0 0;
    font-size: .84rem;
    line-height: 1.55;
    color: var(--muted);
}

.hours-card--dark .hours-row__note { color: var(--on-dark); }

/* CTA panel -------------------------------------------------------------- */
.cta-panel {
    position: relative;
    isolation: isolate;
    padding-block: clamp(3.5rem, 2.4rem + 4vw, 6rem);
    text-align: center;
    color: var(--white);
    overflow: hidden;
    background:
        radial-gradient(52ch 42ch at 18% 12%, rgba(23, 105, 255, .34), transparent 62%),
        radial-gradient(46ch 38ch at 84% 96%, rgba(255, 122, 0, .22), transparent 60%),
        linear-gradient(150deg, var(--primary) 0%, var(--primary-dark) 100%);
}

/* Faint diagonal speed lines echoing the logo. */
.cta-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 26px);
    pointer-events: none;
}

.cta-panel h2 {
    color: var(--white);
    max-width: 20ch;
    margin-inline: auto;
    margin-bottom: .9rem;
}

.cta-panel p {
    color: var(--on-dark);
    font-size: var(--fs-lead);
    max-width: 58ch;
    margin: 0 auto 2.1rem;
}

.cta-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    justify-content: center;
}

.cta-panel__meta {
    margin-top: 1.9rem;
    font-size: .87rem;
    color: rgba(195, 208, 226, .85);
}

.cta-panel__meta i { color: var(--accent); margin-right: .4rem; }

/* Quote strip — compact inline CTA -------------------------------------- */
.quote-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem) clamp(1.5rem, 1rem + 2vw, 3rem);
    border-radius: var(--r-lg);
    background: linear-gradient(135deg, var(--blue-soft), #f5f8ff);
    border: 1px solid rgba(23, 105, 255, .16);
}

.quote-strip h3 { margin-bottom: .3rem; }
.quote-strip p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }

/* ==========================================================================
   11. Content blocks
   ========================================================================== */
.prose { max-width: 78ch; }

.prose h2 { margin-top: 2.6rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.9rem; }

.prose p,
.prose li { color: var(--muted); }

.prose ul,
.prose ol { margin: 0 0 1.25rem 1.25rem; }
.prose li { margin-bottom: .5rem; padding-left: .35rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }

.prose a { text-decoration: underline; text-underline-offset: .18em; }

.legal-note {
    display: flex;
    gap: .9rem;
    padding: 1.15rem 1.35rem;
    margin-bottom: 2.25rem;
    border-radius: var(--r-md);
    background: var(--accent-soft);
    border: 1px solid rgba(255, 122, 0, .25);
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: #7a4200;
}

.legal-note i { color: var(--accent); margin-top: .25em; flex: none; }

.legal-meta {
    font-size: var(--fs-sm);
    color: var(--muted);
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--line);
}

/* Table of contents used on the legal pages ----------------------------- */
.toc {
    position: sticky;
    top: calc(var(--nav-h) + 1.5rem);
    padding: 1.5rem;
    border-radius: var(--r-lg);
    background: var(--light);
    border: 1px solid var(--line);
}

.toc h2 {
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .9rem;
}

.toc ol { list-style: none; display: grid; gap: .1rem; }

.toc a {
    display: block;
    padding: .45rem .6rem;
    border-radius: var(--r-sm);
    font-size: .89rem;
    color: var(--muted);
    line-height: 1.45;
}

.toc a:hover { background: var(--white); color: var(--blue); }

.legal-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: clamp(2rem, 1.4rem + 2.5vw, 4rem);
    align-items: start;
}

@media (max-width: 991px) {
    .legal-layout { grid-template-columns: minmax(0, 1fr); }
    .toc { position: static; }
}

/* FAQ / accordion -------------------------------------------------------- */
.faq { display: grid; gap: .85rem; }

.faq details {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--white);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    transition: border-color var(--t), box-shadow var(--t);
}

.faq details[open] { border-color: rgba(23, 105, 255, .3); box-shadow: var(--shadow-sm); }

.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.4rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
    cursor: pointer;
    list-style: none;
}

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

.faq summary::after {
    content: '\2b';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: .8rem;
    color: var(--blue);
    flex: none;
    transition: transform var(--t);
}

.faq details[open] summary::after { transform: rotate(45deg); }

.faq__body {
    padding: 0 1.4rem 1.35rem;
    font-size: var(--fs-sm);
    color: var(--muted);
    line-height: 1.7;
}

/* Contact detail cards ---------------------------------------------------- */
.contact-card {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    padding: 1.5rem;
    border-radius: var(--r-lg);
    background: var(--white);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    transition: transform var(--t), box-shadow var(--t);
}

.contact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.contact-card h3 { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem; font-weight: 800; }

.contact-card__value {
    font-family: var(--font-heading);
    font-size: 1.06rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.4;
    word-break: break-word;
}

a.contact-card__value:hover { color: var(--blue); }

.contact-card p { margin: .3rem 0 0; font-size: .85rem; color: var(--muted); line-height: 1.5; }

/* ==========================================================================
   11b. Blog
   ========================================================================== */

/* Featured post — image beside copy, collapsing to stacked on tablet. */
.post-lead {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(1.5rem, 1rem + 2.4vw, 3rem);
    align-items: center;
    padding: clamp(1.25rem, 1rem + 1vw, 1.9rem);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm);
    color: inherit;
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}

.post-lead:hover {
    color: inherit;
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(23, 105, 255, .22);
}

.post-lead__media { border-radius: var(--r-lg); overflow: hidden; background: var(--grey-100); }

.post-lead__media img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform var(--t-slow);
}

.post-lead:hover .post-lead__media img { transform: scale(1.04); }

.post-lead__body h2 { font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2rem); margin: .9rem 0 .6rem; }
.post-lead__body p { color: var(--muted); margin-bottom: 1.15rem; }

@media (max-width: 991px) {
    .post-lead { grid-template-columns: minmax(0, 1fr); }
}

/* Post card */
.post-card { padding: 0; overflow: hidden; }

.post-card__media { display: block; background: var(--grey-100); overflow: hidden; }

.post-card__media img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform var(--t-slow);
}

.post-card:hover .post-card__media img { transform: scale(1.05); }

.post-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: clamp(1.25rem, 1rem + .7vw, 1.65rem);
}

.post-card__cat {
    font-family: var(--font-heading);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--blue-ink);
    margin-bottom: .55rem;
}

.post-card h3 { font-size: 1.08rem; margin-bottom: .5rem; }
.post-card h3 a { color: var(--text); }
.post-card h3 a:hover { color: var(--blue-ink); }
.post-card p { color: var(--muted); font-size: var(--fs-sm); margin-bottom: 1.1rem; }
.post-card .link-arrow { margin-top: auto; }

/* Post header — text only, so it takes the gradient rather than a photo. */
.post-header {
    padding-top: calc(var(--header-h) + clamp(2rem, 1rem + 4vw, 4rem));
    padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
    background:
        radial-gradient(58ch 44ch at 12% 0%, rgba(23, 105, 255, .28), transparent 62%),
        radial-gradient(48ch 38ch at 90% 110%, rgba(255, 122, 0, .16), transparent 60%),
        linear-gradient(165deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--white);
    margin-bottom: clamp(1.75rem, 1.2rem + 2vw, 3rem);
}

.post-header h1 {
    color: var(--white);
    font-size: clamp(1.85rem, 1.3rem + 2.5vw, 2.9rem);
    margin: .9rem 0 .8rem;
}

.post-header__lead {
    font-size: var(--fs-lead);
    color: #d7e1ef;
    max-width: 60ch;
    margin-bottom: 1.6rem;
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.6rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, .16);
    font-size: .86rem;
    color: var(--on-dark);
}

.post-meta span { display: inline-flex; align-items: center; gap: .5rem; }
.post-meta i { color: var(--accent); }

.post-figure { margin: 0 0 clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); }

.post-figure img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
}

/* Slightly larger measure for long-form reading. */
.post-body { max-width: none; font-size: 1.04rem; }
.post-body h2 { margin-top: 2.8rem; }
.post-body h3 { margin-top: 2rem; }
.post-body > p:first-child { font-size: 1.12rem; color: var(--text); }

.post-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) 0 0;
    padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
    border-radius: var(--r-lg);
    background: linear-gradient(135deg, var(--blue-soft), #f5f8ff);
    border: 1px solid rgba(23, 105, 255, .16);
}

.post-cta h2 { margin: 0 0 .35rem; font-size: 1.3rem; }
.post-cta p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }

.post-related {
    margin-top: clamp(3rem, 2.2rem + 2.5vw, 4.5rem);
    padding-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
    border-top: 1px solid var(--line);
}

.post-related > h2 { font-size: 1.35rem; margin-bottom: 1.5rem; }
.post-related .post-card__body { padding: 1.15rem; }
.post-related .post-card h3 { font-size: .98rem; }

/* ==========================================================================
   12. Forms
   ========================================================================== */
.form-card {
    padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.75rem);
    border-radius: var(--r-xl);
    background: var(--white);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.15rem;
}

@media (max-width: 639px) {
    .form-grid { grid-template-columns: minmax(0, 1fr); }
}

.field { display: flex; flex-direction: column; gap: .45rem; }
.field--full { grid-column: 1 / -1; }

.field label {
    font-family: var(--font-heading);
    font-size: .87rem;
    font-weight: 700;
    color: var(--text);
}

.field label .req { color: var(--accent); margin-left: .15rem; }

.field .hint { font-size: .78rem; color: var(--muted); }

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: .85rem 1rem;
    min-height: 50px;
    font-size: .97rem;
    font-family: var(--font-body);
    color: var(--text);
    background: var(--light);
    border: 1.5px solid var(--line);
    border-radius: var(--r-md);
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
    appearance: none;
}

.field textarea { min-height: 132px; resize: vertical; line-height: 1.6; }

.field input::placeholder,
.field textarea::placeholder { color: #9aa4b3; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: #cfd8e6; }

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    background: var(--white);
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(23, 105, 255, .13);
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
    border-color: #dc2626;
    background: #fef4f4;
}

.field input[aria-invalid="true"]:focus,
.field select[aria-invalid="true"]:focus,
.field textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(220, 38, 38, .13); }

/* Native select needs its own chevron once appearance is reset. */
.field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235c6675'%3E%3Cpath d='M8 11.5 2.5 6l1.1-1.1L8 9.3l4.4-4.4L13.5 6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 15px;
    padding-right: 2.75rem;
    cursor: pointer;
}

.field-error {
    font-size: .8rem;
    font-weight: 600;
    color: #dc2626;
    min-height: 0;
}

/* Consent checkbox ------------------------------------------------------- */
.consent {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    grid-column: 1 / -1;
    font-size: .86rem;
    line-height: 1.6;
    color: var(--muted);
}

.consent input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-height: 0;
    margin-top: .18em;
    flex: none;
    accent-color: var(--blue);
    cursor: pointer;
    padding: 0;
}

.consent a { text-decoration: underline; text-underline-offset: .15em; }

/* Honeypot — hidden from people, reachable by naive bots. */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-footnote {
    margin: 1.1rem 0 0;
    font-size: .82rem;
    color: var(--muted);
    text-align: center;
}

.form-footnote i { color: var(--accent); margin-right: .35rem; }

/* Spinner shown on the submit button while sending. */
.btn__spinner {
    display: none;
    width: 17px;
    height: 17px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    opacity: .75;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

.btn.is-loading .btn__spinner { display: block; }
.btn.is-loading .btn__label { opacity: .85; }
.btn.is-loading .btn__icon { display: none; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   13. Footer
   ========================================================================== */
.site-footer {
    position: relative;
    isolation: isolate;
    background: linear-gradient(170deg, var(--primary) 0%, var(--primary-dark) 62%);
    color: var(--on-dark);
    font-size: var(--fs-sm);
}

.site-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(56ch 44ch at 8% 0%, rgba(23, 105, 255, .18), transparent 60%);
}

.footer-main {
    display: grid;
    grid-template-columns: 1.55fr 1fr 1.15fr 1.25fr;
    gap: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
    padding-block: clamp(3rem, 2.2rem + 3vw, 5rem);
}

@media (max-width: 991px) {
    .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
    .footer-main { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
}

.footer-brand img {
    height: 38px;
    width: auto;
    margin-bottom: 1.25rem;
}

.footer-brand p { line-height: 1.7; margin-bottom: 1.35rem; }

.footer-col h2 {
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 1.2rem;
}

.footer-links { list-style: none; display: grid; gap: .1rem; }

.footer-links a {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .34rem 0;
    color: var(--on-dark);
    line-height: 1.5;
}

.footer-links a::before {
    content: '\f105';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: .7rem;
    color: var(--accent);
    opacity: .6;
    transition: transform var(--t), opacity var(--t);
}

.footer-links a:hover { color: var(--white); }
.footer-links a:hover::before { transform: translateX(3px); opacity: 1; }

.footer-contact { list-style: none; display: grid; gap: .95rem; }

.footer-contact li { display: flex; align-items: flex-start; gap: .8rem; line-height: 1.55; }

.footer-contact i {
    color: var(--accent);
    margin-top: .3em;
    width: 15px;
    flex: none;
    text-align: center;
}

.footer-contact a { color: var(--on-dark); word-break: break-word; }
.footer-contact a:hover { color: var(--white); }

.footer-hours { display: grid; gap: 1.15rem; }

.footer-hours__block strong {
    display: block;
    font-family: var(--font-heading);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: .3rem;
}

.footer-hours__block span { display: block; line-height: 1.55; }

.footer-hours__note {
    font-size: .8rem;
    line-height: 1.55;
    color: rgba(195, 208, 226, .78);
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.5rem;
    border-top: 1px solid var(--line-dark);
    font-size: .84rem;
}

.footer-bottom p { margin: 0; }

.footer-legal { display: flex; flex-wrap: wrap; gap: 1.5rem; list-style: none; }
.footer-legal a { color: var(--on-dark); }
.footer-legal a:hover { color: var(--white); }

/* Designer credit -------------------------------------------------------
   A quiet signature line beneath the legal row. Held at .6 opacity rather
   than lower: against the footer navy that lands at 4.8:1, so it stays
   subdued next to the full-strength footer text while still meeting AA. */
.footer-credit {
    margin: 0;
    padding-bottom: 1.6rem;
    text-align: center;
}

.credit {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .035em;
    line-height: 1;
    color: var(--on-dark);
    opacity: .6;
    transition: opacity var(--t), color var(--t);
}

.credit:hover,
.credit:focus-visible {
    opacity: 1;
    color: var(--accent);
}

.credit__heart {
    display: inline-block;
    font-size: .95em;
    line-height: 1;
    /* Rest state is a transition, not part of the keyframes. When the
       animation is removed on mouse-out the heart eases back to scale(1)
       instead of snapping from wherever the beat had reached. */
    transition: transform var(--t);
}

.credit:hover .credit__heart,
.credit:focus-visible .credit__heart {
    animation: credit-beat 1.4s ease-in-out infinite;
}

/* The second heart trails the first so the pair reads as alive rather than
   mechanical. */
.credit:hover .credit__heart:last-child,
.credit:focus-visible .credit__heart:last-child {
    animation-delay: .09s;
}

/* Double-thump, peaking at 1.18 — enough to register, not enough to fidget.
   Starts and ends at scale(1) so removal is always graceful. */
@keyframes credit-beat {
    0%, 100% { transform: scale(1); }
    14%      { transform: scale(1.18); }
    28%      { transform: scale(1); }
    42%      { transform: scale(1.11); }
    56%      { transform: scale(1); }
}

/* ==========================================================================
   14. Breadcrumbs, 404, mobile action bar, back-to-top
   ========================================================================== */
.breadcrumbs {
    position: relative;
    z-index: 1;
    margin-bottom: 1.35rem;
    font-size: .84rem;
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    list-style: none;
}

.breadcrumbs li { display: inline-flex; align-items: center; gap: .5rem; }

.breadcrumbs li + li::before {
    content: '\f105';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: .68rem;
    color: rgba(255, 255, 255, .45);
}

.breadcrumbs a { color: rgba(255, 255, 255, .75); }
.breadcrumbs a:hover { color: var(--white); }
.breadcrumbs [aria-current="page"] { color: var(--accent); font-weight: 600; }

/* Thank-you confirmation tick ------------------------------------------- */
.confirm-tick {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    margin: 0 auto 1.6rem;
    border-radius: 50%;
    font-size: 2rem;
    color: var(--primary-dark);
    background: linear-gradient(140deg, #43d9a3 0%, var(--go, #1b9c74) 100%);
    box-shadow: 0 10px 30px rgba(27, 156, 116, .4);
    animation: confirm-pop .5s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes confirm-pop {
    0%   { transform: scale(.4); opacity: 0; }
    60%  { transform: scale(1.08); }
    100% { transform: scale(1); opacity: 1; }
}

.confirm-hours {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-top: 1.9rem;
    font-size: .87rem;
    color: rgba(195, 208, 226, .85);
}

.confirm-hours i { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
    .confirm-tick { animation: none; }
}

/* 404 -------------------------------------------------------------------- */
.error-code {
    font-family: var(--font-heading);
    font-size: clamp(5rem, 2rem + 15vw, 11rem);
    font-weight: 800;
    line-height: .9;
    letter-spacing: -.04em;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #ffffff 8%, #7fb0ff 52%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.error-links {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
    justify-content: center;
    list-style: none;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, .16);
    font-size: var(--fs-sm);
}

.error-links a { color: var(--on-dark); }
.error-links a:hover { color: var(--white); }

/* Mobile action bar ------------------------------------------------------ */
.action-bar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 900;
    display: none;
    gap: .6rem;
    padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
    background: rgba(7, 26, 51, .97);
    border-top: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(10px);
    transform: translateY(110%);
    transition: transform var(--t);
}

.action-bar.is-visible { transform: translateY(0); }

.action-bar .btn { flex: 1; min-height: 48px; padding-inline: .75rem; font-size: .9rem; }

@media (max-width: 767px) {
    .action-bar { display: flex; }
    body { padding-bottom: 0; }
    .site-footer { padding-bottom: 72px; }

    /* Roomier touch targets on small screens. */
    .footer-links a { padding-block: .55rem; }
    .footer-legal { gap: 1rem 1.5rem; }
    .footer-legal a { display: inline-block; padding-block: .4rem; }
    .link-arrow { padding-block: .4rem; }
    .breadcrumbs a { display: inline-block; padding-block: .25rem; }
}

/* Back to top ------------------------------------------------------------ */
.to-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 880;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--blue);
    color: var(--white);
    box-shadow: var(--shadow-blue);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity var(--t), visibility var(--t), transform var(--t), background var(--t);
}

.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--blue-dark); color: var(--white); }

@media (max-width: 767px) {
    .to-top { bottom: calc(72px + env(safe-area-inset-bottom)); right: 1rem; }
}

/* ==========================================================================
   15. Motion & accessibility
   ========================================================================== */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.site-header :focus-visible,
.hero :focus-visible,
.section--dark :focus-visible,
.site-footer :focus-visible,
.mobile-menu :focus-visible {
    outline-color: #ffb066;
}

/* Anything using AOS stays visible if the library fails to load. */
[data-aos] { will-change: opacity, transform; }

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

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

    /* Neutralise AOS so content is never left mid-animation. */
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .service-card:hover .service-card__media img { transform: none; }

    /* No heartbeat at all — the colour and opacity change still signal hover. */
    .credit:hover .credit__heart,
    .credit:focus-visible .credit__heart {
        animation: none;
        transform: none;
    }
}

/* Print ------------------------------------------------------------------- */
@media print {
    .site-header,
    .action-bar,
    .to-top,
    .mobile-menu,
    .menu-backdrop,
    .cta-panel,
    .quote-strip { display: none !important; }

    body { color: #000; background: #fff; }
    .hero { padding-top: 2rem; color: #000; }
    .hero__bg, .hero__overlay { display: none; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}