/* Shared styles for every page of philipdiaz.com. Page-specific rules stay in each page's own <style>. */
/* Self-hosted fonts (Fontsource, latin subset, SIL OFL 1.1, see fonts/LICENSE.txt) */
/* Metric-matched fallbacks: local fonts sized like the web fonts, so text doesn't move when they arrive. Computed from the
   woff2 files and Arial / Courier New: size-adjust = average advance over the site's own text, overrides = hhea metrics
   / unitsPerEm / size-adjust */
@font-face{font-family:"Inter Fallback";src:local(Arial),local(Helvetica Neue),local(Helvetica),local(Roboto);font-weight:100 500;font-style:normal;size-adjust:106.5%;ascent-override:90.96%;descent-override:22.65%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";src:local(Arial Bold),local(Helvetica Neue Bold),local(Helvetica Bold),local(Roboto Bold);font-weight:600 900;font-style:normal;size-adjust:101%;ascent-override:95.92%;descent-override:23.88%;line-gap-override:0%}
@font-face{font-family:"Space Grotesk Fallback";src:local(Arial),local(Helvetica Neue),local(Helvetica),local(Roboto);font-weight:100 549;font-style:normal;size-adjust:108.89%;ascent-override:90.37%;descent-override:26.82%;line-gap-override:0%}
@font-face{font-family:"Space Grotesk Fallback";src:local(Arial Bold),local(Helvetica Neue Bold),local(Helvetica Bold),local(Roboto Bold);font-weight:550 649;font-style:normal;size-adjust:101.62%;ascent-override:96.83%;descent-override:28.73%;line-gap-override:0%}
@font-face{font-family:"Space Grotesk Fallback";src:local(Arial Bold),local(Helvetica Neue Bold),local(Helvetica Bold),local(Roboto Bold);font-weight:650 900;font-style:normal;size-adjust:101.62%;ascent-override:96.83%;descent-override:28.73%;line-gap-override:0%}
@font-face{font-family:"JetBrains Mono Fallback";src:local(Courier New),local(Menlo);font-weight:100 550;font-style:normal;size-adjust:99.98%;ascent-override:102.02%;descent-override:30%;line-gap-override:0%}
@font-face{font-family:"JetBrains Mono Fallback";src:local(Courier New Bold),local(Menlo Bold);font-weight:551 900;font-style:normal;size-adjust:99.98%;ascent-override:102.02%;descent-override:30%;line-gap-override:0%}
@font-face{font-family:"Inter";src:url(/fonts/inter-latin-wght-normal.woff2) format("woff2-variations");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(/fonts/space-grotesk-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(/fonts/space-grotesk-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(/fonts/space-grotesk-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/jetbrains-mono-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
/* Palette: Sage, Slate & Sand */
:root{
--bg:#EEF0EC;--bg-alt:#E4E8E2;--surface:#F8F8F5;--border:#D9DDD6;
--text:#2A2F2D;--muted:#5E6662;
--primary:#3F6B66;--primary-hover:#335752;--primary-tint:#E3ECE9;
--accent:#E8C79A;--accent-hover:#EED3AE;--accent-active:#DDB984;--accent-soft:rgba(232,199,154,0.14);
--dark:#26332F;--dark-surface:#2F3E39;--dark-border:#3A4A44;--dark-muted:#B7C2BD;--dark-text:#EEF0EC;
--danger:#AE6147;--danger-tint:#F4E3DC;--success:#4E8F6A;
--container-max:1240px;--container-pad:clamp(16px,4vw,32px);
}
body{margin:0}
a{color:var(--primary)}a:hover{color:var(--primary-hover)}
/* scrollbar-gutter: the scrollbar's space is kept from the first paint, so the page doesn't move sideways when it appears */
html{scroll-behavior:smooth;scrollbar-gutter:stable}
a[href]:hover{opacity:.9}
.m-only{display:none!important}
/* <picture> wrappers use display: contents, so the <img> keeps its place in flex rows; their <source> children must not become (empty) flex items */
picture>source{display:none}
/* Sticky "Hire me" CTA: floating card on desktop, full-width bar on mobile (see media query) */
.cta-bar{display:flex;position:fixed;right:24px;bottom:24px;z-index:50;box-sizing:border-box;font-family:Inter,'Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;width:max-content;max-width:calc(100vw - 48px);align-items:center;gap:16px;background:var(--dark);border:1px solid var(--dark-border);border-radius:16px;padding:10px 10px 10px 12px;box-shadow:0 12px 32px rgba(38,51,47,0.28);transform:translateY(16px);opacity:0;visibility:hidden;color:var(--dark-text);text-decoration:none;cursor:pointer;transition:transform .25s ease,opacity .25s ease,visibility .25s,border-color .15s}
/* Visible state has no transform at all; the hidden offset is whole pixels so the layer is never rasterised at a sub-pixel position (which renders soft) */
.cta-bar.show{transform:none;opacity:1;visibility:visible}
.cta-id,.cta-text{flex:1 1 auto;min-width:0}
.cta-btn{flex:none;white-space:nowrap;margin-left:8px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:12px 18px;border-radius:10px;background:var(--accent);color:var(--text);font-weight:700;font-size:15px;line-height:20px;transition:background-color .15s}
.cta-arrow{flex:none;transition:transform .15s}
.cta-bar:hover{color:var(--dark-text);opacity:1}
@media (hover:hover){.cta-bar:hover{border-color:var(--accent)}.cta-bar:hover .cta-btn{background:var(--accent-hover)}.cta-bar:hover .cta-arrow{transform:translateX(3px)}}
.cta-bar:active .cta-btn{background:var(--accent-active)}
.cta-bar:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
/* One soft glow on the button the first time the CTA appears */
.cta-btn.glow{animation:cta-glow .9s ease-out .25s 1 none}
@keyframes cta-glow{from{box-shadow:0 0 0 0 rgba(232,199,154,0.6)}to{box-shadow:0 0 0 6px rgba(232,199,154,0)}}
.sr-only,.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
/* On dark backgrounds the focus outline switches to the accent */
#results :focus-visible,#reviews :focus-visible,.hl-box :focus-visible,.tl :focus-visible,footer :focus-visible,[data-track="hero_card"]:focus-visible{outline-color:var(--accent)}
section[id],.svc-card[id]{scroll-margin-top:80px}
/* Sticky header: shrinks when scrolled; margin-bottom offsets the lost padding so content doesn't shift */
.site-header{position:sticky;top:0;z-index:1000;transition:box-shadow .2s,margin-bottom .2s}
.site-header>nav{padding-block:14px;align-items:center;transition:padding .2s,min-height .2s}
.site-header.is-scrolled{box-shadow:0 2px 12px rgba(38,51,47,0.08);margin-bottom:8px}
.site-header.is-scrolled>nav{padding-block:10px}
/* Header shine: a light sweep along the bottom border, 1.5s after load and then every 9s, forever. The sweep is the first 24% of the
   9s cycle (~2.2s); the rest of the cycle it waits off-screen on the right (25% wide, so 400% moves it fully across).
   Only transform animates. overflow-x:clip hides it off-screen without clipping the mega menus vertically; without clip support it's off.
   site.js pauses it while a mega menu is open (.shine-paused); html.menu-open pauses it while the mobile menu is open. */
.site-header{overflow-x:clip}
.site-header::after{content:"";position:absolute;left:0;bottom:-1px;width:25%;height:2px;background:linear-gradient(90deg,transparent,var(--accent) 45%,#FFF6E6 50%,var(--accent) 55%,transparent);transform:translateX(-100%);will-change:transform;pointer-events:none;animation:header-shine 9s ease-in-out 1.5s infinite}
@keyframes header-shine{0%{transform:translateX(-100%)}24%{transform:translateX(400%)}100%{transform:translateX(400%)}}
.site-header.shine-paused::after,html.menu-open .site-header::after{animation-play-state:paused}
/* Homepage hero phrase: plays once on load. The sand highlight band draws in (0.5s delay, 0.9s), one shine passes along it (0.8s),
   and a soft glow fades in and out (1.2s). The band's end state is the original look of this phrase (box-shadow: inset 0 -0.26em 0
   var(--accent)): sand, 0.26em tall, flush with the bottom of the span. Both are background layers on the default
   box-decoration-break:slice, so on a wrapped phrase they run across the lines in reading order; clone would change where the
   balanced heading wraps. The text itself never moves or fades (no LCP/CLS effect). */
.hero-accent{background-image:radial-gradient(closest-side,#FFFFFF,#FFF6E6 40%,rgba(255,246,230,.6) 65%,rgba(255,246,230,0)),linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;background-size:30% .26em,100% .26em;background-position:-42.86% 100%,0 100%;
  animation:hero-underline .9s ease-out .5s 1 both,hero-shine .8s ease-in-out 1.4s 1 both,hero-glow 1.2s ease-in-out 1.4s 1 both}
@keyframes hero-underline{from{background-size:30% .26em,0% .26em}to{background-size:30% .26em,100% .26em}}
@keyframes hero-shine{from{background-position:-42.86% 100%,0 100%}to{background-position:142.86% 100%,0 100%}}
@keyframes hero-glow{0%,100%{text-shadow:none}50%{text-shadow:0 0 18px rgba(232,199,154,0.35)}}
@media (prefers-reduced-motion:reduce){.hero-accent{animation:none}}
@supports not (overflow-x:clip){.site-header::after{display:none}}
@media (prefers-reduced-motion:reduce){.site-header::after{display:none}}
/* Testimonial shine: a light sweep down the left border of testimonial cards. site.js adds .has-shine (+ .shine-bright on dark cards or
   accent borders), the border width and corner radii as --shine-*, and .is-inview / --shine-delay while the card is in view.
   The ::before covers only the straight part of the left border (3px, centred on it, never outside the card) and its gradient moves
   (background-position), so nothing needs clipping. Sweep 2.4s = the first 16% of a 15s cycle; ?shine-test: every 3s. */
.has-shine{position:relative;isolation:isolate}
.has-shine::before{content:"";position:absolute;z-index:2;top:var(--shine-rt,0px);bottom:var(--shine-rb,0px);left:max(calc(var(--shine-b,4px) * -1),calc(var(--shine-b,4px) / -2 - 1.5px));width:3px;pointer-events:none;background:linear-gradient(180deg,transparent,var(--accent) 40%,#FFF6E6 50%,var(--accent) 60%,transparent) no-repeat 0 -42.86%/100% 30%;filter:drop-shadow(0 0 6px rgba(232,199,154,0.7))}
.has-shine.shine-bright::before{background-image:linear-gradient(180deg,transparent,rgba(255,246,230,0) 30%,#FFFFFF 50%,rgba(255,246,230,0) 70%,transparent);filter:drop-shadow(0 0 8px rgba(255,246,230,0.6))}
.has-shine.is-inview::before{animation:figure-shine 15s var(--shine-delay,.6s) infinite}
html.shine-test .has-shine.is-inview::before{animation:figure-shine-test 3s var(--shine-delay,.6s) infinite}
@keyframes figure-shine{0%{background-position:0 -42.86%;animation-timing-function:ease-in-out}16%,100%{background-position:0 142.86%}}
@keyframes figure-shine-test{0%{background-position:0 -42.86%;animation-timing-function:ease-in-out}80%,100%{background-position:0 142.86%}}
@media (prefers-reduced-motion:reduce){html:not(.shine-test) .has-shine::before{display:none}}
.nav-links{display:flex;align-items:stretch;gap:0;font-size:15px;font-weight:600}
/* Top-level items: links and mega menu buttons share one look */
.nav-link{display:flex;align-items:center;gap:6px;position:relative;margin:0;padding:0 14px;border:0;background:none;color:var(--muted);text-decoration:none;cursor:pointer;font-family:Inter,'Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:15px;font-weight:600;line-height:1.2;transition:background-color .15s,color .15s,box-shadow .15s}
/* Highlight (hover, focus, open panel, current page or section): tint block with a 3px bottom bar. Only colours and the
   inset bar change, so nothing moves. */
.site-header .nav-links .nav-link:hover,.site-header .nav-links .nav-link:focus-visible,.site-header .nav-links .nav-link[aria-expanded="true"],.site-header .nav-links .nav-link[aria-current]{background:var(--primary-tint);color:var(--primary);box-shadow:inset 0 -3px 0 var(--primary);opacity:1;text-decoration:none}
.site-header .nav-links .nav-link:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.nav-chevron{flex:none;transition:transform .15s}
.nav-link[aria-expanded="true"]>.nav-chevron,.mm-group[aria-expanded="true"]>.nav-chevron{transform:rotate(180deg)}
/* 1024px and up: one row; the items fill the header height (64px, 56px when scrolled) */
@media (min-width:1024px){
.site-header>nav,.site-header.is-scrolled>nav{padding-block:0;align-items:stretch;min-height:64px}
.site-header.is-scrolled>nav{min-height:56px}
.site-header .brand{align-self:center}
.nav-links>a:not(.nav-link){align-self:center;margin-left:12px}
}
/* Mega menu panels: full width under the sticky header (its containing block), content inside the container */
.mega{position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:0 16px 32px rgba(38,51,47,0.12);opacity:0;transform:translateY(-6px);transition:opacity .15s,transform .15s;cursor:auto}
.mega.open{opacity:1;transform:none}
.mega[hidden]{display:none}
.mega-inner{padding-block:24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 24px;align-items:start}
.mega-links{grid-column:span 2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 24px}
.mega-links.wide{grid-column:1/-1;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.mega-link{display:flex;align-items:flex-start;gap:12px;padding:12px;border-radius:12px;text-decoration:none;color:var(--text)}
.mega-link:hover,.mega-link:focus-visible{background:var(--primary-tint);color:var(--text);opacity:1}
.mega-link:focus-visible{outline:2px solid var(--primary);outline-offset:0}
.mega-icon{flex:none;width:36px;height:36px;border-radius:10px;background:var(--primary-tint);display:flex;align-items:center;justify-content:center}
.mega-link:hover .mega-icon,.mega-link:focus-visible .mega-icon{background:var(--surface)}
.mega-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.mega-title{font-family:Inter,'Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:15px;font-weight:600;line-height:1.35;color:var(--text)}
.mega-desc{font-size:13px;font-weight:400;line-height:1.4;color:var(--muted)}
/* Work panel: links on the left (1/3), featured project cards on the right (2/3) */
.mega-inner-work{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:8px 32px}
.mega-col{display:flex;flex-direction:column;gap:2px;min-width:0}
.mega-link-main .mega-title{font-size:17px}
.mega-count{display:inline-flex;align-items:center;margin-left:8px;padding:2px 8px;border-radius:999px;background:var(--primary-tint);color:var(--primary);font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:11px;font-weight:600;line-height:1.4;vertical-align:2px;white-space:nowrap}
.mega-link:hover .mega-count,.mega-link:focus-visible .mega-count{background:var(--surface)}
.mega-arrow{display:inline-block;transition:transform .15s}
.mega-link-main:hover .mega-arrow,.mega-link-main:focus-visible .mega-arrow,.mega-card:hover .mega-arrow,.mega-card:focus-visible .mega-arrow{transform:translateX(2px)}
.mega-feature{display:flex;flex-direction:column;gap:12px;min-width:0;padding-top:12px}
.mega-feature-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px}
.mega-feature-label{font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.mega-see-all{font-size:14px;font-weight:600;color:var(--primary);text-decoration:none}
.mega-see-all:hover,.mega-see-all:focus-visible{text-decoration:underline;text-underline-offset:3px;opacity:1}
.mega-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:stretch}
.mega-card{display:flex;flex-direction:column;gap:8px;min-width:0;box-sizing:border-box;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--text);text-decoration:none;transition:border-color .15s,background-color .15s}
.mega-card:hover,.mega-card:focus-visible{border-color:var(--primary);background:var(--primary-tint);color:var(--text);opacity:1}
.mega-card:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.mega-card-label{font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:11px;font-weight:600;letter-spacing:.03em;line-height:1.35;text-transform:uppercase;color:var(--muted);overflow-wrap:anywhere}
.mega-card-hl{font-family:'Space Grotesk','Space Grotesk Fallback',Inter,sans-serif;font-size:20px;font-weight:700;line-height:1.2;letter-spacing:-.01em;color:var(--primary)}
.mega-card-title{font-family:Inter,'Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:14px;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mega-card .svc-pills{gap:4px}
.mega-card .svc-pill{font-size:10.5px;padding:3px 6px}
.mega-card-more{margin-top:auto;padding-top:2px;font-size:13px;font-weight:600;color:var(--primary)}
@media (min-width:1024px) and (max-width:1199px){.mega-inner-work{gap:8px 20px}.mega-card{padding:14px}.mega-card-hl{font-size:18px}}
/* Mobile accordion: compact featured cards under the Work links */
.mm-count{display:inline-flex;align-items:center;margin-left:8px;padding:2px 8px;border-radius:999px;background:var(--primary-tint);color:var(--primary);font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:11px;font-weight:600;line-height:1.4;vertical-align:2px}
.mm-feature-label{margin:12px 0 4px 12px;font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.mm-card{display:flex;flex-direction:column;gap:2px;margin:4px 0 4px 12px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text);text-decoration:none}
.mm-card:hover,.mm-card:focus-visible{border-color:var(--primary);background:var(--primary-tint);color:var(--text);opacity:1}
.mm-card-hl{font-family:'Space Grotesk','Space Grotesk Fallback',Inter,sans-serif;font-size:16px;font-weight:700;line-height:1.25;color:var(--primary)}
.mm-card-title{font-size:14px;font-weight:600;line-height:1.35}
@media (prefers-reduced-motion:reduce){.mega-arrow,.mega-card,.mm-card{transition:none}}
.mega-promo{background:var(--dark);color:var(--dark-text);border-radius:16px;padding:20px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.mega-promo :focus-visible{outline-color:var(--accent)}
/* About mega menu: the client reviews highlight card, one link to /reviews/ */
.mega-highlight{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;padding:20px;border:1px solid transparent;border-radius:16px;background:var(--primary-tint);color:var(--text);text-decoration:none;transition:border-color .15s}
.mega-highlight:hover,.mega-highlight:focus-visible{border-color:var(--primary);color:var(--text);opacity:1}
.mega-highlight:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.mega-highlight-big{font-family:'Space Grotesk','Space Grotesk Fallback',Inter,sans-serif;font-size:26px;font-weight:700;line-height:1.15;letter-spacing:-.02em}
.mega-star{color:#A87A3E}
.mega-highlight-sub{font-size:14px;color:var(--muted)}
.mega-highlight-quote{margin-top:6px;font-size:14px;font-style:italic;line-height:1.5}
.mega-highlight-more{margin-top:6px;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--primary)}
.mega-highlight:hover .mega-arrow,.mega-highlight:focus-visible .mega-arrow{transform:translateX(2px)}
/* Services mega menu: the guide highlight card above the audit promo, in the third column */
.mega-side{display:flex;flex-direction:column;gap:12px;min-width:0}
/* Guides menu: the audit card is a highlight card with its own button (not one link) */
.mega-highlight-cta:hover{border-color:transparent}
.mega-highlight-sub{line-height:1.5}
.mega-cta-btn{margin-top:8px;display:inline-flex;align-items:center;gap:8px;min-height:44px;box-sizing:border-box;padding:12px 16px;border-radius:10px;background:var(--accent);color:var(--text);font-size:14px;font-weight:600;text-decoration:none;transition:background-color .15s}
.mega-cta-btn:hover,.mega-cta-btn:focus-visible{background:var(--accent-hover);color:var(--text);opacity:1}
.mega-cta-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.mm-rating{font-weight:600}
.cta-rating{display:flex;align-items:center;gap:6px;white-space:nowrap}
@media (max-width:768px){.r-long{display:none}}
/* Rating rows in testimonial and review cards: stars, score and label on one centre line */
.rating-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.rating-stars{display:inline-flex;align-items:center;gap:2px}
.rating-stars svg{display:block;width:14px;height:14px}
.rating-score{display:inline-flex;align-items:center;line-height:1}
.rating-label{display:inline-flex;align-items:center;line-height:1.35;white-space:normal}
/* Small icon + text pills (Top Rated, hero badge, location, trust badges): icon and text on one centre line */
.icon-pill{display:inline-flex;align-items:center;gap:6px;line-height:1}
.icon-pill>svg{display:block;width:14px;height:14px;flex:none}
.icon-pill-text{display:inline-block;line-height:1;padding-top:1px}
/* Shared content width and side padding: header, every section, footer */
.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-pad);box-sizing:border-box}
/* Breadcrumb */
.crumbs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:14px;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.crumbs a:hover{color:var(--primary)}
/* Review cards: 1 column on mobile, 2 on tablet, 3 on desktop; cards keep their own height */
.review-grid{display:grid;grid-template-columns:1fr;gap:20px;align-items:start}
@media (min-width:769px){.review-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1025px){.review-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.review{min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:12px}
.review[hidden]{display:none}
/* Partial star: the filled star is clipped to the rating fraction over an empty one */
.star-part{position:relative;display:block;width:14px;height:14px}
.star-part>span{position:absolute;top:0;left:0;height:14px;overflow:hidden}
.review-date{font-size:13px;line-height:1;color:var(--muted)}
.excerpt-pill{display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;background:var(--bg-alt);border:1px solid var(--border);color:var(--muted);font-size:12px;font-weight:600;line-height:1.2}
.review-title{margin:0;font-family:Inter,'Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:16px;line-height:1.4;font-weight:600;color:var(--text)}
.review-text{margin:0;font-size:15px;line-height:1.6;color:var(--text);overflow-wrap:anywhere}
.review-text>p{margin:0}
.review-full{align-self:flex-start;font-size:14px;font-weight:600;text-underline-offset:3px}
/* Endorsements: the first 5 show, the rest open from "+N" (native <details>, no JS) */
.endo-row{display:flex;flex-wrap:wrap;gap:6px}
.endo,.endo-more>summary{display:inline-flex;align-items:center;padding:4px 8px;border-radius:6px;background:var(--primary-tint);color:var(--primary);font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:11px;font-weight:600;line-height:1.3}
.endo-more{display:contents}
.endo-more>summary{cursor:pointer;list-style:none;border:1px solid transparent}
.endo-more>summary::-webkit-details-marker{display:none}
.endo-more>summary:hover{border-color:var(--primary)}
.endo-more[open]>summary{display:none}
.review-foot{font-size:12px;color:var(--muted)}
/* Mega menu: "All services" under the service links; same link in the mobile accordion */
.mega-all{grid-column:1/-1;display:inline-flex;align-items:center;gap:6px;justify-self:start;margin:4px 0 0 12px;padding:8px 0;font-size:14px;font-weight:600;color:var(--primary);text-decoration:none}
.mega-all:hover,.mega-all:focus-visible{text-decoration:underline;text-underline-offset:3px;opacity:1}
.mm-all .mega-title{color:var(--primary)}
/* "Learn more" text links on cards */
.more-link{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:600;text-underline-offset:3px}
/* Footer: services column above the copyright row */
.foot-top{padding-top:40px;padding-bottom:8px;display:flex;flex-direction:column;gap:12px}
.foot-h{margin:0;font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--dark-muted)}
.foot-svc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:0 24px}
.foot-svc a{display:inline-flex;align-items:center;min-height:40px;color:var(--dark-text);text-decoration:none;font-size:14px}
.foot-svc a:hover{text-decoration:underline;text-underline-offset:3px}
/* Service pages, services hub and FAQ page */
.svc-hero{padding-block:clamp(24px,3vw,32px) clamp(48px,6vw,72px);display:flex;flex-direction:column;gap:clamp(24px,3.5vw,36px)}
.svc-hero-text{display:flex;flex-direction:column;gap:16px;max-width:760px}
.svc-eyebrow{font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--primary)}
.svc-h1{margin:0;font-family:'Space Grotesk','Space Grotesk Fallback',Inter,sans-serif;font-size:clamp(34px,5.2vw,54px);line-height:1.04;font-weight:700;letter-spacing:-.035em}
.svc-intro{margin:0;color:var(--muted);font-size:clamp(17px,1.6vw,19px);max-width:680px}
.svc-trust{margin:0;font-size:14px;color:var(--muted)}
.svc-btn{display:inline-flex;align-items:center;gap:10px;background:var(--primary);color:#FFFFFF;text-decoration:none;font-weight:600;font-size:15px;padding:16px 26px;border-radius:10px;min-height:44px;box-sizing:border-box}
.svc-btn:hover{color:#FFFFFF}
.svc-btn-accent,.svc-btn-accent:hover{background:var(--accent);color:var(--text)}
.svc-btn-outline{display:inline-flex;align-items:center;background:var(--surface);color:var(--text);text-decoration:none;font-weight:600;font-size:15px;padding:16px 26px;border-radius:10px;border:1.5px solid var(--text);min-height:44px;box-sizing:border-box}
.svc-btn-outline:hover{color:var(--text)}
.svc-back{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:15px;text-underline-offset:3px}
.svc-inshort{max-width:860px;box-sizing:border-box;background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--primary);border-radius:16px;padding:clamp(20px,3vw,28px)}
.svc-inshort-h{margin:0 0 10px;font-family:'Space Grotesk','Space Grotesk Fallback',Inter,sans-serif;font-size:20px;font-weight:700;letter-spacing:-.01em}
.svc-inshort ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:16px;line-height:1.55}
.svc-section{padding-block:clamp(56px,7vw,88px);display:flex;flex-direction:column;gap:28px}
.svc-head{display:flex;flex-direction:column;gap:12px;max-width:680px}
.svc-h2{margin:0;font-family:'Space Grotesk','Space Grotesk Fallback',Inter,sans-serif;font-size:clamp(28px,3.4vw,42px);line-height:1.1;font-weight:700;letter-spacing:-.03em}
.svc-h3{margin:0;font-family:'Space Grotesk','Space Grotesk Fallback',Inter,sans-serif;font-size:20px;line-height:1.3;font-weight:700;letter-spacing:-.015em;color:var(--text)}
.svc-p{margin:0;color:var(--muted);font-size:15px;line-height:1.6}
.svc-who{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:12px 32px;font-size:17px}
.svc-who>li{display:flex;gap:12px}
/* Cards: 1 column on mobile, 2 on tablet, 3 on desktop */
.svc-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:769px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1025px){.svc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.svc-card,.svc-related{min-width:0;box-sizing:border-box;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:10px}
.svc-card>svg{stroke:var(--primary)}
.svc-related{text-decoration:none;color:var(--text);transition:border-color .15s}
.svc-related:hover,.svc-related:focus-visible{border-color:var(--primary);color:var(--text);opacity:1}
.svc-more{margin-top:auto;padding-top:4px;font-size:15px;font-weight:600;color:var(--primary)}
.svc-rate{align-self:flex-start;background:var(--primary-tint);color:var(--primary);font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:12px;font-weight:600;padding:5px 10px;border-radius:6px}
/* Numbered steps: 1 column on mobile, then as many as fit */
.svc-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:16px}
.svc-step{min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:10px}
.svc-step-num{font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--primary)}
.svc-step-title{margin:0;font-size:18px;line-height:1.35;font-weight:600;letter-spacing:-.01em}
/* Proof */
.svc-stats{background:var(--dark);color:var(--dark-text);border-radius:20px;padding:clamp(24px,4vw,40px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:24px 40px}
.svc-stat{display:flex;flex-direction:column;gap:8px;min-width:0}
.svc-stat-num{font-family:'Space Grotesk','Space Grotesk Fallback',Inter,sans-serif;font-size:clamp(34px,3.6vw,46px);font-weight:700;letter-spacing:-.03em;line-height:1.05;color:var(--accent);font-variant-numeric:tabular-nums}
.svc-stat-label{font-size:15px;color:var(--dark-muted)}
.svc-cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px;align-items:start}
.svc-case{min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:10px}
.svc-case-label{font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.svc-pills{display:flex;flex-wrap:wrap;gap:6px}
.svc-pill{background:var(--primary-tint);color:var(--primary);font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:11px;font-weight:600;padding:4px 8px;border-radius:6px}
.svc-ext{align-self:flex-start;font-size:14px;font-weight:600;text-underline-offset:3px}
.svc-quote{margin:0;min-width:0;background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--primary);border-radius:20px;padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;gap:16px}
.svc-more-link{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;font-size:16px;font-weight:600;text-underline-offset:3px}
.svc-pricing{max-width:860px;display:flex;flex-direction:column;gap:16px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:clamp(20px,3vw,28px)}
.svc-audit{background:var(--dark);color:var(--dark-text);border-radius:20px;padding:clamp(24px,4vw,40px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px}
.svc-audit :focus-visible{outline-color:var(--accent)}
/* Guides: /guides/ hub and guide pages (built by scripts/build-guides.py). Text column 720px, cards up to 860px */
.guide-head{display:flex;flex-direction:column;gap:16px;max-width:720px}
.guide-byline{margin:0;font-size:14px;color:var(--muted)}
.guide-byline a{color:var(--text);font-weight:600;text-underline-offset:3px}
.guide-answer{max-width:860px;box-sizing:border-box;margin:0;background:var(--primary-tint);border-radius:16px;padding:clamp(20px,3vw,28px);font-size:clamp(17px,1.4vw,18px);line-height:1.65;color:var(--text)}
.guide{padding-bottom:clamp(16px,3vw,32px);font-size:clamp(17px,1.4vw,18px);line-height:1.65;color:var(--text)}
.guide p{margin:0}
.guide-intro,.guide-sec{max-width:860px;display:flex;flex-direction:column;gap:20px}
.guide-intro>p,.guide-sec>p,.guide-sec>ul,.guide-sec>h2,.guide-sec>h3{max-width:720px}
.guide-sec{margin-top:clamp(40px,5vw,56px);padding-top:clamp(40px,5vw,56px);border-top:1px solid var(--border)}
/* Jump links land on the H2 ids: keep the heading clear of the sticky header */
.guide-h2{scroll-margin-top:96px;margin:0;font-family:'Space Grotesk','Space Grotesk Fallback',Inter,sans-serif;font-size:clamp(26px,3vw,34px);line-height:1.15;font-weight:700;letter-spacing:-.025em}
.guide-h3{margin:12px 0 0;font-family:'Space Grotesk','Space Grotesk Fallback',Inter,sans-serif;font-size:21px;line-height:1.3;font-weight:700;letter-spacing:-.015em}
.guide-list{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
/* Code-like words in the guide text (theme.js, <script>) */
.guide code{font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:.86em;font-weight:500;background:var(--bg-alt);border:1px solid var(--border);border-radius:6px;padding:.05em .35em;overflow-wrap:anywhere}
/* "Signs this is happening" checklists: a check in a tinted circle, centred on the first line */
.guide-check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.guide-check>li{position:relative;padding-left:34px}
.guide-check>li::before{content:'';position:absolute;left:0;top:calc(.825em - 11px);width:22px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23E3ECE9'/%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='%233F6B66' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/22px 22px}
/* Contents: a card on desktop (summary is only a label there), a collapsed <details> on mobile */
.guide-toc{max-width:720px;box-sizing:border-box;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px 24px}
.guide-toc summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);pointer-events:none}
.guide-toc summary::-webkit-details-marker{display:none}
.guide-toc summary svg{display:none;flex:none;transition:transform .15s}
.guide-toc ol{margin:12px 0 0;padding-left:24px;columns:2;column-gap:32px;font-size:15px;line-height:1.45}
.guide-toc li{break-inside:avoid;padding:4px 0}
.guide-toc li.toc-plain{list-style:none}
.guide-toc li::marker{color:var(--muted);font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:13px}
.guide-toc a{text-underline-offset:3px}
@media (min-width:769px){.guide-toc-count{display:none}}
@media (max-width:768px){
.guide-toc{padding:0 16px}
.guide-toc summary{min-height:52px;cursor:pointer;pointer-events:auto;color:var(--text);font-size:13px}
.guide-toc summary svg{display:block}
.guide-toc[open] summary svg{transform:rotate(180deg)}
.guide-toc ol{columns:1;margin:0;padding:0 0 12px 24px}
.guide-toc li{padding:7px 0}
}
/* "From my work" cards: project links and a client quote in the testimonial style */
.guide-work{max-width:860px;box-sizing:border-box;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:clamp(20px,3vw,28px);display:flex;flex-direction:column;gap:14px;font-size:16px;line-height:1.6}
.guide-work-links{list-style:none;margin:0;padding:0}
.guide-work-links>li+li{border-top:1px solid var(--border)}
.guide-work-links .work-link__note{margin:-4px 0 10px;font-size:15px;line-height:1.5;color:var(--muted)}
/* Link with arrow: only the title is underlined; the arrow sits on the title's first line and nudges right on hover */
.work-link{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:10px 0;color:var(--primary);font-weight:600;text-decoration:none}
.work-link__text{min-width:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-skip-ink:auto}
.work-link__arrow{flex:0 0 auto;line-height:inherit;transition:transform .15s}
.work-link:hover,.work-link:focus-visible{color:var(--primary-hover);opacity:1}
.work-link:hover .work-link__arrow,.work-link:focus-visible .work-link__arrow{transform:translateX(3px)}
.work-link:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.work-link__arrow{transition:none}}
.guide-quote{margin:0;background:var(--bg);border-left:4px solid var(--primary);border-radius:12px;padding:16px 20px;display:flex;flex-direction:column;gap:8px}
.guide-quote blockquote{margin:0;font-size:clamp(16px,1.4vw,17px);line-height:1.65;color:var(--text)}
.guide-quote figcaption{font-size:14px;color:var(--muted)}
/* Guide share bar (under the byline and in the closing CTA) and the "#" section links; copying is in site.js */
.share{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.share-label{font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.share-btns{display:flex;flex-wrap:wrap;gap:6px}
.share-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;box-sizing:border-box;margin:0;padding:6px 12px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font:600 13px/1.2 Inter,'Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;text-decoration:none;cursor:pointer;transition:border-color .15s,color .15s}
.share-btn:hover,.share-btn:focus-visible{border-color:var(--primary);color:var(--primary);opacity:1}
.share-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.share-btn svg{flex:none}
.share-native{display:none}
.guide-share-end{padding-top:28px}
@media (max-width:768px){.share-btn{min-width:44px;min-height:44px;padding:0 12px}.share-net .share-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.can-share .share-native{display:inline-flex}.can-share .share-net{display:none}}
.h2-link{margin-left:.15em;font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:.65em;font-weight:600;color:var(--muted);text-decoration:none;opacity:0;transition:opacity .15s}
h2:hover>.h2-link,.h2-link:focus-visible{opacity:1}
.h2-link:hover{color:var(--primary);opacity:1}
@media (hover:none),(max-width:768px){.h2-link{opacity:.4}}
.share-toast{position:fixed;left:50%;bottom:96px;z-index:1003;transform:translate(-50%,8px);max-width:calc(100vw - 32px);box-sizing:border-box;padding:10px 16px;border-radius:10px;background:var(--dark);color:var(--dark-text);font-size:14px;font-weight:600;overflow-wrap:anywhere;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.share-toast.is-on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.share-btn,.h2-link,.share-toast{transition:none}}
/* Guide "Client reviews": testimonial cards stacked in the text column */
.guide-reviews-list{max-width:720px;display:flex;flex-direction:column;gap:16px}
.guide-review{gap:10px;background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--primary)}
.guide-review-rating{display:flex;align-items:center;gap:8px}
.guide-review-rating .rating-score{font-size:14px;font-weight:700;color:var(--text)}
.guide-review-links{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:14px;font-weight:600}
.guide-review-links a,.guide-reviews-more a{text-underline-offset:3px}
.guide-reviews-more{font-size:15px;font-weight:600}
.guide-reviews-more span{color:var(--accent-active)}
/* Final call to action (inside the "Let's get started" card) and the Related row */
.guide-cta{flex:1 1 360px;align-self:center;min-width:0;box-sizing:border-box;background:var(--bg);border-radius:16px;padding:clamp(20px,3vw,28px);display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.guide-cta-h{margin:0;font-family:'Space Grotesk','Space Grotesk Fallback',Inter,sans-serif;font-size:22px;line-height:1.25;font-weight:700;letter-spacing:-.015em}
.guide-cta .svc-btn{text-align:center}
.guide-related{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;padding-top:28px;font-size:15px}
.guide-pill{display:inline-flex;align-items:center;min-height:40px;box-sizing:border-box;padding:8px 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font-size:14px;font-weight:600;text-decoration:none;transition:border-color .15s}
.guide-pill:hover,.guide-pill:focus-visible{border-color:var(--primary);color:var(--primary);opacity:1}
/* "Read more:" line in a guide section: the label, then the linked guide as a pill */
.guide-more{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:15px;font-weight:600;color:var(--muted)}
.guide-more .guide-pill{height:auto;line-height:1.35;text-align:left}
/* The guide's sticky "Get a store audit" bar is mobile only (on desktop the floating card would cover the 860px cards).
   Its button is longer: on small phones the avatar makes room for the name and rating */
@media (min-width:769px){.cta-bar-guide{display:none}}
@media (max-width:400px){.cta-bar-guide .cta-id img{display:none}}
@media (max-width:768px){.guide-cta{padding:20px 16px}.guide-cta .svc-btn{width:100%;justify-content:center;padding-inline:16px}}
/* Guide layout from 1100px: main column (max 720px) + 300px sticky sidebar, which replaces the inline Contents.
   The sidebar sits in the grid, so its sticky inner box stops at the end of the guide, before the footer */
.guide-main{min-width:0}
.guide-side{display:none}
@media (min-width:1100px){
.guide-layout{display:grid;grid-template-columns:minmax(0,720px) 300px;column-gap:64px;justify-content:space-between}
.guide-side{display:block;padding-block:32px clamp(56px,7vw,88px)}
.guide-toc{display:none}
}
.guide-side-inner{position:sticky;top:80px;max-height:calc(100vh - 104px);overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:16px}
.guide-side-toc{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px 20px 14px}
.guide-side-label{margin:0 0 10px;font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.guide-side-toc ol{list-style:none;margin:0;padding:0}
.guide-side-toc a{display:block;padding:5px 0 5px 12px;border-left:2px solid var(--border);color:var(--muted);font-size:14px;line-height:1.4;text-decoration:none;transition:color .15s,border-color .15s}
.guide-side-toc a:hover{color:var(--text);opacity:1}
.guide-side-toc a[aria-current]{color:var(--primary);border-left-color:var(--primary)}
.guide-side-toc a:focus-visible{outline-offset:0}
.guide-side-cta{background:var(--dark);color:var(--dark-text);border-radius:16px;padding:24px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.guide-side-cta :focus-visible{outline-color:var(--accent)}
.guide-side-h{margin:0;font-family:'Space Grotesk','Space Grotesk Fallback',Inter,sans-serif;font-size:22px;line-height:1.2;font-weight:700;letter-spacing:-.015em;color:var(--dark-text)}
.guide-side-cta p{margin:0;font-size:15px;line-height:1.5;color:var(--dark-muted)}
.guide-side-cta .svc-btn{width:100%;justify-content:center;padding:14px 18px;margin-top:4px}
.guide-side-cta .guide-side-meta{font-size:13px}
.guide-side-meta a{color:var(--dark-muted);text-underline-offset:3px}
.guide-side-meta a:hover{color:var(--dark-text)}
.guide-side-meta span{color:var(--accent)}
@media (prefers-reduced-motion:reduce){.guide-side-toc a{transition:none}}
/* Hub: topic groups */
.guide-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:32px 24px;align-items:start}
.guide-group{min-width:0;display:flex;flex-direction:column;gap:14px}
.guide-card{padding:22px;border-radius:16px;gap:10px}
.guide-card .work-name{font-size:19px}
/* Work: project archive cards and case study pages */
.work-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:769px){.work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.work-card{min-width:0;box-sizing:border-box;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:12px;text-decoration:none;color:var(--text);transition:border-color .15s}
.work-card:hover,.work-card:focus-visible{border-color:var(--primary);color:var(--text);opacity:1}
.work-card[hidden]{display:none}
.work-logo{display:block;height:32px;width:auto;max-width:140px;object-fit:contain;object-position:left center}
.monogram{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:var(--dark);color:var(--accent);font-family:'Space Grotesk','Space Grotesk Fallback',Inter,sans-serif;font-size:18px;font-weight:700;letter-spacing:-.01em;flex:none}
.work-name{margin:0;font-family:'Space Grotesk','Space Grotesk Fallback',Inter,sans-serif;font-size:24px;line-height:1.2;font-weight:700;letter-spacing:-.02em}
.work-label{font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.work-date{font-size:13px;color:var(--muted)}
.work-more{margin-top:auto;padding-top:4px;font-size:15px;font-weight:600;color:var(--primary)}
.case-meta{margin:0;font-size:14px;color:var(--muted)}
.case-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.case-prose{max-width:760px;display:flex;flex-direction:column;gap:14px;font-size:17px;line-height:1.65}
.case-prose p{margin:0}
.case-list{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px;font-size:17px;line-height:1.6;max-width:760px}
.case-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px}
.case-quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:20px;align-items:start}
.case-nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
.case-nav a{display:flex;flex-direction:column;gap:2px;min-width:0;max-width:100%;box-sizing:border-box;padding:16px 20px;border:1px solid var(--border);border-radius:14px;background:var(--surface);text-decoration:none;color:var(--text)}
.case-nav a:hover,.case-nav a:focus-visible{border-color:var(--primary);color:var(--text);opacity:1}
.case-nav-label{font-size:13px;color:var(--muted)}
.case-nav-title{font-weight:600;color:var(--primary)}
/* Client badges ("Named with permission" / "Private client"): homepage Selected clients and /work/ cards */
.client-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.client-badge{position:relative;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-family:Inter,'Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:12px;font-weight:600;white-space:nowrap}
/* Text is a darker green than --success so 12px text passes AA (4.8:1) on the tint; the icon keeps --success */
.badge-named{color:#3A7253;background:rgba(78,143,106,0.10);border:1px solid rgba(78,143,106,0.25)}
.badge-private{color:var(--muted);background:var(--bg-alt);border:1px solid var(--border)}
/* Project cards on /work/ and service pages */
.work-card .client-head{min-height:28px}
.work-foot{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font-size:13px;color:var(--muted)}
.work-rating{color:var(--text);font-weight:600}
.work-rating>span{color:#A87A3E}
.proj-mini{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px}
.proj-mini .work-card{padding:22px;border-radius:16px}
.proj-mini .work-name{font-size:19px}
/* Review cards opened from a project page (/reviews/#id): clear of the sticky header and briefly highlighted */
.review{scroll-margin-top:96px}
.review:target{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-tint)}
.review-related{align-self:flex-start;font-size:14px;font-weight:600;text-underline-offset:3px}
/* Mobile menu */
.burger{display:none}
.burger .i-close,.burger[aria-expanded="true"] .i-open{display:none}
.burger[aria-expanded="true"] .i-close{display:block}
.menu-backdrop{position:fixed;left:0;right:0;bottom:0;top:var(--hdr-h,64px);z-index:998;background:rgba(38,51,47,0.4);opacity:0;transition:opacity .2s}
.mobile-menu{position:fixed;left:0;right:0;top:var(--hdr-h,64px);z-index:999;max-height:calc(100vh - var(--hdr-h,64px));overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box;background:var(--surface);padding:16px;border-bottom:1px solid var(--border);box-shadow:0 12px 24px rgba(38,51,47,0.12);opacity:0;transform:translateY(-8px);transition:opacity .2s,transform .2s}
.menu-backdrop.open,.mobile-menu.open{opacity:1;transform:none}
.menu-backdrop[hidden],.mobile-menu[hidden]{display:none}
.mm-link{display:flex;align-items:center;min-height:48px;font-size:18px;font-weight:600;color:var(--text);text-decoration:none;border-bottom:1px solid var(--border);position:relative}
.mobile-menu .mm-link:hover,.mobile-menu .mm-link:focus-visible,.mobile-menu .mm-link[aria-current]{color:var(--primary);opacity:1;text-decoration:none}
.mobile-menu .mm-link:hover::before,.mobile-menu .mm-link:focus-visible::before,.mobile-menu .mm-link[aria-current]::before{content:'';position:absolute;inset:0 -16px;z-index:-1;background:var(--primary-tint);box-shadow:inset 3px 0 0 var(--primary)}
/* Mobile menu groups: accordion buttons that look like the plain links */
.mm-group{width:100%;justify-content:space-between;margin:0;padding:0;background:none;border-width:0 0 1px;border-style:solid;border-color:var(--border);font-family:inherit;text-align:left;cursor:pointer}
.mm-panel{display:flex;flex-direction:column;padding:4px 0 8px;border-bottom:1px solid var(--border)}
.mm-panel[hidden]{display:none}
.mm-sub{display:flex;flex-direction:column;gap:2px;padding:10px 0 10px 12px;text-decoration:none;border-radius:8px}
.mm-sub:hover,.mm-sub:focus-visible{background:var(--primary-tint);opacity:1}
.mm-cta{display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:16px;background:var(--primary);color:#FFFFFF!important;font-weight:600;font-size:16px;text-decoration:none;border-radius:10px}
.mm-social{display:flex;gap:8px;margin-top:12px}
.mm-social>a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--border);border-radius:10px}
/* Lock only <html>: overflow on <body> too would make body the sticky header's scroll container and push the header off screen */
html.menu-open{overflow:hidden;scrollbar-gutter:stable}
html.menu-open .cta-bar{visibility:hidden!important;opacity:0!important;transform:translateY(16px)!important}
/* Back to top */
.btt{position:fixed;right:24px;bottom:24px;z-index:60;width:48px;height:48px;padding:0;border-radius:50%;background:var(--dark);border:1px solid var(--dark-border);box-shadow:0 6px 20px rgba(38,51,47,0.25);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s,bottom .2s}
.btt.show{opacity:1;visibility:visible;transform:none}
.btt.lift{bottom:calc(var(--bar-h,64px) + 24px + 12px)}
/* Consent bar: full-width bar at the bottom over a dimmed page (the backdrop catches clicks; scrolling stays free).
   Sits above the sticky header; the CTA bar and back-to-top hide while it's open. */
.consent-backdrop{position:fixed;inset:0;z-index:1001;background:rgba(38,51,47,0.45);animation:consent-fade .15s ease-out}
.consent{position:fixed;left:0;right:0;bottom:0;z-index:1002;max-height:100vh;overflow-y:auto;box-sizing:border-box;background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -8px 32px rgba(38,51,47,0.12);font-family:Inter,'Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;animation:consent-fade .15s ease-out}
.consent:focus{outline:none}
/* Fades in (opacity only) whenever it appears; no transform, so it paints in place on the first frame */
@keyframes consent-fade{from{opacity:0}to{opacity:1}}
.consent[hidden],.consent-backdrop[hidden]{display:none}
.consent-inner{max-width:var(--container-max);margin:0 auto;box-sizing:border-box;padding:24px var(--container-pad) calc(24px + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px}
.consent-text{flex:1 1 360px;max-width:620px;min-width:0;display:flex;flex-direction:column;gap:8px}
.consent-title{margin:0;font-family:'Space Grotesk','Space Grotesk Fallback',Inter,sans-serif;font-size:20px;font-weight:700;line-height:1.3;color:var(--text)}
.consent-text>p{margin:0;font-size:14px;line-height:1.6;color:var(--muted)}
.consent-text a{color:var(--primary);text-decoration:underline}
/* Shorter text on small phones */
.ct-short{display:none}
@media (max-width:479px){.ct-long{display:none}.ct-short{display:inline}}
.consent-actions{flex:none;display:flex;gap:12px}
.consent-actions>button,.cs-actions>button{min-height:44px;padding:0 20px;box-sizing:border-box;border-radius:10px;font-family:inherit;font-size:15px;font-weight:600;white-space:nowrap;cursor:pointer}
/* Accept All and Reject All share one style and one minimum width */
.c-primary{min-width:132px;background:var(--primary);color:#FFFFFF;border:1.5px solid var(--primary)}
.c-outline{background:var(--surface);color:var(--text);border:1.5px solid var(--text)}
.c-outline-indigo{background:var(--surface);color:var(--primary);border:1.5px solid var(--primary)}
@media (max-width:767px){
.consent-inner{flex-direction:column;align-items:stretch}
.consent-text{flex:none}
.consent-actions{flex-direction:column}
.consent-actions>button{width:100%}
}
html.consent-open .cta-bar{visibility:hidden!important;opacity:0!important;transform:translateY(16px)!important}
html.consent-open .btt{visibility:hidden!important;opacity:0!important}
/* Privacy modal (<dialog>, opened with showModal) */
#privacy,#cookie-settings{box-sizing:border-box;width:calc(100% - 32px);max-width:560px;max-height:calc(100% - 32px);padding:0;border:0;border-radius:20px;background:var(--surface);color:var(--text);box-shadow:0 24px 64px rgba(38,51,47,0.25);font-family:Inter,'Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;overflow:auto}
#privacy::backdrop{background:rgba(38,51,47,0.5)}
/* Cookie settings opens over the already dimmed page, so its own backdrop is lighter */
#cookie-settings{max-width:520px}
#cookie-settings::backdrop{background:rgba(38,51,47,0.25)}
/* Without JS (no .js class on <html>), a #privacy link shows the content in place above the footer */
html:not(.js) #privacy:target{display:block;position:static;margin:32px auto;box-shadow:none;border:1px solid var(--border)}
html:not(.js) #privacy .privacy-close,html:not(.js) #privacy .privacy-reset{display:none}
/* Controls that only work with JS (the /work/ filters) are hidden when JS is off, so the page shows plain content */
html:not(.js) .js-only{display:none}
.cs-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--border)}
.cs-row:first-of-type{border-top:1px solid var(--border)}
.cs-name{font-size:16px;font-weight:600;color:var(--text)}
.cs-desc{margin:2px 0 0;font-size:14px;line-height:1.5;color:var(--muted)}
.cs-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
/* Toggle switch: 44px tall tap target around a 44x24 track */
.switch{flex:none;display:inline-flex;align-items:center;justify-content:center;width:56px;height:44px;padding:0;background:none;border:0;border-radius:12px;cursor:pointer}
.switch-track{position:relative;width:44px;height:24px;border-radius:999px;background:var(--muted);transition:background-color .15s}
.switch-thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px rgba(38,51,47,0.3);transition:transform .15s}
.switch[aria-checked="true"] .switch-track{background:var(--primary)}
.switch[aria-checked="true"] .switch-thumb{transform:translateX(20px)}
.switch:disabled{cursor:not-allowed}
.switch:disabled .switch-track{opacity:.5}
.privacy-body,.cs-body{position:relative;padding:28px;display:flex;flex-direction:column;gap:12px}
.privacy-body>p{margin:0;font-size:15px;line-height:1.6;color:var(--muted)}
.privacy-close,.cs-close{position:absolute;top:16px;right:16px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;background:none;border:0;border-radius:10px;cursor:pointer}
.privacy-reset{align-self:flex-start;margin-top:8px;min-height:44px;padding:0 18px;box-sizing:border-box;background:var(--surface);color:var(--primary);border:1.5px solid var(--primary);border-radius:10px;font-family:inherit;font-size:15px;font-weight:600;cursor:pointer}
/* FAQ accordion: native <details>, so answers stay in the HTML and work without JS */
.faq-list{max-width:860px;width:100%;display:flex;flex-direction:column;gap:32px}
.faq-group{display:flex;flex-direction:column;gap:8px;min-width:0}
.faq-group[hidden]{display:none}
/* FAQ filter chips: they wrap onto a second line on small screens, so the page never scrolls sideways */
.faq-chips{max-width:860px;display:flex;flex-wrap:wrap;gap:8px}
.faq-chip{display:inline-flex;align-items:center;min-height:40px;box-sizing:border-box;padding:8px 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font-family:Inter,'Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-weight:600;font-size:14px;line-height:1.2;cursor:pointer}
.faq-chip:hover{border-color:var(--primary)}
.faq-chip[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:#FFFFFF}
.faq-chip[aria-pressed="true"]:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.faq-chip:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
/* /work/ filters: service chips (one swipe row under 768px), industry + country as native selects styled like the chips, results bar */
.work-filter-area{display:flex;flex-direction:column;gap:12px;min-width:0}
.work-filters{display:flex;flex-direction:column;gap:8px;min-width:0}
.work-chips-wrap{position:relative;min-width:0}
.work-chips{display:flex;flex-wrap:wrap;gap:8px}
.work-chip{flex:none;display:inline-flex;align-items:center;height:36px;box-sizing:border-box;padding:0 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font-family:Inter,'Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:14px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer}
.work-chip:hover{border-color:var(--primary)}
.work-chip[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:#FFFFFF}
.work-chip:focus-visible,.work-select select:focus-visible,.work-tag:focus-visible,.work-clear:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.work-selects{display:flex;flex-wrap:wrap;gap:8px}
.work-select{position:relative;display:inline-flex;min-width:0;color:var(--text)}
.work-select select{-webkit-appearance:none;appearance:none;height:36px;box-sizing:border-box;max-width:100%;min-width:0;padding:0 36px 0 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:inherit;font-family:Inter,'Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:14px;font-weight:600;line-height:1;text-overflow:ellipsis;cursor:pointer}
.work-select select:hover{border-color:var(--primary)}
.work-select.is-active{color:var(--primary)}
.work-select.is-active select{border-color:var(--primary);background:var(--primary-tint)}
.work-select>svg{position:absolute;right:14px;top:50%;width:14px;height:14px;margin-top:-7px;stroke:currentColor;pointer-events:none}
.work-results{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-height:36px}
.work-count{margin:0;font-size:14px;font-weight:600;color:var(--text)}
.work-active{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.work-active[hidden],.work-empty[hidden]{display:none}
.work-tag{display:inline-flex;align-items:center;gap:6px;height:32px;box-sizing:border-box;padding:0 10px 0 12px;border:1px solid var(--primary);border-radius:999px;background:var(--primary-tint);color:var(--primary);font-family:Inter,'Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:13px;font-weight:600;line-height:1;cursor:pointer}
.work-tag>span[aria-hidden]{font-size:16px}
.work-clear{height:32px;padding:0 4px;border:0;background:none;color:var(--primary);font-family:Inter,'Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.work-empty{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:24px;border:1px dashed var(--border);border-radius:16px;background:var(--surface)}
.work-empty .svc-btn-outline{cursor:pointer;font-family:inherit}
@media (max-width:767px){
.work-chips{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:3px 40px 3px 3px;margin:-3px}
.work-chips::-webkit-scrollbar{display:none}
.work-chip{scroll-snap-align:start;scroll-margin-left:3px}
.work-chips-wrap::after{content:"";position:absolute;top:0;right:-3px;bottom:0;width:40px;background:linear-gradient(to right,rgba(228,232,226,0),var(--bg-alt));pointer-events:none;transition:opacity .2s}
.work-chips-wrap.at-end::after{opacity:0}
.work-selects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.work-select select{width:100%}
.work-chip,.work-select select,.work-tag,.work-clear{height:40px}
.work-results{min-height:40px;flex-wrap:nowrap}
/* Active filter tags stay on the count's line and swipe sideways, so the filter area stays three lines */
.work-count{flex:none}
.work-active{flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:3px;margin:-3px}
.work-active::-webkit-scrollbar{display:none}
.work-tag,.work-clear{flex:none}
}
.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:12px}
.faq-item>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;box-sizing:border-box;padding:18px 20px;font-family:Inter,'Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-weight:600;font-size:17px;line-height:1.4;color:var(--text);cursor:pointer;list-style:none;border-radius:12px}
.faq-item>summary::-webkit-details-marker{display:none}
.faq-item>summary::marker{content:""}
.faq-item>summary:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.faq-icon{flex:none;transition:transform .15s}
.faq-item[open] .faq-icon{transform:rotate(45deg)}
.faq-item>p,.faq-answer{margin:0;padding:0 20px 20px;font-size:16px;line-height:1.6;color:var(--muted)}
.faq-answer{display:flex;flex-direction:column;gap:12px}
.faq-answer>p{margin:0}
/* Rates table in the FAQ: the rate column stays as narrow as its content, so the work-type column wraps on small screens */
.rate-table{width:100%;border-collapse:collapse;font-family:Inter,'Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:15px}
.rate-table th{font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);text-align:left;padding:0 0 8px;border-bottom:1px solid var(--border)}
.rate-table td{padding:12px 0;border-bottom:1px solid var(--border)}
.rate-table tbody tr:last-child td{border-bottom:0}
.rate-table td:first-child{padding-right:16px}
.rate-table th:last-child,.rate-table td:last-child{width:1%;text-align:right;white-space:nowrap}
.rate-table td:last-child{font-family:'Space Grotesk','Space Grotesk Fallback',Inter,sans-serif;font-size:18px;font-weight:700;color:var(--primary)}
/* Career timeline (/about/ and /hire-shopify-developer-philippines/), on the dark box: vertical by default, horizontal row above 900px */
.tl{list-style:none;margin:0;padding:0;position:relative;display:flex;flex-direction:column;gap:28px}
.tl::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:2px;background:var(--dark-border)}
.tl>li{position:relative;padding-left:32px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.tl-dot{position:absolute;left:0;top:8px;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--dark)}
.tl-dot.now{left:-2px;top:6px;width:16px;height:16px;box-shadow:0 0 0 3px var(--dark),0 0 0 7px rgba(232,199,154,0.2)}
@media (min-width:901px){
.tl{flex-direction:row;gap:24px}
.tl::before{left:6px;right:6px;top:5px;bottom:auto;width:auto;height:2px}
.tl>li{flex:1 1 0;padding-left:0;padding-top:32px}
.tl-dot{top:0;left:0}
.tl-dot.now{top:-2px;left:-2px}
}
/* Compact timeline: smaller gaps and text, items styled by class */
.tl-compact{gap:20px}
.tl-compact>li{gap:6px}
.tl-date{font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:12px;font-weight:600;background:var(--accent-soft);color:var(--accent);padding:4px 8px;border-radius:6px}
.tl-title{margin:0;font-family:'Space Grotesk','Space Grotesk Fallback',Inter,sans-serif;font-size:16px;line-height:1.35;font-weight:700;letter-spacing:-.01em;color:var(--dark-text)}
.tl-text{margin:0;font-size:14px;line-height:1.55;color:var(--dark-muted)}
.tl-box{background:var(--dark);color:var(--dark-text);border-radius:20px;padding:clamp(24px,4vw,40px);display:flex;flex-direction:column;gap:28px}
.tl-box .svc-more-link{color:var(--accent)}
.tl-box :focus-visible{outline-color:var(--accent)}
/* Hire from the Philippines page (built by scripts/build-hire.py). Hero: the homepage hero without the profile card */
.hp-hero{padding-block:clamp(24px,3vw,32px) clamp(48px,6vw,72px);display:flex;flex-direction:column;gap:24px}
.hp-hero-text{display:flex;flex-direction:column;align-items:flex-start;gap:16px;max-width:820px}
.hp-h1{margin:4px 0 0;font-family:'Space Grotesk','Space Grotesk Fallback',Inter,sans-serif;font-size:clamp(40px,5.8vw,54px);line-height:1.02;font-weight:700;letter-spacing:-.035em}
.hp-lead{margin:0;font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:var(--muted);max-width:640px}
.hp-lead strong{color:var(--text);font-weight:600}
.hp-stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:820px}
@media (min-width:769px){.hp-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.hp-stat{height:100%;box-sizing:border-box;min-width:0;display:flex;flex-direction:column;gap:2px;background:var(--dark);color:var(--dark-text);border-radius:12px;padding:14px 16px}
.hp-stat-num{font-family:'Space Grotesk','Space Grotesk Fallback',Inter,sans-serif;font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.hp-stat-label{font-size:13px;line-height:1.35;color:var(--dark-muted)}
.hp-stat .rating-stars{margin:4px 0 2px}
a.hp-stat{text-decoration:none;transition:background-color .15s}
a.hp-stat:hover{background:var(--dark-surface);color:var(--dark-text);opacity:1}
a.hp-stat:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.hp-btns{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:767px){.hp-hero{padding-top:24px;gap:20px}.hp-h1{font-size:clamp(34px,9vw,44px)}.hp-stat{padding:12px}.hp-stat-num{font-size:clamp(22px,6vw,26px)}}
@media (prefers-reduced-motion:reduce){a.hp-stat{transition:none}}
.hp-text{max-width:720px;display:flex;flex-direction:column;gap:16px}
.hp-text>p{margin:0;font-size:17px;line-height:1.65;color:var(--text)}
.hp-why{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:769px){.hp-why{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* My story: personal text column (720px, larger text) with the photo beside it from 900px, above it on smaller screens */
.hp-story{display:flex;flex-direction:column;gap:24px}
@media (min-width:900px){.hp-story{flex-direction:row-reverse;justify-content:flex-end;align-items:flex-start;gap:56px}}
.hp-story-text{max-width:720px;display:flex;flex-direction:column;gap:18px}
.hp-story-text>p{margin:0;font-size:clamp(17px,1.5vw,19px);line-height:1.7;color:var(--text)}
/* "My story" photo, styled like the /about/ photo: the full text column on phones and tablets (square, at most 70vh tall), 240px from 900px */
.hp-photo{display:block;box-sizing:border-box;flex:none;width:100%;height:auto;aspect-ratio:1/1;max-height:70vh;border-radius:20px;object-fit:cover;object-position:center 30%;border:1px solid var(--border);box-shadow:0 8px 24px rgba(0,0,0,.08)}
@media (min-width:900px){.hp-photo{width:240px;height:240px;max-height:none;border-radius:24px}}
.hp-reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px}
/* Time zone table: scrolls inside its own box on narrow screens, never the page */
.tz-wrap{max-width:720px;overflow-x:auto;box-sizing:border-box;background:var(--surface);border:1px solid var(--border);border-radius:16px}
.tz-wrap:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.tz-table{width:100%;min-width:420px;border-collapse:collapse;font-size:16px}
.tz-table th,.tz-table td{padding:12px 20px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}
.tz-table thead th{font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.tz-table tbody th{font-weight:600}
.tz-table tbody tr:last-child>*{border-bottom:0}
.tz-table td{font-variant-numeric:tabular-nums}
.tz-local{margin:0;max-width:720px;box-sizing:border-box;background:var(--primary-tint);border-radius:12px;padding:14px 18px;font-size:16px;color:var(--text)}
.tz-local[hidden]{display:none}
/* Below 1024px the burger menu replaces the top navigation */
@media (max-width:1023px){
.nav-links{display:none!important}
.burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--border);border-radius:10px;background:var(--surface);cursor:pointer}
.brand{min-height:44px}
}
@media (max-width:768px){
.m-only{display:block!important}
.stack-m{flex-direction:column!important}
.stack-m>a{width:100%!important;justify-content:center!important}
.btn-full-m{flex:1 1 100%!important;justify-content:center!important}
.foot-links>a{display:inline-flex;align-items:center;min-height:44px;padding:0!important}
.cta-bar{left:0;right:0;bottom:0;width:auto;max-width:none;gap:8px;justify-content:space-between;border:0;border-radius:0;padding:10px 10px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -8px 24px rgba(38,51,47,0.18)}
.cta-id{gap:6px!important}
.cta-btn{margin-left:0;padding-inline:8px;gap:4px}
.cta-rating{gap:4px}
.btn-long{display:none}
.btt{right:16px;bottom:calc(16px + env(safe-area-inset-bottom))}
/* --bar-h is the measured bar height, which already includes the safe-area padding */
.btt.lift{bottom:calc(var(--bar-h,64px) + 12px)}
body{background:var(--dark);padding-bottom:calc(64px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){.cta-btn.glow{animation:none}.cta-btn,.cta-arrow,.cta-bar,.site-header,.site-header>nav,.menu-backdrop,.mobile-menu,.mega,.nav-chevron,.btt,.faq-icon,.consent,.consent-backdrop,.switch-track,.switch-thumb{transition:none}.consent,.consent-backdrop{animation:none}html{scroll-behavior:auto}}

.header-tools{display:none}
@media(max-width:1023px){.header-tools{display:flex;align-items:center;gap:8px;margin-left:auto}}
@media(min-width:1024px){
.nav-links>.search-desktop:hover,.nav-links>.search-desktop:focus-visible{color:var(--primary)!important;background:radial-gradient(circle at center,var(--primary-tint) 20px,transparent 21px)!important}
.nav-links>.search-desktop:focus-visible{outline:2px solid var(--primary);outline-offset:-4px;border-radius:24px}
.search-tooltip{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);padding:7px 10px;border-radius:7px;background:var(--dark);color:var(--dark-text);font:12px/1.4 Inter,sans-serif;white-space:nowrap;pointer-events:none;z-index:1100}
.search-desktop:hover>.search-tooltip,.search-desktop:focus-visible>.search-tooltip{display:block}
}

/* Responsive floating CTA labels are static: no post-paint text or width mutation. */
.cta-label>.cta-short{display:none}
@media(max-width:768px){.cta-label>.cta-long{display:none}.cta-label>.cta-short{display:inline}}