/* ==========================================================================
   Jolly Auto India — site stylesheet
   Single file, no framework. Mobile-first.
   ========================================================================== */

:root {
  /* brand */
  --red: #2f5d46;
  --red-dark: #1f4033;
  --red-tint: #e4eee8;
  --brass: #b8892f;

  /* neutrals */
  --ink: #16201b;
  --ink-2: #1f2d26;
  --ink-3: #28372e;
  --steel: #43514a;
  --slate: #66736b;
  --line: #d3d9d1;
  --mist: #e8ebe5;
  --paper: #f5f6f2;
  --white: #ffffff;

  /* type */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-hero: clamp(2.5rem, 7vw, 5.5rem);
  --fs-h1: clamp(1.9rem, 4.5vw, 3.1rem);
  --fs-h2: clamp(1.5rem, 3vw, 2.3rem);
  --fs-h3: clamp(1.15rem, 2vw, 1.4rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.78rem;

  /* layout */
  --gutter: 16px;
  --maxw: 1200px;
  --radius: 3px;
  --shadow-sm: 0 1px 3px rgba(22, 32, 27, 0.08);
  --shadow-md: 0 6px 24px rgba(22, 32, 27, 0.1);
  --shadow-lg: 0 18px 48px rgba(22, 32, 27, 0.16);

  --header-h: 72px;
}
@media (min-width: 768px) {
  :root { --gutter: 32px; }
}

/* --------------------------------------------------------------- reset -- */

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--steel);
  background: var(--white);
  overflow-x: hidden; /* belt and braces; nothing should overflow anyway */
}

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

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5em;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: 0.01em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* nothing should ever push the page sideways on a narrow screen */
p, li, h1, h2, h3, h4, h5, h6, td, th, dd, dt { overflow-wrap: break-word; }

a { color: var(--red); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--red-dark); }

ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }
li { margin-bottom: 0.35em; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

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

/* --------------------------------------------------------- scaffolding -- */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: 820px; }

.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section--tight { padding-block: clamp(2rem, 4vw, 3rem); }
.section--paper { background: var(--paper); }
.section--mist { background: var(--mist); }
.section--ink { background: var(--ink); color: #b9c2cd; }
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--white); }

/* Hidden until focused, without parking a box off-canvas. */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--red);
  color: var(--white);
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform 0.15s;
}
.skip-link:focus { transform: translateY(0); color: var(--white); }

/* --------------------------------------------------------------- type -- */

.eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.6rem;
}
.eyebrow::before { content: "// "; opacity: 0.55; }
/* brand red is only 3.8:1 on the dark band; this tint of it is 5.9:1 */
.section--ink .eyebrow { color: #e0b563; }

/* two-column bullet lists in long product copy */
@media (min-width: 600px) {
  .prose ul.two-col { columns: 2; column-gap: 2.5rem; }
  .prose ul.two-col li { break-inside: avoid; }
}

.section-head { max-width: 680px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--slate); font-size: 1.05rem; }

.lead { font-size: 1.1rem; color: var(--steel); }

.prose h2 { margin-top: 2.2em; }
.prose h3 { margin-top: 1.8em; font-size: 1.15rem; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul { padding-left: 1.1em; }
.prose li::marker { color: var(--red); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.85em 1.7em;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s, color 0.18s, border-color 0.18s, transform 0.18s;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--red); color: var(--white); border-color: var(--red); }
.btn--primary:hover { background: var(--red-dark); border-color: var(--red-dark); color: var(--white); }

.btn--ghost { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.5); }
.btn--ghost:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

.btn--outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--outline:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }

.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem; }

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

