/* CHERRY homepage: tokens from implementation spec; composition from blueprint */

:root {
 --page: #F8F7F3;
 --surface: #F4F3EF;
 --card: #F1F0EC;
 --ink: #111719;
 /* Readability: darker than AI-default stone greys (elderly / low-vision friendly on cream) */
 --body: #3F484E;
 --muted: #5C656B;
 --line: #DFE1DE;
 --white: #FFFFFF;
 --cta: #0A0E10;
 --content-max: 1300px;
 --gutter: clamp(24px, 6.8vw, 88px);
 --section-y: clamp(20px, 2.6vw, 36px);
 --radius-pill: 999px;
 --radius-card: 16px;
 --font-sans: "Manrope", "Segoe UI", sans-serif;
 --font-serif: "Newsreader", "Times New Roman", serif;
 --focus: 0 0 0 3px rgba(10, 14, 16, 0.28);
 color-scheme: light;
}

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

html {
 scroll-behavior: smooth;
}

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

body {
 margin: 0;
 background: var(--page);
 color: var(--ink);
 font-family: var(--font-sans);
 font-weight: 400;
 /* Comfortable base (~15px): readable for older adults without “large print” feel */
 font-size: 15px;
 line-height: 1.62;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-rendering: optimizeLegibility;
 /* iPhone / iPad notch + home indicator */
 padding-left: env(safe-area-inset-left, 0px);
 padding-right: env(safe-area-inset-right, 0px);
 padding-bottom: env(safe-area-inset-bottom, 0px);
}

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

/* Quiet Apple-like taps; avoid 300ms-feel / grey flash on iOS */
a,
button,
.btn,
.service-trigger,
.nav-toggle {
 -webkit-tap-highlight-color: transparent;
 touch-action: manipulation;
}

a {
 color: inherit;
 text-decoration: none;
}

button {
 font: inherit;
 color: inherit;
 background: none;
 border: 0;
 cursor: pointer;
}

ul { list-style: none; margin: 0; padding: 0; }

.skip-link {
 position: absolute;
 left: -999px;
 top: 0;
 background: var(--cta);
 color: var(--white);
 padding: 0.6rem 1rem;
 z-index: 1000;
}

.skip-link:focus {
 left: 1rem;
 top: 1rem;
}

.shell {
 width: min(100% - (var(--gutter) * 2), var(--content-max));
 margin-inline: auto;
}

.eyebrow {
 margin: 0 0 12px;
 font-size: 11px;
 font-weight: 600;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: color-mix(in srgb, var(--ink) 42%, var(--muted));
}

.lede {
 margin: 0;
 color: var(--body);
 font-size: 1.05rem; /* ~15.75px from 15px root */
 font-weight: 450;
 line-height: 1.68;
 max-width: 42ch;
}

