/* ===========================================================
   Local Gilroy — the actual Figma typeface, self-hosted
   =========================================================== */
@font-face {
  font-family: 'Gilroy';
  src: url('../font/Gilroy-Light.woff2') format('woff2'),
       url('../font/Gilroy-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../font/Gilroy-Regular.woff2') format('woff2'),
       url('../font/Gilroy-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../font/Gilroy-Medium.woff2') format('woff2'),
       url('../font/Gilroy-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../font/Gilroy-Bold.woff2') format('woff2'),
       url('../font/Gilroy-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===========================================================
   SUN MOTORS — design tokens (from Figma)
   =========================================================== */
:root {
  --sm-green: #94F02E;
  --sm-green-dark: #4C664C;
  --sm-green-darker: #3E5438;
  --sm-text-dark: #1D211C;
  --sm-text-body: #363639;
  --sm-text-muted: #5D605D;
  --sm-text-light: #B4B5B4;
  --sm-copyright: #C1C1C1;
  --sm-btn-text: #353836;
  --sm-caption: #586658;
  --sm-bg-gray: #E6E6E3;
  --sm-bg-gray-dark: #DCDCD8;
  --sm-black: #111312;
  --sm-white: #ffffff;
  --sm-font: 'Gilroy', 'Poppins', 'Segoe UI', sans-serif;
  --sm-radius: 18px;
  --sm-radius-sm: 10px;
  --sm-container: 1240px;
  --sm-ease: cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--sm-font);
  color: var(--sm-text-body);
  background: var(--sm-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
.container-sm-wide{
  width:100%;
  max-width: var(--sm-container);
  margin-inline:auto;
  padding-inline: 1.25rem;
}
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
img{ max-width:100%; }
button{ font-family:inherit; }

/* ===========================================================
   NAVBAR
   =========================================================== */
.sm-header{
  position: relative;
  overflow: hidden;
  background: var(--sm-black);
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  display:flex;
  flex-direction:column;
}
.sm-hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  z-index:0;
  background: var(--sm-black);
}
.sm-hero-video-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(8,10,7,.55) 0%, rgba(8,10,7,.12) 32%, rgba(8,10,7,.15) 60%, rgba(8,10,7,.65) 100%);
  z-index:1;
}
.sm-navbar{
  position: relative;
  z-index: 10;
  padding: 22px 0;
  transition: background .3s var(--sm-ease), box-shadow .3s var(--sm-ease), padding .3s var(--sm-ease);
}
.sm-navbar.is-fixed{
  position: fixed;
  top:0; left:0; right:0;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
  padding: 12px 0;
}
.sm-navbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
}

.sm-logo{ display:flex; align-items:center; gap:.5rem; filter: drop-shadow(0 2px 8px rgba(0,0,0,.35)); }
.sm-logo-leaf{ width:50px; height:auto; flex-shrink:0; transition: transform .4s var(--sm-ease); }
.sm-logo:hover .sm-logo-leaf{ transform: rotate(-12deg) scale(1.08); }
.sm-logo-text{ display:flex; flex-direction:column; justify-content:center; gap: 4px; }
.sm-logo-sun-img{ height:20px; width:auto; display:block; }
.sm-logo-sub-img{ height:12px; width:auto; display:block; }
.sm-navbar.is-fixed .sm-logo{ filter:none; }
/* the wordmark art is drawn in black — invert to white while it floats over the video */
.sm-navbar:not(.is-fixed) .sm-logo-sun-img,
.sm-navbar:not(.is-fixed) .sm-logo-sub-img{ filter: brightness(0) invert(1); }

.sm-nav-pill{
  display:flex;
  align-items:center;
  gap: 1.9rem;
  background: #F9F9F9;
  border: 1px solid #F9F9F9;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: .55rem 1.6rem;
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(0,0,0,.08);
  transition: background .3s var(--sm-ease), border-color .3s var(--sm-ease);
}

.sm-nav-pill li svg{width:16px; height:16px;}
.sm-navbar.is-fixed .sm-nav-pill{ background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.05); box-shadow:none; }
.sm-nav-item{ position:relative; }
.sm-nav-link{
  display:flex; align-items:center; gap:4px;
  font-size:11px; font-weight:500; color:var(--sm-text-body);
  padding:.25rem 0;
  white-space:nowrap;
  transition:color .25s;
}
.sm-nav-link:hover{ color: var(--sm-green-dark); }
.sm-nav-link i{ width:12px; height:12px; transition:transform .25s; }
.sm-nav-item:hover .sm-nav-link i{ transform: rotate(180deg); }

