/* ==========================================================
   CHERY CANAL MOTORS · FAISALABAD
   Strict Black & White · Editorial Minimalist
   ========================================================== */

:root {
  --black: #000000;
  --ink: #0E0E0E;
  --ink-2: #2A2A2A;
  --ink-3: #5C5C5C;
  --ink-4: #8A8A8A;
  --line: #E5E5E5;
  --line-2: #D0D0D0;
  --line-dark: #1A1A1A;
  --paper: #FFFFFF;
  --paper-2: #FAFAFA;
  --paper-3: #F4F4F4;

  --sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --display: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-slow: cubic-bezier(.16, 1, .3, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility
}

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
  overflow-x: hidden;
  letter-spacing: -.005em
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: opacity .3s var(--ease), color .3s var(--ease)
}

ul,
ol {
  list-style: none
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit
}

img {
  user-select: none;
  -webkit-user-drag: none
}

::selection {
  background: var(--black);
  color: #fff
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px
}

::-webkit-scrollbar-track {
  background: var(--paper-3)
}

::-webkit-scrollbar-thumb {
  background: var(--ink-3)
}

::-webkit-scrollbar-thumb:hover {
  background: var(--black)
}

/* =========== TYPOGRAPHY =========== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--ink)
}

.h-display {
  font-weight: 300;
  letter-spacing: -.03em
}

.h-display strong {
  font-weight: 600
}

/* =========== LAYOUT =========== */
.wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 56px
}

.wrap-tight {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 56px
}

@media(max-width:768px) {

  .wrap,
  .wrap-tight {
    padding: 0 24px
  }
}

section {
  position: relative
}

.sec {
  padding: 160px 0
}

.sec-sm {
  padding: 120px 0
}

.sec-tight {
  padding: 100px 0
}

/* =========== LOADER =========== */
.loader {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .6s, visibility .6s
}

.loader.gone {
  opacity: 0;
  visibility: hidden
}

.loader-bar {
  width: 160px;
  height: 1px;
  background: var(--line);
  overflow: hidden;
  position: relative
}

.loader-bar::after {
  content: "";
  position: absolute;
  left: -30%;
  top: 0;
  width: 30%;
  height: 100%;
  background: var(--black);
  animation: bar 1.4s ease-in-out infinite
}

@keyframes bar {
  0% {
    left: -30%
  }

  100% {
    left: 100%
  }
}

/* =========== TOP BAR =========== */
.utility {
  background: var(--black);
  color: #9C9C9C;
  font-size: 12px;
  padding: 11px 0;
  letter-spacing: .02em
}

.utility-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px
}

.utility-left {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  align-items: center
}

.utility-left a {
  color: #9C9C9C;
  display: inline-flex;
  align-items: center;
  gap: 8px
}

.utility-left a:hover {
  color: #fff
}

.utility-right {
  display: flex;
  gap: 8px;
  align-items: center
}

.utility-right a {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9C9C9C;
  border: 1px solid #2A2A2A
}

.utility-right a:hover {
  background: #fff;
  color: var(--black);
  border-color: #fff
}

.utility-right a svg {
  width: 13px;
  height: 13px
}

/* =========== HEADER NAV =========== */
.header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-bottom: 1px solid transparent;
  transition: all .4s var(--ease);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0)
}

.header.scrolled {
  border-bottom-color: var(--line);
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 1px 8px rgba(0, 0, 0, .04)
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  transition: padding .4s var(--ease)
}

.header.scrolled .nav-inner {
  padding: 16px 0
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px
}

.brand-logo {
  display: flex;
  align-items: center
}

.brand-logo img {
  height: 34px;
  width: auto
}

.brand-divider {
  width: 1px;
  height: 28px;
  background: var(--line)
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1
}

.brand-text .name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .02em
}

.brand-text .sub {
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-top: 2px
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 0
}

.nav-menu>li {
  position: relative
}

.nav-menu>li>a {
  display: block;
  padding: 14px 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: .01em;
  position: relative;
  transition: background .3s var(--ease), color .3s var(--ease)
}

.nav-menu>li>a::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 8px;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease)
}

.nav-menu>li>a:hover {
  background: var(--paper-2)
}

.nav-menu>li>a:hover::after,
.nav-menu>li>a.on::after {
  transform: scaleX(1)
}

.nav-menu>li>a.on {
  color: var(--ink)
}

.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 2px solid var(--black);
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all .3s var(--ease);
  z-index: 100
}

.nav-menu>li:hover .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0)
}

.submenu a {
  display: block;
  padding: 11px 22px;
  font-size: 13px;
  color: var(--ink-2);
  font-weight: 500;
  transition: padding .3s var(--ease), background .3s var(--ease)
}

.submenu a:hover {
  background: var(--paper-2);
  padding-left: 28px
}

.nav-cta {
  background: var(--black);
  color: #fff !important;
  padding: 14px 24px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .05em;
  margin-left: 18px;
  transition: background .3s var(--ease)
}

.nav-cta::after {
  display: none !important
}

.nav-cta:hover {
  background: var(--ink-2) !important;
  color: #fff !important
}

.nav-toggle {
  display: none;
  width: 32px;
  height: 32px;
  flex-direction: column;
  justify-content: center;
  gap: 6px
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--ink);
  transition: transform .3s, opacity .3s
}

.nav-toggle.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg)
}

.nav-toggle.open span:nth-child(2) {
  opacity: 0
}

.nav-toggle.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg)
}

/* =========== BUTTONS (no rounded, no shadows) =========== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 32px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .35s var(--ease);
  font-family: var(--sans)
}

.btn .ar {
  display: inline-block;
  transition: transform .35s var(--ease);
  font-weight: 400
}

.btn:hover .ar {
  transform: translateX(6px)
}

.btn-dark {
  background: var(--black);
  color: #fff;
  border-color: var(--black)
}

.btn-dark:hover {
  background: transparent;
  color: var(--black)
}

.btn-light {
  background: #fff;
  color: var(--black);
  border-color: #fff
}

.btn-light:hover {
  background: transparent;
  color: #fff;
  border-color: #fff
}

.btn-line {
  background: transparent;
  color: var(--black);
  border-color: var(--black)
}

.btn-line:hover {
  background: var(--black);
  color: #fff
}

.btn-line-w {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .5)
}

.btn-line-w:hover {
  background: #fff;
  color: var(--black);
  border-color: #fff
}

/* =========== EYEBROW / SECTION HEAD =========== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: 24px
}

.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--ink)
}

.eyebrow.light {
  color: #9C9C9C
}

.eyebrow.light::before {
  background: #fff
}

.section-head {
  margin-bottom: 80px;
  max-width: 760px
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center
}

.section-head.center .eyebrow {
  justify-content: center
}

.section-head h2 {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.03em;
  margin-bottom: 20px;
  color: var(--ink)
}

.section-head h2 strong {
  font-weight: 600
}

.section-head>p {
  font-size: 1.05rem;
  color: var(--ink-3);
  line-height: 1.7;
  font-weight: 400;
  max-width: 580px
}

.section-head.center>p {
  margin-left: auto;
  margin-right: auto
}

/* =========== HERO =========== */
.hero {
  position: relative;
  background: var(--black);
  color: #fff;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .7;
  filter: grayscale(15%) contrast(1.05)
}

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, transparent 40%, rgba(0, 0, 0, .9) 100%), linear-gradient(90deg, rgba(0, 0, 0, .6) 0%, transparent 60%)
}

.hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 0 0 90px
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: end
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .28em;
  color: #fff;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, .3);
  margin-bottom: 36px
}

.hero-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%
}

.hero h1 {
  font-size: clamp(3rem, 8.5vw, 7rem);
  font-weight: 300;
  line-height: .95;
  letter-spacing: -.035em;
  color: #fff;
  margin-bottom: 32px
}

.hero h1 strong {
  font-weight: 600
}

.hero h1 .line {
  display: block;
  overflow: hidden;
  padding-bottom: 4px
}

.hero h1 .line>span {
  display: inline-block;
  animation: lineUp 1.4s var(--ease-slow) both
}

.hero h1 .line:nth-child(1)>span {
  animation-delay: .4s
}

.hero h1 .line:nth-child(2)>span {
  animation-delay: .6s
}

@keyframes lineUp {
  0% {
    transform: translateY(110%);
    opacity: 0
  }

  100% {
    transform: translateY(0);
    opacity: 1
  }
}

.hero-lead {
  font-size: 1.1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .85);
  max-width: 520px;
  margin-bottom: 44px;
  font-weight: 300;
  opacity: 0;
  animation: fadeUp 1s var(--ease-slow) .95s forwards
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 1s var(--ease-slow) 1.1s forwards
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(20px)
  }

  100% {
    opacity: 1;
    transform: translateY(0)
  }
}

.hero-side {
  opacity: 0;
  animation: fadeUp 1.2s var(--ease-slow) 1.3s forwards
}

.hero-stat {
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .15)
}

.hero-stat:first-child {
  border-top: 1px solid rgba(255, 255, 255, .15)
}

.hero-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px
}

.hero-stat-row .k {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  color: rgba(255, 255, 255, .6);
  text-transform: uppercase
}

.hero-stat-row .v {
  font-size: 1.6rem;
  font-weight: 400;
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1
}

.hero-stat-row .v small {
  font-size: .55em;
  color: rgba(255, 255, 255, .65);
  margin-left: 3px;
  font-weight: 400
}

/* hero bottom line */
.hero-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  border-top: 1px solid rgba(255, 255, 255, .1);
  background: rgba(0, 0, 0, .4);
  backdrop-filter: blur(12px)
}