/* Buttons */
.btn {
 display: inline-flex;
 align-items: center;
 gap: 0.45rem;
 border-radius: var(--radius-pill);
 padding: 0.65rem 1.2rem;
 font-size: 13px;
 font-weight: 550;
 letter-spacing: 0.015em;
 line-height: 1.15;
 transition: transform 160ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.btn:focus-visible,
.icon-btn:focus-visible,
.site-nav a:focus-visible,
.text-link:focus-visible,
.brand:focus-visible,
.service-card:focus-visible,
.social a:focus-visible,
.legal-nav a:focus-visible,
.footer-nav a:focus-visible {
 outline: none;
 box-shadow: var(--focus);
}

.btn-cta,
.btn-primary {
 background: var(--cta);
 color: var(--white);
}

.btn-cta {
 padding: 0.55rem 1.05rem;
 font-size: 12.5px;
}

.btn-primary:hover,
.btn-cta:hover {
 transform: translateY(-1px);
}

.btn-ghost {
 background: transparent;
 border: 1px solid rgba(17, 23, 25, 0.55);
 color: var(--ink);
 padding: 0.6rem 1.15rem;
}

.btn-ghost:hover {
 background: rgba(17, 23, 25, 0.04);
}

.btn-cookie {
 border: 1px solid var(--line);
 border-radius: var(--radius-pill);
 padding: 0.45rem 0.9rem;
 font-size: 12px;
 color: var(--body);
}

.text-link {
 display: inline-flex;
 align-items: center;
 gap: 0.35rem;
 margin-top: 1.25rem;
 font-size: 14px;
 font-weight: 500;
 border-bottom: 1px solid currentColor;
 padding-bottom: 1px;
 width: fit-content;
}

/* Header: above cookie sheet so nav always works */
.site-header {
 position: relative;
 z-index: 90;
 background: var(--page);
 padding-top: env(safe-area-inset-top, 0px);
}

.header-inner {
 display: grid;
 grid-template-columns: auto 1fr auto;
 align-items: center;
 min-height: 56px;
 gap: 1rem;
}

.brand {
 display: inline-flex;
 align-items: center;
 gap: 0.55rem;
}

.brand-mark {
 width: 26px;
 height: 26px;
}

.brand-word {
 font-size: 13px;
 font-weight: 600;
 letter-spacing: 0.14em;
}

.site-nav {
 display: flex;
 justify-content: center;
 gap: clamp(1rem, 2.2vw, 1.85rem);
}

.site-nav a {
 font-size: 13px;
 font-weight: 500;
 color: var(--ink);
 padding: 0.4rem 0;
 position: relative;
}

.site-nav a[aria-current="page"]::after {
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 height: 1px;
 background: var(--ink);
}

.nav-toggle {
 display: none;
 width: 40px;
 height: 40px;
 place-items: center;
 gap: 5px;
 flex-direction: column;
}

.nav-toggle span {
 display: block;
 width: 18px;
 height: 1.5px;
 background: var(--ink);
}

.header-inner > .btn-cta {
 justify-self: end;
}

/* Header utilities: help + language (trusted-site pattern, CHERRY craft) */
.header-utils {
 display: inline-flex;
 align-items: center;
 gap: 0.15rem;
 justify-self: end;
 margin-right: 0.15rem;
}

.header-inner {
 grid-template-columns: auto 1fr auto auto;
}

.header-util {
 display: inline-grid;
 place-items: center;
 width: 36px;
 height: 36px;
 border: 0;
 border-radius: 999px;
 background: transparent;
 color: var(--ink);
 text-decoration: none;
 cursor: pointer;
 transition: background 160ms ease;
}

.header-util:hover,
.header-util:focus-visible {
 background: color-mix(in srgb, var(--ink) 6%, transparent);
}

.header-util:focus-visible {
 outline: none;
 box-shadow: var(--focus);
}

.lang-wrap {
 position: relative;
}

.lang-panel {
 position: absolute;
 right: 0;
 top: calc(100% + 0.45rem);
 z-index: 100;
 min-width: 11.5rem;
 padding: 0.85rem 0.9rem 0.95rem;
 border-radius: 14px;
 background: #fff;
 box-shadow:
 0 1px 0 rgba(255, 255, 255, 0.8) inset,
 0 18px 40px rgba(17, 23, 25, 0.12);
}

.lang-panel[hidden] {
 display: none;
}

.lang-panel-title {
 margin: 0 0 0.65rem;
 font-size: 11px;
 font-weight: 650;
 letter-spacing: -0.01em;
 color: var(--ink);
}

.lang-panel-list {
 display: grid;
 gap: 0.35rem;
}

.lang-option {
 display: flex;
 align-items: center;
 gap: 0.55rem;
 width: 100%;
 margin: 0;
 padding: 0.45rem 0.35rem;
 border: 0;
 border-radius: 8px;
 background: transparent;
 font: inherit;
 font-size: 13px;
 font-weight: 450;
 letter-spacing: -0.015em;
 color: var(--ink);
 text-align: left;
 cursor: pointer;
}

.lang-option::before {
 content: "";
 width: 14px;
 height: 14px;
 border-radius: 50%;
 border: 1.5px solid color-mix(in srgb, var(--ink) 28%, transparent);
 box-sizing: border-box;
 flex-shrink: 0;
}

.lang-option.is-active::before {
 border-color: var(--ink);
 box-shadow: inset 0 0 0 3.5px var(--ink);
}

.lang-option:hover,
.lang-option:focus-visible {
 background: color-mix(in srgb, var(--ink) 4%, transparent);
}

.lang-option:focus-visible {
 outline: none;
 box-shadow: var(--focus);
}

@media (max-width: 767px) {
 .header-inner {
 grid-template-columns: auto 1fr auto auto;
 }

 .header-utils {
 order: 2;
 margin-right: 0;
 }

 .header-inner > .btn-cta {
 display: none;
 }
}

/* Hero */
.hero {
 padding: 4px 0 18px;
}

.hero-grid {
 display: grid;
 grid-template-columns: minmax(260px, 1fr) minmax(0, 1.05fr);
 gap: clamp(1rem, 2.5vw, 2rem);
 align-items: center;
 min-height: clamp(280px, 32vw, 360px);
}

.hero-copy h1 {
 margin: 0 0 0.75rem;
 font-family: var(--font-serif);
 font-size: clamp(34px, 3.8vw, 46px);
 font-weight: 400;
 line-height: 1.02;
 letter-spacing: -0.02em;
}

.hero-copy .lede {
 margin-bottom: 1.35rem;
 max-width: 38ch;
}

.hero-copy .btn-primary {
 display: inline-flex;
}

.scroll-cue {
 display: flex;
 align-items: center;
 gap: 0.55rem;
 margin-top: 1.6rem;
 width: fit-content;
 font-size: 12px;
 color: var(--muted);
}

.scroll-cue-icon {
 width: 28px;
 height: 28px;
 border: 1px solid color-mix(in srgb, var(--muted) 70%, transparent);
 border-radius: 50%;
 display: inline-grid;
 place-items: center;
}

.hero-visual {
 position: relative;
 min-height: 0;
 display: flex;
 justify-content: flex-end;
 align-items: center;
}

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

.hero-mask {
 overflow: hidden;
 clip-path: url(#clip-hero);
 aspect-ratio: 1.55 / 1;
 background: var(--surface);
}

.hero-photo {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: 58% 42%;
 display: block;
}

/*
 * Hero Lottie — fair hero budget (~original photo footprint).
 * Size the CSS box; lottie-web SVG meets that box (preserveAspectRatio meet + resize()).
 */
.hero-visual .hero-lottie.hero-mask {
 clip-path: none;
 /* Fair hero budget: sit beside copy (~original photo ~390px tall), not dominate */
 width: min(100%, 420px);
 max-height: clamp(200px, 24vw, 280px);
 aspect-ratio: 724 / 554;
 height: auto;
 border-radius: clamp(18px, 2.2vw, 26px);
 /* Same as page so stage merges — no white card edge */
 background: var(--page);
 box-shadow: none;
}

.hero-lottie {
 position: relative;
 display: grid;
 place-items: center;
 isolation: isolate;
}

.hero-lottie::before {
 content: none;
}

.hero-lottie-stage {
 position: relative;
 z-index: 1;
 width: 100%;
 height: 100%;
 min-height: 0;
 display: block;
 overflow: hidden;
 box-sizing: border-box;
 padding: 3% 5%;
 background: transparent;
}

.hero-lottie-stage .hero-lottie-svg,
.hero-lottie-stage svg {
 width: 100% !important;
 height: 100% !important;
 display: block;
}

.hero-lottie[data-ready="true"] {
 background: var(--page);
}

/* Decorative Lottie survival (same bar as 404): glyph until ready; hide empty stage on fail */
.hero-lottie-fallback {
 margin: 0;
 position: absolute;
 inset: 0;
 display: grid;
 place-items: center;
 font-family: var(--font-sans);
 font-size: clamp(1.1rem, 2.4vw, 1.35rem);
 font-weight: 600;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: color-mix(in srgb, var(--muted) 85%, var(--ink));
 pointer-events: none;
 z-index: 0;
}

.hero-lottie .hero-lottie-stage {
 z-index: 1;
}

.hero-lottie[data-ready="true"] .hero-lottie-fallback {
 display: none;
}

.hero-lottie[data-failed="true"] .hero-lottie-stage {
 display: none;
}

.hero-lottie[data-failed="true"] .hero-lottie-fallback {
 display: grid;
}

@media (max-width: 900px) {
 .hero-visual {
  justify-content: center;
 }

 .hero-visual .hero-lottie.hero-mask {
  width: min(100%, 360px);
  max-height: 240px;
 }
}

/* Trust strip */
.trust {
 padding: 18px 0 22px;
 border-top: 1px solid var(--line);
 border-bottom: 1px solid var(--line);
}

.trust-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
}

.trust-item {
 padding: 0.35rem clamp(0.75rem, 1.8vw, 1.6rem);
 border-right: 1px solid var(--line);
}

.trust-item:first-child { padding-left: 0; }
.trust-item:last-child { border-right: 0; padding-right: 0; }

.trust-icon {
 display: inline-flex;
 color: var(--ink);
 margin-bottom: 0.7rem;
}

.trust-item h2 {
 margin: 0 0 0.4rem;
 font-family: var(--font-serif);
 font-size: 15px;
 font-weight: 500;
 letter-spacing: -0.01em;
}

.trust-item p {
 margin: 0;
 font-size: 13px;
 color: var(--body);
 line-height: 1.5;
 max-width: 26ch;
}

/* Difference */
.difference {
 padding: var(--section-y) 0;
}

/* Shared column split so Difference + Assurance copy share one vertical ruler */
.difference-grid,
.assurance-grid {
 display: grid;
 grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
 gap: clamp(1.5rem, 4vw, 3.5rem);
 align-items: center;
}

.difference-copy,
.assurance-copy {
 justify-self: stretch;
 width: 100%;
 max-width: none;
}

.difference-visual {
 display: flex;
 justify-content: stretch;
}

/* Soft continuous-radius product stage (replaces organic blob mask) */
.difference-tray {
 width: 100%;
 padding: 0.55rem;
 border-radius: 28px;
 background:
 linear-gradient(160deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.18)),
 color-mix(in srgb, var(--surface) 88%, var(--ink) 4%);
 box-shadow:
 0 1px 0 rgba(255, 255, 255, 0.65) inset,
 0 18px 40px rgba(17, 23, 25, 0.07);
}

