/*! Tuff Forms — visitor form */
@font-face {
	font-family: "TF Manrope";
	src: url("fonts/manrope-var.woff") format("woff");
	font-weight: 200 800;
	font-display: swap;
}

.tf {
	--tf-accent: #121417;
	--tf-accent-ink: #FFFFFF;
	--tf-ink: #121417;
	--tf-ink-2: #3A3F46;
	--tf-light: #A2A7AE;
	--tf-faint: #9BA0A7;
	--tf-line: #EAEAE7;
	--tf-tile: #F5F5F3;
	--tf-tile-hover: #EFEFEC;
	--tf-surface: #FFFFFF;
	--tf-bad: #D13B3B;
	--tf-live: #E5484D;
	--tf-r-card: 22px;
	--tf-r-tile: 16px;
	--tf-r-ctl: 12px;
	--tf-font: "TF Manrope", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;

	display: block;
	width: 100%;
	max-width: 900px;
	container-type: inline-size;
	container-name: tf;
	margin: 0 auto;
	font-family: var(--tf-font);
	font-size: 15px;
	line-height: 1.45;
	text-align: left;
	-webkit-font-smoothing: antialiased;
	font-variant-numeric: tabular-nums;
}
.tf--site-font { --tf-font: inherit; }
.tf[data-radius="square"] { --tf-r-card: 10px; --tf-r-tile: 8px; --tf-r-ctl: 6px; }
.tf[data-radius="round"] { --tf-r-card: 30px; --tf-r-tile: 22px; --tf-r-ctl: 999px; }
.tf.tf-root *, .tf.tf-root *::before, .tf.tf-root *::after { box-sizing: border-box; }
.tf.tf-root :where(h2, p, ul, li) { margin: 0; padding: 0; }
.tf.tf-root ul { list-style: none; }
.tf.tf-root button, .tf.tf-root input, .tf.tf-root textarea { font-family: inherit; letter-spacing: inherit; text-transform: none !important; }
.tf.tf-root button { font: inherit; color: inherit; }
.tf.tf-root svg { display: block; }

.tf-card {
	position: relative;
	background: var(--tf-surface);
	border: 1px solid rgba(18, 20, 23, .06);
	border-radius: var(--tf-r-card);
	box-shadow: 0 1px 2px rgba(18, 20, 23, .04), 0 18px 50px -24px rgba(18, 20, 23, .18);
	padding: 26px 30px 22px;
	overflow: hidden;
}

