/* ==========================================================================
   YUFENG / Hengshun Traders — Nepal
   Design system  |  Bootstrap 5 override layer
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --green:      #2c9a77;
  --green-dark: #22795e;
  --green-deep: #144f3d;
  --green-pale: #e8f4f0;

  --ink:        #101214;
  --ink-2:      #0c0d0f;
  --ink-3:      #0a0c0b;
  --body:       #56595c;
  --muted:      #8a8d90;
  --muted-2:    #adb0b3;

  --paper:      #ffffff;
  --paper-2:    #f4f4f4;
  --line:       #e3e4e5;
  --line-2:     #ededee;
  --line-dark:  rgba(255, 255, 255, .14);

  --nav-h:      74px;
  --ease:       cubic-bezier(.22, 1, .36, 1);

  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Barlow', 'Segoe UI', system-ui, sans-serif;

  /* corner cross-hair used on every bordered box */
  --plus: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 0v9M0 4.5h9' stroke='%23c9cbcc' stroke-width='1'/%3E%3C/svg%3E");
  --plus-light: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 0v9M0 4.5h9' stroke='rgba(255,255,255,0.45)' stroke-width='1'/%3E%3C/svg%3E");
}

/* ---------- 2. Base ---------- */
* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 10px); }

body {
  font-family: var(--font-body);
  font-size: 15px; line-height: 1.72;
  color: var(--body); background: var(--paper);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: -.005em;
  line-height: 1.02; color: var(--ink); margin: 0;
}

a { color: inherit; text-decoration: none; transition: color .2s var(--ease); }
img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 1rem; }
::selection { background: var(--green); color: #fff; }

.container {
    max-width: 1360px;
    padding-left: 22px;
    padding-right: 22px;
}

/* ---------- 3. Utilities ---------- */
.section      { padding: 70px 0; }
.section-sm   { padding: 64px 0; }
.section-soft { background: var(--paper-2); }
.section-dark { background: var(--ink-2); color: rgba(255,255,255,.7); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 500;
  font-size: .68rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--green); margin-bottom: 18px;
}
.eyebrow::before { content: ''; width: 26px; height: 1px; background: currentColor; flex: none; }

.h-display { font-size: clamp(2.4rem, 6vw, 4.6rem); }
.h-section { font-size: clamp(1.85rem, 3.6vw, 2.7rem); }

.lead-text { font-size: .95rem; color: var(--body); }
.section-dark .lead-text { color: rgba(255,255,255,.62); }

.text-accent  { color: var(--green) !important; }
.text-muted-2 { color: var(--muted) !important; }
.soft-line    { height: 1px; background: var(--line); border: 0; opacity: 1; }