.difference-frame {
 position: relative;
 overflow: hidden;
 aspect-ratio: 16 / 10;
 border-radius: 20px;
 background: color-mix(in srgb, var(--surface) 80%, var(--ink) 8%);
}

.difference-frame::after {
 content: "";
 position: absolute;
 inset: 0;
 border-radius: inherit;
 box-shadow: inset 0 0 0 1px rgba(17, 23, 25, 0.06);
 pointer-events: none;
}

.difference-photo {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center 42%;
 display: block;
}

.difference-copy h2 {
 margin: 0 0 1rem;
 font-family: var(--font-serif);
 font-size: clamp(28px, 3vw, 34px);
 font-weight: 400;
 line-height: 1.08;
 letter-spacing: -0.02em;
}

.difference-copy .lede {
 margin-bottom: 1.5rem;
 max-width: 44ch;
}

/* Services */
.services {
 padding: 4px 0 var(--section-y);
}

.services-grid {
 display: grid;
 grid-template-columns: minmax(150px, 0.38fr) minmax(0, 1.8fr);
 gap: clamp(0.85rem, 2vw, 1.5rem);
 align-items: end;
}

.services-intro h2 {
 margin: 0 0 0.9rem;
 font-family: var(--font-serif);
 font-size: clamp(28px, 3vw, 34px);
 font-weight: 400;
 line-height: 1.08;
 letter-spacing: -0.02em;
}

