/* Cleaning Wizard
   Two paints only: plate black and garage-door white. Greys are mixes of the two.
   Square everything. One family (Archivo), ranked by size. */

/* ---------- Fonts (self-hosted, SIL OFL, see assets/fonts/OFL.txt) ----------
   Archivo: text, variable weight. Archivo Condensed: headings and figures, bold only.
   The latin-ext files carry č ć đ š ž. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/archivo-condensed-bold-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Archivo Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/archivo-condensed-bold-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* System faces scaled to Archivo's widths, shown only until the web fonts arrive, so lines do not re-wrap. */
@font-face {
  font-family: "Archivo Condensed Fallback";
  font-weight: 700;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold"), local("Arial"), local("Roboto");
  size-adjust: 77%;
}

@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("ArialMT"), local("Roboto"), local("Roboto-Regular");
  size-adjust: 98%;
}

/* ---------- Tokens ---------- */

:root {
  --black: #0e0e10;
  --white: #f1f0ea;
  --grey-on-black: #a8a8a4;
  --grey-on-white: #5b5b5a;
  --rule-on-black: #3b3b3c;
  --rule-on-white: #c8c7c3;
  --tile-on-black: #1c1c1e;
  --soft-on-black: #d1d0cb;
  --edge-on-black: #686867;
  --star: #f0b443;

  --font-text: "Archivo", "Archivo Fallback", Arial, sans-serif;
  --font-display: "Archivo Condensed", "Archivo Condensed Fallback", Arial, sans-serif;
  --display-weight: 700;

  --size-small: 0.875rem;
  --size-note: 0.9375rem;
  --size-text: 1.0625rem;
  --size-lead: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);
  --size-row: clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem);
  --size-title: clamp(2.5rem, 1.75rem + 3.3vw, 4.5rem);

  --gutter: max(clamp(1.25rem, 4vw, 4rem), env(safe-area-inset-left), env(safe-area-inset-right));
  --section-y: clamp(4rem, 9vw, 7.5rem);
  --header-h: 3.5rem;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.dark {
  --bg: var(--black);
  --fg: var(--white);
  --muted: var(--grey-on-black);
  --rule: var(--rule-on-black);
  background: var(--bg);
  color: var(--fg);
  color-scheme: dark;
}

.light {
  --bg: var(--white);
  --fg: var(--black);
  --muted: var(--grey-on-white);
  --rule: var(--rule-on-white);
  background: var(--bg);
  color: var(--fg);
  color-scheme: light;
}

.dark ::selection { background: var(--white); color: var(--black); }
.light ::selection { background: var(--black); color: var(--white); }

/* ---------- Base ---------- */

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

html {
  background: var(--black);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 1rem;
  scroll-padding-bottom: 1rem;
  scrollbar-color: var(--grey-on-white) var(--black);
}

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-text);
  font-size: var(--size-text);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

img,
picture {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  line-height: 1;
  text-wrap: balance;
}

h2 {
  font-size: var(--size-title);
}

h3 {
  font-size: var(--size-row);
  line-height: 1.1;
}

p {
  margin: 0;
}

