/* Saudi Chauffeur Company, main stylesheet */

/*
  FONT NOTE: headings are set in Fraunces and body text in Plus Jakarta Sans,
  the closest freely licensed match to Berlingske and Paralucent respectively.
  Berlingske and Paralucent are both paid, commercially licensed typefaces, so
  this file cannot bundle or link to them without your license and font files.
  To switch to the real fonts once you have that license: drop the woff2 files
  into assets/fonts/, uncomment the two @font-face blocks directly below, and
  change --font-heading / --font-body in :root to the family names you declare.
*/
/*
@font-face{
  font-family:"Berlingske";
  src:url("../fonts/berlingske-regular.woff2") format("woff2");
  font-weight:400 700;
  font-display:swap;
}
@font-face{
  font-family:"Paralucent";
  src:url("../fonts/paralucent-regular.woff2") format("woff2");
  font-weight:400 700;
  font-display:swap;
}
*/

:root{
  --charcoal:#15171b;
  --charcoal-2:#1d2026;
  --charcoal-3:#252932;
  --gold:#c9a24b;
  --gold-light:#e4c976;
  --ivory:#f6f4ef;
  --grey:#9aa0ab;
  --grey-light:#c7cbd3;
  --line:rgba(255,255,255,0.08);
  --maxw:1180px;
  --radius:2px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-elegant:cubic-bezier(.16,.84,.28,1);
  --font-heading:"Fraunces","Georgia",serif;
  --font-body:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--charcoal);
  color:var(--ivory);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
/* a barely there grain, keeps large flat dark panels from looking like a flat template fill */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{
  font-family:var(--font-heading);
  font-weight:600;
  line-height:1.12;
  margin:0 0 .5em;
  letter-spacing:.005em;
  font-optical-sizing:auto;
}
h1{font-size:clamp(2.4rem,5vw,4.2rem);}
h2{font-size:clamp(1.8rem,3.2vw,2.6rem);}
h3{font-size:1.35rem;}
p{margin:0 0 1em;color:var(--grey-light);}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin-bottom:18px;
}
.kicker::before{content:"";width:26px;height:1px;background:var(--gold);}

/* Header */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(21,23,27,.7);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:background .3s var(--ease);
}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;
  height:78px;
}
.brand{display:flex;align-items:center;gap:10px;font-family:"Cormorant Garamond",serif;font-size:1.3rem;letter-spacing:.03em;color:var(--ivory);}
.brand .mark{
  width:34px;height:34px;border:1px solid var(--gold);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--gold);
  font-size:.85rem;letter-spacing:.04em;
}
.brand small{display:block;font-family:"Inter",sans-serif;font-size:.55rem;letter-spacing:.22em;color:var(--grey);text-transform:uppercase;margin-top:2px;}

nav.primary-nav{display:flex;align-items:center;gap:34px;}
nav.primary-nav a{
  font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-light);
  position:relative;padding:6px 0;transition:color .25s var(--ease);
}
nav.primary-nav a:hover,nav.primary-nav a.active{color:var(--gold);}
nav.primary-nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);
  transition:width .25s var(--ease);
}
nav.primary-nav a:hover::after,nav.primary-nav a.active::after{width:100%;}

.nav-cta{
  border:1px solid var(--gold);color:var(--gold)!important;padding:10px 20px;
  font-size:.72rem!important;letter-spacing:.12em!important;
}
.nav-cta:hover{background:var(--gold);color:var(--charcoal)!important;}
.nav-cta::after{display:none;}

.menu-toggle{display:none;background:none;border:0;color:var(--ivory);cursor:pointer;padding:8px;}
.menu-toggle svg{width:24px;height:24px;}

@media (max-width:900px){
  nav.primary-nav{
    position:fixed;top:78px;left:0;right:0;bottom:0;
    background:var(--charcoal-2);
    flex-direction:column;justify-content:flex-start;align-items:flex-start;
    padding:40px 28px;gap:26px;
    transform:translateX(100%);transition:transform .35s var(--ease);
    overflow-y:auto;
  }
  nav.primary-nav.open{transform:translateX(0);}
  nav.primary-nav a{font-size:1rem;}
  .menu-toggle{display:block;}
}

