/* Layout glue on top of the mockup's identity. No colour literals: everything comes from the
   mockup's own custom properties, so this file cannot fight the brand. */

/* ------------------------------------------------------------------ FOOTER
   Three bands inside the mockup's own dark footer: the identity band it already had, a sitemap
   band, and a legal base line. The sitemap band matters more than it looks: brand.css hides the
   header nav below 1000px, so on a phone THIS is the only navigation on the site. That is also
   why `footer nav.footer-nav` is specific enough to beat the `nav{display:none}` rule rather than
   relying on source order. */
.footer-links{margin:0 0 14px;font-size:13px;opacity:.75}
.footer-links a{text-decoration:none}
.footer-links a:hover{text-decoration:underline}

footer nav.footer-nav{
  display:grid; grid-template-columns:repeat(4,1fr); gap:34px;
  margin-top:54px; padding-top:38px; border-top:1px solid rgba(255,255,255,.16)}
.footer-nav h4{
  color:var(--sea,#FFE802); font-size:9px; font-weight:800;
  letter-spacing:.13em; text-transform:uppercase; margin:0 0 16px}
.footer-nav ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.footer-nav li{margin:0}
.footer-nav a{
  color:#d6d6d6; font-size:13px; font-weight:500; line-height:1.35;
  text-decoration:none; text-underline-offset:5px}
.footer-nav a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--sea,#FFE802);
  text-decoration-thickness:2px}

.footer-base{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 30px;
  margin-top:44px; padding-top:24px; border-top:1px solid rgba(255,255,255,.16)}
.footer-base p{margin:0}
.footer-powered a{color:var(--sea,#FFE802);font-weight:800;text-decoration:none}
.footer-powered a:hover{text-decoration:underline}

@media (max-width:1000px){
  footer nav.footer-nav{grid-template-columns:1fr 1fr;gap:30px}
}
@media (max-width:620px){
  footer nav.footer-nav{grid-template-columns:1fr;gap:26px;margin-top:40px}
  .footer-base{margin-top:34px}
}

/* ------------------------------------------------- LEGAL AND POLICY PAGES
   The mockup has no long-form prose scale: its h2 is a 82px display face, which is right for a
   headline and unreadable as a clause heading. These rules give the legal pages a reading scale
   without touching brand.css. */
.legal{padding:96px 0 120px}
.legal-block{max-width:760px;margin:0 0 56px}
.legal-block:last-child{margin-bottom:0}
.legal h2{font-size:clamp(26px,3.1vw,38px);letter-spacing:-.03em;margin:0 0 18px}
.legal p{color:var(--muted,#696969);font-size:16px;line-height:1.7;margin:0 0 16px}
.legal p:last-child{margin-bottom:0}
.legal strong{color:var(--harbour,#2a2a2a)}
.legal ul{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:12px}
.legal li{
  color:var(--muted,#696969);font-size:15px;line-height:1.6;
  padding-left:20px;position:relative}
.legal li:before{
  content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;
  background:var(--sea,#FFE802)}
.legal li b{color:var(--harbour,#2a2a2a);font-weight:800}
.legal table{width:100%;border-collapse:collapse;margin:0 0 18px}
.legal th,.legal td{
  text-align:left;vertical-align:top;padding:13px 16px 13px 0;
  border-bottom:1px solid var(--line,#2a2a2a2b);font-size:14px;line-height:1.55}
.legal th{
  color:var(--harbour,#2a2a2a);font-weight:800;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;border-bottom-color:var(--harbour,#2a2a2a)}
.legal td{color:var(--muted,#696969)}
.legal td:first-child{color:var(--harbour,#2a2a2a);font-weight:700;width:34%}
.legal-updated{
  color:var(--sea-deep,#2a2a2a);font-size:10px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;margin:0 0 44px}
.legal a{color:var(--harbour,#2a2a2a);font-weight:700;text-decoration:underline;
  text-decoration-color:var(--sea,#FFE802);text-decoration-thickness:3px;text-underline-offset:4px}

/* THE LEAD-CAPTURE PILL.
   Persistent, thumb-reachable, and present on every page including the deep article pages where
   a visitor is furthest from the form. It is the single highest-leverage element on the site:
   the whole point of this site is a qualified enquiry, not a pageview. */
.contact-pill{
  position:fixed; right:22px; bottom:22px; z-index:60;
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px; border-radius:999px;
  font-weight:800; font-size:15px; letter-spacing:-.01em; text-decoration:none;
  background:var(--signal,#FFE802); color:var(--ink,#2A2A2A);
  border:2px solid var(--ink,#2A2A2A);
  box-shadow:0 10px 30px rgba(17,17,17,.18);
  transition:transform 180ms cubic-bezier(.2,.75,.25,1), box-shadow 180ms cubic-bezier(.2,.75,.25,1);
}
.contact-pill:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(17,17,17,.24)}
.contact-pill:focus-visible{outline:3px solid var(--ink,#2A2A2A);outline-offset:3px}
.contact-pill .dot{
  width:9px;height:9px;border-radius:999px;background:var(--ink,#2A2A2A);flex:0 0 9px}

@media (max-width:679px){
  .contact-pill{right:14px;bottom:14px;left:14px;justify-content:center;padding:16px 20px}
}
@media (prefers-reduced-motion:reduce){
  .contact-pill{transition:none}
}