*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--anchor-offset)}
body{font-family:var(--body);color:var(--slate);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(44px,5vw,72px)}
/* The clamp above floors at 44px either side, which is fine on tablets and up
   but eats roughly a quarter of a phone screen's width. Give phones a
   narrower, fixed margin instead. */
@media(max-width:640px){.wrap{padding-left:20px;padding-right:20px}}
h1,h2,h3{font-family:var(--display);color:var(--navy);letter-spacing:-.02em;line-height:1.1}
a{color:inherit;text-decoration:none}
.num-feat{font-feature-settings:"tnum"}
.gic{display:inline-block;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-ink);font-weight:600;margin-bottom:10px}

/* Shared header, used identically by every page. Sticky, and the breadcrumb trail
   is rendered INSIDE it (see header.njk), so the nav bar and the "you are here"
   line both stay pinned as you scroll, exactly as in the prototype. */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-bottom:.5px solid var(--line)}
.bar{display:flex;align-items:center;gap:30px;height:66px}
.logo{display:flex;align-items:center}
.logo img{display:block;height:30px;width:auto}
nav ul{list-style:none;display:flex;align-items:center;gap:26px;font-size:14px;color:var(--slate)}
.navitem{position:relative;cursor:pointer;display:flex;align-items:center;gap:5px;padding:22px 0}
.navitem:hover{color:var(--navy)}
/* Current-section highlight, on every page's nav */
nav a.active{color:var(--navy);font-weight:600}
.caret{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px;opacity:.6}
/* Scoped to .navitem: an unscoped .drop also caught the machine page's map-pin
   wrapper and hid it, so keep every dropdown rule inside the nav item */
.navitem .drop{position:absolute;top:60px;left:-16px;background:var(--bg);border:.5px solid var(--line);border-radius:12px;box-shadow:0 18px 40px -18px rgba(8,46,74,.28);padding:10px;min-width:260px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.16s ease}
.navitem:hover .drop,.navitem:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0)}
.navitem .drop a{display:block;padding:9px 12px;border-radius:8px;font-family:var(--body);font-size:14px;color:var(--navy)}
.navitem .drop a span{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.navitem .drop a:hover{background:var(--bg-soft)}
.signin{margin-left:auto;background:var(--navy);color:var(--bg);padding:9px 18px;border-radius:var(--btn-radius);font-size:14px;font-weight:500}
.signin:hover{background:var(--navy-2)}
.burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;color:var(--navy);padding:6px}
.burger .icon-close{display:none}
.burger.open .icon-menu{display:none}
.burger.open .icon-close{display:inline-block}
#m-nav{display:none;border-bottom:.5px solid var(--line);background:var(--bg);padding:10px 0}
#m-nav.open{display:block}
#m-nav a{display:block;padding:11px 28px;font-size:15px;color:var(--navy)}
#m-nav a:hover{background:var(--bg-soft)}
/* Sub-items under "What we do", indented to show they nest under it, matching the desktop mega-menu */
#m-nav a.sub{padding-left:44px;font-size:14px;color:var(--slate)}
#m-nav a.active{color:var(--navy);font-weight:600}
/* Talk to us reads as a standout button in the mobile menu, not just another row */
#m-nav a.m-cta{margin-top:6px;margin-bottom:4px;margin-left:20px;margin-right:20px;padding-top:var(--btn-pad-y);padding-bottom:var(--btn-pad-y);padding-left:var(--btn-pad-x);padding-right:var(--btn-pad-x);border-radius:var(--btn-radius);background:var(--cyan);color:var(--ink-on-cyan);font-weight:600;text-align:center}
#m-nav a.m-cta:hover{background:var(--cyan-light)}
@media(max-width:760px){
  nav ul,.signin{display:none}
  .burger{display:block}
  /* Drop the frosted-glass blur on mobile: Android Chrome has a known rendering
     fault where a blurred position:sticky header's contents (logo, burger) drop
     out mid-scroll and only reappear once scrolling stops. A solid background
     has no such fault; desktop keeps the blur. */
  header{background:var(--bg);backdrop-filter:none}
}

/* Temporary "same Gmaven, new website" strip (see partials/notice.njk). It sits
   ABOVE the sticky header in normal flow, so it scrolls away and never
   interferes with the pinned nav bar, the breadcrumb, or --anchor-offset.
   Hidden until site.js reveals it, so the [hidden] rule must beat the flex
   below, otherwise a dismissed strip would still show. Delete this block when
   the notice partial is removed. */