.hero-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  gap: 30px;
  flex-wrap: wrap
}

.hero-bottom-inner .ticker {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  color: rgba(255, 255, 255, .7);
  text-transform: uppercase
}

.hero-bottom-inner .ticker .sep {
  margin: 0 16px;
  color: rgba(255, 255, 255, .3)
}

.hero-bottom-inner .scroll {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3em;
  color: rgba(255, 255, 255, .7);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 14px
}

.hero-bottom-inner .scroll::after {
  content: "";
  width: 30px;
  height: 1px;
  background: #fff;
  animation: scrollLine 2s ease-in-out infinite
}

@keyframes scrollLine {

  0%,
  100% {
    transform: scaleX(.3);
    transform-origin: left
  }

  50% {
    transform: scaleX(1)
  }
}

/* =========== VEHICLE GRID =========== */
.vehicles {
  background: var(--paper);
  padding: 160px 0
}

.vehicles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line)
}

.v-card {
  position: relative;
  padding: 48px 40px;
  border-right: 1px solid var(--line);
  transition: background .4s var(--ease), transform .4s var(--ease);
  cursor: pointer;
  text-align: left;
  display: block
}

.v-card:last-child {
  border-right: none
}

.v-card:hover {
  background: var(--paper-2);
  transform: translateY(-4px)
}

.v-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--black);
  transition: width .5s var(--ease);
  z-index: 2
}

.v-card:hover::before {
  width: 100%
}

.v-card-img {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--paper-3);
  margin-bottom: 32px;
  position: relative
}

.v-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 2s var(--ease-slow);
  filter: grayscale(0%)
}

.v-card:hover .v-card-img img {
  transform: scale(1.05)
}

.v-card-num {
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  color: var(--ink);
  padding: 6px 12px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  z-index: 2
}

.v-card-seg {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: 10px
}

.v-card h3 {
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: -.025em;
  margin-bottom: 14px;
  color: var(--ink)
}

.v-card h3 strong {
  font-weight: 600
}

.v-card p {
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.65;
  margin-bottom: 32px;
  max-width: 340px
}

.v-card-specs {
  display: flex;
  gap: 0;
  margin-bottom: 32px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line)
}

.v-card-spec {
  flex: 1;
  padding: 18px 0;
  border-right: 1px solid var(--line)
}

.v-card-spec:last-child {
  border-right: none
}

.v-card-spec:not(:first-child) {
  padding-left: 18px
}

.v-card-spec .v {
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1
}

.v-card-spec .v small {
  font-size: .55em;
  color: var(--ink-3);
  font-weight: 400;
  margin-left: 2px
}

.v-card-spec .k {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-top: 8px
}

.v-card-price {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 24px
}

.v-card-price .from {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--ink-3);
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px
}

.v-card-price .val {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.015em;
  line-height: 1
}

.v-card-arrow {
  width: 42px;
  height: 42px;
  border: 1px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .35s var(--ease);
  color: var(--ink)
}

.v-card:hover .v-card-arrow {
  background: var(--ink);
  color: #fff;
  transform: translateX(4px)
}

/* =========== SPLIT IMAGE-TEXT =========== */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 680px
}

.split-img {
  position: relative;
  overflow: hidden;
  background: var(--paper-3)
}

.split-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(8%)
}

.split-content {
  padding: 120px 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff
}

.split-content.dark {
  background: var(--black);
  color: #fff
}

.split-content.dark .eyebrow {
  color: rgba(255, 255, 255, .6)
}

.split-content.dark .eyebrow::before {
  background: #fff
}

.split-content.dark h2 {
  color: #fff
}

.split-content.dark p {
  color: rgba(255, 255, 255, .7)
}

.split-content h2 {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.025em;
  margin-bottom: 28px
}

.split-content h2 strong {
  font-weight: 600
}

.split-content>p {
  font-size: 1.05rem;
  color: var(--ink-3);
  line-height: 1.75;
  margin-bottom: 20px;
  font-weight: 400;
  max-width: 520px
}

.split-content .btn {
  margin-top: 24px;
  align-self: flex-start
}

.split-list {
  margin: 32px 0 40px;
  border-top: 1px solid var(--line)
}

.split-content.dark .split-list {
  border-top-color: #2A2A2A
}

.split-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--ink)
}

.split-content.dark .split-list li {
  border-bottom-color: #2A2A2A;
  color: #fff
}

.split-list li .k {
  font-weight: 400;
  color: var(--ink-3)
}

.split-content.dark .split-list li .k {
  color: rgba(255, 255, 255, .5)
}

.split-list li .v {
  font-weight: 500;
  letter-spacing: -.005em
}

/* =========== STATS BAND =========== */
.stats {
  background: var(--black);
  color: #fff;
  padding: 140px 0;
  border-top: 1px solid #1a1a1a;
  border-bottom: 1px solid #1a1a1a
}

.stats-head {
  text-align: center;
  margin-bottom: 90px;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto
}

.stats-head .eyebrow {
  color: rgba(255, 255, 255, .6);
  justify-content: center
}

.stats-head .eyebrow::before {
  background: #fff
}

.stats-head h2 {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 300;
  color: #fff;
  line-height: 1.05;
  letter-spacing: -.025em
}

.stats-head h2 strong {
  font-weight: 600
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0
}

.stat {
  padding: 0 40px;
  text-align: left;
  border-right: 1px solid rgba(255, 255, 255, .12)
}

.stat:first-child {
  padding-left: 0
}

.stat:last-child {
  border-right: none;
  padding-right: 0
}

.stat .v {
  font-size: clamp(3rem, 5.5vw, 5.2rem);
  font-weight: 300;
  color: #fff;
  line-height: 1;
  letter-spacing: -.04em;
  margin-bottom: 18px;
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .1)
}

.stat .v small {
  font-size: .4em;
  color: rgba(255, 255, 255, .55);
  font-weight: 400
}

.stat .l {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  color: rgba(255, 255, 255, .55);
  text-transform: uppercase
}

/* =========== PHILOSOPHY (4 pillars) =========== */
.philo {
  padding: 160px 0;
  background: #fff
}

.philo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line)
}

.philo-col {
  padding: 60px 40px;
  border-right: 1px solid var(--line);
  transition: background .35s var(--ease);
  position: relative
}

.philo-col:last-child {
  border-right: none
}

.philo-col:hover {
  background: var(--paper-2)
}

.philo-col::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--black);
  transition: width .5s var(--ease)
}

.philo-col:hover::before {
  width: 100%
}

.philo-num {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: 40px
}

.philo-col h3 {
  font-size: 1.7rem;
  font-weight: 400;
  letter-spacing: -.02em;
  margin-bottom: 18px;
  color: var(--ink)
}

.philo-col p {
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.7;
  font-weight: 400
}

/* =========== EDITORIAL ROW (alternating, like Apple) =========== */
.editorial {
  padding: 160px 0;
  background: var(--paper-2)
}

.ed-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  margin-bottom: 140px
}

.ed-row:last-child {
  margin-bottom: 0
}

.ed-row.flip .ed-row-img {
  order: 2
}

.ed-row.flip .ed-row-info {
  order: 1
}

.ed-row-img {
  aspect-ratio: 5/4;
  overflow: hidden;
  background: #000;
  position: relative
}

.ed-row-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease-slow)
}

.ed-row:hover .ed-row-img img {
  transform: scale(1.04)
}

.ed-row-info h3 {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 300;
  letter-spacing: -.025em;
  line-height: 1.05;
  margin-bottom: 22px
}

.ed-row-info h3 strong {
  font-weight: 600
}

.ed-row-info>p {
  font-size: 1.02rem;
  color: var(--ink-3);
  line-height: 1.75;
  margin-bottom: 32px;
  max-width: 480px
}

.ed-row-meta {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px
}

.ed-row-meta-item {
  flex: 1;
  padding: 18px 0;
  border-right: 1px solid var(--line)
}

.ed-row-meta-item:last-child {
  border-right: none
}

.ed-row-meta-item:not(:first-child) {
  padding-left: 18px
}

.ed-row-meta-item .v {
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1
}

.ed-row-meta-item .v small {
  font-size: .55em;
  color: var(--ink-3);
  margin-left: 2px;
  font-weight: 400
}

.ed-row-meta-item .k {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-top: 8px
}

.ed-row-price {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: 24px
}

.ed-row-price strong {
  display: block;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -.015em;
  margin-top: 6px;
  text-transform: none
}

/* =========== CTA STRIP (black) =========== */
.cta {
  background: var(--black);
  color: #fff;
  padding: 140px 0;
  text-align: center
}

.cta h2 {
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  font-weight: 300;
  color: #fff;
  line-height: 1.05;
  letter-spacing: -.03em;
  margin-bottom: 32px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto
}

.cta h2 strong {
  font-weight: 600
}

.cta p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, .7);
  max-width: 580px;
  margin: 0 auto 48px;
  font-weight: 300;
  line-height: 1.65
}

.cta-actions {
  display: inline-flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center
}

/* =========== SHOWROOM MAP SECTION =========== */
.showroom-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 680px
}

.showroom-info {
  padding: 120px 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff
}

.showroom-info h2 {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 300;
  letter-spacing: -.025em;
  line-height: 1.05;
  margin-bottom: 24px
}

.showroom-info h2 strong {
  font-weight: 600
}

.showroom-info>p {
  font-size: 1.05rem;
  color: var(--ink-3);
  line-height: 1.7;
  margin-bottom: 36px;
  max-width: 480px
}

.showroom-list {
  margin-bottom: 40px;
  border-top: 1px solid var(--line)
}

.showroom-list li {
  display: flex;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  align-items: flex-start
}

