/* Northline Cars homepage visual refresh. Scoped to main.nl-v4.
   No changes to booking JavaScript, quote payload, routing or payments. */
#main.nl-v4{--nl-ink:#0a2240;--nl-blue:#126bb3;--nl-border:#ddeaf2;color:var(--nl-ink)}
#main.nl-v4 > .hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:#ecf6ff url('https://www.northlinecars.co.uk/assets/nl-refresh/hero-airport.webp') center center/cover no-repeat !important;
  padding:76px 0 70px !important; min-height:630px;
}
#main.nl-v4 > .hero:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(248,252,255,.94) 0%,rgba(247,251,255,.86) 35%,rgba(235,247,255,.18) 68%,rgba(233,245,255,.12) 100%) }
#main.nl-v4 > .hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:95px;z-index:-1;pointer-events:none;background:linear-gradient(0deg,rgba(238,247,253,.9),transparent)}
#main.nl-v4 .hero-grid{position:relative;z-index:1;display:grid !important;grid-template-columns:minmax(0,1.16fr) minmax(365px,.84fr) !important;gap:clamp(22px,4vw,62px) !important;align-items:center !important;width:min(1300px,calc(100% - 68px)) !important;margin:0 auto}
#main.nl-v4 .hero-copy{padding:25px 0 20px;min-width:0}
#main.nl-v4 .hero .eyebrow{color:#115c9a !important;font-size:12px !important;font-weight:750 !important;letter-spacing:.13em;text-transform:uppercase}
#main.nl-v4 .hero h1{font-family:Inter,"Space Grotesk",Arial,sans-serif !important;color:#0a2544 !important;font-size:clamp(38px,4.25vw,63px) !important;font-weight:800 !important;line-height:1.065 !important;letter-spacing:-.048em !important;margin:13px 0 23px !important;max-width:720px}
#main.nl-v4 .hero h1 em{font-style:normal !important;color:#1473bb !important}
#main.nl-v4 .hero-lede{max-width:570px !important;font-size:18px !important;color:#3e5870 !important;line-height:1.55 !important;margin-bottom:25px !important}
#main.nl-v4 .hero-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:27px}
#main.nl-v4 .hero-actions .btn{border-radius:9px !important;min-height:48px;font-weight:750;box-shadow:0 4px 13px rgba(6,43,78,.09)}
#main.nl-v4 .hero-actions .btn-primary{background:#092b4f !important;color:white !important;border-color:#092b4f !important}
#main.nl-v4 .hero-actions .btn-outline{background:rgba(255,255,255,.84) !important;color:#0d2b4b !important;border-color:#a7bfd1 !important}
#main.nl-v4 .trust-strip{display:flex;flex-wrap:wrap;gap:12px 24px;padding-top:15px;border-top:1px solid rgba(57,117,162,.22);max-width:590px}
#main.nl-v4 .trust-item{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:650;color:#214d73 !important}
#main.nl-v4 .trust-dot{width:9px;height:9px;background:#1477bf;box-shadow:0 0 0 4px #d5eaf9;border-radius:50%}
#main.nl-v4 .safety-inline-link{display:inline-block;margin-top:18px;color:#145f9d !important;font-size:12px}
#main.nl-v4 .quote-shell{background:rgba(255,255,255,.985) !important;border:1px solid rgba(206,225,238,.92) !important;border-radius:18px !important;padding:27px 27px 23px !important;box-shadow:0 24px 70px rgba(12,37,63,.22) !important;max-width:520px;width:100%;justify-self:end}
#main.nl-v4 .quote-head h2{font-family:Inter,"Space Grotesk",sans-serif;font-size:26px !important;letter-spacing:-.035em;font-weight:800 !important;color:#0a2544 !important;margin:0 0 4px !important}
#main.nl-v4 .quote-head p{font-size:13px !important;color:#697b89 !important;margin:0 0 15px !important}
#main.nl-v4 .quote-badge{background:#e8f5ff !important;color:#115f9b !important;border-radius:100px;padding:7px 10px;font-size:10px;font-weight:750}
#main.nl-v4 .quote-shell .field label{font-size:12px !important;color:#153b5a !important;font-weight:750 !important}
#main.nl-v4 .quote-shell .northline-input{min-height:44px !important;background:#fff !important;border-color:#cddfea !important;border-radius:9px !important;font-size:13px !important}
#main.nl-v4 .quote-shell .northline-segment{border-radius:9px !important}
#main.nl-v4 .quote-shell .northline-submit{width:100%;min-height:47px;background:#116cb3 !important;color:white !important;border:0 !important;border-radius:9px !important;font-weight:800 !important;box-shadow:0 5px 18px rgba(18,103,174,.17)}
#main.nl-v4 .quote-foot{font-size:11px !important;color:#677c8e !important;line-height:1.6;margin-top:14px}
#main.nl-v4 .nio-home-art{display:none !important}
#main.nl-v4 > .section{padding:66px 0 !important}
#main.nl-v4 .section-heading{margin-bottom:27px}
#main.nl-v4 .section-heading .eyebrow{color:#166fb1;font-weight:800}
#main.nl-v4 .section-heading h2{max-width:850px;color:#0a2544;font-size:clamp(28px,3vw,43px) !important;line-height:1.15 !important;letter-spacing:-.037em !important;font-weight:800;margin:3px 0 12px}
#main.nl-v4 .section-heading p{font-size:15px;color:#577085;max-width:780px;line-height:1.55}
#main.nl-v4 .grid-3{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:18px !important}
#main.nl-v4 .service-card{overflow:hidden;padding:0 0 22px !important;display:flex;flex-direction:column;background:#fff !important;border:1px solid var(--nl-border) !important;border-radius:15px !important;box-shadow:0 8px 25px rgba(18,57,90,.07) !important}
#main.nl-v4 .service-card.featured{background:#fff !important}
#main.nl-v4 .service-card .nl-card-art{display:block;width:100%;height:155px;object-fit:cover;object-position:center;background:#eaf5ff;margin:0 0 17px}
#main.nl-v4 .service-card .service-code{display:none}
#main.nl-v4 .service-card .nio-service-image{display:none !important}
#main.nl-v4 .service-card h3{padding:0 20px;margin:0 0 8px !important;color:#0b2749;font-size:20px !important;letter-spacing:-.03em}
#main.nl-v4 .service-card p{padding:0 20px;margin-bottom:16px !important;color:#617489 !important;font-size:13px !important;line-height:1.5 !important;flex:1}
#main.nl-v4 .service-card .card-link{padding:0 20px;font-weight:750;color:#0c6eaf !important}
#main.nl-v4 .section-ice{background:#eef7fd !important}
#main.nl-v4 .airport-grid{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:17px !important}
#main.nl-v4 .airport-card{display:block;overflow:hidden;padding:0 0 19px !important;border-radius:14px !important;border:1px solid #d9e8f1 !important;background:white !important;box-shadow:0 6px 18px rgba(20,67,110,.06) !important}
#main.nl-v4 .airport-card .nl-airport-img{display:block;width:100%;height:138px;object-fit:cover;object-position:center;margin:0 0 15px;background:#dceef8}
#main.nl-v4 .airport-card .nio-airport-image{display:none !important}
#main.nl-v4 .airport-card .airport-code{display:inline-block;margin:0 17px 5px;color:#2479b9 !important;font-size:10px;font-weight:850}
#main.nl-v4 .airport-card h3{margin:0 17px 6px !important;font-size:18px !important;color:#102d4e}
#main.nl-v4 .airport-card p{margin:0 17px 11px !important;font-size:12px !important;color:#657e92 !important}
#main.nl-v4 .airport-card .card-link{margin:0 17px;font-weight:750}
#main.nl-v4 .airport-card .airport-line{display:none}
#main.nl-v4 .route-list{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:11px !important}
#main.nl-v4 .route-link{background:white;border:1px solid #e2ebf3 !important;border-radius:12px !important;box-shadow:0 2px 13px rgba(20,62,98,.045) !important;padding:15px 19px !important}
#main.nl-v4 .area-cloud{gap:9px !important}
#main.nl-v4 .area-pill{background:white;border:1px solid #d2e4f1;border-radius:30px;font-size:12px;padding:9px 13px}
#main.nl-v4 .section-navy{background:#0a2847 !important}
#main.nl-v4 .cta{border-radius:18px;background:linear-gradient(100deg,#e6f4ff,#f5faff);border:1px solid #d8e8f4}
@media(max-width:1050px){
 #main.nl-v4 > .hero{padding:54px 0 !important;min-height:0;background-position:58% center !important}
 #main.nl-v4 .hero-grid{width:calc(100% - 42px) !important;grid-template-columns:minmax(0,1fr) minmax(320px,.9fr) !important;gap:26px !important}
 #main.nl-v4 .hero h1{font-size:clamp(35px,4.5vw,53px) !important}
 #main.nl-v4 .hero-lede{font-size:16px !important}
}
@media(max-width:790px){
 #main.nl-v4 > .hero{padding:45px 0 42px !important;background-position:64% top !important;background-size:auto 530px !important}
 #main.nl-v4 > .hero:before{background:linear-gradient(180deg,rgba(248,252,255,.84) 0%,rgba(247,251,255,.91) 54%,#eef7fd 80%)}
 #main.nl-v4 .hero-grid{width:calc(100% - 34px) !important;grid-template-columns:minmax(0,1fr) !important;gap:15px !important}
 #main.nl-v4 .hero-copy{padding:0}
 #main.nl-v4 .hero h1{font-size:clamp(34px,7.1vw,48px) !important;max-width:630px;margin:10px 0 16px !important}
 #main.nl-v4 .hero-lede{font-size:16px !important}
 #main.nl-v4 .quote-shell{max-width:640px;justify-self:center}
 #main.nl-v4 .grid-3,#main.nl-v4 .airport-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
 #main.nl-v4 > .section{padding:50px 0 !important}
}
@media(max-width:570px){
 #main.nl-v4 > .hero{background-position:63% 0 !important;background-size:auto 400px !important;padding:28px 0 38px !important}
 #main.nl-v4 > .hero:before{background:linear-gradient(180deg,rgba(248,252,255,.86) 0%,rgba(247,251,255,.92) 47%,#eef7fd 73%)}
 #main.nl-v4 .hero-grid{width:calc(100% - 28px) !important}
 #main.nl-v4 .hero h1{font-size:clamp(32px,9vw,43px) !important;line-height:1.09 !important}
 #main.nl-v4 .hero-lede{font-size:15px !important}
 #main.nl-v4 .hero-actions{gap:9px}
 #main.nl-v4 .hero-actions .btn{width:auto !important;flex:1 1 180px;font-size:12px}
 #main.nl-v4 .trust-strip{gap:10px 16px}
 #main.nl-v4 .quote-shell{padding:20px 16px !important;border-radius:15px !important}
 #main.nl-v4 .quote-head h2{font-size:23px !important}
 #main.nl-v4 .grid-3,#main.nl-v4 .airport-grid,#main.nl-v4 .route-list{grid-template-columns:1fr !important}
 #main.nl-v4 .service-card .nl-card-art{height:170px}
 #main.nl-v4 .airport-card .nl-airport-img{height:166px}
 #main.nl-v4 .section-heading h2{font-size:29px !important}
}


