/* London PWS brand layer. Loaded after page and shared chrome styles, on every page.
   Final logo suite (client, 15 Oct 2026): one 2267 x 610 artboard for the icon + name lock-up,
   so every placement sizes by width and the height follows from the same ratio. */
:root {
  --lp-deep: #092F3E;        /* logo dark: header text, footer, deep section bands */
  --lp-deep-2: #0E3D50;
  --lp-sage: #589480;        /* logo green */
  --lp-gold: #C99A4B;
  --lp-gold-hover: #DDB063;
  --lp-gold-band: #E0B462;   /* the warm gold call-to-action band */
  /* Legacy site tokens follow the logo: headings, page-header bands and green buttons on inner pages
     move from the old olive green (#3F5952) to the logo's deep colour. */
  --green: #092F3E;
  --green-hover: #0E3D50;
  /* One gold everywhere. The older sticky bar and inner pages used #C4964A, which sat beside the new gold as a different shade. */
  --gold: #C99A4B;
  --gold-hover: #DDB063;
}

/* ── Logo: header, drawer, footer ── */
.nav-logo { flex: 0 0 auto; display: flex; align-items: center; }
@media(max-width:1120px){.nav-logo{flex:0 0 auto;min-width:0;}}
.nav-logo img {
  display: block;
  width: 244px;
  height: auto;
  max-width: 100%;
  aspect-ratio: 2267 / 610;
  object-fit: contain;
}
.nav.is-compact .nav-logo img { width: 212px; height: auto; }
.mnav-brand { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; }
.mnav-brand img {
  display: block;
  width: 228px;
  height: auto;
  max-width: 100%;
  aspect-ratio: 2267 / 610;
  object-fit: contain;
}
.footer-brand-link { display: inline-block; max-width: 100%; }
.footer .footer-brand-logo {
  display: block;
  width: 320px;
  height: auto;
  max-width: 100%;
  aspect-ratio: 2267 / 610;
  margin: 0;
  object-fit: contain;
  filter: none;
}
@media (min-width: 1025px) and (max-width: 1199px) {
  .nav-logo img { width: 214px; }
  .nav-links { gap: 18px; }
  .nav-phone { font-size: 18px !important; }
}
@media (max-width: 767px) {
  .nav-logo img { width: 190px; height: auto; }
  .nav.is-compact .nav-logo img { width: 166px; height: auto; }
  .mnav-brand img { width: 214px; }
  .footer .footer-brand-logo { width: 270px; }
}
@media (max-width: 359px) {
  .nav-logo img { width: 176px; }
  .mnav-brand img { width: 196px; }
}

/* ── Header height: the logo artwork is cropped tight to its artboard, so the bar needs clear space
   above and below it (at least 12px at rest, 9px when the bar shrinks on scroll). ── */
.nav { height: 88px; }
.nav-inner { height: 88px; }
.nav-logo img { width: 236px; }
.nav.is-compact { height: 70px; }
.nav.is-compact .nav-inner { height: 70px; }
.nav.is-compact .nav-logo img { width: 196px; }
@media (min-width: 1025px) and (max-width: 1199px) { .nav-logo img { width: 218px; } .nav.is-compact .nav-logo img { width: 196px; } }
@media (max-width: 1024px) {
  .nav { height: 76px; }
  .nav-inner { height: 76px; }
  .nav.is-compact { height: 64px; }
  .nav.is-compact .nav-inner { height: 64px; }
}

/* ── Deep brand colour: footer. The body's bottom padding (room for the mobile sticky bar) moves
   inside the footer so no cream strip shows under it. ── */
body { padding-bottom: 0 !important; }
.footer { background: var(--lp-deep); border-top: 5px solid var(--lp-gold); padding-bottom: 28px; }
@media (max-width: 1024px) { .footer { padding-bottom: 80px; } }
.footer-brand-link { margin-bottom: 18px; }
@media (min-width: 1360px) { .nav-inner { width: min(84vw, 1280px); } }

