/* ==========================================================================
   BCL Servis – signature layer (demo)
   Loaded after main.css. One motif carries the whole site: the slanted red
   seam from the home booking band (and the swoosh in the logo). It appears
   as section edges, short skewed bars and photo cuts.
   ========================================================================== */

:root {
	--skew: -18deg;
	--slant: 20px;
	--seam-w: 6px;
	--green: #1fa45a;
}
@media (min-width: 600px) {
	:root { --slant: 32px; --seam-w: 10px; }
}

/* Small skewed red bar: the seam at text size ----------------------------- */
.eyebrow { display: flex; align-items: center; gap: 10px; }
.eyebrow::before {
	content: "";
	width: 22px; height: .8em; flex-shrink: 0;
	background: var(--red);
	transform: skewX(var(--skew));
}
.section-head h2::after,
.split__text > h2::after,
.stk-check h2::after {
	content: "";
	display: block;
	width: 56px; height: 5px; margin-top: .4em;
	background: var(--red);
	transform: skewX(var(--skew));
	transform-origin: left center;
}
.section--navy .section-head h2::after { background: #fff; }
.mark { background: var(--red); color: #fff; padding: 0 .18em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn-ghost-light:hover { background: #fff; color: var(--navy); border-color: #fff; }

/* Live open/closed state ------------------------------------------------- */
.open-state, .open-pill { display: inline-flex; align-items: center; gap: 8px; }
.open-state[hidden], .open-pill[hidden] { display: none; }
.open-state::before, .open-pill::before {
	content: ""; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
	background: #8a96a3; box-shadow: 0 0 0 3px rgba(138, 150, 163, .25);
}
.is-open::before { background: #33d17a; box-shadow: 0 0 0 3px rgba(51, 209, 122, .28); }
.topbar .open-state { color: #fff; font-weight: 600; }
.topbar .open-state:not([hidden]) + [data-hours-static] { display: none; }
.open-pill {
	margin: 0 0 14px; padding: 5px 12px 5px 10px;
	background: rgba(7, 24, 42, .55); border: 1px solid rgba(255, 255, 255, .22);
	color: #fff; font-size: .875rem; font-weight: 600; backdrop-filter: blur(6px);
	clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.open-state--card { margin: 12px 0 0; font-size: .875rem; font-weight: 600; color: var(--ink); }
@media (max-width: 599px) { .open-pill { margin-bottom: 10px; font-size: .8125rem; } }
/* From 768px the top bar shows the same status, so the hero pill would repeat it. */
@media (min-width: 768px) { .hero .open-pill { display: none; } }

/* Home hero: bottom edge on the seam angle -------------------------------- */
.hero-wrap {
	position: relative;
	background: var(--red);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%);
	padding-bottom: var(--seam-w);
}
.hero-wrap .hero { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%); }
.hero-wrap + .quickbar .quickbar__grid { margin-top: calc(-1 * var(--slant) - 4px); box-shadow: var(--shadow); }
@media (max-width: 959px) { .hero-wrap + .quickbar .quickbar__grid { margin-top: 12px; box-shadow: none; } }

/* Sub-page hero: slanted bottom edge with the red seam --------------------- */
.page-hero--seam {
	position: relative;
	isolation: isolate;
	background: transparent;
	border-bottom: 0;
	padding-bottom: calc(clamp(20px, 3vw, 40px) + var(--slant));
}
.page-hero--seam::before,
.page-hero--seam::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, var(--soft) 0%, #fff 100%);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%);
}
.page-hero--seam::after {
	inset: 0 0 calc(-1 * var(--seam-w));
	z-index: -2;
	background: var(--red);
}
.page-hero--seam + .section { padding-top: clamp(24px, 3vw, 40px); }

/* Photo cut on the seam angle, with a red stripe running alongside. */
@media (min-width: 700px) {
	.page-hero--seam .page-hero__media { position: relative; }
	.page-hero--seam .page-hero__media img {
		border-radius: 0;
		clip-path: polygon(calc(9% + 14px) 0, 100% 0, 100% 100%, 14px 100%);
	}
	.page-hero--seam .page-hero__media::before {
		content: "";
		position: absolute; inset: 0; z-index: 1;
		background: var(--red);
		clip-path: polygon(9% 0, calc(9% + 8px) 0, 8px 100%, 0 100%);
	}
}
@media (min-width: 900px) {
	.page-hero--seam.has-image .page-hero__media { margin-bottom: calc(-1 * var(--slant) / 2); }
}

/* Dark variant (trucks) */
.page-hero--dark::before { background: linear-gradient(160deg, var(--navy-700) 0%, var(--navy) 55%, var(--navy-950) 100%); }
.page-hero--dark { color: #dbe6f1; }
.page-hero--dark h1 { color: #fff; }
.page-hero--dark .lead { color: #c9d7e5; }
.page-hero--dark .breadcrumbs, .page-hero--dark .breadcrumbs a { color: #9fb1c3; }
.page-hero--dark :focus-visible { outline-color: var(--blue-light); }
.cert-badge {
	display: inline-flex; align-items: center; gap: 12px;
	margin: 16px 0 0; padding: 10px 16px 10px 12px;
	background: rgba(255, 255, 255, .06); border-left: 4px solid var(--red);
	color: #fff; font-size: .9375rem;
}
.cert-badge .icon { width: 28px; height: 28px; color: #ff8a96; }
.cert-badge b { font-family: "Barlow Condensed", var(--font-display); font-size: 1.25rem; letter-spacing: .02em; margin-right: 4px; }

/* CTA band on sub-pages: same seam as the home booking band --------------- */
.cta-band--seam {
	position: relative;
	isolation: isolate;
	overflow-x: clip;
	background: transparent;
	padding-top: var(--slant);
}
.cta-band--seam::before,
.cta-band--seam::after {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background: var(--navy-900);
	clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%);
}
.cta-band--seam::after { inset: calc(-1 * var(--seam-w)) 0 0; z-index: -2; background: var(--red); }
.cta-band--seam .cta-band__inner { padding-top: 36px; padding-bottom: 40px; }
.cta-band--seam h2 { font-family: "Barlow Condensed", var(--font-display); font-size: clamp(1.6rem, 1.05rem + 1.45vw, 2.4rem); line-height: 1.05; }
.cta-band__deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cta-band__deco .swoosh { position: absolute; right: var(--gutter); bottom: -10px; width: min(30vw, 150px); opacity: .12; }

/* Seam draw-in: the red seam of a band wipes in when it reaches the viewport. */
@media (prefers-reduced-motion: no-preference) {
	.sig-js [data-seam]::after { clip-path: polygon(0 var(--slant), 0 var(--slant), 0 100%, 0 100%); transition: clip-path .9s cubic-bezier(.2, .7, .1, 1); }
	.sig-js [data-seam].is-in::after { clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%); }
}

/* Footer swoosh ----------------------------------------------------------- */
.site-footer { position: relative; overflow: hidden; }
.site-footer__deco { position: absolute; right: -40px; top: -20px; width: 340px; opacity: .05; pointer-events: none; }
.site-footer__deco .swoosh { width: 100%; height: auto; display: block; }
.site-footer__grid, .site-footer__bottom { position: relative; }
.demo-flag { color: #ff9ea8; font-weight: 600; }

/* Split photo with a seam corner ----------------------------------------- */
.split__media--seam { position: relative; }
.split__media--seam img { border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), 0 100%); }
.split__media--seam::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: -8px; height: 36px;
	background: var(--red);
	clip-path: polygon(0 calc(100% - 8px), 100% 0, 100% 8px, 0 100%);
}

/* Foldable service cards: open cards on desktop, a tap-to-open list on phones */
.service-fold { display: block; }
.service-fold summary { list-style: none; display: flex; align-items: flex-start; gap: 10px; cursor: default; }
.service-fold summary::-webkit-details-marker { display: none; }
.service-fold summary .service-card__icon { margin-top: .15em; }
.service-fold summary h3 { margin: 0 0 6px; flex: 1; }
.service-fold__body { padding-left: calc(1.15em + 10px); }
.service-fold__chev, .service-fold__hint { display: none; }
@media (max-width: 599px) {
	.service-grid--numbered { gap: 0 !important; border-top: 1px solid var(--line); }
	.service-grid--numbered .service-card { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0; background: transparent; }
	.service-grid--numbered .service-card::after { display: none; }
	.service-fold summary { align-items: center; padding: 13px 2px; cursor: pointer; }
	.service-fold summary h3 { margin: 0; font-size: 1rem; }
	.service-fold summary .service-card__icon { margin: 0; }
	.service-fold__chev { display: block; color: var(--navy); transition: transform .2s; }
	.service-fold[open] .service-fold__chev { transform: rotate(180deg); color: var(--red); }
	.service-fold[open] summary h3 { color: var(--red-600); }
	.service-fold__body { padding: 0 2px 14px calc(1.15em + 12px); }
	.service-fold__body p { margin-bottom: 6px; }
	.service-fold__hint { display: block; margin-top: 8px !important; font-size: .875rem; }

	/* decorative split photos and the link cards take a lot of height on phones */
	.split__media--seam { display: none; }
	.link-cards { grid-template-columns: repeat(3, 1fr); gap: 6px; }
	.link-card { flex-direction: column; justify-content: center; gap: 6px; padding: 12px 6px; text-align: center; font-size: .8125rem; line-height: 1.25; }
	.link-card .icon:last-child { display: none; }
}

/* Numbered service cards: index + seam on hover --------------------------- */
.service-grid--numbered { counter-reset: svc; }
.service-card { position: relative; overflow: hidden; align-content: start; }
.service-grid--numbered .service-card { counter-increment: svc; padding-right: 48px; }
.service-grid--numbered .service-card::after {
	content: counter(svc, decimal-leading-zero);
	position: absolute; top: 14px; right: 16px;
	font-family: "Barlow Condensed", var(--font-display); font-weight: 700; font-size: 1.125rem;
	color: #c3cdd7;
}
.service-card::before {
	content: "";
	position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
	background: var(--red);
	transform: scaleY(0); transform-origin: bottom;
	transition: transform .25s ease-out;
}
.service-card:hover::before, .service-card:focus-within::before { transform: scaleY(1); }
.service-card:hover::after { color: var(--red); }

/* Route band: the promo map on the home page ------------------------------ */
.route-band {
	position: relative;
	isolation: isolate;
	overflow-x: clip;
	color: #c9d7e5;
	padding: calc(clamp(40px, 5vw, 72px) + var(--slant)) 0 clamp(40px, 5vw, 72px);
}
.route-band::before,
.route-band::after {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background: var(--navy-950);
	clip-path: polygon(0 0, 100% var(--slant), 100% 100%, 0 100%);
}
.route-band::after { inset: calc(-1 * var(--seam-w)) 0 0; z-index: -2; background: var(--red); clip-path: polygon(0 0, 100% var(--slant), 100% 100%, 0 100%); }
@media (prefers-reduced-motion: no-preference) {
	.sig-js .route-band[data-seam]::after { clip-path: polygon(100% var(--slant), 100% var(--slant), 100% 100%, 100% 100%); }
	.sig-js .route-band[data-seam].is-in::after { clip-path: polygon(0 0, 100% var(--slant), 100% 100%, 0 100%); }
}
.route-band :focus-visible { outline-color: var(--blue-light); }
.route { display: grid; gap: 28px 48px; align-items: center; }
@media (min-width: 960px) { .route { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.route__text h2 { color: #fff; font-family: "Barlow Condensed", var(--font-display); font-size: clamp(2rem, 1.4rem + 2.2vw, 3.2rem); line-height: 1.02; letter-spacing: -.015em; }
.route__text > p { max-width: 46ch; }
.route__text .actions { margin-top: 24px; }

.route-towns { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 20px 0 22px; }
.route-towns button {
	width: 100%; display: grid; gap: 0; padding: 8px 10px; text-align: left;
	background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: 0;
	color: #c9d7e5; font: inherit; cursor: pointer;
	transition: background-color .2s, border-color .2s;
}
.route-towns button:hover, .route-towns button[aria-pressed="true"] { background: rgba(217, 0, 23, .18); border-color: rgba(255, 90, 105, .7); color: #fff; }
.route-towns b { font-family: "Barlow Condensed", var(--font-display); font-size: 1.5rem; line-height: 1.05; color: #fff; }
.route-towns span { font-size: .8125rem; }
@media (max-width: 599px) {
	.route-band { padding-bottom: 32px; }
	.route { gap: 18px; }
	.route__text h2 { font-size: 1.9rem; }
	.route__text > p { font-size: .9375rem; margin-bottom: 0; }
	.route-towns { gap: 4px; margin: 14px 0 0; }
	.route-towns button { padding: 6px 6px; }
	.route-towns b { font-size: 1.125rem; }
	.route-towns span { font-size: .6875rem; }
	.route__text .actions { margin-top: 14px; }
	.route__text .actions .btn-ghost-light { display: none; }
}

/* Towns as SEO text, folded under the map */
.route-areas { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .12); }
.route-areas summary {
	list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 14px 0 0; color: #fff; font-weight: 600; cursor: pointer;
}
.route-areas summary::-webkit-details-marker { display: none; }
.route-areas summary .icon { transition: transform .2s; color: #ff8a96; }
.route-areas[open] summary .icon { transform: rotate(180deg); }
.route-areas__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 32px; padding-top: 16px; }
.route-areas h3 { color: #fff; font-size: .9375rem; margin-bottom: 4px; }
.route-areas p { margin: 0; font-size: .875rem; color: #9fb1c3; line-height: 1.5; }

.route-steps { list-style: none; display: grid; gap: 6px; }
.route-steps li {
	display: flex; align-items: center; gap: 12px;
	padding: 8px 12px 8px 8px;
	border-left: 3px solid transparent;
	transition: background-color .3s, border-color .3s, opacity .3s;
	opacity: .55;
}
.route-steps.is-static li, .route-steps li.is-active, .route-steps li.is-done { opacity: 1; }
.route-steps li.is-active { background: rgba(255, 255, 255, .07); border-left-color: var(--red); }
.route-steps__n {
	flex-shrink: 0; display: grid; place-items: center;
	width: 30px; height: 30px; border-radius: 50%;
	background: rgba(255, 255, 255, .1); color: #fff;
	font-family: "Barlow Condensed", var(--font-display); font-weight: 700; font-size: 1.0625rem;
	transition: background-color .3s;
}
.route-steps li.is-active .route-steps__n, .route-steps li.is-done .route-steps__n { background: var(--red); }
.route-steps li:last-child.is-active .route-steps__n, .route-steps li:last-child.is-done .route-steps__n { background: var(--green); }
.route-steps__n .icon { width: 16px; height: 16px; }
.route-steps small { display: block; font-size: .8125rem; color: #9fb1c3; }
.route-steps b { display: block; font-family: var(--font-display); color: #fff; font-size: 1.0625rem; line-height: 1.25; }

.route-steps--light { margin-top: 18px; }
.route-steps--light li { opacity: .6; }
.route-steps--light li.is-active { background: #fff; box-shadow: var(--shadow); }
.route-steps--light .route-steps__n { background: var(--line); color: var(--ink); }
.route-steps--light li.is-active .route-steps__n, .route-steps--light li.is-done .route-steps__n { color: #fff; }
.route-steps--light small { color: var(--muted); }
.route-steps--light b { color: var(--ink); }

.route-map {
	position: relative; margin: 0;
	aspect-ratio: 5 / 4;
	background: var(--navy-950);
	clip-path: polygon(24px 0, 100% 0, calc(100% - 24px) 100%, 0 100%);
}
.route-map canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.route-map__fallback { position: absolute; inset: 0; }
.route-map__fallback img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.route-map.is-live .route-map__fallback { display: none; }
.route-map__replay {
	position: absolute; right: 36px; bottom: 16px; z-index: 2;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 0;
	background: rgba(7, 24, 42, .7); color: #fff; font: 600 .875rem/1.2 var(--font); cursor: pointer;
	backdrop-filter: blur(4px);
}
.route-map__replay:hover { background: var(--red); border-color: var(--red); }
.route-map__replay[hidden] { display: none; }
.route-map__credit { position: absolute; left: 30px; bottom: 8px; font-size: .6875rem; color: rgba(255, 255, 255, .5); }
@media (max-width: 599px) {
	.route-map { aspect-ratio: 1 / 1; clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
	.route-map__replay { right: 22px; }
	.route-map__credit { left: 20px; }
}

/* Contact hero with the live map in place of the photo. */
.page-hero.has-map .page-hero__media--map::before { display: none; }
.page-hero__media--map .route-map { aspect-ratio: 4 / 3; }
@media (max-width: 699px) {
	.page-hero.has-map .page-hero__media--map { display: block; }
}
@media (min-width: 900px) {
	.page-hero.has-map .page-hero__inner { grid-template-columns: 1.2fr 1fr; align-items: center; }
	.page-hero.has-map .page-hero__media { position: relative; }
}

/* Winter tyres season card ------------------------------------------------ */
.season {
	display: grid; gap: 24px 48px;
	background: #fff; border: 1px solid var(--line);
	padding: clamp(20px, 3vw, 36px);
	position: relative; overflow: hidden;
}
.season::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--red); }
@media (min-width: 900px) { .season { grid-template-columns: .9fr 1.1fr; align-items: center; } }
.season h2 { font-family: "Barlow Condensed", var(--font-display); font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.3rem); line-height: 1.05; }
.season__live { font-size: 1.0625rem; color: var(--ink); }
.season__live b { color: var(--red-600); }
.season__track { position: relative; padding-top: 34px; }
.season__months { list-style: none; display: grid; grid-template-columns: repeat(12, 1fr); border-top: 10px solid var(--soft); }
.season__months li { padding-top: 6px; font-size: .75rem; font-weight: 600; color: var(--muted); text-align: center; }
.season__winter {
	position: absolute; top: 34px; height: 10px;
	left: calc(4 / 12 * 100%); width: calc(5 / 12 * 100%);
	background: repeating-linear-gradient(-60deg, var(--blue) 0 6px, #2f85c6 6px 12px);
	transform-origin: left;
}
.season__today { position: absolute; top: 0; bottom: 22px; width: 2px; background: var(--red); left: var(--x, 50%); }
.season__today[hidden] { display: none; }
.season__today i {
	position: absolute; top: 0; left: 50%; transform: translateX(-50%);
	padding: 2px 8px; background: var(--red); color: #fff; font-style: normal; font-size: .75rem; font-weight: 700; white-space: nowrap;
}
.tread { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.tread__item { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 12px 14px; background: var(--soft); }
.tread__item b { font-family: "Barlow Condensed", var(--font-display); font-size: 1.75rem; line-height: 1; color: var(--navy); }
.tread__item > span:last-child { grid-column: 2; font-size: .8125rem; color: var(--muted); line-height: 1.35; }
.tread__gauge { grid-row: span 2; position: relative; width: 26px; height: 52px; background: #1d2a36; border-radius: 4px; overflow: hidden; }
.tread__gauge i { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--d) / 8 * 100%); background: repeating-linear-gradient(0deg, #3b4b5b 0 4px, #1d2a36 4px 8px); border-top: 2px solid #9ccbf3; }
.season__note { margin: 18px 0 0; font-size: .875rem; color: var(--muted); }
@media (max-width: 479px) { .tread { grid-template-columns: 1fr; } .season__months li { font-size: .625rem; } }

/* STK: ticking checklist + due-date calculator ---------------------------- */
.stk-layout { display: grid; gap: 28px 48px; align-items: start; }
@media (min-width: 960px) { .stk-layout { grid-template-columns: 1.1fr .9fr; } }
.stk-check .note { margin-top: 18px; }
.check-list--tick .icon { color: #fff; background: var(--navy); border-radius: 50%; padding: 3px; width: 1.35em; height: 1.35em; margin-top: .1em; transition: background-color .3s; }
.check-list--tick li.is-ticked .icon { background: var(--red); }
.check-list--tick li { padding: 6px 0; }
.stk-calc { background: var(--navy); color: #dbe6f1; padding: clamp(20px, 3vw, 32px) calc(clamp(20px, 3vw, 32px) + 44px) clamp(20px, 3vw, 32px) clamp(20px, 3vw, 32px); position: relative; overflow: hidden; }
.stk-calc::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 48px; background: var(--red); clip-path: polygon(70% 0, 100% 0, 100% 100%, 0 100%); }
.stk-calc .eyebrow { color: #ff9ea8; }
.stk-calc h2 { color: #fff; font-family: "Barlow Condensed", var(--font-display); font-size: 1.75rem; }
.stk-calc__fields { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; margin: 16px 0; }
.stk-calc label { display: grid; gap: 4px; font-size: .8125rem; font-weight: 600; color: #9fb1c3; }
.stk-calc select { height: 44px; padding: 0 10px; border: 0; border-radius: 0; background: #fff; color: var(--ink); font: 600 1rem var(--font); }
.stk-calc select:focus-visible { outline: 3px solid var(--blue-light); }
.stk-calc__out { display: block; min-height: 3.2em; color: #fff; font-size: 1.0625rem; }
.stk-calc__out b { display: block; font-family: "Barlow Condensed", var(--font-display); font-size: 2.4rem; line-height: 1.05; }
.stk-calc__out .btn { margin-top: 14px; }
.stk-calc__warn { margin: 0 0 14px; padding: 10px 12px; background: var(--red); color: #fff; font-size: .9375rem; line-height: 1.45; }
.stk-calc__warn b { display: inline; font: inherit; font-weight: 700; }
.stk-calc__plan { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.stk-calc__plan li { display: grid; padding: 6px 10px; border: 1px solid rgba(255, 255, 255, .2); font-size: .875rem; font-weight: 600; line-height: 1.3; }
.stk-calc__plan li span { font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #9fb1c3; }
.stk-calc__plan li i { font-style: normal; }
.stk-calc__plan li.is-past { color: #9fb1c3; }
.stk-calc__plan li.is-past i { text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .45); }
.stk-calc__plan li.is-next { background: #fff; border-color: #fff; color: var(--navy); }
.stk-calc__plan li.is-next span { color: var(--red-600); }
.stk-calc__hint { margin: 10px 0 0; font-size: .8125rem; color: #9fb1c3; }

/* Booking mock (demo only) ------------------------------------------------ */
.booking-mock { padding: 22px; }
.booking-mock__flag { margin: 0 0 6px; padding: 8px 12px; background: var(--red-tint); color: var(--red-600); font-weight: 600; font-size: .875rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.chip { padding: 8px 14px; border: 2px solid var(--line); font-weight: 600; font-size: .9375rem; }
.chip.is-on { background: var(--red); border-color: var(--red); color: #fff; }
.booking-mock__field { height: 44px; border: 2px solid var(--line); margin: 8px 0; }

/* Scroll reveal ---------------------------------------------------------- */
/* Kept for single blocks (photos, the STK calculator, the season card). Card grids and
   section headings stay put; a heading only draws its red seam bar in. */
@media (prefers-reduced-motion: no-preference) {
	.sig-js [data-reveal]:not(.section-head) { opacity: 0; transform: translateY(18px); transition: opacity .55s ease-out, transform .55s cubic-bezier(.2, .7, .1, 1); transition-delay: var(--d, 0ms); }
	.sig-js [data-reveal].is-in { opacity: 1; transform: none; }
	.sig-js .section-head[data-reveal] h2::after { transform: skewX(var(--skew)) scaleX(0); transition: transform .6s .25s cubic-bezier(.2, .7, .1, 1); }
	.sig-js .section-head[data-reveal].is-in h2::after { transform: skewX(var(--skew)) scaleX(1); }
	.page-hero--seam .page-hero__media::before { animation: sig-stripe .8s .1s cubic-bezier(.2, .7, .1, 1) both; }
	.page-hero--seam .page-hero__media img { animation: sig-photo .9s cubic-bezier(.2, .7, .1, 1) both; }
	.hero-wrap { animation: sig-seam-in 1s .2s cubic-bezier(.2, .7, .1, 1) both; }
}
@keyframes sig-stripe { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sig-photo { from { clip-path: polygon(100% 0, 100% 0, 100% 100%, calc(91% + 0px) 100%); } }
@keyframes sig-seam-in { from { padding-bottom: 0; } }