/* Northline mobile fix V2 START */
/* Northline Cars homepage - mobile-only correction, 28 Oct 2026.
   Keep the desktop design, booking form, underlying JS and SEO sections intact. */
@media (max-width: 790px) {
  /* Hard-set the hero order instead of inheriting older display:contents / ordering rules. */
  #main.nl-v4 > section.hero { min-height: 0 !important; padding: 29px 0 42px !important; }
  #main.nl-v4 > section.hero .hero-grid {
    display: flex !important; flex-direction: column !important;
    align-items: stretch !important; justify-content: flex-start !important;
    grid-template-columns: none !important;
    width: calc(100% - 32px) !important; max-width: 620px !important;
    gap: 18px !important; margin: 0 auto !important;
  }
  #main.nl-v4 > section.hero .hero-copy {
    display: block !important; position: relative !important;
    order: 0 !important; padding: 0 !important; margin: 0 !important;
    width: 100% !important; max-width: none !important;
  }
  #main.nl-v4 > section.hero .quote-shell {
    position: relative !important; order: 1 !important;
    display: block !important; margin: 0 !important;
    width: 100% !important; max-width: none !important;
    justify-self: stretch !important; align-self: stretch !important;
  }
  /* The quote form is already visible directly beneath the introductory text. */
  #main.nl-v4 > section.hero .hero-actions { display: none !important; }
  #main.nl-v4 > section.hero .hero-lede { margin: 0 0 12px !important; }
  #main.nl-v4 > section.hero .trust-strip {
    display: none !important; /* shortens the redundant feature list on a phone */
  }
  #main.nl-v4 > section.hero .safety-inline-link {
    display: inline-block !important; margin: 5px 0 0 !important;
    font-size: 12px !important; line-height: 1.45 !important;
  }
  #main.nl-v4 > section.hero:before { background: linear-gradient(180deg,rgba(246,251,255,.91) 0%,rgba(245,251,255,.96) 40%,#eef7fd 76%) !important; }
  #main.nl-v4 > section.hero .hero h1, #main.nl-v4 > section.hero h1 {
    color: #0b2645 !important; line-height: 1.12 !important; letter-spacing: -.035em !important;
  }
  #main.nl-v4 > section.hero .hero-lede { color: #415a72 !important; }
  /* The older shared stylesheet gives these controls conflicting sizes. */
  #main.nl-v4 > section.hero .quote-shell .northline-input {
    font-size: 16px !important; min-height: 48px !important;
  }
  #main.nl-v4 > section.hero .quote-shell .northline-submit {
    height: auto !important; min-height: 50px !important;
    padding: 13px 16px !important; font-size: 15px !important;
  }
  /* Keep specialist services present, but don't show a giant second info panel. */
  #main.nl-v4 .section-navy .split-feature { display: block !important; }
  #main.nl-v4 .section-navy .visual-panel { display: none !important; }
  #main.nl-v4 .section-navy .section-heading h2 {
    color: #fff !important; font-size: clamp(27px, 6vw, 35px) !important;
    line-height: 1.2 !important; letter-spacing: -.025em !important;
  }
  #main.nl-v4 .section-navy .section-heading p { color: #d0e1ef !important; font-size: 14px !important; }
  #main.nl-v4 .section-navy .check-list { margin: 16px 0 21px !important; }
  #main.nl-v4 .section-navy .check-list li { line-height: 1.5 !important; font-size: 13px !important; }
}
@media (max-width: 570px) {
  #main.nl-v4 > section.hero { padding: 24px 0 35px !important; }
  #main.nl-v4 > section.hero .hero-grid { width: calc(100% - 28px) !important; gap: 16px !important; }
  #main.nl-v4 > section.hero h1 { font-size: clamp(29px, 8vw, 37px) !important; margin: 9px 0 12px !important; }
  #main.nl-v4 > section.hero .hero-lede { font-size: 14px !important; line-height: 1.5 !important; }
  #main.nl-v4 > section.hero .quote-shell { padding: 19px 15px !important; border-radius: 16px !important; }
  #main.nl-v4 > .section { padding: 40px 0 !important; }
  #main.nl-v4 .section-navy .section-heading { margin-bottom: 12px !important; }
}

/* Northline mobile fix V2 END */

/* Northline combined finishing V3 START */
/* Northline combined finishing pass: 28 October 2026. Scoped to homepage V4 only. */
#main.nl-v4 .cta h2,
#main.nl-v4 .cta h3,
#main.nl-v4 .cta h2 * { color: #0a2746 !important; }
#main.nl-v4 .cta p { color: #4c667e !important; }
#main.nl-v4 .cta .btn-outline { color: #0b2b49 !important; background: #fff !important; border-color: #b9d3e7 !important; }
#main.nl-v4 .cta { background: linear-gradient(105deg,#e5f4ff 0%,#f6fbff 100%) !important; }
#main.nl-v4 .hero h1 { text-wrap: balance; }
#main.nl-v4 .quote-shell .quote-foot a { color: #176aa9 !important; }
@media (max-width:790px) {
 #main.nl-v4 .cta-actions { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
 #main.nl-v4 .cta-actions .btn { min-height: 44px !important; height: auto !important; width: 100% !important; max-width: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 12px 16px !important; margin: 0 !important; font-size: 14px !important; line-height: 1.3 !important; }
 #main.nl-v4 .section-navy .visual-panel { display: none !important; }
 #main.nl-v4 .hero-actions { display: none !important; }
}
@media (max-width:570px) {
 #main.nl-v4 > section.hero { min-height: 0 !important; }
 #main.nl-v4 > section.hero .hero-grid { gap: 16px !important; }
 #main.nl-v4 .quote-shell .northline-input { min-width: 0 !important; }
 #main.nl-v4 .hero h1 { font-size: clamp(30px,8.4vw,38px) !important; }
 #main.nl-v4 .cta { padding: 24px 18px !important; }
 #main.nl-v4 .cta h2 { font-size: 26px !important; line-height: 1.18 !important; }
 #main.nl-v4 .cta p { font-size: 14px !important; line-height: 1.5 !important; }
}

/* Northline combined finishing V3 END */

/* Northline targeted cleanup V4: compact SEND section; no quote form changes. */
#main.nl-v4 .nl-send-refined {
  background:linear-gradient(105deg,#e8f4fc 0%,#f6fbff 100%) !important;
  padding:clamp(48px,5.6vw,76px) 0 !important;
  color:#0c2946 !important;
}
#main.nl-v4 .nl-send-refined .nl-send-inner {
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(20px,3.5vw,60px);align-items:center;
}
#main.nl-v4 .nl-send-refined .eyebrow {color:#126bb3 !important;}
#main.nl-v4 .nl-send-refined h2 {color:#0b2541 !important;font-size:clamp(30px,3.1vw,47px) !important;line-height:1.13 !important;margin:14px 0 14px !important;max-width:730px !important;}
#main.nl-v4 .nl-send-refined p {color:#46617b !important;font-size:clamp(15px,1.25vw,18px) !important;line-height:1.58 !important;max-width:680px !important;margin:0 !important;}
#main.nl-v4 .nl-send-refined .nl-send-links {display:flex;flex-direction:column;gap:12px;}
#main.nl-v4 .nl-send-refined .nl-send-link {
  display:block;text-decoration:none !important;border:1px solid #cee0f0;background:#fff;
  border-radius:15px;padding:17px 20px;box-shadow:0 6px 19px rgba(11,42,70,.06);color:#0b2541 !important;
  transition:box-shadow .2s ease,transform .2s ease;
}
#main.nl-v4 .nl-send-refined .nl-send-link:hover {box-shadow:0 10px 22px rgba(11,42,70,.12);transform:translateY(-2px);}
#main.nl-v4 .nl-send-refined .nl-send-link strong {display:block;font-size:17px;font-weight:700;}
#main.nl-v4 .nl-send-refined .nl-send-link span {display:block;font-size:13px;color:#527089 !important;margin:5px 0 0;line-height:1.5;}
@media(max-width:790px) {
 #main.nl-v4 .nl-send-refined {padding:36px 0 !important;}
 #main.nl-v4 .nl-send-refined .nl-send-inner {display:block !important;}
 #main.nl-v4 .nl-send-refined h2 {font-size:clamp(27px,7vw,35px) !important;}
 #main.nl-v4 .nl-send-refined p {font-size:14px !important;}
 #main.nl-v4 .nl-send-refined .nl-send-links {margin-top:24px;gap:10px;}
 #main.nl-v4 .nl-send-refined .nl-send-link {padding:15px 17px;}
}
/* Northline targeted cleanup V4 END */

