/* ==========================================================================
   Rik's Towing — site styles
   Mobile-first. Brand colours only: Rik's Green, Dark, White, Black.
   ========================================================================== */

/* --- self-hosted brand-family font (Archivo — same superfamily as the
       Archivo Black used in the logo). One variable file, 400–800. ------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../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';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../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;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  /* brand */
  --green:      #38B544;   /* Rik's Green — exact brand value */
  --green-hov:  #2C9A37;   /* hover/active only */
  --green-text: #1F7A2A;   /* accessible green for text/links on white */
  --dark:       #141518;
  --black:      #000000;
  --white:      #FFFFFF;

  /* neutrals derived from the brand dark */
  --off:        #F5F6F7;
  --off-2:      #ECEEF0;
  --ink:        #141518;
  --muted:      #55595F;
  --line:       #E1E4E7;

  /* on dark */
  --on-dark-muted: #A9AEB6;
  --line-dark:     rgba(255, 255, 255, .14);

  --container: 1240px;
  --container-wide: 1400px;

  --radius: 4px;
  --radius-lg: 8px;

  --header-h: 62px;
  --bar-h: 78px;   /* measured height of the sticky bar + breathing room */

  --t: 200ms cubic-bezier(.2, .6, .3, 1);

  --shadow-sm: 0 1px 2px rgba(20, 21, 24, .06), 0 2px 8px rgba(20, 21, 24, .05);
  --shadow-md: 0 2px 6px rgba(20, 21, 24, .07), 0 12px 28px rgba(20, 21, 24, .10);
}

@media (min-width: 900px) {
  :root { --header-h: 76px; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* room for the sticky mobile contact bar */
@media (max-width: 899px) {
  body { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)); }
}

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

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 800;
  text-wrap: balance;
}

h1 { font-size: clamp(2.05rem, 7.4vw, 3.6rem); }
h2 { font-size: clamp(1.65rem, 4.6vw, 2.6rem); }
h3 { font-size: 1.14rem; letter-spacing: -0.01em; line-height: 1.25; }

p { margin: 0; text-wrap: pretty; }

a { color: var(--green-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

button { font: inherit; color: inherit; }

ul { margin: 0; padding: 0; list-style: none; }

/* visible, high-contrast focus everywhere */
:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
  border-radius: 2px;
}
.on-dark :focus-visible,
.footer :focus-visible,
.cta-band :focus-visible { outline-color: var(--white); }

::selection { background: var(--green); color: var(--white); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px; top: -100px;
  z-index: 200;
  background: var(--dark);
  color: var(--white);
  padding: 12px 18px;
  font-weight: 700;
  border-radius: var(--radius);
  transition: top var(--t);
}
.skip-link:focus { top: 12px; color: var(--white); }

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}
@media (min-width: 700px) { .container { padding-inline: 32px; } }

.section { padding-block: clamp(3.25rem, 8vw, 5.75rem); }
.section--tight { padding-block: clamp(2.5rem, 6vw, 4rem); }
.section--alt { background: var(--off); }
.section--dark { background: var(--dark); color: var(--white); }
.section--dark h2, .section--dark h3 { color: var(--white); }

/* section heading block */
.sec-head { max-width: 62ch; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.sec-head p { color: var(--muted); margin-top: .7rem; font-size: 1.03rem; }
.section--dark .sec-head p { color: var(--on-dark-muted); }

/* thin green rule — a restrained brand accent */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--green-text);
  margin-bottom: .85rem;
}
.eyebrow::before {
  content: '';
  width: 26px; height: 3px;
  background: var(--green);
  flex: none;
}
.section--dark .eyebrow { color: var(--green); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 14px 24px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  transition: background-color var(--t), border-color var(--t), color var(--t), transform var(--t);
}
.btn:active { transform: translateY(1px); }
.btn svg { flex: none; }