.sm-dropdown{
  position:absolute;
  top: calc(100% + 14px);
  left:50%; transform: translateX(-50%) translateY(6px);
  min-width:170px;
  background:#fff;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  padding:.5rem;
  opacity:0; visibility:hidden;
  transition: opacity .22s var(--sm-ease), transform .22s var(--sm-ease), visibility .22s;
  z-index: 20;
}
.sm-nav-item:hover .sm-dropdown{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.sm-dropdown a{
  display:block; padding:.5rem .75rem; border-radius:8px;
  font-size:.8rem; color:var(--sm-text-body);
}
.sm-dropdown a:hover{ background: rgba(148,240,46,.14); color: var(--sm-green-dark); }

.sm-nav-right{ display:flex; align-items:center; gap:.75rem; flex-shrink:0; }
.sm-btn-signin{
  font-size:10px; font-weight:400;
  padding:.5rem 1.35rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff;
  transition: all .25s var(--sm-ease);
}
.sm-btn-signin:hover{ background: var(--sm-green); color: var(--sm-text-dark); border-color:var(--sm-green); }
.sm-navbar.is-fixed .sm-btn-signin{ border-color: rgba(0,0,0,.18); background:transparent; color: var(--sm-text-body); }
.sm-navbar.is-fixed .sm-btn-signin:hover{ background: var(--sm-text-dark); color:#fff; border-color:var(--sm-text-dark); }

.sm-lang-btn{
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.55); background:rgba(255,255,255,.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff;
  transition: all .25s var(--sm-ease);
}
.sm-lang-btn:hover{ background:var(--sm-green); border-color:var(--sm-green); color:var(--sm-text-dark); transform: rotate(20deg); }
.sm-lang-btn i{ width:16px; height:16px; }
.sm-navbar.is-fixed .sm-lang-btn{ border-color: rgba(0,0,0,.15); background:transparent; color: var(--sm-text-body); }

.sm-navbar-toggler{
  border:1px solid rgba(255,255,255,.55); background:rgba(255,255,255,.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color:#fff;
  width:38px; height:38px; border-radius:10px;
  display:none; align-items:center; justify-content:center;
  transition: all .25s var(--sm-ease);
}
.sm-navbar-toggler i{ width:20px; height:20px; }
.sm-navbar.is-fixed .sm-navbar-toggler{ border-color: rgba(0,0,0,.15); background:transparent; color: var(--sm-text-body); }

.sm-mobile-nav{
  display:none;
  flex-direction:column;
  background:#fff;
  margin-top:14px;
  border-radius:16px;
  box-shadow:0 14px 30px rgba(0,0,0,.08);
  overflow:hidden;
}
.sm-mobile-nav.show{ display:flex; }
.sm-mobile-nav a{ padding:.85rem 1.25rem; font-size:.9rem; font-weight:500; border-bottom:1px solid rgba(0,0,0,.05); }
.sm-mobile-nav a:last-child{ border-bottom:none; }

@media (max-width: 991.98px){
  .sm-nav-pill, .sm-nav-right .sm-btn-signin{ display:none; }
  .sm-navbar-toggler{ display:flex; }
}

/* ===========================================================
   HERO
   =========================================================== */
.sm-hero{
  background:#fff;
  padding-top: clamp(40px, 6vw, 70px);
  padding-bottom: clamp(40px, 6vw, 70px);
  text-align:center;
  position:relative;
}
.sm-tabs{
  display:flex; align-items:center; justify-content:center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-bottom: clamp(1.5rem, 6vw, 3rem);
  position:relative; z-index:3;
}
.sm-tab{
  background:none; border:none; cursor:pointer;
  font-size: clamp(1.1rem, 2.2vw, 1.625rem);
  font-weight:500;
  color: var(--sm-text-light);
  padding:.35rem .1rem;
  position:relative;
  transition: color .3s var(--sm-ease);
}
.sm-tab::after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0;
  background: var(--sm-green-dark);
  transition: width .35s var(--sm-ease);
  display: none; /* hide the underline by default */
}
.sm-tab.active{ color:#333; }
.sm-tab.active::after{ width:100%; }
.sm-tab:hover{ color: var(--sm-text-body); }

.sm-car-stage{
  position:relative;
  max-width: 900px;
  margin: 0 auto;
  min-height: clamp(220px, 30vw, 340px);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.sm-watermark{
  position:absolute;
  top:50%; left:50%;
  transform: translate(-50%,-52%); /* fallback if GSAP fails to load — JS re-applies this via xPercent/yPercent so it can coexist with the slide-transition's transform writes */
  font-size: clamp(3.5rem, 13vw, 8.8rem);
  font-weight:500;
  color: var(--sm-text-light);
  opacity:.16;
  white-space:nowrap;
  user-select:none;
  pointer-events:none;
  z-index:1;
  will-change: transform, opacity;
}
.sm-car-img{
  position:relative;
  z-index:2;
  width:100%;
  max-width:720px;
  filter: drop-shadow(0 30px 34px rgba(0,0,0,.18));
  will-change: transform, opacity;
}
.sm-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:#fff; border:1px solid rgba(0,0,0,.08);
  display:flex; align-items:center; justify-content:center;
  color: var(--sm-text-body);
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
  z-index:4; cursor:pointer;
  transition: all .25s var(--sm-ease);
}
.sm-arrow:hover{ background: var(--sm-text-dark); color:#fff; transform:translateY(-50%) scale(1.08); }
.sm-arrow-left{ left:0; }
.sm-arrow-right{ right:0; }
.sm-arrow i{ width:20px; height:20px; }
@media (max-width: 767.98px){
  .sm-arrow{ width:36px; height:36px; }
  .sm-arrow-left{ left:-4px; }
  .sm-arrow-right{ right:-4px; }
}

.sm-car-caption{
  margin-top: clamp(1.5rem, 5vw, 3rem);
  font-size: clamp(1.1rem, 2vw, 1.5625rem);
  color: var(--sm-caption);
  font-weight:400;
  will-change: opacity, transform;
}

/* ===========================================================
   FEATURE GRID
   =========================================================== */
.sm-features{ background:#fff; padding: clamp(20px,4vw,50px) 0 clamp(50px,7vw,90px); }

/* Equal-width gallery: every card starts at the same flex-basis (0) with the
   same flex-grow (1), so all four are exactly the same width at rest. On
   hover, only that card's flex-grow increases — the others are untouched,
   so flexbox naturally reflows to shrink them. No JS, no special-casing of
   the first item, nothing permanently oversized. */
.sm-feature-row{
  display:flex;
  gap: 1rem;
  width:100%;
}
.sm-feature-card{
  position:relative;
  flex: 1 1 0%;
  min-width: 0; /* let a 0-basis flex child actually shrink below its content size */
  height: clamp(300px, 30vw, 420px);
  border-radius: var(--sm-radius);
  overflow:hidden;
  isolation:isolate;
  cursor:pointer;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: flex-grow .6s var(--sm-ease), box-shadow .6s var(--sm-ease);
}
.sm-feature-card:hover,
.sm-feature-card:focus,
.sm-feature-card:focus-visible{
  flex-grow: 3; /* 3 of 6 total grow units ≈ 50% — matches the old "big" card width */
  box-shadow: 0 30px 60px rgba(0,0,0,.28);
  z-index: 2;
  outline: none;
}
.sm-feature-row:has(.sm-feature-card:hover) .sm-feature-card:not(:hover),
.sm-feature-row:has(.sm-feature-card:focus) .sm-feature-card:not(:focus){
  opacity:.75;
}
.sm-feature-card::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.75) 100%);
  z-index:1;
}
.sm-feature-card img.sm-feature-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform: scale(1.001);
  transition: transform .7s var(--sm-ease), opacity .5s var(--sm-ease);
  z-index:0;
}
.sm-feature-card:hover img.sm-feature-bg{ transform: scale(1.1); }
.sm-feature-overlay{
  position:absolute; left:0; right:0; bottom:0;
  padding: clamp(1.1rem, 2.5vw, 1.9rem);
  z-index:2;
  color:#fff;
}
.sm-feature-overlay h3{ font-size: clamp(1.25rem,2vw,1.5625rem); font-weight:500; margin:0; }
.sm-feature-overlay h4{ font-size: clamp(1.05rem,1.6vw,1.256rem); font-weight:500; margin:0; }
.sm-feature-overlay p{
  font-size:.75rem; font-weight:300; margin:.4rem 0 0; opacity:.85; max-width:320px;
  transition: opacity .4s var(--sm-ease);
}
@media (prefers-reduced-motion: reduce){
  .sm-feature-card, .sm-feature-card img.sm-feature-bg{ transition:none !important; }
}

/* Below desktop, a squeezed 3-way flex-shrink reads as broken, not premium —
   stack the four panels at equal full width instead. */
@media (max-width: 991.98px){
  .sm-feature-row{ flex-direction:column; }
  .sm-feature-card{ flex-grow:0 !important; height:260px; }
  .sm-feature-row:has(.sm-feature-card:hover) .sm-feature-card:not(:hover){ opacity:1; }
}

@media (max-width: 575.98px){
  .sm-feature-card{ height:220px; }
  .sm-feature-overlay{ padding:.85rem; }
  .sm-feature-overlay h4{ font-size:.92rem; line-height:1.25; }
  .sm-feature-overlay h3{ font-size:1.1rem; }
  .sm-feature-overlay p{ font-size:.68rem; }
}

/* ===========================================================
   SUNSET BANNER
   =========================================================== */
.sm-sunset{
  position:relative;
  min-height: clamp(360px, 46vw, 620px);
  display:flex; align-items:flex-end;
  background-size:cover; background-position:center;
  overflow:hidden;
}
.sm-sunset img.sm-sunset-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform: scale(1.05);
  transition: transform 8s var(--sm-ease);
}
.sm-sunset.in-view img.sm-sunset-bg{ transform: scale(1); }
.sm-sunset-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(10,15,5,.75) 100%);
}
.sm-sunset-content{
  position:relative; z-index:2;
  width:100%;
  padding: clamp(2.5rem,6vw,4.5rem) 1.25rem clamp(3rem,7vw,5rem);
  text-align:center;
  color:#fff;
}
.sm-sunset-content h2{
  font-size: clamp(1.5rem, 3.2vw, 1.858rem);
  font-weight:700;
  margin-bottom:.9rem;
}
.sm-sunset-content p{
  max-width: 875px;
  margin:0 auto;
  font-size: clamp(.85rem, 1.4vw, 1.2113rem);
  font-weight:500;
  line-height:1.6;
  opacity:.95;
}