p + p {
  margin-top: 1em;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover,
a:active {
  text-decoration-thickness: 2px;
}

a,
button,
label,
select,
input {
  touch-action: manipulation;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

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

.skip {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 40;
  padding: 0.75rem 1rem;
  background: var(--white);
  color: var(--black);
  font-weight: 600;
}

.skip:focus {
  top: 0.5rem;
  outline-color: var(--white);
}

.lead {
  font-size: var(--size-lead);
  line-height: 1.4;
}

.note {
  font-size: var(--size-note);
  line-height: 1.45;
  color: var(--muted);
}

.measure {
  max-width: 36rem;
}

.figures {
  font-variant-numeric: tabular-nums lining-nums;
}

/* A link inside a sentence: the padding extends the tap area to 44px without moving the line. */
p > a:not([class]) {
  padding-block: 0.85rem;
}

/* A standalone text link that needs a full tap target. */
.link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

/* ---------- Plates (buttons) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--fg);
  background: var(--fg);
  color: var(--bg);
  font: inherit;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

/* Hover draws the plate's inner frame; an outlined plate fills. */
.btn:hover {
  box-shadow: inset 0 0 0 3px var(--fg), inset 0 0 0 4px var(--bg);
}

.btn:active {
  transform: translateY(1px);
}

.btn:focus-visible {
  outline-color: var(--fg);
}

.btn--line {
  background: var(--bg);
  color: var(--fg);
}

.btn--line:hover {
  background: var(--fg);
  color: var(--bg);
  box-shadow: none;
}

/* ---------- Header ---------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--header-h);
  padding-inline: var(--gutter);
}

/* Over the hero the header is clear and sits on the photograph's top scrim. */
.site-header--over {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  background: none;
}

.logo {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  text-decoration: none;
}

/* TODO: placeholder lettering. Replace with assets/logo.svg (CLEANING WIZARD outlined from the Shlop font). */
.logo__placeholder {
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav,
.header-call {
  display: none;
}

/* ---------- Hero ----------
   Phones: the photograph fills the screen and the words stand on its dark foot.
   Desktop (further down): the car on the right, the words on the dark left. */

.hero {
  position: relative;
  display: grid;
  grid-template-rows: minmax(15rem, 1fr) auto;
  min-height: 100vh;
  min-height: 100svh;
}

/* The photograph takes all the height the words leave. */
.hero__media {
  position: relative;
  overflow: hidden;
  background: var(--black);
}

.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 85% 60%;
  animation: lights-on 1.2s var(--ease) both;
}

/* Scrims: the logo stays readable at the top, the edges step back from the car, and the foot of the
   photograph sinks into the black under the headline. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgb(14 14 16 / 0.78), rgb(14 14 16 / 0.3) 13%, rgb(14 14 16 / 0) 26%),
    linear-gradient(to left, rgb(14 14 16 / 0.5), rgb(14 14 16 / 0) 16%),
    linear-gradient(to right, rgb(14 14 16 / 0.35), rgb(14 14 16 / 0) 14%),
    linear-gradient(to top, rgb(14 14 16), rgb(14 14 16 / 0.86) 12%, rgb(14 14 16 / 0.5) 26%, rgb(14 14 16 / 0) 46%);
}

/* The headline stands on the dark foot of the photograph; the rest sits on black down to the bottom edge. */
.hero__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin-top: -6.5rem;
  padding: 0 var(--gutter) calc(1.75rem + env(safe-area-inset-bottom));
}

/* Phones go without the label; desktop brings it back. */
.hero__kicker {
  display: none;
  margin-bottom: 0.875rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.hero h1 {
  font-family: var(--font-text);
  font-size: min(calc((100vw - 2 * var(--gutter)) / 9.8), 5rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.02em;
}

.hero h1 span {
  display: block;
}

.hero__sub {
  max-width: 27em;
  margin-top: 0.875rem;
  font-weight: 350;
  text-wrap: balance;
  line-height: 1.45;
  color: var(--soft-on-black);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 1.5rem;
}

.hero__actions .btn {
  flex: 1 1 auto;
}

/* On phones the hero keeps to one action. */
.hero__actions .btn--line {
  display: none;
}

.btn--caps {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.btn--icon {
  gap: 0.75rem;
}

.btn svg {
  flex: none;
}

.facts {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.facts li {
  padding-right: clamp(1rem, 4.5vw, 2.5rem);
}

.facts li + li {
  padding-left: clamp(1rem, 4.5vw, 2.5rem);
  border-left: 1px solid var(--grey-on-white);
}

.facts li:last-child {
  padding-right: 0;
}

.facts b {
  display: block;
  font-size: clamp(1.625rem, 1.2rem + 1.9vw, 2.25rem);
  font-weight: 700;
  line-height: 1.1;
}

.facts span {
  display: block;
  margin-top: 0.25rem;
  font-size: clamp(0.75rem, 3.6vw, 0.875rem);
  font-weight: 350;
  line-height: 1.3;
  color: var(--soft-on-black);
}

@keyframes lights-on {
  from { opacity: 0.5; }
  to { opacity: 1; }
}

/* ---------- Ceramic coating: the words, a photograph, the durations ---------- */

/* The hero's regular-width Archivo Bold carries on through the two service sections. */
.headline {
  font-family: var(--font-text);
  font-size: clamp(2.5rem, 1.6rem + 4.4vw, 5rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.headline span {
  display: block;
}

/* Line icons keep a 1.5px stroke at every size. */
.icon {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

.icon--solid {
  padding: 0.125rem;
  fill: currentColor;
  stroke: none;
}

.coat__text {
  padding: var(--section-y) var(--gutter) 2.5rem;
}

.coat__lead {
  max-width: 21em;
  margin-top: 1.5rem;
  font-size: var(--size-lead);
  line-height: 1.35;
}

.coat__lead strong {
  font-weight: 700;
  white-space: nowrap;
}

.coat__more {
  max-width: 30em;
  text-wrap: pretty;
  font-weight: 350;
  color: var(--soft-on-black);
}

.coat__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--tile-on-black);
}

.coat__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(0.9);
}

/* The photograph sinks into the black around it. */
.coat__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgb(14 14 16), rgb(14 14 16 / 0) 26%),
    linear-gradient(to top, rgb(14 14 16), rgb(14 14 16 / 0) 30%);
}

.coat__side {
  padding: 1.5rem var(--gutter) var(--section-y);
}

.panel__title,
.service h3 {
  font-family: var(--font-text);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.durations {
  margin: 0.75rem 0 0;
}

.durations > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.75rem;
  padding-block: 0.75rem;
}

/* The only rules left on the page: thin ones between the rows of a list of figures. */
.durations > div + div {
  border-top: 1px solid var(--rule);
}

.durations dt {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.125rem;
  line-height: 1.25;
}

.durations dd {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: right;
  white-space: nowrap;
}

.panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.panel__actions .btn {
  flex: 1 1 auto;
}

/* ---------- Other services ---------- */

.services {
  padding: var(--section-y) var(--gutter);
}

.services__list {
  display: grid;
  gap: 2.5rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}

.service {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: 1.25rem;
}

.service .icon {
  grid-area: 1 / 1 / span 3 / auto;
  width: 2.75rem;
  height: 2.75rem;
}

.service h3,
.service p {
  grid-column: 2;
}

.service p {
  margin-top: 0.5rem;
  font-weight: 350;
  color: var(--soft-on-black);
}

.service .service__time {
  margin-top: 0.75rem;
  font-weight: 500;
  color: var(--fg);
}

/* ---------- Gallery: one strip of photographs that moves sideways ---------- */

.works {
  --slide-h: clamp(17rem, min(62vh, 104vw), 40rem);
}

.works__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: var(--section-y) var(--gutter) clamp(1.75rem, 3.5vw, 3rem);
}

/* The arrows need JavaScript; without it the strip still scrolls by touch, wheel and keyboard. */
.works__nav {
  display: none;
  gap: 0.5rem;
}

.js .works__nav {
  display: flex;
}

.arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border: 1px solid var(--fg);
  background: none;
  color: var(--fg);
  cursor: pointer;
}

.arrow:hover:not(:disabled) {
  background: var(--fg);
  color: var(--bg);
}

.arrow:active:not(:disabled) {
  transform: translateY(1px);
}

.arrow:disabled {
  border-color: var(--rule);
  color: var(--muted);
  cursor: default;
}

.works__track {
  position: relative;
  display: flex;
  gap: clamp(0.625rem, 1.6vw, 1.5rem);
  margin: 0;
  padding: 0 var(--gutter);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}

.works__track::-webkit-scrollbar {
  display: none;
}

.works__track:focus-visible {
  outline-offset: -2px;
}

.slide {
  position: relative;
  flex: none;
  width: calc(var(--slide-h) * 0.75);
  height: var(--slide-h);
  overflow: hidden;
  background: var(--tile-on-black);
  scroll-snap-align: start;
}

.slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The before/after pair is one frame cut by a tape-white line: the frame's white ground shows through the gap.
   On phones the two halves are the left and right half of the same view. */
.slide--pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  background: var(--white);
}