/* Primary — Rik's Green fill with a white label. This is the brand's own
   pairing: the logo puts white TOWING lettering on the same green bar.
   The border is one step darker (the brand file's hover green) purely so the
   button's EDGE clears WCAG 1.4.11 (3:1) against a white page — at 1.36:1
   against the fill it reads as a rim, not an outline. */
.btn--primary {
  background: var(--green);
  border-color: var(--green-hov);
  color: var(--white);
}
.btn--primary:hover { background: var(--green-hov); border-color: var(--green-hov); color: var(--white); }

/* secondary — dark */
.btn--dark {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--white);
}
.btn--dark:hover { background: #000; border-color: #000; color: var(--white); }

/* secondary — outlined, for use on light backgrounds */
.btn--outline {
  background: transparent;
  border-color: var(--dark);
  color: var(--ink);
}
.btn--outline:hover { background: var(--dark); color: var(--white); }

/* outlined, for use on dark backgrounds */
.btn--outline-light {
  background: transparent;
  border-color: rgba(255, 255, 255, .55);
  color: var(--white);
}
.btn--outline-light:hover { background: var(--white); border-color: var(--white); color: var(--dark); }

.btn--lg { min-height: 60px; font-size: 1.15rem; padding: 16px 30px; }
.btn--block { display: flex; width: 100%; }

@media (min-width: 700px) {
  .btn--auto { width: auto; }
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--t);
}
.header.is-stuck { box-shadow: var(--shadow-sm); }
/* the thin green line under the header */
.header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms cubic-bezier(.2, .6, .3, 1);
}
.header.is-stuck::after { transform: scaleX(1); }

.header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand { display: inline-flex; align-items: center; flex: none; margin-right: auto; min-height: 44px; }
.brand img { height: 34px; width: auto; }
@media (min-width: 900px) { .brand img { height: 42px; } }

.nav { display: none; }
@media (min-width: 1000px) {
  .nav { display: flex; align-items: center; gap: 4px; }
  .nav a {
    position: relative;
    display: block;
    padding: 10px 14px;
    font-size: .98rem;
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
    border-radius: var(--radius);
    transition: color var(--t);
  }
  .nav a::after {
    content: '';
    position: absolute;
    left: 14px; right: 14px; bottom: 4px;
    height: 2px;
    background: var(--green);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--t);
  }
  .nav a:hover { color: var(--green-text); }
  .nav a:hover::after,
  .nav a[aria-current='true']::after { transform: scaleX(1); }
}

.header__actions { display: flex; align-items: center; gap: 8px; flex: none; }

/* language toggle — segmented control */
.lang {
  display: inline-flex;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  flex: none;
}
.lang button {
  appearance: none;
  border: 0;
  background: var(--white);
  padding: 8px 10px;
  min-height: 40px;
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .04em;
  cursor: pointer;
  color: var(--muted);
  transition: background-color var(--t), color var(--t);
}
.lang button + button { border-left: 1.5px solid var(--line); }
.lang button:hover { color: var(--ink); background: var(--off); }
.lang button[aria-pressed='true'] { background: var(--dark); color: var(--white); }
@media (min-width: 420px) { .lang button { padding: 8px 13px; } }

/* header call button: icon-only on the smallest screens */
.header .btn--call { min-height: 44px; padding: 10px 14px; font-size: .95rem; }
.header .btn--call .label { display: none; }
@media (min-width: 560px) {
  .header .btn--call .label { display: inline; }
  .header .btn--call { padding: 10px 18px; }
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  cursor: pointer;
  flex: none;
}
.menu-toggle:hover { background: var(--off); }
@media (min-width: 1000px) { .menu-toggle { display: none; } }
.menu-toggle span {
  position: relative;
  display: block;
  width: 20px; height: 2px;
  background: var(--ink);
  transition: transform var(--t), background-color var(--t);
}
.menu-toggle span::before,
.menu-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px; height: 2px;
  background: var(--ink);
  transition: transform var(--t), top var(--t);
}
.menu-toggle span::before { top: -6px; }
.menu-toggle span::after { top: 6px; }
.menu-toggle[aria-expanded='true'] span { background: transparent; }
.menu-toggle[aria-expanded='true'] span::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded='true'] span::after { top: 0; transform: rotate(-45deg); }

