/* =========================================================
   SSV – Special Security Vehicles | Landing page
   Built from Adobe XD reference (desktop 1920 / mobile 375)
   ========================================================= */

@font-face { font-family: "Bai Jamjuree"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/bai-jamjuree-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Bai Jamjuree"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/bai-jamjuree-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Bai Jamjuree"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/bai-jamjuree-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Bai Jamjuree"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/bai-jamjuree-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Bai Jamjuree"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/bai-jamjuree-latin-700-normal.woff2") format("woff2"); }

:root {
  --orange: #FF5A28;
  --orange-deep: #FB5928;
  --bg-header: #1E2223;
  --bg-dark: #111312;
  --bg-hero: #0C0D0F;
  --white: #FFFFFF;
  --text-dark: #141615;
  --grey-light-bg: #808080;
  --grey-mission: #696969;
  --grey-dark-bg: #7A7C7B;
  --para-dark: #D8D8D8; /* paragraph text on dark backgrounds */
  --grey-nav: #75797A;
  --grey-label: #6E706F;

  --font: "Bai Jamjuree", "Segoe UI", Arial, sans-serif;

  --container: 1360px;
  --gutter: 40px;
  --header-h: 70px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  color: var(--white);
  background: var(--bg-dark);
  -webkit-font-smoothing: antialiased;
  padding-top: var(--header-h);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure { margin: 0; }
button { font: inherit; cursor: pointer; }
address { font-style: normal; }
body.is-locked { overflow: hidden; }

.container {
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin-inline: auto;
}
.br-mobile { display: none; }

section[id] { scroll-margin-top: var(--header-h); }

/* ---------- Typography ---------- */
.h2 {
  font-size: 45px;
  line-height: 1.12;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--orange);
  letter-spacing: 0;
}
.h2--xl { font-size: 54px; line-height: 1.1; }
.text-white { color: var(--white); }
.subtitle { font-size: 20px; line-height: 1.4; margin-top: 12px; }
.section--light .subtitle { color: var(--text-dark); }
.body { font-size: 15px; line-height: 1.66; font-weight: 300; color: var(--grey-light-bg); }
.body--dark { color: var(--para-dark); }
.text-orange { color: var(--orange); font-weight: 600; }
.lead { font-size: 19px; line-height: 1.58; color: var(--text-dark); }

/* ---------- Sections ---------- */
.section--light { background: var(--white); color: var(--text-dark); }
.section--dark { background: var(--bg-dark); }
.section-head--center { text-align: center; }
.section-head__intro { max-width: 580px; margin: 26px auto 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 60px; padding: 0 32px;
  font-size: 17px; font-weight: 400; text-transform: uppercase; letter-spacing: .01em;
  background: transparent; color: var(--orange);
  border: 1px solid var(--orange); border-radius: 0;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.btn:hover, .btn:focus-visible { background: var(--orange); color: var(--white); outline: none; }
.btn--block { width: 100%; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  background: var(--bg-header);
  display: flex; align-items: center;
  padding-inline: clamp(24px, 6.4vw, 123px);
}
.logo img { width: 101px; height: auto; }
.main-nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.main-nav ul { display: flex; align-items: center; }
.main-nav li { display: flex; align-items: center; }
.main-nav li + li::before {
  content: ""; width: 1.5px; height: 14px; background: var(--orange); margin-inline: 22px;
}
.main-nav a { font-size: 14px; color: var(--grey-nav); transition: color .2s; letter-spacing: .01em; }
.main-nav a:hover, .main-nav a.is-active { color: var(--white); }

.menu-toggle {
  display: none; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; padding: 0; background: none; border: 0;
}
.menu-toggle span {
  position: absolute; left: 2.5px; height: 2.5px; width: 27px; background: var(--white);
  transition: transform .3s var(--ease), opacity .2s, background-color .2s, width .3s var(--ease);
}
.menu-toggle span:nth-child(1) { top: 7px; }
.menu-toggle span:nth-child(2) { top: 15px; left: 7px; width: 18px; background: var(--orange); }
.menu-toggle span:nth-child(3) { top: 23px; }
.menu-toggle[aria-expanded="true"] span { background: var(--orange); height: 2px; width: 31px; left: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
  background: var(--orange-deep);
  display: none;
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; }
.mobile-menu ul { padding-top: 76px; text-align: center; }
.mobile-menu li + li { margin-top: 48px; }
.mobile-menu a { font-size: 27px; line-height: 30px; font-weight: 400; text-transform: uppercase; color: var(--white); }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative; overflow: hidden;
  height: calc(100vh - var(--header-h));
  min-height: 620px; max-height: 1010px;
  background: var(--bg-hero);
  container-type: size;
  --ar: 1.7778; /* 1920 / 1080 */
}
/* "cover" box that keeps the image's aspect ratio so light layers stay pinned to the vehicles */
.hero__media {
  position: absolute; left: 50%; bottom: 0;
  width: max(100cqw, calc(100cqh * var(--ar)));
  aspect-ratio: var(--ar);
  transform: translateX(-50%);
  transform-origin: 50% 60%;
  will-change: transform;
}
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__title {
  position: absolute; left: 0; right: 0; top: 13.4%;
  text-align: center; font-size: 30px; line-height: 1.3; font-weight: 400;
  letter-spacing: .3em; text-transform: uppercase; color: var(--white);
  padding-left: .3em; /* optically balance trailing tracking */
  text-shadow: 0 0 30px rgba(0,0,0,.6);
}
.scroll-down {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  width: 76px; height: 76px; border: 1px solid var(--orange); border-radius: 50%;
  display: grid; place-items: center; color: var(--orange);
  transition: background-color .25s, color .25s;
}
.scroll-down svg { animation: nudge 2s ease-in-out infinite; }
.scroll-down:hover { background: var(--orange); color: var(--white); }
.hero__cta { display: none; }

@keyframes heroIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes nudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }

/* =========================================================
   WHO WE ARE / ABOUT
   ========================================================= */
.about { padding: 124px 0 clamp(140px, 15.5vw, 298px); }
.about__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 48.2%;
  column-gap: 7%; align-items: start; margin-top: 140px;
}
.about__media { order: 2; }
.about__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.about__text { order: 1; max-width: 600px; }
.about__text .h2 { margin-bottom: 42px; }
.about__text .body + .body { margin-top: 25px; }
.about__text .lead { margin-top: 22px; max-width: 520px; }

/* =========================================================
   WHAT WE DO
   ========================================================= */
.what { padding: 172px 0 216px; }
.what__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 7%; align-items: start; }
.what__text { order: 2; text-align: right; }
.what__text .h2 { margin-bottom: 26px; }
.statement { font-size: 28px; line-height: 1.62; font-weight: 400; max-width: 560px; margin-left: auto; }
.tags { order: 1; display: flex; flex-wrap: wrap; gap: 23px 20px; max-width: 620px; padding-top: 36px; }
.tag {
  display: inline-flex; align-items: center; height: 52px; padding: 0 22px;
  border: 1px solid var(--orange); font-size: 17px; color: var(--white);
}

/* =========================================================
   MISSION / VISION
   ========================================================= */
.mission { padding-top: 267px; }
.mission__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 76px; margin-top: 70px; }
.mission__body { margin-top: 30px; font-size: 23px; line-height: 1.43; font-weight: 300; color: var(--grey-mission); max-width: 560px; }

/* Decorative pattern bands */
.pattern { height: 233px; background-repeat: repeat-x; background-position: left top; }
.pattern--light { background-image: url("../img/pattern-light.svg"); margin-top: 172px; }
.pattern--dark { background-image: url("../img/pattern-dark.svg"); margin-top: 178px; }

/* =========================================================
   SOLUTIONS
   ========================================================= */