.pair__half {
  position: relative;
  overflow: hidden;
  background: var(--tile-on-black);
}

.pair__half:first-child img {
  object-position: left center;
}

.pair__half:last-child img {
  object-position: right center;
}

.pair__tag {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.5rem 0.875rem;
  background: var(--black);
  color: var(--white);
  font-size: var(--size-note);
  font-weight: 600;
  line-height: 1.2;
}

.works__foot {
  padding: 1.5rem var(--gutter) var(--section-y);
}

/* Photographs come up to full brightness as they enter view: the image fades in over its dark tile. */
.js .lit img {
  opacity: 0.5;
  transition: opacity 1s var(--ease);
}

.js .lit.is-lit img {
  opacity: 1;
}

/* ---------- Booking and FAQ: the steps, the WhatsApp inquiry, the questions ---------- */

.book {
  display: grid;
  gap: 4rem;
  padding: var(--section-y) var(--gutter);
}

.book__main {
  display: grid;
  gap: 2.5rem;
}

/* A jump from the menu or the hero button leaves some air above the heading. */
.book__main,
.faq {
  scroll-margin-top: 2.5rem;
}

.book .headline,
.praise .headline {
  font-size: clamp(1.875rem, 9.4vw, 2.75rem);
  line-height: 1.08;
}

.book__lead {
  max-width: 26em;
  margin-top: 1.25rem;
  font-weight: 350;
  line-height: 1.5;
  color: var(--soft-on-black);
  text-wrap: pretty;
}