/* Northline mobile hero polish V5 START */
/* Northline Cars mobile hero polish V5.
   A focused visual override; no quotation or payment controls are altered. */
@media (max-width: 790px) {
  /* An almost invisible photograph underneath a form looked like a rendering defect.
     Keep the airport artwork on desktop; give mobile a deliberate clean surface. */
  #main.nl-v4 > section.hero {
    background: #edf6fc !important;
    background-image: none !important;
    min-height: 0 !important;
    padding: 26px 0 24px !important;
  }
  #main.nl-v4 > section.hero::before,
  #main.nl-v4 > section.hero::after {
    display: none !important;
    content: none !important;
  }
  #main.nl-v4 > section.hero .hero-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    grid-template-columns: none !important;
    width: calc(100% - 32px) !important;
    max-width: 600px !important;
    gap: 14px !important;
    margin: 0 auto !important;
  }
  #main.nl-v4 > section.hero .hero-copy {
    display: block !important;
    flex: none !important;
    position: relative !important;
    order: 0 !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #main.nl-v4 > section.hero .hero-copy .eyebrow {
    font-size: 11px !important;
    line-height: 1.5 !important;
    letter-spacing: .085em !important;
    margin: 0 0 9px !important;
  }
  #main.nl-v4 > section.hero .hero-copy h1 {
    font-size: clamp(30px, 7.6vw, 38px) !important;
    line-height: 1.09 !important;
    letter-spacing: -.04em !important;
    margin: 0 !important;
    padding: 0 !important;
    text-wrap: balance;
  }
  #main.nl-v4 > section.hero .hero-copy h1 em { color: #176eaf !important; }
  /* The older mobile styles let these fragments fall underneath the quote card.
     There is already an explanation and booking terms inside that card. */
  #main.nl-v4 > section.hero .hero-copy .hero-lede,
  #main.nl-v4 > section.hero .hero-copy .hero-actions,
  #main.nl-v4 > section.hero .hero-copy .trust-strip,
  #main.nl-v4 > section.hero .hero-copy .safety-inline-link {
    display: none !important;
  }
  #main.nl-v4 > section.hero .quote-shell {
    display: block !important;
    flex: none !important;
    position: relative !important;
    order: 1 !important;
    width: 100% !important;
    max-width: none !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    margin: 0 !important;
    padding: 20px 17px 17px !important;
    border-radius: 17px !important;
    box-shadow: 0 12px 35px rgba(12, 47, 74, .09) !important;
  }
  #main.nl-v4 > section.hero .quote-head {
    display: block !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
  }
  #main.nl-v4 > section.hero .quote-head h2 {
    font-size: 22px !important;
    line-height: 1.18 !important;
    letter-spacing: -.03em !important;
    margin: 0 0 5px !important;
  }
  #main.nl-v4 > section.hero .quote-head p {
    font-size: 13px !important;
    line-height: 1.42 !important;
    margin: 0 !important;
  }
  #main.nl-v4 > section.hero .quote-badge { display: none !important; }
  #main.nl-v4 > section.hero .quote-shell .northline-input {
    min-height: 47px !important;
    font-size: 16px !important;
  }
  #main.nl-v4 > section.hero .quote-shell .northline-submit {
    min-height: 49px !important;
    height: auto !important;
    padding: 12px 15px !important;
    font-size: 15px !important;
  }
  #main.nl-v4 > section.hero .quote-foot {
    margin: 11px 0 0 !important;
    font-size: 11px !important;
    line-height: 1.48 !important;
  }
  /* Avoid a second large blue gap between the quote and the service cards. */
  #main.nl-v4 > section.hero + section.section {
    padding-top: 28px !important;
  }
}
@media (max-width: 390px) {
  #main.nl-v4 > section.hero { padding: 23px 0 20px !important; }
  #main.nl-v4 > section.hero .hero-grid {
    width: calc(100% - 28px) !important;
    gap: 12px !important;
  }
  #main.nl-v4 > section.hero .hero-copy h1 {
    font-size: 30px !important;
  }
  #main.nl-v4 > section.hero .quote-shell { padding: 18px 15px 15px !important; }
}