/* mobile drawer */
.drawer {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 99;
  background: var(--white);
  border-top: 2px solid var(--green);
  padding: 8px 20px 28px;
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--t), transform var(--t), visibility var(--t);
}
.drawer.is-open { visibility: visible; opacity: 1; transform: none; }
@media (min-width: 1000px) { .drawer { display: none; } }
.drawer a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 4px;
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.drawer a:hover { color: var(--green-text); }
.drawer a svg { color: var(--green); opacity: .75; }
.drawer .btn { margin-top: 22px; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--dark);
  color: var(--white);
  overflow: hidden;
  padding-block: clamp(2.25rem, 6vw, 4.5rem);
}
/* very subtle slashed-R watermark */
.hero__mark {
  position: absolute;
  right: -3%;
  top: 50%;
  transform: translateY(-50%);
  width: min(52vw, 460px);
  opacity: .045;
  pointer-events: none;
  user-select: none;
}
.hero__grid { position: relative; display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
@media (min-width: 940px) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; }
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px 8px 12px;
  border: 1.5px solid rgba(56, 181, 68, .5);
  border-radius: 999px;
  background: rgba(56, 181, 68, .12);
  font-size: .875rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--white);
}
.badge__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--green);
  flex: none;
  box-shadow: 0 0 0 0 rgba(56, 181, 68, .7);
  animation: pulse 2.6s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(56, 181, 68, .65); }
  70%  { box-shadow: 0 0 0 9px rgba(56, 181, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(56, 181, 68, 0); }
}

.hero h1 { margin-top: 1.1rem; }
.hero__text {
  margin-top: 1.1rem;
  max-width: 44ch;
  font-size: 1.075rem;
  color: #C9CDD3;
  line-height: 1.6;
}
.hero__actions {
  margin-top: 1.9rem;
  display: grid;
  gap: 12px;
}
@media (min-width: 560px) {
  .hero__actions { grid-template-columns: auto auto; justify-content: start; }
}

.hero__phone {
  margin-top: 1.35rem;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-size: .9rem;
  color: var(--on-dark-muted);
}
.hero__phone a {
  color: var(--white);
  font-weight: 800;
  font-size: 1.32rem;
  letter-spacing: .01em;
  text-decoration: none;
  border-bottom: 2px solid var(--green);
  padding-bottom: 1px;
}
.hero__phone a:hover { color: var(--green); }

/* hero photo card */
.hero__figure { position: relative; margin: 0; }
.hero__figure img {
  width: 100%;
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 42%;
  background: #22242A;
}
@media (min-width: 940px) {
  .hero__figure { max-width: 540px; margin-left: auto; }
  .hero__figure img { aspect-ratio: 4 / 5; object-position: 50% 50%; }
}
.hero__figure figcaption {
  position: absolute;
  left: 12px; bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(20, 21, 24, .78);
  backdrop-filter: blur(4px);
  color: var(--white);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hero__figure figcaption::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
}

/* --------------------------------------------------------------------------
   Quick services grid
   -------------------------------------------------------------------------- */