.solutions { padding: 131px 0 140px; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px; margin-top: 170px; }
.card { text-align: center; display: flex; flex-direction: column; align-items: center; }
.card__img { width: 100%; aspect-ratio: 334 / 225; object-fit: contain; transition: filter .5s var(--ease); }
.card:hover .card__img { filter: drop-shadow(0 12px 30px rgba(255, 90, 40, .28)); }
.card__title { margin-top: 48px; font-size: 23px; font-weight: 700; text-transform: uppercase; color: var(--orange); }
.card__text { margin-top: 12px; max-width: 350px; font-size: 15px; line-height: 1.66; font-weight: 300; color: var(--para-dark); flex: 1; }
.card .btn { margin-top: 40px; }

/* =========================================================
   PROTECTION LEVELS / CERTIFICATIONS
   ========================================================= */
.certs { padding: 40px 0 30px; }
.certs__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  width: min(1310px, 100%); margin: 125px auto 0;
}
.cert { --cut: 56px; --cut-y: 72px; --edge: rgba(255, 255, 255, .38); position: relative; transition: filter .45s var(--ease); }
.cert__frame {
  padding: 1px; background: var(--edge); transition: background-color .45s var(--ease);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut-y), 100% 100%, 0 100%);
}
.cert__inner {
  min-height: 411px; padding: 56px 54px 60px; background: #222326;
  clip-path: polygon(0 0, calc(100% - var(--cut) + .5px) 0, 100% calc(var(--cut-y) - .6px), 100% 100%, 0 100%);
}
.cert:hover, .cert.is-active { --edge: var(--orange); filter: drop-shadow(0 22px 26px rgba(255, 90, 40, .22)); }
.cert__icon { width: 152px; height: 140px; overflow: visible; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cert__icon .w { stroke: var(--white); }
.cert__icon .o { stroke: var(--orange); }
.cert__icon .fill { fill: #222326; }
.cert__bullet { transition: transform .5s var(--ease); }
.cert:hover .cert__bullet { transform: translateX(4px); }
.cert__title {
  position: relative; display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 12px;
  margin-top: 28px; padding-left: 16px; color: var(--white);
}
.cert__title::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 32px; margin-top: -17px;
  background: var(--orange); transform-origin: bottom;
}
.cert__name { font-size: 33px; line-height: 1.15; font-weight: 700; text-transform: uppercase; }
.cert__std { font-size: 16px; font-weight: 400; }
.certs .section-head__intro { max-width: 410px; font-size: 16px; line-height: 1.65; }
.cert__text { margin-top: 30px; max-width: 495px; font-size: 16px; line-height: 1.38; font-weight: 300; color: var(--para-dark); }

/* =========================================================
   CAPABILITIES
   ========================================================= */
.capabilities { padding: 150px 0 194px; }
.cap__grid { display: grid; grid-template-columns: minmax(0, 1fr) 62.4%; column-gap: 40px; margin-top: 116px; align-items: start; }
.cap__media { order: 2; }
.cap__media img { width: 100%; aspect-ratio: 849 / 521; object-fit: cover; }
.cap__list { order: 1; max-width: 390px; padding-top: 6px; }
.cap__list li + li { margin-top: 30px; }
.cap__list h3 { font-size: 19px; font-weight: 400; color: var(--white); }
.cap__list p { margin-top: 10px; font-size: 15px; line-height: 1.66; font-weight: 300; color: var(--para-dark); }

/* =========================================================
   ENGINEERED + SLIDER
   ========================================================= */
.engineered { padding: 0 0 300px; }
.engineered .subtitle { font-size: 19px; line-height: 1.58; }
.features { display: grid; grid-template-columns: repeat(5, minmax(0, 204px)); margin-top: 65px; }
.feature {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 8px 10px 4px;
  border-left: 1.5px dashed rgba(255,255,255,.28);
}
.feature:last-child { border-right: 1.5px dashed rgba(255,255,255,.28); }
.feature svg { width: 86px; height: 86px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
.feature svg .w { stroke: var(--white); }
.feature svg .o { stroke: var(--orange); }
.feature svg .bg { fill: var(--bg-dark); stroke: none; }
.feature:hover svg { transform: translateY(-4px); filter: drop-shadow(0 0 10px rgba(255, 90, 40, .35)); }
.feature span { margin-top: 20px; font-size: 15px; line-height: 1.8; font-weight: 300; text-transform: uppercase; color: var(--grey-label); }

.slider { position: relative; margin-top: 225px; }
.slider__viewport { overflow: hidden; }
.slider__track { display: flex; transition: transform .6s var(--ease); touch-action: pan-y; }
.slider__slide { flex: 0 0 100%; overflow: hidden; }
.slider__slide img { width: 100%; aspect-ratio: 1360 / 670; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.slider__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 60px; height: 60px; border: 0; padding: 0;
  background: var(--orange); display: grid; place-items: center;
  transition: background-color .2s;
}
.slider__arrow svg { width: 12px; height: 16px; fill: var(--bg-dark); }
.slider__arrow:hover { background: #ff7447; }
.slider__arrow--prev { left: -82px; }
.slider__arrow--next { right: -82px; }
.slider__dots { display: none; justify-content: center; gap: 7px; margin-top: 16px; }
.slider__dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: var(--white); transition: background-color .2s; }
.slider__dots button[aria-selected="true"] { background: var(--orange); }

/* =========================================================
   WHY SSV
   ========================================================= */
.why {
  position: relative;
  min-height: 56.1vw; /* 1077 / 1920 */
  overflow: hidden;
  background: var(--bg-dark) url("../img/why-ssv-poster.jpg") center / cover no-repeat;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.why__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.why::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .38); }
.why__inner { position: relative; z-index: 1; transform: translateY(-15%); }
.h2--why { font-size: 66px; }
.why__tagline { margin-top: 14px; font-size: 18px; color: var(--white); }
.why-spacer { display: none; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact { background: var(--bg-header); padding-top: 256px; }
.contact__kicker { margin-top: 18px; font-size: 20px; text-transform: uppercase; color: var(--white); }
.contact .section-head__intro { max-width: 560px; }
.contact__grid {
  width: min(816px, 100%); margin: 76px auto 0;
  display: grid; grid-template-columns: 1fr 268px; column-gap: 40px; align-items: start;
}
.contact__details h3 { font-size: 20px; font-weight: 400; color: var(--white); }
.contact__details p { margin-top: 14px; font-size: 14px; line-height: 1.8; font-weight: 300; color: var(--para-dark); }
.contact__details p + p { margin-top: 10px; }
.contact__details a:hover { color: var(--orange); }
.contact__action { padding-top: 6px; }
.btn--enquiry { width: 268px; }

/* Footer bar */
.site-footer { height: 37px; background: var(--orange-deep); }

/* =========================================================
   CONTACT MODAL
   ========================================================= */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px 16px;
  visibility: hidden; opacity: 0; transition: opacity .3s var(--ease), visibility .3s; }
.modal.is-open { visibility: visible; opacity: 1; }
.modal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.modal__panel {
  position: relative; width: min(783px, 100%); max-height: calc(100vh - 48px); overflow-y: auto;
  background: var(--bg-header); padding: 50px 69px 64px;
  transform: translateY(20px); transition: transform .35s var(--ease);
  outline: none;
}
.modal.is-open .modal__panel { transform: none; }
.modal__close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; padding: 8px; background: none; border: 0; }
.modal__close svg { width: 24px; height: 24px; stroke: var(--orange); stroke-width: 1.4; fill: none; }
.modal__close:hover svg { stroke: var(--white); }
.modal .h2 { font-size: 36px; }
.modal__sub { margin-top: 8px; font-size: 17px; color: var(--white); }