.topbar {
  background: var(--ink);
  color: #9aa5b1;
  font-size: var(--fs-xs);
}
.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  min-height: 40px;
  padding-block: 8px;
}
@media (min-width: 768px) {
  .topbar__inner { justify-content: space-between; }
}
.topbar a { color: #cdd4dc; text-decoration: none; }
.topbar a:hover { color: var(--white); }
.topbar__group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.25rem; }
.topbar__item { display: inline-flex; align-items: center; gap: 0.45em; white-space: nowrap; }
.topbar__item svg { flex: none; opacity: 0.7; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { width: 180px; height: auto; }
@media (min-width: 992px) { .brand img { width: 212px; } }

/* --- desktop nav --- */

.nav { display: none; }
@media (min-width: 992px) { .nav { display: block; } }

.nav__list { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.nav__list li { margin: 0; position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.7rem 0.85rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.nav__link:hover { color: var(--red); }
.nav__link[aria-current="page"],
.nav__item--active > .nav__link { color: var(--red); border-bottom-color: var(--red); }

.nav__caret { width: 9px; height: 9px; transition: transform 0.18s; opacity: 0.6; }
.nav__item:hover .nav__caret { transform: rotate(180deg); }

.nav__panel {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 270px;
  padding: 0.5rem 0;
  margin: 0;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--red);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.16s, transform 0.16s, visibility 0.16s;
}
/* The products panel is wide, and its trigger sits mid-bar, so anchor it to
   the right edge of the item and let it open inwards — otherwise it pushes
   past the viewport and creates a horizontal scrollbar around 1000px. */
.nav__panel--wide {
  left: auto;
  right: 0;
  width: min(560px, calc(100vw - 2 * var(--gutter)));
  column-count: 2;
  column-gap: 0;
}
.nav__item:hover > .nav__panel,
.nav__item:focus-within > .nav__panel { opacity: 1; visibility: visible; transform: translateY(0); }
/* Escape dismisses an open menu (WCAG 1.4.13); site.js sets and clears this */
.nav__item.is-dismissed > .nav__panel { opacity: 0; visibility: hidden; transform: translateY(6px); }

.nav__panel a {
  display: block;
  padding: 0.5rem 1.2rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--steel);
  text-decoration: none;
  break-inside: avoid;
}
.nav__panel a:hover { background: var(--paper); color: var(--red); }

.header-cta { display: none; flex: none; }
@media (min-width: 1100px) { .header-cta { display: inline-flex; } }

/* --- mobile nav --- */

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 9px;
  background: none;
  border: 0;
  cursor: pointer;
}
@media (min-width: 992px) { .nav-toggle { display: none; } }
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--ink);
  transition: transform 0.2s, opacity 0.2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--white);
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
}
.mobile-nav.is-open { display: block; }
@media (min-width: 992px) { .mobile-nav, .mobile-nav.is-open { display: none; } }

.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav li { margin: 0; border-bottom: 1px solid var(--mist); }

.mobile-nav a,
.mobile-nav .m-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.95rem var(--gutter);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
  text-decoration: none;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.mobile-nav .m-toggle svg { width: 11px; height: 11px; transition: transform 0.2s; }
.mobile-nav .m-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.mobile-nav__sub { display: none; background: var(--paper); }
.mobile-nav__sub.is-open { display: block; }
.mobile-nav__sub a {
  padding-left: calc(var(--gutter) + 16px);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--steel);
}
.mobile-nav__cta { padding: 1rem var(--gutter) 1.4rem; }
.mobile-nav__cta .btn {
  display: inline-flex;
  width: 100%;
  justify-content: center;
  padding: 0.85em 1.7em;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--white);
  background: var(--red);
  border-radius: var(--radius);
  text-align: center;
}
.mobile-nav__cta .btn:hover { background: var(--red-dark); }

/* Without JavaScript the menu button can do nothing, so below the desktop
   breakpoint show the whole menu, expanded, in normal flow. The page starts
   with class "no-js" and an inline script in <head> swaps it for "js". */
@media (max-width: 991.98px) {
  .no-js .site-header { position: static; }
  .no-js .nav-toggle { display: none; }
  .no-js .mobile-nav { display: block; max-height: none; overflow: visible; }
  .no-js .mobile-nav__sub { display: block; }
  .no-js .mobile-nav .m-toggle svg { display: none; }
}
.no-js .to-top { display: none; }

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