.site-notice{background:var(--cyan-tint);border-bottom:.5px solid var(--line);font-size:14px;color:var(--navy)}
.site-notice[hidden]{display:none}
.site-notice-in{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.site-notice p{margin:0}
.site-notice button{font-family:var(--body);font-size:13px;font-weight:600;color:var(--navy);background:none;border:1px solid var(--border-soft);border-radius:var(--btn-radius);padding-top:5px;padding-bottom:5px;padding-left:14px;padding-right:14px;cursor:pointer}
.site-notice button:hover{border-color:var(--navy);background:var(--bg)}
@media(max-width:640px){.site-notice{font-size:13.5px;text-align:center}}

/* Hero button row and primary/ghost buttons, used by every need/vertical page */
.hero .actions{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.btn-p{background:var(--navy);color:var(--bg);padding:var(--btn-pad-y) var(--btn-pad-x);border-radius:var(--btn-radius);font-weight:600;font-size:15px;display:inline-flex;gap:8px;align-items:center}
.btn-p:hover{background:var(--navy-2)}
.btn-g{border:1px solid var(--chip-border);color:var(--navy);padding:var(--btn-pad-y) var(--btn-pad-x);border-radius:var(--btn-radius);font-weight:500;font-size:15px}
.btn-g:hover{border-color:var(--navy)}
.caveat{font-size:12.5px;color:var(--muted);margin-top:18px}

/* Segmented toggle: two buttons swapping two content panels. Shared device,
   used by the home chooser and the Find me customers flow diagram. */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{font-family:var(--display);font-weight:600;font-size:13px;border:none;background:var(--bg);color:var(--slate);padding:9px 18px;cursor:pointer}
.seg button.active{background:var(--navy);color:var(--bg)}

/* Steer device: a short question and a solid button, offering a shortcut to
   a different view of the same content. Shared device, used by the Find me
   customers flow diagram (jump to the full machinery) and the home chooser
   (jump from the jobs door to the persona door). */
.flowsteer{margin-top:14px;text-align:center;font-size:14px;color:var(--slate)}
.flowsteer .steer-q{display:block}
.flowsteer .steerbig{margin-top:10px;font-family:var(--body);font-weight:600;background:var(--navy);color:var(--bg);border:0;border-radius:var(--btn-radius);padding:var(--btn-pad-y) var(--btn-pad-x);font-size:15px;cursor:pointer;transition:.15s}
.flowsteer .steerbig:hover{background:var(--navy-2)}

/* Accreditation body logos, shown above their credential text on home and
   about. Uniform height, no frame, so the row reads as a clean logo strip.
   Shown in a single muted greyscale so the mismatched brand colours sit
   together as one calm set; each returns to full colour on hover. */
.acc-logo{height:58px;width:auto;max-width:190px;object-fit:contain;display:block;filter:grayscale(1) opacity(.8);transition:filter .22s ease}
.acc-logo:hover{filter:grayscale(0) opacity(1)}

/* Ownership colour key, used by every need/vertical page (grey = you, cyan = Gmaven, navy = both) */
.ownkey{display:flex;gap:18px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--slate);margin-top:26px}
.ownkey .owndot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.ownkey .walk{color:var(--navy);font-weight:600}
/* Funds, brokers and wheeling carry the ownership key tighter under the hero (prototype v0_17) */
#page-funds .ownkey,#page-brokers .ownkey,#page-wheeling .ownkey{margin-top:14px}

/* Content grid/card/list helpers, shared across need/vertical pages */
.fd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.fd-grid-3{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.fd-card{border:.5px solid var(--line);border-radius:14px;background:var(--bg);padding:22px 24px;box-shadow:0 14px 34px -22px rgba(8,46,74,.22)}
.fd-card h3{font-size:18px;margin-bottom:8px;color:var(--navy)}
.fd-card p{font-size:14.5px;color:var(--slate);line-height:1.6}
.fd-list{margin:22px 0 0;padding:0;list-style:none;max-width:840px}
.fd-list li{position:relative;padding:12px 0 12px 30px;border-bottom:.5px solid var(--line);font-size:15px;color:var(--navy)}
.fd-list li:before{content:"";position:absolute;left:6px;top:18px;width:8px;height:8px;border-radius:50%;background:var(--cyan)}

/* Bottom call-to-action band, used by every page */
.cta-band{margin-top:0;background:var(--navy);color:var(--bg)}
.cta-inner{padding-top:62px;padding-bottom:62px;display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.cta-inner h2{color:var(--bg);font-size:30px;font-weight:700;max-width:520px}
.cta-inner p{color:var(--cta-text-soft);font-size:16px;margin-top:8px;max-width:460px}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap}
.cta-band .b1{background:var(--cyan);color:var(--ink-on-cyan);padding-top:var(--btn-pad-y);padding-bottom:var(--btn-pad-y);padding-left:var(--btn-pad-x);padding-right:var(--btn-pad-x);border-radius:var(--btn-radius);font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:8px}
.cta-band .b1:hover{background:var(--cyan-light)}
.cta-band .b2{border:1px solid var(--cta-border);color:var(--bg);padding-top:var(--btn-pad-y);padding-bottom:var(--btn-pad-y);padding-left:var(--btn-pad-x);padding-right:var(--btn-pad-x);border-radius:var(--btn-radius);font-weight:500;font-size:15px}
.cta-band .b2:hover{border-color:var(--cyan)}

/* Placeholder-image helper and cross-link callout, reused across several pages */
.ph-note{color:var(--amber);font-weight:500}
.imgspec{border:1.6px dashed var(--border-soft);border-radius:12px;background:var(--bg-soft);padding:24px;text-align:center;color:var(--muted)}
.imgspec .t{font-family:var(--display);font-weight:600;color:var(--cyan-ink);font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:7px}
.imgspec .d{font-size:13px;max-width:540px;margin:0 auto;line-height:1.5}
.xlink{border:.5px solid var(--line);border-radius:14px;background:var(--bg-soft);padding:26px 30px;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.xlink h3{font-family:var(--display);font-size:18px;color:var(--navy);font-weight:700}
.xlink p{font-size:14px;color:var(--slate);margin-top:4px;max-width:560px}
.xlink a{color:var(--cyan-ink);font-weight:600;font-size:14.5px;white-space:nowrap}
.xlink a:hover{text-decoration:underline}

/* Breadcrumb component, shared (not rendered on home, which has no crumb slot) */
.gcrumb{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);padding:8px 0 9px;flex-wrap:wrap}
.gcrumb:empty{display:none}
.gcrumb a{color:var(--cyan-ink);font-weight:600;cursor:pointer}
.gcrumb a:hover{color:var(--navy)}
.gcrumb .gc-sep{color:var(--muted-soft)}
.gcrumb .gc-cur{color:var(--slate);font-weight:500}
.gcrumb .gc-back{display:none}
.gcrumb .gc-back a::before{content:"\2039  ";font-weight:700}
@media(max-width:640px){.gcrumb .gc-full{display:none}.gcrumb .gc-back{display:inline}}

/* Soft background band, extended by every page that alternates section backgrounds */
.band-soft{background:var(--bg-band);border-top:.5px solid var(--line);border-bottom:.5px solid var(--line);margin-top:0;padding-top:62px;padding-bottom:62px}

/* Two-column "compare" component, reused on home, solar, wheeling and fmc */
.contrast{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:30px}
.col h4{font-family:var(--display);font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.col.not h4{color:var(--grey-mid)}.col.are h4{color:var(--cyan-ink)}
.col .li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--navy);margin-bottom:12px}
.col.not .li .gic{color:var(--grey-light);flex:0 0 auto}.col.are .li .gic{color:var(--cyan-ink);flex:0 0 auto}
@media(max-width:640px){.contrast{grid-template-columns:1fr;gap:18px}}

@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* Sitewide scroll-reveal utility, driven by the IntersectionObserver in site.js */
.js .reveal{opacity:0;transform:translateY(18px)}
.js .reveal.in{opacity:1;transform:translateY(0);transition:.6s cubic-bezier(.2,.7,.2,1)}
/* Visitors who ask their device for reduced motion get the content already in
   place, with nothing sliding or fading. Every other animated block on the site
   (the funnels, the machine page) carries the same fallback. */
@media(prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none}
  .js .reveal.in{transition:none}
}