.form { margin-top: 38px; }
.form__row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 29px; }
.field { display: block; margin-bottom: 22px; }
.field__label { display: block; font-size: 16px; font-weight: 300; color: var(--grey-nav); }
.field__hint { display: block; margin-top: 2px; font-size: 12.5px; color: var(--white); }
.field input, .field textarea {
  display: block; width: 100%; margin-top: 10px;
  height: 46px; padding: 10px 14px; border: 2px solid transparent; border-radius: 0;
  background: var(--white); color: var(--text-dark); font: 400 16px/1.4 var(--font);
  transition: border-color .2s;
}
.field textarea { height: 147px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--orange); }
.field.is-invalid input, .field.is-invalid textarea { border-color: #ff2d2d; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* Phone with country code */
.phone { display: flex; gap: 8px; margin-top: 10px; }
.field .phone input { margin-top: 0; flex: 1; min-width: 0; }
.phone__country { position: relative; flex: 0 0 118px; height: 46px; background: var(--white); border: 2px solid transparent; transition: border-color .2s; }
.phone__country:focus-within { border-color: var(--orange); }
.phone__display {
  position: absolute; inset: 0; display: flex; align-items: center; gap: 6px; padding: 0 30px 0 12px;
  font: 400 16px/1 var(--font); color: var(--text-dark); pointer-events: none; white-space: nowrap;
}
.phone__display::after { /* chevron */
  content: ""; position: absolute; right: 12px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--orange); border-bottom: 2px solid var(--orange); transform: rotate(45deg);
}
.phone__flag { font-size: 18px; line-height: 1; }
.phone__country select {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
  font: 400 16px var(--font); color: var(--text-dark); border: 0;
}
.field--phone.is-invalid .phone input { border-color: #ff2d2d; }
.btn--submit { width: 268px; height: 60px; margin-top: 18px; font-size: 18px; }
.form__status { margin-top: 16px; font-size: 14px; min-height: 1em; color: var(--grey-nav); }
.form__status.is-success { color: #7bd88f; }
.form__status.is-error { color: #ff6b5b; }

/* =========================================================
   MOTION & LIGHTING
   ========================================================= */
/* Lenis smooth scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Hide animated elements until GSAP takes over (only when JS + motion are on) */
.anim .reveal, .anim .cert, .anim .hero__title, .anim .scroll-down, .anim .hero__cta { opacity: 0; }
.anim .h2 { visibility: hidden; }
.anim .h2.is-split { visibility: visible; }
.line-mask { overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }

/* Hero lighting */
.hero__shade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.anim .hero__shade { opacity: 1; }
.hero__sweep {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge;
  background: linear-gradient(100deg, transparent 38%, rgba(255,120,60,.0) 42%, rgba(255,150,90,.55) 50%, rgba(255,120,60,0) 58%, transparent 62%);
  background-size: 300% 100%; background-position: 150% 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 20%, #000 30%, #000 58%, transparent 68%);
          mask-image: linear-gradient(to bottom, transparent 20%, #000 30%, #000 58%, transparent 68%);
}
.headlight {
  position: absolute; left: var(--x); top: var(--y);
  width: 11%; aspect-ratio: 2.4 / 1; transform: translate(-50%, -50%);
  pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: radial-gradient(closest-side, rgba(255,255,255,.95) 0%, rgba(215,232,255,.6) 14%, rgba(160,200,255,.18) 42%, transparent 100%);
}
.headlight::after { /* horizontal lens streak */
  content: ""; position: absolute; left: 50%; top: 50%; width: 260%; height: 7%;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, rgba(200,225,255,.55) 50%, transparent);
  filter: blur(1px);
}
.anim-done .headlight { animation: headlightPulse 4.5s ease-in-out infinite; }
.anim-done .headlight:nth-of-type(2n) { animation-delay: -1.8s; }
@keyframes headlightPulse { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }

/* Orange glow on headings over dark backgrounds */
.section--dark .h2, .contact .h2, .why .h2, .modal .h2 { text-shadow: 0 0 var(--glow, 0px) rgba(255, 90, 40, .45); }
.why .h2 { --glow: 26px; }

/* Button light sheen + glow */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateX(120%); }
.btn:hover, .btn:focus-visible { box-shadow: 0 0 28px rgba(255, 90, 40, .45); }
.scroll-down:hover, .slider__arrow:hover { box-shadow: 0 0 26px rgba(255, 90, 40, .55); }
.tag { transition: box-shadow .3s, background-color .3s; }
.tag:hover { box-shadow: 0 0 18px rgba(255, 90, 40, .35), inset 0 0 12px rgba(255, 90, 40, .18); }

/* Icons glow */
.feature svg .o { filter: drop-shadow(0 0 4px rgba(255, 90, 40, .7)); }

/* Cursor spotlight (desktop, dark sections) */
.cursor-glow {
  position: fixed; left: 0; top: 0; z-index: 60; width: 560px; height: 560px; margin: -280px 0 0 -280px;
  border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(closest-side, rgba(255, 90, 40, .13), rgba(255, 90, 40, .05) 45%, transparent 100%);
  mix-blend-mode: screen; will-change: transform;
}
.cursor-glow.is-on { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor-glow { display: none; } }

/* Parallax image frames */
.about__media, .cap__media, .slider__viewport { overflow: hidden; }
.about__media img, .cap__media img, .slider__slide img { will-change: transform; }
.why { isolation: isolate; }
.why__video { will-change: transform; }

/* Capabilities – scroll-driven highlight */
.cap__list { position: relative; }
.cap__list::before, .cap__list::after {
  content: ""; position: absolute; left: -28px; top: 6px; bottom: 0; width: 1px;
}
.cap__list::before { background: rgba(255,255,255,.12); }
.cap__list::after {
  background: var(--orange); box-shadow: 0 0 10px rgba(255,90,40,.8);
  transform-origin: top; transform: scaleY(var(--cap-p, 0));
}
.cap__list li { transition: opacity .45s var(--ease); }
.cap__list h3 { transition: color .45s var(--ease), text-shadow .45s var(--ease); }
.cap-driven .cap__list li { opacity: .32; }
.cap-driven .cap__list li.is-active { opacity: 1; }
.cap-driven .cap__list li.is-active h3 { text-shadow: 0 0 18px rgba(255, 90, 40, .55); }
.cap__media { position: relative; }
.cap__media::after { /* light sweep on the image as capabilities advance */
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(105deg, transparent 35%, rgba(255,160,110,.55) 50%, transparent 65%);
  background-size: 300% 100%; background-position: var(--cap-sweep, 150%) 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .headlight { opacity: .9; }
  .cursor-glow { display: none; }
}

/* =========================================================
   LARGE DESKTOP / LAPTOP ADJUSTMENTS
   ========================================================= */
@media (max-width: 1560px) {
  .slider__arrow--prev { left: 16px; }
  .slider__arrow--next { right: 16px; }
}
@media (max-width: 1280px) {
  .h2 { font-size: 40px; }
  .h2--xl { font-size: 48px; }
  .h2--why { font-size: 58px; }
  .statement { font-size: 24px; }
  .mission__body { font-size: 20px; }
  .mission { padding-top: 180px; }
  .contact { padding-top: 180px; }
  .cards { gap: 40px; }
}
@media (max-width: 1023px) {
  .certs__grid { gap: 24px; }
  .cert__inner { padding: 44px 34px 48px; }
  .main-nav li + li::before { margin-inline: 14px; }
  .what__grid { grid-template-columns: 1fr; row-gap: 48px; }
  .what__text { order: 0; text-align: left; }
  .statement { margin-left: 0; }
  .cards { gap: 28px; }
  .cap__grid { grid-template-columns: 1fr; row-gap: 48px; }
  .cap__media { order: 0; }
  .cap__list { max-width: none; }
  .features { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* =========================================================
   MOBILE (XD mobile artboard 375)
   ========================================================= */
@media (max-width: 767px) {
  :root { --header-h: 80px; --gutter: 16px; }

  .br-mobile { display: inline; }
  .br-desktop { display: none; }

  /* Header */
  .site-header { justify-content: center; padding-inline: 16px; }
  .logo img { width: 102px; }
  .main-nav { display: none; }
  .menu-toggle { display: block; }
  .mobile-menu { display: block; }

  /* Type */
  .h2, .h2--xl { font-size: 25px; line-height: 1.2; }
  .subtitle { font-size: 16px; margin-top: 10px; }
  .body { font-size: 13.5px; line-height: 1.42; }
  .lead { font-size: 17px; line-height: 1.45; }

  /* Hero – art-directed crop per mobile XD */
  .hero { height: 194vw; min-height: 0; max-height: none; }
  .hero { --ar: .5144; } /* 375 / 729 */
  .headlight { left: var(--mx); top: var(--my); width: 16%; }
  .cap__list::before, .cap__list::after { left: -9px; }
  .hero__title { top: 10.5vw; font-size: 18px; letter-spacing: .34em; line-height: 1.55; }
  .scroll-down { display: none; }
  .hero__cta {
    display: inline-flex; position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%);
    width: calc(100% - 86px); max-width: 290px; height: 48px; font-size: 16px; background: rgba(12,13,15,.35);
  }
  .hero__cta:hover { background: var(--orange); }

  /* About */
  .about { padding: 38px 0 50px; }
  .about__grid { display: block; margin-top: 0; }
  .about__media { margin: 40px calc(var(--gutter) * -1) 0; }
  .about__media img { aspect-ratio: 375 / 251; }
  .about__text { margin-top: 38px; }
  .about__text .h2 { margin-bottom: 22px; }
  .about__text .body + .body { margin-top: 16px; }
  .about__text .lead { margin-top: 20px; }

  /* What we do */
  .what { padding: 60px 0 100px; }
  .what__grid { display: block; }
  .what__text { text-align: center; }
  .what__text .h2 { margin-bottom: 18px; }
  .statement { font-size: 18px; line-height: 1.3; max-width: 290px; margin-inline: auto; }
  .tags { margin-top: 56px; padding-top: 0; gap: 16px 14px; max-width: none; }
  .tag { height: 41px; padding: 0 13px; font-size: 14px; }

  /* Mission */
  .mission { padding-top: 54px; }
  .mission__grid { grid-template-columns: 1fr; row-gap: 48px; margin-top: 44px; }
  .mission__body { margin-top: 20px; font-size: 13.5px; line-height: 1.42; }
  .pattern { height: 145px; background-size: 150px auto; }
  .pattern--light { margin-top: 110px; }
  .pattern--dark { margin-top: 110px; }

  /* Solutions */
  .solutions { padding: 94px 0 80px; }
  .solutions .subtitle { font-size: 18px; max-width: 280px; margin-inline: auto; }
  .cards { grid-template-columns: 1fr; gap: 64px; margin-top: 60px; }
  .card__img { width: 92%; }
  .card__title { margin-top: 34px; font-size: 18px; }
  .card__text { margin-top: 12px; max-width: 250px; font-size: 15px; line-height: 1.35; }
  .card .btn { margin-top: 40px; width: 250px; height: 52px; font-size: 18px; }

  /* Capabilities */
  .capabilities { padding: 80px 0 60px; }
  .capabilities .subtitle { font-size: 17px; max-width: 250px; margin-inline: auto; }
  .capabilities .section-head__intro { margin-top: 18px; font-size: 15px; line-height: 1.4; max-width: 270px; }
  .cap__grid { display: block; margin-top: 40px; }
  .cap__media { margin: 0 calc(var(--gutter) * -1); }
  .cap__media img { aspect-ratio: 375 / 234; }
  .cap__list { margin-top: 55px; }
  .cap__list li + li { margin-top: 38px; }
  .cap__list h3 { font-size: 19px; }
  .cap__list p { margin-top: 10px; font-size: 14px; line-height: 1.75; }

  /* Engineered */
  .engineered { padding: 50px 0 108px; }
  .engineered .subtitle { font-size: 16px; line-height: 1.4; margin-top: 8px; }
  .features {
    grid-template-columns: 1fr 1fr; margin-top: 60px;
    background: linear-gradient(rgba(255,255,255,.28) 50%, transparent 0) center top / 1.5px 10px repeat-y;
  }
  .feature, .feature:last-child { border: 0; padding: 14px 0 22px; }
  .feature svg { width: 76px; height: 76px; }
  .feature span { margin-top: 20px; font-size: 14px; line-height: 1.75; }
  .slider { margin-top: 76px; }
  .slider__slide img { aspect-ratio: 343 / 245; }
  .slider__arrow { display: none; }
  .slider__dots { display: flex; }

  /* Why SSV */
  .why { min-height: 346px; background-position: 42% center; }
  .why__inner { transform: translateY(-14%); }
  .h2--why { font-size: 27px; }
  .why__tagline { margin-top: 10px; font-size: 18px; line-height: 1.45; }
  .why-spacer { display: block; height: 190px; background: var(--bg-dark); }

  /* Contact */
  .contact { padding-top: 106px; text-align: center; }
  .contact__kicker { font-size: 17px; margin-top: 16px; }
  .contact .section-head__intro { font-size: 15px; line-height: 1.55; max-width: 310px; margin-top: 24px; }
  .contact__grid { display: block; margin-top: 50px; }
  .contact__details h3 { font-size: 18px; }
  .contact__details p { font-size: 15px; line-height: 1.55; margin-top: 20px; }

  /* Protection levels */
  .certs { padding: 30px 0 20px; }
  .certs__grid { grid-template-columns: 1fr; gap: 24px; margin-top: 56px; }
  .cert { --cut: 40px; --cut-y: 52px; }
  .cert__inner { min-height: 0; padding: 36px 26px 40px; }
  .cert__icon { width: 118px; height: 109px; }
  .cert__title { margin-top: 22px; padding-left: 14px; }
  .cert__title::before { height: 26px; margin-top: -14px; width: 5px; }
  .cert__name { font-size: 26px; }
  .cert__std { font-size: 14px; }
  .cert__text { margin-top: 20px; font-size: 14.5px; line-height: 1.45; }
  .cert:hover, .cert.is-active { filter: drop-shadow(0 12px 16px rgba(255, 90, 40, .18)); }
  .certs .section-head__intro { font-size: 15px; max-width: 300px; }
  .contact__details p + p { margin-top: 26px; }
  .contact__action { padding-top: 36px; }
  .btn--enquiry { width: 267px; height: 60px; font-size: 18px; }
  .site-footer { height: 40px; }

  /* Modal – mobile XD */
  .modal { place-items: start center; padding: 24px 16px; }
  .modal__panel { width: 100%; max-height: calc(100vh - 48px); padding: 44px 27px 30px; text-align: center; }
  .modal__close { top: 12px; right: 10px; }
  .modal .h2 { font-size: 24px; }
  .modal__sub { font-size: 16px; line-height: 1.3; max-width: 240px; margin-inline: auto; }
  .form { margin-top: 26px; text-align: left; }
  .form__row--2 { grid-template-columns: 1fr; gap: 0; }
  .field { margin-bottom: 14px; }
  .field__label { font-size: 15px; }
  .field__hint { font-size: 11.5px; }
  .field input { height: 40px; margin-top: 10px; }
  .phone__country { flex-basis: 108px; height: 40px; }
  .field .phone input { margin-top: 0; }
  .field textarea { height: 88px; }
  .btn--submit { width: 100%; height: 50px; margin-top: 4px; }
}