/* chrome part 1 of 2 — split for the host's FTP write ceiling.
   Generated by split_for_ftp.py; edit the prototype, not this. */
/* Header + footer. Loaded on EVERY page, because the chrome renders on every
   page — unlike the components sheets, which are gated per page.
   Generated from webref by extract.py. */

/* Scoped stand-in for the prototype's global reset, which ships in the gated
   components.css. Without this the parent theme styles our header's buttons. */
.site-head, .site-head *, .m-nav, .m-nav *, .m-scrim, .foot, .foot * { box-sizing: border-box; }
.site-head button, .m-nav button, .foot button,
.site-head button:hover, .m-nav button:hover, .foot button:hover,
.site-head button:focus, .m-nav button:focus, .foot button:focus {
  margin: 0; padding: 0; background: none; border: 0; border-radius: 0;
  box-shadow: none; color: inherit; font: inherit; letter-spacing: inherit;
  text-transform: none; text-align: inherit; cursor: pointer;
}
/* The parent theme also paints every <a> #CC3366. Our chrome sets its own colours,
   but state variants that only change opacity would otherwise inherit pink. */
.site-head a, .m-nav a, .foot a { color: inherit; }
.site-head ul, .m-nav ul, .foot ul { margin: 0; padding: 0; list-style: none; }
.site-head p, .site-head h1, .m-nav p, .foot p, .foot h5 { margin: 0; }
.site-head img, .foot img { max-width: 100%; }
.site-head a, .m-nav a, .foot a { text-decoration: none; }


/* Keeps button text still on hover. hello-elementor's a:hover{color:#336} is (0,1,1)
   and outranks a button's own .btn-g{color:...} at (0,1,0). A literal per variant will
   not do — .btn-g is --ink on light bands and #fff on dark — so each resting rule also
   declares --btn-fg with the value it paints, and this (0,2,0) rule puts it back. */
.btn:hover,.btn:focus,.nav-cta:hover,.nav-cta:focus{color:var(--btn-fg)}