/* Shared footer, used identically by every page (was duplicated per-page in the
   prototype). One balanced block: a mission line, four even link columns that
   fill the full container width, then a bottom strip (social left, sitemap and
   copyright right). */
footer{border-top:.5px solid var(--line);padding:44px 0 56px;color:var(--muted);font-size:13px}
footer .mission{max-width:520px;margin-bottom:28px;color:var(--slate);font-size:13.5px}
footer .fcols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 40px}
footer .fc-h{font-family:var(--display);font-weight:600;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
footer a.fc-h-link{display:block;cursor:pointer}
footer a.fc-h-link:hover{color:var(--navy)}
footer .fcol a:not(.fc-h){display:block;padding:4px 0;color:var(--slate);font-size:13.5px;cursor:pointer}
footer .fcol a:hover{color:var(--navy)}
footer .fcol a.fc-sub{padding-left:16px;font-size:13px;color:var(--muted)}
footer .fcol a.fc-sub:hover{color:var(--navy)}
footer .fbottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 28px;margin-top:38px;padding-top:24px;border-top:1px solid var(--line)}
footer .fsocial{display:flex;gap:16px}
footer .fsocial a{color:var(--muted);display:inline-flex}
footer .fsocial a:hover{color:var(--navy)}
footer .fsocial svg{width:20px;height:20px;fill:currentColor;display:block}
footer .fbottom-right{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font-size:12.5px;color:var(--muted)}
footer .fbottom-right a{color:var(--slate)}
footer .fbottom-right a:hover{color:var(--navy)}
/* Collapse the four columns to two, then one, as the width tightens, and stack
   the bottom strip so social sits above sitemap and copyright. */
@media(max-width:820px){
  footer .fcols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
  footer .fcols{grid-template-columns:1fr}
  footer .fbottom{justify-content:flex-start}
}