/* ===========================================================
   CTA SECTION
   =========================================================== */
.sm-cta{ background:#fff; padding: clamp(50px,8vw,110px) 0; text-align:center; }
.sm-cta-eyebrow{ font-size: clamp(1.15rem,2vw,1.858rem); font-weight:300; color: var(--sm-text-dark); margin-bottom:.4rem; }
.sm-cta-title{ font-size: clamp(1.2rem,2.2vw,1.858rem); font-weight:700; color: var(--sm-green-dark); margin-bottom:1.8rem; }
.sm-cta-buttons{ display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; margin-bottom: clamp(2rem,5vw,3.5rem); }
.sm-btn-outline, .sm-btn-fill{
  font-size:.8075rem; font-weight:500;
  padding:.75rem 1.9rem;
  border-radius:999px;
  transition: all .3s var(--sm-ease);
  display:inline-flex; align-items:center; gap:.4rem;
}
.sm-btn-outline{ border:1.5px solid var(--sm-btn-text); color:var(--sm-btn-text); }
.sm-btn-outline:hover{ background:var(--sm-btn-text); color:#fff; transform:translateY(-2px); }
.sm-btn-fill{ background:var(--sm-green); color:var(--sm-btn-text); border:1.5px solid var(--sm-green); }
.sm-btn-fill:hover{ background: var(--sm-green-dark); border-color:var(--sm-green-dark); color:#fff; transform:translateY(-2px); box-shadow:0 10px 24px rgba(76,102,76,.28); }
.sm-cta-text{
  max-width: 820px; margin:0 auto;
  font-size: clamp(.85rem, 1.4vw, 1.2113rem); font-weight:300; color: var(--sm-green-darker); line-height:1.85;
}

/* ===========================================================
   FOOTER
   =========================================================== */
.sm-footer{ background: var(--sm-white); padding: clamp(45px,6vw,80px) 0 2rem; border-top:1px solid #727272; }
.sm-footer-heading{ font-size:.9375rem; color: var(--sm-text-muted); font-weight:400; margin-bottom:1rem; }
.sm-footer-links li{ margin-bottom:.65rem; }
.sm-footer-links a{ font-size:.9375rem; color:#333; font-weight:500; transition:color .2s; }
.sm-footer-links a:hover{ color: var(--sm-green-dark); padding-left:3px; }
.sm-footer-divider{ border:none; border-top:1px solid rgba(0,0,0,.1); margin: clamp(2rem,4vw,3rem) 0 1.5rem; }
.sm-footer-bottom{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; }
.sm-footer-legal a{ font-size:.9375rem; color: var(--sm-text-muted); }
.sm-footer-legal a:hover{ color:var(--sm-text-dark); }
.sm-social{ display:flex; gap:.6rem; }
.sm-social a{
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.06); color: var(--sm-text-muted);
  transition: all .25s var(--sm-ease);
}
.sm-social a:hover{ background:var(--sm-green); color: var(--sm-text-dark); transform:translateY(-3px); }
.sm-social i{ font-size:.85rem; }
.sm-copyright{ font-size:.684rem; color: var(--sm-copyright); margin-top:1.5rem; }

/* ===========================================================
   CONTACT PAGE
   — reuses existing tokens/buttons/spacing scale; only the form
   controls, icon chips and eyebrow label are genuinely new components.

   This page has no hero video, so its nav starts forced into the
   is-fixed (scrolled) state — see data-force-scrolled in contact.html
   and the toggleFixed() guard in main.js. Because the nav is
   position:fixed, .sm-page-intro's top padding below is sized to clear
   it (~64-70px) rather than reusing sm-hero's video-relative spacing.
   =========================================================== */
.sm-page-intro{ background:#fff; padding: clamp(100px,14vw,140px) 0 clamp(28px,4vw,44px); }
.sm-page-eyebrow{
  display:flex; align-items:center; gap:.6rem;
  font-size:.75rem; font-weight:500; letter-spacing:2px; text-transform:uppercase;
  color: var(--sm-text-muted); margin-bottom:1rem;
}
.sm-page-eyebrow::before{ content:""; width:24px; height:1px; background: var(--sm-green); flex-shrink:0; }
.sm-page-title{ font-size: clamp(1.6rem,3.2vw,2.4rem); font-weight:700; color: var(--sm-green-dark); margin-bottom:.6rem; }
.sm-page-lead{ font-size: clamp(.9rem,1.4vw,1.15rem); font-weight:300; color: var(--sm-text-muted); max-width:640px; margin:0; }

.sm-contact-top-divider{ border:none; border-top:1px solid rgba(0,0,0,.1); margin:0; }

.sm-contact-form-section{ background: var(--sm-white); padding: clamp(40px,5vw,60px) 0 clamp(60px,8vw,110px); }
.sm-contact-heading{ font-size: clamp(1.15rem,1.8vw,1.45rem); font-weight:700; color: var(--sm-text-dark); margin-bottom:.6rem; }
.sm-contact-lead{ font-size:.9rem; color: var(--sm-text-muted); font-weight:300; margin-bottom:2rem; line-height:1.7; }

.sm-contact-icon{
  flex-shrink:0;
  width:46px; height:46px;
  border-radius: var(--sm-radius-sm);
  background: var(--sm-bg-gray);
  color: var(--sm-btn-text);
  display:flex; align-items:center; justify-content:center;
  transition: transform .3s var(--sm-ease), box-shadow .3s var(--sm-ease);
}
.sm-contact-icon i{ width:20px; height:20px; }

/* ===========================================================
   OUR LOCATIONS — Headquarters vs Hub Office
   Two intentionally different location cards: Headquarters reads as
   the larger, darker, more corporate presence; Hub Office is smaller,
   lighter and more practical. Same component skeleton (badge, title,
   detail lines, CTA over a full-bleed image) but different scale,
   overlay strength and CTA treatment so they never look duplicated.
   =========================================================== */
.sm-locations{ background: var(--sm-white); padding: 0 0 clamp(50px,7vw,30px); }
.sm-locations-head{ max-width:640px; margin-bottom: clamp(1.8rem,4vw,2.6rem); }
.sm-section-title{ font-size: clamp(1.3rem,2.4vw,1.9rem); font-weight:700; color: var(--sm-text-dark); margin-bottom:.6rem; }

.sm-locations-grid{
  display:grid;
  grid-template-columns: 1.5fr 1fr;
  gap:1.5rem;
  align-items:end;
}

.sm-location-card{
  position:relative;
  border-radius: var(--sm-radius);
  overflow:hidden;
  isolation:isolate;
  cursor:pointer;
  transition: transform .5s var(--sm-ease), box-shadow .5s var(--sm-ease);
}
.sm-location-card:hover,
.sm-location-card:focus-within{
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(0,0,0,.24);
}
.sm-location-card::before{
  content:"";
  position:absolute; inset:0;
  z-index:1;
  transition: filter .5s var(--sm-ease);
}
.sm-location-card:hover::before{ filter: brightness(.92); }
.sm-location-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform: scale(1.001);
  transition: transform .8s var(--sm-ease);
  z-index:0;
}
.sm-location-card:hover .sm-location-bg{ transform: scale(1.08); }

.sm-location-content{
  position:absolute; left:0; right:0; bottom:0;
  z-index:2;
  padding: clamp(1.3rem,3vw,2.2rem);
  color:#fff;
  display:flex; flex-direction:column; align-items:flex-start;
}
.sm-location-line{
  display:flex; align-items:center; gap:.5rem;
  font-size:.82rem; font-weight:400; opacity:.9;
  margin:.35rem 0 0;
}
.sm-location-line i{ width:14px; height:14px; flex-shrink:0; }
.sm-location-line a{ color:#fff; transition:opacity .2s; }
.sm-location-line a:hover{ opacity:.75; text-decoration:underline; }

.sm-location-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.68rem; font-weight:500; letter-spacing:1.2px; text-transform:uppercase;
  padding:.4rem .8rem;
  border-radius:999px;
  margin-bottom:1rem;
}
.sm-location-badge i{ width:12px; height:12px; }

.sm-location-cta{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.78rem; font-weight:500; color:#fff;
  margin-top:1.2rem;
  transition: gap .3s var(--sm-ease), opacity .3s var(--sm-ease), background .3s var(--sm-ease), border-color .3s var(--sm-ease), color .3s var(--sm-ease);
  opacity:.92;
}
.sm-location-cta:hover{ opacity:1; gap:.6rem; }
.sm-location-cta i{ width:15px; height:15px; }

/* Headquarters — larger, darker, more corporate */
.sm-location-hq{ height: clamp(420px,40vw,540px); }
.sm-location-hq::before{
  background: linear-gradient(180deg, rgba(10,12,9,.05) 0%, rgba(10,12,9,.18) 42%, rgba(6,8,5,.9) 100%);
}
.sm-location-hq .sm-location-badge{
  background: rgba(10,12,9,.55);
  border:1px solid rgba(148,240,46,.4);
  color: var(--sm-green);
  backdrop-filter: blur(6px);
}
.sm-location-hq h3{ font-size: clamp(1.5rem,2.6vw,2.05rem); font-weight:700; margin:0; }
.sm-location-hq .sm-location-cta{
  padding:.6rem 1.2rem;
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
}
.sm-location-hq .sm-location-cta:hover{
  background: var(--sm-green);
  border-color: var(--sm-green);
  color: var(--sm-btn-text);
}

/* Hub Office — smaller, lighter, practical */
.sm-location-hub{ height: clamp(340px,30vw,440px); }
.sm-location-hub::before{
  background: linear-gradient(180deg, rgba(0,0,0,0) 52%, rgba(8,10,7,.75) 100%);
}
.sm-location-hub .sm-location-badge{
  background: rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.45);
  color:#fff;
  backdrop-filter: blur(6px);
}
.sm-location-hub h3{ font-size: clamp(1.15rem,1.9vw,1.4rem); font-weight:500; margin:0; }
.sm-location-hub .sm-location-cta{ text-decoration:none; }
.sm-location-hub .sm-location-cta:hover{ text-decoration:underline; }

@media (max-width: 991.98px){
  .sm-locations-grid{ grid-template-columns:1fr 1fr; align-items:stretch; }
  .sm-location-hq, .sm-location-hub{ height:380px; }
}
@media (max-width: 767.98px){
  .sm-locations-grid{ grid-template-columns:1fr; gap:1.25rem; }
  .sm-location-hq{ height:340px; }
  .sm-location-hub{ height:300px; }
}
@media (prefers-reduced-motion: reduce){
  .sm-location-card, .sm-location-bg{ transition:none !important; }
}

.sm-contact-form{ display:flex; flex-direction:column; gap:1.3rem; }
.sm-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; }
.sm-form-group{ display:flex; flex-direction:column; gap:.5rem; }
.sm-form-group label{ font-size:.85rem; font-weight:500; color: var(--sm-text-dark); }
.sm-required{ color: var(--sm-green-dark); }
.sm-form-group input,
.sm-form-group textarea{
  font-family: inherit;
  font-size:.88rem;
  font-weight:400;
  color: var(--sm-text-body);
  background:#fff;
  border:1px solid rgba(0,0,0,.15);
  border-radius: var(--sm-radius-sm);
  padding:.75rem 1rem;
  transition: border-color .25s var(--sm-ease), box-shadow .25s var(--sm-ease);
  width:100%;
}
.sm-form-group textarea{ resize:vertical; min-height:130px; }
.sm-form-group input::placeholder,
.sm-form-group textarea::placeholder{ color: var(--sm-text-light); }
.sm-form-group input:focus,
.sm-form-group textarea:focus{
  outline:none;
  border-color: var(--sm-green);
  box-shadow: 0 0 0 4px rgba(148,240,46,.18);
}
/* semantic error state — the one deliberate exception to the brand palette,
   since red is the universally understood convention for invalid input */
.sm-form-group.has-error input,
.sm-form-group.has-error textarea{ border-color:#d9534f; }
.sm-form-error{
  font-size:.75rem; color:#d9534f; font-weight:400;
  min-height:1em; display:block;
}
.sm-btn-block{ width:100%; justify-content:center; border:none; cursor:pointer; }
.sm-btn-block i{ width:16px; height:16px; }
.sm-form-success{
  font-size:.85rem; font-weight:500; color: var(--sm-green-dark);
  text-align:center; margin:0; min-height:1em;
}

.sm-contact-callcard{
  height:100%;
  display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start;
  background: var(--sm-bg-gray);
  border:1px solid rgba(0,0,0,.08);
  border-radius: var(--sm-radius);
  padding: clamp(1.6rem,3vw,2.2rem);
  transition: transform .3s var(--sm-ease), box-shadow .3s var(--sm-ease);
}
.sm-contact-callcard:hover{ transform: translateY(-4px); box-shadow: 0 16px 32px rgba(76,102,76,.16); }
.sm-callcard-top{ display:flex; flex-direction:column; align-items:flex-start; width:100%; }
.sm-contact-callcard .sm-contact-icon{ margin-bottom:1.2rem; background:#fff; }
.sm-contact-callcard strong{ display:block; font-size:1.05rem; font-weight:700; color: var(--sm-text-dark); margin-bottom:.5rem; }
.sm-contact-callcard p{ font-size:.85rem; color: var(--sm-text-muted); line-height:1.6; margin:0; }
.sm-contact-callcard .sm-btn-outline{ flex-shrink:0; margin-top:1.8rem; padding:.7rem 1.4rem; }
.sm-contact-callcard .sm-btn-outline i{ width:15px; height:15px; }

.sm-callcard-methods{
  display:flex; flex-direction:column; gap:1rem;
  width:100%;
  margin-top:1.4rem;
  padding-top:1.4rem;
  border-top:1px solid rgba(0,0,0,.08);
}
/* .sm-callcard-method{ display:flex; align-items:center; gap:.85rem; } */
.sm-callcard-method-icon{
  flex-shrink:0;
  width:42px; height:42px;
  border-radius: var(--sm-radius-sm);
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  color: var(--sm-btn-text);
  display:flex; align-items:center; justify-content:center;
  transition: transform .3s var(--sm-ease), box-shadow .3s var(--sm-ease);
}
.sm-callcard-method-icon i{ width:17px; height:17px; }
.sm-callcard-method:hover .sm-callcard-method-icon{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(76,102,76,.22); }
.sm-callcard-method-label{
  display:block;
  font-size:.72rem; font-weight:500; letter-spacing:.3px;
  color: var(--sm-text-muted);
  margin-bottom:.15rem;
}
.sm-callcard-method-value{
  display:inline-block;
  font-size:.92rem; font-weight:400;
  color: var(--sm-text-dark);
  transition: color .25s var(--sm-ease);
}
.sm-callcard-method-value:hover{ color: var(--sm-green-dark); text-decoration:underline; }

@media (max-width: 991.98px){
  .sm-contact-form{ margin-top:.5rem; }
}

@media (max-width: 575.98px){
  .sm-form-row{ grid-template-columns:1fr; gap:1.3rem; }
}

/* ===========================================================
   AOS-style reveal fallback (in case AOS CDN fails)
   =========================================================== */
[data-aos]{ }

/* scrollbar polish */
::selection{ background: var(--sm-green); color: var(--sm-text-dark); }

/* ===========================================================
   OUR LOCATIONS — PREMIUM LOCATION EXPERIENCE
   =========================================================== */

.sm-locations {
    background: var(--sm-white);
    padding: clamp(50px, 7vw, 45px) 0 clamp(60px, 8vw, 50px);
}

.sm-locations-head {
    max-width: 760px;
    margin: 0 0 clamp(2rem, 4vw, 3rem);
}

.sm-locations-description {
    max-width: 700px;
    margin-bottom: 0;
}

.sm-section-title {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    color: var(--sm-text-dark);
    margin-bottom: 0.7rem;
}


/* ===========================================================
   LOCATION GRID
   =========================================================== */

.sm-locations-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 1.5rem;
    align-items: stretch;
}


/* ===========================================================
   LOCATION CARD
   =========================================================== */

.sm-location-card {
    position: relative;
    height: 480px;
    border-radius: 22px;
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;

    background: #111;

    transition:
        transform 0.6s var(--sm-ease),
        box-shadow 0.6s var(--sm-ease);
}

.sm-location-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.18);
}


/* ===========================================================
   IMAGE
   =========================================================== */

.sm-location-bg {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform: scale(1.01);

    transition:
        transform 1s var(--sm-ease);
    
    z-index: 0;
}

.sm-location-card:hover .sm-location-bg {
    transform: scale(1.06);
}


/* ===========================================================
   OVERLAY
   =========================================================== */

.sm-location-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(8, 10, 8, 0.05) 0%,
            rgba(8, 10, 8, 0.10) 35%,
            rgba(8, 10, 8, 0.50) 65%,
            rgba(5, 7, 5, 0.90) 100%
        );

    transition:
        background 0.6s var(--sm-ease);
}

.sm-location-card:hover .sm-location-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(8, 10, 8, 0.08) 0%,
            rgba(8, 10, 8, 0.15) 35%,
            rgba(8, 10, 8, 0.56) 65%,
            rgba(5, 7, 5, 0.93) 100%
        );
}


/* ===========================================================
   CONTENT
   =========================================================== */

.sm-location-content {
    position: absolute;
    inset: 0;

    z-index: 2;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;

    padding: clamp(1.4rem, 3vw, 2.4rem);

    color: #fff;
}


/* ===========================================================
   BADGE
   =========================================================== */

.sm-location-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;

    padding: 0.5rem 0.9rem;

    border-radius: 999px;

    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 1.1px;
    text-transform: uppercase;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.sm-location-badge i {
    width: 14px;
    height: 14px;
}


/* Headquarters badge */

.sm-location-badge-hq {
    color: var(--sm-green);

    background: rgba(15, 20, 12, 0.65);

    border: 1px solid rgba(148, 240, 46, 0.55);
}


/* Hub badge */

.sm-location-badge-hub {
    color: #fff;

    background: rgba(255, 255, 255, 0.14);

    border: 1px solid rgba(255, 255, 255, 0.38);
}


/* ===========================================================
   MAIN LOCATION CONTENT
   =========================================================== */

.sm-location-main {
    width: 100%;
    margin-top: auto;
}

.sm-location-main h3 {
    margin: 0 0 0.8rem;

    font-size: clamp(1.7rem, 3vw, 2.5rem);

    font-weight: 500;

    line-height: 1.05;

    letter-spacing: -0.03em;

    color: #fff;
}


/* Hub title slightly smaller */

.sm-location-hub .sm-location-main h3 {
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
}


/* ===========================================================
   LOCATION DETAILS
   =========================================================== */

.sm-location-line {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;

    margin: 0.45rem 0 0;

    font-size: 0.84rem;
    font-weight: 400;

    line-height: 1.5;

    color: rgba(255, 255, 255, 0.88);
}

.sm-location-line i {
    width: 16px;
    height: 16px;

    flex-shrink: 0;

    margin-top: 2px;
}

.sm-location-line a {
    color: inherit;

    transition: color 0.25s ease;
}

.sm-location-line a:hover {
    color: var(--sm-green);
}


/* ===========================================================
   LOCATION CTA
   =========================================================== */

.sm-location-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    margin-top: 1.4rem;

    padding: 0.7rem 1.15rem;

    color: #fff;

    border: 1px solid rgba(255, 255, 255, 0.38);

    background: rgba(255, 255, 255, 0.07);

    border-radius: 999px;

    font-size: 0.78rem;
    font-weight: 500;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    transition:
        background 0.3s var(--sm-ease),
        border-color 0.3s var(--sm-ease),
        color 0.3s var(--sm-ease),
        transform 0.3s var(--sm-ease);
}

.sm-location-cta i {
    width: 15px;
    height: 15px;

    transition: transform 0.3s var(--sm-ease);
}

.sm-location-cta:hover {
    background: var(--sm-green);
    border-color: var(--sm-green);

    color: var(--sm-text-dark);

    transform: translateY(-2px);
}

.sm-location-cta:hover i {
    transform: translate(2px, -2px);
}


/* ===========================================================
   HEADQUARTERS — VISUAL PRIORITY
   =========================================================== */

.sm-location-hq {
    min-height: 480px;
}


/* ===========================================================
   HUB OFFICE
   =========================================================== */

.sm-location-hub {
    min-height: 480px;
}


/* ===========================================================
   RESPONSIVE
   =========================================================== */

@media (max-width: 991.98px) {

    .sm-locations-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.2rem;
    }

    .sm-location-card,
    .sm-location-hq,
    .sm-location-hub {
        min-height: 410px;
        height: 410px;
    }

    .sm-location-content {
        padding: 1.5rem;
    }

}


@media (max-width: 767.98px) {

    .sm-locations-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .sm-location-card,
    .sm-location-hq,
    .sm-location-hub {
        height: 360px;
        min-height: 360px;
    }

    .sm-location-main h3,
    .sm-location-hub .sm-location-main h3 {
        font-size: 1.6rem;
    }

}


@media (max-width: 575.98px) {

    .sm-location-card,
    .sm-location-hq,
    .sm-location-hub {
        height: 330px;
        min-height: 330px;
        border-radius: 18px;
    }

    .sm-location-content {
        padding: 1.15rem;
    }

    .sm-location-badge {
        font-size: 0.62rem;
        padding: 0.42rem 0.75rem;
    }

    .sm-location-line {
        font-size: 0.76rem;
    }

    .sm-location-cta {
        font-size: 0.72rem;
        padding: 0.62rem 1rem;
    }

}