/* ===========================================================
   Cape Rhino Shuttle & Tours — design system
   Palette: Ink #201D18 · Rock #C7A97C · Fynbos #6E7F5C
            Route #B2532C · Parchment #EFE7D8 · Bay #2B4A4A
   Type: Fraunces (display) / Public Sans (body) / IBM Plex Mono (utility)
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,340;9..144,460;9..144,600&family=Public+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:#201D18;
  --rock:#C7A97C;
  --fynbos:#6E7F5C;
  --route:#B2532C;
  --parchment:#EFE7D8;
  --bay:#2B4A4A;
  --paper:#FAF6EE;
  --line: rgba(32,29,24,0.14);
  --max: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Public Sans', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3{
  font-family:'Fraunces', serif;
  font-weight:600;
  margin:0 0 .4em;
  letter-spacing:-0.01em;
  line-height:1.05;
}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--route);
  display:inline-flex;
  align-items:center;
  gap:.5em;
  margin-bottom:1em;
}
.eyebrow::before{
  content:'';
  width:22px;height:1px;
  background:var(--route);
  display:inline-block;
}
.wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}
:focus-visible{outline:2px solid var(--bay); outline-offset:3px;}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} }

/* ---------- header / nav ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(250,246,238,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px; max-width:var(--max); margin:0 auto;
}
.brand{
  display:flex; align-items:center; gap:.6em;
  font-family:'Fraunces', serif; font-weight:600; font-size:1.25rem;
  text-decoration:none; color:var(--ink);
}
.brand .mark{
  width:30px; height:30px; flex:none;
}
.brand small{
  display:block; font-family:'IBM Plex Mono',monospace;
  font-size:.6rem; letter-spacing:.12em; color:var(--fynbos); font-weight:400;
  text-transform:uppercase;
}
nav.links{
  display:flex; align-items:center; gap:0;
  font-family:'IBM Plex Mono', monospace; font-size:.78rem; letter-spacing:.03em;
}
nav.links a{
  text-decoration:none; color:var(--ink); padding:8px 14px; position:relative;
}
nav.links a::after{
  content:'·'; position:absolute; right:-2px; color:var(--rock);
}
nav.links a:last-of-type::after{content:'';}
nav.links a:hover{color:var(--route);}
nav.links a.current{color:var(--route);}
.btn{
  font-family:'IBM Plex Mono', monospace; font-size:.75rem; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none;
  background:var(--route); color:var(--paper);
  padding:11px 20px; border-radius:2px; white-space:nowrap;
  border:1px solid var(--route);
  transition:background .15s, color .15s;
}
.btn:hover{background:var(--ink); border-color:var(--ink);}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--ink);}
.btn.ghost:hover{background:var(--ink); color:var(--paper);}

#nav-toggle{display:none;}
.burger{display:none; cursor:pointer; flex-direction:column; gap:5px; padding:6px;}
.burger span{width:22px; height:2px; background:var(--ink); display:block;}

@media (max-width:820px){
  nav.links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch;
    background:var(--paper); border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  nav.links a{padding:14px 28px; border-top:1px solid var(--line);}
  nav.links a::after{display:none;}
  #nav-toggle:checked ~ nav.links{max-height:400px;}
  .burger{display:flex;}
  .nav-cta{display:none;}
}

/* ---------- hero / route line ---------- */
.hero{padding:64px 0 40px; overflow:hidden;}
.hero h1{font-size:clamp(2.1rem, 5vw, 3.6rem); max-width:15ch;}
.hero .lede{font-size:1.08rem; max-width:52ch; color:#4a463d; margin-bottom:1.8em;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:2.2em;}

.route-map{width:100%; height:auto; display:block;}
.route-path{
  fill:none; stroke:var(--route); stroke-width:2;
  stroke-dasharray:6 7; stroke-linecap:round;
}
.route-pin circle{fill:var(--paper); stroke:var(--ink); stroke-width:1.4;}
.route-pin .dot{fill:var(--route); stroke:none;}
.route-label{
  font-family:'IBM Plex Mono', monospace; font-size:11px; fill:var(--ink);
  letter-spacing:.02em;
}
.route-sub{fill:var(--fynbos); font-size:9.5px;}

/* ---------- trust bar ---------- */
.trust{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:26px 0; background:var(--parchment);
}
.trust .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:28px 40px; justify-content:space-between;}
.trust .label{font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fynbos);}
.trust .marks{display:flex; flex-wrap:wrap; gap:28px 36px; font-family:'Fraunces',serif; font-weight:600; font-size:1.02rem; color:var(--ink); opacity:.85;}

/* ---------- sections ---------- */
section{padding:72px 0;}
.section-head{max-width:60ch; margin-bottom:2.6em;}
.section-head h2{font-size:clamp(1.7rem,3vw,2.4rem);}
.section-head p{color:#4a463d; font-size:1.02rem;}

.grid{display:grid; gap:22px;}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:900px){ .grid.cols-3, .grid.cols-2{grid-template-columns:1fr;} }