/* ---------- 4. Plus-corner box (signature detail) ---------- */
.pbox { position: relative; border: 1px solid var(--line); background: #fff; }
.pbox::before {
  content: ''; position: absolute; inset: -4px; pointer-events: none; z-index: 3;
  background-image: var(--plus), var(--plus), var(--plus), var(--plus);
  background-position: left top, right top, left bottom, right bottom;
  background-repeat: no-repeat; background-size: 9px 9px;
}
.pbox-light::before {
  background-image: var(--plus-light), var(--plus-light), var(--plus-light), var(--plus-light);
}
.pbox-flat { border: 0; }

/* ---------- 5. Buttons ---------- */
.btn {
  font-family: var(--font-display); font-weight: 600;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  border-radius: 0; padding: 14px 26px; border: 1px solid transparent;
  transition: all .22s var(--ease); line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
}
.btn:focus, .btn:focus-visible { box-shadow: 0 0 0 3px rgba(44,154,119,.3); outline: none; }

.btn-brand       { background: var(--green); border-color: var(--green); color: #fff; }
.btn-brand:hover { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.btn-ink         { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-ink:hover   { background: var(--green); border-color: var(--green); color: #fff; }
.btn-light       { background: #fff; border-color: #fff; color: var(--ink); }
.btn-light:hover { background: var(--green); border-color: var(--green); color: #fff; }
.btn-outline-ink       { border-color: var(--line); color: var(--ink); background: #fff; }
.btn-outline-ink:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.btn-ghost-light       { border-color: rgba(255,255,255,.4); color: #fff; background: transparent; }
.btn-ghost-light:hover { background: #fff; border-color: #fff; color: var(--ink); }

.btn-lg { padding: 17px 32px; font-size: .76rem; }
.btn-sm { padding: 11px 20px; font-size: .66rem; letter-spacing: .14em; }

.link-arrow {
  font-family: var(--font-display); font-weight: 500;
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--green);
  display: inline-flex; align-items: center; gap: 10px;
}
.link-arrow i { transition: transform .25s var(--ease); }
.link-arrow:hover { color: var(--green-dark); }
.link-arrow:hover i { transform: translateX(5px); }

/* ---------- 6. Navbar ---------- */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1050;
  height: var(--nav-h); background: #fff;
  border-bottom: 1px solid transparent; transition: border-color .3s var(--ease);
}
.site-nav.is-stuck { border-bottom-color: var(--line); }
.site-nav .navbar { height: var(--nav-h); padding: 0; flex-wrap: nowrap; }

.brand-mark { display: flex; align-items: center; flex: none; }
.nav-invert .brand-mark img {
    height: 56px !important;
    width: 157px;
    object-fit:contain;
    filter: brightness(0) invert(1);
}

.nav-stuck .brand-mark img {
    height: 52px;
    width: 96px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links .nav-link {
  font-family: var(--font-display); font-weight: 500;
  font-size: .74rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); padding: 8px 12px; transition: color .2s var(--ease);
}
.nav-links .nav-link:hover, .nav-links .nav-link.active { color: var(--ink); }

.nav-search {
  width: 38px; height: 38px; border: 1px solid var(--line); background: #fff;
  display: grid; place-items: center; color: var(--ink); flex: none; padding: 0;
}
.nav-search:hover { border-color: var(--ink); }

.nav-toggle {
    width: 30px;
    height: 23px;
    border: 1px solid var(--line);
    background: #fff;
    display: grid;
    place-items: center;
    padding: 6px;
    flex: none;
}
.nav-toggle span { display: block; width: 17px; height: 1.6px; background: var(--ink); transition: .3s var(--ease); }
.nav-toggle span + span { margin-top: 4px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: 1040;
  background: #fff; padding: 22px 22px 34px;
  transform: translateX(100%); transition: transform .36s var(--ease);
  overflow-y: auto; display: flex; flex-direction: column;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu .nav-link {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ink);
  padding: 15px 2px; border-bottom: 1px solid var(--line);
}
.mobile-menu .nav-link.active { color: var(--green); }
.mobile-menu .m-foot { margin-top: auto; padding-top: 28px; }
.mobile-menu .m-foot p { font-size: .9rem; margin-bottom: 4px; }
body.menu-open { overflow: hidden; }


.site-nav, .site-nav .container, .site-nav .navbar, .nav-links { overflow: visible; }
 
/* ---------- Desktop: the trigger ---------- */
.nav-drop-wrap { position: relative; display: flex; align-items: center; align-self: center; }
 
/* .nav-links .nav-link already supplies the type and colour — these only
   reset the <button> defaults so the trigger sits flush with the anchors */
.nav-drop-toggle {
  background: none; border: 0; border-radius: 0;
  display: inline-flex; align-items: center; gap: 6px;
  line-height: 1; cursor: pointer;
}
.nav-drop-toggle i { font-size: .62rem; transition: transform .28s var(--ease); }
.nav-drop-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(44,154,119,.3); }
 
/* hover bridge — covers the gap between the trigger and the panel so a
   downward mouse move doesn't pass over dead space and close it */
.nav-drop-wrap::after {
  content: ''; position: absolute; top: 100%; left: 0; right: 0;
  height: 26px;
}
 
/* ---------- Desktop: the panel ---------- */
.nav-drop {
  position: absolute; top: 100%; left: -14px; z-index: 20;
  margin-top: 22px;                  /* drops it clear of the bar's lower edge */
  min-width: 306px; padding: 8px;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(10,12,11,.13);
  opacity: 0; visibility: hidden;
  transform: translateY(8px);
  transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s;
}
 
/* THE OPEN STATE — hover, keyboard focus, or the .open class from main.js */
.nav-drop-wrap:hover .nav-drop,
.nav-drop-wrap:focus-within .nav-drop,
.nav-drop-wrap.open .nav-drop {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-drop-wrap:hover .nav-drop-toggle i,
.nav-drop-wrap:focus-within .nav-drop-toggle i,
.nav-drop-wrap.open .nav-drop-toggle i { transform: rotate(180deg); }
 
.nav-drop-wrap:hover > .nav-drop-toggle,
.nav-drop-wrap.open > .nav-drop-toggle { color: var(--ink); }
.site-nav.nav-invert .nav-drop-wrap:hover > .nav-drop-toggle,
.site-nav.nav-invert .nav-drop-wrap.open > .nav-drop-toggle { color: #fff; }
 
/* green seam that ties the panel back to the bar */
.nav-drop::before {
  content: ''; position: absolute; left: -1px; right: -1px; top: -1px;
  height: 2px; background: var(--green);
}
 
/* ---------- Desktop: brand rows ---------- */
.nd-item {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 12px;
  transition: background .22s var(--ease);
}
.nd-item:hover { background: var(--paper-2); }
 
.nd-mark {
  flex: none; width: 50px; height: 50px;
  display: grid; place-items: center;
  background: var(--paper-2);
  transition: background .22s var(--ease);
}
.nd-mark img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    opacity: .8;
    transition: filter .22s var(--ease), opacity .22s var(--ease);
}
.nd-item:hover .nd-mark { background: var(--green-pale); }
.nd-item:hover .nd-mark img { filter: none; opacity: 1; }
 
.nd-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.nd-name {
  font-family: var(--font-display); font-weight: 600;
  font-size: .84rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); line-height: 1;
}
.nd-note {
  font-family: var(--font-display); font-size: .56rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted-2); line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
 
.nd-cue {
  margin-left: auto; flex: none; font-size: .74rem; color: var(--green);
  opacity: 0; transform: translateX(-5px);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.nd-item:hover .nd-cue { opacity: 1; transform: none; }
 
/* ---------- Desktop: footer link ---------- */
.nd-all {
  display: flex; align-items: center; justify-content: space-between;
  margin: 6px 0 0; padding: 13px 12px;
  border-top: 1px solid var(--line-2);
  font-family: var(--font-display); font-weight: 500;
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
}
.nd-all i { font-size: .74rem; transition: transform .22s var(--ease); }
.nd-all:hover { color: var(--ink); }
.nd-all:hover i { transform: translateX(4px); color: var(--green); }
 
/* ==========================================================================
   Mobile accordion
   ========================================================================== */
 
.m-drop { border-bottom: 1px solid var(--line); }
 
/* .mobile-menu .nav-link would add a second divider — the wrapper carries it */
.mobile-menu .m-drop-toggle { border-bottom: 0; }
 
.m-drop-toggle {
  width: 100%; background: none; border: 0; border-radius: 0;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-display); font-weight: 600; font-size: 1.5rem;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ink);
  padding: 15px 2px; text-align: left; cursor: pointer;
}
.m-drop-toggle i { font-size: .9rem; color: var(--muted); transition: transform .3s var(--ease); }
.m-drop.open .m-drop-toggle,
.m-drop:focus-within .m-drop-toggle { color: var(--green); }
.m-drop.open .m-drop-toggle i,
.m-drop:focus-within .m-drop-toggle i { transform: rotate(180deg); color: var(--green); }
 
.m-drop-panel {
  max-height: 0; overflow: hidden;
  transition: max-height .34s var(--ease);
}
/* .open comes from main.js; :focus-within is the no-JS fallback */
.m-drop.open .m-drop-panel,
.m-drop:focus-within .m-drop-panel { max-height: 320px; }
 
.m-drop-panel a {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 2px 13px 14px;
  border-left: 1px solid var(--line);
  margin-left: 4px;
  font-family: var(--font-display); font-weight: 500;
  font-size: .95rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--body);
}
.m-drop-panel a:last-child { padding-bottom: 20px; }
.m-drop-panel a:active { color: var(--green); }
.m-drop-panel img { width: 22px; height: 22px; object-fit: contain; flex: none; }
 
@media (prefers-reduced-motion: reduce) {
  .nav-drop, .m-drop-panel, .nav-drop-toggle i, .m-drop-toggle i { transition: none; }
}


/* ---------- 7. Hero ---------- */
.hero {
  position: relative; min-height: 640px; height: calc(100vh - var(--nav-h));
  margin-top: var(--nav-h);
  display: flex; align-items: center; overflow: hidden; background: var(--ink-2);
}
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.2s var(--ease);
}
.hero-slide.active { opacity: 1; }
.hero::after {
  content: ''; position: absolute; inset: 0;
}
.hero > .container { position: relative; z-index: 3; }

.hero .eyebrow { color: rgba(255,255,255,.8); }
.hero h1 {
  color: #fff; font-size: clamp(2.7rem, 7.4vw, 5.4rem);
  line-height: .96; letter-spacing: -.01em; margin-bottom: 24px;
}
.hero h1 .muted-line { color: #a9adae; display: block; }
.hero p { color: rgba(255,255,255,.86); font-size: 1rem; max-width: 42ch; margin-bottom: 32px; }

.hero-stats { display: flex; gap: 54px; flex-wrap: wrap; margin-top: 62px; }
.hero-stats .stat-num {
  font-family: var(--font-display); font-weight: 600; font-size: 1.9rem; color: #fff; line-height: 1;
}
.hero-stats .stat-label {
  font-family: var(--font-display); font-size: .62rem; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255,255,255,.55); margin-top: 7px;
}

/* Hero slider indicators */
.hero-dots {
  position: absolute; bottom: 30px; right: 26px; z-index: 5;
  display: flex; align-items: center; gap: 9px;
}
.hero-dots button {
  width: 30px; height: 3px; padding: 0; border: 0;
  background: rgba(255,255,255,.32); transition: all .3s var(--ease);
}
.hero-dots button:hover { background: rgba(255,255,255,.6); }
.hero-dots button.active { background: var(--green); width: 52px; }
.hero-dots .dot-count {
  font-family: var(--font-display); font-size: .62rem; letter-spacing: .18em;
  color: rgba(255,255,255,.55); margin-left: 6px;
}

.scroll-hint {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 4;
  text-align: center; font-family: var(--font-display);
  font-size: .6rem; letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.6);
}
.scroll-hint i { display: block; margin-top: 4px; animation: bob 1.9s var(--ease) infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* Page hero (inner pages) */
.page-hero {
  background: var(--ink-2); color: rgba(255,255,255,.7);
  padding: calc(var(--nav-h) + 78px) 0 74px; position: relative; overflow: hidden;
}
.page-hero h1 { color: #fff; font-size: clamp(2.2rem, 5.2vw, 3.6rem); margin-bottom: 16px; }
.page-hero p { color: rgba(255,255,255,.66); max-width: 56ch; margin: 0; }

.crumbs {
  font-family: var(--font-display); font-size: .66rem; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(255,255,255,.45);
  margin-bottom: 20px; display: flex; gap: 9px; flex-wrap: wrap;
}
.crumbs a { color: rgba(255,255,255,.7); }
.crumbs a:hover { color: var(--green); }

/* ---------- 8. Section heads ---------- */
.section-head { max-width: 680px; margin-bottom: 46px; }
.section-head h2 { margin-bottom: 14px; }

.head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 40px; margin-bottom: 42px; flex-wrap: wrap;
}
.head-row .section-head { margin-bottom: 0; }

.head-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-bottom: 44px; align-items: start; }
.head-split .hs-copy { padding-top: 34px; }

/* ---------- 9. Class card ---------- */
.class-card { display: block; height: 100%; transition: border-color .3s var(--ease); }
.class-card:hover { border-color: var(--ink); }
.cc-media { display: block; position: relative; aspect-ratio: 16 / 11;  background: var(--paper-2); overflow:hidden; }
.cc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.class-card:hover .cc-media img { transform: scale(1.05); }
.cc-badge {
  position: absolute; top: 0; left: 0; z-index: 2; background: var(--green); color: #fff;
  font-family: var(--font-display); font-size: .62rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; padding: 8px 14px;
}
.cc-body { padding: 26px 24px 28px; }
.cc-body h3 { font-size: 1.32rem; margin-bottom: 10px; }
.cc-body p { font-size: .92rem; margin-bottom: 18px; }

.sub-brand {
    position: absolute;
    right: 0px;
    bottom: 0px;
    padding: 2px;
    background: #ffffff;
}

.sub-brand img {
    height: 33px !important;
    width: 93px !important;
    object-fit: contain !important;
}

.brush-highlight {
    position: relative;
    display: inline-block;
    z-index: 1;
    padding: 5px 14px;
    color: #fff;
    font-weight: 700;
    margin: 0;
}

.brush-highlight::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -8px;
    right: -10px;
    top: 50%;
    height: 70%;
    transform: translateY(-50%) rotate(-1.5deg);
    background: #2c9a77;

    clip-path: polygon(
        1% 25%, 7% 18%, 15% 22%, 24% 14%,
        34% 20%, 45% 13%, 57% 19%, 68% 12%,
        79% 20%, 90% 15%, 98% 23%, 95% 78%,
        86% 72%, 76% 82%, 65% 74%, 54% 84%,
        43% 76%, 32% 82%, 21% 73%, 11% 79%, 3% 70%
    );
}

.brush-highlight::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: -15px;
    right: -5px;
    top: 52%;
    height: 45%;
    transform: translateY(-50%) rotate(1deg);
    background: #2c9a77;
    opacity: 0.45;

    clip-path: polygon(
        0 35%, 8% 22%, 18% 30%, 30% 18%,
        42% 28%, 55% 16%, 68% 27%, 80% 20%,
        92% 30%, 100% 24%, 96% 68%, 84% 60%,
        72% 72%, 58% 62%, 45% 75%, 32% 64%,
        18% 72%, 6% 62%
    );
}

/* ---------- 10. Vehicle card ---------- */
.v-card { display: flex; flex-direction: column; height: 100%; transition: border-color .3s var(--ease); }
.v-card:hover { border-color: var(--ink); }
.v-card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-2); }
.v-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.v-card:hover .v-card-media img { transform: scale(1.05); }