/* HEADER — more air (lunas-style), bigger logo, all-caps nav */
.site-head{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.88);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.3);border-bottom:1px solid rgba(20,19,14,.07)}
.site-head .bar{max-width:var(--wide);margin:0 auto;padding:15px var(--gut);display:flex;align-items:center;justify-content:space-between;gap:26px}
.brand img{height:48px;width:auto;display:block;transition:height .2s}
.nav-links{display:flex;gap:42px;align-items:center}
.nav-links a.lnk{color:var(--ink);opacity:.72;font-size:14.5px;font-weight:600;letter-spacing:.005em;transition:opacity .2s,color .2s}
.nav-links a.lnk:hover{opacity:1;color:var(--accent)}
.nav-links a.lnk.active{opacity:1;color:var(--ink)}
.nav-cta{padding:12px 24px;border-radius:999px;font-size:14px;font-weight:700;letter-spacing:.01em;white-space:nowrap;--btn-fg:#fff!important;color:#fff!important;background:var(--ink);opacity:1!important;transition:background .2s}
.nav-cta:hover{background:#2C2B28!important}
.mega{position:relative}
.mega-t{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--ink);opacity:.72;font-size:14.5px;font-weight:600;letter-spacing:.005em;transition:opacity .2s,color .2s;background:none;border:0;font-family:var(--sans);text-decoration:none}
.mega-t svg{width:10px;height:10px;transition:transform .25s}
.mega:hover .mega-t,.mega.open .mega-t,.mega:focus-within .mega-t{opacity:1;color:var(--accent)}
.mega:hover .mega-t svg,.mega.open .mega-t svg{transform:rotate(180deg)}
.mega-panel{position:absolute;top:100%;left:0;margin-top:18px;background:#fff;border:1px solid var(--hair);border-radius:14px;box-shadow:0 22px 60px -24px rgba(20,19,16,.34);padding:12px;min-width:264px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.22s;z-index:90}
.mega-panel::before{content:"";position:absolute;top:-18px;left:0;right:0;height:18px}
/* The panel hangs 18px below the trigger, and that gap is dead space: an
   absolutely-positioned panel is still a descendant, so hovering IT keeps .mega:hover
   true — but crossing the gap does not, and the panel closed before the pointer
   arrived. A click-latch used to mask this; now that the trigger is a real link to the
   group page, the gap has to be bridged for real. */
.mega-panel::before{content:"";position:absolute;left:0;right:0;top:-20px;height:20px}
.mega:hover .mega-panel,.mega.open .mega-panel,.mega:focus-within .mega-panel{opacity:1;visibility:visible;transform:none}
.mega-panel a{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:9px;font-size:14px;font-weight:600;color:var(--ink);opacity:.82;transition:.16s}
.mega-panel .mi,.m-sub .mi{width:17px;height:17px;flex:0 0 17px;opacity:.55;transition:opacity .16s,color .16s}
.mega-panel a:hover .mi,.m-sub a:hover .mi{opacity:1;color:var(--accent)}
.mega-panel a:hover{background:var(--grey);opacity:1;color:var(--accent)}
/* The quote CTA rides in the mobile bar beside the burger — on desktop the nav's
   own CTA covers it, so this one only appears once the nav collapses. */
.m-cta{display:none}@media(max-width:1040px){a.nav-cta.m-cta{display:inline-flex;margin-left:auto;margin-right:2px;font-size:12px;padding:8px 13px;letter-spacing:.01em;white-space:nowrap}}@media(max-width:400px){a.nav-cta.m-cta{font-size:11px;padding:7px 10px;margin-right:0}}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.25s}
.m-nav{display:none}@media(max-width:1040px){
  .nav-links{display:none}
  .burger{display:flex}
  .brand img{height:40px}
  .m-nav{display:block;position:fixed;top:0;right:0;bottom:0;width:min(360px,86vw);background:#fff;z-index:200;box-shadow:-20px 0 60px -20px rgba(0,0,0,.3);transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.7,.2,1);overflow-y:auto;padding:22px}
  body.mopen .m-nav{transform:none}
  .m-scrim{position:fixed;inset:0;background:rgba(20,18,14,.4);opacity:0;visibility:hidden;transition:.25s;z-index:150}
  body.mopen .m-scrim{opacity:1;visibility:visible}}
.m-nav>a.m-lnk:hover,.m-nav>a.m-lnk:focus{color:var(--accent)}
.m-nav>a.m-lnk{display:block;padding:14px 4px;border-bottom:1px solid var(--hair);font-family:var(--disp);font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-0.02em}
.m-acc{border-bottom:1px solid var(--hair)}
.m-acc>summary{list-style:none;cursor:pointer;padding:14px 4px;display:flex;align-items:center;justify-content:space-between;font-family:var(--disp);font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-0.02em}
.m-acc>summary::-webkit-details-marker{display:none}
.m-acc>summary .pl{width:16px;height:16px;position:relative;flex:0 0 16px}
.m-acc>summary .pl::before,.m-acc>summary .pl::after{content:"";position:absolute;background:var(--accent);border-radius:2px;transition:.3s}
.m-acc>summary .pl::before{top:7px;left:0;width:16px;height:2px}
.m-acc>summary .pl::after{top:0;left:7px;width:2px;height:16px}
.m-acc[open]>summary .pl::after{transform:rotate(90deg);opacity:0}
.m-acc .m-sub{padding:2px 4px 14px}
.m-acc .m-sub a{display:flex;align-items:center;gap:11px;padding:8px 0;font-size:15px;font-weight:500;color:var(--body)}
.m-acc .m-sub a:hover{color:var(--accent)}
.m-nav .btn{margin-top:22px;width:100%;justify-content:center}

/* FOOTER */
.foot{background:var(--dark);color:#8f8e86}
/* Asymmetric on purpose. The top padding separates the footer from the page above
   it and is worth having; the bottom one only separates the colophon row from the
   thin legal strip, which needs far less, and at 72px it left the mark and the
   rating floating in the middle of a lot of nothing. */
.foot-main{padding:clamp(48px,6vw,72px) 0 clamp(20px,2.4vw,30px)}
/* Five link columns; the brand block is a full-width row under them. At six across,
   Services wrapped onto two lines and the whole footer read cramped below ~1500px.
   Two columns on tablet/phone, or every link hugs the left with the right half empty. */
.foot-main .wrap{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(20px,2.2vw,36px) clamp(20px,2.4vw,40px)}
.foot-main .foot-col{order:1;min-width:0}
/* THE BOTTOM STRIP. Three columns on one line, so it costs the least vertical space:
   the mark (logo with the socials beneath it), the sentence, and the rating right-
   aligned to the same edge as the link columns above. No rules: a hairline across a dark
   footer reads as a seam, and the whitespace already separates it. */
.foot-brand{order:2;grid-column:1/-1;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:clamp(24px,3.4vw,56px);
  /* Tighter than the section rhythm above it. This row is a colophon, not a section: a
     mark, one sentence and a rating. The air it had made the footer read as having a
     second half. */
  margin-top:clamp(4px,0.8vw,12px);padding-top:0;border:0}
.foot-brand .fb-mark{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.foot-brand .fb-mark img{margin:0}
.foot-brand .foot-social{margin:0}
/* 46ch, not 68. At 68 the sentence set on two very long lines and the three-cell row
   read as unbalanced against the mark and the rating either side of it. At 46 it
   breaks into three, which is the shape the row wants. */
.foot-brand > p{max-width:46ch;margin:0}
.foot-brand .foot-rating{margin:0;align-items:flex-end;text-align:right}
.foot-brand .foot-rating .rc{justify-content:flex-end}
.foot-brand .foot-rating .hero-avatars{align-self:flex-end}@media(min-width:901px) and (max-width:1460px){
  .foot-brand .foot-rating{padding-right:64px}}@media(max-width:900px){
  .foot-brand{grid-template-columns:1fr;gap:22px;justify-items:start}
  .foot-brand .foot-rating{align-items:flex-start;text-align:left}
  .foot-brand .foot-rating .rc{justify-content:flex-start}
  .foot-brand .foot-rating .hero-avatars{align-self:flex-start}}@media(max-width:900px){
  .foot-main .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Direct child only. This flips the dark wordmark white on the dark footer, but the
   rating cluster now lives inside .foot-brand too, so as a descendant selector it was
   painting all seven reviewer photographs into solid white discs — and the 34px height
   and 18px margin were hitting them as well. */
/* The wordmark is a black SVG on a --dark footer, so it has to be flipped white. This
   was `.foot-brand > img` and stopped matching the moment the mark was grouped with the
   socials into .fb-mark -- one level deeper is no longer a child -- and the logo went
   black on black. Scoped to .fb-mark rather than loosened to a descendant selector,
   because a bare `.foot-brand img` also catches the seven reviewer photographs sitting
   in the same block and paints them into solid white discs. */
.foot-brand .fb-mark img{height:42px;filter:brightness(0) invert(1);opacity:.92}