/* ============================================================
   Toyota Connected Middle East
   Design system inspired by toyotaconnected.com
   ============================================================ */

:root {
  color-scheme: only light;
  --red: #eb0a1e;
  --red-dark: #c40915;
  --ink: #111114;
  --navy: #13111f;
  --navy-line: #2c2545;
  --paper: #ffffff;
  --grey: #f4f4f2;
  --grey-card: #efefec;
  --blue: #a5d8e2;
  --title-blue: #0c5da0;
  --text: #45454b;
  --text-light: #8b8b92;
  --font-display: "Archivo", "Helvetica Neue", sans-serif;
  --font-body: "Inter", "Helvetica Neue", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
  --header-h: 72px;
  --hero-edge: #0b2131;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  color-scheme: only light;
  background-color: #fff;
}

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: dark) {
  :root,
  html {
    color-scheme: only light;
  }

  html,
  body {
    background-color: #ffffff;
    color: var(--text);
  }
}

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

a { color: inherit; text-decoration: none; }

.wrap {
  width: min(1180px, 92vw);
  margin: 0 auto;
}

/* ---------- typography ---------- */

.display {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.05;
  color: var(--ink);
}

h2.display { font-size: clamp(28px, 3.4vw, 42px); }
h3.display { font-size: clamp(20px, 2.2vw, 26px); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-light);
  display: block;
  margin-bottom: 18px;
}

.lead { font-size: 16px; max-width: 56ch; margin-left: 0; margin-right: 0; }

/* section / page title hierarchy (original TTCME style) */

.page-hero .eyebrow,
.section__head .eyebrow,
.partners__head .eyebrow,
.timeline-sec__head .eyebrow,
.drive__head .eyebrow,
.feature__body > .eyebrow {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 12px;
}

.page-hero h1.display,
.section__head > .display,
.partners__head > .display,
.timeline-sec__head > .display,
.drive__head > .display,
.feature__body > h2.display {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 800;
  font-stretch: 125%;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--title-blue);
  line-height: 1.15;
}

/* ---------- red square list ---------- */

.arrow-list { list-style: none; margin-top: 26px; }

.arrow-list li {
  position: relative;
  --bullet-pad: 7px;
  padding: var(--bullet-pad) 0 var(--bullet-pad) 22px;
  line-height: 1.65;
  font-weight: 500;
  color: var(--ink);
}

.arrow-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--bullet-pad) + 0.825em - 2.5px);
  width: 5px;
  height: 5px;
  background-color: var(--red);
  border-radius: 0;
}

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

.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 15px 28px;
  background: var(--red);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}

.btn:hover { background: var(--red-dark); transform: translateY(-2px); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  padding: 15px 4px;
  border-bottom: 2px solid var(--ink);
}

.btn--ghost:hover { background: transparent; color: var(--red); border-color: var(--red); }

.btn--white { background: #fff; color: var(--ink); }
.btn--white:hover { background: var(--grey); }

.btn--outline {
  background: #fff;
  color: var(--red);
  border: 2px solid var(--red);
  border-radius: 999px;
  padding: 13px 34px;
}

.btn--outline:hover {
  background: var(--red);
  color: #fff;
  transform: translateY(-2px);
}

.text-link {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 0.2s ease;
}

.text-link:hover { color: var(--red); }

.text-link .ext { color: var(--red); }

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

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1440px, calc(100vw - 48px));
}

.topbar__logo img { height: 48px; width: auto; }

.topbar__nav { display: flex; align-items: center; gap: 34px; }

.topbar__nav a {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  position: relative;
  padding: 6px 0;
}

.topbar__nav > a::after,
.nav-item > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--red);
  transition: width 0.25s ease;
}

.topbar__nav > a:hover::after,
.topbar__nav > a.is-active::after,
.nav-item > a:hover::after,
.nav-item:hover > a::after,
.nav-item > a.is-active::after { width: 100%; }

/* dropdown */

.nav-item { position: relative; }

.nav-item > a .caret {
  display: inline-block;
  margin-left: 6px;
  font-size: 8px;
  transform: translateY(-1px);
  color: var(--red);
}

.dropdown {
  position: absolute;
  top: calc(100% + 16px);
  left: -24px;
  min-width: 270px;
  background: #fff;
  box-shadow: 0 22px 50px rgba(17, 17, 20, 0.16);
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 60;
}

/* invisible bridge so the menu doesn't close while moving the cursor down */
.dropdown::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}

