/* Transport page only — uses the website's existing Varin colour variables */
  .transport-page .transport-intro{max-width:900px;margin:0 auto;color:var(--muted);font-size:1.05rem;line-height:1.85}
  .transport-page .transport-kicker{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .9rem;border-radius:999px;background:rgba(245,158,11,.12);color:var(--brand-blue);font-weight:800;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:1rem}
  .transport-page .transport-kicker i{color:var(--brand-gold)}
  .transport-page .transport-stat{height:100%;background:var(--white);border:1px solid rgba(10,47,102,.08);border-radius:18px;padding:1.4rem;box-shadow:var(--shadow);text-align:center}
  .transport-page .transport-stat i{display:inline-grid;place-items:center;width:58px;height:58px;border-radius:16px;background:rgba(10,47,102,.08);color:var(--brand-blue);font-size:1.55rem;margin-bottom:.8rem}
  .transport-page .transport-stat strong{display:block;color:var(--brand-blue);font-size:1.7rem;line-height:1.1}
  .transport-page .transport-stat span{display:block;color:var(--muted);font-size:.92rem;margin-top:.35rem}
  .transport-page .transport-card{height:100%;background:var(--white);border:1px solid rgba(10,47,102,.08);border-radius:20px;padding:1.65rem;box-shadow:var(--shadow);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;position:relative;overflow:hidden}
  .transport-page .transport-card:before{content:"";position:absolute;left:0;top:0;width:4px;height:100%;background:var(--brand-gold)}
  .transport-page .transport-card:hover{transform:translateY(-6px);border-color:rgba(245,158,11,.35);box-shadow:0 18px 38px rgba(10,47,102,.14)}
  .transport-page .transport-icon{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:rgba(10,47,102,.08);color:var(--brand-blue);font-size:1.45rem;margin-bottom:1rem}
  .transport-page .transport-card h3{color:var(--brand-blue);font-size:1.1rem;font-weight:800;margin-bottom:.7rem}
  .transport-page .transport-card p{color:var(--muted);line-height:1.7;margin:0}
  .transport-page .transport-highlight{border-radius:24px;background:var(--brand-blue);color:var(--white);padding:2rem;box-shadow:var(--shadow);position:relative;overflow:hidden}
  .transport-page .transport-highlight:after{content:"";position:absolute;right:-65px;top:-65px;width:180px;height:180px;border-radius:50%;background:rgba(245,158,11,.16)}
  .transport-page .transport-highlight h2,.transport-page .transport-highlight h3{color:var(--white)}
  .transport-page .transport-highlight p{color:rgba(255,255,255,.82);line-height:1.8}
  .transport-page .safety-list{list-style:none;padding:0;margin:0;display:grid;gap:.85rem}
  .transport-page .safety-list li{display:flex;gap:.8rem;align-items:flex-start;color:rgba(255,255,255,.9)}
  .transport-page .safety-list i{color:var(--brand-gold);font-size:1.05rem;margin-top:.16rem}
  .transport-page .route-band{background:var(--brand-light);border-radius:22px;padding:1.8rem;border:1px solid rgba(10,47,102,.07)}
  .transport-page .route-band h3{color:var(--brand-blue);font-weight:800}
  .transport-page .mini-feature{display:flex;gap:.85rem;align-items:flex-start;padding:1rem;border-radius:16px;background:var(--white);height:100%;box-shadow:0 8px 20px rgba(10,47,102,.07)}
  .transport-page .mini-feature i{color:var(--brand-gold);font-size:1.25rem}
  .transport-page .mini-feature strong{display:block;color:var(--brand-blue);margin-bottom:.2rem}
  .transport-page .mini-feature span{color:var(--muted);font-size:.92rem;line-height:1.55}
  @media(max-width:767.98px){.transport-page .transport-highlight{padding:1.5rem}.transport-page .transport-card{padding:1.35rem}.transport-page .transport-intro{font-size:1rem}}


/* ==========================================================
   CREATIVE TRANSPORT PAGE — CODING ONLY / NO NEW IMAGES
   Uses the website's existing Varin blue, gold, white and light tones.
========================================================== */

.transport-page.transport-creative{
  background:
    radial-gradient(circle at 5% 23%,rgba(13,77,156,.055),transparent 22%),
    radial-gradient(circle at 95% 68%,rgba(245,158,11,.055),transparent 22%),
    #fff;
  overflow:hidden;
}