.v-badge {
  position: absolute; top: 0; left: 0; z-index: 2; background: var(--ink); color: #fff;
  font-family: var(--font-display); font-size: .6rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; padding: 8px 13px;
}
.v-badge.is-new { background: var(--green); }
.v-compare {
  position: absolute; top: 10px; right: 10px; z-index: 4; width: 34px; height: 34px;
  border: 1px solid rgba(255,255,255,.6); background: rgba(255,255,255,.9);
  color: var(--ink); display: grid; place-items: center; font-size: .78rem;
  transition: all .22s var(--ease);
}
.v-compare:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.v-compare.on { background: var(--green); border-color: var(--green); color: #fff; }

.v-card-body { padding: 24px 22px 26px; display: flex; flex-direction: column; flex: 1; }
.v-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.v-card-body h3 { font-size: 1.24rem; }
.v-card-body h3 a:hover { color: var(--green); }
.v-tag {
  font-family: var(--font-display); font-size: .58rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  background: var(--green-pale); color: var(--green-dark); padding: 6px 10px; flex: none;
}
.v-tagline { font-size: .9rem; margin-bottom: 20px; }

/* 2 x 2 spec grid */
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 20px; }
.spec-grid > div { padding: 14px 0 14px 18px; border-left: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.spec-grid > div:nth-child(odd) { padding-left: 0; border-left: 0; }
.spec-grid > div:nth-child(-n+2) { padding-top: 0; }
.spec-grid > div:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0; }
.spec-grid .sg-label {
  font-family: var(--font-display); font-size: .6rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 5px;
}
.spec-grid .sg-val { font-size: .98rem; font-weight: 500; color: var(--ink); }

.v-actions { display: flex; gap: 10px; margin-top: auto; }

/* ---------- 11. Bordered grid ----------
   Frame draws top + left only; each cell supplies right + bottom, so the grid
   closes cleanly at any column count. */
.grid-frame { border: 1px solid var(--line); border-right: 0; border-bottom: 0; position: relative; }
.grid-frame::before {
  content: ''; position: absolute; inset: -4px; pointer-events: none; z-index: 3;
  background-image: var(--plus), var(--plus), var(--plus), var(--plus);
  background-position: left top, right top, left bottom, right bottom;
  background-repeat: no-repeat; background-size: 9px 9px;
}
.grid-cell {
  padding: 30px 26px 34px; border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line); height: 100%;
}
.grid-cell .gc-icon { color: var(--green); font-size: 1.15rem; margin-bottom: 16px; }
.grid-cell .gc-num {
  font-family: var(--font-display); font-size: .62rem; letter-spacing: .2em;
  color: var(--muted-2); margin-bottom: 18px;
}
.grid-cell h3 { font-size: 1rem; letter-spacing: .04em; margin-bottom: 10px; }
.grid-cell p { font-size: .88rem; margin: 0; }

/* ---------- 12. Tile ---------- */
.tile { border: 1px solid var(--line); padding: 30px 26px; height: 100%; background: #fff; transition: border-color .3s var(--ease); }
.tile:hover { border-color: var(--ink); }
.tile .t-icon { color: var(--green); font-size: 1.2rem; margin-bottom: 18px; }
.tile h3 { font-size: 1.02rem; letter-spacing: .04em; margin-bottom: 10px; }
.tile p { font-size: .9rem; margin: 0; }

/* ---------- 13. News card ---------- */
.news-card { display: flex; flex-direction: column; height: 100%; transition: border-color .3s var(--ease); }
.news-card:hover { border-color: var(--ink); }
.n-media { aspect-ratio: 16/10; overflow: hidden; background: var(--paper-2); }
.n-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.news-card:hover .n-media img { transform: scale(1.05); }
.n-body { padding: 22px 22px 26px; }
.n-meta { font-family: var(--font-display); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--green); margin-bottom: 12px; }
.n-meta span { color: var(--muted-2); }
.news-card h3 { font-size: 1.05rem; text-transform: none; letter-spacing: 0; margin-bottom: 10px; line-height: 1.25; }
.news-card:hover h3 { color: var(--green); }
.news-card p { font-size: .88rem; margin: 0; }

/* ---------- 14. About ---------- */
.about-media { overflow: hidden; background: var(--paper-2); }
.about-media img { width: 100%; height: 100%; object-fit: cover; }

.mv-row { display: grid; grid-template-columns: 110px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.mv-row:last-child { border-bottom: 0; }
.mv-row h4 { font-size: .64rem; letter-spacing: .24em; color: var(--green); font-weight: 500; padding-top: 3px; }
.mv-row p { font-size: .92rem; margin: 0; }

/* ---------- 15. Dark stats band ---------- */
.stat-band { background: var(--ink-2); padding: 62px 0; position: relative; }
.stat-band .sb-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat-band .sb-item { padding: 6px 26px; border-left: 1px solid rgba(255,255,255,.14); }
.stat-band .sb-item:first-child { border-left: 0; }
.stat-band .sb-num {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  color: #fff; line-height: 1;
}
.stat-band .sb-num em { font-style: normal; color: var(--green); }
.stat-band .sb-label {
  font-family: var(--font-display); font-size: .62rem; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(255,255,255,.5); margin-top: 10px;
}
.stat-band .edge { position: absolute; top: 50%; transform: translateY(-50%); width: 9px; height: 78px; background: rgba(255,255,255,.16); }
.stat-band .edge.l { left: 0; }
.stat-band .edge.r { right: 0; }

/* ---------- 16. Dealer band ---------- */
.dealer-band { position: relative; min-height: 400px; display: flex; align-items: center; overflow: hidden; background: var(--ink-2); }
.dealer-band .db-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.dealer-band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,12,11,.88) 0%, rgba(10,12,11,.6) 55%, rgba(10,12,11,.2) 100%); }
.dealer-band > .container { position: relative; z-index: 3; }
.dealer-band h2 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.9rem); margin-bottom: 16px; }
.dealer-band p { color: rgba(255,255,255,.78); font-size: .95rem; max-width: 42ch; margin-bottom: 28px; }