.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.dropdown a {
  display: block;
  padding: 11px 24px;
  border-left: 2px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.dropdown a:hover {
  color: var(--red);
  border-left-color: var(--red);
  background: var(--grey);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  position: relative;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 8px;
  width: 24px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle span { top: 19px; }
.nav-toggle span::before { left: 0; top: -7px; }
.nav-toggle span::after { left: 0; top: 7px; }

/* ---------- hero (home) — matched to toyotaconnected.com ---------- */

.hero {
  position: relative;
  margin-top: var(--header-h);
  padding-bottom: 0;
  background: transparent;
  z-index: 2;
}

.hero__slider-band {
  width: 100%;
  background: var(--hero-edge);
}

.hero__container {
  width: min(1640px, calc(100vw - 48px + 200px));
  margin: 0 auto;
}

.hero__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 560;
  overflow: hidden;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.hero__slide.active { opacity: 1; }

.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__title {
  position: absolute;
  left: calc(148px + 300px);
  right: max(148px, calc(40% - 300px));
  bottom: calc(52px + 50px);
  z-index: 2;
  margin: 0;
  font-size: clamp(28px, 3.89vw, 56px);
  line-height: 1.05;
  color: #fff;
  text-align: right;
  max-width: none;
}

.hero > .hero__container:last-of-type {
  position: relative;
  z-index: 5;
  margin-bottom: -90px;
}

.hero__mission {
  position: relative;
  margin-top: -56px;
  z-index: 5;
  width: 60%;
  min-height: 180px;
  background: var(--red);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 120px 0 192px;
}

.hero__mission p {
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.01em;
  max-width: 52ch;
}

.hero__mission strong { color: #fff; font-weight: 800; }

/* pixel checkers — 96×96, 32px cells (TCNA spec) */
.pixels {
  position: absolute;
  right: -32px;
  top: 50%;
  transform: translateY(-50%);
  width: 96px;
  height: 96px;
  display: grid;
  grid-template: repeat(3, 32px) / repeat(3, 32px);
}

.pixels i { display: block; }

.pixels i:nth-child(1) { grid-area: 1 / 2; background: #fff; }
.pixels i:nth-child(2) { grid-area: 1 / 3; background: #fff; }
.pixels i:nth-child(3) { grid-area: 2 / 1; background: #f5a5ad; }
.pixels i:nth-child(4) { grid-area: 2 / 2; background: var(--red-dark); }
.pixels i:nth-child(5) { grid-area: 2 / 3; background: #fff; }
.pixels i:nth-child(6) { grid-area: 3 / 2; background: #f5a5ad; }
.pixels i:nth-child(7) { grid-area: 3 / 3; background: #fff; }
.pixels i:nth-child(8),
.pixels i:nth-child(9) { display: none; }

/* ---------- brand panel ---------- */

/* ---------- driving section (full-width background) ---------- */

.drive {
  position: relative;
  z-index: 1;
  padding: calc(clamp(88px, 10vw, 130px) + 90px) 0 clamp(88px, 10vw, 130px);
  background:
    linear-gradient(180deg, rgba(210, 210, 206, 0.9) 0%, rgba(228, 228, 224, 0.86) 100%),
    url("../img/75935.jpg") center / cover no-repeat;
  color: var(--ink);
}

.drive__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.drive__head {
  max-width: 720px;
}

.drive .lead {
  margin-top: 22px;
  color: var(--text);
  max-width: 48ch;
}

.drive__tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.drive__tile {
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.9);
  padding: clamp(36px, 4vw, 50px) clamp(32px, 3vw, 40px);
  box-shadow: 0 18px 44px rgba(17, 17, 20, 0.1);
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 200px;
}

.drive__tile p {
  font-size: clamp(17px, 1.65vw, 20px);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
}

.drive__tile .text-link { margin-top: auto; }

.drive__cta { margin-top: 4px; }

.brandpanel { padding: 90px 0 30px; }

.brandpanel .wrap {
  display: flex;
  justify-content: center;
}

.brandpanel img { width: min(560px, 80vw); }

/* ---------- stats ---------- */

.stats { padding: 60px 0 110px; }

.stats__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 48px 28px;
  text-align: left;
}

.stat {
  min-width: 0;
}

.stat__icon {
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  color: var(--red);
}

.stat__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.stat__num {
  font-family: var(--font-display);
  font-stretch: 110%;
  font-weight: 600;
  font-size: clamp(24px, 2.4vw, 42px);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.stat__rule {
  width: 64px;
  height: 5px;
  background: var(--blue);
  margin: 18px 0 20px;
}

.stat__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  max-width: none;
  margin: 0;
  line-height: 1.6;
}

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

.feature { padding: 110px 0; }

.feature--grey { background: var(--grey); }

.feature__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}

.feature__grid--flip .feature__media { order: -1; }

.feature__media img {
  width: 100%;
  height: auto;
}

.feature__media--shadow img {
  box-shadow: 0 30px 60px rgba(17, 17, 20, 0.14);
}

.feature__media--43 {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.feature__media--43 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

.feature--about-intro .feature__media img {
  width: 112%;
  max-width: 112%;
  margin-left: -6%;
}

.feature__body .lead { margin-top: 22px; }

.feature__cta { margin-top: 34px; display: flex; align-items: center; gap: 34px; flex-wrap: wrap; }

/* ---------- featured case study card ---------- */

.casestudy { padding: 0 0 110px; }

.feature--grey + .casestudy { background: var(--grey); margin-top: -40px; }

.casestudy__card {
  display: grid;
  grid-template-columns: 320px 1fr;
  background: #fff;
  box-shadow: 0 24px 60px rgba(17, 17, 20, 0.1);
}

.casestudy__card img {
  width: 100%;
  height: auto;
}

.casestudy__body { padding: 40px 44px 32px; }

.casestudy__body h3 { margin-bottom: 14px; }

.casestudy__foot {
  margin-top: 22px;
  display: flex;
  justify-content: flex-end;
}

/* ---------- circuit divider ---------- */

.circuit {
  position: relative;
  height: 140px;
  background-color: #050810;
  overflow: hidden;
}

.circuit__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

.section--grey .reveal img,
.about-map {
  width: 100%;
  height: auto;
  display: block;
}

.about-vmvf {
  width: 70%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.section--home-solutions .card__img {
  aspect-ratio: 4 / 3;
}

/* ---------- timeline ---------- */

.timeline-sec { padding: 110px 0 130px; }

.timeline-sec__head { max-width: 620px; margin-bottom: 90px; }

.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #e8a7ac;
  transform: translateX(-0.5px);
}

.tl-item {
  position: relative;
  width: calc(50% - 56px);
  background: var(--grey);
  padding: 28px 34px;
}

.tl-item::after {
  content: "";
  position: absolute;
  top: 34px;
  width: 0;
  height: 0;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
}

.tl-item__dot {
  position: absolute;
  top: 36px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--red);
}

.tl-item:nth-child(odd) { align-self: flex-start; }
.tl-item:nth-child(odd)::after { right: -14px; border-left: 14px solid var(--grey); }
.tl-item:nth-child(odd) .tl-item__dot { right: -63px; }

.tl-item:nth-child(even) { align-self: flex-end; }
.tl-item:nth-child(even)::after { left: -14px; border-right: 14px solid var(--grey); }
.tl-item:nth-child(even) .tl-item__dot { left: -63px; }

.tl-item__year {
  font-family: var(--font-display);
  font-stretch: 120%;
  font-weight: 800;
  font-size: 22px;
  color: var(--red);
  margin-bottom: 8px;
}

.tl-item h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}

.tl-item p { font-size: 13.5px; }

.tl-item .arrow-list {
  margin-top: 12px;
}

.tl-item .arrow-list li {
  --bullet-pad: 5px;
  font-size: 13.5px;
  font-weight: 400;
}

/* ---------- collage / careers-style section ---------- */

.collage-sec { padding: 120px 0; }

.collage-sec__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}

.collage {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 18px;
}

.collage img {
  width: 100%;
  height: auto;
}

.collage__col { display: flex; flex-direction: column; gap: 18px; }

.collage__col:first-child { margin-top: 60px; }

/* ---------- partners ---------- */

.partners { padding: 100px 0; background: #fff; }

.partners__head { text-align: left; max-width: 720px; margin: 0 0 60px; }

.partners__logos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
  width: 100%;
}

.partners__logos img {
  width: 100%;
  height: clamp(110px, 12vw, 156px);
  object-fit: contain;
  object-position: center;
}

/* ---------- page hero (inner pages) ---------- */

.page-hero {
  margin-top: var(--header-h);
  background: var(--grey);
  padding: 110px 0 80px;
  position: relative;
  overflow: hidden;
}

.page-hero::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 200px;
  height: 200px;
  display: block;
  background:
    linear-gradient(var(--ink), var(--ink)) 50% 0 / 50px 50px no-repeat,
    linear-gradient(#c9c9c9, #c9c9c9) 100% 50% / 50px 50px no-repeat,
    linear-gradient(#6e6e74, #6e6e74) 25% 100% / 50px 50px no-repeat;
  opacity: 0.12;
}

.page-hero h1.display { max-width: 24ch; }

.page-hero .lead { margin-top: 24px; }

/* ---------- generic content section ---------- */

.section { padding: 100px 0; }
.section--grey { background: var(--grey); }

.section__head { max-width: 720px; margin-bottom: 64px; text-align: left; }

.timeline-sec__head,
.drive__head { text-align: left; }

/* ---------- cards (news / solutions) ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 34px;
}

.card {
  background: #fff;
  box-shadow: 0 18px 44px rgba(17, 17, 20, 0.08);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(17, 17, 20, 0.14);
}

.card__img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--grey-card);
}

.card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__img--contain {
  background: #fff;
}

.card__img--contain img {
  object-fit: contain;
  padding: 28px;
  box-sizing: border-box;
}

.card__body {
  padding: 30px 32px 34px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.card__body .eyebrow { margin-bottom: 0; }

.card__body h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.45;
}

.card__title-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.card__title-link:hover { color: var(--red); }

.card__body p { font-size: 14px; }

.card__body .text-link { margin-top: auto; align-self: flex-start; padding-top: 10px; }

/* ---------- team ---------- */

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 30px;
}

.team-card img { width: 100%; height: auto; }

.team-card h4 {
  font-family: var(--font-display);
  font-stretch: 115%;
  font-size: 15px;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 16px;
}

.team-card span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  line-height: 1.6;
  display: block;
  margin-top: 4px;
}

/* ---------- certifications ---------- */

.certs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
}

.cert {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 26px;
  align-items: start;
}

.cert img { box-shadow: 0 12px 30px rgba(17, 17, 20, 0.12); }

.cert h4 { color: var(--ink); font-size: 15px; margin-bottom: 8px; }
.cert p { font-size: 13.5px; }

/* ---------- trio cards (solution detail pages) ---------- */

.trio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 34px;
}

.trio__item {
  background: #fff;
  box-shadow: 0 18px 44px rgba(17, 17, 20, 0.08);
  display: flex;
  flex-direction: column;
}

.trio__item img {
  width: 100%;
  height: auto;
}

.trio__body { padding: 28px 30px 32px; }

.trio__body h3 {
  font-family: var(--font-display);
  font-stretch: 115%;
  font-size: 16px;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 12px;
}

.trio__body p { font-size: 14px; }

/* ---------- map embed ---------- */

.map-embed {
  margin-top: 80px;
}

.map-embed iframe {
  width: 100%;
  height: 440px;
  border: 0;
  display: block;
  box-shadow: 0 24px 60px rgba(17, 17, 20, 0.12);
}

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

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
  margin-bottom: 80px;
}