/* Numbered steps on one thread: the line runs from each number to the next, behind the circles. */
.steps {
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: 1.25rem;
  align-items: center;
  counter-increment: step;
}

.steps li + li {
  margin-top: 1.75rem;
}

.steps li::before {
  content: counter(step);
  position: relative;
  z-index: 1;
  grid-area: 1 / 1 / span 2 / auto;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--edge-on-black);
  border-radius: 50%;
  background: var(--tile-on-black);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: lining-nums;
}

.steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(1.375rem - 0.5px);
  width: 1px;
  height: calc(100% + 2.25rem);
  background: var(--rule);
}

.steps h3,
.qa h3 {
  font-family: var(--font-text);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.steps h3 {
  grid-column: 2;
}

.steps p {
  grid-column: 2;
  margin-top: 0.25rem;
  font-size: 1rem;
  font-weight: 350;
  line-height: 1.45;
  color: var(--soft-on-black);
}

/* The inquiry: one framed panel, the only frame in the section. */
.form {
  display: grid;
  gap: 1.75rem;
  padding: clamp(1.25rem, 5vw, 1.75rem);
  border: 1px solid var(--rule);
}

.field label {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--soft-on-black);
}

.field input,
.field select {
  width: 100%;
  min-height: 3.375rem;
  margin: 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--edge-on-black);
  background-color: rgb(241 240 234 / 0.03);
  color: var(--fg);
  font: inherit;
  line-height: 1.4;
}

.field input,
.field select {
  display: block;
  appearance: none;
  -webkit-appearance: none;
  caret-color: var(--fg);
}

.field option {
  background-color: var(--tile-on-black);
  color: var(--white);
}

.field select {
  padding-right: 3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 1l7 7 7-7' fill='none' stroke='%23f1f0ea' stroke-width='1.75' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.125rem center;
  background-size: 0.875rem auto;
  cursor: pointer;
}

.field input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.field input:hover,
.field select:hover {
  border-color: var(--fg);
}

.field [aria-invalid="true"] {
  border-color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--fg);
}

.field__error {
  margin-top: 0.625rem;
  font-size: var(--size-note);
  font-weight: 700;
}

.field__error:empty {
  display: none;
}

.form .btn {
  width: 100%;
  min-height: 4rem;
}

/* Questions: folded on phones, open on desktop (js/main.js), a thin rule above each. */
.faq .headline {
  font-size: clamp(1.625rem, 7.5vw, 2.125rem);
}

.faq__list {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.faq__list > li {
  border-top: 1px solid var(--rule);
}

.qa summary {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 1.25rem;
  align-items: center;
  column-gap: 1.25rem;
  min-height: 4.75rem;
  padding-block: 1rem;
  list-style: none;
  cursor: pointer;
}

.qa summary::-webkit-details-marker {
  display: none;
}

.qa summary .icon {
  width: 2rem;
  height: 2rem;
}

.qa__chev {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: square;
  transition: transform 0.32s var(--ease);
}

.qa[open]:not(.is-closing) .qa__chev {
  transform: rotate(180deg);
}

/* The space under an answer belongs to its last paragraph, so the box itself can slide shut to nothing. */
.qa__a > :last-child {
  padding-bottom: 1.75rem;
}

.qa__a {
  padding-left: 3.25rem;
  font-size: 1rem;
  font-weight: 350;
  line-height: 1.6;
  color: var(--soft-on-black);
  text-wrap: pretty;
}

.qa__a a {
  color: var(--fg);
}

/* ---------- Reviews: the rating beside a car, three reviews in cards ---------- */

.praise {
  position: relative;
  overflow: hidden;
}

/* The car comes out of the black, like the photographs above and below it. */
.praise__media {
  position: relative;
  height: 62vw;
  max-height: 24rem;
  margin: 0;
  overflow: hidden;
}

.praise__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(0.85);
}

.praise__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgb(14 14 16), rgb(14 14 16 / 0) 32%),
    linear-gradient(to top, rgb(14 14 16), rgb(14 14 16 / 0.6) 22%, rgb(14 14 16 / 0) 58%);
}

.praise__text {
  position: relative;
  z-index: 1;
  margin-top: -3.5rem;
  padding: 0 var(--gutter) 2.5rem;
}

/* The one colour on the page: the five stars, as Google shows them. */
.stars {
  display: flex;
  gap: 0.375rem;
  margin-top: 1.5rem;
}

.stars svg {
  width: 1.75rem;
  height: 1.75rem;
  fill: var(--star);
}

