/* ==========================================================================
 Base
 Design tokens, reset, typography, layout helpers and buttons. Loaded first; every other file uses these variables.
 ========================================================================== */

/* Fonts, served with the site (SIL Open Font License), so pages never wait on an outside server.
   Latin only: the site is in English. Manrope is one variable file covering weights 400 to 700 */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/manrope-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/instrument-serif-latin.woff2') format('woff2');
}
/* The real italic, for the accent words in headings (<em>). Without it browsers slant the upright letters instead */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/instrument-serif-italic-latin.woff2') format('woff2');
}

/* Design tokens: change the brand here and the whole site follows.
   The palette comes from the logo: its racing red, its chrome silver and its black. Since 2026-11-07 (owner: "not
   fully blue, not fully white, smooth colours") the light parts are warm and softly coloured: a cream page, rose from
   the logo red and sage from the WhatsApp green, all at the same soft lightness so they sit together. Deep crimson
   takes the place of the large blue fills, the accent words in headings and the text links. Blue stays only for the
   small things the owner chose (the Contact us button) and focus rings */
:root {
  --cream: #fcfaf8; /* the page: a clean white with only a breath of warmth (2026-11-08 design upgrade) */
  --cream-2: #f5f2ee;
  --champagne: #eceef2; /* image placeholders and pressed rows: a cool chrome silver, not beige */
  --rose-50: #fdf2ef;
  --rose-100: #fae4de;
  --rose-200: #f2c7bd;
  --sage-50: #f0f6f1;
  --sage-100: #e0eee5;
  --sage-200: #c3dccb;
  --crimson: #b3302a; /* the bright end of red fills */
  --wine: #6f191c; /* the deep end of red fills */
  --accent-ink: #a3261f; /* accent words and links on light: 7.3:1 on --cream */
  --accent-ink-dark: #f6a89e; /* the same on the dark bands: a soft coral, 9.8:1 on --carbon */
  --link-hover: #7c1c1d;
  /* Blue headings (owner, 2026-11-07): the page tops, Services and Contact titles, the About panel and the Gallery
     group boxes. --heading-blue is 9:1 on --cream, --heading-blue-accent (the italic accent words) 5.3:1 */
  --heading-blue: #1b4a82;
  --heading-blue-accent: #2c69b0;
  --panel-blue: linear-gradient(150deg, #f4f9ff 0%, #e8f1fc 52%, #dbe8f8 100%);
  --panel-blue-edge: rgba(42, 93, 154, 0.16);
  /* The deep sapphire of the page-top panels and Gallery title boxes, from the logo's blue: white text is 5:1 on its
     lightest corner and over 10:1 on its deepest */
  --panel-deep: linear-gradient(145deg, #2d69b0 0%, #1f5196 40%, #173f78 75%, #11305e 100%);
  --white: #ffffff;
  --pearl: #f7f9fb; /* the lightest tinted surface */
  --mist: #f3f5f8;
  --mist-2: #e9edf2;
  --silver: #dfe5ec; /* chrome grey, for frames and the top of light bands */
  --ink: #101a29; /* body text and headings: a near-black with a little navy in it */
  --ink-2: #3c4654;
  --muted: #5f6977;
  --line: rgba(20, 40, 70, 0.09);
  --blue: #2a5d9a;
  --blue-dark: #1f4776;
  --blue-soft: #e8f0fa;
  --blue-light: #8db4e0;
  --blue-bright: #3a74bd; /* the lit edge of blue gradients */
  --red: #c8322b; /* the red of the logo: 5.3:1 on white, 4.7:1 on --mist */
  --red-dark: #a3261f;
  --red-light: #f07a70; /* the same red for small text on the dark bands (6:1 on --carbon) */
  --carbon: #0b1119; /* the dark bands: footer, working hours, closing call to action */
  --carbon-2: #121c2b;
  --whatsapp: #128c4a;
  --whatsapp-text: #0e7a40; /* the same green, deep enough for text on white and white text on it (5.4:1) */
  --whatsapp-soft: #e7f5ed;
  --logo-plate: #0b0c0f;
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-exit: cubic-bezier(0.4, 0, 0.2, 1);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  /* Shadows (2026-11-08 design upgrade): a cool navy lift, like a car's shadow on a showroom floor, so white cards
     read crisp and premium on the white page. Cards take a fine crimson edge on hover: the red and blue of the logo */
  --shadow-1: 0 1px 2px rgba(16, 32, 58, 0.05), 0 4px 16px rgba(16, 32, 58, 0.06);
  --shadow-2: 0 4px 20px rgba(20, 44, 82, 0.08), 0 14px 40px rgba(16, 32, 58, 0.08);
  --shadow-3: 0 8px 28px rgba(20, 44, 82, 0.11), 0 28px 64px rgba(16, 32, 58, 0.14);
  --shadow-card:
    inset 0 0 0 1px rgba(20, 40, 70, 0.07), 0 1px 2px rgba(16, 32, 58, 0.04), 0 8px 24px rgba(27, 74, 130, 0.07),
    0 26px 48px -28px rgba(16, 32, 58, 0.3);
  --shadow-card-hover:
    inset 0 0 0 1px rgba(163, 38, 31, 0.16), 0 2px 4px rgba(16, 32, 58, 0.05), 0 18px 40px rgba(27, 74, 130, 0.12),
    0 40px 70px -30px rgba(16, 32, 58, 0.38);
  /* The surface of cards and panels: clean white easing into a faint pearl at the foot */
  --surface-card: linear-gradient(180deg, #ffffff 0%, #f8f9fb 100%);
  /* Article titles on light pages: the deep navy of the blue heading family */
  --heading-ink: #15294a;
  /* The frame round photos: a white mount with a fine blue-silver edge */
  --photo-mount: 0 0 0 6px rgba(255, 255, 255, 0.85), 0 0 0 7px rgba(27, 74, 130, 0.12);
  /* Faint layered blue light for the plain light sections */
  --section-light:
    radial-gradient(42% 34% at 100% 0%, rgba(90, 160, 230, 0.08), transparent 70%),
    radial-gradient(38% 30% at 0% 100%, rgba(44, 105, 176, 0.05), transparent 70%);
  /* The signature line: a red stroke that tapers away, like the lines either side of "CAR ACCESSORIES" in the logo.
     languages.css turns it round for Arabic */
  --accent-line: linear-gradient(90deg, var(--red) 0%, var(--red) 30%, rgba(200, 50, 43, 0) 100%);
  --accent-line-dark: linear-gradient(90deg, var(--red-light) 0%, var(--red-light) 30%, rgba(240, 122, 112, 0) 100%);
  /* Fine grain, already faded, laid over the light showroom backgrounds and the dark bands as one more background
     layer, so they read as a surface rather than flat colour */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .17 0 0 0 0 .13 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Reset and page defaults */
*,
*::before,
*::after {
  box-sizing: border-box;
}
/* No CSS smooth-scroll: it breaks ScrollTrigger's measurements on reload. Anchor links scroll smoothly via JS instead. */
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.72;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
}
/* Even line lengths in headings, and no lone word on the last line of a paragraph. Older browsers ignore these */
h1,
h2,
h3,
.display {
  text-wrap: balance;
}
p,
li,
dd {
  text-wrap: pretty;
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
h1,
h2,
h3,
h4 {
  margin: 0;
}
p {
  margin: 0;
}

/* Typography and layout helpers */
.display {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.04;
}
/* The accent words in headings: the real italic, in the logo's deep crimson, so every title reads in two clear
   colours. The italic is narrower than the upright, so it needs less tightening. Dark bands use the soft coral */
.display em {
  letter-spacing: -0.015em;
  color: var(--accent-ink);
}
.wrap {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 20px;
}
@media (min-width: 768px) {
  .wrap {
    padding-inline: 32px;
  }
}
/* The small label above a section title: red capitals led in by the tapered signature line, as in the logo */
.kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
}
.kicker::before {
  content: '';
  flex: none;
  width: 32px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-line);
  transform: scaleX(-1); /* the line tapers away from the word */
}
.lead {
  color: var(--ink-2);
  font-size: 17px;
  max-width: 34em;
}
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
}
.skip:focus {
  top: 12px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font:
    600 15px/1 'Manrope',
    sans-serif;
  transition:
    transform 0.2s var(--ease-spring),
    box-shadow 0.2s var(--ease-spring),
    background-color 0.2s ease;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
}
:is(.btn, .card, .navlink, .float-button, .menu-toggle, .contact-row, .contact-choice, .instagram-link):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
/* A crimson gradient with a lit top edge, like light along red paint. The flat colour stays as the fallback */
.btn-primary {
  background: var(--accent-ink);
  background-image: linear-gradient(160deg, #c8443a 0%, var(--crimson) 45%, var(--wine) 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 6px 20px rgba(163, 38, 31, 0.3);
}
.btn-primary:hover {
  background: var(--wine);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 10px 28px rgba(163, 38, 31, 0.4);
}
.btn-primary:active {
  box-shadow: 0 3px 10px rgba(163, 38, 31, 0.28);
}
/* The deeper shade of the WhatsApp green, so the white text passes contrast (5.4:1) */
.btn-whatsapp {
  background: var(--whatsapp-text);
  color: #fff;
  box-shadow: 0 6px 20px rgba(18, 140, 74, 0.28);
}
.btn-whatsapp:hover {
  background: #0b6334;
  box-shadow: 0 10px 28px rgba(18, 140, 74, 0.36);
}
.btn-whatsapp:active {
  box-shadow: 0 3px 10px rgba(18, 140, 74, 0.25);
}
.btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.btn-glass {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-glass:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* Sheen (2026-11-08 design upgrade): on hover a soft band of light sweeps across the filled buttons, like a
   reflection running along polished paint. Only transform moves, and it sits under the label */
.btn-primary,
.btn-whatsapp {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.btn-primary::after,
.btn-whatsapp::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.26) 50%, transparent 70%);
  transform: translateX(-110%);
  transition: transform 0.75s var(--ease-spring);
  pointer-events: none;
}
@media (hover: hover) {
  .btn-primary:hover::after,
  .btn-whatsapp:hover::after {
    transform: translateX(110%);
  }
}

/* Arriving on screen, on every page (2026-11-08 design upgrade): js/main.js marks the main blocks of a page with
   data-rise and adds .reveal-ready only when it can show them again, so without JavaScript, or with reduced motion,
   nothing is hidden. An animation rather than a transition, so each card's own hover lift keeps working afterwards;
   --rise-delay staggers the cards of one row */
.reveal-ready [data-rise]:not(.is-revealed) {
  opacity: 0;
}
.reveal-ready [data-rise].is-revealed {
  animation: rise-in 0.9s var(--ease-spring) var(--rise-delay, 0s) backwards;
}
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-ready [data-rise]:not(.is-revealed) {
    opacity: 1;
  }
  .reveal-ready [data-rise].is-revealed {
    animation: none;
  }
  .btn-primary::after,
  .btn-whatsapp::after {
    display: none;
  }
}