/* Ford Splinter / editorial finish 6.0. Additive, isolated from UCC-managed card styles. */
:root{--splinter-accent:#4aa9f7;--splinter-deep:#061629}
/* Primary navigation */
.header .nav{gap:clamp(12px,1.1vw,19px)}
.header .nav>a{font-size:17px}
.header .navcta{padding-inline:15px}
/* Readable, confident copy that lets the real garage photography shine. */
.hero-content>p{max-width:590px;line-height:1.72}
.home-hero .hero-content h1{font-size:clamp(5rem,9.2vw,10.2rem);letter-spacing:-.017em;line-height:.9}
.proofgrid>div strong{font-size:clamp(1.2rem,1.65vw,1.9rem)}
.section-heading>p{max-width:420px;line-height:1.73}
/* Full inventory: obvious beginning, browsable list, honest load state. */
.stock-section{background:linear-gradient(180deg,#f2f6fa 0%,#e9f0f7 100%)}
.stock-intro{display:flex;justify-content:space-between;align-items:end;gap:34px;margin:0 0 36px}
.stock-intro>div{max-width:890px}
.stock-intro h2{margin:16px 0 18px;font-size:clamp(3.8rem,7.5vw,7.1rem);line-height:.94;color:#0b233d}
.stock-intro p{max-width:730px;color:#4c6178;font-size:17px;line-height:1.72;margin:0}
.stock-jump{flex:none;margin-bottom:8px;min-height:59px;box-shadow:0 13px 30px #086ad828}
.stock-wayfinding{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:#d9e3ef;border:1px solid #d9e3ef;border-radius:8px;overflow:hidden;margin-bottom:26px}
.stock-wayfinding>div{display:grid;grid-template-columns:auto 1fr;column-gap:13px;row-gap:5px;padding:21px 19px 20px;background:#fff}
.wayfinding-icon{grid-row:1/3;align-self:center;display:grid;place-items:center;width:38px;height:38px;background:#e9f4ff;color:#1473c2;border-radius:5px;font:800 13px var(--body)}
.stock-wayfinding strong{color:#152b40;font-size:13px;line-height:1.3}
.stock-wayfinding small{color:#64798d;line-height:1.5;font-size:12px}
.inventory-shell{border-radius:10px;border:1px solid #cddceb;box-shadow:0 24px 80px rgba(5,26,50,.1)}
.inventory-top.stock-header{padding:28px 32px;background:linear-gradient(105deg,#07192c,#123c66);gap:30px;align-items:center;letter-spacing:normal}
.stock-header-copy .stock-overline{display:flex;align-items:center;gap:10px;font-size:10px;font-weight:800;letter-spacing:.18em;color:#9bcaef}
.stock-header-copy .stock-overline .pulsedot{width:7px;height:7px;flex:none}
.stock-header-copy h3{font:800 clamp(2.5rem,4vw,4rem)/.95 var(--display);letter-spacing:-.02em;color:white;margin:10px 0}
.stock-header-copy p{color:#c1d3e3;font-size:13px;font-weight:400;line-height:1.5;margin:0}
.stock-live-label{display:inline-flex;align-items:center;padding:10px 13px;border:1px solid #ffffff3d;border-radius:4px;background:#ffffff12;color:#f0f7ff;font-size:11px;font-weight:700;letter-spacing:.015em;white-space:nowrap;text-align:center}
.stock-results-caption{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 30px;border-bottom:1px solid #e1e9f2;color:#687f96;font-size:11px;line-height:1.4}
.stock-results-caption span:first-child{color:#0d2843;font-weight:900;letter-spacing:.11em}
.stock-section #svm-canvas{padding:28px 28px 36px;scroll-margin-top:140px}
#auto-overzicht{scroll-margin-top:132px}
.stock-section .load-state{padding:100px 16px;min-height:300px}
.stock-section .load-state strong{font-weight:800;color:#1b3b58}
.stock-section #ucc-loading.is-done{display:none}
.stock-after{display:flex;align-items:center;justify-content:space-between;gap:26px;background:#fff;margin-top:29px;border:1px solid #dce5ee;padding:34px 40px;border-radius:8px}
.stock-after h3{font:800 clamp(2rem,3vw,3rem)/1 var(--display);color:#123453;margin:14px 0 10px}
.stock-after p{max-width:680px;color:#52677a;font-size:14px;line-height:1.7;margin:0}
.stock-after .btn{flex:none}
@media(max-width:1350px){.header .nav{gap:13px}}
@media(max-width:950px){.stock-intro,.stock-after{align-items:start;flex-direction:column}.stock-jump{margin:0}.stock-wayfinding{grid-template-columns:1fr 1fr 1fr}.stock-wayfinding>div{padding:18px 12px;grid-template-columns:1fr}.wayfinding-icon{grid-row:auto}.stock-after .btn{align-self:start}}
@media(max-width:600px){.home-hero .hero-content h1{font-size:clamp(4.2rem,15vw,6.5rem)}.stock-intro{gap:24px}.stock-intro h2{font-size:clamp(3.5rem,13vw,5rem)}.stock-intro p{font-size:14px}.stock-wayfinding{grid-template-columns:1fr}.stock-wayfinding>div{grid-template-columns:auto 1fr;gap:4px 12px;padding:14px}.wayfinding-icon{grid-row:1/3}.inventory-top.stock-header{padding:24px 18px;display:flex;flex-direction:column;align-items:start;gap:16px}.stock-header-copy h3{font-size:2.9rem}.stock-results-caption{padding:15px 17px;display:block}.stock-results-caption span{display:block}.stock-results-caption span+span{margin-top:6px}.stock-section #svm-canvas{padding:12px;scroll-margin-top:95px}.stock-after{padding:24px 21px}.stock-after .btn{white-space:normal;width:100%}}
@media(prefers-reduced-motion:reduce){.stock-intro,.stock-wayfinding,.stock-after{scroll-behavior:auto}}

/* Keep the original lettering directly on the navigation surface. */
.header .brand { display: inline-flex; flex-direction: row; }
.wordmark { display: block; width: auto; height: clamp(50px, 5vw, 68px); }
.header { background: #081a2cf5; }
.header .nav { gap: clamp(14px, 1.65vw, 30px); }
.header .nav a { letter-spacing: .05em; }
.nav a::after { width: 100%; transform: scaleX(0); transform-origin: left; transition: transform .22s ease; }
.nav a:is(:hover, :focus-visible, [aria-current])::after { transform: scaleX(1); }
:where(a, button):focus-visible { outline: 3px solid #58afff; outline-offset: 4px; }
.btnbright { background: #0964d8; }
.btnbright:hover { background: #095ac3; }
.detailcard[id] { scroll-margin-top: 112px; }

/* The photographs, typography and controls share a single baseline at the foot of the hero. */
.home-hero {
  isolation: isolate; display: flex; flex-direction: column; align-items: stretch;
  justify-content: center; min-height: clamp(565px, calc(100svh - 129px), 790px);
  background: #081b2d;
}
.hero-gallery, .hero-shot, .home-hero::before { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-gallery { z-index: -2; overflow: hidden; }
.hero-shot { object-fit: cover; object-position: 54% 52%; opacity: 0; }
.hero-shot.current { opacity: 1; }
.home-hero::before {
  content: ""; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, #041325f2 0%, #051427de 25%, #06172898 48%, #06172821 79%),
              linear-gradient(0deg, #031323e8, transparent 28%);
}
.home-hero .hero-content { flex: 1; display: flex; justify-content: center; flex-direction: column; align-items: start; padding-block: clamp(56px, 7vh, 110px) 40px; }
.hero-content .slash { width: 32px; background: #64beff; }
.hero-content .kicker { color: #d9edff; }
.hero-content .kicker > span[aria-hidden] { color: #77c4ff; }
.home-hero .hero-content h1 { margin: 22px 0 18px; font-size: clamp(5.8rem, 8.65vw, 9rem); line-height: .89; letter-spacing: -.021em; }
.title-line { display: block; }
.home-hero .title-line:last-child { color: #7ecaff; }
.home-hero .hero-content > p { max-width: 52ch; margin: 0; color: #f1f5fa; text-wrap: pretty; }
.hero-content .hero-actions { margin: 26px 0 0; }
.hero-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 0 23px; border-top: 1px solid #d7eafa4a; color: #fff; }
.workshop-hours, .photo-credit { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; }
.workshop-hours { padding: 3px 0; }
.workshop-hours:hover > span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.workshop-hours i { display: inline-block; border-radius: 50%; background: #85caff; width: 3px; height: 3px; vertical-align: middle; margin: 0 4px; }
.foot-label { color: #c4d9e9; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.photo-tour, .photo-controls:not([hidden]) { display: flex; align-items: center; }
.photo-tour { gap: 21px; }
.photo-credit { text-align: right; }
.photo-credit b { color: #8ad1ff; padding-left: 5px; font-variant-numeric: tabular-nums; }
.photo-controls { gap: 5px; }
.photo-controls button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #d8ebff66; border-radius: 50%; background: #071527a6; color: white; }
.photo-controls svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.photo-controls button:hover, .photo-controls button:focus-visible { background: #fff; color: #0a2541; }
.section-heading .microtitle, .story-copy .kicker { display: inline-flex; align-items: center; gap: 10px; }
.section-heading .microtitle::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.serviceoverlay { border-inline-start: 2px solid #70bfff; margin: 0 0 27px 23px; padding: 0 18px 0 15px; }
.proofgrid strong { line-height: 1.05; }
.proofgrid span { color: #b8c9da; }
.contactform .btn[href^="mailto:"] { background: #e8f3ff; color: #0a365e; }

@media (min-width: 951px) and (max-width: 1210px) {
  .header .nav { gap: 13px; }
  .navinner { gap: 16px; }
}
@media (max-width: 950px) {
  .header .nav { gap: 0; }
  .menubutton { display: grid; place-content: center; gap: 5px; }
  .menubutton span { width: 20px; height: 2px; margin: 0; }
  .menubutton[aria-expanded="true"] span:first-child { transform: translateY(7px) rotate(45deg); }
  .menubutton[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menubutton[aria-expanded="true"] span:last-child { transform: translateY(-7px) rotate(-45deg); }
  .nav.open { max-height: calc(100svh - 112px); overflow-y: auto; }
}
@media (max-width: 600px) {
  .wordmark { height: 50px; }
  .navinner { height: 70px; gap: 10px; }
  .header .nav { top: 70px; }
  .header .navcta { min-height: 44px; font-size: 10px; gap: 7px; padding: 10px; }
  .menubutton { width: 44px; height: 44px; }
  .home-hero { min-height: clamp(560px, calc(88svh - 85px), 690px); }
  .home-hero::before {
    background: linear-gradient(90deg, #041325da, #06172855 93%), linear-gradient(0deg, #031323f5 0%, #06172860 35%, transparent 90%);
  }
  .home-hero .hero-content { padding-block: 44px 29px; }
  .home-hero .hero-content h1 { font-size: clamp(4.35rem, 15.7vw, 6rem); }
  .hero-content .kicker { font-size: 9px; gap: 8px; }
  .hero-content .hero-actions { width: min(100%, 360px); margin-top: 20px; }
  .hero-content .btn { min-height: 46px; }
  .hero-foot { padding: 13px 0 16px; gap: 9px; }
  .foot-label { font-size: 7.5px; }
  .workshop-hours, .photo-credit { font-size: 11px; }
  .photo-tour { gap: 7px; }
  .photo-controls { gap: 2px; }
}
@media (max-width: 370px) {
  .wordmark { height: 44px; }
  .header .navcta { font-size: 9px; white-space: nowrap; }
  .home-hero .hero-content h1 { font-size: clamp(3.4rem, 17.3vw, 4rem); }
  .hero-foot { flex-wrap: wrap; }
  .photo-tour { margin-inline-start: auto; }
  .photo-credit b { padding-left: 0; }
}

/* Visible content is the default. Motion is an enhancement applied once, when it can be seen. */
.reveal, .reveal.show { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes splinter-arrive { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } }
  @keyframes splinter-type { from { clip-path: inset(0 0 100%); transform: translateY(.21em); } to { clip-path: inset(-5% -2% -8%); transform: none; } }
  .title-line { animation: splinter-type .64s cubic-bezier(.2,.8,.22,1) backwards; }
  .title-line + .title-line { animation-delay: 85ms; }
  .hero-content .kicker, .hero-content > p, .hero-content .hero-actions, .interior-hero h1 { animation: splinter-arrive .5s ease-out backwards; }
  .hero-content > p { animation-delay: 90ms; }
  .hero-content .hero-actions { animation-delay: 150ms; }
  .hero-shot { transition: opacity .58s ease; }
  .photo-controls button, .menubutton span { transition: color .2s, background .2s, transform .23s, opacity .18s; }
  .reveal.show { animation: splinter-arrive .48s cubic-bezier(.2,.8,.3,1) backwards; }
  @media (min-width: 760px) {
    .servicesgrid > :nth-child(2).show, .teamgrid > :nth-child(4n+2).show { animation-delay: 45ms; }
    .servicesgrid > :nth-child(3).show, .teamgrid > :nth-child(4n+3).show { animation-delay: 85ms; }
    .servicesgrid > :nth-child(4).show, .teamgrid > :nth-child(4n).show { animation-delay: 125ms; }
  }
  @media (max-width: 950px) { .nav.open { animation: splinter-arrive .22s ease-out; } }
  @media (hover: hover) {
    .btn > span { transition: transform .2s ease; }
    .btn:hover > span { transform: translate(2px,-2px); }
  }
}