.band { position: relative; overflow: hidden; padding: 84px 36px; text-align: center; color: #fff; }
.band .band-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(20,79,61,.9), rgba(10,12,11,.86)); }
.band > * { position: relative; z-index: 2; }
.band h2 { color: #fff; font-size: clamp(1.8rem, 3.8vw, 2.6rem); margin-bottom: 14px; }
.band p { color: rgba(255,255,255,.76); max-width: 52ch; margin: 0 auto 28px; }

/* ---------- 17. Testimonials ---------- */
.quote-panel { padding: 34px 36px 30px; }
.quote-panel .stars { color: var(--green); font-size: .8rem; letter-spacing: 4px; margin-bottom: 20px; }
.quote-panel blockquote { font-size: 1.08rem; line-height: 1.62; color: var(--ink); margin-bottom: 26px; font-weight: 500; }
.quote-panel .q-person { display: flex; align-items: center; gap: 14px; }
.quote-panel .q-avatar { width: 44px; height: 44px; object-fit: cover; flex: none; background: var(--paper-2); }
.quote-panel .q-name { font-family: var(--font-display); font-weight: 500; font-size: .95rem; color: var(--ink); letter-spacing: .02em; }
.quote-panel .q-role { font-size: .82rem; color: var(--muted); }
.quote-panel .q-count { font-family: var(--font-display); font-size: .7rem; letter-spacing: .14em; color: var(--muted-2); }

.q-nav { display: flex; gap: 8px; }
.q-nav button {
  width: 38px; height: 38px; border: 1px solid var(--line); background: #fff;
  color: var(--ink); display: grid; place-items: center; font-size: .8rem; transition: all .22s var(--ease);
}
.q-nav button:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- 18. Brand strip ---------- */
.brand-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; padding: 26px 0; }
.brand-track { display: flex; gap: 76px; width: max-content; animation: marquee 34s linear infinite; }
.brand-track span {
  font-family: var(--font-display); font-size: .82rem; letter-spacing: .34em;
  text-transform: uppercase; color: var(--muted-2); white-space: nowrap;
}
@keyframes marquee { to { transform: translateX(-50%); } }
.brand-strip:hover .brand-track { animation-play-state: paused; }

/* ---------- 19. Green CTA ---------- */
.cta-green { background: var(--green-deep); padding: 62px 56px; position: relative; }
.cta-green h2 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom: 14px; }
.cta-green p { color: rgba(255,255,255,.8); font-size: .95rem; max-width: 44ch; margin: 0; }