.svc-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 700px)  { .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1060px) { .svc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.svc-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 100%;
  padding: 18px 16px 20px;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.svc-tile:hover {
  border-color: var(--green);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.svc-tile__icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--radius);
  background: rgba(56, 181, 68, .1);
  color: var(--green-text);
  flex: none;
}
.svc-tile:hover .svc-tile__icon { background: var(--green); color: var(--white); }
.svc-tile__icon svg { width: 25px; height: 25px; }
.svc-tile h3 { font-size: 1.02rem; }
.svc-tile p {
  font-size: .875rem;
  line-height: 1.45;
  color: var(--muted);
  margin: 0;
}
.svc-tile__go {
  margin-top: auto;
  padding-top: 10px;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--green-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.svc-tile__go svg { width: 13px; height: 13px; transition: transform var(--t); }
.svc-tile:hover .svc-tile__go svg { transform: translateX(3px); }

.svc-more { margin-top: 22px; display: flex; }

/* --------------------------------------------------------------------------
   Detailed services
   -------------------------------------------------------------------------- */
.svc-list { display: grid; gap: 16px; }
@media (min-width: 780px)  { .svc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1120px) { .svc-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.svc-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t);
}
.svc-card:hover { border-color: #C9CDD2; box-shadow: var(--shadow-sm); }
/* 4:3, not 16:9 — a wider crop was slicing the top off trailers and campers.
   Assets are pre-cropped to 4:3 around each photo's focal point, so object-fit
   has nothing left to cut. */
.svc-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--off-2);
  border-bottom: 1.5px solid var(--line);
  overflow: hidden;
}
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; }
.svc-card:hover .svc-card__media img { transform: scale(1.02); }
.svc-card__media img { transition: transform 320ms cubic-bezier(.2, .6, .3, 1); }
.svc-card__body { display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 22px; flex: 1; }
.svc-card__head { display: flex; align-items: center; gap: 12px; }
.svc-card__head .svc-tile__icon { width: 40px; height: 40px; }
.svc-card__head .svc-tile__icon svg { width: 23px; height: 23px; }
.svc-card p { font-size: .96rem; line-height: 1.6; color: var(--muted); }
.svc-card .btn { margin-top: auto; }
.svc-card__actions { display: grid; gap: 8px; margin-top: auto; padding-top: 6px; }
@media (min-width: 420px) { .svc-card__actions { grid-template-columns: 1fr auto; } }
.svc-card__actions .btn { min-height: 48px; font-size: .96rem; padding: 12px 18px; }

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */
/* filter chips */
.gal-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(1.1rem, 2.5vw, 1.6rem);
}
.gal-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 17px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--muted);
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--t), border-color var(--t), color var(--t);
}
.gal-filter:hover { border-color: var(--green); color: var(--ink); }
.gal-filter[aria-pressed='true'] { background: var(--dark); border-color: var(--dark); color: var(--white); }
.gal-filter .count {
  font-weight: 600;
  font-size: .8rem;
  opacity: .65;
  font-variant-numeric: tabular-nums;
}

/* ---- layout -------------------------------------------------------------
   Phone / tablet: real masonry via multi-column, so every photo keeps its own
   proportions and nothing is squeezed. Featured photos break out full width.
   Desktop: a 12-column editorial grid. Each row is composed so the items in
   it share the same height — see _photos/catalog.py for the spans.
   ------------------------------------------------------------------------ */
.gallery { columns: 2; column-gap: 10px; }
@media (min-width: 640px) { .gallery { columns: 3; column-gap: 14px; } }

.gallery__item {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--off-2);
  cursor: zoom-in;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
@media (min-width: 640px) { .gallery__item { margin-bottom: 14px; } }
.gallery__item--featured { column-span: all; }

@media (min-width: 1024px) {
  .gallery {
    columns: auto;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px;
    grid-auto-flow: row dense;
  }
  .gallery__item { margin: 0; grid-column: span var(--span, 4); }
  .gallery__item--featured { column-span: auto; }
}

.gallery__item img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--ar, 4 / 5);
  object-fit: cover;
  transition: transform 320ms cubic-bezier(.2, .6, .3, 1);
}
.gallery__item:hover img { transform: scale(1.025); }

.gallery__item::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20, 21, 24, .8) 0%, rgba(20, 21, 24, .12) 44%, transparent 70%);
  opacity: .95;
  transition: opacity var(--t);
}
.gallery__item:hover::after { opacity: 1; }

