/* ==========================================================================
   Owa Delivery Services — shared stylesheet
   Palette and type are the established brand. Do not swap these out casually:
   every page loads this one file, so a change here changes the whole site.
   ========================================================================== */

:root{
  --bg-0:#0B0B0B;
  --bg-1:#141414;
  --card:#1B1B1B;
  --teal:#12A797;
  --teal-hi:#17C4B1;
  --ink:#06110F;            /* text on teal */
  --white:#FFFFFF;
  --text-soft:rgba(255,255,255,0.72);
  --text-soft-2:rgba(255,255,255,0.55);
  --line:rgba(255,255,255,0.12);
  --radius:18px;
  --wrap:1120px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg-0);
  color:var(--white);
  font-family:'Literata', Georgia, serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ font-family:'Bricolage Grotesque', system-ui, sans-serif; letter-spacing:-0.02em; margin:0; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; letter-spacing:0.03em; text-transform:uppercase; }
.narrow{ max-width:760px; }

/* visible keyboard focus everywhere */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
  border-radius:4px;
}

/* --- header ------------------------------------------------------------ */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,11,11,0.85);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 24px; }
.logo{ display:flex; align-items:center; gap:10px; text-decoration:none;
  font-family:'Bricolage Grotesque', sans-serif; font-weight:700; font-size:1.25rem; color:var(--white); }
.logo img{ height:36px; width:auto; object-fit:contain; }
.nav-links{ display:flex; gap:22px; align-items:center;
  font-family:'IBM Plex Mono',monospace; font-size:0.78rem; text-transform:uppercase; }
.nav-links a{ text-decoration:none; color:var(--white); opacity:0.75; }
.nav-links a:hover, .nav-links a.active{ opacity:1; color:var(--teal); }

/* --- buttons ----------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--teal); color:var(--ink);
  padding:11px 20px; border-radius:100px;
  font-family:'IBM Plex Mono',monospace; font-size:0.8rem; font-weight:500;
  text-transform:uppercase; text-decoration:none; border:none; cursor:pointer;
  transition:transform .15s ease, background .15s ease;
}
.btn:hover{ background:var(--teal-hi); transform:translateY(-1px); }
.btn-ghost{ background:transparent; border:1.5px solid var(--teal); color:var(--white); }
.btn-ghost:hover{ background:var(--teal); color:var(--ink); }

/* --- sections ---------------------------------------------------------- */
section{ padding:88px 0; }
.band-1{ background:var(--bg-1); }
.eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:0.76rem; color:var(--teal);
  text-transform:uppercase; letter-spacing:0.12em;
  display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.eyebrow::before{ content:''; width:26px; height:1px; background:var(--teal); display:inline-block; }
.section-head{ max-width:660px; margin-bottom:48px; }
.section-head h2{ font-size:clamp(1.7rem,3.4vw,2.3rem); }
.section-head p{ margin-top:14px; color:var(--text-soft); max-width:56ch; }

/* --- hero -------------------------------------------------------------- */
.hero{ padding:72px 0 0; }
.hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:44px; align-items:center; }
.hero h1{ font-size:clamp(2.3rem,5vw,3.5rem); font-weight:700; line-height:1.05; }
.hero h1 em{ font-style:normal; color:var(--teal); }
.hero p.lede{ font-size:1.06rem; max-width:48ch; margin-top:22px; color:var(--text-soft); }
.hero-cta{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; align-items:center; }
.hero-stats{ display:flex; gap:34px; margin-top:48px; padding-top:26px; border-top:1px solid var(--line); flex-wrap:wrap; }
.stat-num{ font-family:'Bricolage Grotesque',sans-serif; font-size:1.55rem; font-weight:700; }
.stat-label{ font-family:'IBM Plex Mono',monospace; font-size:0.68rem; color:var(--text-soft-2); text-transform:uppercase; }

/* --- signature: the multi-stop route ----------------------------------- */
.route-box{ position:relative; }
.route-svg{ width:100%; height:auto; }
.route-line{ fill:none; stroke:rgba(255,255,255,0.22); stroke-width:2; stroke-dasharray:5 9; }
.route-stop{ fill:var(--bg-0); stroke:var(--teal); stroke-width:2; }
.route-stop-end{ fill:var(--teal); stroke:none; }
.stop-label{ font-family:'IBM Plex Mono',monospace; font-size:10px; fill:var(--text-soft);
  text-transform:uppercase; letter-spacing:0.06em; }
.stop-label-end{ fill:var(--white); }
.bike{
  offset-path:path('M24,196 C 88,150 96,74 156,66 S 250,132 292,86 S 356,52 384,104');
  offset-rotate:auto;
  animation:ride 11s linear infinite;
}
@keyframes ride{ from{ offset-distance:0%; } to{ offset-distance:100%; } }
@media (prefers-reduced-motion: reduce){
  .bike{ animation:none; offset-distance:46%; }
  html{ scroll-behavior:auto; }
}

