/* 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. The two hover reveals (the wolf's "somebody call somebody" note and "case closed.") stay
   outside the query on purpose: on a tablet, a tap is how those notes appear. */
@font-face{font-family:Kamerik;src:url('how-it-works/assets/Kamerik205-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Montreal;src:url('how-it-works/assets/PPNeueMontreal-Regular.woff2') format('woff2');font-display:swap}
@font-face{font-family:Akkurat;src:url('how-it-works/assets/AkkuratMonoLLWeb-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
:root{--cobalt:#092AFF;--sticker-scale:1}
*{box-sizing:border-box}
html{background:#fff;scroll-behavior:smooth}
body{margin:0;color:#fff;font-family:Montreal,Arial,sans-serif}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hero{height:86svh;min-height:540px;max-height:1080px;position:relative;isolation:isolate}
.media{position:absolute;inset:0;overflow:hidden;z-index:-1;background:#20221e}
.poster,video,.shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.shade{background:linear-gradient(180deg,#0006,transparent 24%,#0001 70%,#0002)}
video.is-unavailable{visibility:hidden}
header{position:absolute;inset:24px 32px auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand img{width:112px;height:47px;object-fit:contain;filter:brightness(0) invert(1);display:block}
nav{display:flex;align-items:center;gap:44px;font-size:18px}
nav a{padding:8px 0;text-shadow:0 1px 5px #0009}
@media(hover:hover) and (pointer:fine){nav a:hover{text-decoration:underline;text-underline-offset:6px}}
h1{position:absolute;left:0;top:50%;transform:translateY(-50%);width:100%;margin:0;text-align:center;font-family:Kamerik,Arial,sans-serif;font-size:clamp(64px,12.4vw,250px);font-weight:700;-webkit-text-stroke:.02em white;paint-order:stroke fill;font-kerning:none;letter-spacing:.005em;line-height:1;white-space:nowrap}
.playback{position:absolute;bottom:92px;right:32px;display:flex;align-items:center;gap:8px;background:#0005;color:white;border:1px solid #fff6;border-radius:2px;padding:9px 11px;font:11px/1.2 Akkurat,monospace}
@media(hover:hover) and (pointer:fine){.playback:hover{background:#0008}}
.video-status{position:absolute;right:32px;bottom:132px;margin:0;font:11px/1.4 Akkurat,monospace;text-shadow:0 1px 4px #000;max-width:230px;text-align:right}
/* Focus rings (A11Y-02, 2026-10-23): the white ring is kept for the hero video only. Every other link on
   the page, the shared footer included, gets the site-wide magenta ring, which reads on the light sections. */
a:focus-visible{outline:3px solid #a52868;outline-offset:5px}
.hero a:focus-visible,.playback:focus-visible{outline:3px solid white;outline-offset:5px}
.citations{position:relative;display:flow-root;color:var(--cobalt);background:#fff;padding-bottom:26px}
.sticker-scroll{position:relative;margin-top:-94px;padding:20px 28px 10px;z-index:2}
.sticker-row{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1550px;margin:0 auto;min-height:130px}
.sticker{--lift:0px;--scale:1;--rotate:0deg;display:block;flex:0 0 auto;width:calc(var(--width) * var(--sticker-scale) * 1px);padding:0;border:0;background:transparent;position:relative;top:var(--offset);transform:translateY(var(--lift)) scale(var(--scale)) rotate(var(--rotate));transition:transform 240ms cubic-bezier(.2,.9,.3,1.25);touch-action:pan-x pan-y}
.sticker img{display:block;width:100%;height:auto;pointer-events:none;user-select:none}
@media(hover:hover){.sticker:hover{--lift:-5px;--scale:1.04;--rotate:var(--turn)}}
.sticker:focus-visible{outline:2px solid var(--cobalt);outline-offset:5px;border-radius:3px;--lift:-5px;--scale:1.04;--rotate:var(--turn)}
.sticker.is-pressed{--scale:.96;--lift:-1px;transition-duration:80ms}
h2{margin:9px 20px 0;text-align:center;font:400 14px/1.5 Akkurat,monospace;letter-spacing:.085em}
@media(max-width:1350px) and (min-width:701px){:root{--sticker-scale:calc((100vw - 150px) / 1230px)}.sticker-row{min-height:135px}.sticker-scroll{margin-top:-87px}}
@media(max-width:700px){.poster{object-position:25% center}video{object-position:var(--video-position,50%) center}.hero{height:78svh;min-height:480px}header{inset:20px 20px auto}.brand img{width:88px;height:37px}nav{font-size:15px;gap:22px}h1{left:5%;width:90%;font-size:clamp(64px,23vw,148px);letter-spacing:.005em;line-height:.98;white-space:normal}h1 span{display:block}.playback{right:20px;bottom:104px}.video-status{right:20px;bottom:144px}.sticker-scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#092AFF55 transparent;margin-top:-92px;padding:20px 24px 14px;scroll-padding-inline:24px}.sticker-row{width:max-content;gap:26px;min-height:118px}.sticker{width:calc(var(--width) * .85px)}h2{font-size:11px;letter-spacing:.07em;margin-top:0}.scroll-hint{display:flex;justify-content:flex-end;margin:0 24px}.scroll-hint button{border:0;background:transparent;color:var(--cobalt);min-height:32px;padding:8px 0;font:10px/1.4 Akkurat,monospace}.scroll-hint button:focus-visible{outline:2px solid var(--cobalt);outline-offset:4px}@media(hover:hover) and (pointer:fine){.scroll-hint button:hover{text-decoration:underline;text-underline-offset:3px}}.citations{padding-bottom:26px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.sticker{transition:none}.sticker:focus-visible,.sticker.is-pressed{--lift:0px;--scale:1;--rotate:0deg}@media(hover:hover) and (pointer:fine){.sticker:hover{--lift:0px;--scale:1;--rotate:0deg}}}

[hidden]{display:none!important}

.scroll-hint{display:none}
@media(max-width:700px){.scroll-hint{display:flex}}

/* Second section: editorial photo prints and a restrained reveal. */
@font-face{font-family:Freight;src:url('how-it-works/assets/FreigBigProLigIta.woff2') format('woff2');font-weight:300;font-style:italic;font-display:swap}
.filter-definitions{position:absolute;pointer-events:none}
.about{background:#f4f4f2;color:#101010;padding:84px 3.5% 100px;overflow:clip}
.about-inner{max-width:1880px;margin:auto;display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:4.5%}
.about-collage{position:relative;height:clamp(500px,49vw,820px);--scroll-progress:.5;--pointer-x:0;--pointer-y:0;--motion-range:1}
.photo-print{margin:0;background:#fff;padding:12px 12px 18px;position:absolute;transform-origin:center;transition:transform 180ms ease-out;will-change:transform}
.photo-print img{display:block;width:100%;height:100%;object-fit:cover}
.photo-print-main{width:66%;height:89%;top:0;left:0;transform:translate(calc((var(--scroll-progress) - .5) * -54px * var(--motion-range) + var(--pointer-x) * 16px),calc((var(--scroll-progress) - .5) * -130px * var(--motion-range) + var(--pointer-y) * 12px)) rotate(calc(-4deg + (var(--scroll-progress) - .5) * 18deg * var(--motion-range) + var(--pointer-x) * 4deg))}
.photo-print-main img{object-position:50% 50%}
.photo-print-detail{width:47%;height:59%;right:0;bottom:0;padding-bottom:38px;transform:translate(calc((var(--scroll-progress) - .5) * 72px * var(--motion-range) + var(--pointer-x) * -20px),calc((var(--scroll-progress) - .5) * 180px * var(--motion-range) + var(--pointer-y) * -18px)) rotate(calc(6deg + (var(--scroll-progress) - .5) * -24deg * var(--motion-range) + var(--pointer-x) * -5deg))}
.photo-print-detail img{object-position:28% 65%}
.about-brand-sticker{position:absolute;width:32%;left:48%;top:32%;z-index:2;transition:transform 180ms ease-out;transform:translate(calc(var(--pointer-x) * 24px),calc((var(--scroll-progress) - .5) * -90px * var(--motion-range) + var(--pointer-y) * 20px)) rotate(calc(-9deg + (var(--scroll-progress) - .5) * 26deg * var(--motion-range) + var(--pointer-x) * 7deg));pointer-events:none}
.about-brand-sticker img{display:block;width:100%;height:auto;filter:url('#brand-contour')}
.about-copy{text-align:center;padding:16px 0}
.about-eyebrow{margin:0 0 18px;font:italic 300 clamp(25px,2.3vw,34px)/1.15 Freight,Georgia,serif}
.about h2{margin:0;font:700 clamp(36px,4.5vw,82px)/1.03 Kamerik,Arial,sans-serif;letter-spacing:-.035em;color:#101010;text-align:center}
.about h2 .reveal-mask{display:block}
.about h2 .about-serif{font:italic 300 clamp(54px,7.2vw,128px)/.98 Freight,Georgia,serif;letter-spacing:-.025em;padding-bottom:.1em}
.about-description{margin:24px auto 0;max-width:470px;font:19px/1.5 Montreal,Arial,sans-serif;letter-spacing:-.012em}
.about-action{margin-top:27px}
.about-cta{display:inline-flex;align-items:stretch;background:var(--cobalt);color:white;font:12px/1.3 Akkurat,monospace;text-align:left}
.about-cta>span:last-child{display:flex;align-items:center;padding:14px 18px}
.cta-arrow{display:grid;place-items:center;width:48px;border-right:1px solid #fff8;font:25px/1 Montreal,Arial,sans-serif;transition:padding-left 180ms ease}
@media(hover:hover) and (pointer:fine){.about-cta:hover .cta-arrow{padding-left:6px}}
.about-cta:focus-visible{outline:3px solid var(--cobalt);outline-offset:5px}
.reveal-mask{display:block;overflow:clip}
.reveal-line{display:block;transform:translateY(0);transition:transform 700ms cubic-bezier(.16,1,.3,1);transition-delay:var(--reveal-delay,0ms)}
.about.reveal-enabled:not(.is-revealed) .reveal-line{transform:translateY(110%)}
@media(max-width:1000px) and (min-width:701px){.about{padding:84px 4% 94px}.about-inner{gap:5%}.about-description{font-size:16px}.about-cta{font-size:10px}.about-cta>span:last-child{padding:13px}.about-collage{height:490px}.photo-print{padding:9px 9px 15px}.photo-print-detail{padding-bottom:28px}}
@media(max-width:700px){.about{padding:64px 24px 70px}.about-inner{grid-template-columns:1fr;gap:52px;max-width:500px}.about-collage{height:clamp(345px,100vw,500px);margin:0 6px;--motion-range:.65}.photo-print{padding:9px 9px 14px}.photo-print-detail{padding-bottom:28px}.about-copy{padding:0}.about-eyebrow{font-size:27px;margin-bottom:16px}.about h2{font-size:clamp(32px,8.4vw,52px)}.about h2 .about-serif{font-size:clamp(53px,14vw,80px)}.about-description{font-size:17px;max-width:370px;margin-top:18px}.about-cta{font-size:10px}.about-action{margin-top:23px}.about-cta>span:last-child{padding:15px 13px}.cta-arrow{width:42px}}
@media(prefers-reduced-motion:reduce){.photo-print-main{transform:rotate(-3deg)}.photo-print-detail{transform:rotate(4deg)}.about-brand-sticker{transform:rotate(-9deg)}.reveal-line{transition:none!important;transform:none!important}.cta-arrow{transition:none}.photo-print{will-change:auto;transition:none}.about-brand-sticker{transition:none}}

/* Callouts move with the portrait so their arrows stay attached. */
.callout-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.callout-path{fill:none;stroke:var(--cobalt);stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.mobile-callout{display:none}
.founder-note{position:absolute;left:112%;top:0;margin:0;white-space:nowrap;color:var(--cobalt);font:400 clamp(11px,1vw,17px)/1.4 Akkurat,monospace;letter-spacing:.07em;transform:rotate(2deg)}
.wolf-note{position:absolute;left:12%;top:calc(100% + 20px);width:max-content;text-align:left;transform:rotate(-3deg)}
.wolf-label{display:block;color:var(--cobalt);font:400 clamp(12px,1vw,17px)/1.4 Akkurat,monospace;letter-spacing:.09em}
.ai-note{display:block;width:max-content;margin-top:10px;padding:0 2px 4px;border-bottom:2px solid var(--cobalt);font:italic 17px/1.4 Akkurat,monospace;color:#101010}
.wild-word{display:inline-block;position:relative;border:0;background:transparent;color:inherit;padding:0 1px;font:inherit;transform-origin:50% 70%;transition:transform 160ms ease,color 160ms ease}
.wild-word:focus-visible{color:var(--cobalt);transform:rotate(-4deg) scale(1.1)}@media(hover:hover) and (pointer:fine){.wild-word:hover{color:var(--cobalt);transform:rotate(-4deg) scale(1.1)}}
.wild-word:focus-visible{outline:2px solid var(--cobalt);outline-offset:5px}
.callouts-enabled .callout-path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 950ms cubic-bezier(.22,1,.36,1)}
.callouts-enabled .wolf-path{transition-delay:250ms}
.callouts-enabled .founder-note,.callouts-enabled .wolf-note{opacity:0;transition:opacity 350ms ease 100ms}
.callouts-enabled.callouts-ready .callout-path{stroke-dashoffset:0}
.callouts-enabled.callouts-ready .founder-note,.callouts-enabled.callouts-ready .wolf-note{opacity:1}
@media(max-width:1000px) and (min-width:701px){.founder-note{left:106%;font-size:10px;letter-spacing:.03em}.ai-note{font-size:13px}.wolf-note{top:calc(100% + 16px)}}
@media(max-width:700px){.desktop-callout{display:none}.mobile-callout{display:block}.founder-note{left:40%;top:-34px;font-size:10px;letter-spacing:.03em}.wolf-note{left:8%;top:calc(100% + 14px)}.wolf-label{font-size:11px}.ai-note{font-size:12px;margin-top:7px}.callout-path{stroke-width:2}.about-inner{gap:64px}}
@media(prefers-reduced-motion:reduce){.callout-path,.founder-note,.wolf-note{transition:none!important}.callouts-enabled .callout-path{stroke-dashoffset:0}.callouts-enabled .founder-note,.callouts-enabled .wolf-note{opacity:1}.wild-word{transition:none}.wild-word:focus-visible{transform:none}@media(hover:hover) and (pointer:fine){.wild-word:hover{transform:none}}}
@media(max-width:700px){.wolf-note{left:-5%}.ai-note{font-size:11px}}

/* Word of mouth: a dark editorial section, preserving the supplied copy. */
.wordmouth{background:#111214;color:#fff;padding:104px 5% 110px;overflow:clip}
.wordmouth-inner{max-width:1720px;margin:auto}
.wordmouth h2{margin:0 0 65px;color:#fff;text-align:left;letter-spacing:-.04em;font:700 clamp(48px,8.6vw,156px)/1 Kamerik,Arial,sans-serif}
.wordmouth-headline{display:block}
.wordmouth-flex{display:block;color:#7490ff;font:italic 300 clamp(64px,10.5vw,188px)/1.05 Freight,Georgia,serif;letter-spacing:-.035em;margin-top:5px}
.wordmouth-columns{display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:start}
.wordmouth p{margin:0 0 23px;font:20px/1.5 Montreal,Arial,sans-serif;letter-spacing:-.01em}
.wordmouth-opening p{font-size:clamp(23px,2vw,31px);line-height:1.34}
.wordmouth-detail{max-width:570px}
.wordmouth-detail .wordmouth-pivot{font-size:clamp(24px,2.2vw,34px);line-height:1.25;margin-bottom:27px}
.search-story{width:100%;max-width:520px;margin-top:38px}
.search-story svg{display:block;width:100%;overflow:visible}
.story-label{fill:#7490ff;font:12px Akkurat,monospace;letter-spacing:1px}
.story-query{fill:white;font:italic 300 35px Freight,Georgia,serif}
.story-line{fill:none;stroke:#7490ff;stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.wordmouth-cta{display:flex;align-items:center;justify-content:space-between;gap:26px;border-top:1px solid #ffffff65;border-bottom:1px solid #ffffff65;padding:22px 0;margin-top:36px;color:white;font:13px/1.4 Akkurat,monospace;letter-spacing:.02em}
.wordmouth-cta>span:last-child{font:28px/1 Montreal,Arial,sans-serif;transition:transform 180ms ease}
@media(hover:hover) and (pointer:fine){.wordmouth-cta:hover>span:last-child{transform:translateX(7px)}}
@media(hover:hover) and (pointer:fine){.wordmouth-cta:hover{color:#a4b5ff}}
.wordmouth-cta:focus-visible{outline:3px solid #7490ff;outline-offset:7px}
.wordmouth.motion-enabled .wordmouth-headline,.wordmouth.motion-enabled .wordmouth-flex{opacity:0;transform:translateY(28px);transition:opacity 600ms ease,transform 800ms cubic-bezier(.16,1,.3,1)}
.wordmouth.motion-enabled .wordmouth-flex{transition-delay:100ms}
.wordmouth.motion-enabled .story-line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1000ms ease 300ms}
.wordmouth.motion-enabled.is-visible .wordmouth-headline,.wordmouth.motion-enabled.is-visible .wordmouth-flex{opacity:1;transform:translateY(0)}
.wordmouth.motion-enabled.is-visible .story-line{stroke-dashoffset:0}
@media(max-width:1000px){.wordmouth{padding:84px 5% 90px}.wordmouth-columns{gap:7%}.wordmouth p{font-size:18px}.wordmouth-opening p{font-size:23px}.wordmouth h2{margin-bottom:48px}.wordmouth-cta{font-size:11px}}
@media(max-width:700px){.wordmouth{padding:65px 24px 70px}.wordmouth h2{font-size:clamp(34px,8.5vw,58px);letter-spacing:-.04em;margin-bottom:40px}.wordmouth-flex{font-size:clamp(52px,13vw,88px);margin-top:10px}.wordmouth-columns{grid-template-columns:1fr;gap:40px}.wordmouth-opening p{font-size:24px;line-height:1.35}.wordmouth p{margin-bottom:22px}.wordmouth-detail .wordmouth-pivot{font-size:27px}.search-story{margin-top:24px}.wordmouth-cta{font-size:11px;gap:15px;padding:19px 0;margin-top:29px}}
@media(prefers-reduced-motion:reduce){.wordmouth.motion-enabled .wordmouth-headline,.wordmouth.motion-enabled .wordmouth-flex{opacity:1;transform:none;transition:none}.wordmouth.motion-enabled .story-line{stroke-dashoffset:0;transition:none}.wordmouth-cta>span:last-child{transition:none}}
.wordmouth-photo{margin:42px 0 0;max-width:480px;position:relative;transform:rotate(-4deg)}
.phone-ring{display:block;width:100%;padding:0;border:8px solid #f4f4f2;background:#080908;box-shadow:0 8px 22px #0003;transform-origin:50% 70%;cursor:pointer}
.phone-ring img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.phone-ring:focus-visible{outline:3px solid #7490ff;outline-offset:7px}
.wordmouth-photo figcaption{position:absolute;bottom:16px;right:-23px;background:#FF83CA;color:#111214;padding:12px 15px;font:13px/1 Akkurat,monospace;letter-spacing:.03em;transform:rotate(8deg);pointer-events:none}
.wordmouth-photo figcaption span{margin-left:12px;font-size:20px}
@media(max-width:700px){.wordmouth-photo{margin:36px 8px 7px;max-width:420px}.wordmouth-photo figcaption{right:-12px;font-size:11px;padding:10px 12px}.phone-ring{border-width:6px}}

/* Typography refinement: restore the original composition and clarify emphasis. */
.wordmouth{padding:94px 5% 100px}
.wordmouth-inner{max-width:1500px}
.wordmouth h2{font-size:clamp(48px,7.2vw,122px);line-height:1.02;margin-bottom:58px;letter-spacing:-.045em}
.wordmouth-flex{font-size:clamp(64px,9.6vw,158px);line-height:.95;margin-top:8px;color:#f4f4f2;letter-spacing:-.035em}
.wordmouth-columns{grid-template-columns:1fr 1fr;gap:11%}
.wordmouth p{font-size:19px;line-height:1.5}
.wordmouth-opening p{font-size:clamp(22px,1.7vw,26px);line-height:1.42}
.wordmouth-detail .wordmouth-pivot{font-size:clamp(25px,2.1vw,32px);line-height:1.23;margin-bottom:28px;letter-spacing:-.025em}
.wordmouth-pivot>span{display:inline-block;font:italic 300 clamp(36px,3.3vw,52px)/1.08 Freight,Georgia,serif;margin-bottom:9px;letter-spacing:-.025em}
.wordmouth-photo{max-width:390px;margin:38px 8px 0}
.wordmouth-photo figcaption{font-size:12px;padding:12px 15px;right:-13px}
.wordmouth-cta{display:inline-flex;justify-content:flex-start;gap:0;background:var(--cobalt);border:0;padding:0;margin-top:19px;font-size:11px;line-height:1.35}
.wordmouth-cta>span:first-child{display:grid;place-items:center;width:46px;align-self:stretch;border-right:1px solid #ffffff70;font:25px/1 Montreal,Arial,sans-serif;transition:padding-left 180ms ease;flex-shrink:0}
.wordmouth-cta>span:last-child{font:inherit;padding:17px 19px;transition:none}
@media(hover:hover) and (pointer:fine){.wordmouth-cta:hover{color:white;background:#2448ff}}
@media(hover:hover) and (pointer:fine){.wordmouth-cta:hover>span:last-child{transform:none}}
@media(hover:hover) and (pointer:fine){.wordmouth-cta:hover>span:first-child{padding-left:5px}}
@media(max-width:1000px){.wordmouth-columns{gap:7%}.wordmouth p{font-size:18px}.wordmouth-opening p{font-size:22px}.wordmouth-photo{max-width:340px}.wordmouth-cta>span:last-child{padding:15px 13px}.wordmouth-cta{font-size:10px}}
@media(max-width:700px){.wordmouth{padding:64px 24px 70px}.wordmouth h2{font-size:clamp(31px,8.5vw,58px);margin-bottom:38px}.wordmouth-flex{font-size:clamp(49px,13vw,88px);margin-top:10px}.wordmouth-columns{grid-template-columns:1fr;gap:42px}.wordmouth-opening p{font-size:22px}.wordmouth-detail .wordmouth-pivot{font-size:26px}.wordmouth-pivot>span{font-size:40px}.wordmouth-photo{margin:32px 8px 0;max-width:390px}.wordmouth-cta{font-size:10px;max-width:100%}.wordmouth-cta>span:first-child{width:38px}.wordmouth-cta>span:last-child{padding:15px 12px}}
@media(prefers-reduced-motion:reduce){.wordmouth-cta>span:first-child{transition:none}}

/* Cobalt links the expressive serif phrases across the section. */
.wordmouth-flex,.wordmouth-pivot>span{color:#7490ff}

/* A small home-service portrait balances the heading without competing with it. */
.wordmouth-heading-row{position:relative;margin-bottom:58px}
.wordmouth-heading-row h2{margin-bottom:0}
.home-service-photo{position:absolute;right:0;top:12px;width:25%;max-width:350px;margin:0;padding:8px 8px 17px;background:#f4f4f2;transform:rotate(5deg)}
.home-service-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
@media(max-width:1000px) and (min-width:701px){.home-service-photo{width:25%;top:5px;padding:6px 6px 13px}.wordmouth-heading-row{margin-bottom:45px}}
@media(max-width:700px){.wordmouth-heading-row{margin-bottom:36px}.home-service-photo{position:relative;right:auto;top:auto;width:72%;max-width:280px;margin:28px 7px 0 auto;padding:6px 6px 13px}}

@font-face{font-family:Caveat;src:url('how-it-works/assets/Caveat-Regular.woff2') format('woff2');font-weight:400 700;font-display:swap}
.wordmouth-heading-row:has(.gerald-photo){min-height:390px}
.gerald-photo{width:24%;transform:rotate(4deg);padding-bottom:12px}
.gerald-photo img{object-position:center 25%}
.gerald-note{position:absolute;top:calc(100% + 16px);right:0;width:420px;max-width:42vw;text-align:right;color:#7490ff;font:500 27px/1.05 Caveat,cursive;transform:rotate(-6deg)}
.gerald-note span{display:block}
.gerald-intro{color:#f4f4f2;font-size:32px;margin-bottom:4px}
.gerald-note strong{display:inline-block;color:#FF83CA;font-size:32px;font-weight:600;border-bottom:2px solid #FF83CA;transform:rotate(-3deg);padding:0 3px 2px;margin-top:5px}
@media(max-width:1000px) and (min-width:701px){.wordmouth-heading-row:has(.gerald-photo){min-height:330px}.gerald-note{font-size:22px;width:350px;max-width:44vw}.gerald-intro,.gerald-note strong{font-size:27px}}
@media(max-width:700px){.wordmouth-heading-row:has(.gerald-photo){min-height:0;margin-bottom:44px}.gerald-photo{width:72%;margin-bottom:150px}.gerald-note{max-width:none;width:min(310px,80vw);font-size:25px;top:calc(100% + 17px);right:-2px}.gerald-intro,.gerald-note strong{font-size:30px}}
@media(max-width:700px){.gerald-photo{margin-bottom:180px}}

/* Gerald’s portrait overlaps the headline edge like a larger loose print. */
.gerald-photo{width:31%;max-width:440px;right:-1%;top:-12px;z-index:2;transform:rotate(5deg)}
.gerald-photo img{aspect-ratio:4/3}
.wordmouth-heading-row:has(.gerald-photo){min-height:470px}
.gerald-note{max-width:none;width:420px}
@media(max-width:1000px) and (min-width:701px){.gerald-photo{width:31%;top:-5px}.wordmouth-heading-row:has(.gerald-photo){min-height:390px}.gerald-note{width:350px;max-width:44vw}}
@media(max-width:700px){.gerald-photo{width:86%;max-width:340px;right:auto;top:auto;margin-top:12px;margin-right:-4px;margin-bottom:180px}.wordmouth-heading-row:has(.gerald-photo){min-height:0}.gerald-note{width:min(310px,80vw)}}
@media(max-width:360px){.gerald-photo{margin-bottom:240px}.gerald-note{font-size:23px}}

/* Three ridiculous emergencies, three clear reasons to call. */
.emergencies{background:#f4f4f2;color:#111214;padding:90px 6% 85px;overflow:clip}
.emergency-inner{max-width:1500px;margin:auto}
.emergency-intro{text-align:center;max-width:1200px;margin:0 auto 85px}
.emergency-intro .scribble-eyebrow{font:500 28px/1.2 Caveat,cursive;color:var(--cobalt);transform:rotate(-2deg);margin:0 0 22px}
.emergency-intro h2{font:700 clamp(40px,6vw,104px)/1.02 Kamerik,sans-serif;letter-spacing:-.045em;margin:0}
.emergency-intro h2>span{display:block;color:var(--cobalt);font:italic 300 clamp(51px,7.7vw,133px)/1.06 Freight,serif;letter-spacing:-.03em}
.emergency-intro>p:not(.scribble-eyebrow){font:22px/1.5 Montreal,sans-serif;max-width:720px;margin:26px auto 0}
.emergency-motion{border:0;border-bottom:1px solid #092AFF70;padding:8px 0;background:none;color:var(--cobalt);font:12px/1.4 Akkurat,monospace;margin-top:22px}
.emergency-motion span{margin-left:12px}
.emergency-row{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:10%;margin:0 0 110px}
.emergency-sink{grid-template-columns:1fr 1.15fr}.emergency-sink .emergency-scene{order:2}.emergency-sink .emergency-copy{order:1}
.emergency-scene{position:relative;margin:0 15px}
.emergency-print{position:relative;border:10px solid white;background:#e4e4df;box-shadow:0 8px 18px #00000012;transform:rotate(-4deg);transition:transform 350ms cubic-bezier(.2,.8,.3,1)}
.emergency-sink .emergency-print{transform:rotate(4deg)}
.emergency-scene:focus-within .emergency-print{transform:rotate(1deg) translateY(-7px)}@media(hover:hover) and (pointer:fine){.emergency-scene:hover .emergency-print{transform:rotate(1deg) translateY(-7px)}}
.emergency-print .emergency-video{position:static;display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.scene-play{position:absolute;bottom:12px;left:12px;background:var(--cobalt);color:white;border:0;min-width:36px;min-height:36px;font:16px Montreal,sans-serif}
.chaos-sticker{position:absolute;top:-35px;right:-25px;background:#FF83CA;color:#111214;border:5px solid white;padding:17px 21px 12px;transform:rotate(10deg);box-shadow:3px 4px 0 #111214;z-index:2;transition:transform 200ms ease}
.chaos-sticker span{display:block;font:700 clamp(17px,2vw,28px)/1 Kamerik,sans-serif;letter-spacing:-.04em}
.chaos-sticker svg{display:block;width:64px;height:37px;margin:8px auto 0;transform:rotate(-5deg)}
.chaos-sticker:focus-visible{transform:rotate(-9deg) scale(1.13)}@media(hover:hover) and (pointer:fine){.chaos-sticker:hover{transform:rotate(-9deg) scale(1.13)}}
.emergency-sink .chaos-sticker{right:auto;left:-26px;transform:rotate(-10deg);border-radius:50%;padding:22px 18px}
.emergency-detective .chaos-sticker{clip-path:polygon(10% 0,25% 8%,40% 0,55% 8%,70% 0,85% 8%,100% 0,94% 35%,100% 50%,94% 65%,100% 100%,75% 92%,60% 100%,45% 92%,30% 100%,15% 92%,0 100%,6% 65%,0 50%,6% 35%);box-shadow:none;padding:26px}
.scene-note{font:500 29px/1.1 Caveat,cursive;color:var(--cobalt);margin:25px 0 0 25px;transform:rotate(-4deg)}
.scene-note span{display:inline-block;margin-left:12px;font-size:40px;transition:transform 200ms ease}
@media(hover:hover) and (pointer:fine){.emergency-scene:hover .scene-note span{transform:rotate(-20deg) translateY(-5px)}}
.emergency-number{font:13px Akkurat,monospace;color:var(--cobalt)}
.emergency-copy h3{font:700 clamp(33px,3.4vw,60px)/1.06 Kamerik,sans-serif;letter-spacing:-.035em;margin:20px 0}
.emergency-copy p{font:22px/1.5 Montreal,sans-serif;max-width:475px;margin:0}
.emergency-finale{text-align:center;position:relative;margin:10px auto 0}
.case-sticker{display:table;margin:0 auto 28px;background:#FF83CA;padding:15px 20px;font:700 20px Kamerik,sans-serif;transform:rotate(-4deg);transition:transform 250ms ease}
.map-cta{display:inline-flex;align-items:center;gap:35px;background:var(--cobalt);color:white;padding:24px 28px;font:14px/1.4 Akkurat,monospace}
.map-cta span{font:32px/1 Montreal,sans-serif;transition:transform 200ms ease}
@media(hover:hover) and (pointer:fine){.map-cta:hover span{transform:translateX(9px)}}
.case-note{font:500 34px Caveat,cursive;color:var(--cobalt);margin:17px 0 0;transform:rotate(-5deg);opacity:0;transition:opacity 200ms,transform 200ms}
.emergency-finale:hover .case-note,.emergency-finale:focus-within .case-note{opacity:1;transform:rotate(5deg)}
.emergency-finale:focus-within .case-sticker{transform:rotate(6deg) scale(1.05)}@media(hover:hover) and (pointer:fine){.emergency-finale:hover .case-sticker{transform:rotate(6deg) scale(1.05)}}
.emergencies button:focus-visible,.map-cta:focus-visible{outline:3px solid var(--cobalt);outline-offset:6px}
@media(max-width:700px){.emergencies{padding:65px 24px 55px}.emergency-intro{margin-bottom:70px}.emergency-intro .scribble-eyebrow{font-size:24px}.emergency-intro h2{font-size:clamp(30px,8.8vw,58px)}.emergency-intro h2>span{font-size:clamp(44px,12vw,80px);margin-top:10px}.emergency-intro>p:not(.scribble-eyebrow){font-size:19px}.emergency-row,.emergency-sink{grid-template-columns:1fr;gap:32px;margin-bottom:80px}.emergency-sink .emergency-scene,.emergency-sink .emergency-copy{order:initial}.emergency-scene{margin:0 8px}.emergency-print{border-width:7px}.chaos-sticker{top:-23px;right:-18px;padding:12px 15px 8px;border-width:3px}.chaos-sticker span{font-size:18px}.chaos-sticker svg{width:48px;height:28px}.emergency-sink .chaos-sticker{left:-17px;padding:15px 12px}.emergency-detective .chaos-sticker{padding:19px}.scene-note{font-size:26px;margin-left:0}.emergency-copy h3{font-size:34px;margin:12px 0 17px}.emergency-copy p{font-size:19px}.map-cta{font-size:11px;gap:18px;padding:20px 18px}.case-sticker{font-size:16px}.case-note{opacity:1}}
@media(prefers-reduced-motion:reduce){.emergencies *{transition:none!important}.emergency-scene:focus-within .emergency-print{transform:rotate(-4deg)}@media(hover:hover) and (pointer:fine){.emergency-scene:hover .emergency-print{transform:rotate(-4deg)}}.case-note{opacity:1}}
@media(prefers-reduced-motion:reduce){.emergency-video{visibility:hidden}.emergency-print{background-size:cover;background-position:center}.emergency-ac .emergency-print{background-image:url('assets/emergency-ac.webp')}.emergency-sink .emergency-print{background-image:url('assets/emergency-sink.webp')}.emergency-detective .emergency-print{background-image:url('assets/emergency-detective.webp')}.scene-play,.emergency-motion{display:none}}

/* Supplied campaign composition: big print, bold type, die-cut sticker overlaps. */
.emergencies{padding:28px 4% 85px;background:#faf9f6}
.emergency-inner{max-width:1600px}
.emergency-intro{max-width:1450px;margin-bottom:48px;position:relative}
.emergency-intro .scribble-eyebrow{margin-bottom:20px;font-size:30px}
.emergency-intro h2{font-size:clamp(44px,6.7vw,112px);letter-spacing:-.055em;-webkit-text-stroke:1.1px currentColor;line-height:.98}
.emergency-intro h2>span{font-size:clamp(58px,8.7vw,146px);line-height:.98;-webkit-text-stroke:0;margin-top:3px}
.emergency-intro>p:not(.scribble-eyebrow){max-width:850px;margin-top:20px;font-size:23px;line-height:1.45}
.emergency-motion{position:absolute;right:0;top:0;font-size:10px;margin:0;opacity:.7}
.emergency-row{grid-template-columns:60% 36%;gap:4%;margin-bottom:125px}
.emergency-sink{grid-template-columns:36% 60%}
.emergency-scene{margin:0}
.emergency-copy h3{font-size:clamp(42px,5.2vw,86px);line-height:1.01;letter-spacing:-.045em;-webkit-text-stroke:.8px currentColor}
.emergency-copy p{font-size:23px;max-width:550px}
.emergency-number{font-size:17px}
.emergency-ac .emergency-print{transform:rotate(-4deg)}
.emergency-ac .emergency-video{aspect-ratio:1.52}
.supplied-sticker{background:none;border:0;padding:0;box-shadow:none;transition:transform 220ms ease;filter:drop-shadow(0 3px 1px #0000000c)}
.supplied-sticker img{display:block;width:100%;height:auto;pointer-events:none}
.emergency-ac .not-chill{width:31%;right:-8%;top:-24px;transform:rotate(3deg)}
.emergency-ac .cool-no-ac{width:31%;right:auto;left:-3%;top:auto;bottom:-26px;transform:rotate(-9deg)}
.emergency-ac .terrible-timing{width:27%;right:3%;top:auto;bottom:-63px;transform:rotate(-5deg)}
.terrible-timing svg{position:absolute;width:60px;height:50px;left:-36px;top:-11px;color:var(--cobalt);margin:0;transform:none}
.supplied-sticker:focus-visible{transform:rotate(-7deg) scale(1.12)}@media(hover:hover) and (pointer:fine){.supplied-sticker:hover{transform:rotate(-7deg) scale(1.12)}}
.emergency-ac{padding-bottom:24px}
@media(min-width:701px) and (max-width:1050px){.emergency-motion{top:-13px}.emergency-copy h3{font-size:clamp(36px,5.2vw,55px)}.emergency-copy p{font-size:20px}.emergency-intro .scribble-eyebrow{font-size:25px}}
@media(max-width:700px){
.emergencies{padding:36px 24px 55px}.emergency-intro{margin-bottom:55px}.emergency-intro .scribble-eyebrow{font-size:24px;margin-bottom:19px}.emergency-intro h2{font-size:clamp(30px,8.8vw,58px);-webkit-text-stroke:.4px}.emergency-intro h2>span{font-size:clamp(44px,12vw,80px);margin-top:9px}.emergency-intro>p:not(.scribble-eyebrow){font-size:19px}.emergency-motion{position:static;margin-top:16px;opacity:1}.emergency-row,.emergency-sink{grid-template-columns:1fr;gap:45px;margin-bottom:85px}.emergency-scene{margin:0 3px}.emergency-copy h3{font-size:clamp(34px,9.5vw,52px);-webkit-text-stroke:.3px}.emergency-copy p{font-size:19px}.emergency-number{font-size:13px}.emergency-ac{padding-bottom:0}.emergency-ac .not-chill{width:33%;right:-5%;top:-15px}.emergency-ac .cool-no-ac{width:33%;left:-7%;bottom:-16px}.emergency-ac .terrible-timing{width:32%;right:2%;bottom:-33px}.terrible-timing svg{width:33px;height:30px;left:-23px;top:-6px}.emergency-ac .emergency-copy{margin-top:12px}
}
@media(prefers-reduced-motion:reduce){.supplied-sticker:focus-visible{transform:none}@media(hover:hover) and (pointer:fine){.supplied-sticker:hover{transform:none}}}
@media(min-width:701px){.emergency-intro h2{-webkit-text-stroke:2px currentColor}.emergency-intro h2>span{margin-top:-23px}.emergency-intro{margin-bottom:36px}.emergency-ac .not-chill{width:35%;top:-44px}.emergency-ac .terrible-timing{bottom:-45px}}
.emergency-ac .supplied-sticker:focus-visible{transform:rotate(-7deg) scale(1.12)}@media(hover:hover) and (pointer:fine){.emergency-ac .supplied-sticker:hover{transform:rotate(-7deg) scale(1.12)}}
@media(prefers-reduced-motion:reduce){.emergency-ac .supplied-sticker:focus-visible{transform:none}@media(hover:hover) and (pointer:fine){.emergency-ac .supplied-sticker:hover{transform:none}}}
.emergency-ac .scene-play{bottom:auto;top:12px;left:12px;z-index:3}

/* A panicked mascot reacts in the open top-right space. */
.emergency-ac .emergency-copy{position:relative}
.panicked-wolf{position:absolute;bottom:calc(100% + 28px);right:12%;width:clamp(150px,16vw,255px);padding:0;border:0;background:none;transform:rotate(9deg);z-index:2;transition:transform 240ms ease}
.panicked-wolf img{display:block;width:100%;height:auto;pointer-events:none}
.panicked-wolf:focus-visible{transform:rotate(-6deg) scale(1.08)}@media(hover:hover) and (pointer:fine){.panicked-wolf:hover{transform:rotate(-6deg) scale(1.08)}}
.wolf-aside{position:absolute;bottom:5%;left:-47%;width:75%;font:500 25px/1 Caveat,cursive;color:var(--cobalt);transform:rotate(-12deg);opacity:0;transition:opacity 180ms ease}
.panicked-wolf:hover .wolf-aside,.panicked-wolf:focus-visible .wolf-aside{opacity:1}
@media(min-width:701px) and (max-width:1050px){.panicked-wolf{width:150px;bottom:calc(100% + 12px);right:8%}.wolf-aside{font-size:20px}}
@media(max-width:700px){.panicked-wolf{width:105px;bottom:calc(100% - 17px);right:0}.wolf-aside{font-size:19px;left:-76%;width:95%;bottom:30%}.emergency-ac .emergency-copy{margin-top:52px}}
@media(prefers-reduced-motion:reduce){.panicked-wolf{transition:none}.panicked-wolf:focus-visible{transform:rotate(9deg)}@media(hover:hover) and (pointer:fine){.panicked-wolf:hover{transform:rotate(9deg)}}}
@media(max-width:700px){.emergency-ac .emergency-copy{margin-top:72px}}

.emergency-copy p+p{margin-top:20px}

/* The detective's evidence: illustrative job-photo prints in the foreground. */
.job-evidence{position:absolute;bottom:5%;right:4%;width:43%;height:48%;pointer-events:none}
.job-print{position:absolute;margin:0;background:#fff;padding:5px 5px 17px;width:67%;height:92%;box-shadow:0 4px 9px #0003;transform:rotate(-13deg)}
.job-print img{position:static;display:block;width:100%;height:100%;object-fit:cover}
.job-print figcaption{position:absolute;bottom:4px;left:6px;color:#111214;font:9px/1 Akkurat,monospace}
.job-heater{left:0;top:0}.job-heater img{object-position:80% 40%;clip-path:inset(0);}
.job-ac{right:0;top:13%;transform:rotate(12deg)}
.job-ac img{object-position:50% 60%}
.emergency-detective .emergency-copy h3{font-size:clamp(32px,3.4vw,58px)}
.emergency-detective .emergency-copy h3 span{display:block;color:var(--cobalt);margin-top:10px}
.emergency-detective .scene-note{margin-left:30%;}
@media(max-width:700px){.emergency-detective .emergency-copy h3{font-size:clamp(28px,8vw,44px)}.emergency-detective .scene-note{margin-left:12%}.job-print{padding:3px 3px 13px}.job-print figcaption{font-size:6px;bottom:3px}}
.job-heater img{object-position:100% 40%}
.emergency-detective .emergency-copy h3{font-size:clamp(30px,2.6vw,46px)}
@media(max-width:700px){.emergency-detective .emergency-copy h3{font-size:clamp(28px,8vw,44px)}}

/* Supplied kitchen campaign stickers. */
.emergency-sink .supplied-sticker{background:none;border:0;border-radius:0;padding:0;box-shadow:none}
.emergency-sink .indoor-pool{width:38%;left:-9%;right:auto;top:-45px;transform:rotate(-9deg)}
.emergency-sink .send-help{width:34%;left:auto;right:-4%;top:auto;bottom:42px;transform:rotate(-12deg)}
.emergency-sink .supplied-sticker:focus-visible{transform:rotate(6deg) scale(1.1)}@media(hover:hover) and (pointer:fine){.emergency-sink .supplied-sticker:hover{transform:rotate(6deg) scale(1.1)}}
.emergency-sink .duck-note{width:64%;margin:20px auto 0;transform:rotate(-2deg)}
.duck-note img{display:block;width:100%;height:auto}
.emergency-sink .scene-play{z-index:3}
/* A11Y-09 (2026-10-23): every scene's pause button sits above its sticker (z-index 2), so the sticker
   never covers the button's corner. */
.emergency-scene .scene-play{z-index:3}
@media(max-width:700px){.emergency-sink .indoor-pool{width:43%;left:-6%;top:-24px}.emergency-sink .send-help{width:39%;right:-5%;bottom:14px}.emergency-sink .duck-note{width:86%;margin-top:18px}}
@media(prefers-reduced-motion:reduce){.emergency-sink .supplied-sticker:focus-visible{transform:none}@media(hover:hover) and (pointer:fine){.emergency-sink .supplied-sticker:hover{transform:none}}}
.emergency-sink .send-help{bottom:-25px;right:-4%}
.emergency-sink .duck-note{width:58%;margin:22px auto 0}
@media(max-width:700px){.emergency-sink .send-help{bottom:-15px;right:-4%}.emergency-sink .duck-note{width:86%;margin-top:20px}}

.client-story{background:#faf9f6;color:#111214;padding:75px 5% 95px;overflow:clip}
.story-inner{max-width:1500px;margin:auto}.story-kicker{font:14px/1.4 Akkurat,monospace;letter-spacing:.12em;color:var(--cobalt);margin:0 0 12px}
.client-story h2{font:700 clamp(62px,8.5vw,140px)/.9 Kamerik,sans-serif;letter-spacing:-.065em;margin:0;-webkit-text-stroke:2px currentColor}
.client-story h2 span{display:block;font:italic 300 clamp(86px,11vw,180px)/.92 Freight,Georgia,serif;letter-spacing:-.04em;color:var(--cobalt);-webkit-text-stroke:0}
.story-intro{font-size:26px;margin:25px 0 48px}.story-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:5%;align-items:start}.story-client{position:relative;padding-top:16px}
.story-print{position:relative;background:white;border:10px solid white;transform:rotate(-3deg);box-shadow:0 7px 15px #0000000e}
.story-print #client-video{position:static;display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:#171717}
.story-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:92px;height:92px;border-radius:50%;border:2px solid white;background:var(--cobalt);color:white;font:40px/1 Montreal,sans-serif;padding-left:9px;box-shadow:0 4px 12px #0002}@media(hover:hover) and (pointer:fine){.story-play:hover{background:#254aff}}.story-play[hidden]{display:none}
.hear-sticker{position:absolute;top:-37px;right:-22px;background:#FF83CA;border:6px solid #fff8d5;padding:14px 18px;font:italic 700 clamp(20px,2.8vw,44px)/.9 Kamerik,sans-serif;letter-spacing:-.065em;transform:rotate(8deg);box-shadow:0 3px 7px #0002;pointer-events:none}
.press-play{position:absolute;top:49%;left:-30px;transform:rotate(-13deg);font:600 30px/1 Caveat,cursive;color:var(--cobalt);pointer-events:none}.press-play span{display:inline-block;font-size:65px;margin-left:10px}
.story-client h3{font:700 clamp(28px,3.2vw,51px)/1 Kamerik,sans-serif;letter-spacing:-.04em;margin:36px 0 10px}.story-location{font:13px/1.5 Akkurat,monospace;letter-spacing:.13em;margin:0}
.story-evidence .story-kicker{margin-bottom:20px}.report-print{display:block;background:white;padding:8px;box-shadow:0 4px 12px #0000000c}.report-print img{display:block;width:100%;height:auto}.story-evidence>p:not(.story-kicker){font-size:22px;line-height:1.4;margin:22px 0 17px}
.story-cta{display:inline-flex;align-items:center;gap:25px;background:var(--cobalt);color:#fff8d5;padding:20px 26px;font:700 24px/1.2 Kamerik,sans-serif}.story-cta span{font:32px Montreal,sans-serif;transition:transform 180ms}@media(hover:hover) and (pointer:fine){.story-cta:hover span{transform:translateX(7px)}}.client-story button:focus-visible,.client-story a:focus-visible{outline:3px solid var(--cobalt);outline-offset:5px}
@media(max-width:700px){.client-story{padding:55px 24px 65px}.story-kicker{font-size:11px}.client-story h2{font-size:clamp(43px,12vw,77px);-webkit-text-stroke:.7px}.client-story h2 span{font-size:clamp(63px,17vw,106px)}.story-intro{font-size:21px;margin:22px 0 42px}.story-grid{grid-template-columns:1fr;gap:42px}.story-print{border-width:6px}.hear-sticker{top:-20px;right:-10px;font-size:22px;border-width:4px;padding:10px}.story-play{width:64px;height:64px;font-size:28px}.press-play{left:-12px;top:38%;font-size:24px}.press-play span{font-size:43px}.story-client h3{font-size:29px;margin-top:28px}.story-location{font-size:10px}.story-evidence>p:not(.story-kicker){font-size:19px}.story-cta{font-size:17px;gap:15px;padding:18px 16px}}
@media(prefers-reduced-motion:reduce){.story-cta span{transition:none}}
@font-face{font-family:Anton;src:url('how-it-works/assets/fonts/Anton-Regular.woff2') format('woff2');font-display:swap}
.client-story h2{text-align:left;font-family:Anton,sans-serif;font-weight:400;letter-spacing:-.035em;-webkit-text-stroke:0}
.client-story h2 span{margin-top:2px}
.hear-sticker{font-family:Anton,sans-serif;font-weight:400;font-size:clamp(24px,3.3vw,52px);letter-spacing:-.015em}
.story-client h3,.story-cta{font-family:Anton,sans-serif;font-weight:400;letter-spacing:-.015em}
@media(max-width:700px){.hear-sticker{font-size:25px}}

.report-toggle{border:0;border-bottom:1px solid #092AFF70;padding:6px 0;background:none;color:var(--cobalt);font:11px/1.4 Akkurat,monospace;margin-top:12px}
@media(prefers-reduced-motion:reduce){.report-toggle{display:none}}

/* Supplied proof artwork in the third situation. */
.emergency-detective .supplied-sticker{clip-path:none;background:none;border:0;padding:0;box-shadow:none}
.emergency-detective .case-closed-art{width:37%;top:-37px;right:-5%;transform:rotate(7deg)}
.emergency-detective .show-work-art{width:32%;top:auto;left:-3%;right:auto;bottom:92px;transform:rotate(-9deg)}
.emergency-detective .supplied-sticker:focus-visible{transform:rotate(-5deg) scale(1.1)}@media(hover:hover) and (pointer:fine){.emergency-detective .supplied-sticker:hover{transform:rotate(-5deg) scale(1.1)}}
.emergency-detective .proof-note{width:76%;margin:18px 0 0 16%;transform:rotate(-2deg)}
.proof-note img{display:block;width:100%;height:auto}
@media(max-width:700px){.emergency-detective .case-closed-art{width:43%;top:-20px;right:-5%}.emergency-detective .show-work-art{width:38%;bottom:64px;left:-5%}.emergency-detective .proof-note{width:94%;margin:17px auto 0}}
@media(prefers-reduced-motion:reduce){.emergency-detective .supplied-sticker:focus-visible{transform:none}@media(hover:hover) and (pointer:fine){.emergency-detective .supplied-sticker:hover{transform:none}}}

/* John's comic shop: dark backdrop, vivid thumbnail, supplied client logo. */
.client-story{background:#080808;color:#faf9f6}
.client-story .story-kicker,.client-story h2 span,.client-story .press-play,.client-story .report-toggle{color:#7490ff}
.story-intro span{display:block;font:500 30px/1.2 Caveat,cursive;color:#FF83CA;margin-top:10px;transform:rotate(-1deg);transform-origin:left}
.story-print #client-video{filter:contrast(1.23) saturate(1.12)}
.story-print:has(#client-video:not([data-playing])) #client-video{filter:contrast(1.23) saturate(1.12)}
.story-print #client-video[data-playing]{filter:none}
.story-brand{max-width:235px;transform:rotate(-6deg);margin:30px 0 20px!important}
.story-brand img{display:block;width:100%;height:auto}
.client-story .report-toggle{border-bottom-color:#7490ff80}
.client-story button:focus-visible,.client-story a:focus-visible{outline-color:#FF83CA}
@media(max-width:700px){.story-intro span{font-size:26px;margin-top:14px}.story-brand{max-width:170px;margin-top:26px!important}}
.client-story .hear-sticker{color:#111214}

/* Search illustration takes the wolf's old spot; wolf reacts between situations. */
.emergency-ac{position:relative;margin-bottom:235px}
.search-example{position:relative;margin:0 0 30px;transform:rotate(3deg)}
.search-example>a{display:block;border:7px solid white;box-shadow:0 4px 14px #0001;background:white}
.search-example>a>img{display:block;width:100%;height:auto}
.emergency-ac .not-your-business{width:53%;right:-5%;top:-27px;left:auto;bottom:auto;transform:rotate(-8deg)}
.emergency-ac>.panicked-wolf{width:210px;bottom:-220px;right:auto;left:25%;transform:rotate(-8deg)}
.emergency-ac>.panicked-wolf:focus-visible{transform:rotate(7deg) scale(1.08)}@media(hover:hover) and (pointer:fine){.emergency-ac>.panicked-wolf:hover{transform:rotate(7deg) scale(1.08)}}
.emergency-ac>.panicked-wolf .wolf-aside{left:-65%;width:95%;bottom:30%}
@media(max-width:700px){.emergency-ac{margin-bottom:235px}.search-example{margin:12px 0 35px}.emergency-ac .not-your-business{width:53%;top:-17px;right:-4%}.emergency-ac>.panicked-wolf{width:145px;bottom:-185px;left:auto;right:10%}.emergency-ac .emergency-copy{margin-top:35px}.emergency-ac>.panicked-wolf .wolf-aside{font-size:22px;left:-75%}}
@media(prefers-reduced-motion:reduce){.emergency-ac>.panicked-wolf:focus-visible{transform:rotate(-8deg)}@media(hover:hover) and (pointer:fine){.emergency-ac>.panicked-wolf:hover{transform:rotate(-8deg)}}}
/* Wider case-study composition with a richer thumbnail and balanced media. */
.client-story{padding:65px 5% 85px}
.story-inner{max-width:2400px}
.client-story h2{font-size:clamp(70px,7.6vw,185px)}
.client-story h2 span{font-size:clamp(95px,9.6vw,225px);line-height:.86;margin-top:6px}
.story-intro{font-size:clamp(23px,1.7vw,36px);margin:27px 0 52px}
.story-intro span{font-size:clamp(28px,2vw,43px)}
.story-grid{grid-template-columns:1.1fr 1fr;gap:5%;align-items:start}
.story-print #client-video{aspect-ratio:16/10;object-position:50% 42%;filter:contrast(1.65) saturate(1.4) brightness(.85)}
.story-print:has(#client-video:not([data-playing])) #client-video{filter:contrast(1.65) saturate(1.4) brightness(.85)}
.story-print #client-video[data-playing]{filter:none}
.report-print{height:clamp(390px,36vw,780px);display:flex;align-items:center;justify-content:center}
.report-print picture{display:block;height:100%;width:100%}
.report-print img{height:100%;width:100%;object-fit:contain}
.story-brand{position:absolute;right:20px;bottom:12px;width:clamp(135px,14vw,260px);max-width:none;margin:0!important;transform:rotate(6deg)}
.story-location{margin:34px 0 0;min-height:85px;padding-right:40%;font-size:clamp(11px,1vw,18px)}
.story-cta{font-size:clamp(23px,2.2vw,43px);padding:22px 32px;gap:30px}
.story-evidence>p:not(.story-kicker){font-size:clamp(21px,1.7vw,34px)}
@media(min-width:1800px){.client-story{padding-top:75px}.story-kicker{font-size:20px}.hear-sticker{font-size:clamp(44px,3vw,74px)}.story-play{width:120px;height:120px;font-size:48px}.press-play{font-size:40px}.press-play span{font-size:90px}}
@media(max-width:700px){.client-story{padding:55px 24px 65px}.client-story h2{font-size:clamp(43px,12vw,77px)}.client-story h2 span{font-size:clamp(63px,17vw,106px)}.story-intro{font-size:21px;margin-bottom:42px}.story-intro span{font-size:26px}.story-grid{grid-template-columns:1fr;gap:35px}.story-print #client-video{aspect-ratio:4/3}.report-print{height:auto}.report-print img{height:auto}.story-brand{width:125px;right:0;bottom:0}.story-location{min-height:100px;margin-top:24px;font-size:10px}.story-cta{font-size:18px;padding:18px 20px;gap:18px}.story-evidence>p:not(.story-kicker){font-size:19px}}
@media(min-width:701px){.emergency-ac>.panicked-wolf{left:9%}.emergency-ac>.panicked-wolf .wolf-aside{left:100%;bottom:30%;transform:rotate(7deg)}}
@media(max-width:700px){.emergency-ac>.panicked-wolf{left:8%;right:auto}.emergency-ac>.panicked-wolf .wolf-aside{left:95%;width:80%;transform:rotate(7deg)}}

/* Supplied John portrait and a 20% smaller case-study composition. */
.client-story{padding:52px 5% 68px}
.story-inner{zoom:.8}
.story-print #client-video,.story-print:has(#client-video:not([data-playing])) #client-video{filter:none;object-position:50% 34%}
@media(max-width:700px){.client-story{padding:44px 19px 52px}.story-inner{zoom:.8}}
.story-inner{width:100%}
.story-inner{width:80%}
@media(max-width:700px){.story-inner{width:100%}}

/* Closing local-business carousel. */
.found-finale{background:#fff;color:#0b0b0b;padding:110px 6% 120px;overflow:hidden}
.found-inner{max-width:1720px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:7%;align-items:center}
.found-kicker{font:13px/1.6 Akkurat,monospace;letter-spacing:.12em;color:var(--cobalt);margin:0 0 20px}
.found-copy h2{text-align:left;margin:0;font:400 clamp(65px,7.4vw,145px)/.99 Anton,sans-serif;letter-spacing:-.025em}
.found-copy h2 span{display:block;color:var(--cobalt);font:300 italic clamp(65px,7.3vw,145px)/.9 Freight,serif;letter-spacing:-.04em;margin:20px 0 30px}
.found-description{font-size:clamp(20px,1.6vw,28px);line-height:1.45;max-width:580px;margin:0 0 30px}
.found-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;background:var(--cobalt);color:white;padding:20px 25px;font:400 clamp(18px,1.8vw,29px)/1.2 Anton,sans-serif}
.found-cta span{font:36px/1 Montreal}@media(hover:hover) and (pointer:fine){.found-cta:hover{background:#0b23df}}
.found-carousel{position:relative;min-width:0;padding:10px 15px 0;outline-offset:10px}
.found-prints{position:relative;aspect-ratio:4/5;transform:rotate(3deg);background:#fff;border:12px solid #fff;box-shadow:0 15px 35px #0002}
.found-prints:before{content:"";position:absolute;inset:-15px;background:#f2f1ee;transform:rotate(-7deg);z-index:-1}
.found-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .45s ease;pointer-events:none}
.found-slide.is-active{opacity:1}.found-slide img{width:100%;height:100%;object-fit:cover;display:block}
.found-slide figcaption{position:absolute;left:12px;bottom:12px;background:white;padding:9px 12px;font:10px/1.4 Akkurat,monospace;color:#0b0b0b;letter-spacing:.07em}
.found-sticker{position:absolute;right:-35px;top:-35px;background:#ff92d1;border:7px solid #fff5e2;padding:16px 22px;color:#050505;font:400 clamp(35px,4vw,65px)/.98 Anton,sans-serif;transform:rotate(13deg);box-shadow:0 4px 0 #0001;clip-path:polygon(3% 3%,97% 0,100% 94%,4% 100%,0 9%)}
@media(hover:hover) and (pointer:fine){.found-sticker:hover{transform:rotate(-7deg) scale(1.06)}}.found-sticker{transition:transform .2s ease}
.found-note{position:absolute;right:-25px;bottom:72px;color:var(--cobalt);font:600 clamp(32px,3.3vw,54px)/.85 Caveat,cursive;transform:rotate(-8deg);text-shadow:0 1px 0 white,1px 0 0 white,-1px 0 0 white;pointer-events:none}.found-note svg{display:block;width:100%;height:25px;margin-top:7px}
.found-controls{display:flex;align-items:center;gap:18px;margin:32px 0 0;color:var(--cobalt)}
.found-controls button{border:0;background:transparent;color:inherit;min-height:44px;padding:6px;font-size:30px}.found-count{font:12px Akkurat,monospace}.found-controls .found-auto{margin-left:auto;font:10px Akkurat,monospace;border-bottom:1px solid var(--cobalt)}
.found-finale :focus-visible{outline:3px solid var(--cobalt);outline-offset:5px}
@media(max-width:700px){.found-finale{padding:65px 24px 75px}.found-inner{grid-template-columns:1fr;gap:60px}.found-kicker{font-size:10px}.found-copy h2{font-size:clamp(60px,17vw,110px)}.found-copy h2 span{font-size:clamp(62px,17vw,110px)}.found-description{font-size:20px}.found-cta{font-size:18px;padding:17px 18px;gap:12px}.found-carousel{padding:0 7px}.found-prints{border-width:8px}.found-sticker{right:-7px;top:-25px;font-size:40px;padding:10px 15px;border-width:5px}.found-note{right:0;bottom:70px;font-size:36px}.found-controls{gap:15px}.found-slide figcaption{font-size:8px;max-width:67%;left:7px;bottom:7px}}
@media(prefers-reduced-motion:reduce){.found-slide,.found-sticker{transition:none}}
@media(max-width:700px){.found-copy h2 span{font-size:clamp(48px,13.5vw,90px)}}

/* Keep the timing aside in the white space rather than on the photo. */
.emergency-ac .timing-handwritten{position:absolute;top:auto;right:2%;bottom:-110px;width:auto;margin:0;color:var(--cobalt);background:none;border:0;padding:0;box-shadow:none;font:500 clamp(30px,2.7vw,52px)/1 Caveat,cursive;white-space:nowrap;transform:rotate(-6deg);z-index:2}
.timing-handwritten svg{position:absolute;width:70px;height:90px;left:-67px;top:-55px;margin:0;transform:none}
@media(max-width:700px){.emergency-ac .timing-handwritten{right:0;bottom:-70px;font-size:28px}.timing-handwritten svg{width:40px;height:60px;left:-40px;top:-38px}.emergency-ac .emergency-copy{margin-top:65px}}

/* Josh's supplied transparent closing graphics. */
.found-carousel .found-sticker{width:clamp(180px,20vw,345px);right:-45px;top:-55px;border:0;background:transparent;padding:0;box-shadow:none;clip-path:none;transform:rotate(6deg)}
.found-sticker img,.found-note img{width:100%;height:auto;display:block}
@media(hover:hover) and (pointer:fine){.found-carousel .found-sticker:hover{transform:rotate(-4deg) scale(1.06)}}
.found-carousel .found-note{width:clamp(240px,24vw,380px);right:-38px;bottom:75px;margin:0;transform:rotate(-6deg);text-shadow:none}
@media(max-width:700px){.found-carousel .found-sticker{width:170px;right:-18px;top:-30px}.found-carousel .found-note{width:200px;right:-15px;bottom:66px}}

/* 2026-11-12 (Josh): no pause buttons on the home page. Hidden, not removed: script.js expects each one.
   Visitors whose device asks for reduced motion still get still frames (prefers-reduced-motion in script.js). */
.playback,.emergency-motion,.scene-play,.report-toggle,.found-auto{display:none!important}

/* 2026-11-12 (Josh): the pitch, button, proof strip and awards moved out of the hero into their own band
   (widget lh_lhw_home_01b_intro, gen-home-01b-intro.php). The button reuses the hero's .hero-btn style. */
.home-intro{background:var(--cobalt);color:#fff;padding:76px 32px 80px}
.home-intro-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:44px 72px;align-items:center}
.home-intro-sub{margin:0 0 28px;max-width:620px;font:clamp(22px,2.3vw,30px)/1.3 Montreal,"LH Montreal Fallback",Arial,sans-serif}
.home-intro-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.home-intro-link{color:#fff;font:16px/1.3 Montreal,"LH Montreal Fallback",Arial,sans-serif;text-decoration:underline;text-underline-offset:5px}
.home-intro-proof{list-style:none;margin:0;padding:0;font:13px/1.4 Akkurat,ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase}
.home-intro-proof li{padding:12px 0;border-bottom:1px solid #ffffff4d}
.home-intro-proof li:first-child{padding-top:0}
.home-intro-proof a,.home-intro-awards a{color:#fff;text-decoration:underline;text-underline-offset:4px}
.home-intro-awards{margin-top:26px;font:11px/1.4 Akkurat,ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase}
.home-intro-awards-by{margin:0 0 10px;opacity:.85}
.home-intro-awards ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.home-intro-awards li{padding:7px 11px;border:1px solid #ffffff99}
.home-intro-awards a{text-decoration:none}
.home-intro a:focus-visible{outline:3px solid #fff078;outline-offset:4px}
@media(hover:hover) and (pointer:fine){.home-intro-link:hover,.home-intro-proof a:hover,.home-intro-awards a:hover{text-decoration-line:underline;text-decoration-style:wavy;text-decoration-color:#fff078}}
@media(max-width:860px){.home-intro{padding:56px 22px 60px}.home-intro-inner{grid-template-columns:1fr;gap:34px}.home-intro-sub{font-size:21px}.home-intro-awards{font-size:10px}}