.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(380px, 62vh, 620px);
  padding-block: clamp(3rem, 8vw, 6rem);
  background: var(--ink) center / cover no-repeat;
  text-align: center;
  isolation: isolate;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(22, 32, 27, 0.72) 0%, rgba(22, 32, 27, 0.58) 45%, rgba(22, 32, 27, 0.8) 100%);
}
.hero__inner { position: relative; max-width: 900px; }
.hero__eyebrow {
  display: inline-block;
  padding: 0.35em 1em;
  margin-bottom: 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
}
.hero__title {
  font-size: var(--fs-hero);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--white);
  margin-bottom: 0.4em;
  text-wrap: balance;
}
.hero__title .accent { color: var(--red); }
.hero__sub {
  max-width: 640px;
  margin: 0 auto 2rem;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: rgba(255, 255, 255, 0.85);
  text-wrap: pretty;
}
.hero .btn-row { justify-content: center; }

/* page banner (interior pages) */
.page-hero {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  background: var(--ink) center / cover no-repeat;
  isolation: isolate;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(22, 32, 27, 0.9) 0%, rgba(22, 32, 27, 0.68) 100%);
}
.page-hero h1 { color: var(--white); margin-bottom: 0.3em; }
.page-hero p { color: rgba(255, 255, 255, 0.8); max-width: 640px; margin-bottom: 0; }

.crumbs { margin-bottom: 0.9rem; font-size: var(--fs-sm); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.4em; list-style: none; margin: 0; padding: 0; }
.crumbs li { margin: 0; color: rgba(255, 255, 255, 0.6); }
.crumbs li + li::before { content: "/"; margin-right: 0.4em; opacity: 0.5; }
.crumbs a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.crumbs a:hover { color: var(--white); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--white); }

/* --------------------------------------------------------------- grid -- */

.grid { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

@media (min-width: 480px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 600px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
.split--media-right > .split__media { order: 2; }

.split__media img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

/* ---------------------------------------------------------- stat band -- */

.stats { background: var(--red); color: var(--white); }
.stats .grid { gap: 1.5rem; }
.stat { text-align: center; padding: 0.5rem; }
.stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  color: var(--white);
}
.stat__label {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--white);   /* 4.9:1 on the red band; any transparency drops below AA */
}

/* ---------------------------------------------------------- cards etc -- */

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.card:hover { border-color: var(--slate); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.card__media { background: var(--white); aspect-ratio: 6 / 5; overflow: hidden; }
/* Show the whole product photo (no cropping); the photos sit on white. */
.card__media img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.4s; }
.card:hover .card__media img { transform: scale(1.03); }
.card__body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem; }
.card__title { font-size: 1.1rem; margin-bottom: 0.4rem; }
.card__title a { color: var(--ink); text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card { position: relative; }
.card:hover .card__title a { color: var(--red); }
.card__text { font-size: 0.9rem; color: var(--slate); margin-bottom: 1rem; }
.card__more {
  margin-top: auto;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
}

/* credential / feature tiles */
.tile {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  border-radius: var(--radius);
  height: 100%;
}
.tile__icon { flex: none; width: 36px; height: 36px; color: var(--red); }
.tile h3 { font-size: 1.02rem; margin-bottom: 0.25rem; }
.tile p { font-size: 0.88rem; color: var(--slate); margin: 0; }

/* simple checklist */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.checklist li { display: flex; gap: 0.7rem; margin: 0; font-size: 0.95rem; }
.checklist svg { flex: none; width: 19px; height: 19px; margin-top: 3px; color: var(--red); }

.pill-list { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0; list-style: none; }
.pill-list li {
  margin: 0;
  padding: 0.4em 0.9em;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--steel);
}

/* ------------------------------------------------------------ gallery -- */

.gallery { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .gallery { grid-template-columns: repeat(4, 1fr); } }

/* Thumbnails are links to the full image, so they still work with no
   JavaScript; site.js turns them into a lightbox when it can. */
.gallery a {
  display: block;
  padding: 0;
  border: 0;
  background: var(--mist);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
}
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s; }
.gallery a:hover img { transform: scale(1.05); }