.cta-final { padding: 96px 0; background: var(--ink-2); color: rgba(255,255,255,.7); }
.cta-final h2 { color: #fff; }
.cta-final .lead-text { color: rgba(255,255,255,.62); }

/* ---------- 20. Forms ---------- */
.form-control, .form-select {
  border: 1px solid var(--line); border-radius: 0; padding: 12px 14px;
  font-size: .93rem; color: var(--ink); background-color: #fff; transition: border-color .2s var(--ease);
}
.form-control:focus, .form-select:focus { border-color: var(--green); box-shadow: none; }
.form-control::placeholder { color: var(--muted-2); }
textarea.form-control { min-height: 128px; resize: vertical; }
.form-label {
  font-family: var(--font-display); font-size: .62rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 7px;
}
.form-panel { border: 1px solid var(--line); padding: 38px; background: #fff; }
.form-note { font-size: .82rem; color: var(--muted); }

.radio-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.radio-tiles > div { position: relative; }
.radio-tiles input { position: absolute; inset: 0; opacity: 0; }
.radio-tiles label {
  display: block; text-align: center; padding: 13px 8px; border: 1px solid var(--line);
  font-family: var(--font-display); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; cursor: pointer; transition: all .22s var(--ease); margin: 0; color: var(--ink);
}
.radio-tiles input:checked + label { border-color: var(--green); background: var(--green-pale); color: var(--green-dark); }

.alert-ok { background: var(--green-pale); border: 1px solid var(--green); color: var(--green-dark); padding: 14px 18px; font-size: .92rem; }
.is-invalid { border-color: #d64545 !important; }
.err-msg { font-size: .78rem; color: #d64545; margin-top: 5px; display: none; }
.err-msg.show { display: block; }

/* ---------- 21. Catalogue ---------- */
.filter-bar { border: 1px solid var(--line); padding: 24px; background: #fff; }
.filter-bar label {
  font-family: var(--font-display); font-size: .62rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 7px; display: block;
}
.filter-sticky { position: sticky; top: calc(var(--nav-h) + 20px); }

.result-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.result-meta .count { font-family: var(--font-display); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.result-meta .count b { color: var(--ink); }

.chip {
  display: inline-flex; align-items: center; gap: 8px; background: var(--paper-2);
  border: 1px solid var(--line); padding: 7px 12px;
  font-family: var(--font-display); font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink);
}
.chip button { border: 0; background: none; color: var(--muted); padding: 0; line-height: 1; font-size: .72rem; }
.chip button:hover { color: var(--ink); }

.empty-state { text-align: center; padding: 76px 20px; border: 1px dashed var(--line); }
.empty-state i { font-size: 2.2rem; color: var(--muted-2); margin-bottom: 14px; display: block; }

.compare-tray {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  background: var(--ink-2); color: #fff; padding: 15px 0;
  transform: translateY(120%); transition: transform .38s var(--ease);
}
.compare-tray.show { transform: translateY(0); }
.compare-tray .tray-inner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between; }
.compare-tray .tray-items { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.tray-thumb { display: flex; align-items: center; gap: 9px; background: rgba(255,255,255,.08); padding: 6px 12px 6px 6px; font-size: .82rem; }
.tray-thumb img { width: 30px; height: 30px; object-fit: cover; }
.tray-thumb button { border: 0; background: none; color: rgba(255,255,255,.6); font-size: .72rem; }
.tray-thumb button:hover { color: #fff; }

/* ---------- 22. Vehicle detail ---------- */
.gallery-main { aspect-ratio: 16/10; overflow: hidden; background: var(--paper-2); border: 1px solid var(--line); }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 8px; }
.gallery-thumbs button { aspect-ratio: 4/3; overflow: hidden; padding: 0; border: 1px solid var(--line); background: var(--paper-2); transition: border-color .22s var(--ease); }
.gallery-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs button.active { border-color: var(--green); }
.gallery-thumbs button:hover { border-color: var(--ink); }

.buy-box { border: 1px solid var(--line); padding: 30px 28px; background: #fff; position: sticky; top: calc(var(--nav-h) + 20px); }
.buy-box .price-label { font-family: var(--font-display); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.buy-box .price { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--ink); margin: 6px 0 4px; }
.buy-box .price-note { font-size: .82rem; color: var(--muted); margin-bottom: 22px; }

.spec-table { width: 100%; }
.spec-table tr { border-bottom: 1px solid var(--line-2); }
.spec-table td { padding: 14px 0; font-size: .92rem; vertical-align: top; }
.spec-table td:first-child { color: var(--muted); width: 46%; }
.spec-table td:last-child { color: var(--ink); font-weight: 500; text-align: right; }

.feature-pill { display: flex; align-items: flex-start; gap: 11px; padding: 15px 18px; background: var(--paper-2); font-size: .9rem; }
.feature-pill i { color: var(--green); margin-top: 3px; flex: none; }

.key-stat {
    text-align: center;
    padding: 20px 5px;
    border-right: 1px solid var(--line);
}
.key-stat:last-child { border-right: 0; }
.key-stat .ks-icon { color: var(--green); font-size: 1.2rem; margin-bottom: 10px; }
.key-stat .ks-val { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--ink); }
.key-stat .ks-label { font-family: var(--font-display); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-top: 5px; }

/* ---------- 22b. Other images (full-width gallery) ---------- */
.oi-list { display: flex; flex-direction: column; gap: 34px; }
.oi-item { margin: 0; background: #fff; }
.oi-media { aspect-ratio: 21/9; overflow: hidden; background: var(--paper-2); }
.oi-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.oi-item:hover .oi-media img { transform: scale(1.04); }
.oi-cap { padding: 22px 26px 26px; border-top: 1px solid var(--line); }
.oi-cap h3 { font-size: 1.05rem; letter-spacing: .04em; margin-bottom: 8px; }
.oi-cap p { font-size: .9rem; margin: 0; max-width: 70ch; }

@media (max-width: 767.98px) {
  .oi-list { gap: 24px; }
  .oi-media { aspect-ratio: 16/10; }
  .oi-cap { padding: 18px 20px 22px; }
}

/* ---------- 23. Contact ---------- */
.contact-card { border: 1px solid var(--line); padding: 30px 24px; height: 100%; background: #fff; transition: border-color .3s var(--ease); }
.contact-card:hover { border-color: var(--ink); }
.contact-card .c-icon { color: var(--green); font-size: 1.2rem; margin-bottom: 18px; }
.contact-card h3 { font-size: 1rem; letter-spacing: .04em; margin-bottom: 12px; }
.contact-card p, .contact-card a { font-size: .9rem; color: var(--body); margin: 0 0 3px; display: block; }
.contact-card a:hover { color: var(--green); }

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

/* ---------- 24. Accordion ---------- */
.accordion-item { border: 0; border-bottom: 1px solid var(--line); background: transparent; }
.accordion-button {
  background: transparent; padding: 20px 0; color: var(--ink); box-shadow: none;
  font-family: var(--font-display); font-weight: 500; font-size: .95rem;
  letter-spacing: .06em; text-transform: uppercase;
}
.accordion-button:not(.collapsed) { background: transparent; color: var(--green); box-shadow: none; }
.accordion-button:focus { box-shadow: none; }
.accordion-button::after { width: 14px; height: 14px; background-size: 14px; }
.accordion-body { padding: 0 0 22px; color: var(--body); font-size: .92rem; }

/* ---------- 25. Footer ---------- */
.site-footer { background: var(--ink-3); color: rgba(255,255,255,.62); padding: 72px 0 0; }
.site-footer h4 {
  color: #fff; font-family: var(--font-display); font-weight: 500;
  font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; margin-bottom: 20px;
}
.site-footer a { color: rgba(255,255,255,.62); font-size: .9rem; }
.site-footer a:hover { color: var(--green); }
.site-footer .f-links { padding: 0; margin: 0; list-style: none; }
.site-footer .f-links li { margin-bottom: 11px; }
.site-footer .f-about { font-size: .9rem; max-width: 32ch; margin: 20px 0 22px; }

.footer-logo { background: #fff; padding: 8px 12px; display: inline-block; }
.footer-logo img { height: 40px; width: auto; }

.news-form { display: flex; }
.news-form .form-control { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: #fff; font-size: .88rem; }
.news-form .form-control::placeholder { color: rgba(255,255,255,.42); }
.news-form .form-control:focus { background: rgba(255,255,255,.11); border-color: var(--green); }
.news-form .btn { padding-left: 18px; padding-right: 18px; }

.f-social { display: flex; gap: 8px; }
.f-social a { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.18); display: grid; place-items: center; font-size: .8rem; }
.f-social a:hover { background: var(--green); border-color: var(--green); color: #fff; }

.f-bottom {
  margin-top: 56px; padding: 22px 0; border-top: 1px solid var(--line-dark);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .82rem;
}
.f-bottom .f-legal { display: flex; gap: 24px; flex-wrap: wrap; }

/* ---------- 26. Reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .75s var(--ease), transform .75s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .brand-track { animation: none; }
  .scroll-hint i { animation: none; }
}



/* ---------- reading progress ---------- */
.read-bar { position: fixed; top: var(--nav-h); left: 0; height: 2px; width: 0; background: var(--green); z-index: 1049; transition: width .12s linear; }
 
/* ---------- article header meta ---------- */
.a-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--font-display); font-size: .64rem; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(255,255,255,.55); margin-top: 20px;
}
.a-meta .a-cat { background: var(--green); color: #fff; padding: 6px 11px; letter-spacing: .18em; }
.a-meta .dot { width: 3px; height: 3px; background: rgba(255,255,255,.35); }
 
/* ---------- article body ---------- */
.article-body > * + * { margin-top: 0; }
.article-body p { font-size: 1rem; line-height: 1.8; margin: 0 0 1.35rem; }
.article-body .lede { font-size: 1.13rem; line-height: 1.68; color: var(--ink); font-weight: 500; margin-bottom: 1.6rem; }
.article-body h2 { font-size: 1.4rem; letter-spacing: .02em; margin: 44px 0 14px; }
.article-body h3 { font-size: 1.05rem; letter-spacing: .05em; margin: 32px 0 10px; }
.article-body a:not(.btn) { color: var(--green-dark); border-bottom: 1px solid var(--line); }
.article-body a:not(.btn):hover { border-bottom-color: var(--green); }
.article-body ul, .article-body ol { padding-left: 0; margin: 0 0 1.35rem; list-style: none; }
.article-body ol { counter-reset: ab; }
.article-body ul li, .article-body ol li { position: relative; padding-left: 26px; font-size: .97rem; margin-bottom: 11px; }
.article-body ul li::before { content: ''; position: absolute; left: 2px; top: .72em; width: 8px; height: 1px; background: var(--green); }
.article-body ol li { counter-increment: ab; }
.article-body ol li::before {
  content: counter(ab, decimal-leading-zero); position: absolute; left: 0; top: .1em;
  font-family: var(--font-display); font-size: .66rem; letter-spacing: .1em; color: var(--green);
}
.article-body blockquote {
  margin: 34px 0; padding: 26px 28px; background: var(--paper-2); border-left: 2px solid var(--green);
  font-size: 1.08rem; line-height: 1.6; font-weight: 500; color: var(--ink);
}
.article-body blockquote footer {
  font-family: var(--font-display); font-size: .64rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted); margin-top: 16px; font-weight: 400;
}
.article-body hr { margin: 40px 0; }
 
/* inline figures */
.a-figure { margin: 34px 0; }
.a-figure .af-media { overflow: hidden; background: var(--paper-2); aspect-ratio: 16/9; }
.a-figure .af-media img { width: 100%; height: 100%; object-fit: cover; }
.a-figure figcaption {
  font-size: .8rem; color: var(--muted); padding: 12px 2px 0; border-top: 1px solid var(--line); margin-top: 12px;
}
 
/* lead image */
.a-lead { overflow: hidden; background: var(--paper-2); aspect-ratio: 21/9; }
.a-lead img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767.98px) { .a-lead { aspect-ratio: 16/10; } }
 
/* key figures strip inside article */
.a-facts { display: grid; grid-template-columns: repeat(3, 1fr); margin: 34px 0; }
.a-facts > div { padding: 22px 20px; border-left: 1px solid var(--line); }
.a-facts > div:first-child { border-left: 0; padding-left: 0; }
.a-facts .af-val { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--ink); line-height: 1; }
.a-facts .af-label { font-family: var(--font-display); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
@media (max-width: 575.98px) {
  .a-facts { grid-template-columns: 1fr; }
  .a-facts > div { border-left: 0; padding-left: 0; border-bottom: 1px solid var(--line); }
  .a-facts > div:last-child { border-bottom: 0; }
}
 
/* tags + share */
.a-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 44px; }
.tag-list { display: flex; gap: 8px; flex-wrap: wrap; }
.tag-list a {
  font-family: var(--font-display); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid var(--line); padding: 8px 12px; color: var(--ink);
}
.tag-list a:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.share-list { display: flex; align-items: center; gap: 8px; }
.share-list .s-label { font-family: var(--font-display); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.share-list a, .share-list button {
  width: 36px; height: 36px; border: 1px solid var(--line); background: #fff; color: var(--ink);
  display: grid; place-items: center; font-size: .82rem; padding: 0; transition: all .22s var(--ease);
}
.share-list a:hover, .share-list button:hover { background: var(--green); border-color: var(--green); color: #fff; }
 
/* author */
.author-box { display: flex; gap: 20px; padding: 26px 24px; margin-top: 34px; }
.author-box img { width: 64px; height: 64px; object-fit: cover; flex: none; background: var(--paper-2); }
.author-box .ab-name { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink); text-transform: uppercase; letter-spacing: .04em; }
.author-box .ab-role { font-family: var(--font-display); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--green); margin: 5px 0 10px; }
.author-box p { font-size: .88rem; margin: 0; }
@media (max-width: 575.98px) { .author-box { flex-direction: column; gap: 14px; } }
 
/* prev / next */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); margin-top: 34px; }
.post-nav a { padding: 24px 26px; display: block; transition: background .25s var(--ease); }
.post-nav a + a { border-left: 1px solid var(--line); text-align: right; }
.post-nav a:hover { background: var(--paper-2); }
.post-nav .pn-dir { font-family: var(--font-display); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--green); margin-bottom: 9px; }
.post-nav .pn-title { font-family: var(--font-display); font-weight: 500; font-size: .98rem; color: var(--ink); line-height: 1.3; }
@media (max-width: 575.98px) {
  .post-nav { grid-template-columns: 1fr; }
  .post-nav a + a { border-left: 0; border-top: 1px solid var(--line); text-align: left; }
}
 
/* ---------- sidebar ---------- */
.side-rail { position: sticky; top: calc(var(--nav-h) + 24px); display: flex; flex-direction: column; gap: 26px; }
@media (max-width: 991.98px) { .side-rail { position: static; margin-top: 46px; } }
.side-widget { padding: 26px 24px; }
.side-widget h4 { font-family: var(--font-display); font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); margin-bottom: 18px; }
.side-widget h4::after { content: ''; display: block; width: 24px; height: 1px; background: var(--green); margin-top: 10px; }
 
.toc { list-style: none; padding: 0; margin: 0; }
.toc li + li { margin-top: 10px; }
.toc a { font-size: .89rem; color: var(--body); display: flex; gap: 10px; }
.toc a::before { content: ''; width: 7px; height: 1px; background: var(--muted-2); flex: none; margin-top: .78em; transition: all .22s var(--ease); }
.toc a:hover, .toc a.active { color: var(--green-dark); }
.toc a:hover::before, .toc a.active::before { background: var(--green); width: 14px; }
 
.side-list { list-style: none; padding: 0; margin: 0; }
.side-list li { padding: 15px 0; border-bottom: 1px solid var(--line-2); }
.side-list li:first-child { padding-top: 0; }
.side-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.side-list a { display: flex; gap: 13px; }
.side-list img { width: 66px; height: 50px; object-fit: cover; flex: none; background: var(--paper-2); }
.side-list .sl-date { font-family: var(--font-display); font-size: .56rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 5px; }
.side-list .sl-title { font-size: .88rem; line-height: 1.35; color: var(--ink); font-weight: 500; }
.side-list a:hover .sl-title { color: var(--green); }
 
.cat-list { list-style: none; padding: 0; margin: 0; }
.cat-list li + li { border-top: 1px solid var(--line-2); }
.cat-list a { display: flex; justify-content: space-between; padding: 12px 0; font-size: .9rem; color: var(--ink); }
.cat-list a span { font-family: var(--font-display); font-size: .68rem; color: var(--muted-2); letter-spacing: .1em; }
.cat-list a:hover { color: var(--green); }
 
.side-cta { background: var(--green-deep); padding: 30px 26px; }
.side-cta h4 { color: #fff; }
.side-cta h4::after { background: rgba(255,255,255,.4); }
.side-cta p { color: rgba(255,255,255,.78); font-size: .88rem; margin-bottom: 20px; }


 
/* ---------- 29.1 Category filters ---------- */
.n-filters { display: flex; flex-wrap: wrap; gap: 8px; }
 
.n-filter {
  font-family: var(--font-display); font-weight: 500;
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); background: #fff;
  border: 1px solid var(--line); border-radius: 0;
  padding: 9px 15px; line-height: 1;
  transition: all .22s var(--ease);
}
.n-filter:hover { border-color: var(--ink); color: var(--ink); }
.n-filter.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.n-filter:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(44,154,119,.3); }
 
