@font-face { font-family: Roboto; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/98b910f0208e132f8fc60ce2.ttf') format('truetype'); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/a0ab9869bed1d244173bfce6.ttf') format('truetype'); }
:root {
  --color-ink: #262a2c;
  --color-muted: #515e62;
  --color-paper: #ffffff;
  --color-soft: #f0f5f5;
  --color-line: #d1dddf;
  --color-red: #e20d18;
  --color-red-hover: #bc0a13;
  --color-teal: #126474;
  --color-teal-dark: #185b69;
  --color-banner: #575757;
  --color-commitments: #c90b12;
  --color-check: var(--color-teal);
  --color-check-on-dark: #a3fff4;
  --color-night: #222426;
  --color-on-teal: #d9f0ed;
  --color-orange: #f28a19;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-section: clamp(2.5rem, 5vw, 4rem);
  --page-gutter: clamp(1.125rem, 4vw, 2.5rem);
  --page-width: 72rem;
  --radius-control: .25rem;
  --radius-panel: .875rem;
  --text-small: .875rem;
  --text-body: 1rem;
  --text-lead: clamp(1.125rem, 2vw, 1.375rem);
  --text-h2: clamp(1.625rem, 3vw, 2.125rem);
  --text-h4: 1.25rem;
  --text-h1: clamp(2rem, 5vw, 2.5rem);
  --text-section-title: var(--text-h1);
  --text-card-title: 1.375rem;
  --text-step-title: 1.5rem;
  --text-action: 1.125rem;
  --text-list: var(--text-lead);
  @media (width < 48rem) { --text-list: clamp(1.25rem, 4cqw, 1.5rem); }
  --text-brand: clamp(.875rem, 2vw, 1.25rem);
  --header-height: 4.25rem;
  --preview-height: 2.75rem;
  --touch-target: 2.75rem;
  --shadow-control: 0 .375rem 1rem #172b3026;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  font-family: Roboto, Arial, sans-serif;
  color: var(--color-ink);
  background: var(--color-paper);
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-height) + var(--preview-height) + var(--space-4)); }
html:has(.site--focused) { --preview-height: 0rem; --header-height: 3.75rem; }
body { margin: 0; font-size: var(--text-body); line-height: 1.6; }
button, summary { -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; }
button { cursor: pointer; }
img { max-inline-size: 100%; block-size: auto; display: block; }
a { color: var(--color-teal); text-underline-offset: .2em; }
::selection { color: white; background: var(--color-teal); }
:focus-visible { outline: .1875rem solid var(--color-teal); outline-offset: .25rem; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin-block: 0; }
h1, h2, h3 { line-height: 1.12; }
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-section-title); }
h3 { font-size: var(--text-card-title); }
h1, h2 { letter-spacing: -.03em; text-wrap: balance; }
p { max-inline-size: 67ch; }
svg { flex: none; inline-size: 1.25rem; block-size: 1.25rem; }
.layout { inline-size: min(var(--page-width), calc(100% - var(--page-gutter) * 2)); margin-inline: auto; }
.skip-link { position: fixed; inset-block-start: var(--space-2); inset-inline-start: var(--space-4); z-index: 50; padding: var(--space-3); background: white; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.masthead { position: sticky; inset-block-start: 0; z-index: 20; }
.preview-nav { background: var(--color-soft); border-block-end: 1px solid var(--color-line); }
.preview-nav__inner { min-block-size: var(--preview-height); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.preview-nav__back { font-size: .8125rem; color: var(--color-muted); text-decoration: none; min-block-size: var(--touch-target); display: flex; align-items: center; gap: var(--space-1); }
.preview-nav__options { display: flex; align-items: center; gap: var(--space-1); }
.preview-nav__link { display: grid; place-items: center; min-block-size: var(--touch-target); min-inline-size: 2.75rem; color: var(--color-muted); text-decoration: none; font-weight: 700; font-size: var(--text-small); border-block-end: .1875rem solid transparent; }
.preview-nav__link--current { color: var(--color-teal); border-block-end-color: var(--color-teal); }
.site-header { background: var(--color-teal); color: white; }
.site-header--location { background: var(--color-night); }
.site-header__inner { min-block-size: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); position: relative; container-type: inline-size; }
.site-header__inner--wide { inline-size: 100%; padding-inline: var(--page-gutter); }
.header-links { display: none; flex: 1; align-items: center; justify-content: flex-start; gap: var(--space-2); @container (min-width: 70rem) { display: flex; } }
.header-links__link { display: flex; align-items: center; justify-content: center; min-block-size: var(--touch-target); padding-inline: var(--space-3); color: white; font-size: var(--text-brand); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; white-space: nowrap; border-radius: var(--radius-control); &:hover, &:focus-visible { background: #ffffff14; } &:focus-visible { outline-color: white; } }
.site--focused .header-links__link { padding-inline: var(--space-2); }
.brand { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; color: white; min-inline-size: 0; }
.brand__logo { inline-size: clamp(3.5rem, 7vw, 4.75rem); block-size: 3rem; object-fit: contain; }
.brand__name { font-size: var(--text-brand); font-weight: 700; line-height: 1.2; }
.header-actions { display: flex; gap: var(--space-2); align-items: center; }
.header-actions__call { display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-inline-size: var(--touch-target); min-block-size: var(--touch-target); padding-inline: var(--space-3); background: var(--color-red); color: white; border-radius: var(--radius-control); text-decoration: none; font-size: 1.25rem; font-weight: 700; &:hover { background: var(--color-red-hover); } &:focus-visible { outline-color: white; } }
.header-actions__call--desktop { display: none; @container (min-width: 55rem) { display: flex; } }
.header-actions__number { display: none; @container (min-width: 40rem) { display: inline; } }
.menu { position: relative; }
.menu--collapsible { @container (min-width: 70rem) { display: none; } }
.menu__toggle { min-block-size: var(--touch-target); padding-inline: var(--space-3); display: flex; align-items: center; gap: var(--space-2); cursor: pointer; font-size: var(--text-small); list-style: none; &::marker { content: ''; } &::-webkit-details-marker { display: none; } }
.menu__toggle--icon { min-inline-size: var(--touch-target); justify-content: center; border: 1px solid var(--color-paper); border-radius: var(--radius-control); &:focus-visible { outline-color: white; } }
.menu__line { transform-box: fill-box; transform-origin: center; transition: transform .2s var(--ease-out), opacity .15s var(--ease-out); }
.menu[open] .menu__line--top { transform: translateY(6px) rotate(45deg); }
.menu[open] .menu__line--middle { opacity: 0; }
.menu[open] .menu__line--bottom { transform: translateY(-6px) rotate(-45deg); }
.menu__panel { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + var(--space-4)); inline-size: min(20rem, calc(100vw - var(--page-gutter) * 2)); padding: var(--space-2); background: var(--color-night); border-radius: var(--radius-control); box-shadow: 0 .75rem 1.5rem #00000026; display: grid; }
.menu__link { display: flex; align-items: center; min-block-size: 3rem; padding-inline: var(--space-4); color: white; text-decoration: none; border-radius: .25rem; &:hover, &:focus-visible { background: #ffffff14; } }
.button { display: inline-flex; justify-content: center; align-items: center; gap: var(--space-2); min-block-size: 3.375rem; padding: var(--space-3) var(--space-5); border-radius: var(--radius-control); font-size: var(--text-action); font-weight: 700; text-decoration: none; border: 0; transition: background .18s var(--ease-out), transform .18s var(--ease-out); &:active { transform: translateY(.125rem); } }
.button--primary { background: var(--color-red); color: white; &:hover { background: var(--color-red-hover); } &:focus-visible { outline-color: var(--color-red); } }
.button--wide { inline-size: 100%; }
.button--quiet { color: var(--color-teal); background: var(--color-soft); font-size: var(--text-body); }
.brand-banner { display: grid; place-items: center; padding: var(--space-5); background: var(--color-banner); }
.brand-banner--plain { background: var(--color-paper); padding-block-end: var(--space-2); padding-inline: 0; }
.brand-banner__logo { inline-size: clamp(13rem, 38vw, 23.4375rem); block-size: auto; }
.brand-banner--plain .brand-banner__logo { inline-size: 23.4375rem; }
.site--focused .brand-banner--plain { --banner-logo-width: 23.4375rem; @media (width < 37.5rem) { --banner-logo-width: min(82vw, 20rem); } }
.site--focused .brand-banner--plain::before { content: ''; grid-area: 1 / 1; inline-size: var(--banner-logo-width); aspect-ratio: 750 / 490; background: #00000066; -webkit-mask: url('/media/speedys-logo-refined-v2.svg') center / contain no-repeat; mask: url('/media/speedys-logo-refined-v2.svg') center / contain no-repeat; filter: blur(3px); transform: translateY(4px); pointer-events: none; }
.site--focused .brand-banner--plain .brand-banner__logo { grid-area: 1 / 1; position: relative; inline-size: var(--banner-logo-width); }
.brand-banner--compact { padding-block: var(--space-4); }
.brand-banner--compact .brand-banner__logo { inline-size: clamp(10rem, 28vw, 18rem); }
.hero { padding-block: var(--space-6); text-align: center; background: var(--color-paper); }
.hero--close { padding-block-start: var(--space-4); }
.hero__title { font-size: var(--text-h1); max-inline-size: 34ch; margin-inline: auto; }
.hero__lead { font-size: var(--text-lead); margin-block-start: var(--space-4); margin-inline: auto; }
.hero__call { margin-block-start: var(--space-4); inline-size: min(100%, 24rem); }
.hero__area { margin-block-start: var(--space-4); margin-inline: auto; color: var(--color-muted); font-size: var(--text-small); }
.site--focused .hero__lead { font-size: var(--text-h2); text-wrap: balance; }
.site--focused .hero__area { font-size: var(--text-h4); text-wrap: balance; }
.site--focused .brand-banner--plain { padding-block-start: var(--space-section); }
.site--focused .hero--close { padding-block-end: var(--space-section); }
.site--focused .proof--responsive { padding-block: var(--space-section); }
.site--teal .hero { padding-block: var(--space-5); }
.proof { background: var(--color-teal); color: white; padding-block: var(--space-6); }
.proof--responsive { container-type: inline-size; }
.proof__layout { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr)); align-items: center; }
.proof--responsive .proof__layout { grid-template-columns: minmax(0, 1fr); @container (min-width: 48rem) { grid-template-columns: minmax(0, 1fr) minmax(0, clamp(calc((100% - var(--space-6)) / 3), calc((100% - var(--space-6)) * .4 - (100cqw - 56.25rem) * .2), calc((100% - var(--space-6)) * .4))); } }
.proof__availability { font-size: var(--text-section-title); }
.proof__availability--center { text-align: center; }
.proof__trust--readable { font-size: var(--text-list); }
.proof__layout--trust-first .proof__trust { order: -1; }
.trust-list { display: grid; gap: var(--space-3); padding: 0; margin-block: var(--space-5) 0; list-style: none; }
.trust-list--centered { inline-size: fit-content; max-inline-size: 100%; margin-inline: auto; text-align: left; @container (width < 37.5rem) { inline-size: 100%; margin-inline: 0; } }
.trust-list__item { display: flex; align-items: flex-start; gap: var(--space-3); line-height: 1.4; }
.trust-list__icon { font-size: inherit; inline-size: 1.2em; block-size: 1.2em; color: var(--color-check); margin-block-start: .05em; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.proof { --color-check: var(--color-check-on-dark); }
.service-photo { padding-block-end: var(--space-7); }
.service-photo__image { inline-size: 100%; block-size: auto; max-block-size: 25rem; aspect-ratio: 2; object-fit: cover; object-position: 50% 40%; border-radius: var(--radius-panel); }
.section { padding-block: var(--space-section); }
.section--responsive-guide { container-type: inline-size; }
.section__heading { font-size: var(--text-section-title); max-inline-size: 32ch; margin-inline: auto; text-align: center; }
.section__intro { margin-block-start: var(--space-3); margin-inline: auto; text-align: center; font-size: var(--text-lead); color: var(--color-muted); }
.towing-services .section__intro { text-wrap: pretty; }
.towing-services__layout { display: grid; align-items: center; gap: var(--space-6); margin-block-start: var(--space-6); @media (width >= 56rem) { grid-template-columns: minmax(0, .9fr) minmax(0, 2fr); gap: var(--space-7); } }
.towing-services__photo { inline-size: min(100%, 22rem); block-size: auto; border-radius: var(--radius-panel); justify-self: center; }
.towing-services__lists { display: grid; gap: var(--space-4) var(--space-6); @media (width >= 36rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.towing-services__lists ul { display: grid; gap: var(--space-4); list-style: none; padding: 0; margin: 0; }
.towing-services__lists li { display: flex; align-items: start; gap: var(--space-3); font-size: var(--text-list); line-height: 1.5; }
.towing-services__lists .trust-list__icon { color: var(--color-teal); background: transparent; border-radius: 0; }
.tow-guide { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--space-6); counter-reset: tow-step; margin-block-start: var(--space-6); }
.tow-guide--responsive { padding: 0; margin-block-end: 0; list-style: none; grid-template-columns: 1fr; @container (min-width: 48rem) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tow-guide__heading { display: grid; justify-items: center; gap: var(--space-4); margin-block-end: var(--space-3); @container (36rem <= width < 48rem) { grid-template-columns: 3rem minmax(0, 1fr); justify-items: start; align-items: center; } }
.tow-guide__number { display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; border: 0; border-radius: 50%; color: var(--color-paper); background: var(--color-red); font-size: 1.625rem; font-weight: 700; }
.tow-guide__step { display: block; padding-block: var(--space-4); counter-increment: tow-step; &::before { content: counter(tow-step); display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; margin-inline: auto; border: 2px solid var(--color-teal); border-radius: 50%; color: var(--color-teal); background: var(--color-paper); font-size: 1.625rem; font-weight: 700; } }
.tow-guide__step--responsive { &::before { content: none; } }
.tow-guide__title { font-size: var(--text-step-title); text-align: center; margin-block: var(--space-4) var(--space-3); }
.tow-guide__title--responsive { margin: 0; @container (36rem <= width < 48rem) { text-align: left; } }
.tow-guide__text { display: grid; gap: var(--space-3); color: var(--color-muted); }
.tow-guide__call { margin-block-start: var(--space-4); }
.repair-offer { background: var(--color-teal-dark); color: white; padding-block: var(--space-section); }
.site--focused .repair-offer { container-type: inline-size; }
.repair-offer__layout { display: grid; gap: var(--space-6); align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr)); }
.site--focused .repair-offer__layout { grid-template-columns: minmax(0, 1fr); @container (min-width: 40.625rem) { grid-template-columns: minmax(0, clamp(calc((100% - var(--space-6)) / 3), calc((100% - var(--space-6)) / 2 - (100cqw - 40.625rem) * .55), calc((100% - var(--space-6)) / 2))) minmax(0, 1fr); } }
.repair-offer__copy--balanced { text-align: center; text-wrap: balance; }
.repair-offer__copy--balanced p { margin-inline: auto; }
.repair-offer__title { font-size: var(--text-section-title); max-inline-size: 26ch; text-align: center; margin-inline: auto; }
.repair-offer__question { font-weight: 700; font-size: var(--text-lead); margin-block-start: var(--space-5); }
.repair-offer__text { color: var(--color-on-teal); margin-block-start: var(--space-3); }
.repair-offer__call { margin-block-start: var(--space-5); inline-size: min(100%, 24rem); }
.repair-offer__call--center { display: flex; inline-size: 80%; max-inline-size: 18.75rem; margin-inline: auto; }
.repair-offer__text--combined { margin-block-start: var(--space-5); @media (width < 37.5rem) { text-align: left; text-wrap: pretty; } }
.repair-offer__message { @media (width < 37.5rem) { display: block; text-wrap: pretty; } }
.repair-offer__closing { display: inline-block; max-inline-size: 100%; white-space: nowrap; }
.site--focused .repair-offer__copy--balanced { @container (min-width: 40.625rem) { text-align: left; text-wrap: pretty; } }
.site--focused .repair-offer__title { @container (min-width: 40.625rem) { text-align: left; margin-inline: 0; } }
.site--focused .repair-offer__call--center { @container (min-width: 40.625rem) { margin-inline: 0; } }
.repair-offer__image { inline-size: 100%; block-size: auto; aspect-ratio: 1.4; object-fit: cover; border-radius: var(--radius-panel); }
.repair-offer__image--fleet { aspect-ratio: auto; object-position: 50% 100%; @container (min-width: 40.625rem) { contain: size; block-size: 100%; min-block-size: 18rem; align-self: stretch; } }
.news { display: grid; gap: var(--space-3); }
.news__title { font-size: 1.125rem; line-height: 1.3; letter-spacing: normal; }
.news__video { inline-size: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-panel); background: var(--color-night); }
.commitments { background: var(--color-commitments); color: white; padding-block: var(--space-section); }
.commitments--responsive { container-type: inline-size; }
.commitments__layout { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.commitments__layout--responsive { grid-template-columns: 1fr; @container (min-width: 56.25rem) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.commitment { text-align: center; }
.commitment--responsive { @container (36rem <= width < 56.25rem) { display: grid; grid-template-columns: 8rem minmax(0, 1fr); align-items: center; gap: var(--space-6); text-align: left; } }
.commitment--responsive .commitment__icon { @container (36rem <= width < 56.25rem) { grid-column: 1; grid-row: 1; margin: 0; } }
.commitment--responsive .commitment__content { @container (36rem <= width < 56.25rem) { grid-column: 2; grid-row: 1; } }
.commitment--responsive .commitment__title { @container (36rem <= width < 56.25rem) { margin-inline: 0; max-inline-size: none; text-wrap: pretty; } }
.commitment__icon { inline-size: 5.5rem; block-size: 5.5rem; object-fit: contain; margin-inline: auto; margin-block-end: var(--space-4); }
.commitment__icon--large { inline-size: 8rem; block-size: 8rem; }
.commitment__title { font-size: var(--text-card-title); max-inline-size: 24ch; margin-inline: auto; margin-block-end: var(--space-4); }
.commitment__body { display: grid; gap: var(--space-2); color: white; }
.site--focused .commitment--responsive:nth-of-type(3) .commitment__body p:last-child { text-wrap: balance; }
.help-banner { background: var(--color-orange); color: var(--color-paper); padding-block: var(--space-5); }
.help-banner__heading { font-size: var(--text-section-title); line-height: 1.3; text-align: center; max-inline-size: 44ch; margin-inline: auto; text-shadow: 0 .0625rem .125rem #00000040; }
.help-banner__heading a { color: inherit; display: inline-flex; align-items: center; min-block-size: var(--touch-target); white-space: nowrap; text-decoration: none; }
.site-footer { background: var(--color-night); color: white; padding-block: var(--space-section) calc(var(--space-8) + env(safe-area-inset-bottom, 0rem)); }
.site-footer--three-column { container-type: inline-size; }
.site-footer__heading { font-size: var(--text-section-title); max-inline-size: 23ch; margin-block-end: var(--space-6); }
.site-footer__heading a { color: white; text-decoration-thickness: 1px; }
.site-footer__grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.site-footer__grid--three-column { grid-template-columns: minmax(0, 1fr); @container (min-width: 40rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); } @container (min-width: 64rem) { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.6fr); } }
.site-footer__map-column { @container (40rem <= width < 64rem) { grid-column: 1 / -1; } }
.site-footer__map-column .site-footer__map { margin-block-start: 0; @container (width < 37.5rem) { aspect-ratio: 1; } }
.site-footer__title { font-size: 1.125rem; margin-block-end: var(--space-4); }
.site--focused .site-footer__title { font-size: var(--text-section-title); margin-block-end: var(--space-6); }
.site-footer__text { color: #c9d5d7; }
.site-footer__address { font-style: normal; color: #c9d5d7; margin-block-start: var(--space-3); }
.site-footer__address--icon { display: flex; align-items: flex-start; gap: var(--space-3); margin-block-start: 0; }
.site-footer__address--icon svg { margin-block-start: .1875rem; color: var(--color-paper); }
.site-footer--three-column svg { inline-size: 1.25rem; block-size: 1.25rem; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.site-footer__links { display: grid; justify-items: start; gap: var(--space-2); margin-block-start: var(--space-4); }
.site-footer__link { color: white; display: flex; align-items: center; min-block-size: var(--touch-target); }
.site-footer__link--icon { gap: var(--space-3); }
.site-footer__map { inline-size: 100%; aspect-ratio: 1.6; border: 0; border-radius: var(--radius-panel); margin-block-start: var(--space-4); background: var(--color-soft); }
.site-footer__bottom { padding-block-start: var(--space-6); margin-block-start: var(--space-6); border-block-start: 1px solid #ffffff2e; display: flex; flex-wrap: wrap; gap: var(--space-5); justify-content: space-between; align-items: center; font-size: var(--text-small); }
.site-footer__credit { inline-size: 6rem; object-fit: contain; }
.call-dock { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 15; background: white; padding: var(--space-2) var(--page-gutter) calc(var(--space-2) + env(safe-area-inset-bottom, 0rem)); border-block-start: 1px solid var(--color-line); @media (min-width: 60rem) { display: none; } }
.site--focused .call-dock { background: var(--color-night); border-block-start-color: #ffffff2e; }
.call-dock__button { min-block-size: 3rem; inline-size: 100%; font-size: var(--text-body); }
.gallery { padding-block: var(--space-7) var(--space-8); }
.gallery__title { font-size: clamp(2.25rem, 6vw, 3.75rem); max-inline-size: 20ch; }
.gallery__intro { margin-block-start: var(--space-4); font-size: var(--text-lead); color: var(--color-muted); }
.gallery__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--space-5); margin-block-start: var(--space-7); }
.design-option { border-radius: var(--radius-panel); overflow: hidden; background: var(--color-soft); display: flex; flex-direction: column; }
.design-option__preview { display: block; background: white; block-size: 22rem; overflow: hidden; border-block-end: 1px solid var(--color-line); text-decoration: none; color: var(--color-ink); text-align: center; }
.design-option__mini-brand { display: grid; place-items: center; background: var(--color-banner); padding: var(--space-3); }
.design-option__mini-logo { inline-size: 8.5rem; block-size: auto; }
.design-option__mini { padding: var(--space-5); }
.design-option__mini-title { font-size: 1.375rem; line-height: 1.12; letter-spacing: -.025em; font-weight: 700; max-inline-size: 24ch; margin-inline: auto; }
.design-option__mini-button { display: grid; place-items: center; background: var(--color-red); color: white; font-size: .875rem; font-weight: 700; margin-block-start: var(--space-4); block-size: 2.625rem; border-radius: var(--radius-control); }
.design-option__mini-text { font-size: var(--text-small); margin-block-start: var(--space-3); }
.design-option__body { padding: var(--space-5); display: grid; gap: var(--space-3); flex: 1; }
.design-option__name { font-size: 1.5rem; }
.design-option__description { color: var(--color-muted); }
.design-option__open { align-self: end; margin-block-start: var(--space-3); }
.gallery__note { margin-block-start: var(--space-7); color: var(--color-muted); font-size: var(--text-small); }
.legal-page { padding-block: var(--space-section); }
.legal-page__content { max-inline-size: 67ch; margin-inline: auto; overflow-wrap: anywhere; }
.legal-page__title { font-size: var(--text-h1); margin-block-end: var(--space-6); }
.legal-page__heading { font-size: var(--text-section-title); margin-block: var(--space-7) var(--space-4); }
.legal-page__text { margin-block-start: var(--space-4); }
.service-page__split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: center; @media (min-width: 48rem) { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.service-page__split--story { @media (min-width: 48rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); } }
.service-page__copy { display: grid; gap: var(--space-4); max-inline-size: 70ch; }
.service-page__heading { font-size: var(--text-section-title); }
.service-page__image { inline-size: 100%; block-size: auto; border-radius: var(--radius-panel); }
.service-page__steps-band { background: var(--color-teal); color: white; }
.service-page__steps-intro { padding-block: var(--space-6); }
.service-page__step { padding-block: var(--space-section); }
.service-page__step--soft { background: var(--color-soft); }
.service-page__step-layout { display: grid; gap: var(--space-6); align-items: center; @media (width >= 48rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); } }
.service-page__step-copy { max-inline-size: 38rem; }
.service-page__step-heading { display: flex; align-items: center; gap: var(--space-3); }
.service-page__step-number { display: grid; place-items: center; flex: none; inline-size: 3rem; aspect-ratio: 1; border-radius: 50%; background: var(--color-red); color: white; font-size: 1.625rem; font-weight: 700; }
.service-page__step-title { font-size: var(--text-step-title); }
.service-page__step-text { margin-block-start: var(--space-4); color: var(--color-muted); line-height: 1.6; }
.service-page__step .service-page__image { border-radius: 0; }
.service-page__shop-call { justify-self: start; }
.service-page__shop-link { color: white; min-block-size: var(--touch-target); display: flex; align-items: center; }
.service-page__map { inline-size: 100%; block-size: clamp(20rem, 40vw, 30rem); border: 0; border-radius: var(--radius-panel); margin-block-start: var(--space-6); }
.service-page__gallery { display: grid; gap: var(--space-6); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block-start: var(--space-7); @media (width < 40rem) { grid-template-columns: minmax(0, 1fr); } }
.service-page__repair { padding-block: var(--space-section); }
.repair-detail__heading { font-size: var(--text-section-title); }
.repair-detail__intro { max-inline-size: 48rem; margin-inline: auto; margin-block-end: var(--space-6); text-align: center; }
.repair-detail__intro > p { margin-block-start: var(--space-3); margin-inline: auto; color: var(--color-muted); font-size: var(--text-lead); text-wrap: pretty; }
.repair-detail__photo { inline-size: 100%; block-size: auto; border-radius: var(--radius-panel); }
.repair-detail__copy { display: grid; gap: var(--space-5); align-content: center; }
.repair-detail__copy > p { text-wrap: pretty; }
.repair-detail__link { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--touch-target); font-weight: 700; }
.repair-detail__link svg { inline-size: 1em; block-size: 1em; }
.repair-detail__actions { display: grid; justify-items: start; gap: var(--space-3); }
.repair-services__layout { display: grid; gap: var(--space-6); align-items: start; @media (width >= 56rem) { grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr); gap: var(--space-7); } }
.repair-services__visual { display: grid; gap: var(--space-3); justify-items: start; }
.repair-services__list { display: grid; gap: var(--space-5) var(--space-6); @media (width >= 38rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.repair-services__item { border-block-start: 1px solid var(--color-line); padding-block-start: var(--space-4); }
.repair-services__item h3, .repair-benefits__list h3 { font-size: var(--text-card-title); line-height: 1.25; text-wrap: balance; }
.repair-services__item p, .repair-benefits__list p { margin-block-start: var(--space-2); color: var(--color-muted); text-wrap: pretty; }
.repair-detail__split { display: grid; gap: var(--space-6); align-items: center; @media (width >= 56rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); } }
.repair-transmission { --color-check: var(--color-check-on-dark); container-type: inline-size; background: var(--color-teal); color: white; }
.repair-transmission .repair-detail__link { color: white; }
.repair-transmission :focus-visible { outline-color: white; }
.repair-transmission__list { display: grid; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.repair-transmission__list li { display: flex; align-items: start; gap: var(--space-3); font-size: var(--text-list); line-height: 1.5; }
.repair-benefits__list { display: grid; gap: var(--space-6); @media (width >= 38rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (width >= 64rem) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.repair-benefits__list article { text-align: center; }
.repair-benefits__icon { inline-size: 8rem; block-size: 8rem; object-fit: contain; margin-inline: auto; margin-block-end: var(--space-4); }
.repair-visit { background: var(--color-soft); }
.repair-visit__layout { display: grid; align-items: center; gap: var(--space-6); @media (width >= 48rem) { grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: var(--space-7); } }
.repair-visit address { font-style: normal; color: var(--color-muted); }
.repair-visit__hours { margin: 0; max-inline-size: 25rem; }
.repair-visit__hours > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4); padding-block: var(--space-2); border-block-end: 1px solid var(--color-line); }
.repair-visit__hours dt { font-weight: 700; }
.repair-visit__hours dd { margin: 0; color: var(--color-muted); }
.repair-visit .service-page__map { margin-block-start: 0; }
.junk-quote { --color-check: #ffce00; container-type: inline-size; padding-block: var(--space-section); background: linear-gradient(rgb(0 0 0 / 50%), rgb(0 0 0 / 50%)), image-set(url('/media/responsive-quote-background-1440.webp') 1x, url('/media/responsive-quote-background-1920.webp') 2x) center / cover; color: white; @media (width < 48rem) { background-image: linear-gradient(rgb(0 0 0 / 50%), rgb(0 0 0 / 50%)), image-set(url('/media/responsive-quote-background-960.webp') 1x, url('/media/responsive-quote-background-1920.webp') 2x); } }
.junk-quote__intro { max-inline-size: 50rem; margin-inline: auto; text-align: center; }
.junk-quote__heading { font-size: var(--text-section-title); }
.junk-quote__highlight { color: #ffce00; }
.junk-quote__lead { max-inline-size: none; margin-block-start: var(--space-3); color: var(--color-on-teal); font-size: var(--text-lead); font-weight: 700; text-wrap: balance; }
.junk-quote__layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--space-7); margin-block-start: var(--space-7); @media (width >= 48rem) { grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr); } }
.junk-quote__form { min-inline-size: 0; padding: clamp(1.5rem, 3vw, 3rem); border-radius: var(--radius-panel); background: white; color: var(--color-ink); }
.junk-quote__form--transitioning { overflow: clip; }
.junk-quote__progress { block-size: .4rem; margin-block-end: var(--space-5); overflow: hidden; border-radius: 1rem; background: var(--color-soft); }
.junk-quote__progress-bar { display: block; block-size: 100%; inline-size: 0; background: var(--color-red); transition: inline-size .7s ease-in-out; }
.junk-quote__step { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.junk-quote__step-title { inline-size: 100%; margin-block-end: var(--space-5); padding: 0; font-size: var(--text-h2); font-weight: 700; line-height: 1.12; }
.junk-quote__fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); @media (width >= 30rem) { grid-template-columns: 5rem minmax(0, 1.5fr); } }
.junk-quote__field { min-inline-size: 0; display: grid; align-content: start; gap: var(--space-1); }
.junk-quote__field:nth-child(n+3) { grid-column: 1 / -1; }
.junk-quote__step[data-quote-step="2"] .junk-quote__fields { grid-template-columns: minmax(0, 1fr); }
.junk-quote__field label { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.junk-quote__field input, .junk-quote__field select { inline-size: 100%; block-size: 3rem; padding-block: 0; padding-inline: var(--space-3); border: 1px solid #9fb5ba; border-radius: var(--radius-control); background: white; color: var(--color-ink); font: inherit; font-size: var(--text-body); }
#junk-year { -moz-appearance: textfield; appearance: textfield; }
#junk-year::-webkit-inner-spin-button, #junk-year::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.junk-quote__field input.invalid, .junk-quote__field select.invalid { border-color: var(--color-red); box-shadow: 0 0 0 1px var(--color-red); }
.junk-quote__field input.valid:not(:focus), .junk-quote__field select.valid:not(:focus) { border: 2px solid var(--color-teal); padding-inline: calc(var(--space-3) - 1px); }
.junk-quote__field--autocomplete { position: relative; }
.junk-quote__suggestions { position: absolute; inset-block-start: 100%; inset-inline: 0; z-index: 4; max-block-size: 15rem; overflow-y: auto; background: white; color: var(--color-ink); box-shadow: 0 .75rem 1.5rem #0003; border-radius: 0 0 var(--radius-control) var(--radius-control); }
.junk-quote__suggestion { padding: .5rem .75rem; cursor: pointer; }
.junk-quote__suggestion:hover, .junk-quote__suggestion.is-active { background: var(--color-soft); }
.junk-quote__field input::placeholder { color: var(--color-muted); opacity: 1; }
.junk-quote__error { margin: 0; color: var(--color-red); font-size: var(--text-small); line-height: 1.4; overflow-wrap: anywhere; }
.junk-phone { position: relative; min-inline-size: 0; }
.junk-phone__text { position: absolute; inset: 1px; display: flex; align-items: center; padding-inline: var(--space-3); overflow: hidden; white-space: pre; pointer-events: none; font-size: var(--text-body); }
.junk-phone__text span { flex: none; }
.junk-phone__sep { color: var(--color-teal); }
.junk-phone__input:not(:placeholder-shown), .junk-phone__text { font-variant-numeric: tabular-nums; }
.junk-phone__input { @media (forced-colors: active) { color: CanvasText !important; } }
.junk-phone__text { @media (forced-colors: active) { display: none; } }
.junk-quote__next { display: none; }
.junk-quote__form--enhanced .junk-quote__next { display: flex; }
.junk-quote__next, .junk-quote__submit { inline-size: 100%; min-block-size: 3rem; margin-block-start: var(--space-5); justify-content: center; font-weight: 700; }
.junk-quote__next svg, .junk-quote__submit svg { inline-size: 1.25rem; block-size: 1.25rem; flex: none; }
.junk-quote__actions { display: flex; align-items: center; gap: var(--space-4); }
.junk-quote__benefits { max-inline-size: 34rem; }
.junk-quote__benefits-title { font-size: var(--text-card-title); text-wrap: balance; }
.junk-quote__benefits-list { display: grid; gap: var(--space-4); margin-block: 0; padding: 0; list-style: none; }
.junk-quote__benefits-list li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-list); font-weight: 700; line-height: 1.35; }
.junk-section__band { padding-block: var(--space-6); background: inherit; color: inherit; }
.junk-section__content { padding-block: var(--space-section); }
.junk-faq .junk-section__band { padding-block-end: 0; }
.junk-faq .junk-section__content { padding-block-start: var(--space-6); }
.junk-buy { background: #f3f6f6; color: var(--color-ink); }
.junk-buy .junk-section__band { padding-block-end: 0; }
.junk-buy .junk-section__content { padding-block-start: var(--space-6); }
.junk-buy__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, 1.8vw, 1.5rem); @media (width >= 48rem) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.junk-buy__card { position: relative; display: flex; align-items: end; min-inline-size: 0; overflow: hidden; border-radius: var(--radius-panel); background: #2a3538; color: white; container: junk-buy-card / inline-size; }
.junk-buy__photo { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center top; }
.junk-buy__card::after { content: ''; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, #101a1ed9 55%, #101a1ef5); }
.junk-buy__copy { position: relative; z-index: 1; padding: clamp(1.25rem, 2vw, 2rem); }
:is(#wwb-compact, #wwb-light).junk-buy--compact .junk-buy__card::after { display: none; }
:is(#wwb-compact, #wwb-light).junk-buy--compact .junk-buy__card { min-block-size: 22rem; flex-direction: row; align-items: end; }
:is(#wwb-compact, #wwb-light).junk-buy--compact .junk-buy__photo { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; aspect-ratio: auto; object-fit: cover; object-position: center 10%; }
:is(#wwb-compact, #wwb-light).junk-buy--compact .junk-buy__copy { position: relative; z-index: 1; inline-size: 100%; background: linear-gradient(to bottom, rgb(230 235 235 / 0%), rgb(230 235 235 / 80%) 37%, rgb(230 235 235) 80%); padding: clamp(1.25rem, 2vw, 2rem); padding-block-start: clamp(2.5rem, 3vw, 3rem); color: var(--color-ink); }
#wwb-light.junk-buy--light .junk-buy__card { background: #e6ebeb; }
.junk-buy__title { font-size: var(--text-card-title); text-wrap: balance; }
.junk-buy__text { margin-block-start: var(--space-3); font-size: var(--text-body); line-height: 1.5; text-wrap: pretty; }
.junk-buy__mockup-label { margin-inline: auto; margin-block-start: var(--space-3); text-align: center; color: var(--color-muted); }
.junk-buy + .junk-buy { border-block-start: 1px solid var(--color-line); }
.junk-buy__swipe-hint { display: none; }
@media (48rem <= width < 70rem) {
  .junk-buy__card { flex-direction: row; align-items: end; background: #2a3538; }
  .junk-buy__photo { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; aspect-ratio: auto; object-position: center top; }
  .junk-buy__card::after { display: block; }
  .junk-buy__copy { padding: var(--space-3); }
  .junk-buy__text { line-height: 1.4; }
}
@media (width < 48rem) {
  .junk-buy--slider .junk-buy__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(64vw, 22rem); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 0; scrollbar-width: none; }
  .junk-buy--slider .junk-buy__grid::-webkit-scrollbar { display: none; }
  .junk-buy--slider .junk-buy__card { inline-size: 100%; min-block-size: 22rem; scroll-snap-align: start; scroll-snap-stop: always; }
  .junk-buy__swipe-hint { display: block; margin-block-start: var(--space-3); text-align: center; color: var(--color-muted); font-size: var(--text-small); }
  .junk-buy--compact .junk-buy__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .junk-buy--compact .junk-buy__card { flex-direction: column; align-items: stretch; background: var(--color-night); }
  .junk-buy--compact .junk-buy__photo { position: relative; inset: auto; block-size: auto; aspect-ratio: 4 / 3; object-position: center 15%; }
  .junk-buy--compact .junk-buy__card::after { display: none; }
  .junk-buy--compact .junk-buy__copy { padding: var(--space-3); }
  .junk-buy--compact .junk-buy__text { line-height: 1.4; }
  .junk-buy--compact .junk-buy__card { flex-direction: row; align-items: end; }
  .junk-buy--compact .junk-buy__photo { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; aspect-ratio: auto; object-position: center top; }
  #wwb-compact.junk-buy--compact .junk-buy__card::after { display: none; }
}
@media (31.25rem <= width < 48rem) {
  .junk-buy--slider .junk-buy__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: auto; overflow-x: visible; scroll-snap-type: none; }
  .junk-buy--slider .junk-buy__card { min-block-size: 0; scroll-snap-align: none; }
  .junk-buy--slider .junk-buy__swipe-hint { display: none; }
}
@media (width <= 390px) {
  .junk-buy--compact .junk-buy__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 64vw; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 0; overscroll-behavior-inline: contain; scrollbar-width: none; }
  .junk-buy--compact .junk-buy__grid::-webkit-scrollbar { display: none; }
  .junk-buy--compact .junk-buy__card { scroll-snap-align: start; scroll-snap-stop: always; }
  :is(#wwb-compact, #wwb-light).junk-buy--compact .junk-buy__card { min-block-size: 0; aspect-ratio: 2 / 3; }
}
.junk-faq { background: var(--color-paper); color: var(--color-ink); }
.junk-faq__layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--space-7); @media (width >= 56rem) { grid-template-columns: minmax(15rem, .9fr) minmax(0, 1.6fr); } }
.junk-faq__list { min-inline-size: 0; @media (width >= 56rem) { grid-column: 2; grid-row: 1; } }
.junk-faq__image { inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 80% 30%; border-radius: var(--radius-panel); @media (width >= 56rem) { grid-column: 1; grid-row: 1; aspect-ratio: auto; block-size: clamp(30rem, 50vw, 42rem); } }
.junk-faq__item { border-block-end: 1px solid var(--color-line); }
.junk-faq__item:first-child { border-block-start: 1px solid var(--color-line); }
.junk-faq__question { min-block-size: 4.5rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-4); cursor: pointer; font-size: var(--text-lead); font-weight: 700; line-height: 1.25; list-style: none; }
.junk-faq__question::-webkit-details-marker { display: none; }
.junk-faq__chevron { color: var(--color-teal); transition: transform .25s var(--ease-out); }
.junk-faq__item[open]:not(.junk-faq__item--closing) .junk-faq__chevron { transform: rotate(180deg); }
.junk-faq__answer { padding-block: 0 var(--space-5); color: var(--color-muted); }
.junk-faq__answer p + p { margin-block-start: var(--space-3); }
.junk-faq__answer a { font-weight: 700; }
.junk-why { background: var(--color-teal); color: white; }
.junk-why .junk-section__band { padding-block-end: 0; }
.junk-why .junk-section__content { padding-block-start: var(--space-6); }
.junk-why__layout { container-type: inline-size; }
.junk-why__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); @container (min-width: 56.25rem) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.junk-why__reason { text-align: center; @container (36rem <= width < 56.25rem) { display: grid; grid-template-columns: 8rem minmax(0, 1fr); align-items: center; gap: var(--space-6); text-align: left; } }
.junk-why__icon { inline-size: 8rem; block-size: 8rem; object-fit: contain; margin-inline: auto; margin-block-end: var(--space-4); @container (36rem <= width < 56.25rem) { margin: 0; } }
.junk-why__reason h3 { max-inline-size: 24ch; margin-inline: auto; font-size: var(--text-card-title); @container (36rem <= width < 56.25rem) { max-inline-size: none; margin-inline: 0; } }
.junk-why__reason p { margin-block-start: var(--space-3); margin-inline: auto; color: white; text-wrap: pretty; @container (36rem <= width < 56.25rem) { margin-inline: 0; } }
.junk-about { background: var(--color-paper); color: var(--color-ink); }
.junk-about__layout { display: grid; gap: var(--space-6); align-items: center; @media (width >= 56rem) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-7); } }
.junk-about__video { inline-size: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-panel); }
.junk-about__copy { display: grid; align-content: center; gap: var(--space-4); color: var(--color-muted); }
.junk-about__heading { max-inline-size: 18ch; margin-block-end: var(--space-2); color: var(--color-ink); font-size: var(--text-section-title); line-height: 1.12; text-wrap: balance; }
@media (width < 56rem) { .junk-about__heading { max-inline-size: none; margin-inline: auto; text-align: center; } }
.junk-about__hours { color: var(--color-ink); }
.customer-reviews { background: var(--color-soft); color: var(--color-ink); }
.customer-reviews__intro { margin-block-end: var(--space-6); text-align: center; }
.customer-reviews__intro h2 { font-size: var(--text-section-title); }
.customer-reviews__intro p { margin-inline: auto; margin-block-start: var(--space-3); color: var(--color-muted); font-size: var(--text-lead); }
.customer-reviews__track { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: var(--space-4); overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 0; scrollbar-width: none; }
.customer-reviews__track::-webkit-scrollbar { display: none; }
.review-card { display: flex; flex-direction: column; min-inline-size: 0; padding: var(--space-5); border: 1px solid var(--color-line); border-radius: var(--radius-panel); background: var(--color-paper); scroll-snap-align: start; }
.review-card__header { display: flex; align-items: center; gap: var(--space-3); }
.review-card__header > div:last-child { min-inline-size: 0; }
.review-card__avatar { position: relative; flex: none; display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; overflow: hidden; border-radius: 50%; background: var(--color-teal); color: white; font-weight: 700; }
.review-card__avatar img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.review-card__name { font-size: var(--text-body); line-height: 1.3; overflow-wrap: anywhere; }
.review-card__stars { display: flex; gap: .125rem; margin-block-start: .35rem; color: #b47a00; }
.review-card__stars span { display: flex; }
.review-card__stars svg { inline-size: .9375rem; block-size: .9375rem; fill: currentColor; }
.review-card__star--empty { color: var(--color-muted); }
.review-card__star--empty svg { fill: none; stroke: currentColor; stroke-width: 1.5; }
.review-card__quote { flex: 1; margin: var(--space-4) 0 0; font-size: var(--text-body); line-height: 1.6; }
.review-card__citation { font-style: italic; font-synthesis: style; white-space: nowrap; }
.review-card__citation a { color: inherit; text-decoration: none; }
.review-card__citation a:hover { text-decoration: underline; }
.customer-reviews__footer { display: flex; align-items: center; justify-content: flex-end; margin-block-start: var(--space-5); }
.customer-reviews__footer:has(.customer-reviews__controls[hidden]) { display: none; }
.customer-reviews__controls { display: flex; align-items: center; gap: var(--space-3); }
.customer-reviews__arrow { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; padding: 0; border: 1px solid var(--color-line); border-radius: 50%; background: var(--color-paper); color: var(--color-teal); }
.customer-reviews__arrow:hover:not(:disabled) { background: #e1ebeb; }
.customer-reviews__arrow:disabled { opacity: .35; cursor: default; }
.customer-reviews__arrow--prev svg { transform: rotate(180deg); }
.customer-reviews__position { min-inline-size: 4.5rem; text-align: center; font-size: var(--text-small); font-variant-numeric: tabular-nums; }
.customer-reviews :focus-visible { outline-color: var(--color-teal); }
@media (width >= 40rem) { .customer-reviews__track { grid-auto-columns: calc((100% - (var(--review-tablet-columns) - 1) * 1rem) / var(--review-tablet-columns)); } }
@media (width >= 43.75rem) { .customer-reviews__track { grid-auto-columns: calc((100% - (var(--review-mid-columns) - 1) * 1rem) / var(--review-mid-columns)); } }
@media (width >= 56.25rem) { .customer-reviews__track { grid-auto-columns: calc((100% - (var(--review-columns) - 1) * 1rem) / var(--review-columns)); } }
.offer-colors { min-block-size: 100vh; min-block-size: 100svh; background: var(--color-teal); color: white; }
.offer-colors__main { padding-block: var(--space-7) var(--space-6); }
.offer-colors__intro { margin-block-end: var(--space-6); }
.offer-colors__intro h1 { font-size: var(--text-h1); margin-block: var(--space-4) var(--space-3); }
.offer-colors__intro p { color: var(--color-on-teal); }
.offer-colors__instructions { margin-block-start: var(--space-2); }
.offer-colors__back { display: inline-flex; align-items: center; min-block-size: var(--touch-target); color: white; }
.offer-colors__sets { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-3); }
.offer-colors__sets a { display: inline-flex; align-items: center; min-block-size: var(--touch-target); padding-inline: var(--space-3); border: 1px solid #ffffff80; border-radius: var(--radius-control); color: white; text-decoration: none; }
.offer-colors__sets a[aria-current="page"] { background: white; color: var(--color-teal); }
.offer-colors__sets a:focus-visible { outline-color: white; }
.offer-colors__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); list-style: none; margin: 0; padding: 0; @media (width >= 40rem) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); } @media (width >= 64rem) { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.offer-colors__choice { display: flex; flex-direction: column; align-items: center; inline-size: 100%; padding: var(--space-3); border: 1px solid #ffffff40; border-radius: var(--radius-panel); background: transparent; color: white; }
.offer-colors__choice:hover { border-color: #ffffffb3; }
.offer-colors__choice[aria-pressed="true"] { border-color: white; box-shadow: inset 0 0 0 2px white; }
.offer-colors__choice:focus-visible, .offer-colors__back:focus-visible { outline-color: white; }
.offer-colors__letter { display: grid; place-items: center; align-self: start; inline-size: 2rem; block-size: 2rem; background: white; color: var(--color-teal); border-radius: 50%; font-size: 1.125rem; font-weight: 700; }
.offer-colors__icon { inline-size: min(100%, 8rem); block-size: auto; margin-block: var(--space-2) var(--space-3); }
.offer-colors__name { font-weight: 700; }
.offer-colors__hex { color: var(--color-on-teal); font-size: var(--text-small); font-variant-numeric: tabular-nums; }
.offer-colors__state { min-block-size: 1.5rem; margin-block-start: var(--space-2); font-size: var(--text-small); }
.offer-colors__selection { position: sticky; inset-block-end: 0; padding-block: var(--space-3); padding-block-end: max(var(--space-3), env(safe-area-inset-bottom)); background: var(--color-night); border-block-start: 1px solid #ffffff40; }
.offer-colors__selection-title { font-weight: 700; }
.offer-colors__selection p:last-child { color: #d1dddf; font-size: var(--text-small); }
.offer-picker { max-inline-size: 48rem; padding-block: var(--space-5) var(--space-7); }
.offer-picker .offer-colors__intro { margin-block-end: var(--space-4); }
.offer-picker__layout { display: grid; align-items: start; gap: var(--space-4); @media (width >= 48rem) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); } }
.offer-picker__preview { position: sticky; inset-block-start: var(--header-height); z-index: 2; display: flex; align-items: center; justify-content: center; gap: var(--space-5); margin: 0; padding-block: var(--space-3); background: var(--color-teal); @media (width >= 48rem) { display: block; padding-block: var(--space-5); inset-block-start: calc(var(--header-height) + var(--space-5)); } }
.offer-picker__icon { display: block; inline-size: 7rem; block-size: auto; @media (width >= 48rem) { inline-size: 10rem; margin-inline: auto; } }
.offer-picker__preview figcaption { font-size: var(--text-h4); font-weight: 700; @media (width >= 48rem) { margin-block-start: var(--space-3); text-align: center; } }
.offer-picker__sliders { display: grid; gap: var(--space-2); margin-block-end: var(--space-3); }
.offer-picker__slider-label { display: flex; justify-content: space-between; gap: var(--space-3); font-weight: 700; }
.offer-picker__slider-label output { font-variant-numeric: tabular-nums; font-weight: 400; }
.offer-picker__slider input { --slider-track: white; appearance: none; -webkit-appearance: none; display: block; inline-size: 100%; block-size: var(--touch-target); margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.offer-picker__slider input::-webkit-slider-runnable-track { block-size: .75rem; border: 1px solid #ffffffa0; border-radius: 1rem; background: var(--slider-track); }
.offer-picker__slider input::-moz-range-track { block-size: .75rem; border: 1px solid #ffffffa0; border-radius: 1rem; background: var(--slider-track); }
.offer-picker__slider input::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; inline-size: 1.5rem; block-size: 1.5rem; margin-block-start: calc(-.375rem - 1px); border: 2px solid white; border-radius: 50%; background: var(--color-night); box-shadow: 0 0 0 1px #222426; }
.offer-picker__slider input::-moz-range-thumb { inline-size: 1.25rem; block-size: 1.25rem; border: 2px solid white; border-radius: 50%; background: var(--color-night); box-shadow: 0 0 0 1px #222426; }
.offer-picker__gamut { margin-block-end: var(--space-3); color: var(--color-on-teal); font-size: var(--text-small); }
.offer-picker__fields { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--space-3); align-items: center; }
.offer-picker__fields label { display: block; margin-block-end: var(--space-2); font-size: var(--text-small); font-weight: 700; }
.offer-picker__fields input { inline-size: 100%; min-inline-size: 0; block-size: 3.25rem; border: 1px solid #ffffff80; border-radius: var(--radius-control); }
.offer-picker__fields input:focus-visible, .offer-picker__slider input:focus-visible, .offer-picker__actions button:focus-visible { outline-color: white; }
.offer-picker__fields input[type="text"] { padding-inline: var(--space-3); color: var(--color-ink); background: white; font-variant-numeric: tabular-nums; }
.offer-picker__fields input[aria-invalid="true"] { border: 2px solid #ffb3b3; }
.offer-picker__error { margin-block-start: var(--space-2); font-size: var(--text-small); color: #ffcbcb; }
.offer-picker__selected { display: block; margin-block-start: var(--space-2); color: var(--color-on-teal); }
.offer-picker__selected output { font-size: 1rem; font-weight: 400; font-variant-numeric: tabular-nums; }
.offer-picker__actions { display: flex; gap: var(--space-3); margin-block: var(--space-4); }
.offer-picker__actions button { flex: 1; min-block-size: var(--touch-target); padding: var(--space-2) var(--space-3); border: 1px solid white; border-radius: var(--radius-control); color: white; background: transparent; }
.offer-picker__actions button:first-child { color: var(--color-teal); background: white; font-weight: 700; }
.offer-picker__controls > p:last-child, #offer-picker-help { font-size: var(--text-small); color: var(--color-on-teal); }
.offer-picker__feedback { min-block-size: 1.5rem; margin-block-start: var(--space-2); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }