/* ============================================================
   Manor Cars · Pace Transport — Stylesheet
   ------------------------------------------------------------
   - Brand colours & fonts are the CSS variables in :root below.
     Change a colour ONCE here and it updates across the whole site.
   - Semantic classes (e.g. .hero, .fleet-card, .btn-call-primary,
     .coverage-tag) are the main building blocks you will edit.
   - Classes named .u-NN are one-off styles for a single element,
     auto-generated from the original inline styles.
   - This file is linked from the .html via <link rel=stylesheet>.
     Keep styles.css, the .html, and support.js in the same folder.
   ============================================================ */

*{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0;}
  :root{
    --ink:#14110b; --ink-2:#211b11;
    --gold:#c8a13e; --gold-2:#e3c878;
    --cream:#f6f2e8; --card:#fffdf8;
    --muted:#6e6857; --line:rgba(20,17,11,.10);
  }
  ::selection{background:var(--gold);color:#14110b;}

/* ===== Extracted from inline styles ===== */
.page { font-family:'Archivo',system-ui,sans-serif; color:var(--ink); background:var(--cream); overflow-x:hidden; }
.header { position:sticky; top:0; z-index:50; background:rgba(246,242,232,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.u-3 { max-width:1200px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.u-4 { text-decoration:none; color:var(--ink); display:flex; align-items:center; gap:14px; }
.u-5 { width:46px; height:46px; border:2px solid var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Libre Baskerville',serif; font-weight:700; font-size:20px; color:var(--ink); flex:none; }
.u-6 { line-height:1; }
.u-7 { font-weight:900; font-size:18px; letter-spacing:.02em; }
.u-8 { font-size:11px; letter-spacing:.34em; color:var(--muted); margin-top:3px; font-weight:600; }
.u-9 { display:flex; align-items:center; gap:30px; }
.nav-link { text-decoration:none; color:var(--ink); font-size:14px; font-weight:600; letter-spacing:.02em; }
.header-call-btn { text-decoration:none; background:var(--ink); color:var(--gold-2); padding:11px 18px; border-radius:4px; font-weight:800; font-size:14px; letter-spacing:.02em; display:flex; align-items:center; gap:8px; }
.u-12 { font-size:15px; }
.hero { background:var(--ink); color:var(--cream); position:relative; overflow:hidden; }
.u-14 { position:absolute; inset:0; background-image:radial-gradient(circle at 80% -10%,rgba(200,161,62,.16),transparent 45%); }
.u-15 { position:absolute; inset:0; opacity:.05; background-image:repeating-linear-gradient(135deg,#fff 0 1px,transparent 1px 22px); }
.container { max-width:1200px; margin:0 auto; padding:84px 24px 96px; position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.u-17 { display:inline-flex; align-items:center; gap:10px; border:1px solid rgba(227,200,120,.4); border-radius:100px; padding:7px 16px; font-size:12px; letter-spacing:.28em; font-weight:600; color:var(--gold-2); margin-bottom:28px; }
.u-18 { width:6px; height:6px; border-radius:50%; background:var(--gold-2); }
.u-19 { font-size:60px; line-height:1.03; font-weight:900; letter-spacing:-.02em; margin:0 0 22px; }
.u-20 { font-size:19px; line-height:1.6; color:rgba(246,242,232,.78); max-width:540px; margin:0 0 36px; font-weight:400; }
.u-21 { font-style:normal; font-weight:600; color:var(--cream); }
.u-22 { font-family:'Libre Baskerville',serif; font-style:italic; color:var(--gold-2); }
.u-23 { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.btn-call-primary { text-decoration:none; background:var(--gold); color:var(--ink); padding:18px 30px; border-radius:6px; font-weight:900; font-size:19px; letter-spacing:.01em; display:flex; align-items:center; gap:12px; box-shadow:0 10px 30px rgba(200,161,62,.28); }
.u-25 { font-size:22px; }
.btn-outline { text-decoration:none; border:1px solid rgba(246,242,232,.32); color:var(--cream); padding:18px 26px; border-radius:6px; font-weight:700; font-size:16px; }
.u-27 { margin-top:30px; font-size:13px; color:rgba(246,242,232,.55); letter-spacing:.02em; }
.u-28 { color:rgba(246,242,232,.8); }
.u-29 { position:relative; }
.u-30 { aspect-ratio:4/5; border-radius:8px; border:1px solid rgba(227,200,120,.3); overflow:hidden; background:#14110b; position:relative; }
.img-cover { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.u-32 { position:absolute; inset:0; background:linear-gradient(to top,rgba(20,17,11,.72),transparent 42%); }
.u-33 { position:absolute; right:0; bottom:0; padding:24px 26px; text-align:right; }
.u-34 { font-family:'Libre Baskerville',serif; font-style:italic; color:var(--gold-2); font-size:16px; letter-spacing:.03em; }
.u-35 { font-family:'IBM Plex Mono',monospace; font-size:11px; color:rgba(227,200,120,.7); letter-spacing:.1em; margin-top:7px; }
.u-36 { position:absolute; bottom:-22px; left:-22px; background:var(--cream); color:var(--ink); border-radius:8px; padding:18px 22px; box-shadow:0 20px 40px rgba(0,0,0,.35); }
.u-37 { font-family:'Libre Baskerville',serif; font-size:34px; font-weight:700; line-height:1; }
.u-38 { color:var(--gold); }
.u-39 { font-size:12px; letter-spacing:.12em; color:var(--muted); font-weight:600; margin-top:6px; }
.u-40 { background:var(--ink-2); border-top:1px solid rgba(227,200,120,.18); }
.u-41 { max-width:1200px; margin:0 auto; padding:22px 24px; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.trust-item { display:flex; align-items:center; gap:12px; color:var(--cream); }
.trust-dot { color:var(--gold-2); font-size:20px; }
.trust-title { font-weight:800; font-size:15px; }
.trust-sub { font-size:12px; color:rgba(246,242,232,.55); }
.u-46 { max-width:1200px; margin:0 auto; padding:96px 24px; }
.u-47 { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:44px; flex-wrap:wrap; }
.u-48 { font-size:12px; letter-spacing:.28em; color:var(--gold); font-weight:700; margin-bottom:14px; }
.u-49 { font-size:42px; font-weight:900; letter-spacing:-.02em; margin:0; max-width:620px; line-height:1.06; }
.u-50 { max-width:330px; color:var(--muted); font-size:16px; line-height:1.6; margin:0; }
.u-51 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.u-52 { grid-column:1 / -1; background:var(--ink); color:var(--cream); border-radius:10px; padding:42px; position:relative; overflow:hidden; display:flex; align-items:center; gap:36px; flex-wrap:wrap; }
.u-53 { position:absolute; inset:0; background-image:radial-gradient(circle at 88% -20%,rgba(200,161,62,.18),transparent 45%); }
.u-54 { position:relative; flex:1; min-width:300px; }
.u-55 { display:inline-block; font-size:12px; letter-spacing:.22em; color:var(--gold-2); font-weight:700; margin-bottom:14px; }
.u-56 { font-size:30px; font-weight:900; letter-spacing:-.01em; margin:0 0 12px; line-height:1.1; }
.u-57 { color:rgba(246,242,232,.75); font-size:16px; line-height:1.6; margin:0; max-width:560px; }
.u-58 { position:relative; text-decoration:none; background:var(--gold); color:var(--ink); padding:16px 28px; border-radius:6px; font-weight:900; font-size:17px; white-space:nowrap; display:flex; align-items:center; gap:10px; }
.u-59 { font-size:18px; }
.service-card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:30px; }
.u-61 { width:46px; height:46px; border-radius:8px; background:var(--ink); color:var(--gold-2); display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:20px; }
.u-62 { font-size:20px; font-weight:800; margin:0 0 10px; }
.u-63 { color:var(--muted); font-size:15px; line-height:1.6; margin:0; }
.u-64 { background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.u-65 { text-align:center; margin-bottom:48px; }
.u-66 { font-size:42px; font-weight:900; letter-spacing:-.02em; margin:0 auto; max-width:620px; line-height:1.06; }
.u-67 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.fleet-card { border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--cream); }
.u-69 { aspect-ratio:4/3; background:var(--ink); position:relative; overflow:hidden; }
.u-70 { position:absolute; inset:0; background:linear-gradient(to top,rgba(20,17,11,.28),transparent 55%); }
.u-71 { padding:22px; }
.u-72 { display:flex; justify-content:space-between; align-items:baseline; }
.u-73 { font-size:19px; font-weight:800; margin:0; }
.u-74 { font-size:13px; color:var(--gold); font-weight:700; }
.u-75 { color:var(--muted); font-size:14px; line-height:1.55; margin:10px 0 0; }
.u-76 { max-width:1200px; margin:0 auto; padding:90px 24px; position:relative; display:grid; grid-template-columns:1fr 1fr; gap:60px; }
.u-77 { font-size:12px; letter-spacing:.28em; color:var(--gold-2); font-weight:700; margin-bottom:14px; }
.u-78 { font-size:40px; font-weight:900; letter-spacing:-.02em; margin:0 0 20px; line-height:1.08; }
.u-79 { font-size:17px; line-height:1.65; color:rgba(246,242,232,.72); margin:0 0 24px; }
.u-80 { color:var(--gold-2); font-weight:600; }
.u-81 { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:28px; }
.coverage-tag { font-size:13.5px; font-weight:600; color:rgba(246,242,232,.9); border:1px solid rgba(227,200,120,.3); border-radius:100px; padding:7px 15px; }
.u-83 { text-decoration:none; color:var(--gold-2); font-weight:800; font-size:17px; border-bottom:2px solid var(--gold); padding-bottom:3px; }
.u-84 { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.u-85 { font-size:13px; letter-spacing:.18em; color:var(--gold-2); font-weight:700; margin-bottom:16px; border-bottom:1px solid rgba(227,200,120,.25); padding-bottom:10px; }
.u-86 { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px; font-size:16px; color:rgba(246,242,232,.85); }
.u-87 { max-width:1100px; margin:0 auto; padding:100px 24px; text-align:center; }
.u-88 { font-size:12px; letter-spacing:.28em; color:var(--gold); font-weight:700; margin-bottom:24px; }
.u-89 { font-family:'Libre Baskerville',serif; font-size:30px; line-height:1.45; font-weight:400; margin:0 auto; max-width:880px; color:var(--ink); }
.u-90 { font-style:italic; color:var(--gold); }
.u-91 { margin-top:34px; font-size:14px; letter-spacing:.06em; color:var(--muted); font-weight:600; }
.u-92 { background:var(--ink-2); position:relative; overflow:hidden; }
.u-93 { position:absolute; inset:0; background-image:radial-gradient(circle at 15% 120%,rgba(200,161,62,.2),transparent 50%); }
.u-94 { max-width:1000px; margin:0 auto; padding:90px 24px; text-align:center; position:relative; color:var(--cream); }
.u-95 { font-size:46px; font-weight:900; letter-spacing:-.02em; margin:0 0 16px; line-height:1.05; }
.u-96 { font-size:18px; color:rgba(246,242,232,.72); margin:0 auto 14px; max-width:580px; line-height:1.6; }
.u-97 { text-decoration:none; display:inline-flex; align-items:center; gap:16px; background:var(--gold); color:var(--ink); padding:22px 44px; border-radius:8px; font-weight:900; font-size:30px; letter-spacing:-.01em; margin-top:26px; box-shadow:0 16px 40px rgba(200,161,62,.3); }
.u-98 { font-size:30px; }
.u-99 { margin-top:22px; font-size:15px; color:rgba(246,242,232,.6); }
.u-100 { color:var(--gold-2); }
.u-101 { color:var(--gold-2); text-decoration:none; }
.u-102 { margin-top:18px; font-size:13.5px; color:rgba(246,242,232,.5); }
.u-103 { color:var(--gold-2); text-decoration:underline; text-underline-offset:3px; }
.u-104 { background:var(--ink); color:var(--cream); }
.u-105 { max-width:1200px; margin:0 auto; padding:72px 24px 40px; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; }
.u-106 { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.u-107 { width:46px; height:46px; border:2px solid var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Libre Baskerville',serif; font-weight:700; font-size:20px; color:var(--gold-2); }
.u-108 { font-weight:900; font-size:18px; }
.u-109 { font-size:11px; letter-spacing:.3em; color:var(--gold-2); margin-top:3px; font-weight:600; }
.u-110 { color:rgba(246,242,232,.6); font-size:15px; line-height:1.65; max-width:340px; margin:0; }
.u-111 { font-size:12px; letter-spacing:.2em; color:var(--gold-2); font-weight:700; margin-bottom:18px; }
.u-112 { display:flex; flex-direction:column; gap:12px; font-size:15px; color:rgba(246,242,232,.82); }
.footer-link { color:rgba(246,242,232,.82); text-decoration:none; }
.u-114 { font-size:15px; color:rgba(246,242,232,.82); line-height:1.7; }
.u-115 { margin-top:18px; font-size:13px; color:var(--gold-2); font-weight:700; letter-spacing:.04em; }
.u-116 { border-top:1px solid rgba(246,242,232,.12); }
.u-117 { max-width:1200px; margin:0 auto; padding:22px 24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:13px; color:rgba(246,242,232,.45); }
.u-118 { color:rgba(246,242,232,.45); text-decoration:none; }
.u-119 { position:fixed; left:50%; transform:translateX(-50%); bottom:20px; z-index:60; background:var(--gold); color:var(--ink); padding:15px 28px; border-radius:100px; font-weight:900; font-size:16px; text-decoration:none; display:flex; align-items:center; gap:10px; box-shadow:0 12px 34px rgba(0,0,0,.35); }

/* ============================================================
   RESPONSIVE / MOBILE RULES
   ------------------------------------------------------------
   Everything above is the desktop layout. The rules below only
   apply on narrower screens (tablets and phones) and stack the
   side-by-side columns, shrink the big headings, and tighten
   spacing so the site reads well on a phone.
   Edit these if you want to fine-tune the mobile look.
   ============================================================ */

/* ---- TABLET & SMALL LAPTOP (≤ 900px) ---- */
@media (max-width: 900px) {
  /* Hero: stack the text above the photo instead of side-by-side */
  .container { grid-template-columns: 1fr; gap: 40px; padding: 56px 20px 64px; }
  .u-19 { font-size: 44px; }                 /* hero heading */
  .u-20 { font-size: 17px; max-width: none; }/* hero paragraph */

  /* Trust strip: 4 -> 2 columns */
  .u-41 { grid-template-columns: repeat(2,1fr); gap: 16px; }

  /* Services: 3 -> 2 columns */
  .u-51 { grid-template-columns: repeat(2,1fr); }
  .u-46 { padding: 64px 20px; }

  /* Fleet: 4 -> 2 columns */
  .u-67 { grid-template-columns: repeat(2,1fr); }

  /* Coverage: 2 -> 1 column */
  .u-76 { grid-template-columns: 1fr; gap: 40px; padding: 64px 20px; }

  /* Footer: 3 -> 1 column */
  .u-105 { grid-template-columns: 1fr; gap: 36px; padding: 56px 20px 32px; }

  /* Section headings a touch smaller */
  .u-49, .u-66 { font-size: 34px; }
  .u-78 { font-size: 32px; }
  .u-95 { font-size: 36px; }
  .u-89 { font-size: 24px; }
}

/* ---- PHONE (≤ 640px) ---- */
@media (max-width: 640px) {
  /* Hide the inline nav links — they don't fit on a phone.
     The gold phone-number button stays, and the floating
     "Call now" bar at the bottom covers booking. */
  .u-9 { gap: 0; }
  .nav-link { display: none; }
  .u-3 { padding: 12px 16px; gap: 12px; }
  .header-call-btn { font-size: 13px; padding: 10px 14px; }

  /* Stack everything into a single column */
  .u-41 { grid-template-columns: 1fr; }      /* trust strip */
  .u-51 { grid-template-columns: 1fr; }      /* services */
  .u-67 { grid-template-columns: 1fr; }      /* fleet */
  .u-84 { grid-template-columns: 1fr 1fr; }  /* airports/stations: keep 2 */

  /* Shrink the oversized headings for small screens */
  .u-19 { font-size: 36px; }                 /* hero heading */
  .u-49, .u-66 { font-size: 28px; }          /* services / fleet */
  .u-78 { font-size: 27px; }                 /* coverage */
  .u-95 { font-size: 30px; }                 /* book CTA */
  .u-56 { font-size: 24px; }                 /* services hero card heading */
  .u-89 { font-size: 21px; line-height: 1.4; }/* pledge quote */

  /* Big call button + paddings dialled down */
  .u-97 { font-size: 23px; padding: 18px 28px; gap: 10px; }
  .u-98 { font-size: 23px; }
  .u-52 { padding: 28px; gap: 20px; }        /* services hero card */
  .u-87 { padding: 64px 20px; }              /* heritage section */
  .u-94 { padding: 64px 20px; }              /* book section */

  /* Hero "55+ years" badge sat with a negative offset that can
     spill off-screen on a phone — pull it back inside. */
  .u-36 { bottom: -16px; left: 0; padding: 14px 18px; }

  /* On phones the caption (Manor Cars · Pace Transport / West Ealing)
     and the 55+ badge both sat at the bottom and overlapped.
     Move the caption to the TOP of the photo so they never clash. */
  .u-33 { top: 0; bottom: auto; left: 0; right: auto; text-align: left; padding: 18px 20px; }
  .u-32 { background: linear-gradient(to bottom, rgba(20,17,11,.72), transparent 42%); }

  /* Tighten the hero intro paragraph */
  .u-20 { font-size: 16px; }
}