/* ---------- 29.2 Featured story (image left, copy right) ---------- */
.news-feature {
  display: grid; grid-template-columns: 1.05fr 1fr;
  align-items: stretch; overflow: hidden;
  transition: border-color .3s var(--ease);
}
.news-feature:hover { border-color: var(--ink); }
 
.nf-media { position: relative; overflow: hidden; background: var(--paper-2); min-height: 340px; }
.nf-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.news-feature:hover .nf-media img { transform: scale(1.04); }
 
.nf-flag {
  position: absolute; top: 0; left: 0; z-index: 2;
  background: var(--green); color: #fff;
  font-family: var(--font-display); font-weight: 500;
  font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  padding: 8px 14px;
}
 
.nf-body { padding: 44px 46px; display: flex; flex-direction: column; justify-content: center; }
.nf-body h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  text-transform: none; letter-spacing: 0; line-height: 1.2;
  margin-bottom: 16px;
}
.news-feature:hover .nf-body h2 { color: var(--green); }
.nf-body p { font-size: .95rem; color: var(--body); margin-bottom: 24px; max-width: 52ch; }
 
/* ---------- 29.3 List controls ---------- */
.n-hidden { display: none !important; }
 
.n-more { text-align: center; margin-top: 46px; }
 
/* ---------- 29.4 Pager ----------
   Not used by the static build (the list uses "Load more"), but ready for
   server-side pagination — drop it in place of .n-more. */
.pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 48px; }
.pager a, .pager span {
  min-width: 40px; height: 40px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: #fff;
  font-family: var(--font-display); font-size: .72rem; letter-spacing: .1em;
  color: var(--ink); transition: all .22s var(--ease);
}
.pager a:hover { border-color: var(--ink); }
.pager .current { background: var(--ink); border-color: var(--ink); color: #fff; }
.pager .disabled { color: var(--muted-2); border-color: var(--line-2); pointer-events: none; }
 
 
/* ==========================================================================
   30. About
   ========================================================================== */
 
/* ---------- 30.1 Milestone timeline ----------
   A single hairline runs down the left; each year sits on a square node. */
.timeline { list-style: none; margin: 0; padding: 0 0 0 34px; position: relative; }
.timeline::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 1px; background: var(--line);
}
 
.tl-item {
  position: relative;
  display: grid; grid-template-columns: 118px 1fr; gap: 26px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line-2);
}
.tl-item:last-child { border-bottom: 0; }
 
.tl-item::before {
  content: ''; position: absolute; left: -38px; top: 34px;
  width: 9px; height: 9px; background: var(--paper); border: 1px solid var(--muted-2);
  transition: all .3s var(--ease);
}
.tl-item:hover::before { background: var(--green); border-color: var(--green); }
 
.tl-year {
  font-family: var(--font-display); font-weight: 600; font-size: 1.45rem;
  color: var(--green); line-height: 1; padding-top: 2px; letter-spacing: .02em;
}
 
.tl-body h3 { font-size: 1.02rem; letter-spacing: .04em; margin-bottom: 9px; }
.tl-body p { font-size: .92rem; margin: 0; max-width: 62ch; }
 
/* ---------- 30.2 Leadership cards ---------- */
.person-card { height: 100%; display: flex; flex-direction: column; transition: border-color .3s var(--ease); }
.person-card:hover { border-color: var(--ink); }
 
.pc-media { aspect-ratio: 3/4; overflow: hidden; background: var(--paper-2); }
.pc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.person-card:hover .pc-media img { transform: scale(1.04); }
 
.pc-body { padding: 22px 22px 26px; }
.pc-body h3 { font-size: 1rem; letter-spacing: .04em; margin-bottom: 7px; }
.pc-role {
  font-family: var(--font-display); font-size: .6rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--green); margin-bottom: 12px;
}
.pc-body p { font-size: .86rem; margin: 0; }
 
/* ---------- 30.3 Facility cards ---------- */
.fac-card { height: 100%; display: flex; flex-direction: column; transition: border-color .3s var(--ease); }
.fac-card:hover { border-color: var(--ink); }
 
.fac-media { aspect-ratio: 16/10; overflow: hidden; background: var(--paper-2); }
.fac-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.fac-card:hover .fac-media img { transform: scale(1.04); }
 