.showroom-list .ic {
  width: 36px;
  height: 36px;
  background: var(--black);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.showroom-list .ic svg {
  width: 16px;
  height: 16px
}

.showroom-list .info .k {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: 5px
}

.showroom-list .info .v {
  font-size: .95rem;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.55
}

.showroom-list .info a:hover {
  opacity: .6
}

.showroom-map {
  position: relative;
  background: var(--paper-3);
  min-height: 680px
}

.showroom-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(100%) contrast(1.1)
}

/* =========== PARENT COMPANY PRODUCT DESIGN =========== */
.p-hero {
  position: relative;
  min-height: 85vh;
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
}

.p-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.p-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}

.p-hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: 0 24px;
}

.p-hero-content h1 {
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 300;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.p-hero-content h1 strong {
  font-weight: 600;
}

.p-hero-content p {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.9);
}

.p-section {
  padding: 120px 0;
  background: var(--paper);
}

.p-section-title {
  text-align: center;
  margin-bottom: 80px;
}

.p-section-title h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 300;
  margin-bottom: 16px;
  letter-spacing: -0.03em;
}

.p-section-title h2 strong {
  font-weight: 600;
}

.p-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.p-grid-item {
  text-align: center;
}

.p-grid-item img {
  width: 100%;
  border-radius: 4px;
  margin-bottom: 24px;
  aspect-ratio: 16/10;
  object-fit: cover;
}

.p-grid-item h3 {
  font-size: 1.4rem;
  font-weight: 500;
}

.p-split {
  display: flex;
  align-items: center;
  gap: 80px;
  margin-bottom: 100px;
}

.p-split:last-child {
  margin-bottom: 0;
}

.p-split:nth-child(even) {
  flex-direction: row-reverse;
}

.p-split-img {
  flex: 1;
}

.p-split-img img {
  width: 100%;
  border-radius: 4px;
}

.p-split-content {
  flex: 1;
}

.p-split-content h3 {
  font-size: 2.2rem;
  font-weight: 300;
  margin-bottom: 20px;
  line-height: 1.1;
}

.p-split-content h3 strong {
  font-weight: 600;
}

.p-split-content p {
  font-size: 1.05rem;
  color: var(--ink-3);
  margin-bottom: 24px;
}

@media (max-width: 900px) {
  .p-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  .p-split, .p-split:nth-child(even) {
    flex-direction: column;
    gap: 30px;
    margin-bottom: 80px;
  }
  .p-section {
    padding: 80px 0;
  }
}

/* =========== FOOTER =========== */
.footer {
  background: var(--black);
  color: #9C9C9C;
  padding: 100px 0 0;
  border-top: 1px solid #1a1a1a
}

.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: 48px;
  padding-bottom: 70px;
  border-bottom: 1px solid #1a1a1a
}

.footer-brand img {
  height: 36px;
  width: auto;
  filter: brightness(0) invert(1);
  margin-bottom: 20px
}

.footer-brand .name {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  letter-spacing: .02em;
  margin-bottom: 6px
}

.footer-brand .sub {
  font-size: 10px;
  font-weight: 500;
  color: #9C9C9C;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 24px
}

.footer-brand p {
  font-size: 13.5px;
  line-height: 1.75;
  color: #9C9C9C;
  max-width: 340px;
  margin-bottom: 24px
}

.footer-social {
  display: flex;
  gap: 8px
}

.footer-social a {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 1px solid #2A2A2A;
  transition: all .3s var(--ease)
}

.footer-social a:hover {
  background: #fff;
  color: var(--black);
  border-color: #fff
}

.footer-social a svg {
  width: 14px;
  height: 14px
}

.footer h5 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 28px
}

.footer-links li {
  margin-bottom: 12px
}

.footer-links a {
  font-size: 13.5px;
  color: #9C9C9C;
  font-weight: 400;
  transition: color .3s var(--ease);
  position: relative;
  display: inline-block
}

.footer-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: #fff;
  transition: width .35s var(--ease)
}

.footer-links a:hover {
  color: #fff
}

.footer-links a:hover::after {
  width: 100%
}

.footer-contact li {
  margin-bottom: 22px
}

.footer-contact .k {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
  color: #6A6A6A;
  text-transform: uppercase;
  margin-bottom: 6px
}

.footer-contact .v {
  font-size: 13.5px;
  color: #fff;
  font-weight: 400;
  line-height: 1.55
}

.footer-contact a:hover {
  opacity: .6
}

.footer-bottom {
  padding: 28px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: #6A6A6A;
  letter-spacing: .04em;
  border-top: 1px solid rgba(255, 255, 255, .06)
}

.footer-bottom a {
  color: #9C9C9C
}

.footer-bottom a:hover {
  color: #fff
}

/* =========== PAGE BANNER (sub-pages) =========== */
.page-banner {
  position: relative;
  background: var(--black);
  color: #fff;
  padding: 160px 0 100px;
  overflow: hidden
}

.page-banner-bg {
  position: absolute;
  inset: 0;
  z-index: 1
}

.page-banner-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .35;
  filter: grayscale(40%)
}

.page-banner-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .85) 100%)
}

.page-banner-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 780px;
  margin: 0 auto
}

.page-crumb {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  color: rgba(255, 255, 255, .55);
  text-transform: uppercase;
  margin-bottom: 24px
}

.page-crumb a {
  color: #fff
}

.page-crumb a:hover {
  opacity: .7
}

.page-banner h1 {
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 300;
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1.05
}

.page-banner h1 strong {
  font-weight: 600
}

.page-banner .sub {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, .7);
  margin-top: 22px;
  line-height: 1.7;
  font-weight: 300
}

/* =========== MODEL DETAIL HERO =========== */
.m-hero {
  position: relative;
  background: var(--black);
  color: #fff;
  padding: 140px 0 100px;
  overflow: hidden;
  min-height: 80vh;
  display: flex;
  align-items: center
}

.m-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1
}

.m-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .55;
  filter: grayscale(10%)
}

.m-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .4) 60%, rgba(0, 0, 0, .2) 100%)
}

.m-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 700px
}

.m-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, .3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 32px
}

.m-hero h1 {
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 300;
  color: #fff;
  line-height: .98;
  letter-spacing: -.03em;
  margin-bottom: 28px
}

.m-hero h1 strong {
  font-weight: 600
}

.m-hero>p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, .8);
  line-height: 1.7;
  max-width: 540px;
  margin-bottom: 40px;
  font-weight: 300
}

.m-hero-price {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  padding: 22px 32px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(0, 0, 0, .3);
  backdrop-filter: blur(10px);
  margin-bottom: 40px
}

.m-hero-price .from {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  color: rgba(255, 255, 255, .6);
  text-transform: uppercase
}

.m-hero-price .val {
  font-size: 2.2rem;
  font-weight: 300;
  color: #fff;
  letter-spacing: -.025em;
  line-height: 1
}

.m-hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap
}

/* spec bar */
.spec-bar {
  background: #fff;
  border-bottom: 1px solid var(--line)
}

.spec-bar-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr)
}

.spec-bar-item {
  padding: 42px 32px;
  border-right: 1px solid var(--line);
  text-align: left
}

.spec-bar-item:last-child {
  border-right: none
}

.spec-bar-item .k {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: 14px
}

.spec-bar-item .v {
  font-size: 2rem;
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -.03em;
  line-height: 1
}

.spec-bar-item .v small {
  font-size: .45em;
  color: var(--ink-3);
  font-weight: 400;
  margin-left: 3px
}

/* model gallery */
.m-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 60px
}

.m-gallery img {
  aspect-ratio: 4/3;
  width: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: transform .6s var(--ease);
  filter: grayscale(5%)
}

.m-gallery img:hover {
  transform: scale(1.02)
}

/* specs row */
.specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin-top: 60px
}

.specs h4 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .28em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: 32px
}

.spec-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--line)
}

.spec-line .k {
  font-size: .92rem;
  color: var(--ink-3);
  font-weight: 400
}

.spec-line .v {
  font-size: 1rem;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -.005em;
  text-align: right
}

/* feature grid */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: 60px
}

.feat-card {
  padding: 42px 32px;
  border-right: 1px solid var(--line);
  transition: background .35s var(--ease)
}

.feat-card:nth-child(3n) {
  border-right: none
}

.feat-card:nth-child(n+4) {
  border-top: 1px solid var(--line)
}

.feat-card:hover {
  background: var(--paper-2)
}

.feat-card .num {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .28em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: 20px
}

.feat-card h4 {
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 10px;
  letter-spacing: -.01em;
  color: var(--ink)
}

.feat-card p {
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.65
}

/* colors */
.colors {
  display: flex;
  gap: 32px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 60px
}

.color-chip {
  text-align: center
}

.color-chip .sw {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: transform .4s var(--ease)
}

.color-chip:hover .sw {
  transform: scale(1.1)
}

.color-chip .nm {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
  margin-top: 14px;
  letter-spacing: .04em
}

/* compare table */
.cmp-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 60px
}

.cmp-table thead th {
  padding: 24px 18px;
  text-align: left;
  background: var(--black);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase
}

.cmp-table tbody td {
  padding: 22px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--ink);
  font-weight: 500
}

.cmp-table tbody td:first-child {
  color: var(--ink-3);
  font-weight: 400;
  background: var(--paper-2);
  font-size: 13px
}

.cmp-table tbody tr:hover td:not(:first-child) {
  background: var(--paper-2)
}

/* services grid */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: 60px
}

.svc {
  padding: 48px 32px;
  border-right: 1px solid var(--line);
  transition: background .35s var(--ease)
}