.contact-tile {
  background: var(--grey);
  padding: 36px 34px;
}

.contact-tile .eyebrow { margin-bottom: 10px; color: var(--red); }

.contact-tile p {
  font-family: var(--font-display);
  font-stretch: 110%;
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  line-height: 1.5;
}

.contact-form { max-width: 720px; }

.contact-form .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.contact-form label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  display: block;
  margin: 22px 0 8px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid #d8d8d4;
  background: #fff;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  transition: border-color 0.2s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--red);
}

.contact-form .btn { margin-top: 30px; }

.form-alert {
  margin-bottom: 24px;
  padding: 16px 18px;
  border-left: 4px solid transparent;
  font-size: 14.5px;
  line-height: 1.5;
}

.form-alert--success {
  background: #edf7ee;
  border-color: #2f8f4e;
  color: #1f5f34;
}

.form-alert--error {
  background: #fdeeee;
  border-color: var(--red);
  color: #7a1f1f;
}

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

/* Accessories page: remove .accessories-products--hidden to restore product sections */
.accessories-products--hidden {
  display: none;
}

/* ---------- FAQ ---------- */

.faq { max-width: 820px; }

.faq details {
  border-bottom: 1px solid #ddddd8;
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 24px 44px 24px 0;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--ink);
  position: relative;
}

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

