/* Autoservice Hristov (autoservice-hristov.com).
   The ground of the firm's own logo at full bleed: logo black, the cobalt of the HRISTOV plate, the steel blue
   of the old site's text, the sky blue of the painted facade, and one hot colour, the red of the paint-booth
   doors. "Booth white" for the reading sections. Bitter (display) + Sofia Sans Semi Condensed (text).
   One dark theme: the logo is white letters made for a black ground. */

@font-face {
    font-family: "Bitter";
    src: url("/fonts/bitter.woff2") format("woff2");
    font-weight: 600 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Sofia Sans Semi Condensed";
    src: url("/fonts/sofia-sans-semi-condensed.woff2") format("woff2");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --ground: #04060b;      /* the logo's ground (#000001), a shade up */
    --pit: #010205;
    --panel: #0a101c;
    --rule: #1a2c4e;
    --cobalt: #06377b;      /* the HRISTOV plate */
    --cobalt-lit: #0c56ba;
    --cobalt-deep: #042a60;
    --steel: #739ed8;       /* the text colour of the old site */
    --steel-lit: #a9c5ee;
    --sky: #54b7ee;         /* the painted facade of the base */
    --hot: #c6382a;         /* the doors of the paint booth */
    --hot-lit: #ef5a45;
    --hot-deep: #a52c20;
    --mist: #dfe8f6;
    --booth: #eef1f4;       /* the walls of the paint booth */
    --ink: #0a1220;
    --ink-soft: #3a475a;
    --display: "Bitter", Georgia, "Times New Roman", serif;
    --text: "Sofia Sans Semi Condensed", "Segoe UI", Arial, sans-serif;
    --pad: clamp(1.1rem, 4.2vw, 2.5rem);
    --lb-bg: rgba(2, 4, 9, 0.96);
    --lb-accent: #54b7ee;
    --lb-accent-soft: rgba(84, 183, 238, 0.18);
}

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: 6rem;
}

body {
    margin: 0;
    background: var(--ground);
    color: var(--mist);
    font-family: var(--text);
    font-size: 1.125rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

img,
svg {
    max-width: 100%;
}

h1,
h2,
h3 {
    font-family: var(--display);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.025em;
    color: #fff;
    text-wrap: balance;
}

h2 {
    margin: 0.5rem 0 1rem;
    font-size: clamp(1.9rem, 5.2vw, 3.4rem);
}

p {
    margin: 0 0 1rem;
}

a {
    color: var(--sky);
    text-underline-offset: 0.18em;
}

a:hover {
    color: #fff;
}

:focus-visible {
    outline: 3px solid var(--sky);
    outline-offset: 3px;
    border-radius: 4px;
}

::selection {
    background: var(--cobalt-lit);
    color: #fff;
}

.wrap {
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--pad);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip {
    position: absolute;
    left: 0.75rem;
    top: -4rem;
    z-index: 100;
    padding: 0.6rem 1rem;
    background: #fff;
    color: var(--ink);
    font-weight: 700;
    border-radius: 8px;
}

.skip:focus {
    top: 0.75rem;
    color: var(--ink);
}

.eyebrow {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--steel);
}

.eyebrow::before {
    content: "";
    display: inline-block;
    width: 1.75rem;
    height: 2px;
    margin-right: 0.6rem;
    vertical-align: middle;
    background: var(--hot-lit);
}

.lead {
    font-size: clamp(1.125rem, 1.7vw, 1.3rem);
    line-height: 1.5;
    max-width: 40rem;
}

/* ---- buttons: the plate of the logo (cobalt, a white hairline, a soft glow) ---- */

.btn,
.call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 3.1rem;
    padding: 0.65rem 1.3rem;
    font-family: var(--display);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: #fff;
    background-color: var(--cobalt);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    border-radius: 10px;
    box-shadow: 0 0 16px rgba(150, 195, 255, 0.28);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.btn:hover,
.call:hover {
    color: #fff;
    background-color: var(--cobalt-lit);
    box-shadow: 0 0 26px rgba(150, 195, 255, 0.5);
    transform: translateY(-2px);
}

.btn:active,
.call:active {
    transform: translateY(0);
}

.btn-hot,
.call {
    background-color: var(--hot);
    box-shadow: 0 0 16px rgba(239, 90, 69, 0.35);
}

.btn-hot:hover,
.call:hover {
    background-color: var(--hot-deep);
    box-shadow: 0 0 28px rgba(239, 90, 69, 0.6);
}

.text-link {
    font-weight: 700;
}

/* ---- header: on a phone the row of pages scrolls away and the logo with the phone stays ---- */

.top {
    position: sticky;
    top: -2.75rem;
    z-index: 50;
    background: rgba(4, 6, 11, 0.86);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid rgba(115, 158, 216, 0.18);
}

.top-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "nav nav lang" "brand call call";
    align-items: center;
    column-gap: 0.75rem;
    padding-bottom: 0.45rem;
}

.nav {
    grid-area: nav;
    display: flex;
    gap: 0.1rem;
    height: 2.75rem;
    align-items: center;
    margin-left: -0.6rem;
}