/* Hero */
.hero{
  position:relative;padding:170px 0 110px;overflow:hidden;
  background:
    radial-gradient(ellipse 900px 500px at 82% -10%, rgba(201,162,75,.16), transparent 60%),
    linear-gradient(180deg,var(--charcoal) 0%, var(--charcoal-2) 100%);
}
.hero .route-art{
  position:absolute;right:-6%;top:10%;width:620px;max-width:60vw;opacity:.5;pointer-events:none;
}
.hero-inner{max-width:760px;position:relative;z-index:2;}
.hero p.lead{font-size:1.15rem;color:var(--grey-light);max-width:620px;}
.hero-cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px;}

/* elegant entrance, hero content arrives in a short unhurried sequence rather than all at once */
.hero .kicker,.hero h1,.hero p.lead,.hero .hero-cta-row{opacity:0;transform:translateY(20px);animation:hero-in 1s var(--ease-elegant) forwards;}
.hero .kicker{animation-delay:.05s;}
.hero h1{animation-delay:.16s;}
.hero p.lead{animation-delay:.36s;}
.hero .hero-cta-row{animation-delay:.52s;}
@keyframes hero-in{to{opacity:1;transform:translateY(0);}}
@media (prefers-reduced-motion: reduce){
  .hero .kicker,.hero h1,.hero p.lead,.hero .hero-cta-row{animation:none;opacity:1;transform:none;}
}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 28px;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  border-radius:var(--radius);transition:transform .45s var(--ease-elegant),box-shadow .45s var(--ease-elegant),background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
  border:1px solid transparent;font-weight:600;
}
.btn-gold{background:var(--gold);color:var(--charcoal);}
.btn-gold:hover{background:var(--gold-light);transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(201,162,75,.55);}
.btn-outline{border-color:var(--line);color:var(--ivory);}
.btn-outline:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(201,162,75,.35);}
.btn:active{transform:translateY(0);transition-duration:.1s;}

.stat-strip{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:26px 0;margin-top:64px;
}
.stat-strip .container{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;}
.stat{flex:1 1 160px;}
.stat .num{font-family:"Cormorant Garamond",serif;font-size:2.1rem;color:var(--gold);display:block;}
.stat .lbl{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);}

/* Sections */
section{padding:96px 0;}
section.tight{padding:64px 0;}
.section-head{max-width:640px;margin-bottom:52px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.alt-bg{background:linear-gradient(180deg,var(--charcoal) 0,var(--charcoal-2) 80px,var(--charcoal-2) calc(100% - 80px),var(--charcoal) 100%);}

/* Grids */
.grid{display:grid;gap:26px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.grid-3,.grid-4,.grid-2{grid-template-columns:1fr;}}

.card{
  background:var(--charcoal-3);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px 26px;transition:transform .5s var(--ease-elegant),border-color .4s var(--ease),box-shadow .5s var(--ease-elegant);
}
.card:hover{transform:translateY(-6px);border-color:rgba(201,162,75,.45);box-shadow:0 24px 48px -24px rgba(0,0,0,.5);}
.card .icon{width:38px;height:38px;color:var(--gold);margin-bottom:18px;}
.card h3{margin-bottom:10px;font-size:1.15rem;}
.card p{font-size:.92rem;margin-bottom:0;}
.card a.card-link{display:inline-block;margin-top:14px;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);}

.city-card{
  position:relative;border:1px solid var(--line);padding:30px 24px;background:var(--charcoal-3);
  transition:border-color .4s var(--ease), transform .5s var(--ease-elegant), box-shadow .5s var(--ease-elegant);
}
.city-card:hover{border-color:rgba(201,162,75,.45);transform:translateY(-5px);box-shadow:0 20px 40px -22px rgba(0,0,0,.5);}
.city-card .tag{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);}
.city-card h3{margin:8px 0 10px;}
.city-card p{font-size:.88rem;}