.gallery__cap {
  position: absolute;
  left: 12px; right: 12px; bottom: 11px;
  z-index: 1;
  color: var(--white);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.gallery__cap::before {
  content: '';
  display: block;
  width: 20px; height: 2px;
  background: var(--green);
  margin-bottom: 7px;
}

/* small "view photo" hint — desktop pointers only */
.gallery__view {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 1;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(20, 21, 24, .78);
  backdrop-filter: blur(4px);
  color: var(--white);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--t), transform var(--t);
}
@media (hover: hover) and (min-width: 1024px) { .gallery__view { display: inline-flex; } }
.gallery__item:hover .gallery__view,
.gallery__item:focus-visible .gallery__view { opacity: 1; transform: none; }

.gallery__item[hidden] { display: none; }

.gallery-cta { margin-top: 24px; display: flex; }

/* lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(8, 9, 11, .95);
}
.lightbox.is-open { display: flex; }
.lightbox[hidden] { display: none !important; }
.lightbox__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}
.lightbox__img {
  max-width: min(100%, 940px);
  max-height: calc(100dvh - 190px);
  width: auto;
  border-radius: var(--radius-lg);
  object-fit: contain;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox__cap {
  position: absolute;
  left: 16px; right: 16px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  color: var(--white);
  font-size: .95rem;
  line-height: 1.45;
}
.lightbox__count { display: block; color: var(--on-dark-muted); font-size: .8rem; margin-top: 5px; }
.lightbox__close {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 12px 20px;
  border: 2px solid var(--white);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--dark);
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
}
.lightbox__close:hover { background: var(--green); border-color: var(--green); color: var(--white); }
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  background: rgba(20, 21, 24, .6);
  color: var(--white);
  cursor: pointer;
}
.lightbox__nav:hover { background: var(--green); border-color: var(--green); }
.lightbox__nav--prev { left: 10px; }
.lightbox__nav--next { right: 10px; }
@media (min-width: 720px) {
  .lightbox__nav--prev { left: 24px; }
  .lightbox__nav--next { right: 24px; }
}

/* --------------------------------------------------------------------------
   Why Rik's
   -------------------------------------------------------------------------- */
.why-grid { display: grid; gap: 4px 28px; }
@media (min-width: 640px)  { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .why-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.why {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 0 24px;
  border-top: 2px solid var(--green);
}
@media (min-width: 640px) { .why { padding-top: 20px; } }
.why__icon { color: var(--green); }
.why__icon svg { width: 26px; height: 26px; }
.why h3 { font-size: 1.06rem; }
.why p { font-size: .94rem; color: var(--muted); line-height: 1.55; }
.section--dark .why p { color: var(--on-dark-muted); }

/* --------------------------------------------------------------------------
   How it works
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: 22px; counter-reset: step; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }

.step { position: relative; display: flex; gap: 16px; align-items: flex-start; }
@media (min-width: 800px) { .step { flex-direction: column; gap: 14px; } }
.step__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  font-size: 1.22rem;
  font-weight: 800;
  line-height: 1;
}
.step h3 { font-size: 1.12rem; margin-bottom: 5px; }
.step p { font-size: .96rem; color: var(--muted); }
.section--dark .step p { color: var(--on-dark-muted); }

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */
.about { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) { .about { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }
.about__figure { margin: 0; }
.about__figure img {
  width: 100%;
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--off-2);
}
@media (max-width: 899px) { .about__figure img { aspect-ratio: 3 / 2; object-position: 50% 40%; } }
.about__body p { color: var(--muted); font-size: 1.03rem; }
.about__body p + p { margin-top: 1rem; }
.about__body .btn { margin-top: 1.75rem; }

/* --------------------------------------------------------------------------
   Main CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  background: var(--dark);
  color: var(--white);
  overflow: hidden;
  text-align: center;
}
/* real Rik's Towing photo behind a controlled scrim — dark enough that every
   piece of text over it stays above 4.5:1 */
.cta-band__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
  opacity: .45;
}
.cta-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(20, 21, 24, .55) 0%, rgba(20, 21, 24, .82) 70%),
    linear-gradient(to bottom, rgba(20, 21, 24, .45), rgba(20, 21, 24, .6));
}
.cta-band__mark {
  position: absolute;
  z-index: 1;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(80vw, 560px);
  opacity: .04;
  pointer-events: none;
}
.cta-band__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1.15rem; }
.cta-band__logo { width: min(74vw, 300px); margin-bottom: .35rem; }
.cta-band p { color: #C9CDD3; max-width: 46ch; font-size: 1.06rem; }
.cta-band__actions { margin-top: .85rem; display: grid; gap: 12px; width: 100%; max-width: 460px; }
@media (min-width: 620px) { .cta-band__actions { grid-template-columns: auto auto; justify-content: center; max-width: none; } }

/* --------------------------------------------------------------------------
   Request form
   -------------------------------------------------------------------------- */
.form-wrap { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }
@media (min-width: 1000px) { .form-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); } }