/* ── Gold is the action colour: header button, shared gold buttons ── */
.nav-quote,
.btn-gold {
  background: var(--lp-gold);
  color: var(--lp-deep);
}
.nav-quote:hover,
.btn-gold:hover {
  background: var(--lp-gold-hover);
  color: var(--lp-deep);
}

/* ── Buttons lift slightly on hover. Nothing flashy; off for reduced-motion users ── */
.nav-quote,
.btn-gold,
.btn-green,
.hero-btn,
.btn-deep,
.btn-deep-outline {
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.nav-quote:hover,
.btn-gold:hover,
.btn-green:hover,
.hero-btn:hover,
.btn-deep:hover,
.btn-deep-outline:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(9, 47, 62, .2);
}
.nav-quote:active,
.btn-gold:active,
.btn-green:active,
.hero-btn:active,
.btn-deep:active,
.btn-deep-outline:active { transform: translateY(0); box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .nav-quote, .btn-gold, .btn-green, .hero-btn, .btn-deep, .btn-deep-outline { transition: none; }
  .nav-quote:hover, .btn-gold:hover, .btn-green:hover, .hero-btn:hover, .btn-deep:hover, .btn-deep-outline:hover { transform: none; box-shadow: none; }
}

/* Mobile drawer panel uses the brand deep colour too. */
.mnav { background: var(--lp-deep); }

/* ── Sticky contact pill: no WhatsApp green at all, so nothing fights the gold.
   Gold pill, deep navy circle, white WhatsApp icon (the icon shape is what people recognise). ── */
