/* Al Aticate Garage — alaticate.com
   The identity finalized on the business card (19 October 2026): warm ivory, dark warm grey,
   champagne gold, Josefin Sans, the logo's red used sparingly. Layout after the "Studio"
   homepage design. */

@font-face {
  font-family: "Josefin Sans";
  src: url("../fonts/josefin-sans-latin.woff2") format("woff2");
  font-weight: 100 700;
  font-display: swap;
}

:root {
  --ivory: #f8f1e8;
  --ivory-2: #f2e8db;
  --paper: #fcf9f4;
  --ink: #2f2b28;
  --ink-2: #4a443f;
  --muted: #6b635a;
  --gold: #6e5127;
  --gold-2: #a9874f;
  --gold-line: #d5c19f;
  --red: #c8262d;
  --graphite: #1f1c1a;
  --radius: 4px;
  --wrap: 1200px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --font: "Josefin Sans", "Segoe UI", system-ui, sans-serif;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0s !important;
  }
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.6;
  font-weight: 400;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

main {
  overflow-x: clip; /* the full-bleed hero photograph must never cause sideways scrolling */
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

.wrap {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
}
.skip:focus {
  top: 1rem;
}

:focus-visible {
  outline: 3px solid var(--gold-2);
  outline-offset: 3px;
}

/* ------------------------------------------------------------ buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.85rem 1.5rem 0.75rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  font: 600 1rem/1 var(--font);
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.btn .icon {
  width: 1.15em;
  height: 1.15em;
}
.btn--dark {
  background: var(--ink);
  color: var(--ivory);
}
.btn--dark:hover {
  background: #000;
}
.btn--dark .icon:last-child:not(:first-child) {
  transition: transform 0.2s;
}
.btn--dark:hover .icon:last-child:not(:first-child) {
  transform: translateX(3px);
}
.btn--ghost {
  border-color: var(--ink);
  color: var(--ink);
}
.btn--ghost:hover {
  background: var(--ink);
  color: var(--ivory);
}
.btn--light {
  background: var(--ivory);
  color: var(--ink);
}
.btn--light:hover {
  background: #fff;
}

/* ------------------------------------------------------------ header */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(252, 249, 244, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gold-line);
}
.header__bar {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: 5.25rem;
  transition: min-height 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
.header__logo img {
  width: 104px;
  height: auto;
  transition: width 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Desktop: the header tightens once the page is under way. The margin gives back the height it
   loses, so nothing below it moves. */
@media (min-width: 961px) {
  .header {
    transition: box-shadow 0.26s, margin-bottom 0.26s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .header.is-tight {
    margin-bottom: 1rem;
    box-shadow: 0 4px 18px rgba(31, 28, 26, 0.07);
  }
  .header.is-tight .header__bar {
    min-height: 4.25rem;
  }
  .header.is-tight .header__logo img {
    width: 84px;
  }
}
.nav ul {
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav a {
  position: relative;
  display: inline-block;
  padding: 0.5rem 0 0.35rem;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-2);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s;
}
.nav a:hover,
.nav a[aria-current="true"] {
  color: var(--ink);
}
.nav a:hover::after,
.nav a[aria-current="true"]::after {
  transform: scaleX(1);
}
.header__actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-left: auto;
}
.header__call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  gap: 0.5rem;
  min-height: 2.75rem;
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.header__call .icon {
  color: var(--gold);
}
.header__call-label {
  margin-right: 0.15rem;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

/* ------------------------------------------------------------ hero */

.hero {
  padding: clamp(2rem, 4vw, 3.5rem) 0 0;
  overflow: hidden;
  /* A warm studio light behind the coupe, never behind the words. */
  background: radial-gradient(ellipse 46% 52% at 74% 40%, rgba(201, 168, 112, 0.2) 0%, rgba(201, 168, 112, 0.08) 48%, transparent 78%);
}
.hero + .section {
  padding-top: clamp(3rem, 6vw, 5rem);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
}
.eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::after {
  content: "";
  width: 3.5rem;
  height: 2px;
  background: var(--red);
}
.hero h1 {
  font-size: clamp(2.4rem, 4.6vw, 4.1rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.hero h1 .line {
  display: block;
}
@media (min-width: 641px) {
  .hero h1 .line {
    white-space: nowrap;
  }
}
.dot {
  color: var(--red);
}
.lede {
  max-width: 32rem;
  margin-top: 2rem;
  font-size: 1.2rem;
  color: var(--ink-2);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}
.hero__text {
  position: relative;
  z-index: 1; /* the words stay above the photograph, whose faded edge reaches under them */
}
.hero__car {
  margin: 0 calc(-1 * var(--gutter)) 0 0;
}
/* The photograph's own ground is ivory but not quite the page's; it fades out on every side so
   no edge shows. */
.hero__car img {
  width: 100%;
  transform: translateY(14px) scale(1.08);
  transform-origin: 62% 55%;
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 60% 52%, #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 70% at 60% 52%, #000 58%, transparent 100%);
}

.promise {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--gold-line);
}
.promise li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
}
.promise li + li {
  border-left: 1px solid var(--gold-line);
}
.promise .icon {
  width: 2rem;
  height: 2rem;
  color: var(--gold-2);
}
.promise strong {
  display: block;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.promise span {
  font-size: 0.98rem;
  color: var(--muted);
  line-height: 1.4;
}

/* ------------------------------------------------------------ sections */

.section {
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
}
.section--panel {
  background: var(--paper);
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--gold-line);
}
.section__head {
  max-width: 44rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.kicker {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}
.kicker::before {
  content: "";
  width: 2.5rem;
  height: 2px;
  background: var(--red);
}
.section h2 {
  font-size: clamp(2rem, 3.6vw, 2.9rem);
}
.section__intro {
  margin-top: 1rem;
  color: var(--ink-2);
  font-size: 1.15rem;
}

/* services: five tall photographs */
.services {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.service {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.service img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 0.5s ease-out;
}
.service picture {
  overflow: hidden;
}
@media (hover: hover) and (pointer: fine) {
  .service {
    transition: transform 0.25s ease-out, border-color 0.25s, box-shadow 0.25s;
  }
  .service:hover {
    transform: translateY(-3px);
    border-color: var(--gold-2);
    box-shadow: 0 10px 26px rgba(47, 43, 40, 0.07);
  }
  .service:hover img {
    transform: scale(1.045);
  }
}

/* key facts: four large, light figures between Services and How we work */
.facts {
  background: var(--paper);
  border-top: 1px solid var(--gold-line);
}
.facts__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 auto;
}
.facts__grid > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* a label that wraps does not lift its figure out of line */
  gap: 0.35rem;
  padding: 2.25rem 1.5rem 2.1rem;
}
.facts__grid > div + div {
  border-left: 1px solid var(--gold-line);
}
.facts__grid > div:first-child {
  padding-left: 0;
}
.facts dt {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}
.facts dd {
  margin: 0;
  font-size: clamp(2.4rem, 3.6vw, 3.25rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--ink);
}

/* How we work: the graphite chapter */
.section--dark {
  background: var(--graphite);
  color: var(--ivory);
}
.section--dark .kicker {
  color: #c7a36b;
}
.section--dark .steps li::before {
  background: rgba(199, 163, 107, 0.42);
}
.section--dark .steps li:first-child::before {
  background: var(--red);
}
.section--dark .steps__num {
  font-size: clamp(3.5rem, 5.6vw, 5.25rem);
  font-weight: 200;
  line-height: 1;
  color: #c7a36b;
}
.section--dark .steps p {
  color: #e0d9d0;
}
.service__body {
  position: relative;
  padding: 1.25rem 1.25rem 1.5rem;
  background: var(--paper);
}
.service picture {
  position: relative;
  display: block;
}
.service picture::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 25%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.12));
  pointer-events: none;
}
/* The icon sits in a paper square across the photograph's bottom edge, half on each side. */
.service__icon {
  position: relative;
  z-index: 1;
  display: flex; /* a block, so the negative margin can lift it across the photograph's edge */
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: -2.625rem 0 0.9rem; /* the body's 1.25rem padding plus half the square */
  background: var(--paper);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
}
.service__body .icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--gold);
}
/* The traced spray gun reads smaller than the line icons at the same size. */
.service__body .icon:has(use[href$="i-spraygun"]) {
  transform: scale(1.14);
}
.service h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}
.service p {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.5;
}