.svc:nth-child(4n) {
  border-right: none
}

.svc:nth-child(n+5) {
  border-top: 1px solid var(--line)
}

.svc:hover {
  background: var(--paper-2)
}

.svc .num {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .28em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: 24px
}

.svc h4 {
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 12px;
  letter-spacing: -.01em;
  color: var(--ink)
}

.svc p {
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.65
}

/* gallery mosaic */
.gallery-mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 180px;
  gap: 14px
}

.g {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: #000
}

.g img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-slow);
  filter: grayscale(10%)
}

.g:hover img {
  transform: scale(1.05)
}

.g::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .75) 0%, transparent 50%);
  opacity: 0;
  transition: opacity .4s var(--ease)
}

.g:hover::after {
  opacity: 1
}

.g .cap {
  position: absolute;
  left: 22px;
  bottom: 22px;
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  opacity: 0;
  transform: translateY(10px);
  transition: all .4s var(--ease);
  z-index: 2
}

.g .cap small {
  display: block;
  font-size: 10px;
  letter-spacing: .22em;
  color: rgba(255, 255, 255, .7);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 4px
}

.g:hover .cap {
  opacity: 1;
  transform: translateY(0)
}

.g-l {
  grid-column: span 8;
  grid-row: span 3
}

.g-m {
  grid-column: span 4;
  grid-row: span 2
}

.g-s {
  grid-column: span 4;
  grid-row: span 2
}

.g-tall {
  grid-column: span 4;
  grid-row: span 3
}

.g-w {
  grid-column: span 6;
  grid-row: span 2
}

/* contact */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px
}

.contact-info h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  letter-spacing: -.025em;
  line-height: 1.05;
  margin-bottom: 24px
}

.contact-info h2 strong {
  font-weight: 600
}

.contact-info>p {
  font-size: 1.05rem;
  color: var(--ink-3);
  line-height: 1.7;
  margin-bottom: 40px
}

.contact-blocks {
  margin-top: 30px;
  border-top: 1px solid var(--line)
}

.contact-block {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  align-items: flex-start
}

.contact-block .ic {
  width: 40px;
  height: 40px;
  background: var(--black);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.contact-block .ic svg {
  width: 18px;
  height: 18px
}

.contact-block .info .k {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .24em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: 6px
}

.contact-block .info .v {
  font-size: 1.05rem;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.5
}

.contact-block .info a:hover {
  opacity: .6
}

/* form */
.form-card {
  background: var(--paper-2);
  padding: 60px 50px;
  border: 1px solid var(--line)
}

.form-card h3 {
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: -.02em;
  margin-bottom: 8px
}

.form-card>p {
  font-size: 14px;
  color: var(--ink-3);
  margin-bottom: 36px
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0
}

.field {
  position: relative;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-2)
}

.field+.field {
  margin-left: 26px
}

.form-row .field:first-child+.field {
  margin-left: 26px
}

.field label {
  position: absolute;
  left: 0;
  top: 32px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--ink-3);
  text-transform: uppercase;
  pointer-events: none;
  transition: all .35s var(--ease)
}

.field input,
.field select,
.field textarea {
  width: 100%;
  background: transparent;
  border: none;
  font-family: var(--sans);
  font-size: .95rem;
  color: var(--ink);
  padding: 6px 0 2px;
  outline: none;
  font-weight: 500
}

.field textarea {
  resize: vertical;
  min-height: 80px
}

.field select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 6'%3E%3Cpath d='M0 0l4 6 4-6z' fill='%238A8A8A'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 9px
}

.field:focus-within {
  border-bottom-color: var(--black)
}

.field:focus-within label,
.field input:not(:placeholder-shown)~label,
.field textarea:not(:placeholder-shown)~label,
.field.has-value label {
  top: 2px;
  font-size: 9.5px;
  color: var(--black)
}

.form-actions {
  margin-top: 40px
}

/* floating WhatsApp / back to top */
.fab-wa {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 998;
  background: var(--black);
  color: #fff;
  padding: 14px 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  transition: all .35s var(--ease);
  text-transform: uppercase;
  animation: fabPulse 2s var(--ease) .5s 1
}

.fab-wa:hover {
  background: var(--ink-2);
  color: #fff;
  transform: translateY(-3px)
}

.fab-wa svg {
  width: 16px;
  height: 16px
}

@keyframes fabPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, .4)
  }

  70% {
    box-shadow: 0 0 0 14px rgba(0, 0, 0, 0)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0)
  }
}

.totop {
  position: fixed;
  bottom: 30px;
  left: 30px;
  z-index: 998;
  width: 44px;
  height: 44px;
  background: #fff;
  color: var(--black);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all .35s var(--ease);
  overflow: hidden
}

.totop.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0)
}

.totop:hover {
  background: var(--black);
  color: #fff;
  border-color: var(--black)
}

.totop-ring {
  position: absolute;
  inset: 0;
  pointer-events: none
}

.totop-ring circle {
  fill: none;
  stroke: var(--black);
  stroke-width: 2;
  stroke-dasharray: 126;
  stroke-dashoffset: 126;
  transition: stroke-dashoffset .2s linear
}

.totop:hover .totop-ring circle {
  stroke: #fff
}

/* Scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--black);
  z-index: 9998;
  width: 0;
  transition: none
}

/* reveal */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s var(--ease-slow), transform 1s var(--ease-slow)
}

.reveal.in {
  opacity: 1;
  transform: translateY(0)
}

.r-d1 {
  transition-delay: .15s
}

.r-d2 {
  transition-delay: .3s
}

.r-d3 {
  transition-delay: .45s
}

.r-d4 {
  transition-delay: .6s
}

/* utils */
.bg-paper2 {
  background: var(--paper-2)
}

.bg-paper3 {
  background: var(--paper-3)
}

.bg-dark {
  background: var(--black);
  color: #fff
}

.text-center {
  text-align: center
}

/* ====================================================
   ADDITIONS — Slideshow, Fixed Mobile Nav, Model Improvements
   ==================================================== */

/* ============ HERO SLIDESHOW ============ */
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s var(--ease-slow);
  pointer-events: none
}

.hero-slide.active {
  opacity: 1;
  pointer-events: auto
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 7s linear
}

.hero-slide.active img {
  transform: scale(1)
}

.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, transparent 75%, rgba(0, 0, 0, .6) 100%);
  pointer-events: none;
}

/* Slide-specific text content (animated in/out with slide) */
.hero-slide-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  padding-bottom: 90px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--ease) .3s, transform .8s var(--ease) .3s;
  pointer-events: none
}

.hero-slide.active .hero-slide-content {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto
}

.hero-slide-text {
  max-width: 760px
}

.hero-slide .vehicle-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .28em;
  color: #fff;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, .3);
  margin-bottom: 36px
}

.hero-slide .vehicle-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%
}

.hero-slide h1 {
  font-size: clamp(3rem, 8.5vw, 7rem);
  font-weight: 300;
  line-height: .95;
  letter-spacing: -.035em;
  color: #fff;
  margin-bottom: 32px
}

.hero-slide h1 strong {
  font-weight: 600
}

.hero-slide-lead {
  font-size: 1.1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .85);
  max-width: 520px;
  margin-bottom: 44px;
  font-weight: 300
}

.hero-slide-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap
}

/* Slide controls */
.hero-nav {
  position: absolute;
  bottom: 120px;
  right: 60px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 18px
}

.hero-arrow {
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(0, 0, 0, .3);
  backdrop-filter: blur(10px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .35s var(--ease)
}

.hero-arrow:hover {
  background: #fff;
  color: var(--black);
  border-color: #fff
}

.hero-arrow svg {
  width: 18px;
  height: 18px
}

.hero-counter {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  color: #fff;
  text-transform: uppercase;
  min-width: 50px;
  text-align: center
}

.hero-counter .cur {
  font-size: 1.5rem;
  font-weight: 300;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px
}

.hero-counter .total {
  opacity: .5
}

.hero-dots {
  position: absolute;
  left: 60px;
  bottom: 120px;
  z-index: 5;
  display: flex;
  gap: 10px
}

.hero-dot {
  width: 32px;
  height: 3px;
  background: rgba(255, 255, 255, .2);
  cursor: pointer;
  transition: background .4s var(--ease), width .4s var(--ease);
  border: none;
  padding: 0;
  position: relative;
  overflow: hidden
}

.hero-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: none
}

.hero-dot.active {
  background: rgba(255, 255, 255, .2);
  width: 48px
}

.hero-dot.active::after {
  transform: scaleX(1);
  transition: transform 6.5s linear
}

.hero-dot:hover {
  background: rgba(255, 255, 255, .4)
}




/* ============ FIXED MOBILE NAV ============ */

/* ============ MODEL DETAIL PAGE — UPGRADED DESIGN ============ */

/* Improved spec bar with hover */
.spec-bar-item {
  transition: background .35s var(--ease)
}

.spec-bar-item:hover {
  background: var(--paper-2)
}

/* Color swatch upgrade */
.colors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 30px;
  max-width: 980px;
  margin: 60px auto 0
}

.color-chip {
  text-align: center;
  padding: 24px 12px;
  border: 1px solid var(--line);
  transition: all .35s var(--ease);
  cursor: pointer;
  background: #fff
}

.color-chip:hover {
  background: var(--paper-2);
  transform: translateY(-4px)
}

.color-chip .sw {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1px solid var(--line);
  margin: 0 auto 16px;
  transition: transform .4s var(--ease);
  position: relative
}

.color-chip .sw::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, .4) 0%, transparent 50%);
  pointer-events: none
}

.color-chip:hover .sw {
  transform: scale(1.1)
}