/* the awards page shows two large presentation photos side by side */
.gallery--pair { grid-template-columns: repeat(2, 1fr); max-width: 820px; margin-inline: auto; }

/* `display: grid` would override the browser's own
   `dialog:not([open]) { display: none }`, leaving the close and arrow buttons
   floating over the page, so only style the open state. */
.lightbox:not([open]) { display: none; }

/* Fills the viewport (overriding the browser's fit-content dialog sizing),
   with the photo and its caption stacked in the middle: the caption sits
   under the photo, never on top of it. */
.lightbox[open] {
  position: fixed;
  inset: 0;
  z-index: 300;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: center;
  gap: 0.75rem;
  padding: max(16px, 4vh) max(64px, 4vw);
  background: rgba(10, 15, 12, 0.94);
  border: 0;
}
.lightbox::backdrop { background: rgba(10, 15, 12, 0.94); }
.lightbox img { max-width: 100%; max-height: 76vh; object-fit: contain; border-radius: var(--radius); }
.lightbox__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--white);
  background: rgba(255, 255, 255, 0.12);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.lightbox__close:hover { background: rgba(255, 255, 255, 0.25); }
.lightbox__nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 48px;
  height: 48px;
  font-size: 1.5rem;
  color: var(--white);
  background: rgba(255, 255, 255, 0.12);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.25); }
.lightbox__prev { left: 10px; }
.lightbox__next { right: 10px; }
.lightbox__caption {
  margin: 0;
  max-width: 60ch;
  text-align: center;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.85);
}

/* -------------------------------------------------------------- video -- */

.video-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }

.video-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
}
.video-card video { width: 100%; aspect-ratio: 16 / 9; background: var(--ink); object-fit: cover; }
.video-card__body { padding: 0.9rem 1.1rem; }
.video-card h3 { font-size: 1rem; margin: 0; }

/* --------------------------------------------------------------- CTA -- */

.cta {
  position: relative;
  padding-block: clamp(3rem, 7vw, 5rem);
  background: var(--ink-2) center / cover no-repeat;
  text-align: center;
  isolation: isolate;
}
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(22, 32, 27, 0.74);
}
.cta h2 { color: var(--white); }
.cta p { max-width: 620px; margin: 0 auto 1.8rem; color: rgba(255, 255, 255, 0.8); }
.cta .btn-row { justify-content: center; }

/* --------------------------------------------------------------- form -- */

.form-grid { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }

.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field--full { grid-column: 1 / -1; }

.field label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}
.field .req { color: var(--red); }
.field .hint { font-size: var(--fs-xs); font-weight: 400; color: var(--slate); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--white);
  /* 3.07:1 against white: a field boundary has to be visible (WCAG 1.4.11) */
  border: 1px solid #8a94a1;
  border-radius: var(--radius);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field textarea { min-height: 150px; resize: vertical; }
/* Checkboxes keep the global :focus-visible outline; only text-like
   controls swap it for the border-and-glow treatment. */
.field input:not([type="checkbox"]):focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-tint);
}
.field input:not([type="checkbox"]):focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
.field input::placeholder, .field textarea::placeholder { color: var(--slate); opacity: 1; }
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--red-dark); }

.field--check { flex-direction: row; align-items: flex-start; gap: 0.6rem; }
.field--check input { width: 18px; height: 18px; flex: none; margin-top: 3px; }
.field--check label { font-weight: 400; font-size: 0.85rem; color: var(--slate); }

.form-note { font-size: var(--fs-xs); color: var(--slate); }