.nav a {
    padding: 0.4rem 0.6rem;
    font-weight: 600;
    font-size: 1rem;
    color: var(--mist);
    text-decoration: none;
    border-radius: 8px;
}

.nav a:hover {
    color: #fff;
    background: rgba(115, 158, 216, 0.14);
}

.nav a[aria-current="page"] {
    color: #fff;
    box-shadow: inset 0 -2px 0 var(--hot-lit);
    border-radius: 0;
}

.lang {
    grid-area: lang;
    display: flex;
    align-items: center;
    gap: 0.15rem;
    height: 2.75rem;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.lang a,
.lang span {
    padding: 0.3rem 0.45rem;
    border-radius: 6px;
    text-decoration: none;
}

.lang a {
    color: var(--steel-lit);
}

.lang a:hover {
    color: #fff;
    background: rgba(115, 158, 216, 0.14);
}

.lang span {
    color: #fff;
    background: var(--cobalt);
}

.brand {
    grid-area: brand;
    justify-self: start;
    display: block;
    border-radius: 6px;
}

.brand img {
    display: block;
    width: auto;
    height: 46px;
}

.call {
    grid-area: call;
    justify-self: end;
    min-height: 2.6rem;
    padding: 0.4rem 0.8rem;
    font-size: 0.95rem;
}

@media (min-width: 860px) {
    .top {
        top: 0;
    }

    .top-row {
        grid-template-columns: auto 1fr auto auto;
        grid-template-areas: "brand nav lang call";
        column-gap: 1.25rem;
        padding-block: 0.5rem;
    }

    .nav {
        justify-self: end;
        gap: 0.35rem;
        margin: 0;
    }

    .nav a {
        padding: 0.45rem 0.85rem;
        font-size: 1.0625rem;
    }

    .brand img {
        height: 60px;
    }

    .call {
        font-size: 1rem;
        padding-inline: 1rem;
    }
}

/* ---- hero: the logo's own ground (black, a navy glow top right) under a drawing grid ---- */

.hero,
.page-hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
}

.hero {
    padding-block: clamp(1.75rem, 5vw, 4rem) clamp(2.5rem, 6vw, 4.5rem);
}

.hero::before,
.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(62% 56% at 90% -6%, rgba(12, 86, 186, 0.42), transparent 70%),
        radial-gradient(42% 40% at -4% 100%, rgba(6, 55, 123, 0.3), transparent 70%),
        linear-gradient(rgba(115, 158, 216, 0.075) 1px, transparent 1px) 0 0 / 44px 44px,
        linear-gradient(90deg, rgba(115, 158, 216, 0.075) 1px, transparent 1px) 0 0 / 44px 44px;
    -webkit-mask-image: linear-gradient(#000 55%, transparent);
    mask-image: linear-gradient(#000 55%, transparent);
}

.hero h1 {
    margin: 0.7rem 0 0;
    font-size: clamp(2.25rem, 10.2vw, 6.4rem);
    line-height: 0.93;
    letter-spacing: -0.04em;
}

.hero h1 span {
    display: block;
}

.hero h1 span:last-child {
    color: var(--steel);
}

.hero-side {
    margin-top: 1.25rem;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin: 1.4rem 0 0;
}

@media (min-width: 900px) {
    .hero-side {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 2rem;
        align-items: end;
        margin-top: 1.75rem;
    }

    .hero-side .lead,
    .actions {
        margin: 0;
    }
}

/* the measuring sheet */

.sheet-wrap {
    margin-top: clamp(1.75rem, 4vw, 3rem);
}

.sheet {
    position: relative;
    margin-inline: calc(var(--pad) * -1);
    padding: 0.75rem 0;
    border-block: 1px solid rgba(115, 158, 216, 0.24);
    background-color: rgba(8, 13, 24, 0.82);
    background-image:
        linear-gradient(rgba(115, 158, 216, 0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(115, 158, 216, 0.09) 1px, transparent 1px);
    background-size: 22px 22px;
    background-position: center;
    overflow: hidden;
}

@media (min-width: 700px) {
    .sheet {
        margin-inline: 0;
        padding: clamp(0.75rem, 2vw, 1.5rem);
        border: 1px solid rgba(115, 158, 216, 0.24);
        border-radius: 22px;
    }
}

.car {
    display: block;
    width: 100%;
    height: auto;
}

.car * {
    vector-effect: non-scaling-stroke;
}

.car-axis {
    fill: none;
    stroke: var(--steel);
    stroke-width: 1;
    stroke-dasharray: 14 5 2 5;
    opacity: 0.6;
}

.car-ray {
    fill: none;
    stroke: var(--sky);
    stroke-width: 1.25;
    stroke-dasharray: 6 5;
}

.car-tyre {
    fill: #0b111d;
    stroke: var(--steel-lit);
    stroke-width: 1.5;
}

.car-target {
    fill: var(--ground);
    stroke: var(--sky);
    stroke-width: 1.25;
}

.car-shell {
    fill: #080d18;
}

.car-paint {
    fill: none;
    stroke-width: 330;
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
    vector-effect: none;
}

.car-glass {
    fill: #050a14;
    opacity: 0.94;
}

.car-lines path {
    fill: none;
    stroke: #eef4ff;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.car-lines .car-thin {
    stroke-width: 1.25;
    opacity: 0.85;
}

.car-tail {
    fill: #ff5a45;
}

.car-lamp {
    fill: #eef8ff;
    stroke: #eef4ff;
    stroke-width: 1.25;
    stroke-linejoin: round;
}

.car-datum {
    fill: var(--ground);
    stroke: var(--sky);
    stroke-width: 1.5;
}

.car-diag {
    fill: none;
    stroke: var(--sky);
    stroke-width: 1.25;
    stroke-dasharray: 3 4;
}

.car-equal circle {
    fill: var(--ground);
    stroke: var(--sky);
    stroke-width: 1.5;
}

.car-equal path {
    fill: none;
    stroke: var(--sky);
    stroke-width: 2;
    stroke-linecap: round;
}

.car-not,
.car-pull {
    opacity: 0;
}

.car-chain {
    fill: none;
    stroke: var(--hot-lit);
    stroke-width: 2;
    stroke-dasharray: 2 4;
    stroke-linecap: round;
}

.car-pull rect {
    fill: var(--hot);
    stroke: var(--hot-lit);
    stroke-width: 1.25;
}

/* the four stages under the sheet */

.stages {
    list-style: none;
    margin: 0.9rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
    counter-reset: stage;
}

@media (min-width: 560px) {
    .stages {
        grid-template-columns: 1fr 1fr;
    }
}

.stages li {
    counter-increment: stage;
    position: relative;
    padding: 0.85rem 0.9rem 0.95rem;
    border: 1px solid rgba(115, 158, 216, 0.22);
    border-radius: 14px;
    background: rgba(10, 16, 28, 0.78);
    overflow: hidden;
}

.stages li::before {
    content: "0" counter(stage);
    display: block;
    font-family: var(--display);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--sky);
}

.stages li::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--sky);
    transform-origin: left;
}