/* Northline mobile hero polish V5 END */

/* Northline mobile hero V6 START */
/* Northline mobile hero V6 - follows V5 and overrides only its mobile styling.
   Makes airport artwork visible, adds proper H1-to-form spacing, and retains booking functionality. */
@media (max-width:790px) {
  #main.nl-v4 > section.hero {
    background-color: #edf6fc !important;
    background-image:
      linear-gradient(180deg,
        rgba(241,249,255,.83) 0%,
        rgba(241,249,255,.73) 29%,
        rgba(241,249,255,.30) 43%,
        rgba(237,247,254,.85) 65%,
        #edf6fc 86%),
      url('https://www.northlinecars.co.uk/assets/nl-refresh/hero-airport.webp') !important;
    background-repeat: no-repeat, no-repeat !important;
    background-size: 100% 490px, auto 490px !important;
    background-position: center top, 66% top !important;
    padding: 28px 0 26px !important;
  }
  #main.nl-v4 > section.hero .hero-grid {
    gap: 21px !important;
    row-gap: 21px !important;
  }
  #main.nl-v4 > section.hero .hero-copy {
    margin: 0 !important;
    padding: 0 !important;
  }
  #main.nl-v4 > section.hero .hero-copy .eyebrow {
    color: #1f6395 !important;
    font-size: 10px !important;
    letter-spacing: .09em !important;
    line-height: 1.4 !important;
    margin: 0 0 13px !important;
  }
  #main.nl-v4 > section.hero .hero-copy h1 {
    color: #0b2946 !important;
    font-size: clamp(27px, 6.7vw, 33px) !important;
    font-weight: 780 !important;
    line-height: 1.15 !important;
    letter-spacing: -.034em !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 25ch !important;
    text-wrap: balance;
  }
  #main.nl-v4 > section.hero .hero-copy h1 em {
    color: #2b6c9e !important;
  }
  /* A modest artwork reveal between the H1 and the booking card.
     Uses the existing hero image; it is not another hero illustration. */
  #main.nl-v4 > section.hero .hero-copy::after {
    content: '';
    display: block;
    height: 114px;
    width: calc(100% + 16px);
    margin: 12px -8px -5px;
    background-image:
      linear-gradient(90deg,rgba(237,246,252,.78),rgba(237,246,252,.02) 52%,rgba(237,246,252,.06)),
      url('https://www.northlinecars.co.uk/assets/nl-refresh/hero-airport.webp');
    background-repeat: no-repeat;
    background-size: 100% 100%, auto 290px;
    background-position: center, 86% 69%;
    -webkit-mask-image: linear-gradient(to bottom,transparent,black 13%,black 84%,transparent);
    mask-image: linear-gradient(to bottom,transparent,black 13%,black 84%,transparent);
    pointer-events: none;
  }
  #main.nl-v4 > section.hero .quote-shell {
    margin: 0 !important;
    padding: 20px 17px 18px !important;
    border: 1px solid #d7e6f1 !important;
    box-shadow: 0 11px 34px rgba(17,52,81,.10) !important;
  }
}
@media (max-width:390px) {
  #main.nl-v4 > section.hero .hero-copy h1 { font-size: 27px !important; }
  #main.nl-v4 > section.hero .hero-copy::after { height: 100px; }
  #main.nl-v4 > section.hero .hero-grid { gap: 18px !important; row-gap: 18px !important; }
}