/* HERO */
.transport-creative .transport-hero-code{
  position:relative;
  overflow:hidden;
  min-height:610px;
  display:flex;
  align-items:center;
  color:var(--white);
  padding:78px 0;
  background:
    radial-gradient(circle at 83% 22%,rgba(245,158,11,.22),transparent 20%),
    radial-gradient(circle at 70% 84%,rgba(255,255,255,.08),transparent 23%),
    linear-gradient(125deg,var(--brand-blue) 0%,var(--brand-blue-2) 100%);
}
.transport-creative .transport-hero-code::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.13;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to right,transparent,black 55%,black);
}
.transport-creative .transport-hero-row{min-height:450px}
.transport-creative .transport-route-line{
  position:absolute;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(245,158,11,.9),transparent);
  transform-origin:left center;
  opacity:.45;
}
.transport-creative .route-one{width:430px;right:-40px;top:110px;transform:rotate(-18deg)}
.transport-creative .route-two{width:520px;right:-100px;bottom:105px;transform:rotate(14deg)}
.transport-creative .transport-dot{
  position:absolute;width:13px;height:13px;border-radius:50%;
  background:var(--brand-gold);box-shadow:0 0 0 8px rgba(245,158,11,.13);
}
.transport-creative .dot-one{right:255px;top:92px}
.transport-creative .dot-two{right:90px;top:238px}
.transport-creative .dot-three{right:335px;bottom:82px}

.transport-creative .transport-hero-kicker{
  display:inline-flex;align-items:center;gap:.65rem;
  padding:.48rem .82rem;border-radius:999px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12);
  color:#ffe3a0;font-size:.72rem;font-weight:800;letter-spacing:.13em;
  margin-bottom:1.25rem;backdrop-filter:blur(8px);
}
.transport-creative .transport-hero-code h1{
  font-size:clamp(3.15rem,6vw,5.9rem);
  line-height:.95;letter-spacing:-.055em;font-weight:800;
  max-width:790px;margin-bottom:1.35rem;
}
.transport-creative .transport-hero-code h1 span{
  display:block;color:var(--brand-gold);
  text-shadow:0 10px 32px rgba(245,158,11,.18);
}
.transport-creative .transport-hero-copy{
  max-width:710px;color:rgba(255,255,255,.82);
  font-size:1.03rem;line-height:1.78;
}
.transport-creative .transport-hero-actions{
  display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.7rem;
}
.transport-creative .transport-main-btn,
.transport-creative .transport-ghost-btn{
  border-radius:999px;padding:.86rem 1.3rem;font-weight:800;transition:.3s ease;
}
.transport-creative .transport-main-btn{
  background:var(--brand-gold);border-color:var(--brand-gold);color:var(--brand-blue);
  box-shadow:0 12px 28px rgba(245,158,11,.24);
}
.transport-creative .transport-main-btn:hover{background:#fff;border-color:#fff;color:var(--brand-blue);transform:translateY(-2px)}
.transport-creative .transport-ghost-btn{
  color:#fff;border:1px solid rgba(255,255,255,.30);background:rgba(255,255,255,.08);
}
.transport-creative .transport-ghost-btn:hover{background:#fff;color:var(--brand-blue)}

.transport-creative .transport-dashboard{
  max-width:470px;margin-left:auto;padding:1.2rem;border-radius:30px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 25px 65px rgba(4,19,48,.24);backdrop-filter:blur(14px);
}
.transport-creative .transport-dashboard-head{
  display:flex;gap:1rem;align-items:center;padding:.35rem .25rem 1rem;
}
.transport-creative .transport-bus-icon{
  flex:0 0 60px;width:60px;height:60px;border-radius:18px;
  display:grid;place-items:center;background:var(--brand-gold);color:var(--brand-blue);
  font-size:1.45rem;
}
.transport-creative .transport-dashboard-head small{
  display:block;color:#ffe3a0;font-size:.64rem;font-weight:800;letter-spacing:.12em;
}
.transport-creative .transport-dashboard-head h3{font-size:1.1rem;font-weight:800;margin:.18rem 0 0}
.transport-creative .transport-dashboard-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;
}
.transport-creative .transport-dash-card{
  min-height:118px;padding:1rem;border-radius:18px;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);
  transition:.3s ease;
}
.transport-creative .transport-dash-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.12)}
.transport-creative .transport-dash-card i{font-size:1.15rem;color:var(--brand-gold);margin-bottom:.55rem}
.transport-creative .transport-dash-card strong{font-size:1rem}
.transport-creative .transport-dash-card span{font-size:.69rem;color:rgba(255,255,255,.67);margin-top:.12rem}
.transport-creative .transport-route-visual{
  display:flex;align-items:center;gap:.45rem;margin-top:.75rem;padding:.85rem;
  border-radius:17px;background:rgba(3,24,58,.24);border:1px solid rgba(255,255,255,.08);
}
.transport-creative .route-node{
  width:54px;text-align:center;color:#fff;font-size:.63rem;font-weight:700
}
.transport-creative .route-node i{display:block;color:var(--brand-gold);font-size:1rem;margin-bottom:.15rem}
.transport-creative .route-path{flex:1;display:flex;align-items:center;justify-content:space-around}
.transport-creative .route-path span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.34)}
.transport-creative .route-bus{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:#fff;color:var(--brand-blue);font-size:.95rem;
}