.fac-body { padding: 24px 24px 28px; }
.fac-tag {
  font-family: var(--font-display); font-size: .6rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: 12px;
}
.fac-body h3 { font-size: 1.05rem; letter-spacing: .04em; margin-bottom: 10px; }
.fac-body p { font-size: .9rem; margin: 0; }
 
 
/* ==========================================================================
   31. Responsive
   ========================================================================== */
 
@media (max-width: 991.98px) {
  .news-feature { grid-template-columns: 1fr; }
  .nf-media { min-height: 0; aspect-ratio: 16/9; }
  .nf-body { padding: 30px 28px 34px; }
 
  .n-filters { width: 100%; }
 
  .timeline { padding-left: 28px; }
  .tl-item { grid-template-columns: 88px 1fr; gap: 18px; padding: 22px 0; }
  .tl-item::before { left: -32px; top: 30px; }
  .tl-year { font-size: 1.25rem; }
 
  .pc-media { aspect-ratio: 1/1; }
}
 
@media (max-width: 767.98px) {
  .nf-body { padding: 24px 20px 28px; }
  .nf-body p { margin-bottom: 18px; }
 
  .n-filter { font-size: .6rem; padding: 8px 12px; }
  .n-more { margin-top: 34px; }
 
  /* Year stacks above the copy so long titles keep their line length */
  .tl-item { grid-template-columns: 1fr; gap: 8px; }
  .tl-item::before { top: 27px; }
 
  .pc-body { padding: 18px 18px 22px; }
  .fac-body { padding: 20px 20px 24px; }
}


/* ==========================================================================
   27. Responsive
   ========================================================================== */

@media (max-width: 1199.98px) {
  .section { padding: 82px 0; }
  .hero-stats { gap: 38px; }
  .cta-green { padding: 52px 40px; }
}

/* Tablet landscape */
@media (max-width: 991.98px) {
  :root { --nav-h: 66px; }
  .section { padding: 66px 0; }
  .section-sm { padding: 50px 0; }

  .hero { height: auto; min-height: 0; padding: 90px 0 78px; }
  .hero::after { background: linear-gradient(90deg, rgba(10,12,11,.9) 0%, rgba(10,12,11,.72) 70%, rgba(10,12,11,.5) 100%); }
  .hero-stats { margin-top: 46px; gap: 34px; }
  .scroll-hint { display: none; }
  .hero-dots { bottom: 22px; right: 22px; }
  .hero-dots button { width: 24px; }
  .hero-dots button.active { width: 40px; }

  .page-hero { padding: calc(var(--nav-h) + 58px) 0 58px; }
  .head-split { grid-template-columns: 1fr; gap: 18px; }
  .head-split .hs-copy { padding-top: 0; }

  .stat-band .sb-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-band .sb-item { padding: 20px 22px; border-left: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
  .stat-band .sb-item:nth-child(odd) { border-left: 0; }
  .stat-band .sb-item:nth-last-child(-n+2) { border-bottom: 0; }
  .stat-band .edge { display: none; }

  .grid-cell { padding: 26px 22px 28px; }
  .dealer-band { min-height: 340px; padding: 60px 0; }
  .dealer-band::after { background: linear-gradient(90deg, rgba(10,12,11,.9) 0%, rgba(10,12,11,.7) 100%); }

  .cta-green { padding: 44px 32px; }
  .about-media { margin-bottom: 30px; }
  .buy-box, .filter-sticky { position: static; }
  .form-panel { padding: 28px; }
  .band { padding: 62px 26px; }
  .key-stat { border-right: 0; border-bottom: 1px solid var(--line); }
  .site-footer { padding-top: 58px; }
  .brand-track { gap: 54px; }
}

/* Tablet portrait / large phone */
@media (max-width: 767.98px) {
  .section { padding: 54px 0; }
  .section-sm { padding: 42px 0; }
  .container { padding-left: 18px; padding-right: 18px; }

  .hero { padding: 70px 0 62px; }
  .hero p { font-size: .95rem; }
  .hero-stats { gap: 26px 34px; margin-top: 38px; }
  .hero-stats .stat-num { font-size: 1.6rem; }

  .section-head { margin-bottom: 34px; }
  .head-row { margin-bottom: 30px; gap: 22px; }

  .spec-grid > div { padding-left: 14px; }
  .quote-panel { padding: 26px 22px; }
  .quote-panel blockquote { font-size: 1rem; }

  .cta-green { padding: 36px 24px; }
  .gallery-thumbs { grid-template-columns: repeat(4, 1fr); }
  .radio-tiles { grid-template-columns: 1fr; }
  .form-panel { padding: 22px; }
  .map-frame { height: 300px; }
  .compare-tray .tray-inner { justify-content: center; }
  .f-bottom { flex-direction: column; align-items: center; text-align: center; }
  .f-bottom .f-legal { justify-content: center; }
}

/* Small phone */
@media (max-width: 575.98px) {
  .hero h1 { font-size: clamp(2.3rem, 12vw, 3.1rem); }
  .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
  .btn { width: 100%; }
      .btn-inline-auto .btn {
        width: auto;
        padding: 15px;
        font-size: 9px;
    }
  .news-form { flex-direction: column; gap: 8px; }
  .news-form .btn { width: 100%; }
  .stat-band .sb-grid { grid-template-columns: 1fr; }
  .stat-band .sb-item { border-left: 0; }
  .spec-grid { grid-template-columns: 1fr; }
  .spec-grid > div { padding-left: 0 !important; border-left: 0; border-bottom: 1px solid var(--line-2); }
  .spec-grid > div:nth-child(2) { padding-top: 14px; }
  .spec-grid > div:last-child { border-bottom: 0; }
  .v-actions { flex-direction: column; }
  .gallery-thumbs { grid-template-columns: repeat(3, 1fr); }
  .buy-box { padding: 24px 20px; }
  .cc-body, .v-card-body, .n-body { padding-left: 20px; padding-right: 20px; }
  .mv-row { grid-template-columns: 1fr; gap: 6px; }
}

/* ==========================================================================
   28. Home hero — full-bleed video banner + transparent header
   Everything here is scoped to `body.hero-video`, so the inner pages keep
   the original white navbar untouched.
   ========================================================================== */

/* ---------- 28.1 Hero runs from the very top of the page ---------- */
body.hero-video .hero {
    margin-top: 0;
    height: 100vh;
    min-height: 620px;
    padding-top: var(--nav-h);
    padding-bottom:30px;
    background: var(--ink-2);
    align-items: end;
}

.hero-media {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background: #0c0d0f center/cover no-repeat;
}
.hero-media .hero-vid {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  /* footage is a white van in a white showroom — knock it back a little so
     white type has something to sit on */
  filter: brightness(.88) contrast(1.04) saturate(1.04);
}

/* ---------- 28.2 Overlays ----------
   Two layers: a vertical scrim (readable header + scroll cue) and the
   horizontal scrim that carries the headline column. */
.hero-media::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,10,9,.62) 0%, rgba(8,10,9,.14) 38%, rgba(8,10,9,.20) 62%, rgba(8,10,9,.66) 100%),
    rgba(8,10,9,.26);
}
body.hero-video .hero::after {
  z-index: 2;
}
body.hero-video .hero > .container { z-index: 3; }

/* ---------- 28.3 Header over the video ---------- */
.site-nav.nav-invert {
  background: transparent;
  border-bottom-color: transparent;
}
.site-nav { transition: background .35s var(--ease), border-color .35s var(--ease); }

/* extra scrim that travels with the bar, so links stay legible even when the
   frame behind them is blown-out white */
.site-nav.nav-invert::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0;
  height: calc(var(--nav-h) + 64px); z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,10,9,.70) 0%, rgba(8,10,9,.32) 58%, rgba(8,10,9,0) 100%);
}