.form-status {
  margin: 0;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  font-size: 0.92rem;
  font-weight: 500;
}
.form-status[data-state="ok"] { background: #e8f6ed; color: #1b5e34; border: 1px solid #b7e0c6; }
.form-status[data-state="error"] { background: var(--red-tint); color: var(--red-dark); border: 1px solid #f2c0bb; }
/* The live region stays in the page from load, so screen readers are
   already listening when the result is written into it. While empty it is
   taken out of the grid (no row, no gap) but, unlike display:none, stays in
   the accessibility tree. */
.form-status:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
}

/* honeypot */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------ contact -- */

.contact-card {
  padding: 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  height: 100%;
}
.contact-card h3 { font-size: 1rem; letter-spacing: 0.02em; margin-bottom: 0.6rem; }
.contact-card address { font-style: normal; font-size: 0.92rem; color: var(--slate); }
.contact-card a { color: var(--steel); text-decoration: none; }
.contact-card a:hover { color: var(--red); text-decoration: underline; }

.map-frame {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  line-height: 0;
  background: var(--mist);
}
.map-frame iframe { width: 100%; height: 420px; border: 0; display: block; }

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

.site-footer { background: var(--ink); color: #98a3af; font-size: 0.9rem; }
.site-footer a { color: #c3cbd4; text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }

.footer-top { padding-block: clamp(2.5rem, 5vw, 4rem); }
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; } }

.site-footer h2 {
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 1.1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.5rem; }
.footer-logo { width: 170px; margin-bottom: 1.1rem; filter: brightness(0) invert(1); opacity: 0.95; }
.footer-about p { font-size: 0.88rem; line-height: 1.7; }

.social { display: flex; gap: 0.6rem; margin-top: 1.2rem; }
.social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  color: #c3cbd4;
}
.social a:hover { background: var(--red); border-color: var(--red); color: var(--white); }
.social svg { width: 17px; height: 17px; }

.footer-bottom {
  padding-block: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--fs-xs);
}
.footer-bottom__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
  justify-content: center;
  text-align: center;
}
@media (min-width: 768px) {
  .footer-bottom__inner { justify-content: space-between; text-align: left; }
}

/* --------------------------------------------------------------- misc -- */

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

.to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  background: var(--red);
  color: var(--white);
  border: 0;
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--red-dark); }

.notice {
  padding: 1rem 1.2rem;
  background: var(--red-tint);
  border-left: 3px solid var(--red);
  border-radius: var(--radius);
  font-size: 0.92rem;
  color: var(--ink);
}

@media print {
  .site-header, .topbar, .site-footer, .to-top, .cta, .nav-toggle { display: none !important; }
  body { color: #000; }
}

/* ------------------------------------------------ contact chooser dialog -- */

.contact-choice {
  width: min(440px, calc(100% - 32px));
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}
.contact-choice::backdrop { background: rgba(22, 32, 27, 0.6); }
.contact-choice__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1rem 1rem 1.25rem;
  background: var(--ink);
  color: var(--white);
  border-bottom: 3px solid var(--red);
}
.contact-choice__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--white);
}
.contact-choice__close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: transparent;
  color: var(--white);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}
.contact-choice__close:hover { background: var(--ink-2); }
.contact-choice__body { display: grid; gap: 0.75rem; padding: 1.25rem; }
.contact-choice__option {
  display: grid;
  gap: 0.15rem;
  padding: 0.95rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
}
.contact-choice__option strong { font-size: 1.05rem; }
.contact-choice__option span { font-size: var(--fs-sm); color: var(--steel); }
.contact-choice__option:hover,
.contact-choice__option:focus-visible {
  border-color: var(--red);
  background: var(--red-tint);
}

/* -------------------------------------------------------- people photo -- */

.people-photo { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.people-photo img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.people-photo figcaption { margin-top: 0.9rem; text-align: center; font-size: var(--fs-sm); color: var(--slate); }

/* equal-shaped photos in the Quality strip */
.strip-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* Hero variant that lets the photo show: dark behind the heading, clear on the right */
.page-hero--photo::after {
  background: linear-gradient(90deg, rgba(22, 32, 27, 0.9) 0%, rgba(22, 32, 27, 0.62) 40%, rgba(22, 32, 27, 0.08) 100%);
}

/* Plain photos (no enlarge-on-click): same look as the clickable grid, minus the zoom cue */
.gallery--static .gallery__item {
  display: block; margin: 0; background: var(--mist); border-radius: var(--radius);
  overflow: hidden; aspect-ratio: 4 / 3;
}
.gallery--static img { transition: none; }