.color-chip .nm {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: .04em;
  line-height: 1.4
}

.color-chip .code {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-top: 5px
}

/* Model page — Highlight band (cinematic image with overlaid text) */
.highlight-band {
  position: relative;
  min-height: 560px;
  color: #fff;
  overflow: hidden;
  display: flex;
  align-items: center
}

.highlight-bg {
  position: absolute;
  inset: 0;
  z-index: 1
}

.highlight-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .85;
  filter: grayscale(10%)
}

.highlight-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .4) 60%, rgba(0, 0, 0, .2) 100%)
}

.highlight-content {
  position: relative;
  z-index: 2;
  width: 100%
}

.highlight-content .eyebrow {
  color: rgba(255, 255, 255, .7)
}

.highlight-content .eyebrow::before {
  background: #fff
}

.highlight-content h2 {
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: #fff;
  margin-bottom: 24px;
  max-width: 620px
}

.highlight-content h2 strong {
  font-weight: 600
}

.highlight-content p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .85);
  max-width: 540px;
  font-weight: 300;
  margin-bottom: 32px
}

/* Feature card improvement — larger, more breathing room */
.feat-grid-pro {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line)
}

.feat-card-pro {
  padding: 52px 36px;
  border-right: 1px solid var(--line);
  transition: background .35s var(--ease);
  position: relative
}

.feat-card-pro:nth-child(3n) {
  border-right: none
}

.feat-card-pro:nth-child(n+4) {
  border-top: 1px solid var(--line)
}

.feat-card-pro:hover {
  background: var(--paper-2)
}

.feat-card-pro::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--black);
  transition: width .5s var(--ease)
}

.feat-card-pro:hover::before {
  width: 100%
}

.feat-card-pro .num {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: 32px
}

.feat-card-pro h4 {
  font-size: 1.35rem;
  font-weight: 500;
  margin-bottom: 14px;
  letter-spacing: -.015em;
  color: var(--ink);
  line-height: 1.2
}

.feat-card-pro p {
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.7
}

/* Model gallery improvement — main image + thumbnails */
.m-gallery-pro {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 14px;
  margin-top: 60px;
  grid-auto-rows: 280px
}

.m-gallery-pro .main {
  grid-column: span 1;
  grid-row: span 2
}

.m-gallery-pro img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: transform .8s var(--ease-slow);
  filter: grayscale(5%)
}

.m-gallery-pro .item {
  overflow: hidden;
  background: #000
}

.m-gallery-pro .item:hover img {
  transform: scale(1.06)
}

/* Equipment intro */
.equip-intro {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 80px
}

.equip-intro .eyebrow {
  justify-content: center
}

.equip-intro h2 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.025em;
  margin-bottom: 20px
}

.equip-intro h2 strong {
  font-weight: 600
}

.equip-intro p {
  font-size: 1.08rem;
  color: var(--ink-3);
  line-height: 1.7;
  margin-top: 18px
}

/* Sticky model nav */
.model-nav {
  position: sticky;
  top: 0;
  z-index: 90;
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 0;
  display: none
}

.model-nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  padding: 18px 0
}

.model-nav-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.005em
}

.model-nav-name span {
  font-weight: 400;
  color: var(--ink-3);
  margin-left: 8px;
  font-size: 12.5px
}

.model-nav-links {
  display: flex;
  gap: 24px
}

.model-nav-links a {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: all .3s var(--ease)
}

.model-nav-links a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink)
}

.model-nav-cta {
  padding: 11px 22px !important;
  font-size: 11px !important
}





/* ==========================================================
   RESPONSIVE — Mobile-First, Properly Engineered
   ========================================================== */

/* ============ TABLET (1180px and below) ============ */
@media(max-width:1180px) {

  .wrap,
  .wrap-tight {
    padding: 0 40px
  }

  .sec {
    padding: 120px 0
  }

  .stat {
    padding: 0 28px
  }

  .vehicles-grid {
    grid-template-columns: repeat(3, 1fr)
  }

  .v-card {
    padding: 36px 28px
  }

  .ed-row {
    gap: 60px
  }

  .footer-top {
    gap: 50px
  }
}

/* ============ TABLET (1024px) ============ */
@media(max-width:1024px) {
  .hero-grid {
    gap: 50px
  }

  .vehicles-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .v-card:nth-child(2n) {
    border-right: none
  }

  .v-card:nth-child(n+3) {
    border-top: 1px solid var(--line)
  }

  .philo-grid,
  .stats-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .philo-col:nth-child(2n) {
    border-right: none
  }

  .philo-col:nth-child(n+3) {
    border-top: 1px solid var(--line)
  }

  .stat:nth-child(2n) {
    border-right: none
  }

  .stat:nth-child(n+3) {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding-top: 50px;
    margin-top: 50px
  }

  .stat {
    padding: 0 30px
  }

  .ed-row,
  .split,
  .contact-grid,
  .specs,
  .showroom-band {
    grid-template-columns: 1fr;
    gap: 50px
  }

  .split-content,
  .showroom-info {
    padding: 80px 50px
  }

  .showroom-map {
    min-height: 480px
  }

  .spec-bar-inner {
    grid-template-columns: repeat(2, 1fr)
  }

  .spec-bar-item:nth-child(2n) {
    border-right: none
  }

  .spec-bar-item:nth-child(n+3) {
    border-top: 1px solid var(--line)
  }

  .svc-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .svc:nth-child(2n) {
    border-right: none
  }

  .svc:nth-child(n+3) {
    border-top: 1px solid var(--line)
  }

  .feat-grid,
  .feat-grid-pro {
    grid-template-columns: repeat(2, 1fr)
  }

  .feat-card:nth-child(2n),
  .feat-card-pro:nth-child(2n) {
    border-right: none
  }

  .feat-card:nth-child(3n),
  .feat-card-pro:nth-child(3n) {
    border-right: 1px solid var(--line)
  }

  .feat-card:nth-child(2n),
  .feat-card-pro:nth-child(2n) {
    border-right: none
  }

  .feat-card:nth-child(n+3),
  .feat-card-pro:nth-child(n+3) {
    border-top: 1px solid var(--line)
  }

  .m-gallery-pro {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 240px
  }

  .m-gallery-pro .main {
    grid-column: span 2;
    grid-row: span 1
  }
}

/* ============ MOBILE BREAKPOINT (980px and below) — NEW NAVBAR ============ */
@media(max-width:980px) {

  /* Topbar — compact on mobile, hide non-essentials */
  .utility {
    padding: 9px 0;
    font-size: 11.5px
  }

  .utility-inner {
    justify-content: space-between;
    gap: 8px
  }

  .utility-left {
    gap: 14px
  }

  .utility-left a:nth-child(3),
  .utility-left span {
    display: none
  }

  /* hide email + hours on mobile, keep phone only */
  .utility-right {
    gap: 6px
  }

  .utility-right a {
    width: 24px;
    height: 24px
  }

  .utility-right a svg {
    width: 11px;
    height: 11px
  }

  /* Header — adjusted padding */
  .nav-inner {
    padding: 18px 0
  }

  .header.scrolled .nav-inner {
    padding: 14px 0
  }

  /* Brand — tighter on mobile */
  .brand-logo img {
    height: 28px
  }

  .brand-text .name {
    font-size: 13px
  }

  .brand-text .sub {
    font-size: 9px;
    letter-spacing: .2em
  }

  .brand-divider {
    height: 24px
  }


  /* Hide submenu hover behavior on touch */
}