/* SUMMARY */
.transport-creative .transport-summary{
  position:relative;z-index:3;margin-top:-38px;padding-bottom:28px;
}
.transport-creative .transport-summary-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
}
.transport-creative .transport-summary-card{
  display:flex;align-items:center;gap:1rem;min-height:115px;padding:1.15rem 1.25rem;
  border-radius:22px;background:#fff;border:1px solid rgba(10,47,102,.08);
  box-shadow:0 17px 38px rgba(10,47,102,.10);
}
.transport-creative .summary-icon{
  flex:0 0 56px;width:56px;height:56px;border-radius:17px;
  display:grid;place-items:center;background:rgba(10,47,102,.08);
  color:var(--brand-blue);font-size:1.25rem;
}
.transport-creative .transport-summary-card:nth-child(2) .summary-icon{
  background:rgba(245,158,11,.13);color:#bd7200;
}
.transport-creative .transport-summary-card:nth-child(3) .summary-icon{
  background:rgba(13,77,156,.10);color:var(--brand-blue-2);
}
.transport-creative .transport-summary-card strong{display:block;color:var(--brand-blue);font-size:1.08rem}
.transport-creative .transport-summary-card span{display:block;color:var(--muted);font-size:.78rem;line-height:1.45;margin-top:.18rem}

/* HEADINGS */
.transport-creative .transport-creative-section{padding:70px 0}
.transport-creative .transport-creative-heading{max-width:800px;margin:0 auto 2.4rem}
.transport-creative .transport-creative-heading>span,
.transport-creative .emergency-head span,
.transport-creative .coverage-top span,
.transport-creative .transport-final-copy>span{
  color:#bc7200;font-size:.7rem;font-weight:800;letter-spacing:.15em;
}
.transport-creative .transport-creative-heading h2{
  color:var(--brand-blue);font-size:clamp(2.2rem,4vw,3.75rem);
  font-weight:800;letter-spacing:-.04em;margin:.42rem 0 .7rem;
}
.transport-creative .transport-creative-heading p{color:var(--muted);line-height:1.7;margin:0}

/* FEATURE CARDS */
.transport-creative .transport-feature-card{
  --accent:var(--brand-blue);
  --soft:rgba(10,47,102,.07);
  height:100%;min-height:320px;position:relative;overflow:hidden;
  padding:1.6rem;border-radius:25px;background:#fff;border:1px solid rgba(10,47,102,.08);
  box-shadow:0 14px 34px rgba(10,47,102,.08);transition:.35s ease;
}
.transport-creative .transport-feature-card::before{
  content:"";position:absolute;left:0;top:0;right:0;height:6px;background:var(--accent);
}
.transport-creative .transport-feature-card::after{
  content:"";position:absolute;width:155px;height:155px;border-radius:50%;
  right:-65px;bottom:-75px;background:var(--soft);
}
.transport-creative .transport-feature-card:hover{
  transform:translateY(-8px);box-shadow:0 24px 50px rgba(10,47,102,.13);
}
.transport-creative .feature-number{
  position:absolute;right:18px;top:17px;font-size:2.7rem;font-weight:800;line-height:1;
  color:var(--soft);
}
.transport-creative .feature-icon{
  width:62px;height:62px;border-radius:19px;display:grid;place-items:center;
  background:var(--accent);color:#fff;font-size:1.35rem;margin-bottom:1.1rem;position:relative;z-index:1;
  box-shadow:0 11px 22px rgba(10,47,102,.13);
}
.transport-creative .transport-feature-card h3{
  color:var(--brand-blue);font-size:1.08rem;font-weight:800;margin-bottom:.7rem;position:relative;z-index:1;
}
.transport-creative .transport-feature-card p{
  color:var(--muted);font-size:.88rem;line-height:1.68;margin:0;position:relative;z-index:1;
}
.transport-creative .feature-one{--accent:var(--brand-blue);--soft:rgba(10,47,102,.07)}
.transport-creative .feature-two{--accent:var(--brand-blue-2);--soft:rgba(13,77,156,.07)}
.transport-creative .feature-three{--accent:var(--brand-gold);--soft:rgba(245,158,11,.10)}
.transport-creative .feature-four{--accent:var(--brand-blue-2);--soft:rgba(13,77,156,.06)}
.transport-creative .feature-five{--accent:var(--brand-gold);--soft:rgba(245,158,11,.09)}
.transport-creative .feature-six{--accent:var(--brand-blue);--soft:rgba(10,47,102,.065)}