.praise__basis {
  max-width: 16em;
  margin-top: 1.5rem;
  font-weight: 350;
  line-height: 1.5;
  color: var(--soft-on-black);
}

.praise__text .btn {
  gap: 0.75rem;
  min-height: 3.5rem;
  margin-top: 1.75rem;
  padding-inline: 1.125rem;
  background: none;
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  white-space: normal;
}

.praise__text .btn:hover {
  background: var(--fg);
}

.praise__list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1rem;
  padding: 0 var(--gutter) var(--section-y);
}

/* On phones the reviewer heads the card; on desktop the initial stands left of the text. */
.quote {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  grid-template-areas:
    "who by mark"
    "text text text";
  align-items: center;
  gap: 1rem 0.875rem;
  margin: 0;
  padding: 1.25rem;
  border: 1px solid var(--rule);
  background: rgb(241 240 234 / 0.02);
}

.quote__who {
  grid-area: who;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--rule-on-black);
  font-weight: 600;
  line-height: 1;
}

.quote blockquote {
  grid-area: text;
  margin: 0;
  line-height: 1.5;
  quotes: "„" "“";
}

.quote blockquote p::before {
  content: open-quote;
}

.quote blockquote p::after {
  content: close-quote;
}

.quote figcaption {
  grid-area: by;
  font-size: var(--size-note);
  line-height: 1.35;
}

.quote figcaption b {
  display: block;
  font-weight: 700;
}

.quote figcaption span {
  color: var(--muted);
}

.quote::after {
  content: "”";
  content: "”" / "";
  grid-area: mark;
  align-self: start;
  height: 1.5rem;
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--edge-on-black);
}

/* ---------- Contact: an open grid of ways to get in touch, a car in the corner ---------- */

.reach {
  position: relative;
  overflow: hidden;
}

.reach__text {
  position: relative;
  z-index: 1;
  padding: var(--section-y) var(--gutter) 2.75rem;
}

.reach__lead {
  max-width: 21em;
  margin-top: 1.5rem;
  font-weight: 350;
  line-height: 1.5;
  color: var(--soft-on-black);
  text-wrap: pretty;
}

/* Two groups: the ways to get in touch, and the opening hours standing apart from them. */
.reach__body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 4rem;
  padding: 0 var(--gutter);
}

.reach__ways {
  display: grid;
  gap: 2.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* On phones the icon stands left of its block; on desktop it sits on top. */
.way {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  column-gap: 1.25rem;
  justify-items: start;
}

.way > .icon {
  grid-area: 1 / 1 / span 5 / auto;
  width: 2rem;
  height: 2rem;
}

.way > :not(.icon) {
  grid-column: 2;
}

.way__label {
  padding-top: 0.5rem;
  font-family: var(--font-text);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--soft-on-black);
}

.way__value {
  margin-top: 0.375rem;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* Outranks the padded tap area that links inside a paragraph get by default. */
p.way__value > a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-block: 0;
  text-decoration: none;
}

p.way__value > a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.way__value--tel {
  font-size: 1.875rem;
  font-weight: 700;
  white-space: nowrap;
}

.way__value--mail {
  font-size: 1.1875rem;
  overflow-wrap: anywhere;
}

.way__note {
  margin-top: 0.375rem;
  font-size: var(--size-note);
  font-weight: 350;
  color: var(--soft-on-black);
}

.way .btn {
  gap: 0.75rem;
  max-width: 100%;
  min-height: 3rem;
  margin-top: 0.875rem;
  padding: 0.5rem 1.125rem;
  background: none;
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  white-space: normal;
}

.way .btn:hover {
  background: var(--fg);
}

.way__hours {
  width: 100%;
  max-width: 17rem;
  margin-top: 0.5rem;
}

.way__hours > span {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.3125rem;
}

/* The car comes out of the black: every inner edge of the photograph is faded. */
.reach__media {
  position: relative;
  margin: 1.5rem 0 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.reach__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 60%;
  filter: grayscale(1) contrast(1.08) brightness(0.85);
}

.reach__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgb(14 14 16), rgb(14 14 16 / 0) 45%),
    linear-gradient(to left, rgb(14 14 16 / 0.7), rgb(14 14 16 / 0) 40%);
}

/* ---------- Footer ---------- */

.site-footer {
  --bg: var(--tile-on-black);
  padding: clamp(2.5rem, 4vw, 3.5rem) var(--gutter) calc(clamp(1.5rem, 2.5vw, 2rem) + env(safe-area-inset-bottom));
  background: var(--bg);
  font-size: var(--size-note);
  line-height: 1.5;
  color: var(--soft-on-black);
}

.site-footer__top {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 1.5rem;
}