.stages strong {
    display: block;
    margin: 0.2rem 0 0.35rem;
    font-family: var(--display);
    font-size: clamp(1.2rem, 2.5vw, 1.65rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #fff;
}

.stages span {
    display: block;
    font-size: 0.95rem;
    line-height: 1.35;
    color: var(--steel-lit);
}

@media (min-width: 860px) {
    .stages {
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }

    .stages li {
        padding: 1rem 1.1rem 1.15rem;
    }
}

/* ---- the opening: bent, pulled straight, aligned, painted, lights on ---- */

@media (prefers-reduced-motion: no-preference) {
    .car-front {
        transform-origin: 660px 210px;
        animation: car-straighten 1.4s cubic-bezier(0.34, 1.3, 0.5, 1) 0.8s both;
    }

    .car-diag {
        animation: car-diagonal 1.4s cubic-bezier(0.34, 1.3, 0.5, 1) 0.8s both, car-true 0.5s ease 2s both;
    }

    .car-diag-a {
        transform-origin: 265px 110px;
    }

    .car-diag-b {
        transform-origin: 265px 310px;
    }

    .car-chain {
        transform-origin: 949px 385px;
        animation: car-chain 1.4s cubic-bezier(0.34, 1.3, 0.5, 1) 0.8s both;
    }

    .car-pull {
        animation: car-pull 2.7s linear both;
    }

    .car-lines.car-bent path,
    .car-axis.car-bent,
    .car-datum.car-bent,
    .car-equal circle,
    .car-equal path {
        animation: car-true 0.5s ease 2s both;
    }

    .car-equal .car-not {
        animation: car-true 0.5s ease 2s both, car-off 0.3s ease 2s both;
    }

    .car-wheel {
        animation: car-wheel 0.9s cubic-bezier(0.3, 1.5, 0.5, 1) 2.6s both;
    }

    .car-wheel-rl {
        transform-origin: 265px 58px;
        --toe: -4deg;
    }

    .car-wheel-rr {
        transform-origin: 265px 362px;
        --toe: 3deg;
    }

    .car-wheel-fl {
        transform-origin: 735px 58px;
        --toe: 9deg;
    }

    .car-wheel-fr {
        transform-origin: 735px 362px;
        --toe: -6deg;
    }

    .car-ray,
    .car-target {
        animation: car-true 0.4s ease 3.3s both;
    }

    .car-paint {
        animation: car-paint 1.3s cubic-bezier(0.6, 0, 0.3, 1) 3.8s both;
    }

    .car-lights {
        animation: car-on 0.6s ease 5.2s both;
    }

    .car-lamp {
        animation: car-lamp 0.4s ease 5.2s both;
    }

    .car-tail {
        animation: car-tail 0.4s ease 5.2s both;
    }

    .stages li {
        animation: stage-on 0.5s ease both;
    }

    .stages li::after {
        animation: stage-bar 0.6s ease both;
    }

    .stages li:nth-child(1),
    .stages li:nth-child(1)::after {
        animation-delay: 2.1s;
    }

    .stages li:nth-child(2),
    .stages li:nth-child(2)::after {
        animation-delay: 3.4s;
    }

    .stages li:nth-child(3),
    .stages li:nth-child(3)::after {
        animation-delay: 5s;
    }

    .stages li:nth-child(4),
    .stages li:nth-child(4)::after {
        animation-delay: 5.6s;
    }
}

@keyframes car-straighten {
    from { transform: skewY(-7.5deg); }
    to { transform: skewY(0deg); }
}

/* the far ends of the diagonals and of the chain follow the front end: the same shift at their x */
@keyframes car-diagonal {
    from { transform: skewY(-1.2035deg); }
    to { transform: skewY(0deg); }
}

@keyframes car-chain {
    from { transform: skewY(21.28deg); }
    to { transform: skewY(0deg); }
}

@keyframes car-pull {
    0%, 80% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes car-true {
    from { stroke: var(--hot-lit); }
}

@keyframes car-off {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes car-wheel {
    from { transform: rotate(var(--toe)); }
    to { transform: rotate(0deg); }
}

@keyframes car-paint {
    from { stroke-dashoffset: 100; }
}

@keyframes car-on {
    from { opacity: 0; }
}

@keyframes car-lamp {
    from { fill: #080d18; }
}

@keyframes car-tail {
    from { fill: #5a1712; }
}

@keyframes stage-on {
    from { opacity: 0.5; }
}

@keyframes stage-bar {
    from { transform: scaleX(0); }
}

/* ---- the plate at page width: figures the original states ---- */

.plate-band {
    position: relative;
    padding-block: clamp(2.75rem, 6.5vw, 4.75rem);
    background: var(--cobalt);
    color: #fff;
}

.plate-band::before {
    content: "";
    position: absolute;
    inset: 0.6rem;
    border: 1.5px solid rgba(255, 255, 255, 0.82);
    border-radius: 18px;
    box-shadow: 0 0 22px rgba(170, 205, 255, 0.3), inset 0 0 26px rgba(170, 205, 255, 0.1);
    pointer-events: none;
}

.plate-band .eyebrow {
    color: var(--steel-lit);
}

.plate-band .eyebrow::before {
    background: #fff;
}

.figures {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem 1.25rem;
}

.figure {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(2.6rem, 9vw, 5.6rem);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.04em;
    white-space: nowrap;
    color: #fff;
}

.figure b {
    font-weight: inherit;
}

.figure small {
    font-size: 0.26em;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--steel-lit);
}

.figure-text {
    margin: 0.55rem 0 0;
    max-width: 15rem;
    font-size: 1rem;
    line-height: 1.3;
    color: #e3ecfb;
}

@media (min-width: 860px) {
    .figures {
        grid-template-columns: repeat(4, auto);
        justify-content: space-between;
    }
}

/* ---- booth white: the reading sections ---- */

.booth {
    padding-block: clamp(3rem, 8vw, 6rem);
    background: var(--booth);
    color: var(--ink);
}

.booth h2,
.booth h3 {
    color: var(--ink);
}

.booth .eyebrow {
    color: var(--cobalt);
}

.booth a {
    color: var(--cobalt);
}

.booth a:hover {
    color: var(--hot-deep);
}

.booth :focus-visible {
    outline-color: var(--cobalt-lit);
}

.about-grid {
    display: grid;
    gap: 2.5rem;
}

.about-text p {
    max-width: 38rem;
}

@media (min-width: 900px) {
    .about-grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        gap: 4rem;
        align-items: center;
    }

    /* the three prints lie loosely, not in a column */
    .about .snaps {
        flex-direction: column;
        gap: 0;
    }

    .about .snaps li:nth-child(2) {
        margin: -1.25rem 0 0 10.5rem;
    }

    .about .snaps li:nth-child(3) {
        margin: 0.9rem 0 0 1.5rem;
    }
}

/* the photos of the original are small: they are shown as prints, at their own size */

.snaps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem 1.1rem;
    align-items: flex-start;
}

.snap {
    display: inline-block;
    width: min-content;
    margin: 0;
    padding: 8px 8px 7px;
    background: #fff;
    border-radius: 7px;
    box-shadow: 0 0 0 1px rgba(10, 18, 32, 0.08), 0 16px 30px -14px rgba(10, 18, 32, 0.5);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.snap a {
    display: block;
    border-radius: 4px;
}

.snap img {
    display: block;
    max-width: none;
}

.snap figcaption {
    margin-top: 6px;
    font-size: 0.8125rem;
    line-height: 1.25;
    color: var(--ink-soft);
}

.snaps li:nth-child(odd) .snap {
    transform: rotate(-2.2deg);
}

.snaps li:nth-child(even) .snap {
    transform: rotate(1.6deg);
}

.snaps li .snap:hover,
.tile .snap:hover {
    transform: rotate(0deg) scale(1.04);
}

.snap-dark {
    background: #0d1626;
    box-shadow: 0 0 0 1px rgba(115, 158, 216, 0.3), 0 18px 32px -14px #000;
}

.snap-dark figcaption {
    color: var(--steel-lit);
}

/* ---- the closed cycle: nine services round a loop ---- */

.cycle {
    padding-block: clamp(3rem, 8vw, 6rem);
    background: radial-gradient(60% 50% at 50% 50%, rgba(6, 55, 123, 0.28), transparent 75%), var(--ground);
}

.loop {
    position: relative;
}

.loop-core h2 {
    margin-bottom: 0.4rem;
}

.loop-core p:last-child {
    margin: 0;
    font-size: 1.2rem;
    color: var(--steel-lit);
}

.loop-stations {
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
    border-left: 2px solid var(--rule);
}

.loop-stations li {
    position: relative;
}

.loop-stations li::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border: 2px solid var(--sky);
    border-radius: 50%;
    background: var(--ground);
    transition: background-color 0.2s ease;
}

.loop-stations li:hover::before,
.loop-stations li:focus-within::before {
    background: var(--sky);
}

.loop-stations a {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    padding: 0.7rem 0 0.7rem 1.4rem;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    text-decoration: none;
}

.loop-stations a:hover {
    color: var(--sky);
}

.loop-stations b {
    font-family: var(--display);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--sky);
}

@property --loop-a {
    syntax: "<angle>";
    inherits: false;
    initial-value: 20deg;
}

@media (min-width: 980px) {
    .loop {
        --row: 9.5rem;
        --bend: 3rem;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, var(--row));
    }

    /* the track runs through the middle of the outer cells; a light travels round it */
    .loop::before,
    .loop::after {
        content: "";
        position: absolute;
        inset: calc(var(--row) / 2) 12.5%;
        border-radius: var(--bend);
        pointer-events: none;
    }

    .loop::before {
        border: 2px solid var(--rule);
    }

    .loop::after {
        padding: 2px;
        background: conic-gradient(from var(--loop-a), transparent 0 80%, var(--sky) 95%, #fff 99%, transparent 100%);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    }

    .loop-core {
        grid-column: 2 / 4;
        grid-row: 2;
        align-self: center;
        text-align: center;
    }

    .loop-core .eyebrow::before {
        display: none;
    }

    .loop-stations {
        display: contents;
    }

    .loop-stations li {
        grid-row: 1;
    }

    .loop-stations li:nth-child(5) { grid-row: 2; grid-column: 4; }
    .loop-stations li:nth-child(6) { grid-row: 3; grid-column: 4; }
    .loop-stations li:nth-child(7) { grid-row: 3; grid-column: 3; }
    .loop-stations li:nth-child(8) { grid-row: 3; grid-column: 2; }
    .loop-stations li:nth-child(9) { grid-row: 3; grid-column: 1; }

    .loop-stations li::before {
        left: 50%;
        margin-left: -7px;
        z-index: 1;
    }

    /* in the four corners the track is rounded: the mark moves in onto the bend */
    .loop-stations li:nth-child(1)::before { transform: translate(calc(var(--bend) * 0.293), calc(var(--bend) * 0.293)); }
    .loop-stations li:nth-child(4)::before { transform: translate(calc(var(--bend) * -0.293), calc(var(--bend) * 0.293)); }
    .loop-stations li:nth-child(6)::before { transform: translate(calc(var(--bend) * -0.293), calc(var(--bend) * -0.293)); }
    .loop-stations li:nth-child(9)::before { transform: translate(calc(var(--bend) * 0.293), calc(var(--bend) * -0.293)); }

    .loop-stations a {
        position: absolute;
        left: 50%;
        bottom: calc(50% + 1.1rem);
        width: max-content;
        max-width: 92%;
        transform: translateX(-50%);
        flex-direction: column;
        align-items: center;
        gap: 0.15rem;
        padding: 0;
        font-size: 1.1rem;
        text-align: center;
    }

    .loop-stations li:nth-child(n + 6) a {
        bottom: auto;
        top: calc(50% + 1.1rem);
    }

    .loop-stations li:nth-child(5) a {
        left: calc(50% + 1.2rem);
        bottom: auto;
        top: 50%;
        max-width: 46%;
        transform: translateY(-50%);
        align-items: flex-start;
        text-align: left;
    }
}

@media (min-width: 980px) and (prefers-reduced-motion: no-preference) {
    .loop::after {
        animation: loop-run 11s linear infinite;
    }
}

@keyframes loop-run {
    to { --loop-a: 380deg; }
}

/* ---- the 3D stand ---- */

.stand {
    position: relative;
    padding-block: clamp(3rem, 8vw, 6rem);
    background: linear-gradient(155deg, #071d44, var(--ground) 68%);
    border-top: 1px solid var(--rule);
    overflow: clip;
}

.stand-grid {
    display: grid;
    gap: 1.25rem 3rem;
    align-items: center;
}

.stand-3d {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(7rem, 30vw, 17rem);
    font-weight: 900;
    line-height: 0.78;
    letter-spacing: -0.06em;
    color: var(--cobalt);
    -webkit-text-stroke: 5px var(--sky);
    paint-order: stroke fill;
    text-shadow: 0.045em 0.045em 0 rgba(84, 183, 238, 0.22);
}

.stand-text h2 {
    font-size: clamp(2.4rem, 7vw, 4.4rem);
}

.stand-text p:last-child {
    margin: 0;
    max-width: 30rem;
    font-size: 1.2rem;
}

@media (min-width: 860px) {
    .stand-grid {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }
}

/* ---- insurers ---- */

.cover {
    padding-block: clamp(3rem, 8vw, 6rem);
    border-top: 1px solid var(--rule);
}

.cover-text {
    max-width: 40rem;
}

.insurers {
    list-style: none;
    margin: 1.5rem 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0;
    font-family: var(--display);
    font-size: clamp(1.7rem, 5.6vw, 3.7rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: #fff;
}

.insurers li:not(:last-child)::after {
    content: "/";
    margin-inline: 0.32em;
    font-weight: 600;
    color: var(--hot-lit);
}

.cover-note {
    margin: 0;
    max-width: 40rem;
    color: var(--steel-lit);
}

/* ---- bento: what the firm does besides repairs ---- */

.bento {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.tile {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 11rem;
    padding: 1.5rem;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 0 0 1px rgba(10, 18, 32, 0.06);
    scroll-margin-top: 7rem;
}

.tile > div {
    flex: 1 1 11rem;
    align-self: flex-start;
}

.tile h3 {
    margin: 0 0 0.45rem;
    font-size: clamp(1.4rem, 3vw, 1.75rem);
    line-height: 1.08;
}

.tile h3 a {
    color: inherit;
    text-decoration: none;
}

.tile h3 a:hover {
    color: var(--cobalt);
    text-decoration: underline;
}

.tile p {
    margin: 0;
    color: var(--ink-soft);
}

.tile .snap {
    transform: rotate(1.8deg);
}

.tile:nth-child(odd) .snap {
    transform: rotate(-1.8deg);
}

/* the one tile without a photo is the plate of the logo */
.tile-rent-a-car {
    position: relative;
    background: var(--cobalt);
    box-shadow: inset 0 0 0 0.5rem var(--cobalt), inset 0 0 0 calc(0.5rem + 1.5px) rgba(255, 255, 255, 0.82);
    padding: 2rem;
}

.booth .tile-rent-a-car h3,
.booth .tile-rent-a-car h3 a {
    color: #fff;
    font-size: clamp(2rem, 6vw, 3.2rem);
    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.tile-rent-a-car p {
    color: #e3ecfb;
}

.tile:target {
    box-shadow: 0 0 0 3px var(--hot);
}

@media (min-width: 760px) {
    .bento {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---- the call band: the red of the booth doors ---- */

.band-call {
    padding-block: clamp(2.5rem, 6vw, 4rem);
    background: var(--hot);
    color: #fff;
}

.band-call h2 {
    margin: 0 0 0.5rem;
}

.band-call p {
    margin: 0;
    max-width: 30rem;
}

.band-call-grid {
    display: grid;
    gap: 1.5rem 3rem;
    align-items: center;
}

.band-phone {
    display: inline-block;
    font-family: var(--display);
    font-size: clamp(1.75rem, 7.6vw, 4.2rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    white-space: nowrap;
    color: #fff;
    text-decoration: none;
}

.band-phone:hover {
    text-decoration: underline;
    text-decoration-thickness: 3px;
}

.band-more {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
    margin-top: 0.7rem;
    font-weight: 700;
}

.band-call a {
    color: #fff;
}

.band-call :focus-visible {
    outline-color: #fff;
}

@media (min-width: 900px) {
    .band-call-grid {
        grid-template-columns: 1fr auto;
    }
}

/* ---- footer ---- */

.foot {
    padding-block: 3rem 1.5rem;
    background: var(--pit);
    border-top: 1px solid var(--rule);
    font-size: 1rem;
    color: var(--steel-lit);
}

.foot-grid {
    display: grid;
    gap: 2rem;
}

.foot-brand img {
    display: block;
    margin-bottom: 0.9rem;
}

.foot-name {
    margin-bottom: 0.3rem;
    font-family: var(--display);
    font-weight: 800;
    color: #fff;
}

.foot-brand p:last-child {
    max-width: 24rem;
    margin: 0;
}

.foot h2 {
    margin: 0 0 0.8rem;
    font-family: var(--text);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--steel);
}

.foot address {
    font-style: normal;
}

.foot a {
    color: #fff;
}

.foot a:hover {
    color: var(--sky);
}

.foot-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.foot-list li {
    margin-bottom: 0.4rem;
}

.foot-list span {
    display: block;
    font-size: 0.875rem;
    color: var(--steel);
}

.foot-bottom {
    margin-top: 2.25rem;
    font-size: 0.9rem;
    color: var(--steel);
}

.foot-bottom p {
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
}

@media (min-width: 860px) {
    .foot-grid {
        grid-template-columns: 1.5fr 1fr 1.1fr 0.6fr;
        gap: 2.5rem;
    }
}

/* ---- inner pages ---- */

.page-hero {
    padding-block: clamp(2.25rem, 6vw, 4.5rem) clamp(1.75rem, 4.5vw, 3.25rem);
}

.page-hero h1 {
    margin: 0.7rem 0 1rem;
    font-size: clamp(2.2rem, 7.6vw, 5rem);
    line-height: 0.96;
    letter-spacing: -0.035em;
}

.page-hero .lead {
    margin: 0;
}

/* services: three bays */

.bays {
    padding-bottom: clamp(2rem, 5vw, 4rem);
}

.bay {
    display: grid;
    gap: 1.25rem 2.5rem;
    padding-block: clamp(1.75rem, 4vw, 3rem);
    border-top: 1px solid var(--rule);
}

.bay-no {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(3.6rem, 10vw, 6.4rem);
    font-weight: 900;
    line-height: 0.8;
    letter-spacing: -0.05em;
    color: var(--cobalt);
    -webkit-text-stroke: 4px var(--sky);
    paint-order: stroke fill;
}

.bay h2 {
    margin: 0.8rem 0 0;
    font-size: clamp(1.6rem, 3.4vw, 2.1rem);
}

.bay-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bay-items li {
    padding: 0.95rem 0;
    border-bottom: 1px dashed rgba(115, 158, 216, 0.3);
    scroll-margin-top: 7rem;
}

.bay-items li:first-child {
    padding-top: 0;
}

.bay-items h3 {
    margin: 0;
    font-size: clamp(1.25rem, 2.7vw, 1.6rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.015em;
}

.bay-items p {
    margin: 0.35rem 0 0;
    max-width: 34rem;
    color: var(--steel-lit);
}

.bay-items li:target h3 {
    color: var(--sky);
}

.bay-items li:target {
    border-bottom: 1px solid var(--sky);
}

.bay-snaps {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem 0.9rem;
    align-items: flex-start;
}

.bay-snaps li:nth-child(odd) .snap {
    transform: rotate(-1.6deg);
}

.bay-snaps li:nth-child(even) .snap {
    transform: rotate(1.4deg);
}

.bay-snaps li .snap:hover {
    transform: rotate(0deg) scale(1.04);
}

@media (min-width: 900px) {
    .bay {
        grid-template-columns: 15rem minmax(0, 1fr) 19.5rem;
        align-items: start;
    }

    .bay-snaps {
        margin: 0;
        justify-content: flex-end;
    }
}

/* services: insurance, on the plate */

.insure-grid {
    position: relative;
    display: grid;
    gap: 2rem 4rem;
}

.insure h2 {
    font-size: clamp(1.9rem, 4.6vw, 3rem);
}

.insure h3 {
    margin: 0 0 0.6rem;
    font-size: 1.5rem;
    font-weight: 800;
}

.insure p {
    max-width: 34rem;
    color: #e3ecfb;
}

.insure .insurers {
    margin: 1rem 0 0;
    font-size: clamp(1.45rem, 3.6vw, 2.2rem);
}

.insure .insurers li:not(:last-child)::after {
    color: var(--steel-lit);
}

@media (min-width: 900px) {
    .insure-grid {
        grid-template-columns: 1fr 1.25fr;
    }
}

/* contact */

.contact {
    padding-bottom: clamp(3rem, 7vw, 5rem);
}

.contact-grid {
    display: grid;
    gap: 1.25rem;
}

.plate-card {
    padding: clamp(1.35rem, 3.5vw, 2.25rem);
    background: var(--cobalt);
    border: 1.5px solid rgba(255, 255, 255, 0.82);
    border-radius: 20px;
    box-shadow: 0 0 26px rgba(150, 195, 255, 0.22);
    color: #fff;
}

.plate-name {
    margin: 0 0 0.7rem;
    font-family: var(--display);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--steel-lit);
}

.big-phone-line {
    margin: 0;
}

.big-phone {
    font-family: var(--display);
    font-size: clamp(1.55rem, 6.4vw, 2.6rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    white-space: nowrap;
    color: #fff;
    text-decoration: none;
}

.big-phone:hover {
    text-decoration: underline;
    text-decoration-thickness: 3px;
}

.contact-list {
    margin: 1.4rem 0 0;
}

.contact-list div {
    padding: 0.7rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.24);
}

@media (min-width: 520px) {
    .contact-list div {
        display: grid;
        grid-template-columns: 7.5rem minmax(0, 1fr);
        gap: 0.75rem;
    }
}

.contact-list dt {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--steel-lit);
}

.contact-list dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.plate-card a {
    color: #fff;
}

.plate-card :focus-visible {
    outline-color: #fff;
}

.form-card {
    padding: clamp(1.35rem, 3.5vw, 2.25rem);
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: 20px;
}

.form-card h2 {
    margin-top: 0;
    font-size: clamp(1.7rem, 4vw, 2.3rem);
}

.contact-form > div {
    margin-bottom: 1rem;
}

.contact-form label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 700;
    color: #fff;
}

.contact-form input,
.contact-form textarea {
    display: block;
    width: 100%;
    padding: 0.75rem 0.9rem;
    font: inherit;
    color: #fff;
    background: #050911;
    border: 1px solid #34507f;
    border-radius: 10px;
}

.contact-form textarea {
    resize: vertical;
    min-height: 9rem;
}

.contact-form ::placeholder {
    color: #8ea4c8;
    opacity: 1;
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
    outline: 3px solid var(--sky);
    outline-offset: 1px;
    border-color: var(--sky);
}

.contact-form ul {
    margin: 0 0 0.4rem;
    padding: 0;
    list-style: none;
    color: #ff9c8c;
    font-weight: 600;
}

.form-hint {
    margin: 0.9rem 0 0;
    font-size: 0.9rem;
    color: var(--steel-lit);
}

.contact-sent {
    margin-bottom: 1.25rem;
    padding: 0.9rem 1rem;
    background: rgba(84, 183, 238, 0.14);
    border: 1px solid var(--sky);
    border-radius: 10px;
    color: #fff;
}

.contact-sent strong {
    display: block;
}

.find-grid {
    display: grid;
    gap: 2rem;
}

.find h2 {
    font-size: clamp(1.8rem, 4.4vw, 2.8rem);
}

@media (min-width: 900px) {
    .contact-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
        gap: 1.5rem;
        align-items: start;
    }

    .find-grid {
        grid-template-columns: minmax(0, 0.8fr) auto;
        gap: 4rem;
        align-items: center;
    }
}

/* 404 */

.not-found {
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 2rem var(--pad);
    text-align: center;
    background: radial-gradient(70% 50% at 90% -5%, rgba(12, 86, 186, 0.42), transparent 70%);
}

.not-found > div {
    max-width: 34rem;
}

.not-found img {
    height: auto;
}

.not-found h1 {
    margin: 1.5rem 0 1rem;
    font-size: clamp(1.9rem, 6vw, 3rem);
}

.not-found h2 {
    margin: 2.5rem 0 0.6rem;
    font-size: 1.4rem;
}

.not-found [lang="en"] {
    color: var(--steel-lit);
}

/* ---- things rise as they scroll into view ---- */

@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .figures li,
        .snaps li,
        .bay-snaps li,
        .tile,
        .insurers li,
        .stand-3d {
            animation: rise linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 55%;
        }
    }
}

@keyframes rise {
    from {
        opacity: 0;
        translate: 0 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}
/* ---- lightbox: /js/lightbox.js opens a linked image enlarged over the page, in a <dialog> ----
   Paste this block into the site's css/site.css. The overlay is dark in every theme and brings its own
   colours and box sizing, so it does not depend on the rest of the stylesheet. To recolour it to the
   site, set these on .lightbox (or on :root): --lb-bg, --lb-text, --lb-accent (focus ring),
   --lb-accent-soft (hover). */

[data-lightbox] {
    cursor: zoom-in;
}

.lightbox,
.lightbox * {
    box-sizing: border-box;
}

html:has(.lightbox[open]) {
    overflow: hidden;
    scrollbar-gutter: stable;
}

.lightbox {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 68px 12px 14px;
    border: 0;
    background: var(--lb-bg, rgba(12, 14, 16, 0.95));
    color: var(--lb-text, #f2f2f2);
    color-scheme: dark;
    overscroll-behavior: contain;
}

.lightbox[open] {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 12px;
}

.lightbox::backdrop {
    background: none;
}

.lightbox-stage {
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.lightbox-stage img {
    display: block;
    max-width: none;
    border-radius: 4px;
    background: #fff;
}

.lightbox-caption {
    display: grid;
    place-items: center;
    min-height: 44px;
    max-width: none;
    margin: 0;
    padding: 0 56px;
    color: var(--lb-text, #f2f2f2);
    font-size: 0.92rem;
    line-height: 1.35;
    text-align: center;
}

.lightbox-button {
    position: absolute;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 20px no-repeat;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.lightbox-button:hover {
    border-color: #ffffff;
    background-color: var(--lb-accent-soft, rgba(255, 255, 255, 0.16));
}

.lightbox-button:focus-visible {
    outline: 3px solid var(--lb-accent, #ffffff);
    outline-offset: 3px;
    border-radius: 50%;
}

.lightbox-button[hidden] {
    display: none;
}

.lightbox-close {
    top: 12px;
    right: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

.lightbox-prev,
.lightbox-next {
    bottom: 14px;
}

.lightbox-prev {
    left: 12px;
    rotate: 180deg;
}

.lightbox-next {
    right: 12px;
}

@media (min-width: 760px) {
    .lightbox {
        padding: 24px 84px 18px;
    }

    .lightbox-caption {
        padding: 0;
    }

    .lightbox-prev,
    .lightbox-next {
        top: calc(50% - 22px);
        bottom: auto;
    }

    .lightbox-prev {
        left: 20px;
    }

    .lightbox-next,
    .lightbox-close {
        right: 20px;
    }

    .lightbox-close {
        top: 20px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .lightbox[open] {
        animation: lightbox-in 0.2s ease;
    }
}

@keyframes lightbox-in {
    from {
        opacity: 0;
    }
}

/* the photos of this site have their rounded corners in the file: no white plate behind them */
.lightbox-stage img {
    background: transparent;
}