:root{
    --black:#120c0c;
    --dark:#181212;
    --red:#c32824;
    --red-btn:#b82d30;
    --yellow:#f5c10b;
    --cream:#f7f8f3;
    --white:#ffffff;
    --gray:#767671;
    --line:#e4e1d6;
    --maxw:1180px;
  }
  /* ================= Cab Fare Section ================= */
    .cabfare {
      --cf-red: #c32824;
      --cf-red-dark: #b82d30;
      --cf-red-soft: #fbeceb;
      --cf-ink: #1c1917;
      --cf-muted: #6b6560;
      --cf-line: #eadfdd;
      --cf-bg: #fffaf9;
      padding: 80px 20px;
      background: var(--cf-bg);
    }
    .cabfare *, .cabfare *::before, .cabfare *::after { box-sizing: border-box; }
    .cabfare-wrap { max-width: 1140px; margin: 0 auto; }

    .cabfare-head { max-width: 620px; margin-bottom: 44px; }
    .cabfare-title { margin: 0 0 12px; font-size: clamp(28px, 4vw, 42px); line-height: 1.15; color: var(--cf-ink); }
    .cabfare-title span { color: var(--cf-red); }
    .cabfare-sub { margin: 0; color: var(--cf-muted); font-size: 16px; line-height: 1.6; }

    .cabfare-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
    .cabfare-card {
      display: flex; flex-direction: column;
      padding: 28px 26px;
      background: #fff;
      border: 1px solid var(--cf-line);
      border-top: 4px solid var(--cf-red);
      border-radius: 14px;
    }
    .cabfare-card--top { background: var(--cf-red); border-color: var(--cf-red); color: #fff; }
    .cabfare-icon {
      width: 54px; height: 54px; display: grid; place-items: center;
      margin-bottom: 18px; border-radius: 50%;
      background: var(--cf-red-soft); color: var(--cf-red);
    }
    .cabfare-card--top .cabfare-icon { background: rgba(255,255,255,.18); color: #fff; }
    .cabfare-icon svg { width: 28px; height: 28px; }
    .cabfare-name { margin: 0 0 4px; font-size: 22px; color: inherit; }
    .cabfare-type { margin: 0 0 22px; font-size: 14px; color: var(--cf-muted); }
    .cabfare-card--top .cabfare-type { color: rgba(255,255,255,.8); }
    .cabfare-price { margin: 0 0 24px; display: flex; align-items: baseline; gap: 6px; }
    .cabfare-price strong { font-size: 44px; line-height: 1; font-weight: 700; }
    .cabfare-price small { font-size: 15px; color: var(--cf-muted); }
    .cabfare-card--top .cabfare-price small { color: rgba(255,255,255,.85); }

    .cabfare-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      margin-top: auto; padding: 12px 22px; border-radius: 999px;
      background: var(--cf-red); color: #fff;
      font-size: 15px; font-weight: 600; text-decoration: none;
      border: 2px solid var(--cf-red);
      transition: background .2s, color .2s, border-color .2s;
    }
    .cabfare-btn:hover { background: var(--cf-red-dark); border-color: var(--cf-red-dark); color: #fff; }
    .cabfare-btn:focus-visible { outline: 3px solid #25d366; outline-offset: 3px; }
    .cabfare-btn svg { width: 18px; height: 18px; flex: none; }
    .cabfare-card--top .cabfare-btn { background: #fff; color: var(--cf-red); border-color: #fff; }
    .cabfare-card--top .cabfare-btn:hover { background: var(--cf-red-soft); color: var(--cf-red-dark); }

    .cabfare-tempo {
      margin-top: 22px; display: grid; grid-template-columns: 300px 1fr;
      background: #fff; border: 1px solid var(--cf-line); border-radius: 14px; overflow: hidden;
    }
    .cabfare-tempo-intro { padding: 30px 26px; background: var(--cf-ink); color: #fff; }
    .cabfare-tempo-intro h3 { margin: 0 0 8px; font-size: 24px; color: #fff; }
    .cabfare-tempo-intro p { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.75); }
    .cabfare-rows { list-style: none; margin: 0; padding: 0; }
    .cabfare-row {
      display: flex; align-items: center; justify-content: space-between; gap: 16px;
      padding: 18px 26px; border-bottom: 1px solid var(--cf-line);
    }
    .cabfare-row:last-child { border-bottom: 0; }
    .cabfare-seats { font-size: 18px; font-weight: 600; color: var(--cf-ink); flex: 1; }
    .cabfare-rate { font-size: 18px; font-weight: 700; color: var(--cf-red); white-space: nowrap; }
    .cabfare-rate small { font-size: 13px; font-weight: 400; color: var(--cf-muted); }
    .cabfare-row .cabfare-btn { margin-top: 0; padding: 9px 18px; font-size: 14px; }


    /* Car / tempo images (img/ folder me photo daalein; na mile to icon dikhega) */
    .cabfare-card { overflow: hidden; }
    .cabfare-img {
      position: relative; aspect-ratio: 16 / 10;
      margin: -28px -26px 22px;
      display: grid; place-items: center;
      background: var(--cf-red-soft); color: var(--cf-red);
    }
    .cabfare-img svg { width: 56px; height: 56px; }
    .cabfare-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .cabfare-card--top .cabfare-img { background: rgba(255,255,255,.15); color: #fff; }
    .cabfare-tempo-img {
      position: relative; aspect-ratio: 16 / 10;
      margin: -30px -26px 20px;
      display: grid; place-items: center;
      background: rgba(255,255,255,.1); color: #fff;
    }
    .cabfare-tempo-img svg { width: 56px; height: 56px; }
    .cabfare-tempo-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

    .cabfare-note { margin: 22px 0 0; font-size: 13px; color: var(--cf-muted); }

    @media (max-width: 991px) {
      .cabfare { padding: 60px 18px; }
      .cabfare-grid { grid-template-columns: repeat(2, 1fr); }
      .cabfare-tempo { grid-template-columns: 1fr; }
      .cabfare-tempo-img { aspect-ratio: 16 / 7; }
    }
    @media (max-width: 575px) {
      .cabfare { padding: 48px 16px; }
      .cabfare-head { margin-bottom: 30px; }
      .cabfare-grid { grid-template-columns: 1fr; gap: 16px; }
      .cabfare-card { padding: 24px 20px; }
      .cabfare-img { margin: -24px -20px 20px; }
      .cabfare-price strong { font-size: 38px; }
      .cabfare-btn { width: 100%; }
      .cabfare-row { flex-wrap: wrap; padding: 16px 18px; row-gap: 10px; }
      .cabfare-seats { flex: 1 1 50%; }
      .cabfare-rate { flex: 0 0 auto; }
      .cabfare-row .cabfare-btn { width: 100%; }
    }
    @media (prefers-reduced-motion: reduce) { .cabfare-btn { transition: none; } }

    /* ================= Driving School Section ================= */
    .drvsch {
      --dc-red: #c32824;
      --dc-red-dark: #9d1f1c;
      --dc-red-soft: #fbeceb;
      --dc-ink: #1c1917;
      --dc-muted: #6b6560;
      --dc-line: #eadfdd;
      padding: 80px 20px;
      background: #fffaf9;
    }
    .drvsch *, .drvsch *::before, .drvsch *::after { box-sizing: border-box; }
    .drvsch-wrap {
      max-width: 1140px; margin: 0 auto;
      display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center;
    }

    /* Content */
    .drvsch-title { margin: 0 0 12px; font-size: clamp(28px, 4vw, 42px); line-height: 1.15; color: var(--dc-ink); }
    .drvsch-title span { color: var(--dc-red); }
    .drvsch-sub { margin: 0 0 28px; color: var(--dc-muted); font-size: 16px; line-height: 1.6; }

    /* Package card */
    .drvsch-card {
      background: #fff;
      border: 1px solid var(--dc-line);
      border-top: 4px solid var(--dc-red);
      border-radius: 14px;
      overflow: hidden;
    }
    .drvsch-stats {
      display: grid; grid-template-columns: repeat(3, 1fr);
      border-bottom: 1px solid var(--dc-line);
    }
    .drvsch-stat { padding: 24px 12px; text-align: center; border-right: 1px solid var(--dc-line); }
    .drvsch-stat:last-child { border-right: 0; }
    .drvsch-stat strong { display: block; font-size: 34px; line-height: 1; font-weight: 700; color: var(--dc-red); }
    .drvsch-stat span { display: block; margin-top: 8px; font-size: 14px; color: var(--dc-muted); }

    .drvsch-bottom {
      display: flex; align-items: center; justify-content: space-between; gap: 20px;
      padding: 22px 26px;
    }
    .drvsch-price { margin: 0; display: flex; align-items: baseline; gap: 8px; }
    .drvsch-price strong { font-size: 40px; line-height: 1; font-weight: 700; color: var(--dc-ink); }
    .drvsch-price small { font-size: 14px; color: var(--dc-muted); }

    .drvsch-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      padding: 13px 24px; border-radius: 999px;
      background: var(--dc-red); color: #fff;
      font-size: 15px; font-weight: 600; text-decoration: none;
      border: 2px solid var(--dc-red);
      transition: background .2s, border-color .2s;
    }
    .drvsch-btn:hover { background: var(--dc-red-dark); border-color: var(--dc-red-dark); color: #fff; }
    .drvsch-btn:focus-visible { outline: 3px solid #25d366; outline-offset: 3px; }
    .drvsch-btn svg { width: 18px; height: 18px; flex: none; }

    .drvsch-foot { margin: 18px 0 0; font-size: 13px; color: var(--dc-muted); }

    /* Image (img/driving-school.webp daalein; na mile to icon dikhega) */
    .drvsch-img {
      position: relative; aspect-ratio: 4 / 4.4;
      border-radius: 16px; overflow: hidden;
      display: grid; place-items: center;
      background: var(--dc-red-soft); color: var(--dc-red);
      border-bottom: 6px solid var(--dc-red);
    }
    .drvsch-img svg { width: 72px; height: 72px; }
    .drvsch-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

    @media (max-width: 991px) {
      .drvsch { padding: 60px 18px; }
      .drvsch-wrap { grid-template-columns: 1fr; gap: 32px; }
      .drvsch-img { order: -1; aspect-ratio: 16 / 9; }
    }
    @media (max-width: 575px) {
      .drvsch { padding: 48px 16px; }
      .drvsch-stat { padding: 20px 6px; }
      .drvsch-stat strong { font-size: 28px; }
      .drvsch-stat span { font-size: 13px; }
      .drvsch-bottom { flex-direction: column; align-items: stretch; gap: 16px; padding: 20px 18px; text-align: center; }
      .drvsch-price { justify-content: center; }
      .drvsch-price strong { font-size: 36px; }
    }
    @media (prefers-reduced-motion: reduce) { .drvsch-btn { transition: none; } }
/* ================= Driver Service Section ================= */
    .drvsvc {
      --red: #c32824;
      --red-dark: #9d1f1c;
      --red-soft: #fbeceb;
      --ds-ink: #1c1917;
      --ds-muted: #6b6560;
      --ds-line: #eadfdd;
      padding: 80px 20px;
      background: #fffafa;
    }
    .drvsvc *, .drvsvc *::before, .drvsvc *::after { box-sizing: border-box; }
    .drvsvc-wrap {
      max-width: 1140px; margin: 0 auto;
    }

    /* Content */
    .drvsvc-title { margin: 0 0 12px; font-size: clamp(28px, 4vw, 42px); line-height: 1.15; color: var(--ds-ink); }
    .drvsvc-title span { color: var(--red); }
    .drvsvc-sub { margin: 0 0 30px; color: var(--ds-muted); font-size: 16px; line-height: 1.6; }

    .drvsvc-plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .drvsvc-plan {
      display: flex; flex-direction: column;
      padding: 24px 22px;
      background: #fffaf9;
      border: 1px solid var(--ds-line);
      border-top: 4px solid var(--red);
      border-radius: 14px;
    }
    .drvsvc-plan--top { background: var(--red); border-color: var(--red); color: #fff; }
    .drvsvc-hours { margin: 0 0 4px; font-size: 20px; font-weight: 600; color: inherit; }
    .drvsvc-note { margin: 0 0 18px; font-size: 14px; color: var(--ds-muted); }
    .drvsvc-plan--top .drvsvc-note { color: rgba(255,255,255,.8); }
    .drvsvc-price { margin: 0 0 22px; display: flex; align-items: baseline; gap: 6px; }
    .drvsvc-price strong { font-size: 40px; line-height: 1; font-weight: 700; }
    .drvsvc-price small { font-size: 14px; color: var(--ds-muted); }
    .drvsvc-plan--top .drvsvc-price small { color: rgba(255,255,255,.85); }

    .drvsvc-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      margin-top: auto; padding: 12px 20px; border-radius: 999px;
      background: var(--red); color: #fff;
      font-size: 15px; font-weight: 600; text-decoration: none;
      border: 2px solid var(--red);
      transition: background .2s, color .2s, border-color .2s;
    }
    .drvsvc-btn:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }
    .drvsvc-btn:focus-visible { outline: 3px solid #25d366; outline-offset: 3px; }
    .drvsvc-btn svg { width: 18px; height: 18px; flex: none; }
    .drvsvc-plan--top .drvsvc-btn { background: #fff; color: var(--red); border-color: #fff; }
    .drvsvc-plan--top .drvsvc-btn:hover { background: var(--red-soft); color: var(--red-dark); }

    .drvsvc-foot { margin: 20px 0 0; font-size: 13px; color: var(--ds-muted); }

    @media (max-width: 991px) {
      .drvsvc { padding: 60px 18px; }
      .drvsvc-wrap { grid-template-columns: 1fr; gap: 32px; }
      .drvsvc-img { aspect-ratio: 16 / 9; }
    }
    @media (max-width: 575px) {
      .drvsvc { padding: 48px 16px; }
      .drvsvc-plans { grid-template-columns: 1fr; gap: 14px; }
      .drvsvc-plan { padding: 22px 18px; }
      .drvsvc-price strong { font-size: 36px; }
      .drvsvc-btn { width: 100%; }
    }
    @media (prefers-reduced-motion: reduce) { .drvsvc-btn { transition: none; } }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{font-family:DM Mono,monospace;color:var(--black);background:var(--white);overflow-x:hidden;}
  h1,h2,h3,.disp{
    font-family:'Manrope',sans-serif;font-weight:800;
    line-height:0.96;letter-spacing:-0.01em;text-transform:uppercase;
  }
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
  .btn{
    display:inline-flex;align-items:center;gap:10px;font-family:DM Mono,monospace;
    font-weight:700;font-size:12px;letter-spacing:.07em;text-transform:uppercase;
    padding:15px 26px;border-radius:2px;cursor:pointer;border:none;
    transition:transform .15s ease, background .2s ease;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-red{background:var(--red-btn);color:#fff;}
  .btn-red:hover{background:#9c2124;}
  .btn-outline{background:transparent;border:1.5px solid var(--black);color:var(--black);}
  .btn-outline.light{border-color:#fff;color:#fff;}
  .btn-ghost{background:transparent;color:var(--black);padding:0;font-weight:700;font-size:12px;letter-spacing:.07em;border-bottom:1.5px solid var(--black);border-radius:0;text-transform:uppercase;}
  .eyebrow{font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--gray);text-transform:uppercase;margin-bottom:18px;}

  /* ===== TOP NAV (over hero, transparent) ===== */
    
.d-flex {
    width: 1200px;
    max-width:var(--maxw);margin:0 auto;
    margin: auto;
    display:flex;align-items:center;justify-content:space-between;
}
  .topnav{
    position:fixed;top:0;left:0;right:0;z-index:50;
    display:flex;align-items:center;justify-content:space-between;
    padding:0px 32px;
    background:#f7f8f3;box-shadow:none;
    transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
  }
  .topnav.scrolled{
        background: rgb(255 255 255 / 92%);backdrop-filter:blur(6px);
    box-shadow:0 6px 24px rgba(0,0,0,.25);
  }
  .topnav.scrolled .nav-burger{border-color:rgba(255,255,255,.6);}
  .logo{display:flex;align-items:center;gap:12px;width:100px;height: 80px;}
  .logo img{width:100%;height:100%;object-fit:cover;}
  .logo-text .top{font-family:'Archivo Black';font-size:13px;color:#fff;letter-spacing:.02em;}
  .logo-text .sub{font-size:9px;letter-spacing:.1em;color:rgba(255,255,255,.55);text-transform:uppercase;margin-top:2px;}
  .nav-links{display:flex;gap:34px;}
  .nav-links a{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color: rgb(0 0 0 / 75%);}
  .nav-links a:hover{color:#c42532;}
  .nav-actions{display:flex;align-items:center;gap:22px;}
  .nav-actions a{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color: rgb(0 0 0 / 75%);}
  .nav-enquire{border:1px solid rgb(0 0 0 / 75%);padding:9px 16px;display:flex;align-items:center;gap:6px;}

  /* ===== MOBILE HEADER ===== */
  .nav-burger{
    display:none;flex-direction:column;justify-content:center;gap:5px;
    width:40px;height:40px;border:1px solid rgba(255,255,255,.4);border-radius:2px;
    background:transparent;cursor:pointer;z-index:40;position:relative;
  }
  .nav-burger span{display:block;width:18px;height:2px;background:#fff;margin:0 auto;transition:transform .25s ease, opacity .25s ease;}
  .nav-burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-burger.active span:nth-child(2){opacity:0;}
  .nav-burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .mobile-menu{
    display:none;position:fixed;top:0;right:0;height:100%;width:78%;max-width:320px;
    background:var(--dark);z-index:35;padding:100px 32px 32px;
    flex-direction:column;gap:6px;
    transform:translateX(100%);transition:transform .3s ease;
    box-shadow:-10px 0 30px rgba(0,0,0,.4);
  }
  .mobile-menu.open{transform:translateX(0);}
  .mobile-menu a{
    color:#fff;font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
    padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);
  }
  .mobile-menu .mm-actions{margin-top:22px;display:flex;flex-direction:column;gap:12px;}
  .mobile-menu .mm-actions a{border-bottom:none;padding:0;}
  .mobile-menu .mm-enquire{background:var(--red-btn);color:#fff;text-align:center;padding:14px;border-radius:2px;}
  .mobile-menu .mm-call{border:1px solid rgba(255,255,255,.4);text-align:center;padding:14px;border-radius:2px;}
  .nav-overlay{
    display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:30;
    opacity:0;transition:opacity .3s ease;
  }
  .nav-overlay.open{display:block;opacity:1;}

  /* ===== HERO ===== */
  .hero-h{
    position:relative;color:#fff;min-height:730px;
    background:
      linear-gradient(100deg, rgba(6,6,8,.94) 0%, rgba(8,9,11,.55) 42%, rgba(8,9,11,.35) 100%),
      url('img/BANNER IMAGE (1).webp');
    background-size:cover;background-position:75% 35%;
    display:flex;flex-direction:column;justify-content:flex-end;
  }
  .hero-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 32px;width:100%;}
  .hero-top-row{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.6);margin-bottom:14px;padding-top:120px;text-transform:uppercase;}
  .hero-eyebrow{font-size:12px;letter-spacing:.14em;color:var(--yellow);font-weight:700;margin-bottom:20px;text-transform:uppercase;}
  .hero-h h1{font-size:clamp(46px,8.4vw,100px);}
  .hero-h h1 .accent{color:var(--yellow);}
  .hero-cta{display:flex;gap:16px;margin:36px 0 44px;flex-wrap:wrap;}
  .hero-strip{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.18);}
  .hero-strip .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;padding:22px 32px;}
  .hero-strip-links{display:flex;gap:40px;flex-wrap:wrap;}
  .hero-strip-links a{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;display:flex;align-items:center;gap:8px;}
  .hero-strip-links .n{color:var(--red);}
  .hero-scroll{font-size:12px;color:rgba(255,255,255,.5);letter-spacing:.05em;font-style:italic;}

  section{padding:110px 0;}
  .split{display:grid;grid-template-columns:1fr 2.1fr;gap:60px;}

  /* ===== ABOUT ===== */
  .about{background:var(--cream);}
  .about h2{font-size:clamp(30px,4.3vw,50px);}
  .about h2 .line2{color:var(--red);}
  .about-body{display:flex;flex-direction:column;}
  .about-foot{display:flex;justify-content:space-between;align-items:flex-end;border-top:1px solid var(--line);margin-top:36px;padding-top:26px;gap:30px;}
  .about-foot p{color:var(--gray);font-size:15px;line-height:1.7;max-width:420px;}
  .about-foot .btn-ghost{white-space:nowrap;}

  /* ===== SERVICE INDEX ===== */
  .index-title h2{font-size:clamp(32px,4.8vw,56px);}
  .index-title .hl{color:var(--red);}
  .index-list{border-top:1px solid var(--line);margin-top:8px;}
  .index-row{display:grid;grid-template-columns:44px 220px 1fr 28px;gap:20px;align-items:center;padding:28px 0;border-bottom:1px solid var(--line);transition:background .2s ease;}
  .index-row:hover{background:var(--cream);}
  .index-num{font-family:'Archivo Black';font-size:12px;color:var(--red);}
  .index-name{font-family:'Archivo Black';font-size:21px;text-transform:uppercase;}
  .index-desc{color:var(--gray);font-size:14px;max-width:480px;}
  .index-arrow{font-size:19px;justify-self:end;transition:transform .2s ease;}
  .index-row:hover .index-arrow{transform:translate(4px,-4px);}

  /* ===== SERVICE BLOCKS ===== */
  .service-block .wrap{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;min-height:480px;}
  .service-visual{position:relative;overflow:hidden;}
  .service-visual img{width:100%;height:100%;object-fit:cover;}
  .service-content{padding:64px 64px;display:flex;flex-direction:column;justify-content:center;}
  .service-content .tag{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--red);margin-bottom:18px;text-transform:uppercase;}
  .service-content h2{font-size:clamp(28px,3.4vw,44px);margin-bottom:20px;}
  .service-content p{color:var(--gray);font-size:15px;line-height:1.7;max-width:400px;margin-bottom:24px;}
  .feature-row{display:flex;flex-wrap:wrap;gap:26px;border-top:1px solid var(--line);padding-top:20px;margin-bottom:24px;}
  .feature-row span{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gray);}
  .service-block.dark{background:var(--black);color:#fff;}
  .service-block.dark p{color:rgba(255,255,255,.55);}
  .service-block.dark .feature-row{border-color:rgba(255,255,255,.15);}
  .service-block.dark .feature-row span{color:rgba(255,255,255,.6);}
  .service-block.dark .btn-ghost{color:#fff;border-color:#fff;}
  .service-block.cream{background:var(--white);}

  /* ===== ONE BUSINESS FOUR SOLUTIONS ===== */
  .solutions{background:var(--cream);}
  .solutions .wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
  .solutions h2{font-size:clamp(30px,4.4vw,52px);}
  .solutions h2 .hl{color:var(--red);}
  .tabs{display:flex;flex-wrap:wrap;gap:34px;border-top:1px solid var(--line);margin:28px 0 22px;padding-top:22px;}
  .tab{font-family:'Archivo Black';font-size:15px;letter-spacing:.01em;color:#c9c6ba;text-transform:uppercase;}
  .tab.active{color:var(--black);}
  .solutions p{max-width:440px;color:var(--gray);font-size:15px;line-height:1.75;}
  .solutions-visual{border-radius:2px;overflow:hidden;}
  .solutions-visual img{width:100%;height:420px;object-fit:cover;}

  /* ===== HOW IT WORKS (YELLOW) ===== */
  .how{background:var(--yellow);color:#161300;}
  .how .eyebrow{color:rgba(20,17,0,.55);}
  .how h2{font-size:clamp(32px,5vw,58px);}
  .how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:56px;border-top:1px solid rgba(20,17,0,.25);padding-top:26px;}
  .how-step .num{font-family:'Archivo Black';font-size:12px;color:rgba(20,17,0,.5);margin-bottom:10px;}
  .how-step .lbl{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:1.3;}

  /* ===== TESTIMONIAL ===== */
  .testi{background:var(--white);}
  .testi blockquote{font-family:'Archivo Black';font-size:clamp(24px,3.6vw,42px);max-width:820px;line-height:1.2;text-transform:uppercase;margin-bottom:18px;}
  .testi cite{font-style:normal;color:var(--gray);font-size:12px;letter-spacing:.04em;text-transform:uppercase;}

  /* ===== VISIT US ===== */
  .visit .wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:center;}
  .visit h2{font-size:clamp(30px,4.3vw,50px);}
  .visit h2 .hl{color:var(--red);}
  .visit-name{font-family:'Archivo Black';font-size:14px;letter-spacing:.02em;margin:26px 0 14px;}
  .visit-addr{color:var(--gray);font-size:15px;line-height:1.7;margin-bottom:18px;}
  .visit-phones{font-size:14px;font-weight:600;margin-bottom:26px;}
  .map-box{height:340px;border-radius:2px;background:#dcd6c7;position:relative;overflow:hidden;}
  .map-box svg{position:absolute;inset:0;width:100%;height:100%;}
  .map-label{position:absolute;top:48%;left:50%;transform:translate(-50%,-100%);background:#fff;padding:6px 12px;font-size:11px;font-weight:700;letter-spacing:.02em;border-radius:2px;box-shadow:0 4px 10px rgba(0,0,0,.15);white-space:nowrap;text-align:center;line-height:1.4;}
  .map-caption{position:absolute;bottom:16px;left:20px;font-size:10px;letter-spacing:.1em;color:rgba(0,0,0,.4);text-transform:uppercase;}

  /* ===== FOOTER CTA ===== */
  .footer-cta{background:var(--black);color:#fff;}
  .footer-cta .eyebrow{color:rgba(255,255,255,.45);}
  .footer-cta h2{font-size:clamp(36px,6.4vw,76px);}
  .footer-cta h2 .hl{color:var(--yellow);}
  .footer-cta .wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:end;}
  .fc-tabs{display:flex;flex-wrap:wrap;gap:34px;border-top:1px solid rgba(255,255,255,.2);margin-top:30px;padding-top:20px;}
  .fc-tabs span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);}
  .fc-actions{display:flex;flex-direction:column;gap:16px;align-items:flex-start;}
  .fc-actions .call-link{color:#e8635f;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}

  /* ===== FOOTER ===== */
  footer{background:var(--white);border-top:1px solid var(--line);}
  .footer-main{padding:70px 0 40px;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;}
  .f-logo{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
  .f-logo img{width:150px;border-radius:6px;}
  .f-logo .name{font-family:'Archivo Black';font-size:15px;}
  .f-tagline{font-size:13px;color:var(--gray);margin-top:4px;}
  .f-col h4{font-size:10px;letter-spacing:.14em;color:#b9b6ab;text-transform:uppercase;margin-bottom:18px;}
  .f-col a, .f-col p{display:block;font-size:14px;margin-bottom:10px;color:#4a4a46;}
  .f-col a:hover{color:var(--black);}
  .bottom-bar{border-top:1px solid var(--line);padding:22px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--gray);}
  .bottom-bar a{margin-left:18px;color:var(--gray);}

  /* ===== FLOATING BUTTON ===== */
  .floating-btn{
    position:fixed;left:22px;bottom:22px;z-index:60;background:var(--red-btn);color:#fff;
    border-radius:28px;padding:13px 20px;font-size:12px;font-weight:700;letter-spacing:.04em;
    display:flex;align-items:center;gap:9px;box-shadow:0 10px 24px rgba(195,40,36,.4);text-transform:uppercase;
  }

  @media (max-width:960px){
    .split, .visit .wrap, .footer-cta .wrap, .solutions .wrap{grid-template-columns:1fr;}
    .service-block .wrap{grid-template-columns:1fr;}
    .service-visual{min-height:280px;}
    .how-grid{grid-template-columns:1fr 1fr;}
    .footer-main{grid-template-columns:1fr;}
    .nav-links{display:none;}
    .nav-burger{display:flex;}
    .mobile-menu{display:flex;}
    .nav-actions{display:none;}
    .hero-top-row{padding-top:100px;}
    section{padding:64px 0;}
    .index-row{grid-template-columns:34px 1fr 24px;}
    .index-desc{grid-column:2/3;grid-row:2;margin-top:6px;}
  }
  @media (max-width:560px){
    .how-grid{grid-template-columns:1fr;}
    .hero-strip .wrap{flex-direction:column;gap:14px;align-items:flex-start;}
  }

    /* =====================================================================
     DRIVER SERVICE PAGE — INTERNAL CSS (only what style.css does not provide)
     ===================================================================== */

  /* ---- 1. Header adjustment (header.php has the dark home hero) ------- */
.hero{
    padding:0;                 /* style.css gives every <section> 110px padding */
    min-height:0;height:81px;
    background:var(--cream);
    border-bottom:1px solid var(--line);
  }
  .hero .hero-inner,
  .hero .hero-strip{display:none;}
  .nav-burger,
  .topnav.scrolled .nav-burger{border-color:rgba(0,0,0,.35);}
  .nav-burger span{background:var(--black);}
  /* ---- 2. Helpers ------------------------------------------------------ */
  .dv-h2{font-size:clamp(34px,4.6vw,62px);line-height:.93;letter-spacing:-.045em;}
  .dv-red{color:var(--red);}
  .dv-yellow{color:var(--yellow);}
  .dv-p{
    font-family:'Manrope',sans-serif;font-weight:500;
    font-size:15px;line-height:1.9;color:var(--gray);
  }
  .dv-mono{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;}

  /* ---- 3. Hero --------------------------------------------------------- */
  .dv-hero{background:var(--cream);padding:110px 0 90px;}
  .dv-hero .eyebrow{margin-bottom:14px;}
  .dv-hero h1{font-size:clamp(46px,8.2vw,118px);line-height:.9;letter-spacing:-.055em;}
  .dv-hero-grid{display:grid;grid-template-columns:2.2fr 1fr;gap:40px;align-items:center;margin-bottom:60px;}
  .dv-hero-lead{max-width:300px;}
  /* Optional better photo: save as img/driver-hero.jpg (falls back to service-driver.jpg) */
  .dv-hero-img{
    width:100%;aspect-ratio:2.1/1;min-height:240px;border-radius:2px;
    background:
      url('img/DRIVER service image.webp') center/cover no-repeat,
      url('img/DRIVER service image.webp') center/cover no-repeat,
      linear-gradient(180deg,#8a7a68,#2b2426);
  }

  /* ---- 4. The service -------------------------------------------------- */
  .dv-service{background:var(--white);padding:110px 0 120px;}
  .dv-service .dv-h2{font-size:clamp(32px,4vw,56px);margin-bottom:34px;}
  .dv-service .dv-p{max-width:580px;}
  .dv-tags{
    display:flex;flex-wrap:wrap;gap:16px 40px;
    border-top:1px solid var(--line);margin-top:44px;padding-top:22px;
  }

  /* ---- 5. What matters (dark) ------------------------------------------ */
  .dv-matters{background:var(--dark);color:#fff;padding:110px 0;}
  .dv-matters .eyebrow{color:rgba(255,255,255,.45);}
  .dv-matters .dv-h2{margin-top:18px;}
  .dv-matters .split{align-items:start;}
  .dv-list{border-top:1px solid rgba(255,255,255,.14);}
  .dv-item{
    display:grid;grid-template-columns:34px 1fr;gap:6px 0;
    padding:26px 0;border-bottom:1px solid rgba(255,255,255,.14);
  }
  .dv-item-num{font-size:10px;font-weight:500;letter-spacing:.08em;color:var(--yellow);padding-top:4px;}
  .dv-item h3{
    font-size:17px;letter-spacing:-.02em;line-height:1.1;margin-bottom:8px;
  }
  .dv-item p{font-family:'Manrope',sans-serif;font-weight:500;font-size:14px;line-height:1.7;color:rgba(255,255,255,.6);max-width:420px;}

  /* ---- 6. How it works (yellow) ---------------------------------------- */
  .dv-how{background:var(--yellow);color:#161300;padding:100px 0 110px;}
  .dv-how .eyebrow{color:rgba(20,17,0,.55);}
  .dv-how-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:30px;
    border-top:1px solid rgba(20,17,0,.3);margin-top:64px;padding-top:22px;
  }
  .dv-step-num{font-size:10px;font-weight:500;letter-spacing:.08em;color:rgba(20,17,0,.55);margin-bottom:14px;}
  .dv-step h3{font-size:13px;letter-spacing:.01em;line-height:1.25;margin-bottom:8px;}
  .dv-step p{font-family:'Manrope',sans-serif;font-weight:500;font-size:13px;line-height:1.6;color:rgba(20,17,0,.65);max-width:220px;}

  /* ---- 7. Local relevance ---------------------------------------------- */
  .dv-local{background:var(--white);padding:110px 0 120px;}
  .dv-local .dv-h2{font-size:clamp(32px,4.2vw,58px);margin-bottom:30px;}
  .dv-local .dv-p{max-width:560px;margin-bottom:34px;}
  .dv-links{display:flex;flex-wrap:wrap;gap:16px 34px;}
  .dv-link{display:inline-flex;align-items:center;gap:10px;color:var(--black);}
  .dv-link span{color:var(--red);transition:transform .2s ease;}
  .dv-link:hover span{transform:translate(3px,-3px);}

  /* ---- 8. FAQ ---------------------------------------------------------- */
  .dv-faq{background:var(--cream);padding:110px 0 120px;}
  .dv-q{border-bottom:1px solid var(--line);}
  .dv-q:first-child{border-top:1px solid var(--line);}
  .dv-q summary{
    list-style:none;cursor:pointer;display:grid;grid-template-columns:34px 1fr 24px;
    align-items:baseline;padding:22px 0;
    font-family:'Manrope',sans-serif;font-weight:600;font-size:15px;color:var(--black);
  }
  .dv-q summary::-webkit-details-marker{display:none;}
  .dv-q summary::after{content:"+";justify-self:end;color:var(--gray);font-size:18px;}
  .dv-q[open] summary::after{content:"\2212";}
  .dv-q summary:focus-visible{outline:2px solid var(--red);outline-offset:2px;}
  .dv-q .dv-item-num{color:var(--red);}
  .dv-a{padding:0 24px 24px 34px;max-width:680px;}
  .dv-a.dv-p{font-size:14px;line-height:1.8;color:var(--black);}
  .dv-faq-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:44px;}

  /* ---- 9. Related (dark) ----------------------------------------------- */
  .dv-related{background:var(--dark);color:#fff;padding:90px 0;}
  .dv-related .eyebrow{color:rgba(255,255,255,.45);}
  .dv-related-grid{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap;}
  .dv-related .dv-h2{font-size:clamp(36px,5vw,66px);}
  .dv-related-links{display:flex;flex-direction:column;gap:16px;}
  .dv-related-links a{color:#fff;display:flex;justify-content:space-between;gap:26px;align-items:center;}
  .dv-related-links a span{color:#e8635f;transition:transform .2s ease;}
  .dv-related-links a:hover span{transform:translate(3px,-3px);}

  /* ---- 10. Responsive -------------------------------------------------- */
  @media (max-width:960px){
    .dv-hero{padding:90px 0 64px;}
    .dv-hero-grid{grid-template-columns:1fr;gap:24px;margin-bottom:40px;}
    .dv-hero-img{aspect-ratio:1.5/1;}
    .dv-service,.dv-matters,.dv-local,.dv-faq{padding:72px 0;}
    .dv-how{padding:72px 0;}
    .dv-how-grid{grid-template-columns:1fr 1fr;margin-top:44px;}
    .dv-related{padding:64px 0;}
    .dv-related-grid{flex-direction:column;align-items:flex-start;}
  }
  @media (max-width:560px){
    .dv-how-grid{grid-template-columns:1fr;}
    .dv-step p{max-width:none;}
  }
  /* =====================================================================
     CAR SALE & PURCHASE PAGE — INTERNAL CSS (only what style.css does not provide)
     ===================================================================== */

  /* ---- 1. Header adjustment (header.php has the dark home hero) ------- */

  /* ---- 2. Helpers ------------------------------------------------------ */
  .cs-h2{font-size:clamp(34px,4.6vw,62px);line-height:.93;letter-spacing:-.045em;}
  .cs-red{color:var(--red);}
  .cs-yellow{color:var(--yellow);}
  .cs-p{
    font-family:'Manrope',sans-serif;font-weight:500;
    font-size:15px;line-height:1.9;color:var(--gray);
  }
  .cs-mono{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;}

  /* ---- 3. Hero --------------------------------------------------------- */
  .cs-hero{background:var(--cream);padding:110px 0 90px;}
  .cs-hero .eyebrow{margin-bottom:14px;}
  .cs-hero h1{font-size:clamp(46px,8.2vw,118px);line-height:.9;letter-spacing:-.055em;}
  .cs-hero-grid{display:grid;grid-template-columns:2.2fr 1fr;gap:40px;align-items:center;margin-bottom:60px;}
  .cs-hero-lead{max-width:300px;}
  /* Optional better photo: save as img/sale-hero.jpg (falls back to service-sale.jpg) */
  .cs-hero-img{
    width:100%;aspect-ratio:2.1/1;min-height:240px;border-radius:2px;
    background:
      url('img/car sale and purchase image.webp') center/cover no-repeat,
      url('img/car sale and purchase image.webp') center/cover no-repeat,
      linear-gradient(180deg,#8a7a68,#2b2426);
  }

  /* ---- 4. The service -------------------------------------------------- */
  .cs-service{background:var(--white);padding:110px 0 120px;}
  .cs-service .cs-h2{font-size:clamp(32px,4vw,56px);margin-bottom:34px;}
  .cs-service .cs-p{max-width:580px;}
  .cs-tags{
    display:flex;flex-wrap:wrap;gap:16px 40px;
    border-top:1px solid var(--line);margin-top:44px;padding-top:22px;
  }

  /* ---- 5. What matters (dark) ------------------------------------------ */
  .cs-matters{background:var(--dark);color:#fff;padding:110px 0;}
  .cs-matters .eyebrow{color:rgba(255,255,255,.45);}
  .cs-matters .cs-h2{margin-top:18px;}
  .cs-matters .split{align-items:start;}
  .cs-list{border-top:1px solid rgba(255,255,255,.14);}
  .cs-item{
    display:grid;grid-template-columns:34px 1fr;gap:6px 0;
    padding:26px 0;border-bottom:1px solid rgba(255,255,255,.14);
  }
  .cs-item-num{font-size:10px;font-weight:500;letter-spacing:.08em;color:var(--yellow);padding-top:4px;}
  .cs-item h3{
    font-size:17px;letter-spacing:-.02em;line-height:1.1;margin-bottom:8px;
  }
  .cs-item p{font-family:'Manrope',sans-serif;font-weight:500;font-size:14px;line-height:1.7;color:rgba(255,255,255,.6);max-width:420px;}

  /* ---- 6. How it works (yellow) ---------------------------------------- */
  .cs-how{background:var(--yellow);color:#161300;padding:100px 0 110px;}
  .cs-how .eyebrow{color:rgba(20,17,0,.55);}
  .cs-how-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:30px;
    border-top:1px solid rgba(20,17,0,.3);margin-top:64px;padding-top:22px;
  }
  .cs-step-num{font-size:10px;font-weight:500;letter-spacing:.08em;color:rgba(20,17,0,.55);margin-bottom:14px;}
  .cs-step h3{font-size:13px;letter-spacing:.01em;line-height:1.25;margin-bottom:8px;}
  .cs-step p{font-family:'Manrope',sans-serif;font-weight:500;font-size:13px;line-height:1.6;color:rgba(20,17,0,.65);max-width:220px;}

  /* ---- 7. Local relevance ---------------------------------------------- */
  .cs-local{background:var(--white);padding:110px 0 120px;}
  .cs-local .cs-h2{font-size:clamp(32px,4.2vw,58px);margin-bottom:30px;}
  .cs-local .cs-p{max-width:560px;margin-bottom:34px;}
  .cs-links{display:flex;flex-wrap:wrap;gap:16px 34px;}
  .cs-link{display:inline-flex;align-items:center;gap:10px;color:var(--black);}
  .cs-link span{color:var(--red);transition:transform .2s ease;}
  .cs-link:hover span{transform:translate(3px,-3px);}

  /* ---- 8. FAQ ---------------------------------------------------------- */
  .cs-faq{background:var(--cream);padding:110px 0 120px;}
  .cs-q{border-bottom:1px solid var(--line);}
  .cs-q:first-child{border-top:1px solid var(--line);}
  .cs-q summary{
    list-style:none;cursor:pointer;display:grid;grid-template-columns:34px 1fr 24px;
    align-items:baseline;padding:22px 0;
    font-family:'Manrope',sans-serif;font-weight:600;font-size:15px;color:var(--black);
  }
  .cs-q summary::-webkit-details-marker{display:none;}
  .cs-q summary::after{content:"+";justify-self:end;color:var(--gray);font-size:18px;}
  .cs-q[open] summary::after{content:"\2212";}
  .cs-q summary:focus-visible{outline:2px solid var(--red);outline-offset:2px;}
  .cs-q .cs-item-num{color:var(--red);}
  .cs-a{padding:0 24px 24px 34px;max-width:680px;}
  .cs-a.cs-p{font-size:14px;line-height:1.8;color:var(--black);}
  .cs-faq-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:44px;}

  /* ---- 9. Related (dark) ----------------------------------------------- */
  .cs-related{background:var(--dark);color:#fff;padding:90px 0;}
  .cs-related .eyebrow{color:rgba(255,255,255,.45);}
  .cs-related-grid{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap;}
  .cs-related .cs-h2{font-size:clamp(36px,5vw,66px);}
  .cs-related-links{display:flex;flex-direction:column;gap:16px;}
  .cs-related-links a{color:#fff;display:flex;justify-content:space-between;gap:26px;align-items:center;}
  .cs-related-links a span{color:#e8635f;transition:transform .2s ease;}
  .cs-related-links a:hover span{transform:translate(3px,-3px);}

  /* ---- 10. Responsive -------------------------------------------------- */
  @media (max-width:960px){
    .cs-hero{padding:90px 0 64px;}
    .cs-hero-grid{grid-template-columns:1fr;gap:24px;margin-bottom:40px;}
    .cs-hero-img{aspect-ratio:1.5/1;}
    .cs-service,.cs-matters,.cs-local,.cs-faq{padding:72px 0;}
    .cs-how{padding:72px 0;}
    .cs-how-grid{grid-template-columns:1fr 1fr;margin-top:44px;}
    .cs-related{padding:64px 0;}
    .cs-related-grid{flex-direction:column;align-items:flex-start;}
  }
  @media (max-width:560px){
    .cs-how-grid{grid-template-columns:1fr;}
    .cs-step p{max-width:none;}
  }


  /* =====================================================================
     CAR DRIVING SCHOOL PAGE — INTERNAL CSS (only what style.css does not provide)
     ===================================================================== */

  /* ---- 1. Header adjustment (header.php has the dark home hero) ------- */


  /* ---- 2. Helpers ------------------------------------------------------ */
  .ds-h2{font-size:clamp(34px,4.6vw,62px);line-height:.93;letter-spacing:-.045em;}
  .ds-red{color:var(--red);}
  .ds-yellow{color:var(--yellow);}
  .ds-p{
    font-family:'Manrope',sans-serif;font-weight:500;
    font-size:15px;line-height:1.9;color:var(--gray);
  }
  .ds-mono{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;}

  /* ---- 3. Hero --------------------------------------------------------- */
  .ds-hero{background:var(--cream);padding:110px 0 90px;}
  .ds-hero .eyebrow{margin-bottom:14px;}
  .ds-hero h1{font-size:clamp(46px,8.2vw,118px);line-height:.9;letter-spacing:-.055em;}
  .ds-hero-grid{display:grid;grid-template-columns:2.2fr 1fr;gap:40px;align-items:center;margin-bottom:60px;}
  .ds-hero-lead{max-width:300px;}
  /* Optional better photo: save as img/school-hero.jpg (falls back to service-school.jpg) */
  .ds-hero-img{
    width:100%;aspect-ratio:2.1/1;min-height:240px;border-radius:2px;
    background:
      url('img/car driving school service image.webp') center/cover no-repeat,
      url('img/car driving school service image.webp') center/cover no-repeat,
      linear-gradient(180deg,#8a7a68,#2b2426);
  }

  /* ---- 4. The service -------------------------------------------------- */
  .ds-service{background:var(--white);padding:110px 0 120px;}
  .ds-service .ds-h2{font-size:clamp(32px,4vw,56px);margin-bottom:34px;}
  .ds-service .ds-p{max-width:580px;}
  .ds-tags{
    display:flex;flex-wrap:wrap;gap:16px 40px;
    border-top:1px solid var(--line);margin-top:44px;padding-top:22px;
  }

  /* ---- 5. What matters (dark) ------------------------------------------ */
  .ds-matters{background:var(--dark);color:#fff;padding:110px 0;}
  .ds-matters .eyebrow{color:rgba(255,255,255,.45);}
  .ds-matters .ds-h2{margin-top:18px;}
  .ds-matters .split{align-items:start;}
  .ds-list{border-top:1px solid rgba(255,255,255,.14);}
  .ds-item{
    display:grid;grid-template-columns:34px 1fr;gap:6px 0;
    padding:26px 0;border-bottom:1px solid rgba(255,255,255,.14);
  }
  .ds-item-num{font-size:10px;font-weight:500;letter-spacing:.08em;color:var(--yellow);padding-top:4px;}
  .ds-item h3{
    font-size:17px;letter-spacing:-.02em;line-height:1.1;margin-bottom:8px;
  }
  .ds-item p{font-family:'Manrope',sans-serif;font-weight:500;font-size:14px;line-height:1.7;color:rgba(255,255,255,.6);max-width:420px;}

  /* ---- 6. How it works (yellow) ---------------------------------------- */
  .ds-how{background:var(--yellow);color:#161300;padding:100px 0 110px;}
  .ds-how .eyebrow{color:rgba(20,17,0,.55);}
  .ds-how-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:30px;
    border-top:1px solid rgba(20,17,0,.3);margin-top:64px;padding-top:22px;
  }
  .ds-step-num{font-size:10px;font-weight:500;letter-spacing:.08em;color:rgba(20,17,0,.55);margin-bottom:14px;}
  .ds-step h3{font-size:13px;letter-spacing:.01em;line-height:1.25;margin-bottom:8px;}
  .ds-step p{font-family:'Manrope',sans-serif;font-weight:500;font-size:13px;line-height:1.6;color:rgba(20,17,0,.65);max-width:220px;}

  /* ---- 7. Local relevance ---------------------------------------------- */
  .ds-local{background:var(--white);padding:110px 0 120px;}
  .ds-local .ds-h2{font-size:clamp(32px,4.2vw,58px);margin-bottom:30px;}
  .ds-local .ds-p{max-width:560px;margin-bottom:34px;}
  .ds-links{display:flex;flex-wrap:wrap;gap:16px 34px;}
  .ds-link{display:inline-flex;align-items:center;gap:10px;color:var(--black);}
  .ds-link span{color:var(--red);transition:transform .2s ease;}
  .ds-link:hover span{transform:translate(3px,-3px);}

  /* ---- 8. FAQ ---------------------------------------------------------- */
  .ds-faq{background:var(--cream);padding:110px 0 120px;}
  .ds-q{border-bottom:1px solid var(--line);}
  .ds-q:first-child{border-top:1px solid var(--line);}
  .ds-q summary{
    list-style:none;cursor:pointer;display:grid;grid-template-columns:34px 1fr 24px;
    align-items:baseline;padding:22px 0;
    font-family:'Manrope',sans-serif;font-weight:600;font-size:15px;color:var(--black);
  }
  .ds-q summary::-webkit-details-marker{display:none;}
  .ds-q summary::after{content:"+";justify-self:end;color:var(--gray);font-size:18px;}
  .ds-q[open] summary::after{content:"\2212";}
  .ds-q summary:focus-visible{outline:2px solid var(--red);outline-offset:2px;}
  .ds-q .ds-item-num{color:var(--red);}
  .ds-a{padding:0 24px 24px 34px;max-width:680px;}
  .ds-a.ds-p{font-size:14px;line-height:1.8;color:var(--black);}
  .ds-faq-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:44px;}

  /* ---- 9. Related (dark) ----------------------------------------------- */
  .ds-related{background:var(--dark);color:#fff;padding:90px 0;}
  .ds-related .eyebrow{color:rgba(255,255,255,.45);}
  .ds-related-grid{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap;}
  .ds-related .ds-h2{font-size:clamp(36px,5vw,66px);}
  .ds-related-links{display:flex;flex-direction:column;gap:16px;}
  .ds-related-links a{color:#fff;display:flex;justify-content:space-between;gap:26px;align-items:center;}
  .ds-related-links a span{color:#e8635f;transition:transform .2s ease;}
  .ds-related-links a:hover span{transform:translate(3px,-3px);}

  /* ---- 10. Responsive -------------------------------------------------- */
  @media (max-width:960px){
    .ds-hero{padding:90px 0 64px;}
    .ds-hero-grid{grid-template-columns:1fr;gap:24px;margin-bottom:40px;}
    .ds-hero-img{aspect-ratio:1.5/1;}
    .ds-service,.ds-matters,.ds-local,.ds-faq{padding:72px 0;}
    .ds-how{padding:72px 0;}
    .ds-how-grid{grid-template-columns:1fr 1fr;margin-top:44px;}
    .ds-related{padding:64px 0;}
    .ds-related-grid{flex-direction:column;align-items:flex-start;}
  }
  @media (max-width:560px){
    .ds-how-grid{grid-template-columns:1fr;}
    .ds-step p{max-width:none;}
  }


  /* =====================================================================
     SERVICE PAGE — INTERNAL CSS (only what style.css does not provide)
     ===================================================================== */

  /* ---- 1. Header adjustment (header.php has the dark home hero) ------- */

  /* ---- 2. Helpers ------------------------------------------------------ */
  .cb-h2{font-size:clamp(34px,4.6vw,62px);line-height:.93;letter-spacing:-.045em;}
  .cb-red{color:var(--red);}
  .cb-yellow{color:var(--yellow);}
  .cb-p{
    font-family:'Manrope',sans-serif;font-weight:500;
    font-size:15px;line-height:1.9;color:var(--gray);
  }
  .cb-mono{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;}

  /* ---- 3. Hero --------------------------------------------------------- */
  .cb-hero{background:var(--cream);padding:110px 0 90px;}
  .cb-hero .eyebrow{margin-bottom:14px;}
  .cb-hero h1{font-size:clamp(46px,8.2vw,118px);line-height:.9;letter-spacing:-.055em;}
  .cb-hero-grid{display:grid;grid-template-columns:2.2fr 1fr;gap:40px;align-items:center;margin-bottom:60px;}
  .cb-hero-lead{max-width:300px;}
  /* Optional better photo: save as img/cab-hero.jpg (falls back to service-cab.jpg) */
  .cb-hero-img{
    width:100%;aspect-ratio:2.1/1;min-height:240px;border-radius:2px;
    background:
      url('img/cab service image.webp') center/cover no-repeat,
      url('img/cab service image.webp') center/cover no-repeat,
      linear-gradient(180deg,#8a7a68,#2b2426);
  }

  /* ---- 4. The service -------------------------------------------------- */
  .cb-service{background:var(--white);padding:110px 0 120px;}
  .cb-service .cb-h2{font-size:clamp(32px,4vw,56px);margin-bottom:34px;}
  .cb-service .cb-p{max-width:580px;}
  .cb-tags{
    display:flex;flex-wrap:wrap;gap:16px 40px;
    border-top:1px solid var(--line);margin-top:44px;padding-top:22px;
  }

  /* ---- 5. What matters (dark) ------------------------------------------ */
  .cb-matters{background:var(--dark);color:#fff;padding:110px 0;}
  .cb-matters .eyebrow{color:rgba(255,255,255,.45);}
  .cb-matters .cb-h2{margin-top:18px;}
  .cb-matters .split{align-items:start;}
  .cb-list{border-top:1px solid rgba(255,255,255,.14);}
  .cb-item{
    display:grid;grid-template-columns:34px 1fr;gap:6px 0;
    padding:26px 0;border-bottom:1px solid rgba(255,255,255,.14);
  }
  .cb-item-num{font-size:10px;font-weight:500;letter-spacing:.08em;color:var(--yellow);padding-top:4px;}
  .cb-item h3{
    font-size:17px;letter-spacing:-.02em;line-height:1.1;margin-bottom:8px;
  }
  .cb-item p{font-family:'Manrope',sans-serif;font-weight:500;font-size:14px;line-height:1.7;color:rgba(255,255,255,.6);max-width:420px;}

  /* ---- 6. How it works (yellow) ---------------------------------------- */
  .cb-how{background:var(--yellow);color:#161300;padding:100px 0 110px;}
  .cb-how .eyebrow{color:rgba(20,17,0,.55);}
  .cb-how-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:30px;
    border-top:1px solid rgba(20,17,0,.3);margin-top:64px;padding-top:22px;
  }
  .cb-step-num{font-size:10px;font-weight:500;letter-spacing:.08em;color:rgba(20,17,0,.55);margin-bottom:14px;}
  .cb-step h3{font-size:13px;letter-spacing:.01em;line-height:1.25;margin-bottom:8px;}
  .cb-step p{font-family:'Manrope',sans-serif;font-weight:500;font-size:13px;line-height:1.6;color:rgba(20,17,0,.65);max-width:220px;}

  /* ---- 7. Local relevance ---------------------------------------------- */
  .cb-local{background:var(--white);padding:110px 0 120px;}
  .cb-local .cb-h2{font-size:clamp(32px,4.2vw,58px);margin-bottom:30px;}
  .cb-local .cb-p{max-width:560px;margin-bottom:34px;}
  .cb-links{display:flex;flex-wrap:wrap;gap:16px 34px;}
  .cb-link{display:inline-flex;align-items:center;gap:10px;color:var(--black);}
  .cb-link span{color:var(--red);transition:transform .2s ease;}
  .cb-link:hover span{transform:translate(3px,-3px);}

  /* ---- 8. FAQ ---------------------------------------------------------- */
  .cb-faq{background:var(--cream);padding:110px 0 120px;}
  .cb-q{border-bottom:1px solid var(--line);}
  .cb-q:first-child{border-top:1px solid var(--line);}
  .cb-q summary{
    list-style:none;cursor:pointer;display:grid;grid-template-columns:34px 1fr 24px;
    align-items:baseline;padding:22px 0;
    font-family:'Manrope',sans-serif;font-weight:600;font-size:15px;color:var(--black);
  }
  .cb-q summary::-webkit-details-marker{display:none;}
  .cb-q summary::after{content:"+";justify-self:end;color:var(--gray);font-size:18px;}
  .cb-q[open] summary::after{content:"\2212";}
  .cb-q summary:focus-visible{outline:2px solid var(--red);outline-offset:2px;}
  .cb-q .cb-item-num{color:var(--red);}
  .cb-a{padding:0 24px 24px 34px;max-width:680px;}
  .cb-a.cb-p{font-size:14px;line-height:1.8;color:var(--black);}
  .cb-faq-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:44px;}

  /* ---- 9. Related (dark) ----------------------------------------------- */
  .cb-related{background:var(--dark);color:#fff;padding:90px 0;}
  .cb-related .eyebrow{color:rgba(255,255,255,.45);}
  .cb-related-grid{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap;}
  .cb-related .cb-h2{font-size:clamp(36px,5vw,66px);}
  .cb-related-links{display:flex;flex-direction:column;gap:16px;}
  .cb-related-links a{color:#fff;display:flex;justify-content:space-between;gap:26px;align-items:center;}
  .cb-related-links a span{color:#e8635f;transition:transform .2s ease;}
  .cb-related-links a:hover span{transform:translate(3px,-3px);}

  /* ---- 10. Responsive -------------------------------------------------- */
  @media (max-width:960px){
    .cb-hero{padding:90px 0 64px;}
    .cb-hero-grid{grid-template-columns:1fr;gap:24px;margin-bottom:40px;}
    .cb-hero-img{aspect-ratio:1.5/1;}
    .cb-service,.cb-matters,.cb-local,.cb-faq{padding:72px 0;}
    .cb-how{padding:72px 0;}
    .cb-how-grid{grid-template-columns:1fr 1fr;margin-top:44px;}
    .cb-related{padding:64px 0;}
    .cb-related-grid{flex-direction:column;align-items:flex-start;}
  }
  @media (max-width:560px){
    .cb-how-grid{grid-template-columns:1fr;}
    .cb-step p{max-width:none;}
  }
  /* =====================================================================
     ABOUT PAGE — INTERNAL CSS
     Only what style.css does not already provide.
     ===================================================================== */

  /* ---- 1. Header adjustment -------------------------------------------
     header.php ships with the big dark home-page hero. On this page we
     keep only the navbar and turn that block into a slim light strip,
     so header.php itself stays untouched. */


  /* ---- 2. Shared helpers for this page ---------------------------------- */
  .ab-h2{
    font-size:clamp(36px,4.8vw,64px);
    line-height:.93;
    letter-spacing:-.045em;
  }
  .ab-red{color:var(--red);}
  .ab-yellow{color:var(--yellow);}
  .ab-p{
    font-family:'Manrope',sans-serif;font-weight:500;
    font-size:15px;line-height:1.9;color:var(--gray);
  }

  /* ---- 3. Hero ---------------------------------------------------------- */
  .ab-hero{background:var(--cream);padding:110px 0 90px;}
  .ab-hero .eyebrow{margin-bottom:14px;}
  .ab-hero h1{
    font-size:clamp(46px,7.2vw,104px);
    line-height:.9;
    letter-spacing:-.055em;
  }
  .ab-hero-grid{
    display:grid;grid-template-columns:1.35fr 1fr;gap:40px;align-items:end;
    margin-bottom:64px;
  }
  .ab-hero-lead{max-width:340px;padding-bottom:10px;}

  /* Placeholder: drop your photo at img/about-hero.jpg.
     Until then the dusk gradient below is shown. */
  .ab-hero-img{
    width:100%;aspect-ratio:2.1/1;min-height:240px;border-radius:2px;
    background:
      url('img/BANNER IMAGE (1).webp') center/cover no-repeat,
      linear-gradient(180deg,#232634 0%,#5b4a4a 38%,#2b2426 58%,#0d0e12 100%);
  }

  /* ---- 4. Who we are ---------------------------------------------------- */
  .ab-who{background:var(--white);padding:120px 0 130px;}
  .ab-who .ab-p{max-width:560px;margin-top:22px;}
  .ab-who .ab-h2{margin-bottom:34px;}

  /* ---- 5. Our approach (dark) ------------------------------------------- */
  .ab-approach{background:var(--dark);color:#fff;padding:120px 0;}
  .ab-approach .eyebrow{color:rgba(255,255,255,.45);}
  .ab-approach-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
  }
  .ab-approach .ab-p{color:rgba(255,255,255,.62);margin-bottom:18px;max-width:560px;}
  .ab-steps{
    list-style:none;display:grid;grid-template-columns:1fr 1.4fr;gap:16px 40px;
    border-top:1px solid rgba(255,255,255,.18);margin-top:38px;padding-top:22px;
  }
  .ab-steps li{
    font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
    color:rgba(255,255,255,.75);
  }

  /* ---- 6. Four services ------------------------------------------------- */
  .ab-services{background:var(--cream);padding:110px 0 100px;}
  .ab-services .ab-h2{margin-bottom:64px;}
  .ab-svc-grid{
    display:grid;grid-template-columns:repeat(4,1fr);
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  }
  .ab-svc{
    display:flex;flex-direction:column;min-height:230px;
    padding:30px 26px 30px;border-right:1px solid var(--line);
    transition:background .2s ease;
  }
  .ab-svc:first-child{padding-left:0;}
  .ab-svc:hover{background:var(--white);}
  .ab-svc:first-child:hover{background:transparent;}
  .ab-svc-num{font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--red);margin-bottom:34px;}
  .ab-svc-name{
    font-family:'Manrope',sans-serif;font-weight:800;font-size:18px;
    letter-spacing:-.01em;text-transform:uppercase;margin-bottom:12px;
  }
  .ab-svc-desc{
    font-family:'Manrope',sans-serif;font-weight:500;
    font-size:13px;line-height:1.7;color:var(--gray);
  }
  .ab-svc-arrow{margin-top:auto;padding-top:20px;font-size:17px;transition:transform .2s ease;}
  .ab-svc:hover .ab-svc-arrow{transform:translate(4px,-4px);}

  /* ---- 7. Local presence ------------------------------------------------ */
  .ab-local{background:#f1eee7;padding:120px 0 130px;}
  .ab-local .ab-h2{font-size:clamp(32px,4vw,52px);margin-bottom:30px;}
  .ab-local .ab-p{max-width:520px;margin-bottom:34px;}

  /* ---- 8. Lets talk (red CTA) ------------------------------------------- */
  .ab-cta{background:var(--red);color:#fff;padding:100px 0;}
  .ab-cta .eyebrow{color:rgba(255,255,255,.75);}
  .ab-cta-grid{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;}
  .ab-cta .ab-h2{font-size:clamp(44px,6vw,76px);}
  .ab-cta-btn{
    display:inline-flex;align-items:center;gap:10px;
    font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
    color:#fff;border:1px solid rgba(255,255,255,.85);padding:15px 24px;border-radius:2px;
    transition:background .2s ease,color .2s ease,transform .15s ease;
  }
  .ab-cta-btn:hover{background:#fff;color:var(--red);transform:translateY(-2px);}

  /* ---- 9. Responsive (same breakpoints as style.css) -------------------- */
  @media (max-width:960px){
    .hero{height:81px;}
    .ab-hero{padding:90px 0 64px;}
    .ab-hero-grid{grid-template-columns:1fr;gap:26px;margin-bottom:40px;}
    .ab-hero-img{aspect-ratio:1.5/1;}
    .ab-who,.ab-approach,.ab-local{padding:72px 0;}
    .ab-services{padding:72px 0;}
    .ab-services .ab-h2{margin-bottom:40px;}
    .ab-cta{padding:72px 0;}
    .ab-approach-grid{grid-template-columns:1fr;gap:36px;}
    .ab-svc-grid{grid-template-columns:1fr 1fr;}
    .ab-svc:nth-child(odd){padding-left:0;}
    .ab-svc:nth-child(even){border-right:0;}
    .ab-svc:nth-child(n+3){border-top:1px solid var(--line);}
    .ab-svc:nth-child(odd):hover{background:transparent;}
  }
  @media (max-width:560px){
    .ab-svc-grid{grid-template-columns:1fr;}
    .ab-svc{padding-left:0;padding-right:0;border-right:0;min-height:0;}
    .ab-svc:nth-child(n+2){border-top:1px solid var(--line);}
    .ab-svc-num{margin-bottom:18px;}
    .ab-steps{grid-template-columns:1fr;}
    .ab-cta-grid{flex-direction:column;align-items:flex-start;}
  }

/* ==========================================================================
   BLOGS PAGE — page-only styles
   New classes are prefixed .blog- so they cannot clash with other pages.
   Colours / fonts come from the variables + fonts already defined in style.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. Light top bar
   header.php ships with the dark home-page hero. On this page only, we
   flatten it into a cream bar so just the (fixed) nav is visible.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   B. Shared page container (design uses a wider container than .wrap)
   -------------------------------------------------------------------------- */
.blog-wrap{max-width:1366px;margin:0 auto;padding:0 43px;}

/* --------------------------------------------------------------------------
   C. Page banner — "On the road. In the know."
   -------------------------------------------------------------------------- */
.blog-hero{background:var(--cream);padding:110px 0 84px;}
.blog-hero .eyebrow{font-weight:400;letter-spacing:.2em;margin-bottom:22px;}
.blog-hero-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:24px 40px;}
.blog-hero h1{
  font-size:clamp(40px,8.7vw,119px);flex:0 0 auto;
  line-height:.95;letter-spacing:-.06em;
}
.blog-hero h1 .accent{color:var(--red);}
.blog-hero-lead{
  font-family:'Manrope',sans-serif;font-size:17px;line-height:1.65;
  color:var(--gray);max-width:370px;margin-bottom:8px;
}

/* --------------------------------------------------------------------------
   D. Listing area (category bar + featured post + grid)
   -------------------------------------------------------------------------- */
.blog-list{padding:64px 0 80px;}

/* category bar */
.blog-cats{
  display:flex;gap:25px;overflow-x:auto;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.blog-cat{
  font-family:'Manrope',sans-serif;font-size:12px;font-weight:600;line-height:15px;
  letter-spacing:.045em;word-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  color:var(--gray);padding:16px 0;transition:color .2s ease;
}
.blog-cat:hover,
.blog-cat.is-active{color:var(--red);}

/* tag / date / read-link shared by featured post + cards */
.blog-tag{font-weight:400;margin-bottom:0;}
.blog-date{font-size:10px;letter-spacing:.06em;color:var(--gray);}
.blog-read{
  display:inline-flex;align-items:center;gap:12px;
  font-size:11px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--black);
}
.blog-read span{color:var(--red);font-size:14px;line-height:1;transition:transform .2s ease;}
.blog-read:hover span{transform:translate(3px,-3px);}
.blog-excerpt{font-family:'Manrope',sans-serif;color:var(--gray);}

/* featured post */
.blog-featured{
  display:grid;grid-template-columns:.82fr 1fr;gap:36px;align-items:start;
  margin-top:40px;padding-top:36px;border-top:1px solid var(--line);
}
.blog-featured-img{display:block;aspect-ratio:560/519;overflow:hidden;background:var(--cream);}
.blog-featured-img img{width:100%;height:100%;object-fit:cover;}
.blog-featured h2{
  font-size:clamp(34px,5.6vw,77px);line-height:.95;letter-spacing:-.05em;
  text-transform:none;margin:20px 0 26px;
}
.blog-featured .blog-excerpt{font-size:16px;line-height:1.75;max-width:460px;margin-bottom:12px;}
.blog-featured .blog-read{margin-top:34px;}

/* 2-column grid of cards */
.blog-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:56px 32px;
  align-items:start;margin-top:90px;
}
.blog-card-img{display:block;aspect-ratio:624/289;overflow:hidden;background:var(--cream);}
.blog-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.blog-card:hover .blog-card-img img{transform:scale(1.03);}
.blog-card .blog-tag{margin-top:20px;}
.blog-card h3{
  font-size:clamp(22px,2.1vw,28.8px);line-height:1.2;letter-spacing:-.04em;
  text-transform:none;margin:16px 0 14px;
}
.blog-card .blog-excerpt{font-size:15px;line-height:1.6;margin-bottom:14px;}
.blog-card .blog-read{margin-top:30px;}

/* --------------------------------------------------------------------------
   E. Yellow closing banner (background comes from the existing .how class)
   -------------------------------------------------------------------------- */
.blog-cta{padding:86px 0;}
.blog-cta .blog-wrap{
  display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.blog-cta h2{font-size:clamp(40px,6.3vw,86px);line-height:.9;letter-spacing:-.055em;}
.blog-cta h2 .hl{color:var(--red);}

/* --------------------------------------------------------------------------
   F. Responsive (same breakpoints as style.css: 960px / 560px)
   -------------------------------------------------------------------------- */
@media (max-width:960px){
  .blog-wrap{padding:0 32px;}
  .blog-hero{padding:90px 0 56px;}
  .blog-hero h1{font-size:clamp(40px,11vw,105px);}
  .blog-hero-row{flex-direction:column;align-items:flex-start;gap:24px;}
  .blog-hero-lead{margin-bottom:0;}
  .blog-list{padding:48px 0 64px;}
  .blog-featured{grid-template-columns:1fr;gap:28px;}
  .blog-featured-img{aspect-ratio:16/10;}
  .blog-featured h2{margin-top:16px;}
  .blog-grid{margin-top:64px;}
  .blog-cta{padding:64px 0;}
}
@media (max-width:560px){
  .blog-wrap{padding:0 20px;}
  .blog-hero h1{font-size:14vw;}
  .blog-cats{gap:20px;}
  .blog-grid{grid-template-columns:1fr;gap:48px;}
  .blog-hero-lead{font-size:16px;}
  .blog-cta .blog-wrap{flex-direction:column;align-items:flex-start;}
}

/* ==========================================================================
   CONTACT PAGE — page-only styles
   New classes are prefixed .contact- so they cannot clash with other pages.
   Colours / fonts come from the variables + fonts already defined in style.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. Dark top bar
   header.php ships with the home-page hero (with a background photo). On this
   page only, we flatten it into a dark bar so just the (fixed) nav is visible,
   and make the nav text light so it reads on the dark background.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   B. Shared container (same width as blogs.php)
   -------------------------------------------------------------------------- */
.contact-wrap{max-width:1366px;margin:0 auto;padding-left:43px;padding-right:43px;}

/* shared small pieces */
.contact-eyebrow{font-weight:400;letter-spacing:.14em;margin-bottom:0;}
.contact-link{
  display:inline-flex;align-items:center;gap:14px;
  font-size:11px;letter-spacing:.075em;text-transform:uppercase;color:var(--black);
}
.contact-link span{color:var(--red);font-size:14px;line-height:1;transition:transform .2s ease;}
.contact-link:hover span{transform:translate(3px,-3px);}

/* --------------------------------------------------------------------------
   C. Dark banner — "Let's talk."
   -------------------------------------------------------------------------- */
.contact-hero{background:#f7f8f3;color:#171717;padding:110px 0 171px;}
.contact-hero .contact-eyebrow{color:#969696;margin-bottom:26px;}
.contact-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 438px;gap:24px;align-items:start;}
.contact-hero h1{
  font-size:clamp(52px,9.66vw,132px);line-height:.93;letter-spacing:-.07em;
}
.contact-hero h1 .accent{color:var(--yellow);}
.contact-hero-side{margin-top:35px;}
.contact-hero-lead{
  font-family:'Manrope',sans-serif;font-size:18px;font-weight:500;line-height:32px;
  color:#aeaeae;max-width:430px;margin-bottom:28px;
}
.contact-hero-links a{
  display:block;font-family:'Manrope',sans-serif;font-size:16px;font-weight:500;line-height:32px;
  color:#aeaeae;transition:color .2s ease;
}
.contact-hero-links a:hover{color:#fff;}

/* --------------------------------------------------------------------------
   D. Enquiry section (intro + form)
   -------------------------------------------------------------------------- */
.contact-enquiry{padding:130px 0;}
.contact-enquiry-grid{
  display:grid;grid-template-columns:minmax(0,.659fr) minmax(0,1fr);column-gap:56px;align-items:start;
}
.contact-enquiry .contact-eyebrow{color:var(--gray);margin-bottom:24px;}
.contact-enquiry h2{
  font-size:clamp(36px,4.98vw,68px);line-height:.87;letter-spacing:-.085em;
}
.contact-enquiry h2 .hl{color:var(--red);}
.contact-enquiry-intro{
  font-family:'Manrope',sans-serif;font-size:14px;line-height:27px;color:var(--gray);
  max-width:352px;margin:41px 0 34px;
}
.contact-availability{border-top:1px solid #d5d5d3;padding-top:21px;}
.contact-availability .contact-eyebrow{color:var(--gray);margin-bottom:13px;}
.contact-availability strong{
  display:block;font-family:'Manrope',sans-serif;font-size:16px;font-weight:600;
  line-height:24px;text-transform:uppercase;color:var(--black);
}

/* form */
.contact-form-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:22px;row-gap:25px;}
.contact-field{display:flex;flex-direction:column;min-width:0;}
.contact-field-full{grid-column:1 / -1;}
.contact-field label{
  font-size:10.5px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--black);margin-bottom:8px;
}
.contact-field input,
.contact-field select,
.contact-field textarea{
  width:100%;font-family:'DM Mono',monospace;font-size:12px;color:var(--black);
  background:transparent;border:0;border-bottom:1px solid #ccc;border-radius:0;
  padding:0 4px;height:43px;outline:none;transition:border-color .2s ease;
}
.contact-field textarea{height:106px;padding:10px 4px;resize:vertical;line-height:1.6;}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus{border-bottom-color:var(--black);}
.contact-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;} /* spam-bot trap */

.contact-form-actions{margin-top:33px;}
.contact-submit{
  font-family:'Manrope',sans-serif;font-size:17px;font-weight:500;letter-spacing:.01em;
  height:52px;padding:0 18px;gap:16px;
}
.contact-notice{
  font-family:'Manrope',sans-serif;font-size:14px;line-height:1.6;
  background:var(--cream);border-left:3px solid var(--red);padding:14px 18px;margin-bottom:24px;
}
.contact-notice ul{list-style:none;}
.contact-notice.is-success{border-left-color:var(--yellow);}
.contact-notice a{text-decoration:underline;color:var(--red);}
.contact-notice[hidden],
#cf-success-link[hidden]{display:none;} /* make sure hidden="" really hides these */

/* --------------------------------------------------------------------------
   E. Find us (address + map)
   -------------------------------------------------------------------------- */
.contact-find{background:var(--cream);border-top:1px solid #d5d5d3;padding:112px 0 108px;}
.contact-find-grid{
  display:grid;grid-template-columns:minmax(0,.656fr) minmax(0,1fr);column-gap:43px;align-items:start;
}
.contact-find .contact-eyebrow{color:var(--gray);margin-bottom:22px;}
.contact-find h2{
  font-size:clamp(44px,6.15vw,84px);line-height:.87;letter-spacing:-.09em;
}
.contact-find h2 .hl{color:var(--red);}
.contact-address{
  font-family:'Manrope',sans-serif;font-size:14px;line-height:28px;font-style:normal;
  color:var(--gray);margin-top:34px;
}
.contact-phones{margin:20px 0 33px;}
.contact-phones a{
  display:block;font-family:'Manrope',sans-serif;font-size:16px;font-weight:700;line-height:32px;
  color:var(--black);
}
.contact-phones a:hover{color:var(--red);}

/* map (.map-box / .map-caption come from style.css; only size + pin are set here) */
.contact-map{height:440px;}
.contact-map-pin{
  position:absolute;left:44%;top:47%;display:flex;align-items:flex-start;gap:9px;
  font-size:9.5px;line-height:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--black);
}
.contact-map-pin svg{position:static;inset:auto;width:15px;height:20px;flex:none;} /* undo .map-box svg (full-size) for the small pin icon */
.contact-map .map-caption{left:18px;bottom:21px;color:rgba(0,0,0,.75);}

/* --------------------------------------------------------------------------
   F. Responsive (same breakpoints as style.css: 960px / 560px)
   -------------------------------------------------------------------------- */
@media (max-width:960px){
  .contact-wrap{padding-left:32px;padding-right:32px;}
  .contact-hero{padding:90px 0 64px;}
  .contact-find{padding:72px 0;}
  .contact-hero-grid{grid-template-columns:1fr;gap:0;}
  .contact-hero-side{margin-top:32px;}
  .contact-hero h1{font-size:clamp(52px,17vw,132px);}
  .contact-enquiry{padding:72px 0;}
  .contact-enquiry-grid,
  .contact-find-grid{grid-template-columns:1fr;row-gap:48px;}
  .contact-enquiry h2{font-size:clamp(44px,10vw,68px);}
  .contact-find h2{font-size:clamp(52px,12vw,84px);}
  .contact-map{height:340px;}
}
@media (max-width:560px){
  .contact-wrap{padding-left:20px;padding-right:20px;}
  .contact-form-grid{grid-template-columns:1fr;}
  .contact-hero-lead{font-size:16px;line-height:1.8;}
  .contact-hero-links a{font-size:15px;}
  .contact-submit{width:100%;justify-content:center;}
}
/* ==========================================================================
   BLOG ARTICLE PAGE — page-only styles
   New classes are prefixed .blog- so they cannot clash with other pages.
   Colours / fonts come from the variables + fonts already defined in style.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. Light top bar
   header.php ships with the dark home-page hero. On this page only, we
   flatten it into a cream bar so just the (fixed) nav is visible.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   B. Shared container (same width as blogs.php)
   -------------------------------------------------------------------------- */
.blog-wrap{max-width:1366px;margin:0 auto;padding:0 43px;}

/* --------------------------------------------------------------------------
   C. Article wrapper (cream, runs from the nav bar down to the "Keep reading" block)
   -------------------------------------------------------------------------- */
.blog-article{background:var(--cream);}

/* headline block */
.blog-article-head{padding:110px 0 94px;}
.blog-article-head-inner{padding-left:120px;}
.blog-article-head .eyebrow{font-weight:400;letter-spacing:.16em;margin-bottom:22px;}
.blog-article-head h1{
  font-size:clamp(34px,7.54vw,103px);line-height:.97;letter-spacing:-.05em;
  text-transform:none;max-width:1040px;

}
.blog-article-lead{
  font-family:'Manrope',sans-serif;font-size:18px;line-height:1.78;
  color:var(--gray);max-width:640px;margin-top:34px;
}

/* full-width feature image */
.blog-article-figure{margin:0 auto;}
.blog-article-figure img{
  width:100%;aspect-ratio:1280/719;object-fit:cover;background:var(--line);
}

/* body: small "useful notes" column + reading column */
.blog-article-body{
  display:grid;grid-template-columns:325px minmax(0,680px);column-gap:43px;
  padding-top:110px;padding-bottom:110px;
}
.blog-article-aside .eyebrow{font-weight:400;margin-bottom:18px;}
.blog-article-date{font-size:11px;letter-spacing:.05em;color:var(--gray);}

/* reading column (text colour is slightly softer than --black, as in the design) */
.blog-prose{color:#4b4b48;}
.blog-prose h2{
  font-size:40px;line-height:1.1;letter-spacing:-.05em;text-transform:none;
  color:#4b4b48;margin:22px 0 14px;
}
.blog-prose h2:first-child{margin-top:0;}
.blog-prose p{font-family:'Manrope',sans-serif;font-size:18px;line-height:2.05;}
.blog-prose hr{border:0;border-top:1px solid var(--line);margin:40px 0 32px;}
.blog-prose .btn{margin-top:48px;}

/* --------------------------------------------------------------------------
   D. "Keep reading" block (white)
   -------------------------------------------------------------------------- */
.blog-related{background:var(--white);padding:80px 0 100px;}
.blog-related .eyebrow{font-weight:400;margin-bottom:40px;}
.blog-related-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.blog-related-card{border-top:1px solid var(--line);padding-top:30px;}
.blog-related-cat{font-size:12px;color:var(--red);}
.blog-related-card h3{
  font-size:24px;line-height:1.2;letter-spacing:-.04em;text-transform:none;
  margin:20px 0 34px;
}
.blog-read{
  display:inline-flex;align-items:center;gap:12px;
  font-size:11px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--black);
}
.blog-read span{color:var(--red);font-size:14px;line-height:1;transition:transform .2s ease;}
.blog-read:hover span{transform:translate(3px,-3px);}

/* --------------------------------------------------------------------------
   E. Responsive (same breakpoints as style.css: 960px / 560px)
   -------------------------------------------------------------------------- */
@media (max-width:960px){
  .blog-wrap{padding-left:32px;padding-right:32px;}
  .blog-article-head{padding:90px 0 56px;}
  .blog-article-head-inner{padding-left:0;}
  .blog-article-lead{margin-top:26px;}
  .blog-article-body{grid-template-columns:1fr;row-gap:28px;padding-top:64px;padding-bottom:64px;}
  .blog-prose h2{font-size:32px;}
  .blog-related{padding:64px 0 72px;}
}
@media (max-width:560px){
  .blog-wrap{padding-left:20px;padding-right:20px;}
  .blog-article-head h1{font-size:clamp(34px,10vw,52px);}
  .blog-article-lead{font-size:16px;}
  .blog-article-figure img{aspect-ratio:4/3;}
  .blog-prose h2{font-size:28px;}
  .blog-prose p{font-size:16.5px;line-height:1.9;}
  .blog-prose .btn{margin-top:36px;}
  .blog-related-grid{grid-template-columns:1fr;gap:40px;}
}

/* ==========================================================================
   BLOG ARTICLE PAGE — page-only styles
   New classes are prefixed .blog- so they cannot clash with other pages.
   Colours / fonts come from the variables + fonts already defined in style.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. Light top bar
   header.php ships with the dark home-page hero. On this page only, we
   flatten it into a cream bar so just the (fixed) nav is visible.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   B. Shared container (same width as blogs.php)
   -------------------------------------------------------------------------- */
.blog-wrap{max-width:1366px;margin:0 auto;padding:0 43px;}

/* --------------------------------------------------------------------------
   C. Article wrapper (cream, runs from the nav bar down to the "Keep reading" block)
   -------------------------------------------------------------------------- */
.blog-article{background:var(--cream);}

/* headline block */
.blog-article-head{padding:110px 0 94px;}
.blog-article-head-inner{padding-left:120px;}
.blog-article-head .eyebrow{font-weight:400;letter-spacing:.16em;margin-bottom:22px;}
.blog-article-head h1{
  font-size:clamp(34px,7.54vw,103px);line-height:.97;letter-spacing:-.05em;
  text-transform:none;max-width:1040px;
}
.blog-article-lead{
  font-family:'Manrope',sans-serif;font-size:18px;line-height:1.78;
  color:var(--gray);max-width:640px;margin-top:34px;
}

/* full-width feature image */
.blog-article-figure{margin:0 auto;}
.blog-article-figure img{
  width:100%;aspect-ratio:1280/719;object-fit:cover;background:var(--line);
}

/* body: small "useful notes" column + reading column */
.blog-article-body{
  display:grid;grid-template-columns:325px minmax(0,680px);column-gap:43px;
  padding-top:110px;padding-bottom:110px;
}
.blog-article-aside .eyebrow{font-weight:400;margin-bottom:18px;}
.blog-article-date{font-size:11px;letter-spacing:.05em;color:var(--gray);}

/* reading column (text colour is slightly softer than --black, as in the design) */
.blog-prose{color:#4b4b48;}
.blog-prose h2{
  font-size:40px;line-height:1.1;letter-spacing:-.05em;text-transform:none;
  color:#4b4b48;margin:22px 0 14px;
}
.blog-prose h2:first-child{margin-top:0;}
.blog-prose p{font-family:'Manrope',sans-serif;font-size:18px;line-height:2.05;}
.blog-prose hr{border:0;border-top:1px solid var(--line);margin:40px 0 32px;}
.blog-prose .btn{margin-top:48px;}

/* --------------------------------------------------------------------------
   D. "Keep reading" block (white)
   -------------------------------------------------------------------------- */
.blog-related{background:var(--white);padding:80px 0 100px;}
.blog-related .eyebrow{font-weight:400;margin-bottom:40px;}
.blog-related-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.blog-related-card{border-top:1px solid var(--line);padding-top:30px;}
.blog-related-cat{font-size:12px;color:var(--red);}
.blog-related-card h3{
  font-size:24px;line-height:1.2;letter-spacing:-.04em;text-transform:none;
  margin:20px 0 34px;
}
.blog-read{
  display:inline-flex;align-items:center;gap:12px;
  font-size:11px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--black);
}
.blog-read span{color:var(--red);font-size:14px;line-height:1;transition:transform .2s ease;}
.blog-read:hover span{transform:translate(3px,-3px);}

/* --------------------------------------------------------------------------
   E. Responsive (same breakpoints as style.css: 960px / 560px)
   -------------------------------------------------------------------------- */
@media (max-width:960px){
  .blog-wrap{padding-left:32px;padding-right:32px;}
  .blog-article-head{padding:90px 0 56px;}
  .blog-article-head-inner{padding-left:0;}
  .blog-article-lead{margin-top:26px;}
  .blog-article-body{grid-template-columns:1fr;row-gap:28px;padding-top:64px;padding-bottom:64px;}
  .blog-prose h2{font-size:32px;}
  .blog-related{padding:64px 0 72px;}
}
@media (max-width:560px){
  .blog-wrap{padding-left:20px;padding-right:20px;}
  .blog-article-head h1{font-size:clamp(34px,10vw,52px);}
  .blog-article-lead{font-size:16px;}
  .blog-article-figure img{aspect-ratio:4/3;}
  .blog-prose h2{font-size:28px;}
  .blog-prose p{font-size:16.5px;line-height:1.9;}
  .blog-prose .btn{margin-top:36px;}
  .blog-related-grid{grid-template-columns:1fr;gap:40px;}
}
  /* =====================================================================
     SERVICES PAGE — INTERNAL CSS (only what style.css does not provide)
     ===================================================================== */

  /* ---- 1. Header adjustment (header.php has the dark home hero) ------- */
  

  /* ---- 2. Helpers ------------------------------------------------------ */
  .sv-h2{font-size:clamp(34px,4.2vw,58px);line-height:.93;letter-spacing:-.045em;}
  .sv-red{color:var(--red);}
  .sv-p{
    font-family:'Manrope',sans-serif;font-weight:500;
    font-size:15px;line-height:1.9;color:var(--gray);
  }

  /* ---- 3. Hero --------------------------------------------------------- */
  .sv-hero{background:var(--cream);padding:110px 0 64px;}
  .sv-hero .eyebrow{margin-bottom:14px;}
  .sv-hero h1{font-size:clamp(44px,6.8vw,98px);line-height:.9;letter-spacing:-.055em;}
  .sv-hero-grid{display:grid;grid-template-columns:2fr 1fr;gap:40px;align-items:end;}
  .sv-hero-lead{max-width:340px;padding-bottom:10px;}

  /* ---- 4. Service rows ------------------------------------------------- */
  .sv-list{background:var(--white);padding:50px 0 60px;}
  .sv-row{
    position:relative;display:grid;grid-template-columns:74px 1fr 1fr;column-gap:26px;
    align-items:center;padding:34px 0;border-top:1px solid var(--line);
  }
  .sv-row:last-child{border-bottom:1px solid var(--line);}
  .sv-num{font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--red);}
  .sv-media img{width:100%;aspect-ratio:1.75/1;object-fit:cover;border-radius:2px;}
  .sv-body{padding-right:30px;}
  .sv-tag{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);margin-bottom:18px;}
  .sv-body .sv-h2{margin-bottom:22px;}
  .sv-body .sv-p{max-width:340px;margin-bottom:26px;}
  .sv-link{font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;}
  .sv-link span{color:var(--red);transition:transform .2s ease;}
  .sv-link:hover span{transform:translate(3px,-3px);}
  .sv-corner{position:absolute;top:34px;right:0;color:var(--red);font-size:16px;line-height:1;}

  /* even rows (.rev): DOM order is number, text, image — grid places them automatically */

  /* ---- 5. Yellow CTA --------------------------------------------------- */
  .sv-cta{background:var(--yellow);color:#161300;padding:100px 0;}
  .sv-cta .eyebrow{color:rgba(20,17,0,.55);}
  .sv-cta-grid{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap;}
  .sv-cta .sv-h2{font-size:clamp(40px,5.6vw,76px);margin-bottom:26px;}
  .sv-cta .sv-p{color:rgba(20,17,0,.72);max-width:470px;}
  .sv-cta-btn{
    display:inline-flex;align-items:center;gap:10px;
    font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
    color:#161300;border:1px solid #161300;padding:15px 24px;border-radius:2px;
    transition:background .2s ease,color .2s ease,transform .15s ease;
  }
  .sv-cta-btn:hover{background:#161300;color:var(--yellow);transform:translateY(-2px);}

  /* ---- 6. Responsive --------------------------------------------------- */
  @media (max-width:960px){
    .sv-hero{padding:90px 0 48px;}
    .sv-hero-grid{grid-template-columns:1fr;gap:26px;}
    .sv-list{padding:24px 0 40px;}
    .sv-row,.sv-row.rev{grid-template-columns:1fr;row-gap:22px;padding:30px 0;}
    .sv-row .sv-num{order:0;}
    .sv-row .sv-media,.sv-row.rev .sv-media{grid-column:1;order:1;}
    .sv-row .sv-body,.sv-row.rev .sv-body{grid-column:1;order:2;padding-right:0;}
    .sv-corner{display:none;}
    .sv-cta{padding:72px 0;}
  }
  @media (max-width:560px){
    .sv-cta-grid{flex-direction:column;align-items:flex-start;}
  }