/* ============ HERO IMPROVEMENTS ON MOBILE ============ */
@media(max-width:880px) {
  .hero {
    min-height: 65vh
  }

  .hero-slide img {
    object-fit: contain;
    object-position: top;
    transform: scale(1);
  }

  .hero-slide.active img {
    transform: scale(1);
  }

  .hero-content {
    padding-bottom: 160px
  }

  .hero-slide-content {
    padding-bottom: 160px
  }

  .hero-slide h1 {
    font-size: clamp(2.6rem, 9vw, 4rem);
    line-height: .98;
    margin-bottom: 24px
  }

  .hero-slide-lead {
    font-size: 1rem;
    margin-bottom: 32px;
    max-width: 100%
  }

  .hero-slide .vehicle-tag {
    font-size: 10px;
    padding: 7px 12px;
    margin-bottom: 24px
  }

  .hero-slide-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    max-width: 340px
  }

  .hero-slide-actions .btn {
    justify-content: space-between;
    padding: 16px 24px
  }

  /* Hero navigation controls — repositioned for mobile */
  .hero-nav {
    right: 50%;
    transform: translateX(50%);
    bottom: 120px;
    gap: 14px;
  }

  .hero-arrow {
    width: 42px;
    height: 42px
  }

  .hero-counter {
    font-size: 10.5px;
    min-width: 54px
  }

  .hero-counter .cur {
    font-size: 1.3rem
  }

  .hero-dots {
    left: 50%;
    transform: translateX(-50%);
    bottom: 90px;
    justify-content: center;
  }

  .hero-dot {
    width: 24px
  }

  .hero-dot.active {
    width: 36px
  }

  /* Hero bottom ticker */
  .hero-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 14px 0
  }

  .hero-bottom-inner .ticker {
    font-size: 10px;
    line-height: 1.8;
    white-space: normal;
    text-align: center;
    width: 100%
  }

  .hero-bottom-inner .ticker .sep {
    display: inline-block;
    margin: 0 8px
  }

  .hero-bottom-inner .scroll {
    display: none
  }

  /* Section spacing */
  .sec,
  .sec-sm {
    padding: 80px 0
  }

  .vehicles,
  .editorial,
  .philo,
  .stats,
  .cta {
    padding: 80px 0
  }

  .section-head {
    margin-bottom: 50px
  }

  .section-head h2 {
    font-size: 2rem;
    line-height: 1.1
  }

  /* Vehicles single column */
  .vehicles-grid {
    grid-template-columns: 1fr
  }

  .v-card {
    border-right: none !important;
    padding: 36px 28px
  }

  .v-card:nth-child(n+2) {
    border-top: 1px solid var(--line)
  }

  .v-card h3 {
    font-size: 1.7rem
  }

  /* Philo & stats single column */
  .philo-grid {
    grid-template-columns: 1fr
  }

  .philo-col {
    border-right: none !important;
    padding: 42px 28px
  }

  .philo-col:nth-child(n+2) {
    border-top: 1px solid var(--line)
  }

  .stats-grid {
    grid-template-columns: 1fr
  }

  .stat {
    padding: 36px 24px !important;
    border-right: none !important;
    text-align: center
  }

  .stat:nth-child(n+2) {
    border-top: 1px solid rgba(255, 255, 255, .12);
    margin-top: 0;
    padding-top: 36px
  }

  .stat .v {
    justify-content: center;
    font-size: 2.8rem
  }

  /* Splits */
  .split {
    min-height: auto
  }

  .split-content {
    padding: 60px 28px
  }

  .split-img {
    aspect-ratio: 4/3
  }

  /* Showroom */
  .showroom-info {
    padding: 60px 28px
  }

  .showroom-map {
    min-height: 380px
  }

  /* Editorial rows */
  .ed-row {
    margin-bottom: 70px;
    gap: 36px
  }

  .ed-row-info h3 {
    font-size: 1.7rem
  }

  .ed-row-meta {
    flex-wrap: wrap
  }

  .ed-row-meta-item {
    flex: 1 1 33%;
    padding: 14px 0
  }

  /* Services / Features grids */
  .svc-grid,
  .feat-grid,
  .feat-grid-pro {
    grid-template-columns: 1fr
  }

  .svc,
  .feat-card,
  .feat-card-pro {
    border-right: none !important;
    padding: 40px 28px
  }

  .svc:nth-child(n+2),
  .feat-card:nth-child(n+2),
  .feat-card-pro:nth-child(n+2) {
    border-top: 1px solid var(--line)
  }

  /* Spec bar */
  .spec-bar-inner {
    grid-template-columns: 1fr
  }

  .spec-bar-item {
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 30px 24px
  }

  .spec-bar-item:last-child {
    border-bottom: none
  }

  /* Model nav (sticky sub-nav on model pages) */
  .model-nav-inner {
    padding: 14px 0;
    gap: 14px;
    justify-content: space-between
  }

  .model-nav-name {
    font-size: 13px
  }

  .model-nav-name span {
    display: block;
    font-size: 11px;
    margin-left: 0;
    margin-top: 2px
  }

  .model-nav-links {
    display: none
  }

  /* Model hero */
  .m-hero {
    min-height: auto;
    padding: 100px 0 70px
  }

  .m-hero h1 {
    font-size: clamp(2.4rem, 9vw, 3.8rem)
  }

  .m-hero>p {
    font-size: 1rem;
    margin-bottom: 30px
  }

  .m-hero-price {
    padding: 18px 24px;
    margin-bottom: 30px
  }

  .m-hero-price .val {
    font-size: 1.7rem
  }

  .m-hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    max-width: 340px
  }

  .m-hero-actions .btn {
    justify-content: space-between
  }

  /* Model gallery */
  .m-gallery-pro {
    grid-template-columns: 1fr;
    grid-auto-rows: 240px;
    gap: 10px
  }

  .m-gallery-pro .main {
    grid-column: 1
  }

  .m-gallery-pro .item:nth-child(n+4) {
    display: none
  }

  /* show max 3 on mobile */

  /* Highlight band */
  .highlight-band {
    min-height: 440px
  }

  .highlight-content h2 {
    font-size: 1.9rem
  }

  .highlight-content p {
    font-size: .95rem
  }

  /* Specs row */
  .specs {
    grid-template-columns: 1fr;
    gap: 50px
  }

  /* Colors */
  .colors {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 40px
  }

  .color-chip {
    padding: 20px 10px
  }

  .color-chip .sw {
    width: 60px;
    height: 60px;
    margin-bottom: 12px
  }

  .color-chip .nm {
    font-size: 11.5px
  }

  .color-chip .code {
    font-size: 9px
  }

  /* Forms */
  .form-row {
    grid-template-columns: 1fr
  }

  .form-row .field+.field,
  .field+.field {
    margin-left: 0
  }

  .form-card {
    padding: 40px 28px
  }

  /* Page banner */
  .page-banner {
    padding: 90px 0 70px
  }

  .page-banner h1 {
    font-size: clamp(2.4rem, 9vw, 3.5rem)
  }

  .page-banner .sub {
    font-size: .95rem
  }

  /* CTA strip */
  .cta h2 {
    font-size: 2.2rem;
    line-height: 1.1
  }

  .cta-actions {
    flex-direction: column;
    align-items: stretch;
    max-width: 340px;
    margin: 0 auto;
    gap: 10px
  }

  .cta-actions .btn {
    justify-content: space-between
  }

  /* Footer */
  .footer {
    padding: 80px 0 0
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    padding-bottom: 60px
  }

  .footer-brand {
    grid-column: span 2
  }

  .footer-brand p {
    max-width: none
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    padding: 24px 0;
    gap: 10px
  }

  /* Buttons full-width on mobile in tight spots */
  .hero-slide-actions .btn,
  .m-hero-actions .btn,
  .cta-actions .btn {
    width: 100%
  }

  /* Compare table */
  .cmp-table {
    font-size: 12px
  }

  .cmp-table thead th,
  .cmp-table tbody td {
    padding: 14px 10px
  }

  .cmp-table thead th:nth-child(n+4),
  .cmp-table tbody td:nth-child(n+4) {
    display: none
  }

  /* Gallery mosaic */
  .gallery-mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 160px;
    gap: 10px
  }

  .g-l,
  .g-w,
  .g-m,
  .g-s,
  .g-tall {
    grid-column: span 1;
    grid-row: span 1
  }

  .g-l {
    grid-column: span 2;
    grid-row: span 2
  }

  /* Floating elements */
  .fab-wa {
    padding: 12px 18px;
    bottom: 20px;
    right: 20px;
    font-size: 11px
  }

  .totop {
    bottom: 20px;
    left: 20px;
    width: 42px;
    height: 42px
  }

  /* Contact blocks */
  .contact-block {
    padding: 20px 0;
    gap: 14px
  }

  .contact-block .ic {
    width: 36px;
    height: 36px
  }

  .contact-block .info .v {
    font-size: .98rem
  }
}

/* ============ SMALL MOBILE (520px and below) ============ */
@media(max-width:520px) {

  .wrap,
  .wrap-tight {
    padding: 0 20px
  }

  .utility {
    font-size: 10.5px
  }

  .utility-inner {
    gap: 6px
  }

  .utility-left {
    gap: 10px
  }

  .utility-left a {
    font-size: 10.5px
  }

  .nav-inner {
    padding: 16px 0
  }

  .brand-logo img {
    height: 26px
  }

  .brand-text .name {
    font-size: 12px
  }

  .brand-text .sub {
    font-size: 8.5px
  }

  .brand-divider {
    height: 22px
  }

  .hero-slide h1 {
    font-size: 2.2rem
  }

  .hero-slide-lead {
    font-size: .95rem
  }

  .hero-slide-content {
    padding-bottom: 180px
  }

  .hero-content {
    padding-bottom: 180px
  }

  .section-head h2 {
    font-size: 1.7rem
  }

  .v-card h3,
  .ed-row-info h3,
  .m-hero h1 {
    font-size: 1.6rem
  }

  .m-hero h1 {
    font-size: 2.2rem
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 36px
  }

  .footer-brand {
    grid-column: span 1
  }

  .colors {
    grid-template-columns: 1fr 1fr
  }

  .fab-wa {
    padding: 11px 16px;
    bottom: 16px;
    right: 16px;
    font-size: 10.5px
  }

  .totop {
    bottom: 16px;
    left: 16px;
    width: 38px;
    height: 38px
  }
}

/* ============ ULTRA-SMALL (380px and below) ============ */
@media(max-width:380px) {
  .utility-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px
  }

  .utility-right {
    gap: 4px
  }

  .utility-right a {
    width: 22px;
    height: 22px
  }

  .brand-divider {
    display: none
  }

  .brand {
    gap: 10px
  }

  .hero-slide h1 {
    font-size: 2rem
  }

  .hero-arrow {
    width: 38px;
    height: 38px
  }

  .hero-counter {
    font-size: 10px
  }
}

/* ==========================================================
   MOBILE MENU PANEL — Self-contained, properly designed
   ========================================================== */

.mobile-menu {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 300;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .55s cubic-bezier(.7, 0, .3, 1);
  visibility: hidden;
  overflow: hidden;
}

.mobile-menu.open {
  transform: translateX(0);
  visibility: visible;
}

/* Mobile menu header — logo + close button */
.mobile-menu-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.mobile-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mobile-brand .brand-logo img {
  height: 28px;
  width: auto
}

.mobile-brand .brand-divider {
  width: 1px;
  height: 24px;
  background: var(--line)
}

.mobile-brand .brand-text .name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .02em;
  line-height: 1.1
}

.mobile-brand .brand-text .sub {
  font-size: 9px;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-top: 2px;
  line-height: 1.1
}

.mobile-close {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  border: 1px solid var(--line);
  transition: all .3s var(--ease);
}