/* steps */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.steps li {
  position: relative;
  padding-top: 1.5rem;
}
/* The rule above each step is drawn, not a border, so it can draw itself in. */
.steps li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold-line);
  transform-origin: left;
}
.steps li:first-child::before {
  background: var(--red);
}
.steps__num {
  display: block;
  margin-bottom: 1rem;
  font-size: 2.25rem;
  font-weight: 300;
  color: var(--gold-2);
  letter-spacing: 0.04em;
}
.steps h3 {
  font-size: 1.35rem;
  margin-bottom: 0.6rem;
}
.steps p {
  color: var(--ink-2);
  font-size: 1.05rem;
}

/* workshop: a full-bleed photograph, the heading on the floor of it, the detail below */
.workshop__band {
  position: relative;
  height: clamp(560px, 72vh, 760px);
  overflow: hidden;
  background: var(--graphite);
}
.workshop__photo img {
  position: absolute;
  inset: -40px 0;
  width: 100%;
  height: calc(100% + 80px);
  max-width: none;
  object-fit: cover;
  object-position: center 30%;
  will-change: transform;
}
/* The floor of the photograph is plain; the dark rises from it so the heading reads. */
.workshop__band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 16, 15, 0.08) 0%, rgba(18, 16, 15, 0) 22%, rgba(18, 16, 15, 0.5) 46%, rgba(18, 16, 15, 0.84) 68%, rgba(18, 16, 15, 0.92) 100%);
}
.workshop__title {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: clamp(2.5rem, 6vw, 4.5rem);
  color: var(--ivory);
}
.workshop__title .kicker {
  color: #d9bd8c;
}
.workshop__title .kicker,
.workshop__title h2 {
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}
.workshop__title h2 {
  max-width: 15em;
  font-size: clamp(2.3rem, 4.2vw, 3.6rem);
  line-height: 1.08;
}
.workshop__detail {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
}
.workshop__detail > p {
  font-size: 1.2rem;
  color: var(--ink-2);
}
.ticks {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 500;
}
.ticks li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.ticks .icon {
  color: var(--gold);
}

