/* 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. */
/* localhowl.com site layer: everything the approved franchise page system
   did not need yet. Same tokens, fonts, rules and button language. */

/* Header: dropdown groups + one-button mobile menu */
.site-header{position:relative;z-index:20}
.site-header nav{gap:28px}
.nav-group{position:relative}
.nav-group>button{font:16px Montreal,"LH Montreal Fallback",Arial,sans-serif;background:none;border:0;padding:8px 0;color:inherit;cursor:pointer;display:flex;align-items:center;gap:8px}
.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}
.nav-group.open>button:after{transform:translateY(1px) rotate(225deg)}
.nav-menu{display:none;position:absolute;top:calc(100% + 14px);left:-22px;min-width:290px;padding:12px 0;background:var(--cream);border:1px solid var(--ink);box-shadow:4px 4px var(--ink)}
.nav-menu:before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.nav-group.open .nav-menu,.nav-group:focus-within .nav-menu{display:block}@media(hover:hover) and (pointer:fine){.nav-group:hover .nav-menu{display:block}}
.nav-menu a{display:block;padding:9px 22px;font-size:16px}
.nav-menu a:focus-visible{background:var(--yellow)}@media(hover:hover) and (pointer:fine){.nav-menu a:hover{background:var(--yellow)}}
.nav-menu .eyebrow{display:block;padding:6px 22px 4px;color:var(--blue)}
.nav-toggle{display:none;background:none;border:1px solid var(--ink);width:48px;height:48px;align-items:center;justify-content:center;cursor:pointer}
.nav-toggle span,.nav-toggle span:before,.nav-toggle span:after{display:block;width:20px;height:2px;background:var(--ink);position:relative;transition:transform .2s}
.nav-toggle span:before,.nav-toggle span:after{content:"";position:absolute;left:0}
.nav-toggle span:before{top:-7px}.nav-toggle span:after{top:7px}
.nav-toggle[aria-expanded=true] span{background:transparent}
.nav-toggle[aria-expanded=true] span:before{transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded=true] span:after{transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1024px){.site-header nav{gap:20px}.site-header nav>.nav-secondary,.site-header nav>.nav-group{font-size:15px}}
@media(max-width:900px){
 .site-header nav>.nav-secondary,.site-header nav>.nav-group{display:none}
 .nav-toggle{display:flex}
 .site-header.menu-open nav{position:fixed;inset:84px 0 auto 0;height:calc(100dvh - 84px);overflow:auto;background:var(--cream);flex-direction:column;align-items:stretch;gap:0;padding:12px 6% 40px;border-top:1px solid var(--ink)}
 .site-header.menu-open nav>.nav-secondary,.site-header.menu-open nav>.nav-group{display:block;font-size:20px;border-bottom:1px solid #10101025}
 .site-header.menu-open nav>.nav-secondary{padding:16px 0}
 .site-header.menu-open .nav-group>button{width:100%;justify-content:space-between;font-size:20px;padding:16px 0}
 .site-header.menu-open .nav-menu{position:static;box-shadow:none;border:0;padding:0 0 12px;min-width:0;display:none}
 .site-header.menu-open .nav-group.open .nav-menu{display:block}
 @media(hover:hover) and (pointer:fine){.site-header.menu-open .nav-group:hover .nav-menu{display:none}}
 @media(hover:hover) and (pointer:fine){.site-header.menu-open .nav-group.open:hover .nav-menu{display:block}}
 .site-header.menu-open .nav-menu a{padding:10px 0;font-size:18px}
 .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){.site-header.menu-open nav{inset:104px 0 auto 0;height:calc(100dvh - 104px)}}

/* Breadcrumbs */
.crumbs{display:flex;flex-wrap:wrap;gap:6px 10px;font:11px/1.6 Mono,monospace;letter-spacing:.045em;color:#555;margin-bottom:26px}
.crumbs a{text-decoration:none}
@media(hover:hover) and (pointer:fine){.crumbs a:hover{text-decoration:underline;text-underline-offset:4px}}
.crumbs span[aria-hidden]{color:var(--blue)}

/* Article hero (guides, blog posts, case studies, legal) */
.article-hero{padding-top:48px;padding-bottom:56px;border-bottom:1px solid #10101025}
.article-hero h1{font-size:clamp(52px,6.6vw,104px);max-width:16ch}
.article-hero h1 span{color:var(--blue)}
.article-hero .lede{margin-top:28px;max-width:34ch}
.article-meta{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:30px;font:11px/1.6 Mono,monospace;letter-spacing:.045em;color:#555}
.article-meta a{color:var(--blue)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.chips span{font:11px/1 Mono,monospace;letter-spacing:.045em;padding:9px 12px;border:1px solid var(--ink);background:white}

/* Article body + aside */
.article-layout{display:grid;grid-template-columns:minmax(0,760px) minmax(260px,330px);gap:7%;justify-content:space-between;padding-top:70px;padding-bottom:100px}
.article-aside{position:sticky;top:30px;align-self:start;padding:28px;background:white;border:1px solid var(--ink);box-shadow:4px 4px var(--ink)}
.article-aside .eyebrow{color:var(--blue)}
.article-aside h2{font-size:42px;margin-top:14px}
.article-aside p{font-size:17px;margin-top:14px}
.article-aside .button{margin-top:22px;width:100%;font-size:18px;padding:16px 18px;min-height:0}
.article-aside .toc{margin-top:26px;padding-top:20px;border-top:1px solid #10101030}
.article-aside .toc a{display:block;font-size:15px;padding:6px 0;text-decoration:none}
@media(hover:hover) and (pointer:fine){.article-aside .toc a:hover{color:var(--blue)}}
@media(max-width:1024px){.article-layout{grid-template-columns:minmax(0,1fr);gap:50px}.article-aside{position:static;max-width:520px}}

.prose{font-size:20px;line-height:1.55}
.prose>*:first-child{margin-top:0}
.prose h2{font-size:clamp(38px,4vw,56px);margin:70px 0 22px}
.prose h3{font-size:27px;margin:44px 0 14px}
.prose h4{font:22px/1.3 Montreal,"LH Montreal Fallback",Arial,sans-serif;margin:32px 0 10px}
.prose p{margin:0 0 20px;max-width:none}
.prose p+p{margin-top:0}
.prose ul,.prose ol{margin:0 0 24px;padding-left:1.25em}
.prose li{margin:10px 0}
.prose li::marker{color:var(--blue)}
.prose ol li::marker{font:15px Mono,monospace}
.prose a{color:var(--blue);text-underline-offset:4px}
.prose strong{font-weight:400;background:linear-gradient(transparent 62%,var(--yellow) 62%)}
.prose blockquote{margin:34px 0;padding:6px 0 6px 26px;border-left:4px solid var(--pink);font:30px/1.2 Freight,"LH Freight Fallback",Georgia,serif;font-style:italic;letter-spacing:-.02em}
.prose figure{margin:40px 0}
.prose figure img{border:1px solid #10101025}
.prose figcaption{font:11px/1.6 Mono,monospace;color:#555;margin-top:12px}
.prose .table-scroll{overflow-x:auto;margin:30px 0}
.prose table{width:100%;border-collapse:collapse;font-size:17px}
.prose th{font:11px/1.4 Mono,monospace;letter-spacing:.045em;text-align:left;padding:12px 14px 12px 0;border-bottom:1px solid var(--ink);vertical-align:bottom}
.prose td{padding:14px 14px 14px 0;border-bottom:1px solid #10101030;vertical-align:top}
@media(max-width:760px){.prose{font-size:18px}.prose h2{font-size:40px;margin-top:56px}.prose h3{font-size:24px}.prose blockquote{font-size:25px}}

/* Section variants */
.band-blue{background:var(--blue);color:var(--cream)}
.band-blue .eyebrow{color:var(--yellow)}
.band-blue .button{background:var(--cream);color:var(--ink)}
.band-yellow{background:var(--yellow)}
.section-intro{display:grid;grid-template-columns:1.1fr .9fr;gap:24px 7%;align-items:end;margin-bottom:56px}
.section-intro>.eyebrow{grid-column:1/-1;color:var(--blue)}
.band-blue .section-intro>.eyebrow{color:var(--yellow)}
.section-intro h2 .serif{color:var(--blue);display:block;font-size:1.08em}
.band-blue .section-intro h2 .serif{color:var(--yellow)}
.section-intro>p:not(.eyebrow){font-size:21px;max-width:470px}
@media(max-width:760px){.section-intro{grid-template-columns:1fr;gap:22px;margin-bottom:36px}.section-intro>p:not(.eyebrow){font-size:19px}}

/* Index rows (services, guides, posts, case studies) */
.index-rows{border-bottom:1px solid #10101042}
.index-rows a,.index-rows .row{display:grid;grid-template-columns:70px minmax(0,1fr) auto;gap:6px 26px;align-items:start;padding:28px 0;border-top:1px solid #10101042;text-decoration:none}
.index-rows .num{font:11px Mono,monospace;color:var(--blue);padding-top:9px}
.index-rows h3{font-size:27px}
.index-rows p{grid-column:2;font-size:18px;max-width:640px;margin-top:2px}
.index-rows .tag{grid-column:2;font:11px Mono,monospace;letter-spacing:.045em;color:#555}
.index-rows b{grid-row:1;grid-column:3;font:30px/1 Montreal,"LH Montreal Fallback",Arial,sans-serif;font-weight:400;color:var(--blue);transition:transform .2s}
@media(hover:hover) and (pointer:fine){.index-rows a:hover h3{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}}
@media(hover:hover) and (pointer:fine){.index-rows a:hover b{transform:translateX(6px)}}
.band-blue .index-rows,.band-blue .index-rows a{border-color:#faf9f550}
.band-blue .index-rows .num,.band-blue .index-rows b{color:var(--yellow)}
@media(max-width:760px){.index-rows a,.index-rows .row{grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;padding:22px 0}.index-rows .num{grid-column:1/-1;padding:0}.index-rows p,.index-rows .tag{grid-column:1/-1}.index-rows h3{font-size:24px}.index-rows b{grid-row:2;grid-column:2}}

/* Stats with a source */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.stat{padding:32px 26px 30px;border-left:1px solid var(--ink)}
.stat:first-child{border-left:0;padding-left:0}
.stat b{display:block;font:400 clamp(64px,7vw,104px)/.95 Anton,"LH Anton Fallback","LH Anton Fallback Sans",Impact,sans-serif;color:var(--blue)}
.stat span{display:block;font-size:18px;margin-top:12px;max-width:22ch}
.band-blue .stats,.band-blue .stat{border-color:#faf9f560}
.band-blue .stat b{color:var(--yellow)}
@media(max-width:760px){.stats{grid-template-columns:1fr}.stat{border-left:0;border-top:1px solid #10101040;padding:24px 0}.stat:first-child{border-top:0}}

/* Numbered steps */
.steps{list-style:none;margin:0;padding:0;counter-reset:step}
.steps li{counter-increment:step;display:grid;grid-template-columns:110px minmax(0,1fr);gap:4px 30px;padding:30px 0;border-top:1px solid #10101042}
.steps li:last-child{border-bottom:1px solid #10101042}
.steps li:before{content:counter(step,decimal-leading-zero);grid-row:1/3;font:64px/.9 Anton,"LH Anton Fallback","LH Anton Fallback Sans",Impact,sans-serif;color:var(--pink);-webkit-text-stroke:1px var(--ink)}
.steps h3{font-size:27px}
.steps p{font-size:18px;max-width:620px}
@media(max-width:760px){.steps li{grid-template-columns:64px minmax(0,1fr);gap:4px 18px}.steps li:before{font-size:44px}.steps h3{font-size:23px}}

/* Two-column body for service pages */
.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:7%}
.split .eyebrow{color:var(--blue);margin-bottom:22px}
@media(max-width:760px){.split{grid-template-columns:1fr;gap:28px}}

/* Footer columns */
.footer-cols{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:32px;padding-bottom:40px}
@media(max-width:1180px){.footer-cols{grid-template-columns:repeat(4,1fr)}.footer-cols .footer-brand{grid-column:1/-1}}
.footer-cols h2{font:11px/1.6 Mono,monospace;letter-spacing:.045em;color:var(--blue);margin-bottom:14px}
.footer-cols a{display:block;font-size:16px;padding:5px 0;text-decoration:none}
@media(hover:hover) and (pointer:fine){.footer-cols a:hover{text-decoration:underline;text-underline-offset:4px}}
.footer-cols .footer-brand p{font:30px/1 Caveat,"LH Caveat Fallback",cursive;color:#a52868;margin-top:16px;transform:rotate(-4deg);max-width:220px}
@media(max-width:900px){.footer-cols{grid-template-columns:1fr 1fr}.footer-cols .footer-brand{grid-column:1/-1}}
@media(max-width:480px){.footer-cols{grid-template-columns:1fr}}

/* Hero without artwork: copy runs wider */
.hero-grid-solo{grid-template-columns:minmax(0,820px)}
.hero-grid-solo .hero-copy>p:not(.lede):not(.hand){max-width:620px;font-size:21px}

/* Framed image ("print"): the approved hero-art treatment for supporting images */
.photo-print{position:relative;padding:10px;background:white;box-shadow:2px 8px 0 #1010100d;transform:rotate(-1.2deg);margin:36px 0 0}
.photo-print img{width:100%;height:auto}
.photo-print figcaption{font:9px Mono,monospace;letter-spacing:.045em;padding:14px 6px 6px}
.split .photo-print{max-width:460px}
.prose .photo-print{transform:none;margin:36px 0}

.lh-site .faq .eyebrow,.lh-site .split .eyebrow{color:var(--blue)}
.index-rows .row{grid-template-columns:70px minmax(0,1fr)}
.embed-frame{border:1px solid var(--ink);box-shadow:4px 4px var(--ink);background:white}
.prose-solo{max-width:780px}
.prose p,.prose li,.prose td{overflow-wrap:anywhere}
.lh-site .hero h1>span{white-space:normal}
.stat{container-type:inline-size;min-width:0}.stat b{font-size:min(clamp(64px,7vw,104px),22cqi)}
.lh-site .hero h1.hero-long{font-size:clamp(56px,7.4vw,108px)}@media(max-width:760px){.lh-site .hero h1.hero-long{font-size:clamp(44px,11vw,64px)}}
.lh-search{padding-top:10px;padding-bottom:30px}.lh-search label{display:block;font:11px/1.6 Mono,monospace;letter-spacing:.045em;color:var(--blue);margin-bottom:10px}.lh-search div{display:flex;gap:14px;max-width:760px}.lh-search input{flex:1;min-width:0;font:20px Montreal,"LH Montreal Fallback",Arial,sans-serif;padding:16px 18px;border:1px solid var(--ink);background:#fff}.lh-search .button{min-height:0}
.lh-pagination{max-width:1440px;margin:0 auto 60px;padding:0 4%}.lh-pagination .nav-links{display:flex;gap:18px;font:14px Mono,monospace}
@media(max-width:600px){.lh-search div{flex-direction:column}}

.nav-toggle{order:3}

/* Buttons inside prose (split sections): .prose a would turn the label blue on the blue button (2026-10-22). */
.prose a.button{color:var(--cream);text-decoration:none}.band-blue .prose a.button{color:var(--ink)}

/* Final QA fixes (2026-10-22). */
/* Index rows without an arrow (.row): the desktop two-column rule above came after the
   phone rule and squeezed every heading into the 70px number column on phones. */
@media(max-width:760px){.index-rows .row{grid-template-columns:minmax(0,1fr)}.index-rows .row h3{grid-column:1/-1}}
.index-rows p{overflow-wrap:break-word}
/* Blue bands: links, eyebrows and the serif half of split headings stay readable. */
.band-blue .prose a:not(.button){color:var(--cream);text-decoration-color:var(--yellow)}
.band-blue .split .eyebrow{color:var(--yellow)}
.band-blue .split h2 .serif{color:var(--yellow)!important}
/* Tables: words never split mid-word; on phones the table scrolls sideways in its wrapper. */
.prose td,.prose th{overflow-wrap:normal;word-break:normal}
@media(max-width:760px){.prose .table-scroll table{min-width:600px}}
/* Headlines and closing lines wrap evenly instead of orphaning one word. */
h1,h2{text-wrap:balance}
.closing p{text-wrap:balance}

/* Team grid (lh_site_team, 2026-10-23): real headshots in the photo-print frame. */
.team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:52px 44px}
.team-card{display:flex;flex-direction:column;gap:8px;min-width:0}
.team-card .team-photo{margin:0 0 16px}
.team-card:nth-child(even) .team-photo{transform:rotate(1.1deg)}
.team-photo img{width:100%;aspect-ratio:1/1;object-fit:cover}
.team-mono{aspect-ratio:1/1;display:grid;place-items:center;background:var(--yellow);border:1px solid var(--ink);box-shadow:4px 4px var(--ink);transform:rotate(-1.2deg)}
.team-mono span{font:clamp(64px,7vw,104px)/1 Anton,"LH Anton Fallback","LH Anton Fallback Sans",Impact,sans-serif;color:var(--blue);letter-spacing:.02em}
.team-card h3{font-size:28px;line-height:1.1}
.team-card .eyebrow{color:var(--blue)}
.team-note{font-size:16px;line-height:1.45;max-width:none}
.team-link{font-size:15px;text-underline-offset:5px;width:fit-content;margin-top:2px}
.band-blue .team-card .eyebrow{color:var(--yellow)}
@media(max-width:1024px){.team-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 32px}}
@media(max-width:560px){.team-grid{grid-template-columns:1fr;gap:40px}.team-card{max-width:440px}.team-card h3{font-size:26px}}

/* Phones: sticky Let's talk bar (lh-mobile-cta, John 2026-10-23). */
.lh-mobile-cta{display:none}
@media(max-width:760px){
 .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}
 .lh-mobile-cta.is-visible{transform:none}
 .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:17px/1.1 Anton,"LH Anton Fallback","LH Anton Fallback Sans",Impact,sans-serif;letter-spacing:.02em;text-transform:uppercase}
 .lh-mobile-cta .lh-mcta-main{flex:1;gap:10px;background:#092aff;color:#faf9f5}
 .lh-mobile-cta .lh-mcta-call{flex:0 0 96px;background:#fff078;color:#101010}
 body{padding-bottom:76px}
}
@media(prefers-reduced-motion:reduce){.lh-mobile-cta{transition:none}}

/* Author profiles (Josh 2026-10-23): the writer's card under each of their posts, and their
   headshot beside the name on the author page. */
.author-card{padding-top:10px;padding-bottom:90px}
.author-card-inner{display:grid;grid-template-columns:200px minmax(0,1fr);gap:44px;align-items:start;max-width:980px;border-top:1px solid #10101042;padding-top:48px}
.author-card .author-photo{margin:0}
.author-photo img,.article-portrait img{width:100%;aspect-ratio:1/1;object-fit:cover}
.author-copy .eyebrow{color:var(--blue);margin-bottom:12px}
.author-copy h2{font-size:clamp(36px,3.6vw,52px);text-transform:uppercase}
.author-copy h2 a{text-decoration:none}
.author-role{font:11px/1.6 Mono,monospace;letter-spacing:.045em;text-transform:uppercase;margin-top:10px}
.author-copy .author-bio{font-size:18px;margin-top:18px}
.author-links{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:20px;font-size:15px}
.author-links a{text-underline-offset:5px}
.article-hero.has-portrait{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,300px);column-gap:6%;align-items:start}
.article-hero.has-portrait>*{grid-column:1}
.article-hero.has-portrait>.crumbs{grid-column:1/-1}
.article-hero.has-portrait>.article-portrait{grid-column:2;grid-row:2/span 4;margin:8px 0 0;transform:rotate(1.5deg)}
@media(max-width:760px){.article-hero.has-portrait{display:block}.article-hero.has-portrait>.article-portrait{max-width:200px;margin:0 0 28px}}
@media(max-width:640px){.author-card-inner{grid-template-columns:1fr;gap:26px;padding-top:40px}.author-card .author-photo{max-width:180px}}

/* Squiggly blue underline on link hover (Josh 2026-10-23), the same as the footer links. */
@media(hover:hover) and (pointer:fine){.prose a:not(.button):hover,.crumbs a:hover,.text-link:hover,.article-meta a:hover,.author-card a:hover,.team-link:hover{text-decoration-line:underline;text-decoration-style:wavy;text-decoration-color:var(--blue);text-decoration-thickness:1.5px;text-underline-offset:6px}}
@media(hover:hover) and (pointer:fine){.band-blue .prose a:not(.button):hover,.band-blue .text-link:hover{text-decoration-color:var(--yellow)}}

/* Focus rings on the blue sections (A11Y-03, 2026-10-23): the magenta ring is about 1.1:1 on #092aff, so
   anything focused inside a blue band gets the yellow ring (6.45:1). */
.band-blue :focus-visible,.market-section :focus-visible,.audit :focus-visible,.mobile-audit :focus-visible{outline-color:#fff078}

/* A standalone source-note link (A11Y-13, 2026-10-23) gets a 24px-tall target from vertical padding. The
   link stays inline, so no line moves and nothing wraps differently; the padding sits mostly above the text,
   so it never reaches the button that often follows the note. */
.source-note>a:only-child{padding:7px 0 2px}

/* Address and hours under the footer tagline (John 2026-10-23); site-footer.css carries the same for the foundation pages. */
.lh-site-footer .footer-nap{display:flex;flex-direction:column;gap:6px;margin-top:24px;max-width:240px;font:14px/1.45 Montreal,"LH Montreal Fallback",Arial,sans-serif;font-style:normal;color:var(--ink)}
.lh-site-footer .footer-cols .footer-nap a{display:inline;padding:0;font-size:14px;text-decoration:underline;text-underline-offset:3px}
.lh-site-footer .footer-nap span{display:block}