.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--red);
  transition: transform 0.25s ease;
}

.faq details[open] summary::after { content: "–"; }

.faq details p { padding: 0 0 26px; max-width: 64ch; }

/* ---------- article ---------- */

.article { padding: 70px 0 110px; }

.article__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}

.article__figure {
  margin: 0 0 44px;
}

.article__figure img {
  width: 100%;
  height: auto;
  box-shadow: 0 24px 60px rgba(17, 17, 20, 0.12);
}

.article__content p {
  margin-bottom: 22px;
  font-size: 15.5px;
  line-height: 1.7;
  max-width: none;
}

.article__back {
  margin-top: 50px;
  padding-top: 32px;
  border-top: 1px solid #ddddd8;
}

.article__aside {
  position: sticky;
  top: calc(var(--header-h) + 32px);
  background: var(--grey);
  padding: 32px 28px 36px;
}

.article__aside > .eyebrow {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--red);
  margin-bottom: 10px;
}

.article__aside-title {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--title-blue);
  margin-bottom: 24px;
  line-height: 1.2;
}

.article__aside .eyebrow {
  margin-bottom: 10px;
}

.article__related {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 18px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid #ddddd8;
  transition: opacity 0.2s ease;
}

.article__related:last-of-type {
  border-bottom: none;
  margin-bottom: 24px;
}