/* Our work: an editorial chapter */
.section__head--split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: end;
  max-width: none;
}
.section__head--split .section__intro {
  margin-top: 0;
}

/* before and after: two large comparisons with a draggable divider */
.proof {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.compare {
  --pos: 50%;
  position: relative;
  aspect-ratio: 6 / 5;
  overflow: hidden;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  background: var(--ivory-2);
  cursor: ew-resize;
  touch-action: pan-y; /* a vertical swipe on a phone still scrolls the page */
  user-select: none;
  -webkit-user-select: none;
}
.compare img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.compare::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.24));
  pointer-events: none;
}
.compare__line,
.proof__tag {
  z-index: 1;
}
.compare__range {
  z-index: 2;
}
.compare__after {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 var(--pos));
}
.compare__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: var(--gold-2);
  pointer-events: none;
}
.compare__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 2.75rem;
  height: 2.75rem;
  transform: translate(-50%, -50%);
  background: var(--graphite);
  color: var(--ivory);
  border: 1px solid var(--gold-2);
  border-radius: var(--radius);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.compare__handle .icon {
  width: 0.95rem;
  height: 0.95rem;
}
.compare__handle .icon:first-child {
  transform: scaleX(-1);
}
/* The real control: a range input over the picture, invisible, so the keyboard and screen
   readers work natively. */
