/* ===========================
       CSS VARIABLES — APPLE PALETTE
    =========================== */
    :root {
      --bg-primary: #FAFAFA;
      --bg-sidebar: #F5F5F7;
      --bg-card: #FFFFFF;
      --bg-tag: #F0F4FF;
      --text-primary: #1D1D1F;
      --text-secondary: #6E6E73;
      --text-tertiary: #86868B;
      --accent-blue: #0066CC;
      --accent-green: #1A7340;
      --accent-amber: #C77F1A;
      --accent-purple: #6B3FA0;
      --border-light: #E5E5EA;
      --border-subtle: #F2F2F7;
      --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
      --shadow-md: 0 4px 16px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04);
      --shadow-lg: 0 12px 40px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.05);
      --radius-sm: 8px;
      --radius-md: 14px;
      --radius-lg: 20px;
      --sidebar-w: 280px;
      --transition: all .25s cubic-bezier(.4,0,.2,1);
    }

    /* ===========================
       RESET & BASE
    =========================== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: smooth; font-size: 16px; }

    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--bg-primary);
      color: var(--text-primary);
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }

    a { color: var(--accent-blue); text-decoration: none; transition: var(--transition); }
    a:hover { opacity: .75; }

    h1, h2, h3, h4 {
      font-family: 'Playfair Display', Georgia, serif;
      line-height: 1.25;
      letter-spacing: -.02em;
    }

    /* ===========================
       LAYOUT
    =========================== */
    .layout {
      display: flex;
      min-height: 100vh;
    }

    /* ===========================
       SIDEBAR
    =========================== */
    .sidebar {
      width: var(--sidebar-w);
      flex-shrink: 0;
      background: var(--bg-sidebar);
      border-right: 1px solid var(--border-light);
      position: sticky;
      top: 0;
      height: 100vh;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
    }

    .sidebar::-webkit-scrollbar { width: 4px; }
    .sidebar::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 2px; }

    .sidebar-brand {
      padding: 28px 24px 20px;
      border-bottom: 1px solid var(--border-light);
    }

    .sidebar-brand .brand-flag {
      font-size: 22px;
      margin-bottom: 6px;
      display: block;
    }

    .sidebar-brand h2 {
      font-family: 'Playfair Display', serif;
      font-size: 17px;
      font-weight: 700;
      color: var(--text-primary);
      letter-spacing: -.02em;
      line-height: 1.3;
    }

    .sidebar-brand p {
      font-size: 11.5px;
      color: var(--text-tertiary);
      margin-top: 4px;
      font-weight: 500;
      letter-spacing: .01em;
    }

    .sidebar-section {
      padding: 20px 16px 8px;
    }

    .sidebar-section-label {
      font-size: 10.5px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--text-tertiary);
      padding: 0 8px;
      margin-bottom: 6px;
    }

    .sidebar-cat {
      margin-bottom: 4px;
    }

    .sidebar-cat-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 12px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-secondary);
      transition: var(--transition);
      user-select: none;
    }

    .sidebar-cat-header:hover { background: rgba(0,0,0,.04); color: var(--text-primary); }

    .sidebar-cat-icon {
      width: 28px;
      height: 28px;
      border-radius: 7px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      flex-shrink: 0;
    }

    .icon-car   { background: #E8F2FF; }
    .icon-home  { background: #E8F8EE; }
    .icon-safari{ background: #FFF3E0; }
    .icon-blog  { background: #F0EBF8; }

    .sidebar-links {
      padding: 4px 0 4px 12px;
      display: flex;
      flex-direction: column;
      gap: 1px;
    }

    .sidebar-link {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 12px 7px 24px;
      border-radius: var(--radius-sm);
      font-size: 12.5px;
      font-weight: 500;
      color: var(--text-secondary);
      transition: var(--transition);
      text-decoration: none;
    }

    .sidebar-link:hover {
      background: rgba(0,102,204,.07);
      color: var(--accent-blue);
      opacity: 1;
    }

    .sidebar-link.active {
      background: rgba(0,102,204,.10);
      color: var(--accent-blue);
      font-weight: 600;
    }

    .sidebar-link::before {
      content: '';
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: currentColor;
      opacity: .4;
      flex-shrink: 0;
    }

    .sidebar-footer {
      margin-top: auto;
      padding: 16px 20px;
      border-top: 1px solid var(--border-light);
      font-size: 11px;
      color: var(--text-tertiary);
      line-height: 1.5;
    }

    /* ===========================
       MAIN CONTENT
    =========================== */
    .main {
      flex: 1;
      max-width: calc(100% - var(--sidebar-w));
      overflow-x: hidden;
    }

    /* ===========================
       HERO / PAGE HEADER
    =========================== */
    .page-hero {
      background: linear-gradient(135deg, #0A1628 0%, #1A3A6E 50%, #0D4D2E 100%);
      padding: 72px 56px 60px;
      position: relative;
      overflow: hidden;
    }

    .page-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

    .page-hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.2);
      backdrop-filter: blur(10px);
      border-radius: 100px;
      padding: 6px 14px;
      font-size: 12px;
      font-weight: 600;
      color: rgba(255,255,255,.9);
      letter-spacing: .04em;
      text-transform: uppercase;
      margin-bottom: 20px;
    }

    .page-hero h1 {
      font-size: clamp(30px, 3.5vw, 48px);
      font-weight: 700;
      color: #FFFFFF;
      max-width: 600px;
      line-height: 1.15;
      margin-bottom: 16px;
    }

    .page-hero h1 em {
      font-style: italic;
      color: rgba(255,255,255,.75);
    }

    .page-hero p {
      font-size: 16px;
      color: rgba(255,255,255,.65);
      max-width: 560px;
      line-height: 1.7;
      font-weight: 400;
    }

    /* Blog post hero with thumbnail background */
    .page-hero--thumb {
      background-image: var(--hero-thumb);
      background-size: cover;
      background-position: center;
      background-color: #0A1628;
    }
    .page-hero--thumb::before {
      background: linear-gradient(
        135deg,
        rgba(10, 22, 40, 0.88)  0%,
        rgba(26, 58, 110, 0.78) 50%,
        rgba(13, 77,  46, 0.72) 100%
      );
    }
    .page-hero--thumb::before {
      z-index: 0;
    }
    .page-hero--thumb > * {
      position: relative;
      z-index: 1;
    }
    .page-hero--thumb h1,
    .page-hero--thumb p {
      max-width: 100%;
    }

    .hero-stats {
      display: flex;
      gap: 32px;
      margin-top: 36px;
      flex-wrap: wrap;
    }

    .hero-stat {
      text-align: center;
    }

    .hero-stat .num {
      font-family: 'Playfair Display', serif;
      font-size: 28px;
      font-weight: 700;
      color: #fff;
    }

    .hero-stat .label {
      font-size: 11px;
      color: rgba(255,255,255,.55);
      letter-spacing: .04em;
      text-transform: uppercase;
      margin-top: 2px;
    }

    /* ===========================
       CONTENT SECTIONS
    =========================== */
    .content-section {
      padding: 56px 56px 40px;
      border-bottom: 1px solid var(--border-subtle);
    }

    .content-section:last-of-type { border-bottom: none; }

    .section-header {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 36px;
    }

    .section-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      flex-shrink: 0;
    }

    .section-icon.car    { background: linear-gradient(135deg, #E8F2FF 0%, #C5DEFF 100%); }
    .section-icon.home   { background: linear-gradient(135deg, #E8F8EE 0%, #B8EBCE 100%); }
    .section-icon.safari { background: linear-gradient(135deg, #FFF3E0 0%, #FFD99A 100%); }
    .section-icon.blog   { background: linear-gradient(135deg, #F0EBF8 0%, #D5C2ED 100%); }

    .section-header-text h2 {
      font-size: 26px;
      font-weight: 700;
      color: var(--text-primary);
    }

    .section-header-text p {
      font-size: 14px;
      color: var(--text-secondary);
      margin-top: 3px;
    }

    /* ===========================
       BUSINESS CARDS
    =========================== */
    .business-card {
      background: var(--bg-card);
      border: 1px solid var(--border-light);
      border-radius: var(--radius-lg);
      overflow: hidden;
      margin-bottom: 28px;
      box-shadow: var(--shadow-sm);
      transition: box-shadow .3s ease, transform .3s ease;
    }

    .business-card:hover {
      box-shadow: var(--shadow-lg);
      transform: translateY(-2px);
    }

    .card-header {
      padding: 28px 32px 22px;
      border-bottom: 1px solid var(--border-subtle);
      display: flex;
      align-items: flex-start;
      gap: 18px;
    }

    .card-logo {
      width: 52px;
      height: 52px;
      border-radius: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      flex-shrink: 0;
      font-weight: 700;
      color: #fff;
    }

    .logo-car1   { background: linear-gradient(135deg, #0066CC, #004499); }
    .logo-car2   { background: linear-gradient(135deg, #2563EB, #1D4ED8); }
    .logo-car3   { background: linear-gradient(135deg, #0891B2, #0E7490); }
    .logo-apt    { background: linear-gradient(135deg, #1A7340, #155C33); }
    .logo-safari { background: linear-gradient(135deg, #C77F1A, #A66614); }

    .card-header-info { flex: 1; }

    .card-title {
      font-size: 22px;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 6px;
    }

    .card-title a {
      color: inherit;
      transition: color .2s;
    }
    .card-title a:hover { color: var(--accent-blue); opacity: 1; }

    .card-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .tag {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 100px;
      font-size: 11.5px;
      font-weight: 600;
      letter-spacing: .02em;
    }

    .tag-blue   { background: #EBF4FF; color: #0066CC; }
    .tag-green  { background: #EAFAF1; color: #1A7340; }
    .tag-amber  { background: #FFF8E6; color: #C77F1A; }
    .tag-purple { background: #F5F0FF; color: #6B3FA0; }
    .tag-gray   { background: #F5F5F7; color: #6E6E73; }
    .tag-blog   { background: #F0EBF8; color: #6B3FA0; }

    .card-body { padding: 24px 32px; }

    .card-description {
      font-size: 15px;
      line-height: 1.75;
      color: var(--text-secondary);
      margin-bottom: 24px;
    }

    .card-description strong { color: var(--text-primary); font-weight: 600; }

    /* SERVICES GRID */
    .services-title {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .07em;
      color: var(--text-tertiary);
      margin-bottom: 12px;
    }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 10px;
      margin-bottom: 24px;
    }

    .service-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 11px 14px;
      background: var(--bg-sidebar);
      border: 1px solid var(--border-light);
      border-radius: var(--radius-sm);
      text-decoration: none;
      transition: var(--transition);
    }

    .service-item:hover {
      background: #EBF4FF;
      border-color: rgba(0,102,204,.25);
      opacity: 1;
    }

    .service-item:hover .service-name { color: var(--accent-blue); }

    .service-icon {
      width: 30px;
      height: 30px;
      border-radius: 7px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      flex-shrink: 0;
      box-shadow: var(--shadow-sm);
    }

    .service-name {
      font-size: 13px;
      font-weight: 500;
      color: var(--text-primary);
      transition: color .2s;
      line-height: 1.3;
    }

    .service-name small {
      display: block;
      font-size: 11px;
      color: var(--text-tertiary);
      font-weight: 400;
      margin-top: 1px;
    }

    /* DESTINATIONS */
    .destinations-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 24px;
    }

    .dest-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      background: #FFF3E0;
      border: 1px solid #FFD99A;
      border-radius: 100px;
      font-size: 12.5px;
      font-weight: 500;
      color: #8B5E10;
      text-decoration: none;
      transition: var(--transition);
    }

    .dest-chip:hover {
      background: #C77F1A;
      border-color: #C77F1A;
      color: #fff;
      opacity: 1;
    }

    /* CONTACT ROW */
    .card-contact {
      padding: 18px 32px;
      background: var(--bg-sidebar);
      border-top: 1px solid var(--border-subtle);
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      align-items: center;
    }

    .contact-group { display: flex; align-items: center; gap: 8px; }

    .contact-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      background: #fff;
      box-shadow: var(--shadow-sm);
      flex-shrink: 0;
    }

    .contact-text { font-size: 13px; }
    .contact-text .label { font-size: 10.5px; color: var(--text-tertiary); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; line-height: 1; }
    .contact-text .value { color: var(--text-primary); font-weight: 500; line-height: 1.3; margin-top: 1px; }
    .contact-text a { color: var(--accent-blue); font-weight: 500; font-size: 13px; }
    .contact-text a:hover { opacity: .75; }

    /* LOCATION / HOURS */
    .card-meta {
      padding: 14px 32px;
      border-top: 1px solid var(--border-subtle);
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      align-items: center;
      background: #FFFFFF;
    }

    .meta-item {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 12.5px;
      color: var(--text-secondary);
    }

    .meta-item span:first-child { font-size: 14px; }

    /* SOCIAL MEDIA */
    .card-social {
      padding: 14px 32px;
      border-top: 1px solid var(--border-subtle);
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .social-label {
      font-size: 11.5px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--text-tertiary);
      margin-right: 4px;
    }

    .social-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 13px;
      border-radius: 100px;
      font-size: 12px;
      font-weight: 600;
      text-decoration: none;
      transition: var(--transition);
    }

    .social-btn:hover { transform: scale(1.04); opacity: 1; }
    .social-wa   { background: #E8F9EE; color: #1A7340; border: 1px solid #B2E5C4; }
    .social-web  { background: #EBF4FF; color: #0066CC; border: 1px solid #BDD8FF; }
    .social-fb   { background: #E8EEFF; color: #1A40CC; border: 1px solid #BDC8FF; }
    .social-ig   { background: #FFF0F5; color: #C0165A; border: 1px solid #FFB8D5; }
    .social-tw   { background: #E6F7FF; color: #0A7AB8; border: 1px solid #99DCFF; }

    /* ===========================
       TRIP CARDS (for Safari)
    =========================== */
    .trips-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 12px;
      margin-bottom: 24px;
    }

    .trip-card {
      display: block;
      padding: 16px;
      background: linear-gradient(135deg, #1D3A25 0%, #2D5A38 100%);
      border-radius: var(--radius-md);
      text-decoration: none;
      transition: var(--transition);
      position: relative;
      overflow: hidden;
    }

    .trip-card::before {
      content: '';
      position: absolute;
      top: -30%;
      right: -20%;
      width: 120px;
      height: 120px;
      background: rgba(255,255,255,.04);
      border-radius: 50%;
    }

    .trip-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 30px rgba(26,115,64,.25);
      opacity: 1;
    }

    .trip-duration {
      display: inline-block;
      background: rgba(255,255,255,.15);
      border-radius: 100px;
      padding: 3px 10px;
      font-size: 11px;
      font-weight: 700;
      color: rgba(255,255,255,.9);
      letter-spacing: .04em;
      text-transform: uppercase;
      margin-bottom: 10px;
    }

    .trip-name {
      font-family: 'Playfair Display', serif;
      font-size: 15px;
      font-weight: 600;
      color: #fff;
      line-height: 1.35;
    }

    .trip-arrow {
      position: absolute;
      bottom: 14px;
      right: 16px;
      font-size: 16px;
      color: rgba(255,255,255,.5);
      transition: var(--transition);
    }

    .trip-card:hover .trip-arrow { color: #fff; transform: translateX(3px); }

    /* ===========================
       VEHICLE SHOWCASE GRID
    =========================== */
    .vehicles-title {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .07em;
      color: var(--text-tertiary);
      margin-bottom: 12px;
      margin-top: 4px;
    }

    .vehicles-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-bottom: 28px;
    }

    .vehicle-card {
      background: #fff;
      border: 1px solid var(--border-light);
      border-radius: var(--radius-md);
      overflow: hidden;
      transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
      text-decoration: none;
      display: block;
    }

    .vehicle-card:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-3px);
      border-color: rgba(0,102,204,.25);
      opacity: 1;
    }

    .vehicle-img-wrap {
      width: 100%;
      height: 160px;
      background: linear-gradient(135deg, #E8F2FF 0%, #C5DEFF 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 48px;
      overflow: hidden;
    }
    .vehicle-img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      transition: transform .4s ease;
    }
    .vehicle-card:hover .vehicle-img-wrap img {
      transform: scale(1.05);
    }

    .vehicle-img-wrap.v-green { background: linear-gradient(135deg, #E8F8EE 0%, #B8EBCE 100%); }
    .vehicle-img-wrap.v-amber { background: linear-gradient(135deg, #FFF3E0 0%, #FFD99A 100%); }
    .vehicle-img-wrap.v-teal  { background: linear-gradient(135deg, #E0F7FA 0%, #A0E4EC 100%); }

    .vehicle-info {
      padding: 12px 14px 14px;
    }

    .vehicle-name {
      font-family: 'Playfair Display', serif;
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
      line-height: 1.3;
      margin-bottom: 2px;
    }

    .vehicle-model {
      font-size: 11.5px;
      color: var(--text-tertiary);
      margin-bottom: 8px;
      font-weight: 500;
    }

    .vehicle-price {
      font-size: 14px;
      font-weight: 700;
      color: var(--accent-blue);
      margin-bottom: 10px;
    }

    .vehicle-link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11.5px;
      font-weight: 600;
      color: var(--accent-blue);
      background: #EBF4FF;
      padding: 5px 12px;
      border-radius: 100px;
      border: 1px solid rgba(0,102,204,.15);
      transition: var(--transition);
    }

    .vehicle-card:hover .vehicle-link {
      background: var(--accent-blue);
      color: #fff;
      border-color: var(--accent-blue);
    }

    /* ===========================
       BACK-TO-TOP / MISC
    =========================== */
    .section-divider {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 24px;
    }

    .divider-line {
      flex: 1;
      height: 1px;
      background: var(--border-light);
    }

    .divider-count {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .07em;
      color: var(--text-tertiary);
      white-space: nowrap;
    }

    /* ===========================
       FOOTER
    =========================== */
    .site-footer {
      background: #1D1D1F;
      color: rgba(255,255,255,.55);
      padding: 48px 56px;
      font-size: 13px;
      line-height: 1.7;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr;
      gap: 40px;
      margin-bottom: 36px;
    }

    .footer-brand h3 {
      font-family: 'Playfair Display', serif;
      font-size: 18px;
      color: #fff;
      margin-bottom: 10px;
    }

    .footer-brand p { max-width: 260px; }

    .footer-col h4 {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .07em;
      color: rgba(255,255,255,.75);
      margin-bottom: 12px;
    }

    .footer-col ul { list-style: none; }
    .footer-col ul li { margin-bottom: 7px; }
    .footer-col ul li a { color: rgba(255,255,255,.55); font-size: 13px; }
    .footer-col ul li a:hover { color: #fff; opacity: 1; }

    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,.1);
      padding-top: 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      font-size: 12px;
    }

    .footer-seo-text {
      font-size: 12px;
      line-height: 1.6;
      color: rgba(255,255,255,.35);
      margin-top: 20px;
    }

    /* ===========================
       RESPONSIVE
    =========================== */
    @media (max-width: 1024px) {
      .content-section { padding: 40px 32px; }
      .page-hero { padding: 48px 32px 40px; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .site-footer { padding: 40px 32px; }
    }

    @media (max-width: 768px) {
      .layout { flex-direction: column; }
      .sidebar {
        width: 100%;
        height: auto;
        position: relative;
        border-right: none;
        border-bottom: 1px solid var(--border-light);
      }
      .sidebar-links { flex-direction: row; flex-wrap: wrap; padding: 4px 12px; }
      .sidebar-link { padding: 5px 10px; }
      .main { max-width: 100%; }
      .content-section { padding: 32px 20px; }
      .page-hero { padding: 36px 20px; }
      .card-header { padding: 20px; }
      .card-body { padding: 20px; }
      .card-contact { padding: 14px 20px; }
      .card-meta { padding: 12px 20px; }
      .card-social { padding: 12px 20px; }
      .footer-grid { grid-template-columns: 1fr; }
      .site-footer { padding: 32px 20px; }
      .services-grid { grid-template-columns: 1fr; }
      .vehicles-grid { grid-template-columns: repeat(2, 1fr); }
      .trips-grid { grid-template-columns: 1fr 1fr; }
      .hero-stats { gap: 20px; }
    }

    @media (max-width: 480px) {
      .trips-grid { grid-template-columns: 1fr; }
    }

    /* ===========================
       SMOOTH SCROLLING & OFFSET
    =========================== */
    [id] { scroll-margin-top: 20px; }

    /* Highlight active section link */
    .sidebar-link.active-biz {
      background: rgba(0,102,204,.1);
      color: var(--accent-blue);
    }

    /* ===========================
       BLOG
    =========================== */
    .blog-img-wrap {
      width: 100%;
      height: 200px;
      overflow: hidden;
      background: linear-gradient(135deg, #0A1628 0%, #1A3A6E 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 72px;
    }

    .blog-img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .blog-read-more {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 600;
      color: var(--accent-blue);
      margin-top: 4px;
      transition: var(--transition);
    }

    .blog-read-more:hover { opacity: .75; }

    .blog-author-bar {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 14px 32px;
      background: var(--bg-sidebar);
      border-top: 1px solid var(--border-subtle);
      flex-wrap: wrap;
    }

    .blog-author-info {
      font-size: 12.5px;
      color: var(--text-secondary);
    }

    .blog-author-info strong { color: var(--text-primary); }

    .blog-posts-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
      gap: 24px;
    }

    .post-prose {
      font-size: 16px;
      line-height: 1.85;
      color: var(--text-secondary);
    }

    .post-prose > * + * { margin-top: 16px; }
    .post-prose h2 { font-size: 22px; font-weight: 700; color: var(--text-primary); margin-top: 32px; }
    .post-prose h3 { font-size: 18px; font-weight: 600; color: var(--text-primary); margin-top: 24px; }
    .post-prose strong { color: var(--text-primary); }
    .post-prose a { color: var(--accent-blue); text-decoration: underline; text-underline-offset: 3px; }
    .post-prose ul, .post-prose ol { padding-left: 24px; }
    .post-prose li { margin-bottom: 6px; }
    .post-prose blockquote {
      border-left: 3px solid var(--accent-blue);
      padding: 12px 20px;
      background: #EBF4FF;
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
      color: var(--text-primary);
      font-style: italic;
    }

    .empty-state {
      text-align: center;
      padding: 80px 40px;
    }

    .empty-state .empty-icon { font-size: 64px; margin-bottom: 20px; display: block; }
    .empty-state h3 { font-size: 24px; color: var(--text-primary); margin-bottom: 8px; }
    .empty-state p { color: var(--text-secondary); font-size: 15px; }

    @media (max-width: 900px) {
      .blog-posts-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 768px) {
      .blog-author-bar { padding: 14px 20px; }
    }