.site-footer__brand,
.site-footer__top > :last-child {
  grid-column: 1 / -1;
}

.site-footer__brand p + p {
  max-width: 23rem;
  margin-top: 0.875rem;
}

/* Plain lettering: the Shlop wordmark belongs to the header alone. */
.site-footer__name {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
}

.site-footer__title {
  font-family: var(--font-text);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}

.site-footer ul {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.site-footer li a {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  color: var(--fg);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.site-footer li a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.site-footer .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.site-footer__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.75rem;
}

.site-footer__legal p {
  max-width: 24rem;
  margin-top: 0.875rem;
  font-size: var(--size-small);
}

.site-footer__legal p + p {
  margin-top: 0.5rem;
  color: var(--muted);
}

.site-footer__legal .link {
  color: var(--fg);
  font-size: var(--size-small);
}

/* ---------- Text page (privatnost.html) ---------- */

.page {
  padding: var(--section-y) var(--gutter);
  min-height: 60vh;
}

.page h1 {
  font-size: var(--size-title);
  margin-bottom: 2rem;
}

/* ---------- Desktop ---------- */

@media (min-width: 60em) {
  :root {
    --header-h: 4.5rem;
    --size-text: 1.125rem;
  }

  html {
    scroll-padding-top: calc(var(--header-h) + 1rem);
  }

  .site-header {
    position: sticky;
    top: 0;
    z-index: 20;
  }

  .site-header--over {
    position: absolute;
  }

  /* With JavaScript the clear header stays in view and turns solid once the hero has passed. */
  .js .site-header--over {
    position: fixed;
  }

  .site-header--over.is-stuck {
    background: var(--black);
  }

  .logo__placeholder {
    font-size: 1.125rem;
  }

  .nav {
    display: flex;
    gap: clamp(1.25rem, 2.6vw, 2.5rem);
    margin-left: auto;
  }

  .nav a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    font-size: var(--size-note);
    text-decoration: none;
  }

  .nav a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
  }

  .header-call {
    position: relative;
    display: inline-flex;
    min-height: 2.75rem;
    margin-left: clamp(0.5rem, 1.4vw, 1.5rem);
    padding: 0.5rem 2rem;
    font-size: var(--size-note);
  }

  .site-header--over .header-call {
    background: none;
  }

  .site-header--over .header-call:hover {
    background: var(--white);
  }

  /* The hairline between the links and the phone number. */
  .nav + .header-call::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(-1 * clamp(0.75rem, 1.6vw, 1.5rem) - 1px);
    width: 1px;
    height: 1.5rem;
    margin-top: -0.75rem;
    background: var(--grey-on-black);
  }

  .hero {
    display: block;
    min-height: clamp(36rem, 100vh, 64rem);
    min-height: clamp(36rem, 100svh, 64rem);
  }

  .hero__media {
    position: absolute;
    inset: 0 0 0 auto;
    width: min(64%, 76rem);
  }

  .hero__media img {
    object-position: 60% 60%;
  }

  .hero__media::after {
    background:
      linear-gradient(to right, rgb(14 14 16), rgb(14 14 16 / 0.8) 10%, rgb(14 14 16 / 0.3) 30%, rgb(14 14 16 / 0) 50%),
      linear-gradient(to bottom, rgb(14 14 16 / 0.84), rgb(14 14 16 / 0.32) 15%, rgb(14 14 16 / 0) 32%),
      linear-gradient(to top, rgb(14 14 16), rgb(14 14 16 / 0.4) 12%, rgb(14 14 16 / 0) 28%);
  }

  .hero__body {
    gap: 2.5rem;
    min-height: inherit;
    margin-top: 0;
    padding: calc(var(--header-h) + 2rem) var(--gutter) clamp(2.5rem, 11.5vh, 7.5rem);
  }

  .hero__lead {
    margin-block: auto;
  }

  .hero__kicker {
    display: block;
    margin-bottom: 1.75rem;
    font-size: 0.8125rem;
  }

  .hero h1 {
    font-size: clamp(3rem, 4.9vw, 5.75rem);
  }

  .hero__sub {
    margin-top: 1.5rem;
    font-size: clamp(1.125rem, 1.45vw, 1.5rem);
    font-weight: 300;
  }

  .hero__actions {
    margin-top: 2.5rem;
  }

  .hero__actions .btn {
    flex: none;
    min-height: 3.75rem;
    padding-inline: 2rem;
  }

  .hero__actions .btn--caps {
    padding-inline: 2.5rem;
    font-size: 0.9375rem;
  }

  .hero__actions .btn--line {
    display: inline-flex;
    background: none;
    font-weight: 500;
  }

  .hero__actions .btn--line:hover {
    background: var(--white);
  }

  .facts span {
    font-size: var(--size-note);
    font-weight: 300;
  }

  /* Booking and FAQ: the steps beside the inquiry, the questions under them. */
  .book {
    --book-gap: clamp(2rem, 3.5vw, 3.5rem);
    gap: 5rem;
  }

  .book__main,
  .faq {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--book-gap);
  }

  .faq__list {
    margin-top: 0;
  }

  .book__lead {
    margin-top: 1.5rem;
  }

  .steps {
    margin-top: 2.75rem;
  }

  /* Reviews: the rating over the dimmed car on the left, the cards on the right. */
  .praise {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: center;
    column-gap: clamp(2rem, 3.5vw, 3.5rem);
    padding: clamp(3.5rem, 5.5vw, 5.5rem) var(--gutter);
  }

  .praise .headline {
    font-size: clamp(2rem, 3vw, 4rem);
  }

  .praise__media {
    position: absolute;
    inset: 0 auto 0 0;
    width: 38%;
    height: auto;
    max-height: none;
  }

  .praise__media img {
    filter: grayscale(1) contrast(1.08) brightness(0.45);
  }

  .praise__media::after {
    background:
      linear-gradient(to left, rgb(14 14 16), rgb(14 14 16 / 0.7) 22%, rgb(14 14 16 / 0) 62%),
      linear-gradient(to bottom, rgb(14 14 16), rgb(14 14 16 / 0) 24%),
      linear-gradient(to top, rgb(14 14 16), rgb(14 14 16 / 0) 24%);
  }

  .praise__text {
    margin-top: 0;
    padding: 0;
  }

  .stars {
    margin-top: 2rem;
  }

  .stars svg {
    width: 2rem;
    height: 2rem;
  }

  .praise__basis {
    margin-top: 2rem;
  }

  .praise__text .btn {
    gap: 0.875rem;
    min-height: 3.75rem;
    padding-inline: 1.5rem;
    white-space: nowrap;
  }

  .praise__list {
    gap: 1.25rem;
    padding: 0;
  }

  .quote {
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    grid-template-areas:
      "who text mark"
      "who by mark";
    align-items: start;
    gap: 0.875rem 1.5rem;
    padding: 1.5rem 1.75rem;
  }

  .quote blockquote {
    font-size: 1.0625rem;
  }

  .quote__who {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.25rem;
  }

  .quote figcaption {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.75rem;
  }

  .quote figcaption b {
    display: inline;
  }

  .quote figcaption span::before {
    content: "•";
    margin-right: 0.75rem;
  }

  .quote::after {
    height: 1.75rem;
    font-size: 4rem;
  }

  /* Ceramic coating: words on the left, the photograph beside them, the durations right of the line. */
  .coat {
    display: grid;
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  }

  .coat__intro {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 36rem;
  }

  .coat__text {
    position: relative;
    z-index: 1;
    width: 58%;
    padding: 4rem 0 4rem var(--gutter);
  }

  .coat__lead {
    margin-top: 2rem;
  }

  .coat__media {
    position: absolute;
    inset: 0 0 0 auto;
    width: 52%;
    aspect-ratio: auto;
    background: var(--black);
  }

  .coat__media::after {
    background:
      linear-gradient(to right, rgb(14 14 16), rgb(14 14 16 / 0.6) 24%, rgb(14 14 16 / 0) 58%),
      linear-gradient(to left, rgb(14 14 16), rgb(14 14 16 / 0) 24%),
      linear-gradient(to top, rgb(14 14 16), rgb(14 14 16 / 0) 30%),
      linear-gradient(to bottom, rgb(14 14 16), rgb(14 14 16 / 0) 24%);
  }

  .coat__side {
    display: flex;
    align-items: center;
    padding: 4rem var(--gutter) 4rem clamp(1.5rem, 3vw, 3rem);
  }

  .panel {
    width: 100%;
  }

  .durations dt,
  .durations dd {
    font-size: 1.25rem;
  }

  .panel__actions .btn {
    gap: 0.625rem;
    padding-inline: 1.125rem;
    font-size: 1rem;
  }

  /* Other services: three open columns. */
  .services__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(2rem, 5vw, 5rem);
    margin-top: 4rem;
  }

  .service {
    display: flex;
    flex-direction: column;
  }

  .service .icon {
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 2rem;
  }

  .service h3 {
    font-size: 1.625rem;
  }

  .service p {
    max-width: 22em;
  }

  .service .service__time {
    margin-top: auto;
    padding-top: 1.25rem;
  }

  /* Gallery: the two wide photographs and the before/after pair take their full width. */
  .slide--wide {
    width: calc(var(--slide-h) * 1.25);
  }

  .slide--pair {
    width: calc(var(--slide-h) * 1.5 + 3px);
  }

  .pair__half:first-child img,
  .pair__half:last-child img {
    object-position: center;
  }

  /* Contact: words on the left with the car below them, the grid on the right. */
  .site-footer__top {
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: 3rem;
  }

  .site-footer__brand,
  .site-footer__top > :last-child {
    grid-column: auto;
  }

  .site-footer li a {
    min-height: 2.25rem;
  }

  /* The contact section and the footer together fill the last screen exactly, so nothing of the section
     above shows when the page is scrolled to its end. The script reports the footer's real height. */
  .reach {
    display: grid;
    grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
    min-height: calc(100vh - var(--footer-h, 18.5rem) + 2px);
  }

  /* With JavaScript the header is fixed and covers the top of that screen. */
  .js .reach {
    min-height: calc(100vh - var(--header-h) - var(--footer-h, 18.5rem) + 2px);
  }

  .reach__text {
    padding: var(--section-y) 2rem 0 var(--gutter);
  }

  .reach__body {
    align-content: start;
    gap: 4.5rem;
    padding: var(--section-y) var(--gutter) 4.5rem 0;
  }

  .reach__ways {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4rem clamp(2rem, 3.5vw, 3.5rem);
  }

  .way {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .way > .icon {
    margin-bottom: 1.25rem;
  }

  .way__label {
    padding-top: 0;
  }

  .way .btn {
    white-space: nowrap;
  }

  /* One-line values share a height, so the buttons in a row line up. */
  .way__value {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
  }

  .way__value--tel {
    font-size: clamp(1.75rem, 2.2vw, 2rem);
  }

  .reach__media {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 32%;
    height: 70%;
    margin: 0;
    aspect-ratio: auto;
  }

  .reach__media::after {
    background:
      linear-gradient(to bottom, rgb(14 14 16), rgb(14 14 16 / 0.55) 30%, rgb(14 14 16 / 0) 62%),
      linear-gradient(to left, rgb(14 14 16), rgb(14 14 16 / 0.75) 18%, rgb(14 14 16 / 0) 60%);
  }
}

