/* A11Y-14 (2026-10-23): decorative :hover rules sit inside @media(hover:hover) and (pointer:fine), so a
   tap on a phone or tablet does not leave them stuck on. :focus-visible, :focus-within and open states
   are unchanged. */
/* Shared site header on the four foundation pages (home, how it works, contact,
   franchise PPC). They render the same Site header template as every other page;
   these rules restate the header rules from site-base.css and site-additions.css
   under body.lh-unified, because those pages' own stylesheets style bare header,
   nav, a and button elements (home: absolute overlay header, white text shadow).
   2026-10-23 (A11Y-01): the header is a div.site-header inside the Elementor header template (one
   banner landmark), and the How it works page-end strip is an aside.page-end; the selectors name
   the element, so their specificity is what header.site-header and footer.wrap had. */
@font-face{font-family:LHHeaderSans;src:url(how-it-works/assets/PPNeueMontreal-Regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:LHHeaderMono;src:url(how-it-works/assets/AkkuratMonoLLWeb-Regular.woff2) format("woff2");font-display:swap}

body.lh-unified .skip{position:fixed;top:-100px;left:15px;z-index:100;padding:16px;background:#fff078;color:#101010;font:16px/1 LHHeaderSans,"LH Montreal Fallback",Arial,sans-serif;text-decoration:none}
body.lh-unified .skip:focus{top:15px}

body.lh-unified div.site-header{position:relative;inset:auto;z-index:20;box-sizing:border-box;width:auto;height:104px;margin:0;padding:24px 4%;display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:20px;border:0;border-bottom:1px solid #10101025;background:#faf9f5;color:#101010;font:16px/1.45 LHHeaderSans,"LH Montreal Fallback",Arial,sans-serif;letter-spacing:normal;text-transform:none;text-align:left}
body.lh-unified .site-header *{box-sizing:border-box}
body.lh-unified .site-header a{color:inherit;text-decoration:none;text-shadow:none;padding:0;margin:0}
body.lh-unified .site-header img{display:block;width:116px;height:auto;max-width:none;filter:none}
body.lh-unified .site-header :focus-visible{outline:3px solid #a52868;outline-offset:5px}
body.lh-unified .site-header nav{display:flex;align-items:center;gap:28px;margin:0;font-size:16px}
@media(hover:hover) and (pointer:fine){body.lh-unified .site-header .nav-secondary:hover{text-decoration:underline;text-underline-offset:5px}}
body.lh-unified .site-header .nav-cta{display:inline-block;padding:14px 24px;background:#101010;color:#faf9f5;font-size:16px;line-height:1.45}
body.lh-unified .site-header .nav-cta span{margin-left:20px}

body.lh-unified .site-header .nav-group{position:relative}
body.lh-unified .site-header .nav-group>button{font:16px LHHeaderSans,"LH Montreal Fallback",Arial,sans-serif;background:none;border:0;padding:8px 0;margin:0;color:inherit;cursor:pointer;display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:normal}
body.lh-unified .site-header .nav-group>button:after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .2s}
body.lh-unified .site-header .nav-group.open>button:after{transform:translateY(1px) rotate(225deg)}
body.lh-unified .site-header .nav-menu{display:none;position:absolute;top:calc(100% + 14px);left:-22px;min-width:290px;padding:12px 0;background:#faf9f5;border:1px solid #101010;box-shadow:4px 4px #101010;z-index:30}
body.lh-unified .site-header .nav-menu:before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
body.lh-unified .site-header .nav-group.open .nav-menu,body.lh-unified .site-header .nav-group:focus-within .nav-menu{display:block}@media(hover:hover) and (pointer:fine){body.lh-unified .site-header .nav-group:hover .nav-menu{display:block}}
body.lh-unified .site-header .nav-menu a{display:block;padding:9px 22px;font-size:16px}
body.lh-unified .site-header .nav-menu a:focus-visible{background:#fff078}@media(hover:hover) and (pointer:fine){body.lh-unified .site-header .nav-menu a:hover{background:#fff078}}
body.lh-unified .site-header .nav-menu .eyebrow{display:block;padding:6px 22px 4px;color:#092aff;font:11px/1.6 LHHeaderMono,monospace;letter-spacing:.045em}

body.lh-unified .site-header .nav-toggle{display:none;order:3;background:none;border:1px solid #101010;width:48px;height:48px;padding:0;margin:0;align-items:center;justify-content:center;cursor:pointer}
body.lh-unified .site-header .nav-toggle span,body.lh-unified .site-header .nav-toggle span:before,body.lh-unified .site-header .nav-toggle span:after{display:block;width:20px;height:2px;background:#101010;position:relative;transition:transform .2s}
body.lh-unified .site-header .nav-toggle span:before,body.lh-unified .site-header .nav-toggle span:after{content:"";position:absolute;left:0}
body.lh-unified .site-header .nav-toggle span:before{top:-7px}
body.lh-unified .site-header .nav-toggle span:after{top:7px}
body.lh-unified .site-header .nav-toggle[aria-expanded=true] span{background:transparent}
body.lh-unified .site-header .nav-toggle[aria-expanded=true] span:before{transform:translateY(7px) rotate(45deg)}
body.lh-unified .site-header .nav-toggle[aria-expanded=true] span:after{transform:translateY(-7px) rotate(-45deg)}

@media(min-width:1441px){body.lh-unified div.site-header{padding-left:max(4%,calc((100vw - 1325px)/2));padding-right:max(4%,calc((100vw - 1325px)/2))}}
@media(max-width:1024px){body.lh-unified .site-header nav{gap:20px}body.lh-unified .site-header nav>.nav-secondary,body.lh-unified .site-header nav>.nav-group,body.lh-unified .site-header nav>.nav-group>button{font-size:15px}}
@media(max-width:900px){
 body.lh-unified .site-header nav>.nav-secondary,body.lh-unified .site-header nav>.nav-group{display:none}
 body.lh-unified .site-header .nav-toggle{display:flex}
 body.lh-unified .site-header.menu-open nav{position:fixed;inset:84px 0 auto 0;height:calc(100dvh - 84px);overflow:auto;background:#faf9f5;flex-direction:column;align-items:stretch;gap:0;padding:12px 6% 40px;border-top:1px solid #101010;z-index:40}
 body.lh-unified .site-header.menu-open nav>.nav-secondary,body.lh-unified .site-header.menu-open nav>.nav-group{display:block;font-size:20px;border-bottom:1px solid #10101025}
 body.lh-unified .site-header.menu-open nav>.nav-secondary{padding:16px 0}
 body.lh-unified .site-header.menu-open .nav-group>button{width:100%;justify-content:space-between;font-size:20px;padding:16px 0}
 body.lh-unified .site-header.menu-open .nav-menu{position:static;box-shadow:none;border:0;padding:0 0 12px;min-width:0;display:none}
 body.lh-unified .site-header.menu-open .nav-group.open .nav-menu{display:block}
 @media(hover:hover) and (pointer:fine){body.lh-unified .site-header.menu-open .nav-group:hover .nav-menu{display:none}}
 @media(hover:hover) and (pointer:fine){body.lh-unified .site-header.menu-open .nav-group.open:hover .nav-menu{display:block}}
 body.lh-unified .site-header.menu-open .nav-menu a{padding:10px 0;font-size:18px}
 body.lh-unified .site-header.menu-open .nav-cta{order:-1;margin:8px 0 16px;justify-content:space-between;display:flex}
}
@media(max-width:900px) and (min-width:761px){body.lh-unified .site-header.menu-open nav{inset:104px 0 auto 0;height:calc(100dvh - 104px)}}
@media(max-width:760px){body.lh-unified div.site-header{height:84px;padding:18px 6%}body.lh-unified .site-header img{width:98px}body.lh-unified .site-header nav{gap:12px}body.lh-unified .site-header .nav-cta{font-size:14px;padding:12px 16px}}

/* First screens keep their designed proportion now that the header sits above them
   (header: 104px, 84px at 760px and below). */
body.lh-page-home .hero{height:calc(86svh - 104px);min-height:480px}
@media(max-width:760px){body.lh-page-home .hero{height:calc(86svh - 84px)}}
@media(max-width:700px){body.lh-page-home .hero{height:calc(78svh - 84px);min-height:420px}}
body.lh-page-contact .contact-stage{min-height:calc(100svh - 104px)}
@media(max-width:760px){body.lh-page-contact .contact-stage{min-height:calc(100svh - 84px)}}
@media(min-width:761px) and (max-height:800px){body.lh-page-contact .contact-stage{min-height:calc(100svh - 104px)}}

/* Home first screen (John 2026-10-23): kicker in the H1, pitch, button and proof over the video.
   The hero becomes a column: the wordmark centers in the space above the pitch, so the two never
   overlap at any viewport height; the pitch clears the sticker strip that overlaps the hero bottom
   and the pause button (bottom right). */
body.lh-page-home .hero{height:auto;min-height:calc(86svh - 104px);display:flex;flex-direction:column;padding:40px max(32px,calc((100vw - 1376px)/2)) 120px}
body.lh-page-home .hero h1{position:relative;top:auto;left:auto;transform:none;width:100%;margin:auto 0}
body.lh-page-home .hero .h1-kicker{display:block;margin:0 auto 18px;font:15px/1.4 Akkurat,ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;-webkit-text-stroke:0;text-shadow:0 1px 6px #000a;white-space:normal}
body.lh-page-home .hero-pitch{position:relative;max-width:560px;margin-top:28px;color:#fff;z-index:2}
body.lh-page-home .hero-sub{margin:0 0 18px;font:19px/1.4 Montreal,"LH Montreal Fallback",Arial,sans-serif;text-shadow:0 1px 8px #000c}
body.lh-page-home .hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
body.lh-page-home .hero-btn{display:inline-flex;align-items:center;gap:14px;padding:15px 20px;background:#fff078;color:#101010;border:1px solid #101010;box-shadow:4px 4px #101010;font:700 16px/1.1 Kamerik,Arial,sans-serif;letter-spacing:.02em;text-shadow:none;transition:transform .2s,box-shadow .2s}
@media(hover:hover) and (pointer:fine){body.lh-page-home .hero-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px #101010}}
body.lh-page-home .hero-link{font:16px/1.3 Montreal,"LH Montreal Fallback",Arial,sans-serif;text-decoration:underline;text-underline-offset:5px;text-shadow:0 1px 6px #000c}
body.lh-page-home .hero-proof{display:flex;flex-wrap:wrap;gap:6px 22px;margin:18px 0 0;padding:0;list-style:none;font:12px/1.4 Akkurat,ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;text-shadow:0 1px 6px #000c}
body.lh-page-home .hero-proof a{text-decoration:underline;text-underline-offset:4px}
body.lh-page-home .hero-btn:focus-visible,body.lh-page-home .hero-link:focus-visible,body.lh-page-home .hero-proof a:focus-visible{outline:3px solid #fff;outline-offset:4px}
@media(max-width:1024px){body.lh-page-home .hero-pitch{max-width:470px}body.lh-page-home .hero-sub{font-size:17px}}
@media(max-width:700px){
 body.lh-page-home .hero{min-height:calc(100svh - 84px);padding:64px 20px 120px}
 body.lh-page-home .hero h1{left:0;width:100%}
 body.lh-page-home .hero .h1-kicker{font-size:12px;margin-bottom:12px}
 body.lh-page-home .hero-pitch{max-width:none;margin-top:20px}
 body.lh-page-home .hero-sub{font-size:17px}
 body.lh-page-home .hero-proof{gap:4px 16px;font-size:11px}
 body.lh-page-home .playback{bottom:auto;top:16px;right:16px}
 body.lh-page-home .video-status{bottom:auto;top:56px;right:16px}
}

/* Awards (Josh 2026-10-23): John's two awards under the proof strip. */
body.lh-page-home .hero-awards{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:16px;font:11px/1.4 Akkurat,ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;text-shadow:0 1px 6px #000c}
body.lh-page-home .hero-awards-by{margin:0}
body.lh-page-home .hero-awards ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
body.lh-page-home .hero-awards li{padding:6px 10px;border:1px solid #fff9;background:#000000b3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
body.lh-page-home .hero-awards a{text-decoration:none}
@media(hover:hover) and (pointer:fine){body.lh-page-home .hero-awards a:hover,body.lh-page-home .hero-proof a:hover,body.lh-page-home .hero-link:hover{text-decoration-line:underline;text-decoration-style:wavy;text-decoration-color:#fff078;text-underline-offset:5px}}
body.lh-page-home .hero-awards a:focus-visible{outline:3px solid #fff;outline-offset:4px}
@media(max-width:700px){body.lh-page-home .hero-awards{gap:6px 10px;font-size:10px}body.lh-page-home .hero-awards li{padding:5px 8px}}

/* Contrast over the video (A11Y-05, 2026-10-23). A soft dark haze sits behind the kicker and behind the
   pitch only, so the white text stays at 4.5:1 or more on the brightest frames of the reel (measured every
   1.5 to 3 s at 360 to 1920 wide) while the rest of the video keeps its look. On phones the pitch is full
   width, so its haze is a full-width band with soft top and bottom edges and no sideways overflow. */
body.lh-page-home .hero .h1-kicker{position:relative;width:fit-content}
body.lh-page-home .hero .h1-kicker:before{content:"";position:absolute;inset:-22px -40px;z-index:-1;pointer-events:none;background:#0009;filter:blur(16px)}
body.lh-page-home .hero-pitch:before{content:"";position:absolute;inset:-56px -64px -48px -56px;z-index:-1;pointer-events:none;background:#00000085;filter:blur(28px)}
@media(max-width:700px){body.lh-page-home .hero .h1-kicker:before{inset:-18px -14px;filter:blur(12px)}body.lh-page-home .hero-pitch:before{inset:-56px -20px -48px;background:linear-gradient(180deg,#0000,#00000085 56px,#00000085 calc(100% - 48px),#0000);filter:none}}
@media(forced-colors:active){body.lh-page-home .hero .h1-kicker:before,body.lh-page-home .hero-pitch:before{display:none}}
/* The video status line ("Select play to start video.") only shows when the reel cannot play; it gets the same
   dark chip as the awards so it reads over any frame. */
body.lh-page-home .video-status:not(:empty){padding:4px 8px;background:#000000b3}

/* Pause button (Josh 2026-10-23: it "doesn't have to be there"). WCAG 2.2.2 needs a way to stop
   moving video, so it stays as a small quiet icon; the label is for screen readers only. */
body.lh-page-home .playback{width:34px;height:34px;padding:0;gap:0;justify-content:center;border-radius:50%;background:#0008;border-color:#fff5;opacity:1;transition:opacity .2s,background .2s}
body.lh-page-home .playback:focus-visible{opacity:1;background:#0008}@media(hover:hover) and (pointer:fine){body.lh-page-home .playback:hover{opacity:1;background:#0008}}
body.lh-page-home .playback .playback-label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.lh-page-home .playback-icon{font-size:12px;line-height:1}

/* Phones: sticky Let's talk bar (lh-mobile-cta, John 2026-10-23). */
body.lh-unified .lh-mobile-cta{display:none}
@media(max-width:760px){
 body.lh-unified .lh-mobile-cta{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:60;gap:10px;transform:translateY(140%);transition:transform .25s ease}
 body.lh-unified .lh-mobile-cta.is-visible{transform:none}
 body.lh-unified .lh-mobile-cta a{display:flex;align-items:center;justify-content:center;min-height:52px;border:1px solid #101010;box-shadow:3px 3px #101010;text-decoration:none;font:700 16px/1.1 Kamerik,LHHeaderSans,"LH Montreal Fallback",Arial,sans-serif;letter-spacing:.02em;text-transform:uppercase}
 body.lh-unified .lh-mobile-cta .lh-mcta-main{flex:1;gap:10px;background:#092aff;color:#faf9f5}
 body.lh-unified .lh-mobile-cta .lh-mcta-call{flex:0 0 96px;background:#fff078;color:#101010}
 body.lh-unified{padding-bottom:76px}
}
@media(prefers-reduced-motion:reduce){body.lh-unified .lh-mobile-cta{transition:none}}

/* How it works: in-copy links to the trade pages (John 2026-10-23) use the site's squiggly hover. */
body.lh-page-hiw .keyword-opening p a,body.lh-page-hiw aside.page-end p a{text-decoration:underline;text-underline-offset:4px}
@media(hover:hover) and (pointer:fine){body.lh-page-hiw .keyword-opening p a:hover,body.lh-page-hiw aside.page-end p a:hover{text-decoration-style:wavy;text-decoration-color:#092aff;text-decoration-thickness:1.5px}}

/* Breadcrumbs on the three custom-template pages (John 2026-10-23), styled like every other page's
   trail. The bar takes over the hero's top padding, so the eyebrow sits where it does elsewhere. */
body.lh-unified .lh-crumbbar{box-sizing:border-box;background:#faf9f5}
body.lh-unified .lh-crumbbar .crumbs{display:flex;flex-wrap:wrap;gap:6px 10px;margin:0;padding:0;font:11px/1.6 LhfMono,ui-monospace,monospace;letter-spacing:.045em;color:#555;text-transform:none;text-align:left}
body.lh-unified .lh-crumbbar .crumbs a{color:inherit;text-decoration:none;text-shadow:none}
@media(hover:hover) and (pointer:fine){body.lh-unified .lh-crumbbar .crumbs a:hover{text-decoration-line:underline;text-decoration-style:wavy;text-decoration-color:#092aff;text-decoration-thickness:1.5px;text-underline-offset:6px}}
body.lh-unified .lh-crumbbar .crumbs span[aria-hidden]{color:#092aff}
body.lh-page-hiw .lh-crumbbar{padding-top:48px}
body.lh-page-fppc .lh-crumbbar{padding-top:42px}
body.lh-page-hiw .lh-crumbbar .crumbs,body.lh-page-fppc .lh-crumbbar .crumbs{margin-bottom:26px}
body.lh-page-hiw section.hero.wrap,body.lh-page-fppc section.hero.wrap{padding-top:0}
body.lh-page-contact .lh-crumbbar{max-width:none;width:auto;margin:0;padding:13px 4%}
body.lh-page-contact .contact-stage{min-height:calc(100svh - 148px)}
@media(max-width:760px){body.lh-page-contact .contact-stage{min-height:calc(100svh - 128px)}body.lh-page-contact .lh-crumbbar{padding:12px 6%}}

/* Pause motion toggle on How it works and Contact (A11Y-06, 2026-10-23). Each page's script adds it at the
   right end of the breadcrumb bar; it stops the page's looping videos and animations. Same mono as the
   crumbs; filled ink = paused. Its negative margins keep the bar's height unchanged. Hidden when the
   visitor asks for reduced motion, because nothing moves then. */
body.lh-unified .lh-crumbbar.has-motion-toggle{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;column-gap:16px}
body.lh-unified .lh-motion-toggle{display:inline-flex;align-items:baseline;gap:8px;margin:-6px 0;padding:5px 11px;min-height:24px;border:1px solid #101010;border-radius:0;background:transparent;color:#101010;font:11px/1.2 LhfMono,LHHeaderMono,ui-monospace,monospace;letter-spacing:.045em;text-transform:none;text-shadow:none;box-shadow:none;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
body.lh-unified .lh-motion-toggle[aria-pressed=true]{background:#101010;color:#faf9f5}
body.lh-unified .lh-motion-toggle:focus-visible{outline:3px solid #a52868;outline-offset:3px}
@media(hover:hover) and (pointer:fine){body.lh-unified .lh-motion-toggle:hover{background:#fff078;color:#101010}}
body.lh-unified .lh-motion-holder{display:flex;justify-content:flex-end;padding:10px 4% 0}
@media(prefers-reduced-motion:reduce){body.lh-unified .lh-motion-toggle{display:none}body.lh-unified .lh-motion-toggle{transition:none}}