/* Northline mobile hero V6 END */

/* Northline heading layout V7 START */
/* Northline heading layout V7 - precise phone typography and spacing only.
   Desktop layout, quote form and full-width airport illustration are preserved. */
@media (max-width:790px) {
  #main.nl-v4 > section.hero {
    padding: 28px 0 66px !important;
    background-color: #edf6fc !important;
    background-image:
      linear-gradient(180deg,
        rgba(241,249,255,.88) 0%,
        rgba(241,249,255,.78) 24%,
        rgba(241,249,255,.52) 49%,
        rgba(237,247,254,.55) 76%,
        rgba(237,247,254,.80) 100%),
      url('https://www.northlinecars.co.uk/assets/nl-refresh/hero-airport.webp') !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100%, auto 850px !important;
    background-position: center top, 74% top !important;
  }
  #main.nl-v4 > section.hero .hero-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 28px !important;
    row-gap: 28px !important;
    width: calc(100% - 32px) !important;
  }
  #main.nl-v4 > section.hero .hero-copy {
    padding: 0 12px !important;
    margin: 0 !important;
    width: 100% !important;
  }
  #main.nl-v4 > section.hero .hero-copy::after {
    content: none !important;
    display: none !important;
  }
  #main.nl-v4 > section.hero .hero-copy .eyebrow {
    margin: 0 0 13px !important;
    font-size: 10px !important;
    line-height: 1.45 !important;
    letter-spacing: .10em !important;
  }
  #main.nl-v4 > section.hero .hero-copy h1 {
    font-family: Inter, 'Space Grotesk', Arial, sans-serif !important;
    font-size: clamp(28px,7.5vw,34px) !important;
    font-weight: 780 !important;
    letter-spacing: -.038em !important;
    line-height: 1.18 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    text-wrap: normal !important;
    overflow-wrap: normal !important;
  }
  #main.nl-v4 > section.hero .hero-copy h1 .nl-headline-primary,
  #main.nl-v4 > section.hero .hero-copy h1 em.nl-headline-location {
    display: block !important;
  }
  #main.nl-v4 > section.hero .hero-copy h1 em.nl-headline-location {
    font-style: normal !important;
    color: #2177b3 !important;
    margin: 4px 0 0 !important;
  }
  #main.nl-v4 > section.hero .quote-shell {
    margin: 0 !important;
    transform: none !important;
  }
}
@media (max-width:390px) {
  #main.nl-v4 > section.hero .hero-grid {
    width: calc(100% - 28px) !important;
    gap: 26px !important;
    row-gap: 26px !important;
  }
  #main.nl-v4 > section.hero .hero-copy { padding: 0 10px !important; }
  #main.nl-v4 > section.hero .hero-copy h1 { font-size: 28px !important; }
}