/* From here the booking steps, the inquiry and the questions stand side by side, and the reviews get
   the car as its own strip on the left. */
@media (min-width: 80em) {
  .book {
    grid-template-columns: minmax(0, 2.3fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 0 var(--book-gap);
  }

  .book__main {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }

  .book .headline {
    font-size: clamp(2.25rem, 3vw, 3.75rem);
  }

  /* The one upright rule: it parts the booking from the questions. */
  .faq {
    display: block;
    align-self: stretch;
    padding-left: var(--book-gap);
    border-left: 1px solid var(--rule);
  }

  .faq .headline {
    font-size: clamp(1.75rem, 2.4vw, 2.875rem);
  }

  .faq__list {
    margin-top: 1.75rem;
  }

  .praise {
    grid-template-columns: minmax(0, 20fr) minmax(0, 32fr) minmax(0, 48fr);
    column-gap: clamp(1.5rem, 2.2vw, 2.5rem);
    padding-left: 0;
  }

  .praise__media {
    width: 24%;
  }

  .praise__media img {
    filter: grayscale(1) contrast(1.08) brightness(0.85);
  }

  .praise__media::after {
    background:
      linear-gradient(to left, rgb(14 14 16), rgb(14 14 16 / 0.55) 20%, rgb(14 14 16 / 0) 60%),
      linear-gradient(to bottom, rgb(14 14 16), rgb(14 14 16 / 0.6) 12%, rgb(14 14 16 / 0) 28%),
      linear-gradient(to top, rgb(14 14 16), rgb(14 14 16 / 0.7) 14%, rgb(14 14 16 / 0) 32%);
  }

  .praise__text {
    grid-column: 2;
  }

  .praise__list {
    grid-column: 3;
  }
}

/* With room to spare the opening hours stand in their own column, well clear of the contact group. */
@media (min-width: 85em) {
  .reach__body {
    grid-template-columns: minmax(0, 1fr) minmax(13rem, 17rem);
    gap: clamp(4rem, 7vw, 8rem);
  }

  .way__value--mail {
    overflow-wrap: normal;
    white-space: nowrap;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .hero__media img {
    animation: none;
  }

  .js .lit img {
    opacity: 1;
    transition: none;
  }

  .qa__chev {
    transition-duration: 0.16s;
  }
}