.mobile-close:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink)
}

.mobile-close svg {
  width: 20px;
  height: 20px
}

/* Mobile menu body — scrollable nav area */
.mobile-menu-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  background: #fff;
}

.mobile-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-nav-item {
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateX(20px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}

.mobile-menu.open .mobile-nav-item {
  opacity: 1;
  transform: translateX(0)
}

.mobile-menu.open .mobile-nav-item:nth-child(1) {
  transition-delay: .20s
}

.mobile-menu.open .mobile-nav-item:nth-child(2) {
  transition-delay: .26s
}

.mobile-menu.open .mobile-nav-item:nth-child(3) {
  transition-delay: .32s
}

.mobile-menu.open .mobile-nav-item:nth-child(4) {
  transition-delay: .38s
}

.mobile-menu.open .mobile-nav-item:nth-child(5) {
  transition-delay: .44s
}

.mobile-menu.open .mobile-nav-item:nth-child(6) {
  transition-delay: .50s
}

.mobile-nav-item>a,
.mobile-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 24px 28px;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -.01em;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background .3s var(--ease), padding .3s var(--ease);
}

.mobile-nav-item>a:hover,
.mobile-nav-toggle:hover {
  background: var(--paper-2);
  padding-left: 36px;
}

.mobile-nav-item>a .ar {
  font-size: 18px;
  color: var(--ink-3);
  font-weight: 300;
  transition: transform .3s var(--ease), color .3s var(--ease);
}

.mobile-nav-item>a:hover .ar {
  transform: translateX(6px);
  color: var(--ink)
}

/* Submenu toggle "+" icon */
.mobile-nav-toggle .plus {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.mobile-nav-toggle .plus::before,
.mobile-nav-toggle .plus::after {
  content: "";
  position: absolute;
  background: var(--ink-3);
  transition: transform .35s var(--ease), background .3s var(--ease);
}

.mobile-nav-toggle .plus::before {
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  margin-top: -.5px;
}

.mobile-nav-toggle .plus::after {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  margin-left: -.5px;
}

.mobile-nav-item.open .mobile-nav-toggle .plus::after {
  transform: rotate(90deg);
  opacity: 0
}

.mobile-nav-item.open .mobile-nav-toggle .plus::before {
  background: var(--ink)
}

.mobile-nav-item.open .mobile-nav-toggle {
  background: var(--paper-2)
}

/* Submenu — clean accordion with numbers */
.mobile-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--paper-2);
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s cubic-bezier(.7, 0, .3, 1);
}

.mobile-nav-item.open .mobile-submenu {
  max-height: 500px;
}

.mobile-submenu li {
  border-top: 1px solid var(--line);
}

.mobile-submenu li:first-child {
  border-top: 1px solid var(--line)
}

.mobile-submenu a {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 28px 18px 28px;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--ink-2);
  letter-spacing: -.005em;
  transition: padding .3s var(--ease), background .3s var(--ease);
}

.mobile-submenu a:hover {
  padding-left: 40px;
  background: #fff;
  color: var(--ink);
}

.mobile-submenu .sub-num {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: .18em;
  min-width: 22px;
}

/* Mobile menu footer — CTA + contact info */
.mobile-menu-footer {
  flex-shrink: 0;
  padding: 24px 28px 28px;
  background: var(--ink);
  color: #fff;
}

.mobile-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 24px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 24px;
  transition: all .3s var(--ease);
}

.mobile-cta .ar {
  font-size: 16px;
  font-weight: 300;
  transition: transform .3s var(--ease)
}

.mobile-cta:hover {
  background: var(--paper-2)
}

.mobile-cta:hover .ar {
  transform: translateX(6px)
}

.mobile-contact {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 22px;
}

.mobile-contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, .85);
  font-weight: 400;
  letter-spacing: .005em;
  transition: color .3s var(--ease);
}

.mobile-contact-item:hover {
  color: #fff
}

.mobile-contact-item svg {
  color: rgba(255, 255, 255, .55);
  flex-shrink: 0
}

.mobile-social {
  display: flex;
  gap: 8px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.mobile-social a {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .2);
  transition: all .3s var(--ease);
}

.mobile-social a:hover {
  background: #fff;
  color: var(--ink);
  border-color: #fff
}

.mobile-social a svg {
  width: 14px;
  height: 14px
}

/* Hamburger toggle — hide on desktop */
@media(min-width:981px) {
  .nav-toggle {
    display: none !important
  }

  .mobile-menu {
    display: none
  }
}

/* Show hamburger on mobile */
@media(max-width:980px) {
  .nav-toggle {
    display: flex !important
  }

  /* Hide desktop nav menu on mobile */
  .nav-menu {
    display: none !important
  }

  /* Adjust header padding for mobile */
  .nav-inner {
    padding: 18px 0
  }

  .header.scrolled .nav-inner {
    padding: 14px 0
  }

  /* Brand tighter on mobile */
  .brand-logo img {
    height: 28px
  }

  .brand-text .name {
    font-size: 13px
  }

  .brand-text .sub {
    font-size: 9px;
    letter-spacing: .2em
  }

  .brand-divider {
    height: 24px
  }

  /* Body lock when menu open */
  body.menu-open {
    overflow: hidden;
    height: 100vh
  }

  /* Topbar — compact, hide non-essentials */
  .utility {
    padding: 9px 0;
    font-size: 11.5px
  }

  .utility-inner {
    justify-content: space-between;
    gap: 8px
  }

  .utility-left {
    gap: 14px
  }

  .utility-left a:nth-child(3),
  .utility-left span {
    display: none
  }

  .utility-right {
    gap: 6px
  }

  .utility-right a {
    width: 24px;
    height: 24px
  }

  .utility-right a svg {
    width: 11px;
    height: 11px
  }
}

@media(max-width:520px) {
  .mobile-menu-header {
    padding: 16px 20px
  }

  .mobile-brand .brand-logo img {
    height: 26px
  }

  .mobile-brand .brand-text .name {
    font-size: 12px
  }

  .mobile-brand .brand-text .sub {
    font-size: 8.5px
  }

  .mobile-close {
    width: 38px;
    height: 38px
  }

  .mobile-close svg {
    width: 18px;
    height: 18px
  }

  .mobile-nav-item>a,
  .mobile-nav-toggle {
    padding: 22px 20px;
    font-size: 16.5px
  }

  .mobile-nav-item>a:hover,
  .mobile-nav-toggle:hover {
    padding-left: 28px
  }

  .mobile-submenu a {
    padding: 15px 20px 15px 20px;
    font-size: 14px
  }

  .mobile-submenu a:hover {
    padding-left: 32px
  }

  .mobile-menu-footer {
    padding: 20px 20px 24px
  }

  .mobile-cta {
    padding: 16px 20px;
    font-size: 12.5px;
    margin-bottom: 20px
  }

  .mobile-contact-item {
    font-size: 12.5px
  }

  .utility {
    padding: 8px 0;
    font-size: 10.5px
  }

  .utility-left {
    gap: 10px
  }

  .utility-left a {
    font-size: 10.5px
  }

  .nav-inner {
    padding: 16px 0
  }

  .brand-logo img {
    height: 26px
  }

  .brand-text .name {
    font-size: 12px
  }

  .brand-text .sub {
    font-size: 8.5px
  }

  .brand-divider {
    height: 22px
  }
}

@media(max-width:380px) {
  .utility-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px
  }

  .utility-right {
    gap: 4px
  }

  .utility-right a {
    width: 22px;
    height: 22px
  }

  .brand-divider {
    display: none
  }

  .brand {
    gap: 10px
  }

  .mobile-menu-header {
    padding: 14px 16px
  }

  .mobile-nav-item>a,
  .mobile-nav-toggle {
    padding: 20px 16px;
    font-size: 16px
  }

  .mobile-submenu a {
    padding: 14px 16px;
    font-size: 13.5px
  }

  .mobile-menu-footer {
    padding: 18px 16px 22px
  }
}

/* ==========================================================
   MODEL PAGE SLIDESHOW (replaces .m-gallery-pro)
   ========================================================== */
.m-slideshow {
  position: relative;
  margin-top: 60px;
  overflow: hidden;
  background: #000;
}

.m-slideshow-stage {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
}

.m-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease-slow);
  pointer-events: none;
}

.m-slide.active {
  opacity: 1;
  pointer-events: auto;
}

.m-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(5%);
  transform: scale(1.04);
  transition: transform 7s linear;
}

.m-slide.active img {
  transform: scale(1)
}

/* Slide caption (bottom-left) */
.m-slide-caption {
  position: absolute;
  left: 32px;
  bottom: 32px;
  z-index: 3;
  color: #fff;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .8s var(--ease) .3s, transform .8s var(--ease) .3s;
}

.m-slide.active .m-slide-caption {
  opacity: 1;
  transform: translateY(0)
}

.m-slide-caption .lbl {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .28em;
  color: rgba(255, 255, 255, .7);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.m-slide-caption .ttl {
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: -.01em;
  color: #fff;
}

/* Gradient overlay on slides for caption legibility */
.m-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .5) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Slideshow controls — arrows */
.m-slide-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 54px;
  height: 54px;
  background: rgba(0, 0, 0, .4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .35s var(--ease);
}

.m-slide-nav:hover {
  background: #fff;
  color: var(--ink);
  border-color: #fff
}

.m-slide-nav svg {
  width: 20px;
  height: 20px
}

.m-slide-prev {
  left: 24px
}

.m-slide-next {
  right: 24px
}

/* Slideshow counter + dots (bottom-right) */
.m-slide-meta {
  position: absolute;
  right: 32px;
  bottom: 32px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 18px;
  color: #fff;
}