/* --- service cards ----------------------------------------------------- */
.service-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  background:var(--line); border-radius:var(--radius); overflow:hidden; }
.service{ background:var(--card); padding:30px 26px; }
.service .tag{ font-family:'IBM Plex Mono',monospace; font-size:0.66rem; color:var(--teal); text-transform:uppercase; }
.service h3{ font-size:1.15rem; margin-top:12px; }
.service p{ margin:8px 0 0; font-size:0.93rem; color:var(--text-soft); }

/* --- steps (a real sequence, so numbering carries meaning) ------------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.step{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px; }
.step-num{ font-family:'IBM Plex Mono',monospace; font-size:0.82rem; color:var(--teal); }
.step h3{ font-size:1.18rem; margin-top:14px; }
.step p{ margin-top:10px; font-size:0.94rem; color:var(--text-soft); }

/* --- coverage ---------------------------------------------------------- */
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.badge-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.badge{ font-family:'IBM Plex Mono',monospace; font-size:0.75rem; text-transform:uppercase;
  padding:8px 16px; border-radius:100px; border:1px solid rgba(18,167,151,0.5); }
.note{ background:var(--card); border-left:3px solid var(--teal); padding:20px 24px;
  border-radius:6px; margin-top:26px; font-size:0.92rem; color:var(--text-soft); }

/* --- partner band ------------------------------------------------------ */
.band{ background:var(--teal); color:var(--ink); border-radius:24px; padding:48px 44px;
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.band h2{ font-size:clamp(1.45rem,3vw,1.95rem); max-width:18ch; color:var(--ink); }
.band p{ margin-top:10px; max-width:44ch; color:rgba(6,17,15,0.82); }
.band .btn{ background:var(--ink); color:var(--white); }
.band .btn:hover{ background:#0d1f1c; }

/* --- long-form content pages ------------------------------------------ */
.page-head{ padding:72px 0 0; }
.page-head h1{ font-size:clamp(2.1rem,4.4vw,3rem); }
.page-head p.lede{ margin-top:16px; color:var(--text-soft); font-size:1.06rem; max-width:60ch; }
.prose{ padding:48px 0 88px; max-width:760px; }
.prose h2{ font-size:1.3rem; margin:40px 0 10px; }
.prose h3{ font-size:1.05rem; margin:26px 0 8px; color:var(--teal); }
.prose p, .prose li{ color:var(--text-soft); }
.prose ul, .prose ol{ padding-left:20px; }
.prose li{ margin:6px 0; }
.prose a{ color:var(--teal); text-decoration:none; }
.prose a:hover{ text-decoration:underline; }
.prose strong{ color:var(--white); }
.updated{ font-family:'IBM Plex Mono',monospace; font-size:0.74rem; color:var(--text-soft-2);
  text-transform:uppercase; letter-spacing:0.06em; }

.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:32px; margin-top:26px; }
.card h2{ margin-top:0; }
.info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:30px; }
.info-item{ margin-bottom:22px; }
.info-item:last-child{ margin-bottom:0; }
.info-item h4{ font-family:'IBM Plex Mono',monospace; color:var(--teal);
  margin:0 0 6px; font-size:0.8rem; text-transform:uppercase; }
.info-item p{ margin:0; color:var(--text-soft); }

/* definition-style table for fees */
.table{ width:100%; border-collapse:collapse; margin-top:16px; font-size:0.94rem; }
.table th, .table td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); color:var(--text-soft); }
.table th{ font-family:'IBM Plex Mono',monospace; font-size:0.72rem; text-transform:uppercase;
  color:var(--white); font-weight:500; }

/* --- footer ------------------------------------------------------------ */
footer{ background:var(--bg-0); color:var(--text-soft); padding:56px 0 28px; border-top:1px solid var(--line); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:32px;
  padding-bottom:34px; border-bottom:1px solid var(--line); }
footer h4{ font-family:'IBM Plex Mono',monospace; font-size:0.74rem; text-transform:uppercase;
  color:var(--white); margin-bottom:14px; }
footer p{ font-size:0.92rem; }
footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; font-size:0.92rem; }
footer a{ text-decoration:none; }
footer a:hover{ color:var(--teal); }
.footer-bottom{ display:flex; justify-content:space-between; padding-top:22px;
  font-size:0.8rem; flex-wrap:wrap; gap:8px; color:var(--text-soft-2); }

@media (max-width:900px){
  section{ padding:64px 0; }
  .hero-grid, .service-grid, .steps, .two-col, .info-grid, .footer-grid{ grid-template-columns:1fr; }
  .nav-links{ display:none; }
  .band{ padding:36px 28px; }
}