/* Northline heading layout V7 END */

/* NORTHLINE MOBILE SPACING V8 */
@media (max-width: 790px) {

  #main.nl-v4 > section.hero {
    padding-top: 36px !important;
  }

  #main.nl-v4 > section.hero .hero-grid {
    width: calc(100% - 28px) !important;
    max-width: 600px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    gap: 48px !important;
    row-gap: 48px !important;
  }

  #main.nl-v4 > section.hero .hero-copy {
    padding: 0 8px !important;
  }

  #main.nl-v4 > section.hero .hero-copy .eyebrow {
    margin-bottom: 17px !important;
  }

  #main.nl-v4 > section.hero .hero-copy h1 {
    font-size: clamp(28px, 7.1vw, 32px) !important;
    line-height: 1.23 !important;
    letter-spacing: -0.032em !important;
    font-weight: 750 !important;
  }

  #main.nl-v4 > section.hero .hero-copy h1 em.nl-headline-location {
    margin-top: 10px !important;
  }

  #main.nl-v4 > section.hero .quote-shell {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 21px 18px !important;
  }
}

@media (max-width: 390px) {
  #main.nl-v4 > section.hero .hero-grid {
    gap: 44px !important;
    row-gap: 44px !important;
  }

  #main.nl-v4 > section.hero .hero-copy h1 {
    font-size: 28px !important;
  }
}

/* Northline mobile hero alignment V9 */
@media (max-width:790px) {

  #main.nl-v4 > section.hero .hero-grid {
    gap: 68px !important;
    row-gap: 68px !important;
  }

  #main.nl-v4 > section.hero .hero-copy {
    text-align: center !important;
    padding: 0 10px !important;
  }

  #main.nl-v4 > section.hero .hero-copy .eyebrow {
    text-align: center !important;
    margin-bottom: 20px !important;
    letter-spacing: .08em !important;
  }

  #main.nl-v4 > section.hero .hero-copy h1 {
    text-align: center !important;
    font-size: clamp(28px, 7.2vw, 34px) !important;
    line-height: 1.22 !important;
    letter-spacing: -.035em !important;
    max-width: 520px !important;
    margin: 0 auto !important;
  }

  #main.nl-v4 > section.hero .hero-copy h1 em.nl-headline-location {
    display: block !important;
    margin-top: 12px !important;
  }

  #main.nl-v4 > section.hero .quote-shell {
    margin-top: 0 !important;
  }
}

@media (max-width:390px) {
  #main.nl-v4 > section.hero .hero-grid {
    gap: 64px !important;
    row-gap: 64px !important;
  }
}

/* Extra space between mobile headline and booking form */
@media (max-width: 790px) {
  #main.nl-v4 > section.hero .hero-copy {
    padding-bottom: 34px !important;
  }
}

/* Mobile headline-to-booking spacing V11 */
@media (max-width: 790px) {

  #main.nl-v4 > section.hero .hero-grid {
    gap: 0 !important;
    row-gap: 0 !important;
  }

  #main.nl-v4 > section.hero .hero-copy {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  #main.nl-v4 > section.hero .quote-shell {
    margin-top: 34px !important;
  }
}