.compare__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  pointer-events: none;
}
.compare:has(.compare__range:focus-visible) .compare__handle {
  outline: 3px solid var(--gold-2);
  outline-offset: 3px;
}
.proof__tag {
  position: absolute;
  bottom: 0.85rem;
  padding: 0.35rem 0.65rem 0.25rem;
  background: rgba(31, 28, 26, 0.84);
  color: var(--ivory);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 2px;
  pointer-events: none;
}
.proof__tag--before {
  left: 0.85rem;
}
.proof__tag--after {
  right: 0.85rem;
}
.proof__item h3 {
  margin-top: 1.25rem;
  font-size: 1.35rem;
}

/* the people who do it */
.people {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-top: clamp(3rem, 6vw, 4.5rem);
  border-top: 1px solid var(--gold-line);
}
.people__photo img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--gold-line);
}
.people__text h3 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
}
.people__text p:last-child {
  max-width: 30rem;
  margin-top: 1rem;
  color: var(--ink-2);
}
.proof__item p {
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.5;
}

/* band */
.band {
  background: var(--graphite);
  color: var(--ivory);
  padding: clamp(3rem, 6vw, 4.5rem) 0;
}
.band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.band h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
}
.band .btn {
  flex: none;
  white-space: nowrap;
}
.band p {
  margin-top: 0.75rem;
  color: #d9cfc2;
  font-size: 1.15rem;
}

/* visit */
.visit {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.contact {
  display: grid;
  gap: 1.5rem;
  margin: 0;
}
.contact div {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--gold-line);
}
.contact dt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.contact dt .icon {
  width: 1.2rem;
  height: 1.2rem;
  color: var(--gold);
}
.contact dd {
  margin: 0;
  font-size: 1.1rem;
}
.contact a {
  display: inline-block;
  padding: 0.35rem 0;
  font-weight: 600;
  text-decoration-color: var(--gold-2);
  text-underline-offset: 0.2em;
}

.form {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--paper);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
}
.form h3 {
  font-size: 1.6rem;
}
.form__note {
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 1rem;
}
.form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.35rem 1.25rem;
  margin-top: 1.75rem;
}
.field--wide {
  grid-column: 1 / -1;
}
.field label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.98rem;
  font-weight: 600;
}
.optional {
  font-weight: 400;
  color: var(--muted);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.85rem 0.6rem;
  border: 1px solid #b9a98f;
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font: 400 1.05rem/1.4 var(--font);
}
.field textarea {
  resize: vertical;
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--gold-2);
  outline-offset: 1px;
  border-color: var(--gold);
}
.field [aria-invalid="true"] {
  border-color: var(--red);
}
.field__hint {
  margin-top: 0.3rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.field__error {
  margin-top: 0.35rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #a51d23;
}
.form__submit {
  width: 100%;
  margin-top: 1.5rem;
}
.form__next {
  margin-top: 0.85rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
}
.form__privacy {
  margin-top: 0.5rem;
  font-size: 0.92rem;
  color: var(--muted);
  text-align: center;
}
.form__done {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid #226a4f;
  background: #eef4ef;
  font-size: 1rem;
}
.form__done:focus {
  outline: none;
}

.map {
  margin-top: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ivory-2);
}
.map {
  position: relative;
  background: #f0ebe2;
}
/* Shown until the map paints over it, and if the map never loads. */
.map__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-size: 1rem;
}
.map__placeholder .icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--gold);
}
.map__placeholder span:first-of-type {
  font-weight: 600;
  color: var(--ink-2);
}
.map__loading {
  font-size: 0.9rem;
}
.map iframe {
  position: relative;
  display: block;
  width: 100%;
  height: 390px;
  border: 0;
  filter: grayscale(0.35) sepia(0.12);
}
#visit {
  padding-bottom: clamp(3rem, 5.5vw, 5rem);
}
.map__link {
  margin-top: 0.75rem;
  font-size: 1rem;
  color: var(--muted);
}
.map__link a {
  display: inline-block;
  padding: 0.35rem 0;
  font-weight: 600;
  color: var(--ink);
  text-decoration-color: var(--gold-2);
  text-underline-offset: 0.2em;
}