.form {
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(18px, 3.5vw, 30px);
}
.form__grid { display: grid; gap: 16px; }
@media (min-width: 640px) {
  .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--full { grid-column: 1 / -1; }
}

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label {
  font-size: .92rem;
  font-weight: 700;
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}
.field .opt { font-weight: 500; color: var(--muted); font-size: .82rem; }
.field .help { font-size: .82rem; color: var(--muted); line-height: 1.4; }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 14px;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid #CFD3D8;
  border-radius: var(--radius);
  transition: border-color var(--t), box-shadow var(--t);
}
.field textarea { min-height: 104px; resize: vertical; line-height: 1.5; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355595F' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
  padding-right: 42px;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: #A9AEB6; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(56, 181, 68, .22);
}
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-color: #B4232C; }
.field.is-invalid input:focus,
.field.is-invalid select:focus { box-shadow: 0 0 0 3px rgba(180, 35, 44, .18); }

/* error text — icon + text, never colour alone */
.field__error {
  display: none;
  align-items: flex-start;
  gap: 7px;
  font-size: .87rem;
  font-weight: 600;
  line-height: 1.4;
  color: #A81E27;
}
.field.is-invalid .field__error { display: flex; }
.field__error svg { flex: none; margin-top: 2px; width: 15px; height: 15px; }

.field--hidden { display: none; }

/* location button */
.loc-row { display: flex; gap: 8px; align-items: stretch; }
.loc-row input { flex: 1; min-width: 0; }
.btn-loc {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  min-height: 52px;
  background: var(--off);
  border: 1.5px solid #CFD3D8;
  border-radius: var(--radius);
  font-size: .85rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--t), border-color var(--t), color var(--t);
}
.btn-loc:hover { background: var(--dark); border-color: var(--dark); color: var(--white); }
.btn-loc svg { width: 17px; height: 17px; color: var(--green-text); flex: none; }
.btn-loc:hover svg { color: var(--green); }
.btn-loc .label { display: none; }
@media (min-width: 520px) { .btn-loc .label { display: inline; } }
.loc-status { font-size: .85rem; color: var(--muted); line-height: 1.45; }
.loc-status.is-ok { color: var(--green-text); font-weight: 600; }

/* form summary error */
.form__summary {
  display: none;
  gap: 9px;
  align-items: flex-start;
  padding: 13px 15px;
  margin-bottom: 18px;
  background: #FCEFEF;
  border: 1.5px solid #E8B9BC;
  border-radius: var(--radius);
  color: #8E1A22;
  font-weight: 600;
  font-size: .93rem;
  line-height: 1.45;
}
.form__summary.is-shown { display: flex; }
.form__summary svg { flex: none; margin-top: 2px; }

.form__actions { display: grid; gap: 10px; margin-top: 22px; }
@media (min-width: 560px) { .form__actions { grid-template-columns: 1fr auto; } }

.form__note {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: .87rem;
  color: var(--muted);
  line-height: 1.5;
}