/* JOURNEY */
.transport-creative .transport-journey-section{
  padding:70px 0;
  background:
    radial-gradient(circle at 7% 20%,rgba(13,77,156,.07),transparent 22%),
    radial-gradient(circle at 93% 80%,rgba(245,158,11,.07),transparent 22%),
    var(--brand-light);
}
.transport-creative .transport-journey-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;position:relative;
}
.transport-creative .transport-journey-grid::before{
  content:"";position:absolute;left:8%;right:8%;top:46px;height:2px;
  background:linear-gradient(90deg,var(--brand-blue),var(--brand-blue-2),var(--brand-gold));
  opacity:.20;
}
.transport-creative .journey-step{
  position:relative;z-index:1;text-align:center;min-height:250px;
  padding:1.35rem 1rem;border-radius:22px;background:#fff;
  border:1px solid rgba(10,47,102,.08);box-shadow:0 12px 30px rgba(10,47,102,.07);
}
.transport-creative .journey-icon{
  width:74px;height:74px;border-radius:23px;display:grid;place-items:center;
  margin:0 auto 1rem;background:var(--brand-blue);color:#fff;font-size:1.35rem;
}
.transport-creative .journey-step:nth-child(even) .journey-icon{
  background:var(--brand-gold);color:var(--brand-blue);
}
.transport-creative .journey-step>span{
  position:absolute;right:15px;top:13px;color:rgba(10,47,102,.13);font-weight:800;font-size:1.55rem;
}
.transport-creative .journey-step h4{color:var(--brand-blue);font-weight:800}
.transport-creative .journey-step p{color:var(--muted);font-size:.82rem;line-height:1.6;margin:0}

/* SPLIT */
.transport-creative .transport-split-section{
  background:#fff;
}
.transport-creative .transport-emergency-card,
.transport-creative .transport-coverage-card{
  height:100%;border-radius:28px;position:relative;overflow:hidden;
  box-shadow:0 18px 42px rgba(10,47,102,.10);
}
.transport-creative .transport-emergency-card{
  padding:2rem;color:#fff;
  background:
    radial-gradient(circle at 88% 10%,rgba(245,158,11,.18),transparent 23%),
    linear-gradient(130deg,var(--brand-blue),var(--brand-blue-2));
}
.transport-creative .emergency-head{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.transport-creative .emergency-icon{
  flex:0 0 66px;width:66px;height:66px;border-radius:20px;
  display:grid;place-items:center;background:var(--brand-gold);color:var(--brand-blue);
  font-size:1.45rem;
}
.transport-creative .emergency-head span{color:#ffe091!important}
.transport-creative .emergency-head h2{
  color:#fff;font-size:clamp(1.6rem,3vw,2.5rem);font-weight:800;margin:.25rem 0 0;
}
.transport-creative .transport-emergency-card>p{color:rgba(255,255,255,.80);line-height:1.7}
.transport-creative .emergency-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;margin-top:1.25rem}
.transport-creative .emergency-item{
  display:flex;gap:.7rem;align-items:flex-start;padding:.9rem;border-radius:16px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.09);
}
.transport-creative .emergency-item i{color:var(--brand-gold);font-size:1.1rem}
.transport-creative .emergency-item strong{display:block;font-size:.82rem}
.transport-creative .emergency-item span{display:block;color:rgba(255,255,255,.66);font-size:.72rem;line-height:1.45;margin-top:.12rem}