.m-slide-counter {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, .4);
  backdrop-filter: blur(10px);
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, .25);
}

.m-slide-counter .cur {
  font-size: 1.1rem;
  font-weight: 400;
  margin-right: 4px
}

.m-slide-counter .total {
  opacity: .55
}

/* Thumbnail strip below slideshow */
.m-slide-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
  background: #000;
}

.m-slide-thumb {
  aspect-ratio: 4/3;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background: #000;
  border: none;
  padding: 0;
  transition: opacity .3s var(--ease);
}

.m-slide-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .45;
  transition: opacity .35s var(--ease), transform .8s var(--ease);
  filter: grayscale(20%);
}

.m-slide-thumb:hover img {
  opacity: .75;
  transform: scale(1.05)
}

.m-slide-thumb.active img {
  opacity: 1;
  filter: grayscale(0%)
}

.m-slide-thumb.active::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #fff;
  pointer-events: none;
}

/* ==========================================================
   BROCHURE DOWNLOAD BUTTON
   ========================================================== */
.btn-brochure {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .4);
  position: relative;
}

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

.btn-brochure svg {
  width: 14px;
  height: 14px;
}

/* Responsive — Slideshow on mobile */
@media(max-width:880px) {
  .m-slideshow-stage {
    aspect-ratio: 4/3
  }

  .m-slide-nav {
    width: 42px;
    height: 42px
  }

  .m-slide-prev {
    left: 14px
  }

  .m-slide-next {
    right: 14px
  }

  .m-slide-caption {
    left: 18px;
    bottom: 18px
  }

  .m-slide-caption .ttl {
    font-size: 1.05rem
  }

  .m-slide-caption .lbl {
    font-size: 9.5px
  }

  .m-slide-meta {
    right: 18px;
    bottom: 18px;
    gap: 12px
  }

  .m-slide-counter {
    font-size: 10.5px;
    padding: 6px 10px
  }

  .m-slide-thumbs {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px
  }

  .m-slide-thumb:nth-child(n+4) {
    display: none
  }
}

@media(max-width:520px) {
  .m-slideshow-stage {
    aspect-ratio: 3/2
  }

  .m-slide-nav {
    width: 38px;
    height: 38px
  }

  .m-slide-prev {
    left: 10px
  }

  .m-slide-next {
    right: 10px
  }
}

/* ==========================================================
   BRAND LOGO (single-image) — properly sized with edge spacing
   ========================================================== */

/* Add breathing room from the left edge for the wrap container */
.nav-inner {
  padding-left: 20px;
  padding-right: 20px
}

/* Desktop navbar logo — substantially larger and properly spaced */
.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  padding: 6px 0;
}

.brand-img {
  height: 64px;
  width: auto;
  display: block;
  transition: height .35s var(--ease);
}

.header.scrolled .brand-img {
  height: 54px
}

/* Footer logo — larger, color-inverted for dark background */
.footer-brand {
  padding-left: 0
}

.footer-brand .brand-img {
  height: 88px;
  width: auto;
  filter: invert(1) brightness(1.2);
  margin-bottom: 24px;
}

/* Mobile menu header logo */
.mobile-menu-header {
  padding-left: 24px;
  padding-right: 24px
}

.mobile-brand .brand-img {
  height: 54px;
  width: auto;
}

/* Loader (if present anywhere) */
.loader-logo {
  height: 64px !important;
  width: auto !important;
}

/* Responsive */
@media(max-width:1180px) {
  .nav-inner {
    padding-left: 24px;
    padding-right: 24px
  }
}

@media(max-width:980px) {
  .brand-img {
    height: 52px
  }

  .header.scrolled .brand-img {
    height: 46px
  }

  .mobile-brand .brand-img {
    height: 48px
  }

  .nav-inner {
    padding-left: 20px;
    padding-right: 20px
  }
}

@media(max-width:520px) {
  .brand-img {
    height: 46px
  }

  .header.scrolled .brand-img {
    height: 40px
  }

  .mobile-brand .brand-img {
    height: 42px
  }

  .footer-brand .brand-img {
    height: 72px
  }

  .nav-inner {
    padding-left: 18px;
    padding-right: 18px
  }

  .mobile-menu-header {
    padding-left: 20px;
    padding-right: 20px
  }
}

@media(max-width:380px) {
  .brand-img {
    height: 40px
  }

  .header.scrolled .brand-img {
    height: 36px
  }

  .mobile-brand .brand-img {
    height: 38px
  }
}

/* ==========================================================
   MOBILE NAV — Centered Logo Layout
   ========================================================== */
@media(max-width:980px) {

  /* Reposition: logo center, hamburger right */
  .nav-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* center the brand */
    padding-left: 20px;
    padding-right: 20px;
    min-height: 72px;
  }

  /* Logo perfectly centered */
  .brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0;
  }

  /* Hamburger fixed to the right */
  .nav-toggle {
    margin-left: auto !important;
    position: relative;
    z-index: 5;
  }

  /* Hide desktop nav-menu on mobile (already handled but make sure) */
  .nav-menu {
    display: none !important
  }
}

/* Same centered approach for the mobile menu header */
@media(max-width:980px) {
  .mobile-menu-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    min-height: 88px;
  }

  .mobile-menu-header .mobile-brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .mobile-close {
    margin-left: auto;
    position: relative;
    z-index: 5;
  }
}

/* ==========================================================
   MOBILE HOME PAGE — Vehicle Card Swipe Carousel
   ========================================================== */

@media(max-width:880px) {

  /* Override the stacked grid on mobile — use horizontal scroll instead */
  .vehicles-grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border: none !important;
    margin: 0 -24px;
    padding: 0 24px 24px;
    gap: 16px;
  }

  .vehicles-grid::-webkit-scrollbar {
    display: none
  }

  .v-card {
    flex: 0 0 85%;
    /* each card takes 85% width so next one peeks */
    max-width: 340px;
    scroll-snap-align: center;
    border: 1px solid var(--line) !important;
    padding: 28px 24px !important;
    background: #fff;
    margin: 0;
    border-top: 1px solid var(--line) !important;
    border-right: 1px solid var(--line) !important;
    border-bottom: 1px solid var(--line) !important;
    border-left: 1px solid var(--line) !important;
  }

  .v-card:nth-child(n+2) {
    border-top: 1px solid var(--line) !important;
  }

  /* Tighter card layout for mobile */
  .v-card-img {
    aspect-ratio: 16/11;
    margin-bottom: 22px
  }

  .v-card-num {
    font-size: 9.5px;
    padding: 5px 10px
  }

  .v-card-seg {
    font-size: 10px;
    letter-spacing: .18em;
    margin-bottom: 8px
  }

  .v-card h3 {
    font-size: 1.4rem;
    margin-bottom: 10px
  }

  .v-card p {
    font-size: 13px;
    margin-bottom: 22px;
    line-height: 1.5
  }

  .v-card-specs {
    margin-bottom: 20px
  }

  .v-card-spec {
    padding: 12px 0
  }

  .v-card-spec:not(:first-child) {
    padding-left: 12px
  }

  .v-card-spec .v {
    font-size: 1.15rem
  }

  .v-card-spec .k {
    font-size: 9px;
    letter-spacing: .16em
  }

  .v-card-price {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none
  }

  .v-card-price .from {
    font-size: 9.5px
  }

  .v-card-price .val {
    font-size: 1.15rem
  }

  .v-card-arrow {
    width: 38px;
    height: 38px
  }

  /* Carousel scroll indicator */
  .vehicles-mobile-hint {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  .vehicles-mobile-hint svg {
    animation: swipeHint 1.8s ease-in-out infinite
  }

  /* Dot indicators */
  .vehicles-dots {
    display: flex !important;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
  }

  .vehicles-dots .dot {
    width: 24px;
    height: 2px;
    background: var(--line-2);
    transition: background .35s var(--ease), width .35s var(--ease);
    border: none;
    padding: 0;
    cursor: pointer;
  }

  .vehicles-dots .dot.active {
    background: var(--ink);
    width: 36px;
  }
}

/* Hide carousel hint + dots on desktop */
.vehicles-mobile-hint,
.vehicles-dots {
  display: none
}

@keyframes swipeHint {

  0%,
  100% {
    transform: translateX(0)
  }

  50% {
    transform: translateX(8px)
  }
}

/* ==========================================================
   GLOBAL FORMS & BUTTONS (Chery Pakistan Aesthetic)
   ========================================================== */

.p-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 18px 40px;
  border: 1px solid var(--black);
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease);
  text-decoration: none;
}

.p-btn:hover {
  background: var(--paper);
  color: var(--black);
}

.p-btn-outline {
  background: transparent;
  color: var(--black);
  border: 1px solid var(--line-2);
}

.p-btn-outline:hover {
  background: var(--black);
  color: var(--paper);
  border-color: var(--black);
}

/* Global Forms */
.p-form {
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

.p-form-group {
  margin-bottom: 24px;
}

.p-form-row {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
}

.p-form-row .p-form-group {
  flex: 1;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .p-form-row {
    flex-direction: column;
    gap: 24px;
  }
}

.p-form label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}

.p-form input,
.p-form select,
.p-form textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-2);
  padding: 12px 0;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  transition: border-color .3s var(--ease);
}

.p-form input:focus,
.p-form select:focus,
.p-form textarea:focus {
  outline: none;
  border-bottom-color: var(--black);
}

.p-form textarea {
  resize: vertical;
  min-height: 120px;
}

.p-form input::placeholder,
.p-form textarea::placeholder {
  color: var(--ink-4);
  font-weight: 300;
}