/* message preview */
.preview {
  background: var(--dark);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(18px, 3.5vw, 26px);
  position: sticky;
  top: calc(var(--header-h) + 16px);
}
.preview h3 { font-size: 1.02rem; color: var(--white); }
.preview__hint { font-size: .85rem; color: var(--on-dark-muted); margin-top: 7px; line-height: 1.5; }
.preview__box {
  margin-top: 14px;
  padding: 15px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  font-size: .9rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  color: #E4E7EA;
  max-height: 320px;
  overflow-y: auto;
  font-variant-numeric: tabular-nums;
}
.preview .btn { margin-top: 14px; }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; gap: 16px; }
@media (min-width: 700px)  { .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .contact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.contact-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 22px;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: var(--radius-lg);
}
.contact-card h3 {
  font-size: .84rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 800;
}
.contact-card__big {
  font-size: 1.62rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
a.contact-card__big:hover { color: var(--green-text); }
.contact-card p { font-size: 1.02rem; color: var(--ink); }
.contact-card .btn { margin-top: auto; }

.social-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; }
.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 11px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-size: .93rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--t), border-color var(--t), color var(--t);
}
.social-btn svg { width: 20px; height: 20px; flex: none; }
.social-btn:hover { background: var(--dark); border-color: var(--dark); color: var(--white); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer { background: var(--dark); color: var(--white); padding-block: clamp(2.5rem, 6vw, 3.5rem) 1.5rem; }
.footer__top { display: grid; gap: 30px; }
@media (min-width: 760px)  { .footer__top { grid-template-columns: 1.35fr 1fr 1fr; gap: 36px; } }
@media (min-width: 1040px) { .footer__top { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }

.footer__logo { width: 210px; margin-bottom: 18px; }
.footer__phone {
  display: inline-block;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--white);
  text-decoration: none;
  border-bottom: 2px solid var(--green);
  padding-bottom: 2px;
}
.footer__phone:hover { color: var(--green); }
.footer__avail { margin-top: 10px; font-size: .92rem; color: var(--on-dark-muted); }

.footer h3 {
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 800;
  margin-bottom: 14px;
}
.footer li + li { margin-top: 0; }
.footer li a, .footer__nav a {
  color: #C9CDD3;
  font-size: .94rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 0;          /* keeps each row a 44px tap target */
  min-height: 44px;
}
.footer li a:hover, .footer__nav a:hover { color: var(--green); }
.footer li a svg { width: 17px; height: 17px; flex: none; }

.footer__lang { margin-top: 22px; }
.footer__lang .lang { border-color: var(--line-dark); }
.footer__lang .lang button { background: transparent; color: var(--on-dark-muted); }
.footer__lang .lang button + button { border-left-color: var(--line-dark); }
.footer__lang .lang button:hover { background: rgba(255, 255, 255, .08); color: var(--white); }
.footer__lang .lang button[aria-pressed='true'] { background: var(--green); color: var(--white); }

.footer__bottom {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--line-dark);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  font-size: .84rem;
  color: #8A9099;
  line-height: 1.55;
}
.footer__bottom p { max-width: 62ch; }
.footer__bottom a { color: #C9CDD3; }

/* --------------------------------------------------------------------------
   Sticky mobile contact bar
   -------------------------------------------------------------------------- */
.mobile-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 8px;
  padding: 9px 12px calc(9px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .97);
  backdrop-filter: saturate(180%) blur(10px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -3px 16px rgba(20, 21, 24, .10);
}
@media (min-width: 900px) { .mobile-bar { display: none; } }
.mobile-bar .btn { min-height: 50px; font-size: 1rem; padding: 12px 12px; border-radius: var(--radius); }
.mobile-bar .btn svg { width: 19px; height: 19px; }

/* --------------------------------------------------------------------------
   Motion — small reveals, only when JS is present
   -------------------------------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 300ms ease, transform 300ms cubic-bezier(.2, .6, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .badge__dot { animation: none; }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  .header, .mobile-bar, .drawer, .lightbox, .form, .preview { display: none !important; }
  body { padding-bottom: 0; }
  .hero, .cta-band, .footer, .section--dark { background: #fff !important; color: #000 !important; }
}