.transport-creative .transport-coverage-card{
  padding:1.8rem;background:var(--brand-light);border:1px solid rgba(10,47,102,.07);
}
.transport-creative .coverage-top{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.transport-creative .coverage-icon{
  flex:0 0 62px;width:62px;height:62px;border-radius:19px;
  display:grid;place-items:center;background:var(--brand-gold);color:var(--brand-blue);font-size:1.3rem;
}
.transport-creative .coverage-top h3{color:var(--brand-blue);font-weight:800;margin:.28rem 0 0}
.transport-creative .transport-coverage-card>p{color:var(--muted);line-height:1.68}
.transport-creative .coverage-list{display:grid;gap:.75rem;margin-top:1.1rem}
.transport-creative .coverage-item{
  display:flex;gap:.8rem;align-items:flex-start;padding:.9rem;border-radius:16px;background:#fff;
  box-shadow:0 8px 20px rgba(10,47,102,.06);
}
.transport-creative .coverage-item i{
  flex:0 0 38px;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:rgba(10,47,102,.07);color:var(--brand-blue);
}
.transport-creative .coverage-item strong{display:block;color:var(--brand-blue);font-size:.84rem}
.transport-creative .coverage-item span{display:block;color:var(--muted);font-size:.73rem;line-height:1.45;margin-top:.12rem}

/* FINAL */
.transport-creative .transport-final-section{
  padding:10px 0 50px;
}
.transport-creative .transport-final-card{
  display:grid;grid-template-columns:auto 1fr auto;gap:1.35rem;align-items:center;
  padding:2rem 2.2rem;border-radius:28px;color:#fff;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 88% 14%,rgba(245,158,11,.20),transparent 22%),
    linear-gradient(120deg,var(--brand-blue),var(--brand-blue-2));
  box-shadow:0 22px 48px rgba(10,47,102,.16);
}
.transport-creative .transport-final-card::after{
  content:"";position:absolute;width:230px;height:230px;border-radius:50%;
  right:-105px;bottom:-125px;border:1px solid rgba(255,255,255,.09);
  box-shadow:0 0 0 45px rgba(255,255,255,.025);
}
.transport-creative .transport-final-icon{
  width:76px;height:76px;border-radius:23px;display:grid;place-items:center;
  background:var(--brand-gold);color:var(--brand-blue);font-size:1.65rem;position:relative;z-index:1;
}
.transport-creative .transport-final-copy{position:relative;z-index:1}
.transport-creative .transport-final-copy>span{color:#ffe091!important}
.transport-creative .transport-final-copy h2{
  font-size:clamp(1.65rem,3vw,2.65rem);font-weight:800;margin:.28rem 0 .45rem;color:#fff;
}
.transport-creative .transport-final-copy p{margin:0;color:rgba(255,255,255,.76);line-height:1.62}
.transport-creative .transport-final-btn{
  position:relative;z-index:1;border-radius:999px;padding:.82rem 1.2rem;
  background:#fff;color:var(--brand-blue);font-weight:800;white-space:nowrap;
}
.transport-creative .transport-final-btn:hover{background:var(--brand-gold);color:var(--brand-blue)}

/* RESPONSIVE */
@media(max-width:991.98px){
  .transport-creative .transport-hero-code{padding:64px 0 85px}
  .transport-creative .transport-hero-row{min-height:auto}
  .transport-creative .transport-dashboard{max-width:none;margin-left:0}
  .transport-creative .transport-summary{margin-top:-28px}
  .transport-creative .transport-summary-grid{grid-template-columns:1fr}
  .transport-creative .transport-journey-grid{grid-template-columns:repeat(2,1fr)}
  .transport-creative .transport-journey-grid::before{display:none}
  .transport-creative .transport-final-card{grid-template-columns:auto 1fr}
  .transport-creative .transport-final-btn{grid-column:1/-1;justify-self:start}
}
@media(max-width:767.98px){
  .transport-creative .transport-creative-section,
  .transport-creative .transport-journey-section{padding:55px 0}
  .transport-creative .transport-hero-code h1{font-size:clamp(2.8rem,13vw,4.5rem)}
  .transport-creative .transport-journey-grid{grid-template-columns:1fr}
  .transport-creative .emergency-grid{grid-template-columns:1fr}
  .transport-creative .transport-final-card{grid-template-columns:1fr;padding:1.55rem}
  .transport-creative .transport-feature-card{min-height:auto}
}
@media(max-width:575.98px){
  .transport-creative .transport-dashboard-grid{grid-template-columns:1fr 1fr}
  .transport-creative .transport-dash-card{min-height:105px}
  .transport-creative .transport-route-visual{gap:.25rem}
}