.article__related:hover { opacity: 0.82; }

.article__related img {
  width: 100%;
  height: auto;
}

.article__related h4 {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  margin-top: 6px;
}

.article__related .eyebrow {
  font-size: 10px;
  margin-bottom: 0;
}

.page-hero--article h1.display {
  max-width: none;
}

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

.cta-band {
  background-color: #050810;
  color: #fff;
  padding: 90px 0;
  position: relative;
  overflow: hidden;
}

.cta-band .wrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.cta-band h2 { color: #fff; max-width: 24ch; }

.cta-band__copy p {
  margin-top: 14px;
  max-width: 44ch;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}

.cta-band .btn { flex-shrink: 0; }

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

.footer {
  background: #0b0b0e;
  color: #b9b9c0;
  padding: 90px 0 50px;
  font-size: 13.5px;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 1.3fr;
  gap: 60px;
}

.footer h5 {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #76767e;
  margin-bottom: 20px;
}

.footer h5:not(:first-child) { margin-top: 42px; }

.footer ul { list-style: none; }

.footer ul li { margin-bottom: 10px; }

.footer a:hover { color: #fff; }

.footer__brand img {
  height: 52px;
  width: auto;
}

.footer__brand p { margin: 26px 0 34px; max-width: 30ch; }

.footer__company {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  margin: 18px 0 0;
}

.footer__bottom {
  margin-top: 70px;
  padding-top: 28px;
  border-top: 1px solid #232329;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #76767e;
}

/* ---------- reveal animations ---------- */

.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.in { opacity: 1; transform: none; }

.reveal-d1 { transition-delay: 0.12s; }
.reveal-d2 { transition-delay: 0.24s; }
.reveal-d3 { transition-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

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

@media (max-width: 1100px) {
  .stats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 920px) {
  .topbar__nav {
    position: fixed;
    top: var(--header-h);
    right: 0;
    left: 0;
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px min(4vw, 30px) 36px;
    gap: 22px;
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.12);
    transform: translateY(-130%);
    transition: transform 0.3s ease;
  }

  .topbar__nav.open { transform: none; }

  .nav-item { width: 100%; }

  .dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    min-width: 0;
    padding: 6px 0 0 16px;
  }

  .dropdown::before { display: none; }

  .nav-toggle { display: block; }

  body.nav-open .nav-toggle span { background: transparent; }
  body.nav-open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle span::after { transform: translateY(-7px) rotate(-45deg); }

  .stats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }

  .feature__grid,
  .collage-sec__grid { grid-template-columns: 1fr; }

  .feature__grid--flip .feature__media { order: 0; }

  .feature--about-intro .feature__media img {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }

  .casestudy__card { grid-template-columns: 1fr; }

  .drive__tiles { grid-template-columns: 1fr; }

  .partners__logos {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }

  .partners__logos img {
    height: clamp(88px, 14vw, 120px);
  }

  .hero__slider-band .hero__container {
    width: 100%;
  }

  .hero__stage {
    aspect-ratio: unset;
    height: clamp(360px, 62vh, 520px);
  }

  .hero__slide {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .hero__slide img {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: unset;
    object-fit: cover;
    object-position: center;
  }

  .hero__title {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    flex-shrink: 0;
    margin: 0;
    padding: 18px 20px;
    background: var(--hero-edge);
    text-align: left;
    font-size: clamp(18px, 4.8vw, 24px);
    line-height: 1.2;
    max-width: none;
  }

  .cta-band .wrap { flex-direction: column; align-items: flex-start; }
  .cta-band .btn { align-self: stretch; text-align: center; }

  .hero > .hero__container:last-of-type { margin-bottom: -48px; }

  .hero__mission {
    width: 85%;
    height: auto;
    min-height: 120px;
    margin-top: 24px;
    padding: 28px 80px 28px 28px;
  }

  .drive {
    padding-top: calc(clamp(72px, 9vw, 110px) + 48px);
  }

  .pixels {
    right: -20px;
    width: 64px;
    height: 64px;
    grid-template: repeat(3, 21px) / repeat(3, 21px);
  }

  .timeline::before { left: 8px; }

  .tl-item,
  .tl-item:nth-child(odd),
  .tl-item:nth-child(even) {
    width: auto;
    margin-left: 44px;
    align-self: stretch;
  }

  .tl-item:nth-child(odd)::after { right: auto; left: -14px; border-left: none; border-right: 14px solid var(--grey); }
  .tl-item:nth-child(odd) .tl-item__dot { right: auto; left: -41px; }
  .tl-item:nth-child(even) .tl-item__dot { left: -41px; }

  .footer__grid { grid-template-columns: 1fr; gap: 40px; }

  .contact-form .row { grid-template-columns: 1fr; }

  .article__layout {
    grid-template-columns: 1fr;
  }

  .article__aside {
    position: static;
  }
}

@media (max-width: 560px) {
  .hero > .hero__container:last-of-type { margin-bottom: -36px; }

  .hero__stage {
    height: clamp(320px, 58vh, 440px);
  }

  .hero__title {
    padding: 16px 18px;
    font-size: clamp(17px, 4.6vw, 21px);
  }

  .hero__mission {
    width: 92%;
    margin-top: 16px;
    padding: 24px 64px 24px 24px;
  }

  .drive {
    padding-top: calc(64px + 36px);
  }

  .partners__logos {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .partners__logos img {
    height: clamp(72px, 18vw, 96px);
  }

  .hero > .hero__container { width: calc(100vw - 32px); }
  .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cert { grid-template-columns: 100px 1fr; }
}

/* ---------- Coming soon ---------- */

.coming-soon-page {
  margin: 0;
  min-height: 100vh;
  background: var(--white, #fff);
}

.coming-soon-page .topbar,
.coming-soon-page .footer,
.coming-soon-page .cta-band {
  display: none !important;
}

.coming-soon {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 48px 24px;
  text-align: center;
}

.coming-soon__inner {
  max-width: 640px;
}

.coming-soon__logo {
  width: min(280px, 72vw);
  height: auto;
  margin: 0 auto 36px;
  display: block;
}

.coming-soon__email {
  font-size: 18px;
  line-height: 1.5;
  margin: 0;
}

.coming-soon__email a {
  color: var(--ink, #111114);
  font-weight: 500;
  text-decoration: none;
}

.coming-soon__email a:hover {
  color: var(--red, #eb0a1e);
}

/* ---------- Contact Form 7 ---------- */

.wpcf7 form.contact-form {
  max-width: 720px;
}

.wpcf7 form.contact-form .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
  margin-bottom: 18px;
}

.wpcf7 form.contact-form label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.wpcf7 form.contact-form input[type="text"],
.wpcf7 form.contact-form input[type="email"],
.wpcf7 form.contact-form textarea {
  width: 100%;
  border: 1px solid #cfcfca;
  border-radius: 0;
  padding: 14px 16px;
  font: inherit;
  background: #fff;
}

.wpcf7 form.contact-form input:focus,
.wpcf7 form.contact-form textarea:focus {
  outline: 2px solid var(--red);
  border-color: var(--red);
}

.wpcf7 form.contact-form .btn,
.wpcf7 form.contact-form input[type="submit"] {
  margin-top: 30px;
}

.wpcf7-not-valid-tip {
  color: var(--red);
  font-size: 13px;
  margin-top: 6px;
}

.wpcf7-response-output {
  margin: 0 0 24px;
  padding: 14px 18px;
  border-width: 1px;
  border-style: solid;
  font-size: 14px;
}

.wpcf7 form.sent .wpcf7-response-output {
  background: #edf7ee;
  border-color: #2f7a3e;
  color: #1f5a2c;
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
  background: #fdeeee;
  border-color: var(--red);
  color: #7a1f1f;
}

@media (max-width: 720px) {
  .wpcf7 form.contact-form .row { grid-template-columns: 1fr; }
}