.services-intro .lede {
 max-width: 30ch;
}

.service-cards {
 display: grid;
 grid-template-columns: repeat(5, minmax(0, 1fr));
 gap: 14px;
 align-items: stretch;
}

.service-card {
 display: flex;
 flex-direction: column;
 gap: 0.55rem;
 transition: transform 180ms ease;
}

.service-card:hover {
 transform: translateY(-4px);
}

.service-card:hover .service-media img {
 transform: scale(1.04);
}

.service-media {
 display: block;
 overflow: hidden;
 border-radius: 22px 22px 28px 28px / 22px 22px 40px 40px;
 aspect-ratio: 3 / 4;
 background: var(--card);
}

.service-media img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center;
 display: block;
 transition: transform 320ms ease;
}

@media (prefers-reduced-motion: reduce) {
 .service-card:hover,
 .service-card:hover .service-media img {
 transform: none;
 }
}

.service-label {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 0.35rem;
 padding: 0 0.2rem;
 font-size: 13px;
 font-weight: 550;
 letter-spacing: 0.01em;
 color: var(--ink);
}

/* Assurance — factual standards (no testimonials / reviews) */
.assurance {
 padding: 4px 0 var(--section-y);
}

.assurance-visual {
 display: flex;
 justify-content: stretch;
}