/* menu → white */
.site-nav.nav-invert .nav-links .nav-link { color: rgba(255,255,255,.78); }
.site-nav.nav-invert .nav-links .nav-link:hover,
.site-nav.nav-invert .nav-links .nav-link.active { color: #fff; }

.site-nav.nav-invert .nav-search {
  background: transparent; border-color: rgba(255,255,255,.45); color: #fff;
}
.site-nav.nav-invert .nav-search:hover { border-color: #fff; background: rgba(255,255,255,.14); }

.site-nav.nav-invert .nav-toggle { background: transparent; border-color: rgba(255,255,255,.45); }
.site-nav.nav-invert .nav-toggle span { background: #fff; }

/* ---------- 28.4 Logo → white ----------
   The supplied logo is a .jpeg (solid background), so it can't be tinted.
   A transparent white PNG/SVG at assets/img/logo-white.png is swapped in over
   the video. If that file is absent, .no-white-logo kicks in and the original
   logo gets the same white plate the footer already uses. */
.brand-mark { position: relative; }
.brand-mark .logo-white { height: 42px; width: auto; display: none; }
.site-nav.nav-invert .brand-mark .logo-solid { display: none; }
.site-nav.nav-invert .brand-mark .logo-white { display: block; }

.brand-mark.no-white-logo .logo-solid { display: block !important;height:55px;  }
/*.site-nav.nav-invert .brand-mark.no-white-logo .logo-solid {*/
/*  background: #fff; padding: 5px 9px;*/
/*}*/

/* ---------- 28.5 Solid state (scrolled past the hero / menu open) ---------- */
body.hero-video .site-nav:not(.nav-invert) { background: #fff; border-bottom-color: var(--line); }

/* ---------- 28.6 Scroll cue ---------- */
body.hero-video .scroll-hint { z-index: 4; color: rgba(255,255,255,.72); }



 
.brand-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 680px;          /* keeps the pair left-aligned, not stretched */
  margin-bottom: 42px;
}
 
/* ---------- The plate ---------- */
.brand-tab {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  width: 100%; text-align: left;
  padding: 17px 20px;
  background: #fff; border: 1px solid var(--line); border-radius: 0;
  transition: border-color .28s var(--ease), background .28s var(--ease);
}
 
/* accent rule that draws in along the top edge when selected */
.brand-tab::after {
  content: ''; position: absolute; left: -1px; right: -1px; top: -1px;
  height: 2px; background: var(--green);
  transform: scaleX(0); transform-origin: left;
  transition: transform .34s var(--ease);
}
 
.brand-tab:hover { border-color: var(--muted-2); }
.brand-tab.active { background:var(--green); }
.brand-tab.active::after { transform: scaleX(1); }
.brand-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(44,154,119,.3); }
 
/* ---------- Logo plate ---------- */
.bt-mark {
  flex: none; width: 54px; height: 54px;
  display: grid; place-items: center;
  background: var(--paper-2);
  transition: background .28s var(--ease);
}
.bt-mark img {
  width: 32px; height: 32px; object-fit: contain;
  /* unselected brands sit back in greyscale, the active one comes forward */
  filter: grayscale(1); opacity: .42;
  transition: filter .28s var(--ease), opacity .28s var(--ease);
}
.brand-tab:hover .bt-mark img { opacity: .72; }
.brand-tab.active .bt-mark { background: var(--green-pale); }
.brand-tab.active .bt-mark img { filter: none; opacity: 1; }
 
/* ---------- Type ---------- */
.bt-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
 
.bt-name {
  font-family: var(--font-display); font-weight: 600;
  font-size: .98rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); line-height: 1;
  transition: color .28s var(--ease);
}
.brand-tab:hover .bt-name { color: var(--ink); }
.brand-tab.active .bt-name { color: #fff; }
.brand-tab.active .bt-note { color: #fff; }
 
.bt-note {
  font-family: var(--font-display); font-weight: 400;
  font-size: .58rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted-2); line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
 
/* ---------- Selected cue ---------- */
.bt-cue {
  margin-left: auto; flex: none; font-size: .82rem;
  color: var(--green); opacity: 0; transform: translateX(-6px);
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.brand-tab.active .bt-cue { opacity: 1; transform: none; color:#fff; }
 
/* ---------- Panels ---------- */
.brand-panel { display: none; }
.brand-panel.active { display: block; }
 
/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
  .brand-tabs { gap: 10px; margin-bottom: 32px; }
  .brand-tab { padding: 13px 8px; gap: 12px; }
  .bt-mark { width: 44px; height: 44px; }
  .bt-mark img { width: 26px; height: 26px; }
  .bt-name { font-size: .84rem; letter-spacing: .1em; }
  .bt-cue { display: none; }
}
 
/* One per row on small phones — two plates get too cramped to read */
@media (max-width: 479.98px) {
  .bt-cue { display: block; }
}
 
@media (prefers-reduced-motion: reduce) {
  .brand-tab::after, .bt-cue { transition: none; }
}


/* ---------- 28.7 Responsive ---------- */
@media (max-width: 991.98px) {
  body.hero-video .hero {
    height: auto; min-height: 65vh;
    padding: calc(var(--nav-h) + 74px) 0 84px;
  }
  body.hero-video .hero::after {
    background: unset;
  }
}
@media (max-width: 767.98px) {
  body.hero-video .hero { padding: calc(var(--nav-h) + 58px) 0 66px; }
  .brand-mark .logo-white { height: 36px; }
}

/* ---------- 28.8 Reduced motion → hold on the poster frame ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-media .hero-vid { display: none; }
  .hero-media { background-image: url('../img/hero-poster.jpg'); }
}


.svc-list { display: flex; flex-direction: column; }
 
/* Two equal columns; every second row swaps the image to the right. */
.svc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
/* hairline sits centred in the space between rows */
.svc-row + .svc-row {
  margin-top: 84px; padding-top: 84px;
  border-top: 1px solid var(--line-2);
}
.svc-row:nth-child(even) .svc-media { order: 2; }
 
/* ---------- Media ---------- */
.svc-frame {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--paper-2);
}
.svc-frame img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--ease);
}
.svc-row:hover .svc-frame img { transform: scale(1.04); }
 
/* thin green rule that reads as a caption mark on the image edge */
.svc-frame::after {
  content: ''; position: absolute; left: 0; bottom: 0; z-index: 2;
  width: 78px; height: 3px; background: var(--green);
}
.svc-row:nth-child(even) .svc-frame::after { left: auto; right: 0; }
 
/* ---------- Copy ---------- */
.svc-body { max-width: 52ch; }
 
/* outlined section number — sits above the eyebrow, sets the rhythm */
.svc-num {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: 3.2rem; line-height: 1; letter-spacing: .02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--muted-2);
  margin-bottom: 14px;
}
/* fall back to a solid number where text-stroke isn't supported */
@supports not (-webkit-text-stroke: 1px #000) {
  .svc-num { color: var(--muted-2); }
}
 
.svc-body h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  line-height: 1.1; margin-bottom: 18px;
}
.svc-body > p { font-size: .96rem; color: var(--body); margin-bottom: 24px; }
 
/* ---------- Point list ---------- */
.svc-points { list-style: none; padding: 0; margin: 0 0 28px; }
.svc-points li {
  position: relative;
  padding: 12px 0 12px 26px;
  border-bottom: 1px solid var(--line-2);
  font-size: .91rem; color: var(--body);
}
.svc-points li:first-child { border-top: 1px solid var(--line-2); }
.svc-points li::before {
  content: ''; position: absolute; left: 2px; top: 1.32em;
  width: 9px; height: 1px; background: var(--green);
}
 
/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .svc-row { grid-template-columns: 1fr; gap: 28px; }
  .svc-row + .svc-row { margin-top: 56px; padding-top: 56px; }
 
  /* image always leads on a single column — alternating loses its meaning
     once the two columns stack */
  .svc-row:nth-child(even) .svc-media { order: 0; }
  .svc-row:nth-child(even) .svc-frame::after { left: 0; right: auto; }
 
  .svc-body { max-width: none; }
  .svc-num { font-size: 2.6rem; margin-bottom: 12px; }
}
 
@media (max-width: 767.98px) {
  .svc-row + .svc-row { margin-top: 42px; padding-top: 42px; }
  .svc-frame { aspect-ratio: 16 / 10; }
  .svc-num { font-size: 2.2rem; }
  .svc-points li { padding-left: 22px; font-size: .89rem; }
}
 
@media (prefers-reduced-motion: reduce) {
  .svc-frame img { transition: none; }
}