/* footer */
.footer {
  background: var(--graphite);
  color: #d9cfc2;
  padding: clamp(3rem, 6vw, 4.5rem) 0 1.5rem;
  font-size: 1rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 2.5rem;
}
.footer__brand img {
  width: 130px;
}
.footer__arabic {
  margin-top: 1rem;
  text-align: left;
  font-family: "Segoe UI", Tahoma, sans-serif;
  font-size: 1.15rem;
  color: var(--ivory);
}
.footer__brand p + p {
  margin-top: 0.35rem;
}
.footer__title {
  margin-bottom: 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-2);
}
.footer p + p {
  margin-top: 0.6rem;
}
.footer a {
  display: inline-block;
  padding: 0.3rem 0;
  color: var(--ivory);
  text-decoration-color: rgba(248, 241, 232, 0.4);
  text-underline-offset: 0.2em;
}
.footer__legal {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(248, 241, 232, 0.15);
  font-size: 0.92rem;
  color: #b3a898;
}

/* floating WhatsApp button, phones only */
.wa-float {
  display: none;
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  width: 3.5rem;
  height: 3.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--ivory);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.wa-float .icon {
  width: 1.6rem;
  height: 1.6rem;
}

/* ------------------------------------------------------------ motion
   All of it sits under .motion, which the head sets only when JavaScript runs and the visitor
   has not asked for reduced motion (nor ?still, which the review captures use). Without it,
   everything is simply there. Everything plays once. */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* reveal on scroll; --delay staggers a row, set by the script, never above 300 ms */
.motion .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
.motion .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* the hero arrives: words rise, the coupe comes in from the right */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes arrive {
  from {
    opacity: 0;
    transform: translateX(12px) scale(1.02);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.motion .hero .eyebrow,
.motion .hero h1,
.motion .hero .lede,
.motion .hero .actions,
.motion .promise li {
  animation: rise 0.6s var(--ease-out) both;
}
.motion .hero h1 {
  animation-delay: 0.08s;
}
.motion .hero .lede {
  animation-delay: 0.2s;
}
.motion .hero .actions {
  animation-delay: 0.3s;
}
.motion .promise li:nth-child(1) {
  animation-delay: 0.5s;
}
.motion .promise li:nth-child(2) {
  animation-delay: 0.6s;
}
.motion .promise li:nth-child(3) {
  animation-delay: 0.7s;
}
.motion .hero__car {
  animation: arrive 0.85s var(--ease-out) 0.1s both;
}

/* the red rule before each kicker draws as its section arrives */
.motion .kicker::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out) 0.15s;
}
.motion .is-in .kicker::before,
.motion .kicker.is-in::before {
  transform: scaleX(1);
}

/* How we work: each step's rule draws, left to right, one after another */
.motion .steps li::before {
  transform: scaleX(0);
  transition: transform 0.35s var(--ease-out);
  transition-delay: calc(var(--delay, 0ms) + 120ms);
}
.motion .steps li.is-in::before {
  transform: scaleX(1);
}
.motion .steps__num {
  opacity: 0.45;
  transition: opacity 0.3s ease;
  transition-delay: calc(var(--delay, 0ms) + 300ms);
}
.motion .steps li.is-in .steps__num {
  opacity: 1;
}

/* buttons press */
.motion .btn:active {
  transform: scale(0.99);
  transition-duration: 0.1s;
}

/* the workshop photograph drifts a little against the page (desktop only; set by the script) */
.motion .workshop__photo img {
  transform: translate3d(0, var(--drift, 0px), 0);
}