/* Same soft continuous-radius product stage as Difference */
.assurance-tray {
 width: 100%;
 padding: 0.55rem;
 border-radius: 28px;
 background:
 linear-gradient(160deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.18)),
 color-mix(in srgb, var(--surface) 88%, var(--ink) 4%);
 box-shadow:
 0 1px 0 rgba(255, 255, 255, 0.65) inset,
 0 18px 40px rgba(17, 23, 25, 0.07);
}

.assurance-frame {
 position: relative;
 overflow: hidden;
 aspect-ratio: 16 / 10;
 border-radius: 20px;
 background: color-mix(in srgb, var(--surface) 80%, var(--ink) 8%);
}

.assurance-frame::after {
 content: "";
 position: absolute;
 inset: 0;
 border-radius: inherit;
 box-shadow: inset 0 0 0 1px rgba(17, 23, 25, 0.06);
 pointer-events: none;
}

.assurance-mark-img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center 45%;
 display: block;
}

.assurance-copy h2 {
 margin: 0 0 0.85rem;
 font-family: var(--font-serif);
 font-size: clamp(26px, 2.8vw, 32px);
 font-weight: 400;
 line-height: 1.1;
 letter-spacing: -0.02em;
}

.assurance-copy .lede {
 margin: 0 0 1.35rem;
 max-width: 40ch;
 color: var(--body);
}

.assurance-list {
 list-style: none;
 margin: 0 0 1.5rem;
 padding: 0;
 display: flex;
 flex-direction: column;
 gap: 0.95rem;
 max-width: 38ch;
}

.assurance-list li {
 display: flex;
 flex-direction: column;
 gap: 0.2rem;
 padding-top: 0.85rem;
 border-top: 1px solid var(--line);
}

.assurance-label {
 font-family: var(--font-sans);
 font-size: 14px;
 font-weight: 600;
 letter-spacing: -0.01em;
 color: var(--ink);
}

.assurance-text {
 font-size: 12px;
 line-height: 1.45;
 color: var(--body);
}

/* Footer: Swapfiets-style multi-column, CHERRY sparse */
.site-footer {
 border-top: 1px solid var(--line);
 padding: 2rem 0 0.85rem;
}

.footer-main {
 display: grid;
 grid-template-columns: minmax(140px, 0.85fr) minmax(0, 2.4fr) auto;
 align-items: start;
 gap: 1.75rem 2rem;
 padding-bottom: 1.5rem;
}

.footer-brand .brand {
 display: inline-flex;
 align-items: center;
 gap: 0.45rem;
}

.footer-tagline {
 margin: 0.45rem 0 0;
 font-size: 13px;
 line-height: 1.45;
 color: var(--muted);
 max-width: 22ch;
}

.footer-cols {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 1.25rem 1.5rem;
}

.footer-col {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 0.45rem;
 font-size: 13px;
}

.footer-col-title {
 margin: 0 0 0.35rem;
 font-size: 13px;
 font-weight: 650;
 letter-spacing: 0.02em;
 color: var(--ink);
}

.footer-col a {
 color: var(--muted);
 transition: color 160ms ease;
 line-height: 1.35;
}

.footer-col a:hover,
.footer-col a[aria-current="page"] {
 color: var(--ink);
}

/* Legacy single-row footer (kept for transition) */
.footer-top {
 display: grid;
 grid-template-columns: 1.1fr 1.2fr minmax(160px, 0.9fr) auto;
 align-items: start;
 gap: 1.25rem 1.5rem;
 padding-bottom: 1.15rem;
}

.footer-legal {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 0.35rem;
 font-size: 10.5px;
}

.footer-legal-title {
 margin: 0 0 0.25rem;
 font-size: 10px;
 font-weight: 600;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--ink);
}

.footer-legal a {
 color: var(--muted);
 transition: color 160ms ease;
}

.footer-legal a:hover,
.footer-legal a[aria-current="page"] {
 color: var(--ink);
}

.footer-nav {
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
 gap: 0.85rem 1.35rem;
 font-size: 10.5px;
}