.card{
  background:var(--paper); border:1px solid var(--line); padding:28px 26px;
  border-radius:2px;
}
.card .num{font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--route); letter-spacing:.1em;}
.card h3{font-size:1.25rem; margin-top:.5em;}
.card p{color:#4a463d; font-size:.96rem; margin:0;}

.stripe{background:var(--ink); color:var(--paper);}
.stripe .section-head p{color:#c9c4b6;}
.stripe .card{background:#2a2620; border-color:rgba(255,255,255,.12);}
.stripe .card p{color:#c9c4b6;}
.stripe .card h3{color:var(--paper);}

.stat-row{display:flex; flex-wrap:wrap; gap:36px 56px; margin-top:1.2em;}
.stat b{
  display:block; font-family:'Fraunces',serif; font-size:2.1rem; font-weight:600; color:var(--route);
}
.stat span{font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--fynbos);}
.stripe .stat span{color:#a9bfa0;}

/* ---------- itinerary / route legs (tours page) ---------- */
.legs{list-style:none; margin:0; padding:0; border-top:1px solid var(--line);}
.leg{
  display:grid; grid-template-columns:64px 1fr auto; gap:22px; align-items:baseline;
  padding:26px 0; border-bottom:1px solid var(--line);
}
.leg .idx{font-family:'IBM Plex Mono',monospace; color:var(--route); font-size:.8rem; padding-top:.3em;}
.leg h3{font-size:1.3rem; margin-bottom:.3em;}
.leg p{color:#4a463d; margin:0; max-width:62ch;}
.leg .meta{font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--fynbos); text-align:right; white-space:nowrap; padding-top:.35em;}
@media (max-width:700px){
  .leg{grid-template-columns:1fr; gap:6px;}
  .leg .meta{text-align:left;}
}

/* ---------- quote / pull ---------- */
.pull{
  border-left:3px solid var(--route); padding:6px 0 6px 26px; margin:2.4em 0;
  font-family:'Fraunces',serif; font-size:1.3rem; font-weight:460; font-style:italic; max-width:56ch;
}
.pull cite{display:block; font-family:'IBM Plex Mono',monospace; font-style:normal; font-size:.72rem; color:var(--fynbos); margin-top:.8em; letter-spacing:.04em;}

/* ---------- fleet cards ---------- */
.fleet-card{border:1px solid var(--line); background:var(--paper); padding:0; overflow:hidden;}
.fleet-card .fig{background:var(--parchment); padding:30px 26px 10px;}
.fleet-card .body{padding:22px 26px 26px;}
.fleet-card h3{font-size:1.2rem;}
.fleet-card ul{margin:.8em 0 0; padding-left:1.1em; color:#4a463d; font-size:.92rem;}
.fleet-card li{margin-bottom:.3em;}

/* ---------- CTA band ---------- */
.cta-band{background:var(--fynbos); color:var(--paper); padding:60px 0; text-align:center;}
.cta-band h2{color:var(--paper); font-size:clamp(1.6rem,3vw,2.2rem);}
.cta-band p{color:#e4ead9; max-width:50ch; margin:0 auto 1.6em;}
.cta-band .btn{background:var(--route); border-color:var(--route);}
.cta-band .btn:hover{background:var(--ink); border-color:var(--ink);}

/* ---------- form ---------- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.form-grid .full{grid-column:1/-1;}
label{display:block; font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--fynbos); margin-bottom:.5em;}
input, select, textarea{
  width:100%; font-family:'Public Sans',sans-serif; font-size:.96rem;
  padding:12px 14px; border:1px solid var(--line); background:var(--paper); color:var(--ink);
  border-radius:2px;
}
textarea{resize:vertical; min-height:110px;}
@media (max-width:700px){ .form-grid{grid-template-columns:1fr;} }

/* ---------- footer ---------- */
footer.site{background:var(--ink); color:#cfc9ba; padding:56px 0 30px; margin-top:40px;}
footer.site .wrap{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px;}
footer.site h4{font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--rock); margin:0 0 1em;}
footer.site .fbrand{font-family:'Fraunces',serif; font-weight:600; color:var(--paper); font-size:1.15rem; margin-bottom:.6em;}
footer.site p{margin:0 0 .6em; font-size:.9rem; line-height:1.6;}
footer.site a{text-decoration:none; color:#cfc9ba;}
footer.site a:hover{color:var(--rock);}
footer.site ul{list-style:none; margin:0; padding:0;}
footer.site li{margin-bottom:.6em; font-size:.9rem;}
.legal{
  max-width:var(--max); margin:36px auto 0; padding:20px 28px 0; border-top:1px solid rgba(255,255,255,.1);
  font-family:'IBM Plex Mono',monospace; font-size:.68rem; color:#8b8676; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
@media (max-width:820px){ footer.site .wrap{grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ footer.site .wrap{grid-template-columns:1fr; } }

/* ---------- multilingual welcome ---------- */
.lang-welcome{padding:50px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--parchment);}
.lang-welcome .section-head{margin-bottom:1.8em;}
.lang-row{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.lang-item{
  background:var(--paper); border:1px solid var(--line); padding:16px 18px; border-radius:2px;
  display:flex; flex-direction:column; gap:2px;
}
.lang-item .flag{font-size:1.4rem; margin-bottom:.2em;}
.lang-item .lang-name{font-family:'IBM Plex Mono',monospace; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--route);}
.lang-item .lang-greet{font-family:'Fraunces',serif; font-size:1rem; color:var(--ink);}
@media (max-width:820px){ .lang-row{grid-template-columns:repeat(2,1fr);} }
@media (max-width:480px){ .lang-row{grid-template-columns:1fr;} }

/* ---------- decorative multilingual strip ---------- */
.lang-strip{
  background:var(--ink); color:#cfc9ba; font-family:'IBM Plex Mono',monospace; font-size:.66rem;
  letter-spacing:.03em; padding:7px 0; overflow:hidden; white-space:nowrap;
}
.lang-strip-inner{
  display:inline-flex; width:max-content;
  animation:lang-strip-scroll 32s linear infinite;
}
.lang-strip:hover .lang-strip-inner{ animation-play-state:paused; }
@keyframes lang-strip-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .lang-strip-inner{ animation:none; }
}
.lang-strip span{margin:0 14px; opacity:.85;}
.lang-strip span:first-child{margin-left:0;}