/* ---------- theme-proofing: themes style img, ul, li and p globally ---------- */
.tf.tf-root .tf-brand .tf-brand__logo { display: block; height: 34px !important; max-height: 34px !important; width: auto !important; max-width: 160px !important; min-width: 0; object-fit: contain; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0; box-shadow: none !important; }
.tf.tf-root ul.tf-trust, .tf.tf-root ul.tf-chips { list-style: none !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; }
.tf.tf-root ul.tf-trust { margin-top: 26px !important; padding-top: 20px !important; padding-bottom: 0 !important; }
.tf.tf-root ul.tf-chips { margin-top: 18px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.tf.tf-root .tf-trust > li, .tf.tf-root .tf-chips > li { list-style: none !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; }
.tf.tf-root .tf-trust > li::before, .tf.tf-root .tf-chips > li::before, .tf.tf-root .tf-trust > li::marker, .tf.tf-root .tf-chips > li::marker { content: none !important; display: none !important; }
.tf.tf-root p { margin-bottom: 0; }
.tf.tf-root .tf-eyebrow, .tf.tf-root .tf-sub, .tf.tf-root .tf-consent, .tf.tf-root .tf-error, .tf.tf-root .tf-bar__list { margin-bottom: 0 !important; }
.tf.tf-root img.tf-ico, .tf.tf-root .tf-opt img, .tf.tf-root .tf-drop__img { max-width: none; height: auto; border: 0; box-shadow: none; margin: 0; }
.tf.tf-root .tf-ico, .tf.tf-root .tf-ico--lucide { max-width: none; }
.tf.tf-root svg { max-width: none; }
.tf.tf-root .tf-foot { margin-bottom: 4px; }

/* Text colour is set on the white surfaces only, so anything outside them
   (the "or call…" line, the "we cover" list) takes the page's own colour. */
.tf.tf-root .tf-card, .tf.tf-root .tf-bar__box { color: var(--tf-ink); }
.tf.tf-root .tf-launch__call { color: inherit; }

/* ---------- head ---------- */
.tf-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; min-height: 48px; }
.tf-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tf-brand__mark { width: 26px; height: 26px; border-radius: 8px; background: var(--tf-accent); color: var(--tf-accent-ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; text-transform: uppercase; flex: none; }

.tf-brand__name { font-weight: 700; font-size: 14px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-brand__tag { color: var(--tf-faint); font-size: 12px; white-space: nowrap; }

.tf-progress { display: flex; align-items: center; gap: 12px; justify-self: center; }
.tf-progress__text { display: flex; flex-direction: column; line-height: 1.25; }
.tf-progress__count { font-size: 12px; font-weight: 600; color: var(--tf-ink-2); white-space: nowrap; }
.tf-progress__note { font-size: 11.5px; color: var(--tf-faint); white-space: nowrap; }

.tf-art--roof { width: 64px; height: 36px; }
.tf-art__outline { fill: none; stroke: #D9D9D5; stroke-width: 1.2; stroke-linejoin: round; transition: opacity .4s; }
.tf-tile { fill: var(--tf-accent); opacity: 0; transform: translateY(-3px); transform-box: fill-box; transition: opacity .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1.2); }
.tf-tile.is-on { opacity: 1; transform: none; }
.tf.is-done .tf-art__outline { opacity: 0; }

.tf-art--dots { display: flex; gap: 6px; }
.tf-art--dots i { width: 9px; height: 9px; border-radius: 50%; background: #E4E4E0; transition: background .3s, transform .3s; }
.tf-art--dots i.is-on { background: var(--tf-accent); transform: scale(1.1); }
.tf-art--bar { display: block; width: 84px; height: 6px; border-radius: 4px; background: #ECECE8; overflow: hidden; }
.tf-art--bar i { display: block; height: 100%; background: var(--tf-accent); transform-origin: 0 50%; transform: scaleX(0); transition: transform .45s cubic-bezier(.2, .8, .2, 1); border-radius: 4px; }

.tf-timer { justify-self: end; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--tf-ink-2); white-space: nowrap; }
.tf-timer i { width: 7px; height: 7px; border-radius: 50%; background: #C9CBCF; }
.tf-timer.is-running i { background: var(--tf-live); animation: tf-pulse 1.4s ease-in-out infinite; }
.tf-timer.is-done i { background: #1FA971; }
@keyframes tf-pulse { 50% { opacity: .35; } }

/* ---------- stage ---------- */
.tf-stage { padding: 30px 2px 6px; transition: opacity .17s ease, transform .22s ease; }
.tf-stage.is-out { opacity: 0; transform: translateY(-6px); }
.tf-stage.is-in { opacity: 0; transform: translateY(10px); transition: none; }

.tf-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 11.5px; letter-spacing: .14em; color: var(--tf-faint); margin-bottom: 10px; font-weight: 500; }
.tf-eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .7; }
.tf.tf-root .tf-title { font-family: var(--tf-font); font-size: clamp(26px, 5.2cqw, 40px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 700; color: var(--tf-ink); outline: none; margin: 0; text-transform: none; }
.tf-light { font-weight: 300; color: var(--tf-light); }
.tf-title--finish { font-size: clamp(34px, 7cqw, 58px); }
.tf-sub { margin-top: 10px; color: var(--tf-ink-2); font-size: 15px; max-width: 560px; }

/* ---------- options ---------- */
.tf-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.tf-options--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tf-options--many { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.tf-options--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tf.tf-root .tf-opt {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	text-align: left;
	gap: 14px;
	min-height: 168px;
	padding: 18px 18px 16px;
	margin: 0;
	background: var(--tf-tile);
	border: 1.5px solid transparent;
	border-radius: var(--tf-r-tile);
	cursor: pointer;
	box-shadow: none;
	transition: background .18s, border-color .18s, transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s;
	-webkit-tap-highlight-color: transparent;
}
.tf.tf-root .tf-opt:hover { background: var(--tf-tile-hover); transform: translateY(-2px); }
.tf.tf-root .tf-opt:active { transform: scale(.985); }
.tf.tf-root .tf-opt:focus-visible { outline: 2px solid var(--tf-accent); outline-offset: 2px; }
.tf.tf-root .tf-opt.is-on { background: var(--tf-surface); border-color: var(--tf-accent); box-shadow: 0 10px 28px -16px rgba(18, 20, 23, .35); }
.tf-opt--noicon { min-height: 96px; justify-content: flex-end; }
.tf-opt__art { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--tf-ink); min-height: 72px; transition: transform .25s cubic-bezier(.2, .8, .2, 1.3); }
.tf.tf-root .tf-opt:hover .tf-opt__art, .tf.tf-root .tf-opt.is-on .tf-opt__art { transform: scale(1.06); }
.tf-ico { width: 64px; height: 64px; }
.tf-ico--art { stroke-width: 1.6; }
.tf-ico--lucide { width: 44px; height: 44px; stroke-width: 1.35; }
img.tf-ico { object-fit: contain; }
.tf-opt__text { display: flex; flex-direction: column; gap: 2px; }
.tf-opt__label { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--tf-ink); }
.tf-opt__sub { font-size: 12.5px; color: var(--tf-faint); line-height: 1.35; }
.tf-opt__check { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--tf-accent); color: var(--tf-accent-ink); display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.4); transition: opacity .18s, transform .25s cubic-bezier(.2, .8, .2, 1.4); }
.tf-opt__check svg { width: 13px; height: 13px; }
.tf.tf-root .tf-opt.is-on .tf-opt__check { opacity: 1; transform: none; }
.tf-opt__key { position: absolute; top: 12px; left: 14px; font-size: 10.5px; font-weight: 600; color: #B9BCC1; opacity: 0; transition: opacity .2s; }
@media (pointer: fine) { .tf.tf-root .tf-opt:hover .tf-opt__key { opacity: 1; } }
.tf-stage.is-picked .tf-opt:not(.is-on) { opacity: .55; }

/* ---------- inputs ---------- */
.tf-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin-top: 24px; position: relative; }
.tf-field { display: flex; flex-direction: column; gap: 6px; }
.tf-field--wide { grid-column: 1 / -1; }
.tf-field--solo { margin-top: 24px; max-width: 520px; }
.tf-label { font-size: 12px; color: var(--tf-faint); font-weight: 500; }
.tf-label em { font-style: normal; opacity: .75; }
.tf.tf-root .tf-input {
	width: 100%;
	margin: 0;
	font: inherit;
	font-size: 16px;
	color: var(--tf-ink);
	background: var(--tf-surface);
	border: 1.5px solid #E2E2DE;
	border-radius: var(--tf-r-ctl);
	padding: 13px 15px;
	line-height: 1.3;
	box-shadow: none;
	outline: none;
	transition: border-color .15s, box-shadow .15s;
	min-height: 50px;
}
.tf[data-radius="round"] .tf-input--long, .tf[data-radius="round"] textarea.tf-input { border-radius: 18px; }
.tf.tf-root .tf-input::placeholder { color: #B5B8BD; }
.tf.tf-root .tf-input:focus { border-color: var(--tf-accent); box-shadow: 0 0 0 4px rgba(18, 20, 23, .06); }
.tf.tf-root .tf-input.is-bad { border-color: var(--tf-bad); }
.tf.tf-root .tf-input--big { font-size: 20px; padding: 16px 18px; font-weight: 500; }
.tf.tf-root textarea.tf-input { resize: vertical; min-height: 110px; }
.tf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.tf-error { margin-top: 12px; color: var(--tf-bad); font-size: 13.5px; font-weight: 500; }
.tf-error[hidden] { display: none; }
.tf-consent { margin-top: 14px; font-size: 12px; color: var(--tf-faint); max-width: 560px; }

/* photo */
.tf-drop { margin-top: 24px; display: flex; align-items: center; gap: 18px; padding: 22px; border: 1.5px dashed #D8D8D3; border-radius: var(--tf-r-tile); background: var(--tf-tile); cursor: pointer; max-width: 560px; transition: border-color .15s, background .15s; position: relative; }
.tf-drop:hover { border-color: var(--tf-accent); background: var(--tf-surface); }
.tf-drop.has-file { border-style: solid; border-color: var(--tf-line); background: var(--tf-surface); }
.tf-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.tf-drop__ico { width: 54px; height: 54px; border-radius: 14px; background: var(--tf-surface); display: flex; align-items: center; justify-content: center; color: var(--tf-ink); flex: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.tf-drop__ico svg { width: 24px; height: 24px; }
.tf-drop__img { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; flex: none; }
.tf-drop__text { display: flex; flex-direction: column; gap: 2px; }
.tf-drop__text b { font-weight: 600; font-size: 15px; }
.tf-drop__text span { font-size: 12.5px; color: var(--tf-faint); }

/* ---------- foot ---------- */
.tf-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; min-height: 44px; }
.tf-foot__right { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.tf.tf-root .tf-link { background: none; border: 0; padding: 6px 0; margin: 0; color: var(--tf-faint); font-size: 13px; font-weight: 500; cursor: pointer; box-shadow: none; }
.tf.tf-root .tf-link:hover { color: var(--tf-ink); background: none; }
.tf.tf-root .tf-btn {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 12px 22px; min-height: 48px; height: auto; margin: 0; line-height: 1.2; text-align: left;
	background: var(--tf-accent); color: var(--tf-accent-ink);
	border: 0; border-radius: 999px;
	font-size: 15px; font-weight: 600; letter-spacing: -0.005em;
	cursor: pointer; box-shadow: 0 8px 20px -10px rgba(18, 20, 23, .55);
	transition: transform .15s, opacity .15s, box-shadow .15s;
}
.tf.tf-root .tf-btn svg { width: 18px; height: 18px; transition: transform .2s; }
.tf.tf-root .tf-btn:hover:not(:disabled) { transform: translateY(-1px); background: var(--tf-accent); color: var(--tf-accent-ink); }
.tf.tf-root .tf-btn:hover:not(:disabled) svg { transform: translateX(3px); }
.tf.tf-root .tf-btn:disabled { opacity: .35; cursor: default; box-shadow: none; }
.tf.tf-root .tf-btn.is-busy { opacity: .7; }
.tf.tf-root .tf-btn.is-busy svg { animation: tf-nudge .8s ease-in-out infinite; }
@keyframes tf-nudge { 50% { transform: translateX(4px); } }
.tf-step--contact .tf-foot { justify-content: space-between; }

/* ---------- finish ---------- */
.tf-chips { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; }
.tf-chips li { font-size: 13px; color: var(--tf-ink-2); font-weight: 500; }
.tf-chips li span { color: var(--tf-faint); font-weight: 400; margin-right: 4px; }
.tf-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 26px; }
.tf-next__card { background: var(--tf-tile); border-radius: var(--tf-r-tile); padding: 18px 18px 16px; opacity: 0; transform: translateY(10px); animation: tf-rise .5s cubic-bezier(.2, .8, .2, 1) forwards; }
.tf-next__card:nth-child(2) { animation-delay: .08s; }
.tf-next__card:nth-child(3) { animation-delay: .16s; }
.tf-next__card:nth-child(4) { animation-delay: .24s; }
@keyframes tf-rise { to { opacity: 1; transform: none; } }
.tf-next__big { font-size: 38px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.tf-next__big small { font-size: 18px; font-weight: 400; color: var(--tf-light); letter-spacing: -0.01em; margin-left: 2px; }
.tf-next__card--est .tf-next__big { white-space: nowrap; }
.tf-next__card--est .tf-next__big small { font-size: 0.62em; font-weight: 300; }
.tf-next__title { font-weight: 600; font-size: 14px; margin-top: 10px; }
.tf-next__text { font-size: 12.5px; color: var(--tf-faint); margin-top: 3px; line-height: 1.4; }

/* ---------- trust ---------- */
.tf-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--tf-line); }
.tf-trust__item { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.tf-trust__ico { width: 30px; height: 30px; border-radius: 9px; background: var(--tf-tile); display: flex; align-items: center; justify-content: center; flex: none; color: var(--tf-ink-2); }
.tf-trust__ico svg { width: 16px; height: 16px; stroke-width: 1.7; }
.tf-trust__ico svg.tf-ico--art { width: 20px; height: 20px; stroke-width: 2.4; }
.tf-trust__ico--star { color: #F2A93B; }
.tf-trust__body { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.tf-trust__top { font-size: 12.5px; color: var(--tf-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-trust__top b { font-weight: 700; color: var(--tf-ink); }
.tf-trust__note { font-size: 11.5px; color: var(--tf-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-stars { display: flex; gap: 1px; color: #F2A93B; margin-top: 2px; }
.tf-stars svg { width: 11px; height: 11px; }

/* ---------- chips (small answers) ---------- */
.tf-options--chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tf.tf-root .tf-options--chips .tf-opt { flex-direction: row; align-items: center; min-height: 0; gap: 8px; padding: 9px 14px 9px 10px; border-radius: 999px; background: var(--tf-surface); border: 1.5px solid var(--tf-line); }
.tf.tf-root .tf-options--chips .tf-opt:hover { transform: none; border-color: #CFCFCB; background: var(--tf-surface); }
.tf.tf-root .tf-options--chips .tf-opt.is-on { background: var(--tf-accent); border-color: var(--tf-accent); box-shadow: none; }
.tf.tf-root .tf-options--chips .tf-opt.is-on .tf-opt__label { color: var(--tf-accent-ink); }
.tf.tf-root .tf-options--chips .tf-opt.is-on .tf-opt__art { color: var(--tf-accent-ink); }
.tf-options--chips .tf-opt__art { flex: none; min-height: 0; width: 22px; height: 22px; transform: none !important; }
.tf-options--chips .tf-ico { width: 22px; height: 22px; }
.tf-options--chips .tf-ico--art { stroke-width: 3; }
.tf-options--chips .tf-ico--lucide { width: 18px; height: 18px; stroke-width: 1.8; }
.tf-options--chips .tf-opt--noicon { padding-left: 14px; }
.tf-options--chips .tf-opt__label { font-size: 14px; }
.tf-options--chips .tf-opt__sub, .tf-options--chips .tf-opt__check, .tf-options--chips .tf-opt__key { display: none; }

/* ---------- banner (area result) ---------- */
.tf-banner { display: flex; gap: 12px; align-items: flex-start; border-radius: 14px; padding: 12px 14px; margin-bottom: 18px; animation: tf-rise .4s cubic-bezier(.2, .8, .2, 1) both; opacity: 1; transform: none; }
.tf-banner.is-ok { background: #EAF7F0; color: #0C5B3A; }
.tf-banner.is-miss { background: #FFF3E6; color: #8A4B08; }
.tf-banner b { display: block; font-weight: 700; font-size: 14.5px; }
.tf-banner small { display: block; font-size: 12.5px; opacity: .8; margin-top: 1px; }
.tf-banner__ico { width: 24px; height: 24px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; color: #fff; }
.tf-banner.is-ok .tf-banner__ico { background: #1FA971; }
.tf-banner.is-miss .tf-banner__ico { background: #E08A1E; }
.tf-banner__ico svg { width: 15px; height: 15px; }
.tf-step--miss .tf-foot { margin-top: 6px; }

/* checking */
.tf-step--checking { padding: 18px 0 8px; }
.tf-checking { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 15px; color: var(--tf-ink-2); }
.tf-spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid #E4E4E0; border-top-color: var(--tf-accent); animation: tf-spin .7s linear infinite; }
@keyframes tf-spin { to { transform: rotate(360deg); } }
.tf-checking__bar { height: 4px; border-radius: 4px; background: #EEEEEA; margin-top: 16px; overflow: hidden; }
.tf-checking__bar i { display: block; height: 100%; width: 40%; background: var(--tf-accent); border-radius: 4px; animation: tf-load 1s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes tf-load { from { width: 6%; } to { width: 100%; } }

/* area step in the card layout */
.tf-field--inline { display: flex; flex-direction: row; gap: 10px; align-items: stretch; }
.tf-field--inline .tf-input { flex: 1; min-width: 0; }
.tf-bar__list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; font-size: 12.5px; color: var(--tf-faint); }
.tf-bar__list span { margin-right: 2px; }
.tf-bar__list b { font-weight: 500; color: var(--tf-ink-2); background: rgba(255, 255, 255, .85); border: 1px solid var(--tf-line); border-radius: 999px; padding: 3px 10px; }

/* ---------- booking slots ---------- */
.tf-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 18px; }
.tf.tf-root .tf-slot { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 12px 14px; margin: 0; border: 1.5px solid var(--tf-line); border-radius: var(--tf-r-tile); background: var(--tf-surface); cursor: pointer; text-align: left; box-shadow: none; transition: border-color .15s, background .15s, transform .15s; }
.tf.tf-root .tf-slot:hover { border-color: #CFCFCB; transform: translateY(-1px); background: var(--tf-surface); }
.tf.tf-root .tf-slot.is-on { border-color: var(--tf-accent); background: color-mix(in srgb, var(--tf-accent) 7%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tf-accent) 14%, transparent); }
.tf-slot__day { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--tf-ink); }
.tf-slot__date { font-size: 12px; color: var(--tf-faint); }
.tf-slot__win { font-size: 13.5px; font-weight: 600; color: var(--tf-ink-2); margin-top: 6px; }
.tf-slot__left { position: absolute; top: 10px; right: 10px; font-size: 10.5px; font-weight: 700; color: #C2410C; }
.tf-slots.is-loading .tf-slot { height: 86px; border-color: transparent; background: linear-gradient(90deg, #F2F2EF 0%, #F8F8F6 50%, #F2F2EF 100%); background-size: 200% 100%; animation: tf-shimmer 1.1s linear infinite; cursor: default; }
@keyframes tf-shimmer { to { background-position: -200% 0; } }
.tf-fields--compact { margin-top: 16px; }
.tf-noslots { margin-top: 14px; }

/* ---------- hero layout: a one-line bar that opens into a small card ---------- */
.tf--hero { max-width: 640px; }
.tf-bar__box { display: flex; align-items: center; gap: 12px; background: var(--tf-surface); border-radius: 18px; padding: 8px 8px 8px 16px; box-shadow: 0 1px 2px rgba(18, 20, 23, .06), 0 18px 44px -18px rgba(18, 20, 23, .4); border: 1px solid rgba(18, 20, 23, .05); }
.tf-bar__box.is-shake { animation: tf-shake .4s ease; }
@keyframes tf-shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.tf-bar__pin { color: #E5484D; flex: none; display: flex; }
.tf-bar__pin svg { width: 20px; height: 20px; }
.tf-bar__field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; cursor: text; }
.tf-bar__label { font-size: 11.5px; color: var(--tf-faint); font-weight: 500; line-height: 1.2; }
.tf-bar__label .tf-light { font-weight: 500; color: var(--tf-faint); }
.tf.tf-root .tf-bar__input { border: 0; outline: none; background: transparent; padding: 2px 0; margin: 0; font: inherit; font-size: 17px; font-weight: 600; color: var(--tf-ink); width: 100%; box-shadow: none; min-height: 0; letter-spacing: .02em; }
.tf.tf-root .tf-bar__input::placeholder { color: #B9BCC1; font-weight: 500; letter-spacing: 0; }
.tf--hero .tf-bar .tf-btn { flex: none; border-radius: 13px; min-height: 48px; }
.tf-bar__error { margin: 8px 4px 0; }
.tf--hero .tf-bar__list { justify-content: flex-start; }

.tf-card--compact { padding: 16px 18px 18px; border-radius: 20px; animation: tf-open .45s cubic-bezier(.2, .8, .2, 1); transform-origin: top center; }
@keyframes tf-open { from { opacity: .4; transform: scaleY(.6) translateY(-6px); } }
.tf-chead { display: flex; align-items: center; gap: 10px; }
.tf-chead__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tf-chead__val { font-size: 16px; font-weight: 700; letter-spacing: .02em; }
.tf.tf-root .tf-btn--dark { background: var(--tf-ink); min-height: 38px; padding: 8px 14px; font-size: 13px; border-radius: 11px; box-shadow: none; }
.tf.tf-root .tf-btn--dark:hover:not(:disabled) { background: #000; }
.tf.tf-root .tf-btn--dark svg { width: 15px; height: 15px; }
.tf-segs { display: flex; gap: 6px; margin: 14px 0 0; }
.tf-segs i { flex: 1; height: 4px; border-radius: 3px; background: #E9E9E5; transition: background .3s; }
.tf-segs i.is-on { background: var(--tf-ink); }
.tf-segs i.is-now { background: var(--tf-accent); }
.tf--hero .tf-stage { padding-top: 18px; }
.tf--hero .tf.tf-root .tf-title, .tf.tf-root.tf--hero .tf-title { font-size: clamp(21px, 4.6cqw, 27px); letter-spacing: -0.025em; }
.tf.tf-root.tf--hero .tf-title--finish { font-size: clamp(24px, 6cqw, 32px); display: flex; align-items: center; gap: 12px; }
.tf.tf-root.tf--hero .tf-eyebrow { margin-bottom: 6px; }
.tf.tf-root.tf--hero .tf-foot { margin-top: 16px; }
.tf.tf-root.tf--hero .tf-options:not(.tf-options--chips) { margin-top: 16px; }
.tf.tf-root.tf--hero .tf-options:not(.tf-options--chips) .tf-opt { min-height: 120px; }
.tf-done-ico { width: 34px; height: 34px; border-radius: 50%; background: #1FA971; color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; animation: tf-pop .45s cubic-bezier(.2, .8, .2, 1.4); }
.tf-done-ico svg { width: 20px; height: 20px; }
@keyframes tf-pop { from { transform: scale(.3); opacity: 0; } }
.tf.tf-root.tf--hero .tf-next { grid-template-columns: 1fr; gap: 8px; margin-top: 16px; }
.tf.tf-root.tf--hero .tf-next__card { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; padding: 12px 14px; }
.tf.tf-root.tf--hero .tf-next__big { grid-row: span 2; font-size: 26px; min-width: 64px; }
.tf.tf-root.tf--hero .tf-next__title { margin-top: 0; }
.tf.tf-root.tf--hero .tf-next__text { margin-top: 0; }

/* hero: start as a button that turns into the postcode box */
.tf-launch { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tf-launch[hidden], .tf-bar[hidden] { display: none !important; }
.tf.tf-root .tf-launch__btn { min-height: 52px; padding: 14px 26px; font-size: 16px; }
.tf.tf-root .tf-launch__call { font-size: 14px; font-weight: 500; color: inherit; opacity: .85; text-decoration: none; }
.tf.tf-root a.tf-launch__call:hover { opacity: 1; text-decoration: underline; }
.tf-bar.is-morph .tf-bar__box { animation: tf-morph .55s cubic-bezier(.2, .8, .2, 1); transform-origin: left center; }
.tf-bar.is-morph .tf-bar__field, .tf-bar.is-morph .tf-bar__pin { animation: tf-fadein .45s .12s both; }
.tf-bar.is-morph .tf-bar__list { animation: tf-fadein .4s .25s both; }
@keyframes tf-morph { from { clip-path: inset(0 62% 0 0 round 18px); opacity: .6; } to { clip-path: inset(0 0 0 0 round 18px); opacity: 1; } }
@keyframes tf-fadein { from { opacity: 0; transform: translateY(4px); } }

/* hero alignment: centre (default) or left, to match the page's hero */
.tf--hero.tf--align-center { margin-left: auto; margin-right: auto; }
.tf--align-center .tf-launch { justify-content: center; }
.tf--align-center .tf-bar__list { justify-content: center; }
.tf--align-center .tf-bar__error { text-align: center; }
.tf--hero.tf--align-left { margin-left: 0; margin-right: auto; }

/* "3 free slots left this week" badge */
.tf-slots-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: #121417; font: 600 13px/1.2 "TF Manrope", ui-sans-serif, system-ui, sans-serif; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .35); }
.tf-slots-badge i { width: 8px; height: 8px; border-radius: 50%; background: #1FA971; box-shadow: 0 0 0 4px rgba(31, 169, 113, .2); animation: tf-pulse 1.6s ease-in-out infinite; }
.tf-slots-badge.is-full i { background: #E08A1E; box-shadow: 0 0 0 4px rgba(224, 138, 30, .2); }

/* ---------- narrow: sizes follow the form's own width, so it fits any column ---------- */
@container tf (max-width: 760px) {
	.tf-head { grid-template-columns: 1fr auto; row-gap: 14px; }
	.tf-progress { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; background: var(--tf-tile); border-radius: 12px; padding: 8px 12px; }
	.tf-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
	.tf-options--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tf.tf-root .tf-opt { min-height: 150px; padding: 16px 14px 14px; }
}
@container tf (max-width: 560px) {
	.tf-card { padding: 18px 16px 16px; border-radius: calc(var(--tf-r-card) - 4px); }
	.tf-brand__tag { display: none; }
	.tf-stage { padding-top: 22px; min-height: 0; }
	.tf-options, .tf-options--2, .tf-options--4, .tf-options--many { grid-template-columns: 1fr; gap: 10px; margin-top: 18px; }
	.tf.tf-root .tf-opt { flex-direction: row; align-items: center; min-height: 0; padding: 12px 14px; gap: 14px; }
	.tf-opt__art { flex: none; width: 52px; min-height: 52px; height: 52px; }
	.tf-ico { width: 46px; height: 46px; }
	.tf-ico--lucide { width: 30px; height: 30px; }
	.tf-opt__check { top: 50%; margin-top: -11px; right: 14px; }
	.tf-opt__key { display: none; }
	.tf-fields { grid-template-columns: 1fr; }
	.tf-foot { position: sticky; bottom: 0; }
	.tf.tf-root .tf-btn { min-height: 52px; }
	.tf-step--contact .tf-foot__right, .tf-step--text .tf-foot__right, .tf-step--long .tf-foot__right, .tf-step--photo .tf-foot__right, .tf-step--multi .tf-foot__right { flex: 1; justify-content: flex-end; }
	.tf-next { grid-template-columns: 1fr 1fr; }
	.tf-next__card--est { grid-column: 1 / -1; }
	.tf-next__big { font-size: 32px; }
	.tf.tf-root .tf-title { font-size: 28px; }
	.tf-title--finish { font-size: 40px; }
	.tf.tf-root.tf--hero .tf-title { font-size: 22px; }
	.tf.tf-root.tf--hero .tf-title--finish { font-size: 26px; }
	.tf-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	.tf.tf-root .tf-slot { padding: 10px; }
	.tf-slot__win { font-size: 12.5px; }
	.tf-fields--compact { grid-template-columns: 1fr 1fr; }
	.tf-field--inline { flex-direction: column; }
	.tf.tf-root.tf--hero .tf-options:not(.tf-options--chips) .tf-opt { min-height: 0; }
}
@container tf (max-width: 420px) {
	.tf-bar__box { flex-wrap: wrap; padding: 10px 10px 10px 14px; }
	.tf-bar__field { flex-basis: calc(100% - 40px); }
	.tf--hero .tf-bar .tf-btn { width: 100%; justify-content: center; }
	.tf-fields--compact { grid-template-columns: 1fr; }
	.tf-slots { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.tf.tf-root *, .tf.tf-root *::before, .tf.tf-root *::after { animation: none !important; transition: none !important; }
	.tf-next__card { opacity: 1; transform: none; }
}

/* town / ZIP type-ahead (1.2) */
.tf.tf-root .tf-ac { position: relative; flex: 1; min-width: 0; display: flex; }
.tf.tf-root .tf-ac .tf-input { flex: 1; width: 100%; }
.tf.tf-root .tf-bar__field.has-suggest .tf-suggest { left: -8px; right: auto; min-width: min(360px, 86vw); top: calc(100% + 14px); }
.tf.tf-root .has-suggest { position: relative; z-index: 6; }
.tf.tf-root .tf-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); margin: 0 !important; padding: 6px !important; list-style: none !important; background: var(--tf-surface); color: var(--tf-ink); border-radius: 14px; border: 1px solid rgba(18, 20, 23, .08); box-shadow: 0 18px 40px -16px rgba(18, 20, 23, .38); text-align: left; animation: tf-sg-in .16s ease-out; }
.tf.tf-root .tf-suggest li { display: grid !important; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; margin: 0 !important; padding: 10px 12px !important; border-radius: 10px; cursor: pointer; list-style: none !important; font-size: 15px; line-height: 1.25; }
.tf.tf-root .tf-suggest li::before, .tf.tf-root .tf-suggest li::marker { content: none !important; display: none !important; }
.tf.tf-root .tf-suggest li:hover, .tf.tf-root .tf-suggest li.is-on { background: var(--tf-tile-hover); }
.tf.tf-root .tf-suggest__pin { width: 18px; height: 18px; color: var(--tf-accent); display: inline-flex; }
.tf.tf-root .tf-suggest__pin svg { width: 18px; height: 18px; }
.tf.tf-root .tf-suggest b { font-weight: 600; color: var(--tf-ink); }
.tf.tf-root .tf-suggest small { font-size: 13px; color: var(--tf-faint); white-space: nowrap; }
@keyframes tf-sg-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@container tf (max-width: 520px) { .tf.tf-root .tf-suggest small { grid-column: 2 / 4; margin-top: -6px; } .tf.tf-root .tf-suggest li { grid-template-columns: 22px 1fr; row-gap: 2px; } }

/* ---------- recommend a package (1.2) ---------- */
.tf-step--thinking { padding: 6px 0 4px; }
.tf-think { display: flex; align-items: center; gap: 14px; }
.tf-think .tf-spin { width: 22px; height: 22px; flex: none; }
.tf.tf-root .tf-think__title { font-size: clamp(22px, 3.2cqi, 30px); margin: 0; }
.tf.tf-root ul.tf-think__list { list-style: none !important; margin: 22px 0 0 !important; padding: 0 !important; display: grid; gap: 8px; max-width: 460px; }
.tf.tf-root .tf-think__list li { display: grid !important; grid-template-columns: 24px 1fr auto; align-items: center; gap: 12px; margin: 0 !important; padding: 12px 14px !important; border-radius: var(--tf-r-ctl); background: var(--tf-tile); font-size: 15px; list-style: none !important; opacity: 0; transform: translateY(6px); animation: tf-think-in .35s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: var(--tf-d, 0ms); }
.tf.tf-root .tf-think__list li::before, .tf.tf-root .tf-think__list li::marker { content: none !important; display: none !important; }
.tf-think__list li > span:nth-child(2) { color: var(--tf-ink-2); }
.tf-think__list li b { font-weight: 600; color: var(--tf-ink); text-align: right; }
.tf-think__tick { width: 22px; height: 22px; border-radius: 50%; background: var(--tf-accent); color: var(--tf-accent-ink); display: inline-flex; align-items: center; justify-content: center; }
.tf-think__tick svg { width: 13px; height: 13px; }
.tf.tf-root .tf-think__bar { max-width: 460px; margin-top: 18px; }
.tf.tf-root .tf-think__bar i { animation-duration: 2.2s; }
@keyframes tf-think-in { to { opacity: 1; transform: none; } }

.tf-pkgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 26px; align-items: stretch; }
.tf-pkgs--1 { grid-template-columns: minmax(0, 420px); }
.tf-pkgs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tf-pkgs--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tf.tf-root .tf-pkg { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 22px 20px 20px; border-radius: var(--tf-r-tile); background: var(--tf-tile); border: 1.5px solid transparent; transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s, border-color .2s; }
.tf.tf-root .tf-pkg:hover { transform: translateY(-2px); }
.tf.tf-root .tf-pkg.is-rec { background: var(--tf-surface); border-color: var(--tf-accent); box-shadow: 0 22px 48px -26px rgba(18, 20, 23, .45); padding-top: 30px; }
.tf.tf-root .tf-pkg.is-on { border-color: var(--tf-accent); }
.tf-pkg__badge { position: absolute; top: -12px; left: 18px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; border-radius: 999px; background: var(--tf-accent); color: var(--tf-accent-ink); font-size: 12px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; box-shadow: 0 6px 16px -8px rgba(18, 20, 23, .6); }
.tf-pkg__badge svg { width: 12px; height: 12px; }
.tf-pkg__art { display: flex; align-items: center; justify-content: flex-start; color: var(--tf-ink); height: 64px; }
.tf-pkg__head { display: flex; flex-direction: column; gap: 3px; }
.tf-pkg__tag { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tf-faint); }
.tf-pkg__name { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--tf-ink); line-height: 1.15; }
.tf-pkg__spec { font-size: 13px; color: var(--tf-ink-2); line-height: 1.4; }
.tf-pkg__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tf-pkg__price b { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; color: var(--tf-ink); line-height: 1; }
.tf-pkg__price small { font-size: 12.5px; color: var(--tf-faint); }
.tf.tf-root ul.tf-pkg__feat { list-style: none !important; margin: 0 !important; padding: 14px 0 0 !important; border-top: 1px solid var(--tf-line); display: grid; gap: 8px; flex: 1; align-content: start; }
.tf.tf-root .tf-pkg__feat li { display: flex !important; gap: 9px; align-items: flex-start; margin: 0 !important; padding: 0 !important; font-size: 13.5px; line-height: 1.35; color: var(--tf-ink-2); list-style: none !important; }
.tf.tf-root .tf-pkg__feat li::before, .tf.tf-root .tf-pkg__feat li::marker { content: none !important; display: none !important; }
.tf-pkg__tick { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--tf-accent); }
.tf-pkg__tick svg { width: 16px; height: 16px; }
.tf.tf-root .tf-pkg__btn { width: 100%; justify-content: center; text-align: center; margin-top: 4px; padding-left: 14px; padding-right: 14px; font-size: 14.5px; }
.tf-pkg__badge { max-width: calc(100% - 28px); overflow: hidden; text-overflow: ellipsis; }
.tf.tf-root .tf-btn--soft, .tf.tf-root .tf-btn--soft:hover:not(:disabled) { background: var(--tf-surface); color: var(--tf-ink); box-shadow: inset 0 0 0 1.5px var(--tf-line); }
.tf-pkgs__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 18px; font-size: 13px; color: var(--tf-ink-2); font-weight: 500; }
.tf-pkgs__foot span { display: inline-flex; align-items: center; gap: 6px; }
.tf-pkgs__foot svg { width: 14px; height: 14px; color: var(--tf-accent); }
.tf-incl { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--tf-line); }
.tf.tf-root .tf-incl__title { margin: 0 0 14px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--tf-ink); }
.tf.tf-root ol.tf-incl__list { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tf.tf-root .tf-incl__list li { display: flex !important; gap: 14px; align-items: flex-start; margin: 0 !important; padding: 14px 16px !important; border-radius: var(--tf-r-ctl); background: var(--tf-tile); list-style: none !important; }
.tf.tf-root .tf-incl__list li::before, .tf.tf-root .tf-incl__list li::marker { content: none !important; display: none !important; }
.tf-incl__n { font-size: 13px; font-weight: 700; color: var(--tf-accent); letter-spacing: .02em; padding-top: 1px; }
.tf-incl__list li span { display: flex; flex-direction: column; gap: 2px; }
.tf-incl__list li span b { font-size: 14.5px; font-weight: 600; color: var(--tf-ink); }
.tf-incl__list li small { font-size: 13px; color: var(--tf-faint); line-height: 1.4; }
@container tf (max-width: 820px) {
	.tf-pkgs--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tf-pkgs--3 { gap: 10px; }
	.tf.tf-root .tf-pkgs--3 .tf-pkg { padding-left: 16px; padding-right: 16px; }
	.tf-pkgs--3 .tf-pkg__name { font-size: 19px; }
	.tf-pkgs--3 .tf-pkg__price b { font-size: 26px; }
}
@container tf (max-width: 700px) {
	.tf-pkgs--3 { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.tf.tf-root .tf-pkgs--3 .tf-pkg.is-rec { order: -1; }
}
@container tf (max-width: 560px) {
	.tf-pkgs, .tf-pkgs--2, .tf-pkgs--4 { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.tf.tf-root .tf-pkg.is-rec { order: -1; }
	.tf-pkg__art { height: 48px; }
	.tf.tf-root ol.tf-incl__list { grid-template-columns: minmax(0, 1fr); }
	.tf-pkgs__foot { justify-content: flex-start; }
}
@container tf (max-width: 560px) {
	.tf.tf-root .tf-bar__field.has-suggest .tf-suggest { left: -40px; right: -12px; min-width: 0; top: calc(100% + 10px); }
}

/* 1.3: reCAPTCHA notice */
.tf.tf-root .tf-captcha { font-size: 11px !important; color: var(--tf-faint); margin-top: 6px !important; }
.tf.tf-root .tf-captcha a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }