/* =========================================================
   SKYWAY TRANSIT — DESIGN SYSTEM
   Green + Gold + Movement. Premium transportation brand.
   ========================================================= */

:root{
  /* Brand */
  --green:        #0BAA20;
  --green-deep:    #087A18;
  --green-ink:     #06340C;
  --gold:          #F5B800;
  --gold-deep:     #C9930A;
  --ink:           #0A0D0B;
  --ink-soft:      #141815;
  --white:         #FFFFFF;
  --paper:         #F6F7F4;
  --line:          #E4E7E1;
  --slate:         #55605A;
  --slate-light:   #8A938C;

  /* Type */
  --font-display: 'Archivo Expanded', 'Archivo', sans-serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Layout */
  --container: 1280px;
  --gutter: 24px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;

  --ease: cubic-bezier(.22,.9,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; overflow-x:hidden; }

body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-weight: 500;
}

img{ max-width:100%; display:block; }
svg{ width:20px; height:20px; flex-shrink:0; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; font-size:1rem; }

::selection{ background: var(--gold); color: var(--ink); }

:focus-visible{
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.container{
  width:100%;
  max-width: var(--container);
  margin-inline:auto;
  padding-inline: var(--gutter);
}

.container--narrow{ max-width: 860px; }

/* ---------- Typography ---------- */
h1,h2,h3,h4,h5{
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.08;
  margin:0 0 .5em;
  font-weight: 600;
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(2.4rem, 4.4vw, 4.1rem); font-weight:700; }
h2{ font-size: clamp(1.9rem, 3vw, 2.9rem); }
h3{ font-size: clamp(1.25rem, 1.6vw, 1.6rem); }
h4{ font-size: 1.1rem; }
p{ margin: 0 0 1.1em; color: var(--slate); max-width: 62ch; }
.lede{ font-size: 1.2rem; line-height:1.6; color: var(--slate); }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-body);
  font-weight:800;
  font-size: .82rem;
  color: var(--green-deep);
  margin-bottom: 14px;
}
.eyebrow::before{
  content:"";
  width: 26px; height: 2px;
  background: var(--gold);
  display:inline-block;
}

.section-head{ max-width: 680px; margin-bottom: 48px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head p{ max-width: 60ch; }
.section-head.center p{ margin-inline:auto; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 16px 30px;
  font-weight: 800;
  font-size: .92rem;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  white-space: nowrap;
}
.btn svg{ width:16px; height:16px; flex-shrink:0; transition: transform .25s var(--ease); }
.btn:hover svg{ transform: translateX(4px); }

.btn-gold{ background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn-gold:hover{ background: var(--ink); border-color: var(--ink); color:var(--white); transform: translateY(-2px); }

.btn-outline{ background: transparent; color: var(--white); border-color: rgba(255,255,255,.55); }
.btn-outline:hover{ background: var(--white); color: var(--ink); border-color: var(--white); transform: translateY(-2px); }

.btn-outline-dark{ background: transparent; color: var(--ink); border-color: var(--line); }
.btn-outline-dark:hover{ background: var(--ink); color: var(--white); border-color: var(--ink); transform: translateY(-2px); }

.btn-green{ background: var(--green); color: var(--white); border-color: var(--green); }
.btn-green:hover{ background: var(--green-deep); border-color: var(--green-deep); transform: translateY(-2px); }

.btn-block{ width:100%; }
.btn-sm{ padding: 11px 20px; font-size:.82rem; }

/* ---------- Header ---------- */
.topbar{
  background: var(--ink);
  color: rgba(255,255,255,.78);
  font-size: .82rem;
  font-weight: 700;
}
.topbar .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-block: 9px;
}
.topbar a{ color: rgba(255,255,255,.78); }
.topbar .topbar-phone{ color: var(--gold); display:flex; align-items:center; gap:8px; }
.topbar .topbar-phone svg{ width:15px; height:15px; }
.topbar .topbar-links{ display:flex; gap:22px; align-items:center; }
.topbar .topbar-links a:hover{ color: var(--gold); }
.topbar-areas{ display:none; }
@media(min-width:860px){ .topbar-areas{ display:inline; opacity:.65; } }

.site-header{
  position: sticky; top:0; z-index: 500;
  background: var(--white);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-stuck{
  box-shadow: 0 12px 30px -18px rgba(10,13,11,.35);
  border-bottom-color: var(--line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  gap: 20px;
  padding-block: 14px;
}
.brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.brand img{ height: 46px; width:auto; }
.brand-word{ font-family: var(--font-display); font-weight:800; font-size:1.18rem; letter-spacing:-.01em; color:var(--ink); line-height:1.1; }
.brand-word span{ display:block; font-family:var(--font-body); font-weight:800; font-size:.62rem; letter-spacing:.14em; color: var(--green-deep); text-transform:uppercase; }

.main-nav{ display:none; }
.main-nav > ul{ display:flex; align-items:center; gap: 2px; }
.main-nav > ul > li{ position:relative; }
.main-nav > ul > li > a{
  display:flex; align-items:center; gap:6px;
  padding: 12px 15px;
  font-weight: 700; font-size: .93rem;
  color: var(--ink);
  border-radius: var(--radius-sm);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.main-nav > ul > li > a:hover,
.main-nav > ul > li.is-open > a{ color: var(--green-deep); background: var(--paper); }
.main-nav .chev{ width:10px; height:10px; transition: transform .2s var(--ease); }
.main-nav > ul > li.is-open .chev{ transform: rotate(180deg); }

.dropdown{
  position:absolute; top: calc(100% + 8px); left:0;
  min-width: 300px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 48px -20px rgba(10,13,11,.28);
  padding: 10px;
  opacity:0; visibility:hidden; transform: translateY(6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.main-nav > ul > li.is-open .dropdown{ opacity:1; visibility:visible; transform: translateY(0); }
.dropdown a{
  display:flex; align-items:center; gap:10px;
  padding: 11px 14px; border-radius: var(--radius-sm);
  font-weight:700; font-size:.88rem; color: var(--ink);
}
.dropdown a:hover{ background: var(--paper); color: var(--green-deep); }
.dropdown a .dot{ width:6px; height:6px; border-radius:50%; background: var(--gold); flex-shrink:0; }
.dropdown-cols{ display:grid; grid-template-columns:1fr 1fr; gap: 2px 4px; }

.header-cta{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.header-phone{ display:none; align-items:center; gap:10px; }
.header-phone .ico{
  width:38px;height:38px;border-radius:50%;
  background: var(--paper); display:flex; align-items:center; justify-content:center; color:var(--green-deep); flex-shrink:0;
}
.header-phone .ico svg{ width:18px; height:18px; }
.header-phone .lbl{ font-size:.72rem; color:var(--slate-light); font-weight:700; }
.header-phone .num{ font-weight:800; font-size:.95rem; color:var(--ink); }
@media(min-width:1180px){ .header-phone{ display:flex; } }

.hamburger{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; border:1px solid var(--line); border-radius: var(--radius-sm);
  background: transparent;
}
.hamburger span{ height:2px; width:20px; background: var(--ink); margin-inline:auto; transition: transform .25s var(--ease), opacity .25s var(--ease); }
.hamburger.is-active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger.is-active span:nth-child(2){ opacity:0; }
.hamburger.is-active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media(min-width: 1180px){
  .main-nav{ display:block; }
  .hamburger{ display:none; }
}

@media(max-width: 767px){
  .site-header .container{ gap:8px; }
  .header-cta{ gap:8px; }
  .hamburger{ flex-shrink:0; }
}

@media(max-width: 480px){
  .site-header .container{ padding-inline:16px; }
  .brand{ gap:8px; min-width:0; }
  .brand img{ height:40px; }
  .brand-word{ min-width:0; font-size:1rem; white-space:nowrap; }
  .brand-word span{ display:none; }
  .header-cta .btn-sm{ padding-inline:12px; font-size:.76rem; }
}

@media(max-width: 380px){
  .header-cta .btn-sm{ display:none; }
}

/* Mobile nav */
.mobile-nav{
  position: fixed; inset:0; z-index: 900;
  background: var(--ink);
  color: var(--white);
  transform: translateX(100%);
  transition: transform .4s var(--ease);
  overflow-y:auto;
}
.mobile-nav.is-open{ transform: translateX(0); }
.mobile-nav-top{ display:flex; align-items:center; justify-content:space-between; padding: 18px var(--gutter); border-bottom:1px solid rgba(255,255,255,.1); }
.mobile-nav-close{ width:44px;height:44px;border-radius:50%; border:1px solid rgba(255,255,255,.25); background:transparent; color:var(--white); display:flex; align-items:center; justify-content:center; }
.mobile-nav ul{ padding: 10px var(--gutter) 40px; }
.mobile-nav > ul > li{ border-bottom: 1px solid rgba(255,255,255,.08); }
.mobile-nav > ul > li > a{
  display:flex; align-items:center; justify-content:space-between;
  padding: 17px 4px; font-family: var(--font-display); font-weight:700; font-size:1.15rem; color:var(--white);
}
.mobile-nav .chev{ width:12px; height:12px; transition: transform .2s; }
.mobile-nav li.is-open > a .chev{ transform: rotate(180deg); }
.mobile-sub{ max-height:0; overflow:hidden; transition: max-height .3s var(--ease); }
.mobile-nav li.is-open .mobile-sub{ max-height: 700px; }
.mobile-sub a{ display:block; padding: 11px 4px 11px 16px; font-weight:600; font-size:.95rem; color: rgba(255,255,255,.72); border-left:2px solid rgba(255,255,255,.14); margin-bottom:2px; }
.mobile-sub a:hover{ color: var(--gold); border-color: var(--gold); }
.mobile-nav-cta{ padding: 14px var(--gutter) 34px; display:flex; flex-direction:column; gap:12px; }
.mobile-nav-cta .btn{ width:100%; }
.mobile-nav-cta .phone-line{ display:flex; align-items:center; justify-content:center; gap:8px; color:var(--gold); font-weight:800; padding:14px; border:1px solid rgba(255,255,255,.2); border-radius: var(--radius-sm); }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background: var(--ink);
  overflow:hidden;
  color: var(--white);
}
.hero-grid{
  display:grid; grid-template-columns:1fr;
  min-height: 640px;
}
@media(min-width: 980px){
  .hero-grid{ grid-template-columns: 1.05fr .95fr; min-height: 720px; }
}
.hero-content{
  position:relative; z-index:3;
  display:flex; flex-direction:column; justify-content:center;
  padding: 120px var(--gutter) 90px;
  max-width: 640px;
}
@media(min-width:980px){ .hero-content{ padding: 90px 0 90px 56px; } }
.hero .eyebrow{ color: var(--gold); }
.hero .eyebrow::before{ background: var(--green); }
.hero h1{ color: var(--white); }
.hero h1 em{ font-style:normal; color: var(--gold); }
.hero p{ color: rgba(255,255,255,.72); font-size:1.12rem; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-top: 10px; margin-bottom:38px; }

.hero-trust{ display:flex; flex-wrap:wrap; gap: 26px 34px; padding-top: 26px; border-top:1px solid rgba(255,255,255,.14); }
.hero-trust div{ display:flex; align-items:center; gap:10px; }
.hero-trust strong{ font-family:var(--font-display); font-size:1.5rem; color:var(--white); display:block; line-height:1; }
.hero-trust span{ font-size:.76rem; color: rgba(255,255,255,.6); font-weight:700; }

.hero-visual{
  position:relative;
  min-height: 320px;
}
@media(min-width:980px){ .hero-visual{ min-height:unset; } }
.hero-photo{
  position:absolute; inset:0;
  background: linear-gradient(160deg, var(--green-ink) 0%, var(--green-deep) 55%, var(--green) 100%);
}
.hero-photo svg{ position:absolute; inset:0; width:100%; height:100%; }
.hero-photo::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, var(--ink) 0%, rgba(10,13,11,0) 30%);
}
@media(min-width:980px){
  .hero-visual{ clip-path: polygon(9% 0, 100% 0, 100% 100%, 0% 100%); }
}

.hero-float-card{
  position:relative; z-index:4;
  margin: -70px var(--gutter) 0;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: 0 30px 60px -24px rgba(10,13,11,.45);
  padding: 26px 24px;
  display:grid; grid-template-columns: repeat(2,1fr); gap: 18px 22px;
}
@media(min-width:980px){
  .hero-float-card{
    position:absolute; z-index:4; left:56px; bottom:-56px; margin:0;
    width: 420px; grid-template-columns: repeat(3,1fr);
  }
}
.hero-float-card .item{ display:flex; align-items:flex-start; gap:10px; }
.hero-float-card .ico{ width:34px;height:34px;border-radius:50%; background: var(--paper); color: var(--green-deep); display:flex;align-items:center;justify-content:center; flex-shrink:0; }
.hero-float-card .ico svg{ width:17px; height:17px; }
.hero-float-card .item h4{ font-family:var(--font-body); font-size:.82rem; margin:0; font-weight:800; color:var(--ink); }
.hero-float-card .item p{ margin:0; font-size:.74rem; color:var(--slate-light); }

/* ---------- Simple page hero (interior pages) ---------- */
.page-hero{
  position:relative;
  background: var(--ink);
  color: var(--white);
  padding: 150px 0 90px;
  overflow:hidden;
}
.page-hero::before{
  content:"";
  position:absolute; right:-10%; top:-30%; width:60%; height:160%;
  background: radial-gradient(circle at center, rgba(11,170,32,.35), transparent 65%);
}
.page-hero .container{ position:relative; z-index:2; }
.page-hero .eyebrow{ color:var(--gold); }
.page-hero .eyebrow::before{ background:var(--green); }
.page-hero h1{ color:var(--white); max-width: 780px; }
.page-hero p{ color:rgba(255,255,255,.72); font-size:1.12rem; max-width:640px; }
.breadcrumb{ display:flex; align-items:center; gap:8px; font-size:.8rem; font-weight:700; color: rgba(255,255,255,.5); margin-bottom:22px; }
.breadcrumb a{ color: rgba(255,255,255,.7); }
.breadcrumb a:hover{ color: var(--gold); }
.page-hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; }

/* route line divider motif */
.route-divider{ position:relative; height: 46px; }
.route-divider svg{ position:absolute; inset:0; width:100%; height:100%; }

/* ---------- Stats ---------- */
.stats{ background: var(--ink); color:var(--white); padding: 74px 0; position:relative; overflow:hidden; }
.stats::before{
  content:""; position:absolute; inset:0;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, transparent 2px 64px);
}
.stats .container{ position:relative; z-index:2; }
.stats-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 36px 24px; }
@media(min-width:760px){ .stats-grid{ grid-template-columns: repeat(4,1fr); } }
.stat{ position:relative; padding-left: 22px; border-left: 2px solid var(--gold); }
.stat .num{ font-family: var(--font-display); font-size: clamp(2.1rem,4vw,3rem); font-weight:700; color:var(--white); display:flex; align-items:baseline; gap:2px; line-height:1; }
.stat .num .suffix{ color: var(--gold); font-size: .55em; }
.stat .lbl{ margin-top:8px; font-size:.86rem; color: rgba(255,255,255,.6); font-weight:700; max-width:20ch; }

/* ---------- Split / About ---------- */
.split{ padding: 100px 0; }
.split .container{
  display:grid; grid-template-columns:1fr; gap: 56px; align-items:center;
}
@media(min-width:960px){ .split .container{ grid-template-columns: 1fr 1fr; } }
.split.reverse .container{ direction: rtl; }
.split.reverse .container > *{ direction: ltr; }

.media-frame{
  position:relative;
  border-radius: var(--radius-md);
  overflow:hidden;
  aspect-ratio: 4/4.6;
  background: linear-gradient(150deg, var(--green-deep), var(--green-ink));
}
.media-frame.wide{ aspect-ratio: 16/11; }
.media-frame svg{ position:absolute; inset:0; width:100%; height:100%; }
.media-badge{
  position:absolute; left:22px; bottom:22px; z-index:3;
  background: var(--white); border-radius: var(--radius-md);
  padding: 16px 20px; box-shadow: 0 20px 40px -18px rgba(10,13,11,.4);
  display:flex; align-items:center; gap:14px; max-width: 260px;
}
.media-badge .num{ font-family:var(--font-display); font-size:1.8rem; font-weight:700; color:var(--green-deep); line-height:1; display:flex; align-items:center; }
.media-badge .num svg{ width:30px; height:30px; flex-shrink:0; }
.media-badge p{ margin:0; font-size:.78rem; font-weight:700; color:var(--slate); }

.check-list{ display:flex; flex-direction:column; gap:14px; margin: 26px 0 32px; }
.check-list li{ display:flex; align-items:flex-start; gap:12px; font-weight:700; font-size:.98rem; color: var(--ink); }
.check-list li svg{ width:20px; height:20px; flex-shrink:0; color: var(--white); background: var(--green); border-radius:50%; padding:4px; margin-top:1px; }

/* ---------- Services ---------- */
.services-section{ padding: 100px 0; background: var(--paper); }
.services-grid{ display:grid; grid-template-columns:1fr; gap: 22px; }
@media(min-width:680px){ .services-grid{ grid-template-columns: 1fr 1fr; } }
@media(min-width:1080px){ .services-grid{ grid-template-columns: repeat(3,1fr); } }

.service-card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 34px 28px;
  display:flex; flex-direction:column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  position:relative;
}
.service-card:hover{ transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(10,13,11,.28); border-color: transparent; }
.service-card .num{ font-family:var(--font-display); font-size:.78rem; font-weight:800; color: var(--slate-light); letter-spacing:.06em; margin-bottom:18px; }
.service-card .ico{
  width:56px;height:56px; border-radius: var(--radius-md);
  background: var(--ink); color: var(--gold);
  display:flex; align-items:center; justify-content:center; margin-bottom:22px;
  transition: background .3s var(--ease);
}
.service-card .ico svg{ width:26px; height:26px; }
.service-card:hover .ico{ background: var(--green); color:var(--white); }
.service-card h3{ margin-bottom:10px; font-size:1.22rem; }
.service-card p{ font-size:.92rem; margin-bottom:20px; }
.service-card .more{ margin-top:auto; display:flex; align-items:center; gap:8px; font-weight:800; font-size:.85rem; color: var(--green-deep); }
.service-card .more svg{ width:14px;height:14px; transition: transform .25s var(--ease); }
.service-card:hover .more svg{ transform: translateX(5px); }

/* ---------- Why choose / Features ---------- */
.features{ padding: 100px 0; }
.features-grid{ display:grid; grid-template-columns:1fr; gap:1px; background: var(--line); border:1px solid var(--line); border-radius: var(--radius-md); overflow:hidden; }
@media(min-width:680px){ .features-grid{ grid-template-columns:1fr 1fr; } }
@media(min-width:1080px){ .features-grid{ grid-template-columns: repeat(3,1fr); } }
.feature{ background: var(--white); padding: 36px 30px; }
.feature .ico{ width:46px; height:46px; color:var(--green-deep); margin-bottom:18px; }
.feature .ico svg{ width:100%; height:100%; }
.feature h3{ font-size:1.08rem; margin-bottom:8px; }
.feature p{ font-size:.9rem; margin:0; }

.features-grid.on-dark{ background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.14); }
.features-grid.on-dark .feature{ background: var(--ink); }
.features-grid.on-dark .feature .ico{ color: var(--gold); }
.features-grid.on-dark .feature h3{ color: var(--white); }
.features-grid.on-dark .feature p{ color: rgba(255,255,255,.6); }

/* ---------- Areas ---------- */
.areas-section{ padding: 100px 0; background: var(--paper); }
.areas-grid{ display:grid; grid-template-columns: 1fr; gap:18px; }
@media(min-width:620px){ .areas-grid{ grid-template-columns: 1fr 1fr; } }
@media(min-width:980px){ .areas-grid{ grid-template-columns: repeat(3,1fr); } }
.area-card{
  background: var(--white); border:1px solid var(--line); border-radius: var(--radius-md);
  padding: 26px; display:flex; flex-direction:column; gap:14px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.area-card:hover{ transform: translateY(-5px); box-shadow: 0 26px 48px -28px rgba(10,13,11,.3); }
.area-card .top{ display:flex; align-items:center; justify-content:space-between; }
.area-card .pin{ width:42px;height:42px;border-radius:50%; background: var(--paper); color:var(--green-deep); display:flex;align-items:center;justify-content:center; }
.area-card .pin svg{ width:20px; height:20px; }
.area-card h3{ font-size:1.15rem; margin:0; }
.area-card p{ font-size:.88rem; margin:0; }
.area-card .go{ margin-top:auto; display:flex; align-items:center; gap:8px; font-weight:800; font-size:.82rem; color:var(--green-deep); }
.area-card .go svg{ width:13px;height:13px; }

/* ---------- Testimonials ---------- */
.testimonials{ padding:100px 0; background: var(--ink); color:var(--white); position:relative; overflow:hidden;}
.testimonials::before{ content:""; position:absolute; inset:0; background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 2px, transparent 2px 64px); }
.testimonials .container{ position:relative; z-index:2; }
.testimonials .section-head p{ color: rgba(255,255,255,.65); }
.t-track{ display:grid; grid-template-columns:1fr; gap:22px; }
@media(min-width:860px){ .t-track{ grid-template-columns: repeat(3,1fr);} }
.t-card{ background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius: var(--radius-md); padding: 30px 26px; }
.t-stars{ display:flex; gap:4px; margin-bottom:16px; color:var(--gold); }
.t-stars svg{ width:16px;height:16px; }
.t-card p{ color: rgba(255,255,255,.85); font-size:.98rem; }
.t-who{ display:flex; align-items:center; gap:12px; margin-top:18px; }
.t-avatar{ width:42px;height:42px; border-radius:50%; background: var(--green); color:var(--white); font-family:var(--font-display); font-weight:700; display:flex;align-items:center;justify-content:center; flex-shrink:0; }
.t-who strong{ display:block; font-size:.88rem; }
.t-who span{ font-size:.76rem; color: rgba(255,255,255,.55); }

/* ---------- CTA band ---------- */
.cta-band{ position:relative; background: var(--green-deep); color: var(--white); padding: 90px 0; overflow:hidden; }
.cta-band::before{ content:""; position:absolute; inset:0; background: linear-gradient(120deg, var(--green-ink), var(--green-deep) 45%, var(--green)); }
.cta-band::after{ content:""; position:absolute; right:-6%; bottom:-40%; width:50%; height:180%; border-radius:50%; background: radial-gradient(circle, rgba(245,184,0,.25), transparent 65%); }
.cta-band .container{ position:relative; z-index:2; display:flex; flex-direction:column; gap:28px; align-items:flex-start; }
@media(min-width:900px){ .cta-band .container{ flex-direction:row; align-items:center; justify-content:space-between; } }
.cta-band h2{ color:var(--white); max-width:560px; margin-bottom:12px; }
.cta-band p{ color: rgba(255,255,255,.8); max-width:520px; }
.cta-band-actions{ display:flex; flex-wrap:wrap; gap:14px; flex-shrink:0; }

/* ---------- Blog ---------- */
.blog-section{ padding:100px 0; }
.blog-grid{ display:grid; grid-template-columns:1fr; gap:28px; }
@media(min-width:680px){ .blog-grid{ grid-template-columns:1fr 1fr; } }
@media(min-width:1080px){ .blog-grid{ grid-template-columns: repeat(3,1fr); } }
.post-card{ border:1px solid var(--line); border-radius: var(--radius-md); overflow:hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease); background:var(--white); }
.post-card:hover{ transform: translateY(-6px); box-shadow: 0 26px 48px -28px rgba(10,13,11,.28); }
.post-thumb{ aspect-ratio: 16/10; position:relative; background: linear-gradient(150deg, var(--green-deep), var(--green-ink)); }
.post-thumb svg{ position:absolute; inset:0; width:100%; height:100%; }
.post-cat{ position:absolute; top:16px; left:16px; background: var(--gold); color:var(--ink); font-size:.68rem; font-weight:800; padding:6px 12px; border-radius: var(--radius-pill); text-transform:uppercase; letter-spacing:.04em; }
.post-body{ padding: 24px 22px 26px; }
.post-meta{ font-size:.76rem; font-weight:700; color: var(--slate-light); margin-bottom:10px; }
.post-body h3{ font-size:1.12rem; margin-bottom:10px; }
.post-body p{ font-size:.9rem; margin-bottom:16px; }
.post-more{ font-weight:800; font-size:.82rem; color:var(--green-deep); display:flex; align-items:center; gap:8px; }
.post-more svg{ width:13px;height:13px; }

/* ---------- FAQ ---------- */
.faq-section{ padding: 100px 0; }
.faq-list{ display:flex; flex-direction:column; gap:14px; max-width: 840px; }
.faq-item{ border:1px solid var(--line); border-radius: var(--radius-md); overflow:hidden; background:var(--white); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding: 22px 26px; background:transparent; border:0; text-align:left;
  font-family:var(--font-body); font-weight:800; font-size:1rem; color:var(--ink);
}
.faq-q .plus{ width:26px;height:26px;border-radius:50%; border:1.5px solid var(--line); flex-shrink:0; display:flex;align-items:center;justify-content:center; position:relative; transition: background .25s var(--ease), border-color .25s var(--ease); }
.faq-q .plus::before,.faq-q .plus::after{ content:""; position:absolute; background: var(--ink); transition: transform .3s var(--ease), background .25s var(--ease); }
.faq-q .plus::before{ width:10px; height:2px; }
.faq-q .plus::after{ width:2px; height:10px; }
.faq-item.is-open .faq-q .plus{ background:var(--green); border-color:var(--green); }
.faq-item.is-open .faq-q .plus::before,.faq-item.is-open .faq-q .plus::after{ background:var(--white); }
.faq-item.is-open .faq-q .plus::after{ transform: rotate(90deg) scaleY(0); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .35s var(--ease); }
.faq-a div{ padding: 0 26px 24px; }
.faq-a p{ margin:0; font-size:.95rem; }
.faq-item.is-open .faq-a{ max-height:400px; }

/* ---------- Forms ---------- */
.form-card{ background: var(--white); border:1px solid var(--line); border-radius: var(--radius-md); padding: 34px; box-shadow: 0 40px 70px -40px rgba(10,13,11,.25); }
.form-card.on-dark{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); box-shadow:none; }
.form-row{ display:grid; grid-template-columns:1fr; gap:18px; margin-bottom:18px; }
@media(min-width:560px){ .form-row.two{ grid-template-columns:1fr 1fr; } .form-row.three{ grid-template-columns:1fr 1fr 1fr; } }
.field label{ display:block; font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; color: var(--slate); }
.on-dark .field label{ color: rgba(255,255,255,.65); }
.field input,.field select,.field textarea{
  width:100%; padding: 13px 15px; border:1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white); color: var(--ink); transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.on-dark .field input,.on-dark .field select,.on-dark .field textarea{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color:var(--white); }
.on-dark .field select option{ color:var(--ink); }
.field input:focus,.field select:focus,.field textarea:focus{ border-color: var(--green); box-shadow: 0 0 0 4px rgba(11,170,32,.15); outline:none; }
.field textarea{ resize:vertical; min-height:110px; }
.form-note{ font-size:.76rem; color: var(--slate-light); margin-top:14px; }
.on-dark .form-note{ color: rgba(255,255,255,.5); }

/* ---------- Fleet ---------- */
.fleet-grid{ display:grid; grid-template-columns:1fr; gap:26px; }
@media(min-width:700px){ .fleet-grid{ grid-template-columns:1fr 1fr; } }
.fleet-card{ border:1px solid var(--line); border-radius: var(--radius-md); overflow:hidden; background:var(--white); }
.fleet-media{ aspect-ratio:16/10; position:relative; background: linear-gradient(155deg, var(--green-deep), var(--ink)); }
.fleet-media svg{ position:absolute; inset:0; width:100%; height:100%; }
.fleet-body{ padding:26px; }
.fleet-body h3{ margin-bottom:8px; }
.fleet-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.fleet-tags span{ font-size:.72rem; font-weight:800; padding:6px 12px; border-radius: var(--radius-pill); background: var(--paper); color: var(--green-deep); border:1px solid var(--line); }

/* ---------- Steps / process ---------- */
.process{ padding:100px 0; background: var(--paper); }
.process-grid{ display:grid; grid-template-columns:1fr; gap:0; counter-reset: step; }
@media(min-width:860px){ .process-grid{ grid-template-columns: repeat(4,1fr); } }
.step{ position:relative; padding: 0 26px 0 0; }
.step:not(:last-child)::after{ content:""; display:none; }
@media(min-width:860px){ .step:not(:last-child)::after{ display:block; position:absolute; top:26px; left:calc(100% - 13px); width: calc(100% - 26px); height:2px; background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px); } }
.step-num{ counter-increment: step; width:52px;height:52px; border-radius:50%; background: var(--ink); color:var(--gold); font-family:var(--font-display); font-weight:700; font-size:1.2rem; display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.step h3{ font-size:1.05rem; margin-bottom:8px; }
.step p{ font-size:.9rem; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--ink); color: rgba(255,255,255,.62); }
.footer-top{ padding: 84px 0 56px; }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:44px; }
@media(min-width:720px){ .footer-grid{ grid-template-columns: 1.3fr 1fr 1fr; } }
@media(min-width:1080px){ .footer-grid{ grid-template-columns: 1.5fr 1fr 1fr 1fr 1.1fr; } }
.footer-brand .brand{ margin-bottom:18px; }
.footer-brand p{ color: rgba(255,255,255,.55); font-size:.92rem; }
.footer-social{ display:flex; gap:10px; margin-top:20px; }
.footer-social a{ width:38px;height:38px;border-radius:50%; border:1px solid rgba(255,255,255,.18); display:flex;align-items:center;justify-content:center; transition: background .2s, border-color .2s; }
.footer-social a:hover{ background: var(--green); border-color: var(--green); }
.footer-col h4{ color: var(--white); font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:20px; font-family:var(--font-body); font-weight:800; }
.footer-col ul{ display:flex; flex-direction:column; gap:12px; }
.footer-col a{ font-size:.9rem; transition: color .2s; }
.footer-col a:hover{ color: var(--gold); }
.footer-contact li{ display:flex; align-items:flex-start; gap:10px; font-size:.9rem; }
.footer-contact svg{ width:16px;height:16px; color: var(--gold); flex-shrink:0; margin-top:3px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding: 22px 0; }
.footer-bottom .container{ display:flex; flex-direction:column; gap:10px; align-items:center; text-align:center; font-size:.8rem; }
@media(min-width:720px){ .footer-bottom .container{ flex-direction:row; justify-content:space-between; text-align:left; } }
.footer-bottom a:hover{ color: var(--gold); }

/* ---------- Utility ---------- */
.section{ padding: 100px 0; }
.section.tight{ padding: 70px 0; }
.bg-paper{ background: var(--paper); }
.bg-ink{ background: var(--ink); color: var(--white); }
.mt-0{ margin-top:0; }
.text-center{ text-align:center; }
.tag-pill{ display:inline-flex; align-items:center; gap:8px; background:var(--paper); border:1px solid var(--line); padding:8px 16px; border-radius: var(--radius-pill); font-size:.78rem; font-weight:800; color:var(--green-deep); }

[data-reveal]{ opacity:0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

.grid-2{ display:grid; grid-template-columns:1fr; gap:24px; }
@media(min-width:760px){ .grid-2{ grid-template-columns:1fr 1fr; } }

.icon-check{ width:20px;height:20px; }

/* back-to-top */
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:400;
  width:48px;height:48px;border-radius:50%;
  background: var(--ink); color: var(--gold);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 14px 30px -10px rgba(10,13,11,.5);
  opacity:0; visibility:hidden; transform: translateY(10px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:none; }

/* content pages (about story etc.) */
.prose h2{ margin-top:1.4em; }
.prose ul{ margin: 0 0 1.2em; padding-left: 1.2em; list-style: disc; color: var(--slate); }
.prose li{ margin-bottom:.5em; }

.quote-page-hero .form-card{ margin-top: 20px; }