.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:36px;}}
.split .art-box{
  aspect-ratio:4/5;border:1px solid var(--line);background:var(--charcoal-3);
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
}
.split .art-box svg{width:70%;opacity:.85;}
.split .art-box img{width:100%;height:100%;object-fit:cover;filter:grayscale(5%) brightness(1) contrast(1.05);transition:transform 1.2s var(--ease), filter .6s var(--ease);}
.split .art-box:hover img{transform:scale(1.06);filter:grayscale(0%) brightness(1.08) contrast(1.05);}
.split .art-box::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 30% 20%, rgba(201,162,75,.14), transparent 60%);
}

.list-check{list-style:none;margin:0;padding:0;}
.list-check li{
  display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line);
  font-size:.94rem;color:var(--grey-light);
}
.list-check li:last-child{border-bottom:0;}
.list-check svg{width:16px;height:16px;flex-shrink:0;margin-top:4px;color:var(--gold);}

.quote-band{
  background:linear-gradient(120deg,var(--charcoal-2),var(--charcoal-3));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  text-align:center;padding:90px 0;
}
.quote-band h2{max-width:820px;margin:0 auto 28px;}

.fleet-card{background:var(--charcoal-3);border:1px solid var(--line);padding:0;overflow:hidden;}
.fleet-card .fleet-art{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--charcoal-2),var(--charcoal-3));border-bottom:1px solid var(--line);}
.fleet-card .fleet-art svg{width:58%;color:var(--gold);opacity:.9;}
.fleet-card .fleet-body{padding:22px 24px;}
.fleet-card .tag{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);}

table.compare{width:100%;border-collapse:collapse;margin-top:10px;}
table.compare th,table.compare td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;font-size:.9rem;}
table.compare th{color:var(--gold);font-weight:600;text-transform:uppercase;font-size:.72rem;letter-spacing:.08em;}

.breadcrumbs{font-size:.75rem;color:var(--grey);padding-top:120px;}
.breadcrumbs .container{padding-top:18px;padding-bottom:0;}
.breadcrumbs a{color:var(--grey);}
.breadcrumbs a:hover{color:var(--gold);}

/* Contact form (mailto based, no backend) */
.form-box{background:var(--charcoal-3);border:1px solid var(--line);padding:36px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:600px){.form-row{grid-template-columns:1fr;}}
.form-box label{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin-bottom:8px;}
.form-box input,.form-box select,.form-box textarea{
  width:100%;background:var(--charcoal-2);border:1px solid var(--line);color:var(--ivory);
  padding:13px 14px;font-family:inherit;font-size:.92rem;margin-bottom:18px;border-radius:var(--radius);
}
.form-box input:focus,.form-box select:focus,.form-box textarea:focus{outline:none;border-color:var(--gold);}
.form-box textarea{resize:vertical;min-height:110px;}

/* Footer */
footer.site-footer{background:var(--charcoal-2);border-top:1px solid var(--line);padding:70px 0 30px;}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:50px;}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:480px){.footer-grid{grid-template-columns:1fr;}}
footer h4{font-family:"Inter",sans-serif;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:18px;font-weight:600;}
footer ul{list-style:none;margin:0;padding:0;}
footer li{margin-bottom:10px;}
footer a{color:var(--grey-light);font-size:.88rem;}
footer a:hover{color:var(--gold);}
.footer-bottom{
  border-top:1px solid var(--line);padding-top:26px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-size:.78rem;color:var(--grey);
}