@media (max-width: 640px) {
  .motion .reveal {
    transform: translateY(8px);
    transition-duration: 0.4s;
  }
  @keyframes arrive-up {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  .motion .hero__car {
    animation-name: arrive-up;
  }
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1100px) {
  .services {
    grid-template-columns: repeat(3, 1fr);
  }
  .nav ul {
    gap: 1.4rem;
  }
}

@media (max-width: 960px) {
  .header__bar {
    gap: 1rem;
  }
  .menu-toggle {
    display: inline-flex;
  }
  .header__call span {
    display: none;
  }
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    background: var(--paper);
    border-bottom: 1px solid var(--gold-line);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
  }
  .nav.is-open {
    display: block;
  }
  .nav ul {
    flex-direction: column;
    gap: 0;
    width: min(100% - 2 * var(--gutter), var(--wrap));
    margin: 0 auto;
    padding: 0.5rem 0 1rem;
  }
  .nav a {
    display: block;
    padding: 0.9rem 0;
    font-size: 1.15rem;
    border-bottom: 1px solid var(--gold-line);
  }
  .nav a::after {
    display: none;
  }
  .hero__grid,
  .visit,
  .workshop__detail,
  .people,
  .section__head--split {
    grid-template-columns: minmax(0, 1fr);
  }
  .section__head--split .section__intro {
    max-width: 40rem;
  }
  .workshop__detail {
    gap: 1.75rem;
  }
  .hero__car {
    margin: 0 calc(-1 * var(--gutter));
  }
  .hero__car img {
    -webkit-mask-image: none;
    mask-image: none;
    transform: scale(1.05);
    transform-origin: 50% 55%;
  }
  .steps {
    grid-template-columns: 1fr 1fr;
  }
  .band__inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 360px) {
  .services {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 1.0625rem;
  }
  .header__cta {
    display: none;
  }
  .header__logo img {
    width: 84px;
  }
  .header__bar {
    min-height: 4.5rem;
  }
  .promise {
    grid-template-columns: 1fr;
  }
  .promise li + li {
    border-left: 0;
    border-top: 1px solid var(--gold-line);
  }
  .promise li {
    padding: 1rem 0.25rem;
  }
  .services {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  .service:last-child {
    grid-column: 1 / -1;
  }
  .service img {
    aspect-ratio: 1;
  }
  .service:last-child img {
    aspect-ratio: 16 / 9;
  }
  .workshop__detail {
    padding: 2.25rem 0 2.75rem;
  }
  #work {
    padding-top: 2.75rem;
  }
  .people {
    margin-top: 2.5rem;
    padding-top: 2.25rem;
  }
  .service__body {
    padding: 1rem;
  }
  .service h3 {
    font-size: 1.125rem;
  }
  .service p {
    font-size: 1rem;
    line-height: 1.45;
  }
  .service__icon {
    width: 2.5rem;
    height: 2.5rem;
    margin: -2.25rem 0 0.75rem; /* 1rem padding plus half the square */
  }
  .service__body .icon {
    width: 1.35rem;
    height: 1.35rem;
  }
  .proof {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.25rem;
  }
  .compare {
    aspect-ratio: 4 / 3;
  }
  .compare__handle {
    width: 2.5rem;
    height: 2.5rem;
  }
  .hero__car img {
    aspect-ratio: 900 / 507;
  }
  .facts__grid {
    grid-template-columns: 1fr 1fr;
  }
  .facts__grid > div {
    padding: 1.5rem 0 1.4rem 1.25rem;
  }
  .facts__grid > div:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
  .facts__grid > div:nth-child(n + 3) {
    border-top: 1px solid var(--gold-line);
  }
  .facts dd {
    font-size: min(2.15rem, 9vw); /* already display size; at 200% text it must still fit its column */
  }
  .facts dt {
    overflow-wrap: anywhere;
  }
  .band .btn {
    white-space: normal;
  }
  .workshop__band {
    height: 380px;
  }
  .workshop__photo img {
    object-position: 30% 30%;
  }
  .workshop__title h2 {
    font-size: 1.85rem;
  }
  /* The band is short on a phone, so the words reach higher up the photograph: darken sooner. */
  .workshop__band::after {
    background: linear-gradient(180deg, rgba(18, 16, 15, 0) 8%, rgba(18, 16, 15, 0.62) 36%, rgba(18, 16, 15, 0.88) 54%, rgba(18, 16, 15, 0.93) 100%);
  }
  .steps {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .form__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .actions .btn {
    flex: 1 1 100%;
  }
  .footer__grid {
    grid-template-columns: 1fr;
  }
  .wa-float {
    display: inline-flex;
  }
  .map iframe {
    height: 260px;
  }
}