.social {
 display: flex;
 gap: 0.7rem;
 justify-content: flex-end;
 list-style: none;
 margin: 0;
 padding: 0;
}

.social a {
 width: 28px;
 height: 28px;
 display: grid;
 place-items: center;
 color: var(--ink);
 border-radius: 6px;
 text-decoration: none;
}

.social a:hover {
 opacity: 0.72;
}

.footer-bottom {
 display: grid;
 grid-template-columns: 1fr auto;
 align-items: center;
 gap: 1rem;
 padding-top: 0.95rem;
 border-top: 1px solid var(--line);
 font-size: 12px;
 color: var(--muted);
}

.copyright { margin: 0; }

.legal-nav {
 display: flex;
 flex-wrap: wrap;
 gap: 0.75rem 1rem;
}

/* Cookie panel: bottom sheet; page/nav stay clickable underneath */
.cookie-panel {
 position: fixed;
 inset: 0;
 background: rgba(17, 23, 25, 0.22);
 display: grid;
 place-items: end center;
 padding: 1.25rem;
 z-index: 80;
 pointer-events: none;
}

.cookie-panel[hidden] { display: none; }

.cookie-panel-inner {
 position: relative;
 width: min(100%, 440px);
 background: var(--page);
 border: 1px solid var(--line);
 border-radius: 18px;
 padding: 1.25rem 1.35rem 1.15rem;
 box-shadow: 0 18px 40px rgba(17, 23, 25, 0.12);
 pointer-events: auto;
}

.cookie-panel-inner h2 {
 margin: 0 0 0.5rem;
 font-size: 16px;
 font-weight: 500;
}

.cookie-panel-inner p {
 margin: 0 0 1rem;
 color: var(--body);
 font-size: 12px;
}

.cookie-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 0.6rem;
}

.cookie-close {
 position: absolute;
 top: 0.55rem;
 right: 0.7rem;
 font-size: 1.25rem;
 line-height: 1;
 color: var(--muted);
}

/* Responsive: keep desktop two-column services through 1024 blueprint width */
@media (max-width: 900px) {
 .hero-grid,
 .difference-grid,
 .assurance-grid,
 .services-grid {
 grid-template-columns: 1fr;
 }

 .services-grid { align-items: start; }

 .service-cards {
 overflow-x: auto;
 grid-template-columns: repeat(5, minmax(130px, 1fr));
 padding-bottom: 0.35rem;
 scroll-snap-type: x mandatory;
 }

 .service-card { scroll-snap-align: start; }

 .hero-visual {
 min-height: 300px;
 order: -1;
 }

 .trust-grid {
 grid-template-columns: 1fr 1fr;
 gap: 1.25rem 0;
 }

 .trust-item:nth-child(2) { border-right: 0; }
 .trust-item:nth-child(1),
 .trust-item:nth-child(2) {
 border-bottom: 1px solid var(--line);
 padding-bottom: 1rem;
 }

 .footer-nav {
 justify-content: flex-start;
 }

 .footer-main,
 .footer-top,
 .footer-bottom {
 grid-template-columns: 1fr;
 justify-items: start;
 }

 .footer-cols {
 grid-template-columns: 1fr 1fr;
 width: 100%;
 }

 .footer-nav,
 .social { justify-content: flex-start; }
}

@media (max-width: 520px) {
 .footer-cols {
 grid-template-columns: 1fr;
 }
}

@media (max-width: 767px) {
 .nav-toggle { display: inline-flex; }
 .site-nav {
 display: none;
 position: absolute;
 left: var(--gutter);
 right: var(--gutter);
 top: 64px;
 background: var(--page);
 border: 1px solid var(--line);
 border-radius: 14px;
 flex-direction: column;
 align-items: stretch;
 padding: 0.65rem;
 gap: 0;
 box-shadow: 0 12px 28px rgba(17, 23, 25, 0.08);
 }

 .site-nav.is-open { display: flex; }

 .site-nav a {
 padding: 0.75rem 0.65rem;
 font-size: 13px;
 }

 .header-inner {
 grid-template-columns: auto auto 1fr;
 }

 .header-inner > .btn-cta { display: none; }

 .hero-copy h1 { font-size: clamp(30px, 9vw, 36px); }
 .scroll-cue { margin-top: 1.5rem; }
}