/* WhatsApp float button */
.wa-float{
  position:fixed;bottom:26px;right:26px;z-index:90;
  width:58px;height:58px;border-radius:50%;background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  transition:transform .25s var(--ease);
}
.wa-float:hover{transform:scale(1.08);}
.wa-float svg{width:28px;height:28px;color:#fff;}

/* Reveal animation — content stays fully visible/readable at all times (crawlers, no-js,
   slow JS) and only gets a small cosmetic slide-up + scale once it enters view for JS users. */
.reveal{opacity:1;transform:translateY(28px) scale(.985);transition:transform .7s var(--ease);}
.reveal.in{transform:translateY(0) scale(1);}
/* stagger children of a grid/row as they reveal, purely cosmetic delay */
.grid > .reveal:nth-child(1),.hero-cta-row > .reveal:nth-child(1){transition-delay:0ms;}
.grid > .reveal:nth-child(2){transition-delay:80ms;}
.grid > .reveal:nth-child(3){transition-delay:160ms;}
.grid > .reveal:nth-child(4){transition-delay:240ms;}
.grid > .reveal:nth-child(5){transition-delay:320ms;}
.grid > .reveal:nth-child(6){transition-delay:400ms;}
.grid > .reveal:nth-child(7){transition-delay:480ms;}
.grid > .reveal:nth-child(8){transition-delay:560ms;}

/* Scroll progress bar */
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:0%;background:linear-gradient(90deg,var(--gold),var(--gold-light));z-index:200;transition:width .1s linear;}

/* Cursor glow (desktop, pointer:fine only) */
.cursor-glow{
  position:fixed;top:0;left:0;width:520px;height:520px;pointer-events:none;z-index:1;
  background:radial-gradient(circle, rgba(201,162,75,.10), transparent 70%);
  transform:translate(-9999px,-9999px);
  transition:transform .12s linear;
}

/* Marquee ticker */
.ticker{
  overflow:hidden;white-space:nowrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--charcoal-2);padding:18px 0;
}
.ticker-track{display:inline-flex;align-items:center;gap:0;animation:ticker-scroll 32s linear infinite;}
.ticker-track span{
  display:inline-flex;align-items:center;gap:14px;
  font-family:"Cormorant Garamond",serif;font-size:1.2rem;color:var(--grey);
  padding:0 28px;letter-spacing:.02em;
}
.ticker-track span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);display:inline-block;}
.ticker:hover .ticker-track{animation-play-state:paused;}
@keyframes ticker-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){.ticker-track{animation:none;}}

/* Animated SVG route draw */
.hero .route-art .route-line{stroke-dasharray:900;stroke-dashoffset:900;animation:draw-route 2.4s var(--ease) .3s forwards;}
.hero .route-art .route-dot{opacity:0;animation:dot-in .5s var(--ease) forwards;}
.hero .route-art .dot-start{animation-delay:.3s;}
.hero .route-art .dot-mid{animation-delay:1.5s;}
.hero .route-art .dot-end{animation-delay:2.6s;}
@keyframes draw-route{to{stroke-dashoffset:0;}}
@keyframes dot-in{to{opacity:1;}}
@media (prefers-reduced-motion: reduce){.hero .route-art .route-line{animation:none;stroke-dashoffset:0;}.hero .route-art .route-dot{animation:none;opacity:1;}}

/* Fleet photography */
.fleet-photo-card{
  position:relative;overflow:hidden;background:var(--charcoal-3);border:1px solid var(--line);
  transition:border-color .4s var(--ease), transform .5s var(--ease-elegant), box-shadow .5s var(--ease-elegant);
}
.fleet-photo-card:hover{border-color:rgba(201,162,75,.5);transform:translateY(-6px);box-shadow:0 24px 48px -22px rgba(0,0,0,.55);}
.fleet-photo-card .photo-wrap{aspect-ratio:16/10;overflow:hidden;position:relative;}
.fleet-photo-card img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(15%) contrast(1.05);
  transition:transform .8s var(--ease), filter .5s var(--ease);
}
.fleet-photo-card:hover img{transform:scale(1.08);filter:grayscale(0%) contrast(1.08);}
.fleet-photo-card .photo-wrap::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 50%, rgba(21,23,27,.9) 100%);
  pointer-events:none;
}
.fleet-photo-card .fleet-body{padding:20px 22px;}
.fleet-photo-card .tag{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);}

/* Number counters */
.stat .num[data-count]{font-variant-numeric:tabular-nums;}

/* Teaser row (homepage fleet strip) */
.fleet-teaser-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
@media (max-width:900px){.fleet-teaser-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.fleet-teaser-grid{grid-template-columns:1fr;}}

/* Utility */
.mt-0{margin-top:0;}
.text-gold{color:var(--gold);}
.small{font-size:.82rem;color:var(--grey);}