.sticky-bar .sticky-bar-wa,
.whatsapp-fab { background: var(--lp-deep); color: #fff; }
.sticky-bar .sticky-bar-wa:hover,
.whatsapp-fab:hover { background: var(--lp-deep-2); color: #fff; }
.sticky-bar .sticky-bar-wa { width: 48px; height: 48px; box-shadow: none; }
.sticky-bar .sticky-bar-wa svg { width: 26px; height: 26px; }
/* Desktop pill: the same 8px of space above, below and to the right of the circle. */
@media (min-width: 1024px) { .sticky-bar .sticky-bar-inner { padding: 6px 8px 6px 22px; gap: 14px; } }
.sticky-bar-inner a { color: var(--lp-deep) !important; }
.sticky-bar-inner a.sticky-bar-wa { color: #fff !important; }
.sticky-bar .sticky-bar-text { color: var(--lp-deep); }

/* ───────────── Whole-site polish: legibility and layout (audit of every page, 17 Oct 2026) ───────────── */

/* Hero bands are always dark, so their text is always light. The Advice hub and the five advice
   articles never set this, so their title, intro and breadcrumb rendered dark on dark. */
.page-header h1 { color: #fff; }
.page-header p { color: rgba(255, 255, 255, .88); }
.page-header .advice-crumb,
.page-header .advice-crumb a { color: rgba(255, 255, 255, .86); }
.page-header .advice-crumb a:hover { color: #fff; }

/* A section whose only content is one narrow reading column sat hard against the left edge with the
   right half empty, which read as unfinished on wide screens. Centre it. */
main section > .container > :only-child { margin-left: auto; margin-right: auto; }

/* Small labels that were too faint for their background. */
.situations .hero-card__audience { color: #3D7560; }
.steps .sec-label span,
.featured-testimonial .sec-label span { color: #F0CD8E !important; }
.cta-panel .cta-kicker span { color: #8A6420 !important; }
.cta-panel .cta-note { color: rgba(9, 47, 62, .82) !important; }
.error-code { color: #8A6420 !important; }
.error-actions .btn-outline-gold { color: var(--lp-deep) !important; border-color: var(--lp-gold) !important; }
.error-actions .btn-outline-gold:hover { background: rgba(201, 154, 75, .16) !important; }

/* Borough pages and the Areas hub: the right-hand column (map or checklist) stays in view while the left column scrolls. */
@media (min-width: 900px) { .area-layout > :last-child { position: sticky; top: 112px; } }

/* ───────────── Client round 4 (18 Oct 2026) ───────────── */

/* Hero: short headline plus the two-line subheading directly under it. */
.hero--v3 h1 { margin-bottom: clamp(12px, 1.6vw, 18px); }
.hero-v3__sub {
  margin: 0 0 clamp(22px, 3vw, 30px);
  max-width: 36em;
  font-size: clamp(16.5px, 4.4vw, 19px);
  line-height: 1.55;
  color: rgba(255, 255, 255, .94);
  text-shadow: 0 1px 18px rgba(9, 47, 62, .5);
}
@media (min-width: 768px) { .hero-v3__sub { font-size: clamp(18px, 1.55vw, 21px); } }
@media (max-width: 380px) { .hero-v3__sub { font-size: 15.5px; margin-bottom: 18px; } }

/* Floating contact: desktop card, mobile bar. Replaces the old phone/WhatsApp pill. */
.lp-dock { position: relative; z-index: 800; }
.lp-dock__card {
  position: fixed; right: 22px; bottom: 22px; width: 318px;
  display: grid; gap: 10px; padding: 12px;
  background: #fff; border: 1px solid rgba(9, 47, 62, .1); border-radius: 16px;
  box-shadow: 0 16px 44px rgba(9, 47, 62, .26);
  transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
}
.lp-dock__who { display: flex; align-items: center; gap: 12px; }
.lp-dock__avatar { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid var(--lp-gold); background: var(--lp-deep-2); }
.lp-dock__id { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.lp-dock__id strong { font: 700 14.5px/1.3 Inter, system-ui, sans-serif; color: var(--lp-deep); }
.lp-dock__phone { font: 600 15px/1.3 Inter, system-ui, sans-serif; color: var(--lp-deep); text-decoration: none; }
.lp-dock__phone:hover { text-decoration: underline; text-underline-offset: 3px; }
.lp-dock__wa { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--lp-deep); color: #fff; transition: transform .2s ease, background-color .2s ease; }
.lp-dock__wa:hover { background: var(--lp-deep-2); transform: translateY(-2px); }
.lp-dock__wa svg { width: 22px; height: 22px; }
.lp-dock__cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; border-radius: 8px; background: var(--lp-gold); color: var(--lp-deep);
  font: 700 15px/1 Inter, system-ui, sans-serif; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.lp-dock__cta:hover { background: var(--lp-gold-hover); color: var(--lp-deep); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(9, 47, 62, .2); }
.lp-dock a:focus-visible { outline: 3px solid var(--lp-deep); outline-offset: 2px; }
.lp-dock__bar { display: none; }
/* Out of the way whenever a form, the fee notes or the footer is on screen. */
.details-in-view .lp-dock__card,
.details-in-view .lp-dock__bar { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); }
@media (max-width: 1023px) {
  .lp-dock__card { display: none; }
  .lp-dock__bar {
    position: fixed; left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: 1fr 1.2fr 1.1fr; gap: 8px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: var(--lp-deep); box-shadow: 0 -6px 22px rgba(9, 47, 62, .28);
    transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
  }
  .lp-dock__b {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 42px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .3);
    color: #fff; font: 700 14px/1 Inter, system-ui, sans-serif; text-decoration: none;
  }
  .lp-dock__b svg { width: 18px; height: 18px; flex: 0 0 auto; }
  .lp-dock__b--appoint { background: var(--lp-gold); border-color: var(--lp-gold); color: var(--lp-deep); }
}
@media (max-width: 359px) { .lp-dock__b { font-size: 13px; gap: 5px; } .lp-dock__b svg { width: 16px; height: 16px; } }
@media (prefers-reduced-motion: reduce) { .lp-dock__cta:hover, .lp-dock__wa:hover { transform: none; box-shadow: none; } }

/* Building Owner page: "What we need from you". */
.needs-band { background: var(--lp-deep); color: #fff; padding: clamp(52px, 7vw, 92px) 0; }
.needs-band__inner { display: grid; gap: 32px; align-items: center; }
.needs-band h2 { margin: 0 0 14px; color: #fff; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.06; letter-spacing: -.016em; font-weight: 600; }
.needs-band .sec-label span { color: #F0CD8E !important; }
.needs-band__intro p { margin: 0 0 24px; max-width: 26em; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; color: rgba(255, 255, 255, .9); }
.needs-band__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.needs-band__list li { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.5; color: #fff; }
.needs-band__n { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid var(--lp-gold); border-radius: 50%; color: var(--lp-gold); font: 700 18px/1 'Playfair Display', Georgia, serif; }
@media (min-width: 900px) { .needs-band__inner { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; } }

/* Hero subheading: wide enough for each sentence to sit on one line on desktop, with the shade carried further right to keep it legible. */
@media (min-width: 900px) {
  .hero-v3__copy { max-width: min(800px, 100%); }
  .hero-v3__sub { max-width: none; font-size: clamp(17px, 1.42vw, 20px); }
  .hero-v3__shade {
    background:
      linear-gradient(90deg, rgba(9, 47, 62, .92) 0%, rgba(9, 47, 62, .82) 38%, rgba(9, 47, 62, .52) 60%, rgba(9, 47, 62, .14) 80%, rgba(9, 47, 62, 0) 92%),
      linear-gradient(0deg, rgba(9, 47, 62, .35) 0%, rgba(9, 47, 62, 0) 38%);
  }
}

/* Phones: the text block starts higher now, so the bottom-up shade reaches further up the photo. */
@media (max-width: 767px) {
  .hero-v3__shade { background: linear-gradient(0deg, rgba(9, 47, 62, .95) 0%, rgba(9, 47, 62, .86) 55%, rgba(9, 47, 62, .56) 76%, rgba(9, 47, 62, .16) 100%); }
}
.needs-band__list li > span:last-child { text-wrap: balance; }

/* ── Review follow-ups (18 Oct 2026) ── */
/* Keyboard focus on the dock must be visible: white on the deep bar, deep on the white card. */
.lp-dock__bar a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* Phone bar buttons meet the 44px minimum touch target. */
@media (max-width: 1023px) { .lp-dock__b { min-height: 46px; } }
/* Slightly tighter desktop card so it covers less of the page. */
@media (min-width: 1024px) { .lp-dock__card { width: 308px; padding: 10px; gap: 8px; } .lp-dock__avatar { width: 42px; height: 42px; } }
/* Subheading: each sentence balanced on its own line, so no stranded last word. */
.hero-v3__sub-line { display: block; text-wrap: balance; }
/* "What we need from you": no stranded words in the heading, no forced mid-sentence breaks in the list. */
.needs-band h2 { text-wrap: balance; }
.needs-band__list li > span:last-child { text-wrap: pretty; }
/* Mid-width screens (tablet landscape, small laptops): more shade behind the second sentence, and a crop that shows the white extension. */
@media (min-width: 768px) and (max-width: 1279px) {
  .hero-v3__shade { background: linear-gradient(90deg, rgba(9, 47, 62, .93) 0%, rgba(9, 47, 62, .86) 44%, rgba(9, 47, 62, .6) 66%, rgba(9, 47, 62, .2) 86%, rgba(9, 47, 62, 0) 96%), linear-gradient(0deg, rgba(9, 47, 62, .35) 0%, rgba(9, 47, 62, 0) 38%); }
  .hero-v3__sub { text-shadow: 0 1px 14px rgba(9, 47, 62, .75); }
}
@media (min-width: 768px) and (max-width: 1023px) { .hero-v3__bg img { object-position: 70% 40%; } }
/* Narrow tablets: keep the text inside the darker left of the photo. */
@media (min-width: 768px) and (max-width: 899px) { .hero-v3__copy { max-width: 540px; } }
@media (min-width: 768px) and (max-width: 899px) { .hero-v3__actions { grid-template-columns: 1fr; max-width: 360px; } }