/*
Theme Name: Visible Solution
Theme URI: https://visiblesolution.com/
Author: Visible Solution LLC
Description: Custom theme for Visible Solution LLC: local SEO, ads, AI search and websites for service businesses.
Version: 2.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: Proprietary
Text Domain: visible-solution
*/

@font-face{font-family:"Bricolage Grotesque";src:url(assets/fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(assets/fonts/instrument-sans.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  /* palette follows upwork.com (near-black ink, green brand, lime accent); type: Bricolage Grotesque headings, Instrument Sans text */
  --ink:#181818; --text:#3d3d3d; --muted:#676767; --faint:#9a9a9a;
  --navy:#1f1f1f; --navy-deep:#181818; --navy-text:#c9c9c9; --navy-rule:rgba(255,255,255,.14);
  --paper:#ffffff; --stone:#f7f7f5; --stone-2:#eceeea; --tint:#f1f8ee;
  --rule:#e4e7eb; --rule-ink:#181818;
  --green:#14a800; --lime:#d2ff00;
  --signal:#14a800; --signal-ink:#0d7a00; --cta:#0d7a00; --cta-hover:#0a6400;
  --ok:#14a800; --err:#b42318;
  --wrap:1360px; --gut:40px;
  --display:"Bricolage Grotesque","Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:104px;scrollbar-gutter:stable;-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);font:400 16px/1.55 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;color:var(--ink);font-weight:600;letter-spacing:-.018em;line-height:1.15;text-wrap:balance}
p,ul,ol,dl,dd,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
strong{font-weight:600;color:var(--ink)}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.i{display:inline-block;flex:none;width:1em;height:1em}
:focus-visible{outline:2px solid var(--cta);outline-offset:3px}
.skip{position:absolute;left:16px;top:-100px;z-index:100;background:var(--ink);color:#fff;padding:12px 18px;font-weight:600}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* links and buttons */
.link{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule);text-decoration-thickness:1px;text-underline-offset:6px;transition:text-decoration-color .2s,color .2s}
.link .i{width:16px;height:16px;transition:transform .2s}
.link:hover{color:var(--signal-ink);text-decoration-color:currentColor}
.link:hover .i-arrow{transform:translateX(3px)}
.inline-link{color:var(--signal-ink);text-decoration:underline;text-underline-offset:3px}
.inline-link:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:4px;font:600 15.5px/1 var(--font);border:1px solid transparent;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s;white-space:nowrap}
.btn .i{width:17px;height:17px}
.btn-cta{background:var(--cta);color:#fff}
.btn-cta:hover{background:var(--cta-hover)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--navy)}
.btn-line{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-line:hover{background:var(--ink);color:#fff}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:var(--stone-2)}
.btn-block{width:100%}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--rule)}
.nav{display:flex;align-items:center;gap:28px;min-height:80px}
.brand{display:flex;align-items:baseline;gap:14px;color:var(--ink);white-space:nowrap}
.brand b{font-weight:700;font-size:21px;letter-spacing:-.025em}
.brand b span{color:var(--signal)}
.brand small{font-size:13px;color:var(--muted);padding-left:14px;border-left:1px solid var(--rule);line-height:1.2}
.primary-nav{margin-left:auto}
.primary-nav .menu{display:flex;align-items:center;gap:26px}
.primary-nav a{display:block;padding:28px 0 26px;font-weight:500;font-size:15px;color:var(--text);border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.primary-nav a:hover{color:var(--ink);border-bottom-color:var(--rule)}
.primary-nav .current-menu-item>a,.primary-nav .current_page_item>a,.primary-nav .current_page_parent>a{color:var(--ink);border-bottom-color:var(--signal)}
.nav-cta{display:flex;align-items:center;gap:22px}
.nav-phone{font-weight:600;font-size:15px;color:var(--ink);white-space:nowrap}
.nav-phone:hover{color:var(--signal-ink)}
.nav-cta .btn{min-height:44px;padding:0 18px;font-size:15px}
.burger{display:none;width:46px;height:46px;border:1px solid var(--rule);border-radius:4px;background:none;cursor:pointer;align-items:center;justify-content:center;color:var(--ink)}
.burger span{display:block;width:18px;height:1.5px;background:currentColor;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:currentColor;transition:transform .2s}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
.mobile-extra{display:none}

/* ---------- sections: label column + body ---------- */
.sec{padding:104px 0;border-top:1px solid var(--rule)}
.sec.stone{background:var(--stone);border-top-color:var(--stone-2)}
.sec.first{border-top:0}
.sec>.wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
.sec-label{grid-column:1/4;font-size:14px;font-weight:600;color:var(--ink);padding-top:10px;display:flex;align-items:flex-start;gap:12px}
.sec-label::before{content:"";width:8px;height:8px;margin-top:6px;background:var(--signal);flex:none}
.sec-body{grid-column:4/13;min-width:0}
.sec.wide .sec-body{grid-column:1/13}
.sec.wide .sec-label{grid-column:1/13;margin-bottom:28px}
.title{font-size:clamp(30px,3.3vw,44px);max-width:22ch}
.intro{font-size:19px;line-height:1.6;color:var(--text);max-width:62ch;margin-top:20px}
.sec-foot{margin-top:48px;display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center}

/* ---------- inner page header ---------- */
.page-head{background:var(--stone);border-bottom:1px solid var(--stone-2);padding:48px 0 72px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--muted);margin-bottom:56px}
.crumbs a{color:var(--muted);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:4px}
.crumbs a:hover{color:var(--ink)}
.crumbs span[aria-hidden]{color:var(--faint)}
.page-head .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
.page-head .crumbs{grid-column:1/13}
.page-head h1{grid-column:1/9;font-size:clamp(38px,4.8vw,64px);line-height:1.06;letter-spacing:-.025em}
.page-head .lede{grid-column:1/8;font-size:19px;line-height:1.6;margin-top:24px;color:var(--text)}
.page-head .head-aside{grid-column:9/13;grid-row:2/4;align-self:end;border-top:1px solid var(--rule-ink);padding-top:16px;font-size:15px;color:var(--text)}
.page-head .head-aside b{display:block;font-size:15px;color:var(--ink);margin-bottom:4px}

/* ---------- home: hero ---------- */
.hero{padding:88px 0 96px}
.hero .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:start}
.hero-copy{grid-column:1/8;padding-top:8px}
.hero h1{font-size:clamp(42px,5.2vw,70px);line-height:1.04;letter-spacing:-.03em;max-width:15ch}
.hero .lede{font-size:20px;line-height:1.6;margin-top:28px;max-width:34em}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;margin-top:40px}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:72px;border-top:1px solid var(--rule-ink)}
.facts div{padding:18px 20px 0 0}
.facts div+div{padding-left:20px;border-left:1px solid var(--rule)}
.facts dt{font-size:30px;font-weight:600;color:var(--ink);letter-spacing:-.02em;line-height:1.1}
.facts dd{font-size:14.5px;color:var(--muted);margin-top:6px}
.hero-proof{grid-column:8/13;margin:8px 0 0 24px}
.hero-proof .shot{aspect-ratio:4/3}
.hero-proof .shot-wrap{border:1px solid var(--rule)}
.hero-proof figcaption{border-top:3px solid var(--signal);margin-top:20px;padding-top:16px}
.hero-proof .kicker{font-size:13px;font-weight:600;color:var(--signal-ink);letter-spacing:.02em}
.hero-proof h2{font-size:22px;line-height:1.25;margin:6px 0 8px}
.hero-proof p{font-size:15px;color:var(--muted)}
.hero-proof .link{margin-top:14px;font-size:15px}

.clients{border-top:1px solid var(--rule);padding:28px 0}
.clients .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:baseline}
.clients p{grid-column:1/4;font-size:14px;font-weight:600;color:var(--ink)}
.clients ul{grid-column:4/13;display:flex;flex-wrap:wrap;gap:6px 0}
.clients li{font-size:15px;color:var(--muted)}
.clients li:not(:last-child)::after{content:"/";margin:0 14px;color:var(--rule)}

/* home: service groups as rows */
.svc-rows{margin-top:56px;border-top:1px solid var(--rule-ink)}
.svc-row{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:var(--gut);padding:30px 0;border-bottom:1px solid var(--rule)}
.svc-row h3{grid-column:1/4;font-size:20px}
.svc-row h3 a:hover{color:var(--signal-ink)}
.svc-row p.lead{grid-column:1/4;font-size:15px;color:var(--muted);margin-top:8px}
.svc-row ul{grid-column:4/10;grid-row:1/3;display:grid;grid-template-columns:1fr 1fr;gap:10px var(--gut)}
.svc-row li a{display:block;font-size:16px;color:var(--text);padding-left:16px;position:relative}
.svc-row li a::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:1px;background:var(--faint)}
.svc-row li a:hover{color:var(--signal-ink)}

/* work */
.work-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:56px var(--gut);margin-top:56px}
.work-grid>li{grid-column:span 4;min-width:0}
.work-grid.feature>li:nth-child(-n+2){grid-column:span 6}
.work-grid.two>li{grid-column:span 6}
.project a{display:block}
.shot-wrap{display:block;border:1px solid var(--rule);background:#fff;overflow:hidden}
.shot{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.project a:hover .shot{transform:scale(1.02)}
.project .cap{padding-top:16px}
.project h3{font-size:18px}
.project .cap p{font-size:14.5px;color:var(--muted);margin-top:2px}
.project .dom{font-size:14px;color:var(--muted);display:inline-flex;align-items:center;gap:6px;margin-top:8px;text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:4px}
.project .dom .i{width:14px;height:14px}
.project a:hover h3{color:var(--signal-ink)}
.shot-empty{aspect-ratio:16/10;background:var(--stone-2)}

/* results rows (home + reviews) */
.results{margin-top:56px;border-top:1px solid var(--rule-ink)}
.result{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:var(--gut);padding:32px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.result .who{grid-column:1/4}
.result .who b{display:block;font-size:17px;color:var(--ink)}
.result .who span{font-size:14.5px;color:var(--muted)}
.result .what{grid-column:4/10;font-size:clamp(22px,2.2vw,28px);line-height:1.25;color:var(--ink);font-weight:500;letter-spacing:-.015em}

/* testimonial */
.pull{margin-top:72px;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:var(--gut)}
.pull blockquote{grid-column:1/9;font-size:clamp(24px,2.6vw,34px);line-height:1.35;color:var(--ink);font-weight:400;letter-spacing:-.012em}
.pull figcaption{grid-column:1/9;margin-top:24px;font-size:15px;color:var(--muted)}
.pull figcaption b{color:var(--ink);font-weight:600}

/* process */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:56px;border-top:1px solid var(--rule-ink)}
.step{padding:26px 24px 0 0}
.step+.step{padding-left:24px;border-left:1px solid var(--rule)}
.step .n{font-size:14px;font-weight:600;color:var(--signal-ink)}
.step h3{font-size:19px;margin:10px 0 10px}
.step p{font-size:15.5px;color:var(--text)}

/* plans */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:56px;border:1px solid var(--rule);background:#fff}
.plan{padding:36px 32px 32px;display:flex;flex-direction:column;border-top:3px solid transparent}
.plan+.plan{border-left:1px solid var(--rule)}
.plan.pop{border-top-color:var(--ink)}
.plan .tier{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;font-weight:600;color:var(--muted)}
.plan .tag{color:var(--ink)}
.plan h3{font-size:28px;margin:12px 0 10px}
.plan .for{font-size:15.5px;color:var(--text);min-height:76px}
.plan .price{font-size:15px;font-weight:600;color:var(--ink);padding:16px 0;margin:20px 0 22px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.plan .price span{font-weight:400;color:var(--muted)}
.plan ul{display:grid;gap:10px;font-size:15px;margin-bottom:32px}
.plan li{display:flex;gap:10px;line-height:1.45}
.plan li .i{width:17px;height:17px;margin-top:2px;color:var(--ok)}
.plan li.no{color:var(--muted)}
.plan li.no .i{color:var(--faint)}
.plan .btn{margin-top:auto}
.plans.compact .plan .for{min-height:0}
.plans-note{margin-top:20px;font-size:14.5px;color:var(--muted)}

.compare-wrap{overflow-x:auto;border:1px solid var(--rule);background:#fff;margin-top:56px}
.compare{width:100%;border-collapse:collapse;min-width:640px;font-size:15px}
.compare th,.compare td{padding:14px 20px;border-bottom:1px solid var(--rule);text-align:center;font-weight:400}
.compare th:first-child,.compare td:first-child{text-align:left}
.compare thead th{font-weight:600;color:var(--ink);background:var(--stone);font-size:14.5px}
.compare tbody tr:last-child>*{border-bottom:0}
.compare tbody th{color:var(--text)}
.compare .i{margin:0 auto;width:18px;height:18px}
.compare .yes .i{color:var(--ok)}
.compare .no .i{color:#b5bac1}

/* faq */
.faq{border-top:1px solid var(--rule-ink)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;padding:22px 48px 22px 0;font-size:18px;font-weight:500;color:var(--ink);position:relative;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:1.5px;background:var(--ink);transition:transform .25s}
.faq summary::after{transform:rotate(90deg)}
.faq details[open] summary::after{transform:rotate(0)}
.faq summary:hover{color:var(--signal-ink)}
.faq details p{padding:0 48px 24px 0;color:var(--text);max-width:68ch}

/* closing call to action */
.cta{background:var(--navy);color:#fff;padding:88px 0}
.cta .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:end}
.cta h2{grid-column:1/8;color:#fff;font-size:clamp(30px,3.4vw,46px)}
.cta p{grid-column:1/8;color:var(--navy-text);font-size:18px;margin-top:18px;max-width:52ch}
.cta .actions{grid-column:9/13;grid-row:1/3;display:grid;gap:14px}
.cta .phone{display:block;border-top:1px solid var(--navy-rule);padding-top:14px;font-size:15px;color:var(--navy-text)}
.cta .phone a{display:block;color:#fff;font-size:22px;font-weight:600;margin-top:2px}
.cta .phone a:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- about ---------- */
.story p{font-size:18.5px;line-height:1.7;max-width:64ch}
.story p+p{margin-top:22px}
.story .quote{font-size:clamp(24px,2.4vw,30px);line-height:1.35;color:var(--ink);font-weight:500;letter-spacing:-.015em;margin:40px 0;padding-left:24px;border-left:3px solid var(--signal);max-width:28ch}
.numbers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--rule-ink);margin-top:48px}
.numbers div{padding:20px 16px 0 0}
.numbers div+div{padding-left:16px;border-left:1px solid var(--rule)}
.numbers dt{font-size:clamp(26px,2.6vw,36px);font-weight:600;color:var(--ink);letter-spacing:-.02em;line-height:1.1}
.numbers dd{font-size:14.5px;color:var(--muted);margin-top:6px}
.timeline{margin-top:48px;border-top:1px solid var(--rule-ink)}
.timeline>li{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:var(--gut);padding:28px 0;border-bottom:1px solid var(--rule)}
.timeline .yr{grid-column:1/3;font-size:22px;font-weight:600;color:var(--signal-ink)}
.timeline .body{grid-column:3/10}
.timeline h3{font-size:19px;margin-bottom:8px}
.timeline p{color:var(--text);max-width:64ch}
.timeline .marks{margin-top:12px;display:flex;flex-wrap:wrap;gap:4px 0;font-size:14.5px;color:var(--muted)}
.timeline .marks li:not(:last-child)::after{content:"·";margin:0 10px}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:48px;border-top:1px solid var(--rule-ink)}
.cols3>div{padding:24px 24px 0 0}
.cols3>div+div{padding-left:24px;border-left:1px solid var(--rule)}
.cols3 h3{font-size:19px;margin-bottom:10px}
.cols3 p{font-size:15.5px;color:var(--text)}

/* ---------- services page ---------- */
.svc-layout{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
.svc-nav{grid-column:1/4;position:sticky;top:120px;align-self:start}
.svc-nav p{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:14px}
.svc-nav ul{border-left:1px solid var(--rule)}
.svc-nav a{display:block;padding:8px 0 8px 16px;margin-left:-1px;border-left:2px solid transparent;color:var(--muted);font-size:15px}
.svc-nav a:hover,.svc-nav a.on{color:var(--ink);border-left-color:var(--signal)}
.svc-nav .btn{margin-top:28px}
.svc-main{grid-column:4/13;min-width:0}
.svc-group+.svc-group{margin-top:96px}
.svc-group>header{padding-bottom:24px;border-bottom:1px solid var(--rule-ink)}
.svc-group>header h2{font-size:clamp(28px,2.8vw,38px)}
.svc-group>header p{font-size:17px;color:var(--text);margin-top:10px;max-width:60ch}
.svc-item{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:var(--gut);padding:36px 0;border-bottom:1px solid var(--rule);scroll-margin-top:120px}
.svc-item h3{grid-column:1/10;font-size:22px;margin-bottom:14px}
.svc-item .desc{grid-column:1/6}
.svc-item .desc p{color:var(--text)}
.svc-item .desc .link{margin-top:18px;font-size:15px}
.svc-item .incl{grid-column:6/10}
.svc-item h4{font-size:13.5px;font-weight:600;color:var(--muted);margin-bottom:10px}
.ticks{display:grid;gap:7px}
.ticks li{font-size:15px;line-height:1.45;color:var(--text);padding-left:18px;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--signal)}

/* ---------- reviews page ---------- */
.case{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:var(--gut);padding:48px 0;border-bottom:1px solid var(--rule)}
.case:first-child{border-top:1px solid var(--rule-ink);margin-top:48px}
.case .media{grid-column:1/5}
.case .body{grid-column:5/10}
.case .num{font-size:13.5px;font-weight:600;color:var(--signal-ink)}
.case h3{font-size:clamp(24px,2.4vw,30px);margin:8px 0 6px}
.case .client{font-size:16px;color:var(--muted)}
.case blockquote{margin-top:22px;font-size:17px;line-height:1.6;color:var(--text);padding-left:18px;border-left:2px solid var(--rule)}
.case dl{display:grid;grid-template-columns:auto 1fr;gap:6px 20px;margin-top:24px;font-size:15px}
.case dt{color:var(--muted)}
.case dd a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule)}
.case dd a:hover{color:var(--signal-ink);text-decoration-color:currentColor}
.case .no-shot{aspect-ratio:16/10;background:var(--navy);color:var(--navy-text);display:flex;flex-direction:column;justify-content:flex-end;padding:28px;font-size:16px;line-height:1.4}
.case .no-shot b{font-size:clamp(72px,8vw,112px);line-height:.9;font-weight:600;color:#fff;letter-spacing:-.04em}
.case .no-shot span{max-width:22ch;margin-top:10px}
.quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--gut);margin-top:48px;border-top:1px solid var(--rule-ink)}
.quotes figure{padding:32px 0;border-bottom:1px solid var(--rule)}
.quotes blockquote{font-size:18px;line-height:1.6;color:var(--ink)}
.quotes figcaption{margin-top:16px;font-size:14.5px;color:var(--muted)}
.quotes figcaption b{color:var(--ink);font-weight:600}

/* ---------- contact & forms ---------- */
.contact-layout{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
.contact-info{grid-column:1/5}
.contact-info dl{border-top:1px solid var(--rule-ink)}
.contact-info dl>div{padding:20px 0;border-bottom:1px solid var(--rule)}
.contact-info dt{font-size:14px;color:var(--muted)}
.contact-info dd{font-size:19px;color:var(--ink);font-weight:500;margin-top:4px;overflow-wrap:anywhere}
.contact-info dd a:hover{color:var(--signal-ink)}
.contact-info .note{margin-top:28px;font-size:15.5px;color:var(--text)}
.form-panel{grid-column:6/13;background:var(--stone);padding:44px;scroll-margin-top:110px}
.form-panel h2{font-size:26px}
.form-panel>p{font-size:15px;color:var(--muted);margin:6px 0 28px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.f{display:grid;gap:8px;align-content:start;min-width:0}
.f.full{grid-column:1/-1}
.f label,.f legend{font-size:14.5px;font-weight:600;color:var(--ink)}
fieldset.f{border:0;margin:0;padding:0}
fieldset.f legend{padding:0;margin-bottom:10px}
.req{color:var(--signal-ink)}
.opt{font-weight:400;color:var(--muted)}
.f input,.f select,.f textarea{font:400 16px/1.4 var(--font);color:var(--ink);background:#fff;border:1px solid #c9c5bb;border-radius:4px;padding:12px 14px;min-height:48px;width:100%;transition:border-color .2s,box-shadow .2s}
.f select{appearance:none;-webkit-appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232b3544' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;padding-right:40px}
.f textarea{min-height:136px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(14,26,43,.12)}
.f input[aria-invalid="true"],.f textarea[aria-invalid="true"]{border-color:var(--err)}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px}
.checks label{display:flex;gap:10px;align-items:flex-start;font-size:15px;font-weight:400;color:var(--text);cursor:pointer;line-height:1.4}
.checks input{width:18px;height:18px;min-height:0;margin:1px 0 0;padding:0;flex:none;accent-color:var(--ink)}
.vs-form .btn{margin-top:28px}
.form-note{font-size:13.5px;color:var(--muted);margin-top:14px}
.form-note a{text-decoration:underline;text-underline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{padding:16px 18px;margin-bottom:24px;font-size:15px;line-height:1.5;border-left:3px solid}
.form-status.ok{background:#eef6f0;border-color:var(--ok);color:#1d4a2a}
.form-status.err{background:#fdf0ef;border-color:var(--err);color:#7a1a12}
.form-status a{text-decoration:underline}
.field-error{font-size:13.5px;color:var(--err)}
.start-layout{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:start}
.start-layout .form-panel{grid-column:1/9}
.start-aside{grid-column:9/13;position:sticky;top:120px}
.start-aside h2{font-size:19px;padding-bottom:14px;border-bottom:1px solid var(--rule-ink)}
.start-aside ol{counter-reset:s}
.start-aside ol li{counter-increment:s;display:grid;grid-template-columns:32px 1fr;padding:16px 0;border-bottom:1px solid var(--rule);font-size:15.5px;color:var(--text)}
.start-aside ol li::before{content:counter(s);font-weight:600;color:var(--signal-ink)}
.start-aside .call{margin-top:32px;font-size:15px;color:var(--text)}
.start-aside .call a{display:block;font-size:24px;font-weight:600;color:var(--ink);margin-top:4px}
.start-aside .call a:hover{color:var(--signal-ink)}

/* ---------- blog ---------- */
.post-list{border-top:1px solid var(--rule-ink)}
.post-row{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:var(--gut);padding:36px 0;border-bottom:1px solid var(--rule)}
.post-row .meta{grid-column:1/3;font-size:14.5px;color:var(--muted);display:grid;gap:2px;align-content:start;padding-top:4px}
.post-row .meta .cat{color:var(--signal-ink);font-weight:600}
.post-row .body{grid-column:3/10}
.post-row h2,.post-row h3{font-size:clamp(22px,2.2vw,28px);line-height:1.25}
.post-row h2 a:hover,.post-row h3 a:hover{color:var(--signal-ink)}
.post-row p{margin-top:12px;color:var(--text);max-width:64ch}
.post-row .link{margin-top:16px;font-size:15px}
.post-row.lead h2{font-size:clamp(28px,3vw,40px)}
.pagination{margin-top:40px;display:flex;gap:8px}
.pagination .page-numbers{min-width:42px;height:42px;border:1px solid var(--rule);display:grid;place-items:center;padding:0 14px}
.pagination .current{background:var(--ink);color:#fff;border-color:var(--ink)}

/* article and policy text */
.article{padding:72px 0 104px}
.article .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
.article aside.side{grid-column:1/4;font-size:14.5px;color:var(--muted);align-self:start;position:sticky;top:120px}
.article aside.side b{display:block;color:var(--ink);font-weight:600;margin-top:16px}
.article aside.side b:first-child{margin-top:0}
.article .prose{grid-column:4/11}
.prose{font-size:18px;line-height:1.75;color:var(--text)}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:clamp(23px,2.2vw,28px);margin-top:2em;line-height:1.25}
.prose h3{font-size:19px;margin-top:1.8em;line-height:1.35}
.prose ul,.prose ol{padding-left:1.25em;list-style:disc}
.prose ol{list-style:decimal}
.prose li+li{margin-top:.45em}
.prose li::marker{color:var(--signal)}
.prose a{color:var(--signal-ink);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--ink)}
.prose .updated{font-size:14.5px;color:var(--muted)}
.prose hr{border:0;border-top:1px solid var(--rule);margin:2.4em 0}
.article-cta{grid-column:4/11;margin-top:64px;padding:32px 0 0;border-top:1px solid var(--rule-ink);display:flex;flex-wrap:wrap;gap:20px 32px;align-items:center;justify-content:space-between}
.article-cta p{font-size:20px;font-weight:500;color:var(--ink);max-width:28ch;line-height:1.35}
.legal-nav{grid-column:1/13;display:flex;flex-wrap:wrap;gap:6px 28px;margin-top:28px;font-size:15px}
.legal-nav a{color:var(--muted);padding-bottom:4px;border-bottom:2px solid transparent}
.legal-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--signal)}
.legal-nav a:hover{color:var(--ink)}

/* 404 */
.notfound{padding:120px 0 136px}
.notfound .code{font-size:15px;font-weight:600;color:var(--signal-ink)}
.notfound h1{font-size:clamp(38px,4.8vw,60px);margin:14px 0 18px;max-width:18ch}
.notfound p{font-size:18px;max-width:52ch}
.notfound ul{margin-top:36px;border-top:1px solid var(--rule-ink);max-width:640px}
.notfound li a{display:flex;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--rule);font-weight:500;color:var(--ink)}
.notfound li a:hover{color:var(--signal-ink)}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-deep);color:var(--navy-text);padding:72px 0 32px;font-size:15px}
.site-footer .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
.foot-brand{grid-column:1/5}
.foot-brand .brand{color:#fff}
.foot-brand p{margin-top:16px;max-width:34ch;line-height:1.6}
.foot-col{grid-column:span 2}
.foot-col.contact{grid-column:span 4}
.site-footer h2{font-size:14px;font-weight:600;color:#fff;margin-bottom:16px}
.site-footer ul{display:grid;gap:9px}
.site-footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.site-footer address{font-style:normal}
.foot-bottom{grid-column:1/13;margin-top:64px;padding-top:24px;border-top:1px solid var(--navy-rule);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:14px}
.foot-bottom ul{display:flex;flex-wrap:wrap;gap:8px 24px}

/* ---------- motion (kept quiet) ---------- */
@view-transition{navigation:auto}
.site-header{view-transition-name:vs-header}
::view-transition-old(root),::view-transition-new(root){animation-duration:.25s;animation-timing-function:ease}
@keyframes vs-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.u-hero-panel>*,.page-head .wrap>*{animation:vs-in .8s cubic-bezier(.2,.7,.2,1) both}
.u-hero-panel>:nth-child(2),.page-head .wrap>:nth-child(2){animation-delay:.06s}
.u-hero-panel>:nth-child(3),.page-head .wrap>:nth-child(3){animation-delay:.12s}
.u-hero-panel>:nth-child(4),.page-head .wrap>:nth-child(4){animation-delay:.18s}

.js .rv{opacity:0;transform:translateY(16px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .brand small{display:none}
  .primary-nav .menu{gap:20px}
}
@media (max-width:1080px){
  :root{--gut:24px}
  .burger{display:inline-flex}
  .nav-phone{display:none}
  .primary-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--rule);padding:4px var(--gut) 24px;max-height:calc(100vh - 80px);overflow-y:auto}
  .primary-nav.open{display:block}
  .primary-nav .menu{flex-direction:column;align-items:stretch;gap:0}
  .primary-nav a{padding:16px 0;border-bottom:1px solid var(--rule);font-size:17px}
  .primary-nav .current-menu-item>a,.primary-nav .current_page_item>a,.primary-nav .current_page_parent>a{border-bottom-color:var(--rule);color:var(--signal-ink)}
  .mobile-extra{display:grid;gap:10px;margin-top:20px}
  .sec{padding:80px 0}
  .sec-label{grid-column:1/13;margin-bottom:20px;padding-top:0}
  .sec-body{grid-column:1/13}
  .hero-proof{grid-column:1/13;display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);margin:64px 0 0;align-items:end}
  .hero-proof figcaption{margin-top:0}
  .clients p,.clients ul{grid-column:1/13}
  .clients p{margin-bottom:8px}
  .svc-row{grid-template-columns:1fr;row-gap:16px}
  .svc-row h3,.svc-row p.lead,.svc-row ul{grid-column:1/-1;grid-row:auto}
  .work-grid>li,.work-grid.feature>li:nth-child(-n+2){grid-column:span 6}
  .result{grid-template-columns:1fr;row-gap:8px}
  .result .who,.result .what{grid-column:1/-1}
  .pull blockquote,.pull figcaption{grid-column:1/10}
  .steps{grid-template-columns:1fr 1fr}
  .step:nth-child(3){padding-left:0;border-left:0}
  .step:nth-child(n+3){margin-top:28px;border-top:1px solid var(--rule)}
  .plans{grid-template-columns:1fr}
  .plan+.plan{border-left:0;border-top:1px solid var(--rule)}
  .plan.pop{border-top:3px solid var(--ink)}
  .plan .for{min-height:0}
  .cta h2,.cta p{grid-column:1/13}
  .cta .actions{grid-column:1/13;grid-row:auto;margin-top:32px;max-width:420px}
  .page-head h1,.page-head .lede{grid-column:1/13}
  .page-head .head-aside{grid-column:1/13;grid-row:auto;margin-top:36px;max-width:480px}
  .numbers{grid-template-columns:repeat(3,minmax(0,1fr))}
  .numbers div:nth-child(4){padding-left:0;border-left:0}
  .numbers div:nth-child(n+4){margin-top:20px;border-top:1px solid var(--rule)}
  .svc-nav{grid-column:1/13;position:sticky;top:80px;z-index:5;background:#fff;margin:0 calc(var(--gut)*-1) 40px;padding:12px var(--gut);border-bottom:1px solid var(--rule)}
  .svc-nav p,.svc-nav .btn{display:none}
  .svc-nav ul{display:flex;gap:24px;overflow-x:auto;border:0;scrollbar-width:none}
  .svc-nav ul::-webkit-scrollbar{display:none}
  .svc-nav a{white-space:nowrap;border-left:0;border-bottom:2px solid transparent;padding:6px 0;margin:0}
  .svc-nav a:hover,.svc-nav a.on{border-bottom-color:var(--signal)}
  .svc-main{grid-column:1/13}
  .contact-info,.form-panel,.start-layout .form-panel,.start-aside{grid-column:1/13}
  .contact-info{margin-bottom:48px}
  .start-aside{position:static;margin-top:48px}
  .article aside.side{grid-column:1/13;position:static;display:flex;flex-wrap:wrap;gap:4px 24px;margin-bottom:36px}
  .article aside.side b{margin-top:0}
  .article .prose,.article-cta{grid-column:1/13}
  .foot-brand{grid-column:1/13;margin-bottom:40px}
  .foot-col{grid-column:span 4}
  .foot-col.contact{grid-column:span 4}
}
@media (max-width:760px){
  :root{--gut:20px}
  body{font-size:16px}
  .nav{min-height:68px;gap:16px}
  .brand b{font-size:19px}
  .nav-cta .btn{display:none}
  .primary-nav{max-height:calc(100vh - 68px)}
  .sec{padding:64px 0}
  .intro{font-size:17px}
  .page-head{padding:28px 0 52px}
  .crumbs{margin-bottom:36px}
  .page-head .lede{font-size:17px}
  .hero .lede{font-size:17.5px}
  .hero-actions .btn{flex:1 1 100%}
  .facts{grid-template-columns:1fr;margin-top:48px}
  .facts div,.facts div+div{padding:14px 0;border-left:0;border-bottom:1px solid var(--rule);display:flex;align-items:baseline;gap:14px}
  .facts dt{font-size:24px;min-width:92px}
  .facts dd{margin-top:0}
  .hero-proof{grid-template-columns:1fr;margin-top:48px}
  .hero-proof figcaption{margin-top:16px}
  .clients li{font-size:14.5px}
  .svc-row ul{grid-template-columns:1fr}
  .work-grid{gap:40px var(--gut)}
  .work-grid>li,.work-grid.feature>li:nth-child(-n+2),.work-grid.two>li{grid-column:1/13}
  .pull{margin-top:48px}
  .pull blockquote,.pull figcaption{grid-column:1/-1}
  .steps{grid-template-columns:1fr}
  .step,.step+.step{padding:22px 0;border-left:0}
  .step+.step{border-top:1px solid var(--rule)}
  .step:nth-child(n+3){margin-top:0}
  .plan{padding:28px 22px}
  .cta{padding:64px 0}
  .cta .actions{max-width:none}
  .numbers{grid-template-columns:1fr 1fr}
  .numbers div,.numbers div+div{padding:16px 12px 0 0;border-left:0}
  .numbers div:nth-child(even){padding-left:16px;border-left:1px solid var(--rule)}
  .numbers div:nth-child(n+3){margin-top:16px;border-top:1px solid var(--rule)}
  .timeline>li{grid-template-columns:1fr;row-gap:6px}
  .timeline .yr,.timeline .body{grid-column:1/-1}
  .cols3{grid-template-columns:1fr}
  .cols3>div,.cols3>div+div{padding:22px 0;border-left:0}
  .cols3>div+div{border-top:1px solid var(--rule)}
  .svc-nav{top:68px}
  .svc-item{grid-template-columns:1fr;padding:30px 0}
  .svc-item h3,.svc-item .desc,.svc-item .incl{grid-column:1/-1}
  .svc-item .incl{margin-top:22px}
  .case{grid-template-columns:1fr;padding:36px 0}
  .case .media,.case .body{grid-column:1/-1}
  .case .body{margin-top:24px}
  .quotes{grid-template-columns:1fr}
  .post-row{grid-template-columns:1fr}
  .post-row .meta{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 16px;margin-bottom:10px}
  .post-row .body{grid-column:1/-1}
  .form-panel{padding:28px 20px;margin:0 calc(var(--gut)*-1)}
  .fields,.checks{grid-template-columns:1fr}
  .foot-col,.foot-col.contact{grid-column:1/13;margin-bottom:32px}
  .faq summary{font-size:16.5px}
  .faq details p{padding-right:0}
  .prose{font-size:17px}
  .compare th,.compare td{padding:12px 14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
  html:focus-within{scroll-behavior:auto}
  @view-transition{navigation:none}
}
@media print{
  .site-header,.site-footer,.cta,.burger{display:none}
}

.sec-body .faq{margin-top:48px}
.story{margin-top:32px}
.sec.plain .sec-body{grid-column:1/13}
.sec.plain .work-grid{margin-top:0}
.svc-nav .btn{color:#fff;margin:28px 0 0;padding:0 20px;border:0}
.svc-nav .btn:hover{color:#fff}

/* =========================================================
   Home page (Upwork-style: green palette, rounded inset panels, soft layers)
   Scoped to bodybody until the other pages move to this look.
   ========================================================= */
/* measured from upwork.com at 1440px: header and footer sit 24px from the edges, content 80px */
body .site-header>.wrap{max-width:none;padding:0 24px}
body h1,body h2,body h3{letter-spacing:-.02em}
body .btn{border-radius:999px}
body .site-header{border-bottom-color:transparent}
body .primary-nav a{border-bottom:0;padding:28px 0}
body .primary-nav a:hover{color:var(--signal-ink)}
body .primary-nav .current-menu-item>a,body .primary-nav .current_page_item>a,body .primary-nav .current_page_parent>a{color:var(--signal-ink);border-bottom:0}

/* hero: rounded photo panel with a dark layer */
.u-hero{padding:16px 0 0}
.u-hero-panel{position:relative;border-radius:24px;overflow:hidden;min-height:580px;padding:72px 56px 52px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;
  background:linear-gradient(90deg,rgba(10,14,10,.88) 0%,rgba(10,14,10,.72) 42%,rgba(10,14,10,.2) 75%,rgba(10,14,10,.05) 100%),var(--hero) center/cover no-repeat #1d2a1d}
.u-hero-panel h1{color:#fff;font-size:clamp(40px,5.2vw,72px);line-height:1.02;font-weight:600;max-width:12.5em;letter-spacing:-.035em}
.u-hero-panel .lede{font-size:19px;line-height:1.55;color:#e7e7e7;margin-top:22px;max-width:36em}
.u-search{margin-top:36px;background:rgba(10,10,10,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:16px;padding:20px 22px 18px;max-width:640px}
.u-search-title{font-size:15px;font-weight:600;color:#fff;margin-bottom:12px}
.u-search-form{display:flex;background:#fff;border-radius:999px;padding:5px}
.u-search-form input{flex:1;min-width:0;border:0;background:transparent;font:400 16px var(--font);color:var(--ink);padding:0 18px}
.u-search-form input::placeholder{color:#6b6b6b}
.u-search-form input:focus{outline:none}
.u-search-form:focus-within{box-shadow:0 0 0 3px rgba(20,168,0,.55)}
.u-search-form .btn{min-height:46px}
.u-search-note{margin-top:12px;font-size:14.5px;color:#cfcfcf}
.u-search-note a{white-space:nowrap;color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.45)}


/* sections */
.u-sec{padding:96px 0}
.u-sec-tight{padding-top:24px}
.u-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 40px;margin-bottom:36px}
.u-head h2{font-size:clamp(28px,3vw,40px);font-weight:500;line-height:1.15;max-width:22em}
.u-head-center{flex-direction:column;align-items:center;text-align:center}
.u-head-center p{font-size:18px;color:var(--text);max-width:40em}
body .link{text-decoration:none;color:var(--signal-ink)}
body .link:hover{text-decoration:underline;text-underline-offset:5px}



/* dark results panel */
.u-dark{background:#181818;color:#cfcfcf;border-radius:24px;padding:64px}
.u-dark-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px 48px;flex-wrap:wrap}
.u-dark h2{color:#fff;font-size:clamp(28px,3vw,42px);font-weight:500;max-width:13em}
.u-facts{display:flex;gap:40px}
.u-facts dt{font-size:34px;font-weight:600;color:var(--lime);letter-spacing:-.02em;line-height:1}
.u-facts dd{font-size:14px;color:#b5b5b5;margin-top:8px}
.u-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:48px}
.u-results li{background:#242424;border:1px solid #2f2f2f;border-radius:14px;padding:24px}
.u-results .what{font-size:22px;line-height:1.25;color:#fff;font-weight:500}
.u-results .who{font-size:14px;color:#b0b0b0;margin-top:14px}
.u-results .who b{color:#fff;font-weight:600}
.u-quote{margin:48px 0 0;padding-top:40px;border-top:1px solid #333}
.u-quote blockquote{font-size:clamp(22px,2.3vw,30px);line-height:1.35;color:#fff;max-width:34em}
.u-quote figcaption{margin-top:18px;font-size:15px;color:#b0b0b0}
.u-quote figcaption b{color:#fff}
.u-dark-link{display:inline-flex;align-items:center;gap:8px;margin-top:28px;color:var(--lime);font-weight:600}
.u-dark-link:hover{text-decoration:underline;text-underline-offset:5px}
.u-dark-link .i{width:16px;height:16px}

/* work */
.u-work{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.u-work a{display:block}
.u-work .shot-wrap{border-radius:14px;border:1px solid var(--rule)}
.u-work .shot{aspect-ratio:4/3;object-position:left top}
.u-work a:hover .shot{transform:scale(1.02)}
.u-work .cap{display:block;padding-top:14px}
.u-work .cap b{display:block;font-size:17px;color:var(--ink);font-weight:600}
.u-work .cap>span{display:block;font-size:14.5px;color:var(--muted);margin-top:2px}
.u-work a:hover b{color:var(--signal-ink)}

/* how we work */
.u-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.u-steps li{background:var(--stone);border-radius:14px;padding:26px 24px}
.u-steps .n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--rule);font-size:15px;font-weight:600;color:var(--signal-ink)}
.u-steps h3{font-size:18px;font-weight:600;margin:18px 0 8px}
.u-steps p{font-size:15px;color:var(--text)}
.u-promises{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 40px;margin-top:48px}
.u-promises li{display:flex;gap:14px}
.u-promises .i{width:22px;height:22px;color:var(--green);margin-top:1px}
.u-promises b{display:block;font-size:17px;color:var(--ink);font-weight:600}
.u-promises span{display:block;font-size:15.5px;color:var(--text);margin-top:4px}

/* plans with the ribbon layer */
.u-plans{position:relative;overflow:hidden;padding:96px 0 104px;background:linear-gradient(180deg,#fff 0%,#f4fbf1 55%,#fff 100%)}
.u-ribbon{position:absolute;left:0;right:0;top:34%;width:100%;height:420px;pointer-events:none}
.u-plans .wrap{position:relative}
.u-plan-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:1200px;margin:0 auto}
.u-plan{position:relative;background:#fff;border:1px solid var(--rule);border-radius:16px;padding:32px 28px 28px;display:flex;flex-direction:column;box-shadow:0 10px 30px -18px rgba(0,0,0,.25)}
.u-plan.pop{border:2px solid var(--green)}
.u-tag{position:absolute;top:-1px;right:20px;transform:translateY(-50%);background:var(--lime);color:#181818;font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:999px}
.u-plan h3{font-size:24px;font-weight:600}
.u-plan .for{font-size:15px;color:var(--text);margin:10px 0 20px;min-height:68px}
.u-plan ul{display:grid;gap:10px;margin-bottom:28px;padding-top:18px;border-top:1px solid var(--rule)}
.u-plan li{display:flex;gap:10px;font-size:15px;line-height:1.45}
.u-plan li .i{width:17px;height:17px;margin-top:2px;color:var(--green)}
.u-plan .btn{margin-top:auto}
.u-plan .btn-line{border-color:var(--signal-ink);color:var(--signal-ink)}
.u-plan .btn-line:hover{background:var(--signal-ink);color:#fff}
.u-center-link{text-align:center;margin-top:32px}

/* reviews */
.u-reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.u-reviews figure{margin:0;height:100%;display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:14px;padding:28px}
.u-reviews blockquote{font-size:17px;line-height:1.6;color:var(--ink)}
.u-reviews figcaption{margin-top:auto;padding-top:20px;font-size:14.5px;color:var(--muted)}
.u-reviews figcaption b{display:block;color:var(--ink);font-weight:600}

/* insights */
.u-posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.u-posts a{display:flex;flex-direction:column;height:100%;padding:26px;border-radius:14px;background:var(--stone);transition:background .2s}
.u-posts a:hover{background:var(--tint)}
.u-posts .meta{font-size:13.5px;color:var(--muted)}
.u-posts h3{font-size:19px;font-weight:600;line-height:1.3;margin:10px 0 10px}
.u-posts p{font-size:15px;color:var(--text)}

/* faq */
.u-faq{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.u-faq h2{font-size:clamp(28px,3vw,40px);font-weight:500}
.u-faq>div>p{font-size:17px;color:var(--text);margin-top:16px}
.u-faq .faq{margin-top:0}
body .faq{border-top-color:var(--rule)}
body .faq summary::before,body .faq summary::after{background:var(--signal-ink)}

/* gradient banner */
.u-banner-wrap{padding:0 0 32px}
.u-banner{border-radius:24px;padding:56px 56px;color:#fff;background:radial-gradient(120% 160% at 100% 0%,#9be22a 0%,rgba(155,226,42,0) 46%),linear-gradient(100deg,#0b6b00 0%,#108a00 45%,#14a800 100%);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 40px;align-items:center}
.u-banner h2{color:#fff;font-size:clamp(28px,3.2vw,44px);font-weight:500;grid-column:1}
.u-banner p{grid-column:1;font-size:18px;color:#f1fff0}
.u-banner .actions{grid-column:2;grid-row:1/3;display:flex;flex-direction:column;align-items:center;gap:12px}
.u-banner .btn-light{color:#0b6b00;min-width:230px}
.u-banner-call{color:#fff;font-weight:600;font-size:15px}
.u-banner-call:hover{text-decoration:underline;text-underline-offset:4px}

/* footer: dark inset panel on the home page */
body .site-footer{background:transparent;padding:0 0 24px}
body .site-footer>.wrap{background:#181818;border-radius:24px;padding:56px 56px 28px;width:calc(100% - 48px);max-width:none}
body .site-footer .brand b span{color:var(--green)}

@media (max-width:1080px){
  body{--gut:24px}
  .u-hero-panel{min-height:0;padding:56px 40px 40px;background:linear-gradient(180deg,rgba(10,14,10,.55) 0%,rgba(10,14,10,.88) 70%),var(--hero) center/cover no-repeat #1d2a1d}
  .u-reviews,.u-posts{grid-template-columns:1fr}
  .u-results{grid-template-columns:1fr}
  .u-steps{grid-template-columns:1fr 1fr}
  .u-plan-cards{grid-template-columns:1fr;max-width:560px}
  .u-plan .for{min-height:0}
  .u-ribbon{top:20%}
  .u-faq{grid-template-columns:1fr;gap:32px}
  .u-dark{padding:48px 36px}
  .u-banner{grid-template-columns:1fr;padding:48px 40px}
  .u-banner .actions{grid-column:1;grid-row:auto;align-items:flex-start;margin-top:12px}
  body .site-footer>.wrap{padding:48px 32px 24px}
}
@media (max-width:760px){
  body{--gut:20px}
  .u-hero{padding-top:8px}
  .u-hero .wrap,.u-banner-wrap .wrap{padding-left:12px;padding-right:12px}
  body .site-footer>.wrap{padding:40px 20px 24px;width:calc(100% - 24px)}
  body .site-header>.wrap{padding:0 var(--gut)}
  .u-hero-panel{padding:40px 22px 24px;border-radius:18px}
  .u-hero-panel .lede{font-size:17px}
  .u-search{padding:16px;margin-top:28px}
  .u-search-form{flex-direction:column;border-radius:14px;gap:6px}
  .u-search-form input{min-height:48px}
  .u-sec{padding:64px 0}
  .u-sec-tight{padding-top:8px}
  .u-head{flex-direction:column;align-items:flex-start;margin-bottom:28px}
  .u-head-center{align-items:center}
  .u-work,.u-reviews,.u-posts,.u-steps,.u-promises{grid-template-columns:1fr}
  .u-dark{padding:36px 22px;border-radius:18px}
  .u-facts{gap:24px;flex-wrap:wrap}
  .u-facts dt{font-size:28px}
  .u-plans{padding:64px 0 72px}
  .u-banner{padding:40px 24px;border-radius:18px}
  .u-banner .btn-light{min-width:0;width:100%}
  .u-banner .actions{align-items:stretch;width:100%}
}

/* Home type scale measured from upwork.com (sizes kept; fonts changed to Bricolage Grotesque / Instrument Sans on 3 Nov 2026):
   h1 72/1.04 w550, h2 40/1.1 w550 +0.4px, h3 22–28 w550, nav 14 w500, body 16, small 14, buttons 16 w500 */
body{font-size:16px;line-height:1.5}
body h1,body h2,body h3{font-weight:550}
body .u-hero-panel h1{font-size:clamp(40px,5vw,72px);line-height:1.04;letter-spacing:0;font-weight:550}
body .u-head h2,body .u-dark h2,body .u-faq h2,body .u-banner h2{font-size:clamp(28px,2.8vw,40px);line-height:1.1;letter-spacing:.4px;font-weight:550}
body .u-plan h3{font-size:22px;line-height:1.15;letter-spacing:.3px;font-weight:550}
body .u-steps h3,body .u-posts h3,body .u-work .cap b,body .u-promises b{font-size:18px;line-height:1.25;letter-spacing:.2px;font-weight:550}
body .u-results .what{font-size:22px;line-height:1.2;font-weight:550;letter-spacing:.3px}
body .u-quote blockquote{font-size:clamp(22px,2.2vw,28px);line-height:1.25;letter-spacing:.3px}
body .u-hero-panel .lede{font-size:18px;line-height:1.5}
body .primary-nav a{font-size:14px;font-weight:500;letter-spacing:.4px}
body .nav-phone{font-size:14px;font-weight:500;letter-spacing:.4px}
body .btn{font-size:16px;font-weight:500;letter-spacing:.3px}
body .nav-cta .btn{font-size:14px}
body .u-steps p,body .u-promises span,body .u-reviews blockquote,body .u-posts p,body .u-plan .for,body .u-plan li,body .faq details p,body .u-faq>div>p,body .u-head-center p{font-size:16px;line-height:1.5}
body .faq summary{font-size:18px;font-weight:500}
body .site-footer{font-size:14px}
body .site-footer h2{font-size:14px;font-weight:500}
body .site-footer ul{gap:6px}
body .link{font-size:16px;font-weight:500}

/* =========================================================
   Inner pages in the same language as the home page:
   rounded inset panels, cards, pill controls, no side label column
   ========================================================= */
h1,h2,h3{font-weight:550}
.title{font-size:clamp(28px,2.8vw,40px);line-height:1.1;letter-spacing:.4px;font-weight:550;max-width:24em}
.intro{font-size:17px;line-height:1.55;margin-top:16px}

/* page header: soft tinted rounded panel */
.page-head{background:none;border:0;padding:16px 0 0}
.page-head .wrap{display:block}
.page-head .wrap{position:relative}
.page-head .wrap::before{content:"";position:absolute;inset:0 var(--gut);border-radius:24px;z-index:-1;
  background:radial-gradient(70% 120% at 100% 0%,rgba(210,255,0,.35) 0%,rgba(210,255,0,0) 55%),linear-gradient(135deg,#eef7ea 0%,#f6faf3 60%,#fbfdf9 100%)}
.page-head{isolation:isolate}
.page-head .wrap{padding:44px calc(var(--gut) + 56px) 64px}
.crumbs{margin-bottom:40px;font-size:14px}
.crumbs a{text-decoration:none;color:var(--muted)}
.crumbs a:hover{color:var(--signal-ink);text-decoration:underline}
.page-head h1{font-size:clamp(36px,4.4vw,60px);line-height:1.06;letter-spacing:0;max-width:16em}
.page-head .lede{font-size:18px;line-height:1.55;color:var(--text);max-width:40em;margin-top:20px}
.page-head .head-aside{display:inline-block;margin-top:32px;max-width:520px;background:#fff;border:1px solid #dfeadb;border-radius:14px;padding:16px 20px;font-size:15px;border-top:1px solid #dfeadb}
.page-head .head-aside b{font-size:15px;font-weight:600}

/* sections: label sits above the title, content uses the full width */
.sec{border-top:0;padding:88px 0}
.sec>.wrap:not(.svc-layout):not(.contact-layout):not(.start-layout){display:block}
.sec-label{display:block;font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:0;margin-bottom:12px}
.sec-label::before{display:none}
.sec.first{padding-top:72px}
.sec.stone{background:none}
.sec.stone>.wrap{background:var(--stone);border-radius:24px;padding:64px 56px;width:calc(100% - 2*var(--gut));max-width:calc(var(--wrap) - 2*var(--gut))}
.sec.stone+.sec,.sec+.sec.stone{padding-top:24px}
.sec-foot{margin-top:36px}
.link{text-decoration:none;color:var(--signal-ink);font-weight:500}
.link:hover{text-decoration:underline;text-underline-offset:5px}
.inline-link{color:var(--signal-ink)}

/* about */
.story{max-width:760px}
.story p{font-size:17px;line-height:1.65}
.story .quote{border-left-color:var(--green);font-weight:550;font-size:clamp(22px,2.2vw,28px)}
.numbers{border-top:0;gap:16px;margin-top:36px}
.numbers div,.numbers div+div{background:#fff;border:1px solid var(--rule);border-radius:14px;padding:22px}
.numbers dt{color:var(--signal-ink);font-weight:550}
.timeline{border-top:0;margin-top:36px;display:grid;gap:12px}
.timeline>li{border:1px solid var(--rule);border-radius:14px;padding:26px 28px}
.timeline .yr{font-size:20px;font-weight:550;color:var(--signal-ink)}
.timeline h3{font-size:19px}
.cols3{border-top:0;gap:16px;margin-top:36px}
.cols3>div,.cols3>div+div{background:#fff;border:1px solid var(--rule);border-radius:14px;padding:26px}
.cols3 h3{font-size:19px}

/* services */
.svc-nav p{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.svc-nav ul{border-left:0;display:grid;gap:4px}
.svc-nav a{border:0;margin:0;padding:9px 14px;border-radius:999px;color:var(--text)}
.svc-nav a:hover{background:var(--stone);color:var(--ink)}
.svc-nav a.on{background:var(--ink);color:#fff}
.svc-nav .btn{width:100%}
.svc-group>header{border-bottom:0;padding-bottom:8px}
.svc-group>header h2{font-size:clamp(28px,2.8vw,40px);letter-spacing:.4px}
.svc-group+.svc-group{margin-top:72px}
.svc-item{border:1px solid var(--rule);border-radius:16px;padding:30px 32px;margin-top:16px;transition:border-color .2s}
.svc-item:hover{border-color:#bfe0b6}
.svc-item h3{font-size:22px}
.svc-item h4{font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.ticks li::before{width:14px;height:14px;top:.2em;background:none;border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314a800' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.2 4.2L19 7'/%3E%3C/svg%3E") center/contain no-repeat}
.ticks li{padding-left:24px}

/* work */
.shot-wrap{border-radius:14px}
.project .shot{aspect-ratio:4/3;object-position:left top}
.project h2,.project h3{font-size:18px;font-weight:550}
.project .dom{text-decoration:none;color:var(--signal-ink)}
.work-grid.two>li{grid-column:span 4}

/* reviews */
.case,.case:first-child{border:1px solid var(--rule);border-radius:20px;padding:28px;margin-top:20px}
.case:first-child{margin-top:36px}
.case .no-shot{background:#181818;border-radius:14px}
.case .no-shot b{color:var(--lime)}
.case blockquote{border-left-color:var(--green)}
.case dd a{text-decoration-color:#bfe0b6}
.case .num{color:var(--signal-ink)}
.quotes{border-top:0;gap:16px;margin-top:36px}
.quotes figure{background:#fff;border:1px solid var(--rule);border-radius:14px;padding:26px}
.quotes blockquote{font-size:17px}

/* plans */
.plans{border:0;background:none;gap:20px;margin-top:40px}
.plan,.plan+.plan{background:#fff;border:1px solid var(--rule);border-radius:16px;box-shadow:0 10px 30px -18px rgba(0,0,0,.25)}
.plan.pop{border:2px solid var(--green);position:relative}
.plan .tier{font-weight:500}
.plan .tag{background:var(--lime);color:#181818;padding:4px 10px;border-radius:999px;font-size:12.5px}
.plan h3{font-size:24px}
.plan li .i{color:var(--green)}
.plan.pop .btn-dark{background:var(--cta)}
.plan.pop .btn-dark:hover{background:var(--cta-hover)}
.plan .btn-line{border-color:var(--signal-ink);color:var(--signal-ink)}
.plan .btn-line:hover{background:var(--signal-ink);color:#fff}
.compare-wrap{border-radius:16px;margin-top:36px}
.compare thead th{background:var(--stone)}
.compare .yes .i{color:var(--green)}

/* faq, forms, contact */
.faq{border-top:1px solid var(--rule)}
.faq summary::before,.faq summary::after{background:var(--signal-ink)}
.sec-body>.faq,.sec .faq{margin-top:32px}
.contact-info dl{border-top:0;display:grid;gap:12px}
.contact-info dl>div{border:1px solid var(--rule);border-radius:14px;padding:18px 22px}
.contact-info dd{font-weight:500}
.form-panel{background:var(--stone);border-radius:24px}
.f input,.f select,.f textarea{border-radius:10px;border-color:#d6dbd3}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(20,168,0,.18)}
.checks input{accent-color:var(--green)}
.form-status{border-radius:12px}
.start-aside h2{border-bottom:0;padding-bottom:4px}
.start-aside ol li{border-bottom:0;background:#fff;border:1px solid var(--rule);border-radius:12px;padding:14px 16px;margin-top:10px}
.start-aside ol li::before{color:var(--signal-ink)}
.start-aside .call a:hover{color:var(--signal-ink)}

/* blog */
.post-list{border-top:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.post-row,.post-row.lead{display:flex;flex-direction:column;gap:12px;border:1px solid var(--rule);border-radius:16px;padding:28px;background:#fff;transition:border-color .2s}
.post-row:hover{border-color:#bfe0b6}
.post-row .meta{display:flex;flex-wrap:wrap;gap:4px 14px;padding:0;font-size:14px}
.post-row .meta .cat{color:var(--signal-ink)}
.post-row h2,.post-row h3{font-size:22px}
.post-row.lead{grid-column:1/-1;background:#181818;border-color:#181818;padding:40px}
.post-row.lead h2{font-size:clamp(26px,2.8vw,36px)}
.post-row.lead h2 a,.post-row.lead p{color:#fff}
.post-row.lead p{color:#cfcfcf}
.post-row.lead .meta{color:#b0b0b0}
.post-row.lead .meta .cat{color:var(--lime)}
.post-row.lead h2 a:hover{color:var(--lime)}
.sec.stone .post-row{background:#fff}

/* article and legal */
.article{padding:64px 0 88px}
.prose li::marker{color:var(--green)}
.article-cta{border-top:0;background:var(--tint);border-radius:16px;padding:28px 32px}
.legal-nav{gap:8px;margin-top:28px}
.legal-nav a{border:1px solid #d6dfd2;border-radius:999px;padding:8px 16px;background:#fff;color:var(--text)}
.legal-nav a[aria-current="page"]{background:var(--ink);color:#fff;border-color:var(--ink)}

/* 404 */
.notfound ul{border-top:0;display:grid;gap:10px}
.notfound li a{border:1px solid var(--rule);border-radius:12px;padding:16px 20px}
.notfound li a:hover{border-color:var(--green)}
.notfound .code{color:var(--signal-ink)}

@media (max-width:1080px){
  .page-head .wrap{padding:36px calc(var(--gut) + 32px) 48px}
  .sec.stone>.wrap{padding:48px 32px}
  .work-grid.two>li{grid-column:span 6}
  .post-list{grid-template-columns:1fr}
  .svc-nav{border-bottom:0}
  .svc-nav ul{gap:6px}
  .svc-nav a{border:1px solid var(--rule);padding:8px 14px}
  .svc-nav a.on,.svc-nav a:hover{border-color:var(--ink)}
}
@media (max-width:760px){
  .page-head .wrap::before{inset:0 12px;border-radius:18px}
  .page-head .wrap{padding:28px 36px 40px}
  .sec{padding:64px 0}
  .sec.stone>.wrap{padding:36px 22px;width:calc(100% - 24px);border-radius:18px}
  .svc-item{padding:24px 20px}
  .case,.case:first-child{padding:20px}
  .post-row,.post-row.lead{padding:24px}
  .form-panel{margin:0;border-radius:18px}
}
.svc-nav .btn{display:flex;align-items:center;justify-content:center;border-radius:999px;padding:0 20px}
@media (max-width:1080px){
  .svc-nav ul{display:flex;gap:8px}
  .svc-nav a{white-space:nowrap}
}
@media (max-width:760px){
  .work-grid.two>li{grid-column:1/13}
}
@media (max-width:1080px){.svc-nav .btn{display:none}}

/* logo image */
.brand img{display:block;height:60px;width:auto}
.foot-brand .brand img{height:64px}
@media (max-width:760px){.brand img{height:48px}}

/* home polish: one rhythm between sections, one-line client row */
.u-sec{padding:64px 0}
.u-sec-tight{padding-top:64px}
.u-plans{margin:24px 0}
.u-banner-wrap{padding-top:48px}
.u-head{margin-bottom:32px}
@media (max-width:760px){.u-sec,.u-sec-tight{padding:48px 0}}

/* project cards: location, summary and verified site features */
.project .cap{padding-top:16px}
.project .loc{font-size:14px;color:var(--signal-ink);font-weight:500;margin-top:4px}
.project .sum{font-size:15px;line-height:1.5;color:var(--text);margin-top:6px}
.project .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.project .tags li{font-size:12.5px;line-height:1;padding:6px 10px;border-radius:999px;background:var(--stone);border:1px solid var(--rule);color:var(--text)}
.project .dom{margin-top:12px;font-size:14px}
.project a:hover .tags li{border-color:#cfe6c7}
.u-work-grid{margin-top:0}
.u-work-grid>li{grid-column:span 4}
@media (max-width:1080px){.u-work-grid>li{grid-column:span 6}.u-work-grid>li:nth-child(3){display:none}}
@media (max-width:760px){.u-work-grid>li{grid-column:1/13}.u-work-grid>li:nth-child(3){display:block}}

/* project cards: same bordered panel as the home "Built for" cards */
.work-grid{gap:20px}
.project{display:flex}
.project>a{display:flex;flex-direction:column;width:100%;background:#fff;border:1px solid var(--rule);border-radius:16px;overflow:hidden;transition:border-color .2s,box-shadow .25s,transform .25s}
.project .shot-wrap{border:0;border-bottom:1px solid var(--rule);border-radius:0}
.project .shot{aspect-ratio:16/11}
.project .cap{display:flex;flex-direction:column;align-items:flex-start;flex:1;padding:22px 24px 24px}
.project h2,.project h3{font-size:20px;line-height:1.2;letter-spacing:.2px;font-weight:550;color:var(--ink)}
.project .dom{align-self:stretch;margin-top:auto;padding-top:16px;font-weight:500;color:var(--signal-ink)}
.project .tags{margin-bottom:18px}
.project .dom{border-top:1px solid var(--rule)}
.project .dom .i{transition:transform .2s}
.project>a:hover{border-color:#c9c9c9;box-shadow:0 14px 34px rgba(24,24,24,.08);transform:translateY(-3px)}
.project>a:hover .shot{transform:scale(1.04)}
.project>a:hover h2,.project>a:hover h3{color:var(--ink)}
.project>a:hover .dom .i{transform:translate(2px,-2px)}
.project>a:focus-visible{outline:3px solid var(--green);outline-offset:3px}
@media (max-width:1100px){.project .cap{padding:18px 18px 20px}.project h2,.project h3{font-size:18px}}

/* home polish 2: how we work, reviews, FAQ */
body .u-steps{gap:20px}
body .u-steps li{position:relative;background:#fff;border:1px solid var(--rule);border-radius:16px;padding:26px 24px 28px}
body .u-steps .n{position:relative;z-index:1;width:40px;height:40px;background:var(--green);border:0;color:#fff;font-size:16px}
body .u-steps li:not(:last-child)::after{content:"";position:absolute;top:46px;left:72px;right:-21px;height:1px;background:repeating-linear-gradient(90deg,#9fd88f 0 6px,transparent 6px 12px)}
body .u-steps h3{font-size:20px;margin:22px 0 8px}
.u-promise-panel{margin-top:24px;background:var(--stone);border-radius:16px;padding:32px}
.u-promise-panel h3{font-size:18px;font-weight:550;letter-spacing:.2px;color:var(--ink)}
body .u-promises{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:20px}
body .u-promises li{flex-direction:column;gap:14px}
.u-promises .ck{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#fff;border:1px solid #cfe6c7}
body .u-promises .ck .i{width:16px;height:16px;margin:0;color:var(--signal-ink)}
body .u-promises b{font-size:17px}
body .u-promises span span,body .u-promises div span{font-size:15px;margin-top:6px}

body .u-reviews{gap:20px}
body .u-reviews figure{border-radius:16px;padding:32px;background:#fff}
.u-reviews .q{width:30px;height:23px;fill:var(--green);margin-bottom:20px}
body .u-reviews blockquote{font-size:18px;line-height:1.55;color:var(--ink)}
body .u-reviews figcaption{margin-top:auto;padding-top:24px}
body .u-reviews figcaption::before{content:"";display:block;height:1px;background:var(--rule);margin-bottom:18px}
body .u-reviews figcaption span{display:block;margin-top:2px}

body .u-faq{gap:48px}
.u-faq-side{position:sticky;top:120px;background:var(--stone);border-radius:16px;padding:40px}
body .u-faq .u-faq-side>p{margin-top:16px}
.u-faq-side .acts{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:28px}
.u-faq-side .btn .i{width:18px;height:18px}
body .u-faq .faq{display:grid;gap:12px;border-top:0}
body .u-faq .faq details{border:1px solid var(--rule);border-radius:14px;background:#fff;transition:border-color .2s,background-color .2s}
body .u-faq .faq details[open]{border-color:#cfe6c7;background:#f6fbf4}
body .u-faq .faq summary{padding:22px 72px 22px 24px}
body .u-faq .faq summary::before,body .u-faq .faq summary::after{right:33px;width:12px}
body .u-faq .faq details>summary{background:radial-gradient(circle at calc(100% - 39px) 50%,#fff 0 15px,#cfe6c7 15px 16px,transparent 16.5px) no-repeat}
body .u-faq .faq details p{padding:0 24px 24px}
body .u-faq .faq summary:hover{color:var(--signal-ink)}
@media (max-width:1100px){body .u-promises{grid-template-columns:repeat(2,minmax(0,1fr))}body .u-steps li::after{display:none}}
@media (max-width:900px){.u-faq-side{position:static;padding:28px}}
@media (max-width:640px){body .u-promises{grid-template-columns:1fr;gap:18px}body .u-promises li{flex-direction:row}.u-promises .ck{flex:none}.u-promise-panel{padding:24px}body .u-reviews figure{padding:24px}body .u-faq .faq summary{padding:18px 60px 18px 18px;font-size:16.5px}body .u-faq .faq summary::before,body .u-faq .faq summary::after{right:27px}body .u-faq .faq details>summary{background-position:0 0;background-image:radial-gradient(circle at calc(100% - 33px) 50%,#fff 0 15px,#cfe6c7 15px 16px,transparent 16.5px)}body .u-faq .faq details p{padding:0 18px 20px}}

/* home polish 3: hero proof card + one section rhythm (128px desktop, 96px phone) */
.u-hero-proof{position:absolute;right:56px;bottom:52px;display:flex;align-items:center;gap:14px;padding:16px 20px 16px 16px;background:#fff;border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.28);color:var(--ink);transition:transform .25s}
.u-hero-proof:hover{transform:translateY(-3px)}
.u-hero-proof .up{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--lime);color:var(--ink)}
.u-hero-proof .up .i{width:20px;height:20px;transform:rotate(-45deg)}
.u-hero-proof b{display:block;font-size:17px;font-weight:600;line-height:1.25}
.u-hero-proof b+span{display:block;margin-top:3px;font-size:13.5px;color:var(--muted);white-space:nowrap}
.u-hero-panel>.u-hero-proof{animation-delay:.3s}
@media (max-width:1180px){.u-hero-proof{display:none}}
.u-plans{margin:0;padding:64px 0}
.home .u-banner-wrap{padding-top:64px}
@media (max-width:760px){.u-plans{padding:48px 0}.home .u-banner-wrap{padding-top:48px}}


/* services polish */
.page-head.head-split .wrap{display:grid;grid-template-columns:minmax(0,1fr) 360px;grid-template-rows:auto auto auto 1fr;column-gap:56px;align-items:start}
.head-split .wrap>*{grid-column:1}
.head-split .crumbs{grid-column:1/-1}
body .head-split .head-aside{grid-column:2;grid-row:2/5;align-self:center;display:block;margin:0;max-width:none;padding:28px;border:0;border-radius:16px;box-shadow:0 18px 40px rgba(24,24,24,.08);font-size:15px;line-height:1.55}
body .head-split .head-aside b{font-size:18px;font-weight:600;margin-bottom:8px}
.head-split .head-aside .btn{display:flex;width:100%;margin-top:20px;border-radius:999px}
.svc-nav a{display:flex;align-items:center;justify-content:space-between;gap:12px}
.svc-nav .n{min-width:26px;height:22px;padding:0 7px;border-radius:999px;background:var(--stone);color:var(--muted);font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;justify-content:center}
.svc-nav a.on .n{background:rgba(255,255,255,.16);color:#fff}
.svc-help{margin-top:28px;background:var(--stone);border-radius:16px;padding:24px}
.svc-help b{display:block;font-size:16px;font-weight:600;color:var(--ink)}
body .svc-help p{margin:6px 0 0;font-size:14.5px;line-height:1.5;color:var(--text);letter-spacing:0;text-transform:none;font-weight:400}
body .svc-help .btn{margin-top:18px}
.svc-help .tel{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font-size:15px;font-weight:600;color:var(--ink)}
.svc-help .tel .i{width:16px;height:16px;color:var(--signal-ink)}
.svc-help .tel:hover{color:var(--signal-ink)}
.svc-group>header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px}
.svc-group>header p{flex-basis:100%;margin-top:2px}
.svc-group .count{font-size:14px;font-weight:500;color:var(--muted);white-space:nowrap}
.svc-item{transition:border-color .2s,box-shadow .25s}
.svc-item:hover{border-color:#c9c9c9;box-shadow:0 14px 34px rgba(24,24,24,.06)}
.svc-item h3{font-weight:550;letter-spacing:-.01em}
.svc-item .desc{display:flex;flex-direction:column;align-items:flex-start}
.svc-item .desc .link .i{transition:transform .2s}
.svc-item .desc .link:hover .i{transform:translateX(3px)}
.svc-item .incl{background:var(--stone);border-radius:12px;padding:20px 22px;align-self:start}
@media (max-width:1180px){.page-head.head-split .wrap{grid-template-columns:minmax(0,1fr) 320px;column-gap:40px}}
@media (max-width:1080px){
  .svc-help{display:none}
  .svc-nav a{justify-content:flex-start;gap:8px}
}
@media (max-width:900px){
  .page-head.head-split .wrap{display:block}
  body .head-split .head-aside{margin-top:28px;max-width:440px}
}
@media (max-width:760px){
  .svc-item .incl{padding:18px 18px}
  body .head-split .head-aside{padding:22px}
}

/* our work polish */
body .head-split .head-aside .big{order:-1;display:block;font-size:56px;line-height:1;font-weight:600;letter-spacing:-.03em;color:var(--signal-ink);margin-bottom:6px}
.work-grid.two>li.work-next{grid-column:span 8}
.head-split .head-aside{display:flex!important;flex-direction:column}
.work-next{display:flex;flex-direction:column;justify-content:center;gap:32px;background:var(--ink);color:#fff;border-radius:16px;padding:40px;position:relative;overflow:hidden;isolation:isolate}
.work-next::after{content:"";position:absolute;right:-160px;top:-160px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(20,168,0,.35),transparent 68%);z-index:-1}
body .work-next h2,body .work-next h3{font-size:clamp(30px,3vw,44px);line-height:1.1;font-weight:600;color:#fff}
body .work-next p{margin-top:14px;max-width:46ch;font-size:16.5px;line-height:1.55;color:rgba(255,255,255,.78)}
.work-next .acts{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.work-next .btn{border-radius:999px}
.work-next .tel{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:#fff}
.work-next .tel .i{width:18px;height:18px;color:var(--lime)}
.work-next .tel:hover{color:var(--lime)}
.cols3.ticked>div{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.cols3.ticked .ck{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#f1f8ee;border:1px solid #cfe6c7;margin-bottom:18px}
.cols3.ticked .ck .i{width:18px;height:18px;color:var(--signal-ink)}
.cols3.ticked h3{font-weight:550}
@media (max-width:1080px){.work-grid.two>li.work-next{grid-column:span 6}}
@media (max-width:760px){.work-grid.two>li.work-next{grid-column:1/13}.work-next{padding:28px 24px}}

/* about + contact polish */
.story-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:72px;align-items:start}
.story-grid .story{max-width:none}
.story-quote{position:sticky;top:120px;background:var(--ink);color:#fff;border-radius:16px;padding:36px;overflow:hidden;isolation:isolate}
.story-quote::after{content:"";position:absolute;right:-120px;top:-120px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(20,168,0,.32),transparent 68%);z-index:-1}
.story-quote .q{display:block;width:34px;height:26px;fill:var(--lime);margin-bottom:22px}
body .story-quote p{font-size:clamp(24px,2.2vw,30px);line-height:1.3;font-weight:550;letter-spacing:-.01em;color:#fff;margin:0;max-width:none}
.story-quote .link{display:inline-flex;align-items:center;gap:8px;margin-top:28px;font-weight:600;color:var(--lime)}
.story-quote .link .i{width:18px;height:18px;transition:transform .2s}
.story-quote .link:hover .i{transform:translateX(3px)}
.timeline>li{grid-template-columns:160px minmax(0,1fr);column-gap:32px;transition:border-color .2s,box-shadow .25s}
.timeline>li:hover{border-color:#c9c9c9;box-shadow:0 14px 34px rgba(24,24,24,.06)}
.timeline .yr,.timeline .body{grid-column:auto}
.timeline .yr{display:inline-flex;align-items:center;gap:10px;align-self:start;font-size:22px}
.timeline .yr::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px #e3f3de}
.timeline h3{font-weight:550}
.timeline .marks{gap:8px;margin-top:16px}
.timeline .marks li{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--stone);font-size:13.5px;color:var(--text)}
.timeline .marks li:not(:last-child)::after{display:none}
.timeline .marks li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}
.contact-info{position:sticky;top:120px;align-self:start}
.contact-info dl>div{position:relative;padding:18px 22px 18px 82px;transition:border-color .2s}
.contact-info dl>div:hover{border-color:#bfe0b6}
.contact-info .ic{position:absolute;left:22px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#f1f8ee;border:1px solid #cfe6c7;color:var(--signal-ink)}
.contact-info .ic .i{width:19px;height:19px}
body .contact-info .note{margin-top:16px;background:var(--stone);border-radius:14px;padding:18px 22px;font-size:15px;line-height:1.55}
@media (max-width:1100px){.story-grid{grid-template-columns:minmax(0,1fr) 320px;gap:48px}}
@media (max-width:900px){
  .story-grid{grid-template-columns:1fr;gap:36px}
  .story-quote{position:relative}
  .contact-info{position:static}
}
@media (max-width:760px){
  .timeline>li{grid-template-columns:1fr;row-gap:12px}
  .story-quote{padding:28px 24px}
  .contact-info dl>div{padding-left:76px}
}
@media (max-width:420px){.contact-info dd{font-size:16px}.contact-info dl>div{padding:16px 16px 16px 66px}.contact-info .ic{left:16px;width:36px;height:36px}.contact-info .ic .i{width:17px;height:17px}}

/* results polish */
#cases-title{scroll-margin-top:120px}
.case,.case:first-child{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:48px;align-items:stretch;transition:border-color .2s,box-shadow .25s}
.case:hover{border-color:#c9c9c9;box-shadow:0 14px 34px rgba(24,24,24,.06)}
.case .media,.case .body{grid-column:auto}
.case .media{min-height:340px}
.case .media .shot-wrap{height:100%}
.case .media .shot{height:100%;aspect-ratio:auto;object-position:left top}
.case .shot-wrap:hover .shot{transform:scale(1.02)}
.case .body{display:flex;flex-direction:column;align-items:flex-start;padding:8px 8px 4px 0}
.case .num{display:inline-flex;padding:5px 12px;border-radius:999px;background:#f1f8ee;border:1px solid #cfe6c7;font-size:13px}
.case h3{margin-top:14px;font-weight:550;letter-spacing:-.01em}
.case blockquote{border-left:0;padding-left:0;margin-top:20px}
.case blockquote .q{display:block;width:26px;height:20px;fill:var(--green);margin-bottom:10px}
body .case blockquote p{font-size:17.5px;line-height:1.55;color:var(--ink)}
.case dl{align-self:stretch;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:auto;padding-top:24px}
.case dl{display:grid}
.case dt{display:none}
.case dd{background:var(--stone);border-radius:12px;padding:12px 16px;font-size:15px;color:var(--ink);font-weight:500;min-width:0;overflow-wrap:anywhere}
.case dd::before{display:block;font-size:12.5px;font-weight:500;color:var(--muted);margin-bottom:2px}
.case dd:nth-of-type(1)::before{content:"Location"}
.case dd:nth-of-type(2)::before{content:"Industry"}
.case dd:nth-of-type(3)::before{content:"Phone"}
.case dd:nth-of-type(4)::before{content:"Website"}
.case dd a{text-decoration:none;color:var(--signal-ink)}
.case dd a:hover{text-decoration:underline}
.case .no-shot{height:100%;aspect-ratio:auto;justify-content:center;padding:40px;position:relative;overflow:hidden;isolation:isolate;color:rgba(255,255,255,.78)}
.case .no-shot::after{content:"";position:absolute;right:-140px;top:-140px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(20,168,0,.35),transparent 68%);z-index:-1}
.case .no-shot b{font-size:clamp(96px,10vw,148px)}
.case .no-shot span{font-size:18px;max-width:20ch}
.quotes figure{display:flex;flex-direction:column;padding:32px}
.quotes .q{width:30px;height:23px;fill:var(--green);margin-bottom:18px}
.quotes figcaption{margin-top:auto;padding-top:20px;border-top:1px solid var(--rule)}
.quotes blockquote{margin-bottom:20px}
.quotes figcaption b{display:block}
@media (max-width:900px){
  .case,.case:first-child{grid-template-columns:1fr;row-gap:24px}
  .case .media{min-height:0}
  .case .media .shot{aspect-ratio:16/10;height:auto}
  .case .no-shot{aspect-ratio:auto;padding:32px 28px}
  .case .body{margin-top:0;padding:0}
}
@media (max-width:760px){
  .case,.case:first-child{padding:16px 16px 22px}
  .case .body{padding:0 4px}
  .quotes figure{padding:24px}
}
@media (max-width:420px){.case dl{grid-template-columns:1fr}}

/* plans + faq + blog polish */
body .faq{display:grid;gap:12px;border-top:0}
body .faq details{border:1px solid var(--rule);border-radius:14px;background:#fff;transition:border-color .2s,background-color .2s}
body .faq details:hover{border-color:#c9c9c9}
body .faq details[open]{border-color:#cfe6c7;background:#f6fbf4}
body .faq summary{padding:22px 72px 22px 24px}
body .faq summary::before,body .faq summary::after{right:33px;width:12px}
body .faq details>summary{background:radial-gradient(circle at calc(100% - 39px) 50%,#fff 0 15px,#cfe6c7 15px 16px,transparent 16.5px) no-repeat}
body .faq details p{padding:0 24px 24px}
.compare thead th.pop{background:#eaf6e5;color:var(--signal-ink)}
.compare thead th .tag{display:block;width:max-content;margin:6px auto 0;padding:3px 10px;border-radius:999px;background:var(--lime);color:var(--ink);font-size:11.5px;font-weight:600}
.compare td.pop{background:#f6fbf4}
.post-row{position:relative;transition:border-color .2s,box-shadow .2s,transform .2s}
.post-row h2 a::after,.post-row h3 a::after{content:"";position:absolute;inset:0;border-radius:16px}
.post-row:hover{border-color:#c9c9c9;box-shadow:0 14px 34px rgba(24,24,24,.08);transform:translateY(-2px)}
.post-row.lead:hover{border-color:#181818;box-shadow:0 18px 40px rgba(24,24,24,.18)}
.post-row:hover h2 a{color:var(--signal-ink)}
.post-row.lead:hover h2 a{color:var(--lime)}
@media (prefers-reduced-motion:reduce){.post-row:hover{transform:none}}
@media (max-width:760px){
  body .faq summary{padding:18px 64px 18px 18px}
  body .faq summary::before,body .faq summary::after{right:27px}
  body .faq details>summary{background-position:0 0;background-image:radial-gradient(circle at calc(100% - 33px) 50%,#fff 0 15px,#cfe6c7 15px 16px,transparent 16.5px)}
  body .faq details p{padding:0 18px 20px}
}
.sec>.wrap.u-faq:not(.svc-layout):not(.contact-layout):not(.start-layout){display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
@media (max-width:1080px){.sec>.wrap.u-faq:not(.svc-layout):not(.contact-layout):not(.start-layout){grid-template-columns:1fr}body .sec .u-faq-side{position:static}}
/* the hidden screen-reader labels in the table are absolutely positioned; keep them inside the scroll box */
.compare-wrap{position:relative}
.compare-wrap:focus-visible{outline:2px solid var(--signal-ink);outline-offset:3px}

/* =========================================================
   v3 (review call, 2 Nov 2026): own fonts, glass header, logo intro, flip animations,
   live-site strip, client videos, case-study details. All motion is off for reduced motion.
   ========================================================= */
:root{interpolate-size:allow-keywords}
html:root body :is(h1,h2,h3,h4){font-family:var(--display);letter-spacing:-.022em;font-weight:600}
html:root body .u-hero-panel h1{font-weight:650;letter-spacing:-.03em;line-height:1}

/* header: floating glass bar */
body .site-header{position:sticky;top:0;z-index:60;background:transparent;border:0;padding:12px 16px 0;pointer-events:none}
body .site-header>.wrap.nav{pointer-events:auto;position:relative;max-width:1400px;min-height:68px;margin:0 auto;padding:0 10px 0 24px;gap:20px;border-radius:999px;
  background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(24,24,24,.08);box-shadow:0 10px 30px -18px rgba(24,24,24,.35);transition:box-shadow .3s,background-color .3s}
body .site-header.scrolled>.wrap.nav{background:rgba(255,255,255,.66);box-shadow:0 16px 40px -18px rgba(24,24,24,.38)}
body .brand img{height:46px}
body .primary-nav .menu{gap:4px}
body .primary-nav a{padding:10px 16px;border-radius:999px;transition:background-color .2s,color .2s}
body .primary-nav a:hover{background:rgba(24,24,24,.06);color:var(--ink)}
body .primary-nav .current-menu-item>a,body .primary-nav .current_page_item>a,body .primary-nav .current_page_parent>a,body .primary-nav a[aria-current="page"]{background:var(--ink);color:#fff}
body .nav-phone{display:inline-flex;align-items:center;gap:8px}
body .nav-phone .i{width:16px;height:16px;color:var(--signal-ink)}
body .nav-cta .btn{min-height:48px;padding:0 22px}
body .burger{border-radius:999px;background:#fff}
@media (max-width:1080px){
  body .primary-nav{position:absolute;top:calc(100% + 10px);left:0;right:0;border:1px solid rgba(24,24,24,.08);border-radius:22px;padding:10px 14px 16px;
    background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);box-shadow:0 24px 50px -20px rgba(24,24,24,.35);max-height:calc(100vh - 110px)}
  body .primary-nav.open{animation:menu-in .3s cubic-bezier(.2,.7,.2,1)}
  body .primary-nav a{padding:14px 14px;border:0;border-radius:14px;font-size:17px}
  body .primary-nav .menu{gap:2px}
}
@keyframes menu-in{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
@media (max-width:760px){
  body .site-header{padding:8px 10px 0}
  body .site-header>.wrap.nav{min-height:60px;padding:0 8px 0 16px}
  body .brand img{height:40px}
}

/* logo intro (home, once per visit): logo wipes in, bar fills, the white curtain lifts */
.curtain{display:none}
.vs-intro .curtain{display:flex;position:fixed;inset:0;z-index:300;flex-direction:column;align-items:center;justify-content:center;gap:28px;background:#fff;
  clip-path:inset(0 0 0 0);animation:intro-out .75s cubic-bezier(.76,0,.24,1) 1.3s forwards}
.curtain-logo img{width:min(420px,78vw);height:auto;clip-path:inset(0 100% 0 0);transform:translateY(10px);animation:intro-logo .9s cubic-bezier(.2,.7,.2,1) .15s forwards}
.curtain-bar{position:relative;width:min(180px,40vw);height:3px;border-radius:3px;background:var(--stone-2);overflow:hidden}
.curtain-bar::after{content:"";position:absolute;inset:0;background:var(--green);transform-origin:left;transform:scaleX(0);animation:intro-bar 1.05s cubic-bezier(.6,0,.2,1) .2s forwards}
@keyframes intro-logo{to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes intro-bar{to{transform:scaleX(1)}}
@keyframes intro-out{to{clip-path:inset(0 0 100% 0);visibility:hidden}}
.vs-intro .u-hero-panel{animation:hero-in 1.1s cubic-bezier(.2,.7,.2,1) 1.45s both}
.vs-intro .u-hero-panel>*{animation-delay:1.75s}
.vs-intro .u-hero-panel>:nth-child(2){animation-delay:1.85s}
.vs-intro .u-hero-panel>:nth-child(3){animation-delay:1.95s}
.vs-intro .u-hero-panel>:nth-child(4){animation-delay:2.05s}
@keyframes hero-in{from{transform:scale(.965);opacity:.4}to{transform:none;opacity:1}}

/* hero: split-flap word */
.h1-vis{display:block}
.flipword{display:block;color:var(--lime);white-space:nowrap;perspective:700px;min-height:1em}
.flipword .ch{display:inline-block;transform-origin:50% 55%;backface-visibility:hidden;white-space:pre}
.flipword .ch.out{animation:flap-out .26s cubic-bezier(.5,0,.75,0) both;animation-delay:calc(var(--i) * 22ms)}
.flipword .ch.in{animation:flap-in .6s cubic-bezier(.2,.8,.25,1.15) both;animation-delay:calc(var(--i) * 38ms)}
@keyframes flap-out{to{transform:rotateX(90deg);opacity:0}}
@keyframes flap-in{from{transform:rotateX(-100deg);opacity:0}to{transform:none;opacity:1}}
body .u-hero-panel .lede{max-width:40em}

/* home + our work: live client websites (two rows looping in opposite directions) */
.u-live{padding:56px 0 40px}
.u-live-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px 24px;flex-wrap:wrap}
html:root body .u-live h2{font-size:clamp(22px,2vw,28px)}

/* home: service categories as a flip deck (each card turns over to the next category) */
.flip-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.flip-slot{display:flex}
.flip-inner{display:grid;gap:20px;width:100%}
.js .flip-slot{perspective:1600px}
.js .flip-inner{gap:0;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.65,0,.25,1)}
.js .flip-slot:nth-child(2) .flip-inner{transition-delay:.14s}
.js .flip-slot:nth-child(3) .flip-inner{transition-delay:.28s}
.js .flip-face{grid-area:1/1;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.js .flip-face.back{transform:rotateY(180deg)}
.js .flipdeck.flipped .flip-inner{transform:rotateY(180deg)}
.flip-face{position:relative;display:flex;flex-direction:column;min-height:340px;padding:30px 30px 26px;border-radius:22px;background:#fff;border:1px solid var(--rule);color:var(--text);
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 18px 40px -28px rgba(24,24,24,.3);overflow:hidden;isolation:isolate;transition:border-color .25s,box-shadow .25s}
.flip-face.back{background:linear-gradient(160deg,#f1f8ee 0%,#fff 70%)}
.flip-face::after{content:"";position:absolute;right:-90px;bottom:-90px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(210,255,0,.28),transparent 70%);z-index:-1;transition:transform .5s}
.flip-face:hover{border-color:var(--green);box-shadow:0 24px 50px -26px rgba(13,122,0,.45)}
.flip-face:hover::after{transform:scale(1.35)}
.flip-face .fn{position:absolute;top:18px;right:24px;font:700 64px/1 var(--display);color:transparent;-webkit-text-stroke:1.5px #cfe6c7;letter-spacing:-.04em}
html:root body .flip-face h3{font-size:24px;max-width:12em;margin-top:44px}
.flip-face p{font-size:15.5px;line-height:1.55;margin-top:10px}
.flip-face ul{display:grid;gap:6px;margin-top:16px}
.flip-face li{position:relative;padding-left:16px;font-size:14.5px;color:var(--ink)}
.flip-face li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--green)}
.flip-face .count{margin-top:auto;padding-top:20px;display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--signal-ink)}
.flip-face .count .i{width:16px;height:16px;transition:transform .2s}
.flip-face:hover .count .i{transform:translateX(4px)}
.flip-face.audit{background:#181818;border-color:#181818;color:#cfcfcf}
.flip-face.audit::after{background:radial-gradient(circle,rgba(20,168,0,.45),transparent 70%)}
.flip-face.audit h3{color:#fff}
.flip-face.audit .fn{-webkit-text-stroke-color:#3a3a3a}
.flip-face.audit .count{color:var(--lime)}
.flip-ctrl{display:none}
.js .flip-ctrl{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:22px}
.flip-btn{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--rule);background:#fff;color:var(--ink);cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.flip-btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.flip-btn[data-flip="prev"] .i{transform:rotate(180deg)}
.flip-dots{display:flex;gap:6px}
.flip-dots i{width:8px;height:8px;border-radius:999px;background:var(--stone-2);transition:width .3s,background-color .3s}
.flip-dots i.on{width:26px;background:var(--green)}
.flip-pause{font:500 14px var(--font);color:var(--muted);background:none;border:0;padding:8px 4px;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.flip-pause:hover{color:var(--ink)}
@media (max-width:1080px){.flip-slots{grid-template-columns:1fr 1fr}.flip-slot:nth-child(3){grid-column:1/-1}}
@media (max-width:760px){.flip-slots{grid-template-columns:1fr}.flip-face{min-height:0;padding:26px 22px 22px}.js .flip-ctrl{justify-content:center}.flip-face .fn{font-size:52px}}

/* client videos */
.vcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:0 0 32px}
.sec-body .vcards{margin:36px 0 0}
.vcard-btn{position:relative;display:block;width:100%;aspect-ratio:9/16;padding:0;border:0;border-radius:20px;overflow:hidden;background:#0f1620;cursor:pointer;box-shadow:0 18px 40px -24px rgba(0,0,0,.5)}
.vcard-btn img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.vcard-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.25));pointer-events:none}
.vcard-play{position:absolute;left:50%;top:47%;z-index:1;display:grid;place-items:center;width:66px;height:66px;margin:-33px 0 0 -33px;border-radius:50%;background:var(--green);color:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.35);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.vcard-play::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(255,255,255,.7);animation:pulse 2.4s ease-out infinite}
.vcard-play svg{margin-left:3px}
.vcard-btn:hover img{transform:scale(1.05)}
.vcard-btn:hover .vcard-play{transform:scale(1.1)}
.vcard-btn:focus-visible{outline:3px solid var(--green);outline-offset:3px}
@keyframes pulse{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.45);opacity:0}}
.vcard-cap{margin-top:14px}
.vcard-cap b{display:block;font:600 16.5px/1.3 var(--display);color:var(--ink)}
.vcard-cap span{display:block;margin-top:3px;font-size:14px;line-height:1.45;color:var(--muted)}
@media (max-width:1080px){.vcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .vcards{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-left:calc(var(--gut) * -1);margin-right:calc(var(--gut) * -1);padding:0 var(--gut) 8px;scrollbar-width:none}
  .vcards::-webkit-scrollbar{display:none}
  .vcard{flex:0 0 64%;scroll-snap-align:start}
}
.vmodal{padding:0;border:0;background:transparent;max-width:none;max-height:none;overflow:visible}
.vmodal::backdrop{background:rgba(8,10,8,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.vmodal[open]{animation:vm-in .35s cubic-bezier(.2,.7,.2,1)}
@keyframes vm-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.vmodal-box{position:relative;width:min(440px,92vw,calc(86vh * 9 / 16));aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.vmodal video{width:100%;height:100%;display:block;object-fit:contain;background:#000}
.vmodal-close{position:absolute;top:-52px;right:0;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:0;background:#fff;color:var(--ink);cursor:pointer;font-size:22px;line-height:1}
.vmodal-close:hover{background:var(--lime)}
.vmodal-title{position:absolute;top:-46px;left:0;right:56px;color:#fff;font:600 16px var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-height:640px){.vmodal-close{top:10px;right:10px;z-index:2}.vmodal-title{display:none}}

/* our work: section links, case-study figures and details */
.work-tabs{padding:28px 0 0}
.work-tabs .wrap{display:flex;flex-wrap:wrap;gap:8px}
.work-tabs a{padding:10px 18px;border-radius:999px;border:1px solid var(--rule);background:#fff;font-size:15px;font-weight:500;color:var(--text);transition:background-color .2s,color .2s,border-color .2s}
.work-tabs a:hover{background:var(--ink);border-color:var(--ink);color:#fff}
#websites,#results,#videos,#reviews{scroll-margin-top:96px}
.sec.first.plain .title{margin-bottom:36px}
.case .case-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0 0;padding:0;align-self:stretch}
.case .case-stats div{background:#f1f8ee;border:1px solid #dcefd4;border-radius:14px;padding:14px 16px}
.case .case-stats dt{display:block;font:700 clamp(24px,2.2vw,32px)/1 var(--display);color:var(--signal-ink);letter-spacing:-.02em}
.case .case-stats dd{display:block;background:none;padding:0;margin-top:6px;font-size:13px;font-weight:500;color:var(--text)}
.case .case-stats dd::before{content:none!important}
.case-more{grid-column:1/-1;margin-top:24px;border-top:1px solid var(--rule);padding-top:18px}
.case-more summary{display:inline-flex;align-items:center;gap:10px;cursor:pointer;list-style:none;padding:10px 18px;border-radius:999px;background:var(--ink);color:#fff;font-weight:500;font-size:15px;transition:background-color .2s}
.case-more summary::-webkit-details-marker{display:none}
.case-more summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s}
.case-more[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.case-more summary:hover{background:var(--signal-ink)}
.case-more::details-content{height:0;overflow:hidden;transition:height .45s cubic-bezier(.2,.7,.2,1),content-visibility .45s allow-discrete}
.case-more[open]::details-content{height:auto}
.case-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}
.case-steps>div{background:var(--stone);border-radius:16px;padding:22px 22px 24px}
html:root body .case-steps h4{display:flex;align-items:center;gap:10px;font-size:17px;margin-bottom:12px}
.case-steps h4 span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--green);color:#fff;font:600 13px var(--font)}
.case-steps p{font-size:15.5px;line-height:1.6}
.case-steps .ticks li{font-size:15px}
@media (max-width:900px){.case-steps{grid-template-columns:1fr}}
@media (max-width:420px){.case .case-stats{grid-template-columns:1fr 1fr 1fr;gap:6px}.case .case-stats div{padding:12px 10px}.case .case-stats dd{font-size:12px}}

/* footer: business name and category */
.foot-cat{margin-top:18px}
.foot-cat b{display:block;color:#fff;font-weight:600;font-size:15px}
.foot-cat span{display:block;font-size:13.5px;color:var(--lime);margin-top:2px}
body .foot-brand p+p{margin-top:12px}

/* motion: blur-fade reveal, word-by-word headings, number count-up, glow */
.js .rv{filter:blur(6px);transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),filter .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .rv.in{filter:none;transform:none}
.js .split .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .1em;margin:0 -.02em -.1em}
.js .split .wi{display:inline-block;transform:translateY(110%);transition:transform 1s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--wi) * 40ms)}
.js .split.in .wi{transform:none}
.js .rv .ticks li{opacity:0;transform:translateX(-8px);transition:opacity .5s,transform .5s}
.js .rv.in .ticks li{opacity:1;transform:none}
.js .rv.in .ticks li:nth-child(2){transition-delay:.06s}.js .rv.in .ticks li:nth-child(3){transition-delay:.12s}
.js .rv.in .ticks li:nth-child(4){transition-delay:.18s}.js .rv.in .ticks li:nth-child(5){transition-delay:.24s}.js .rv.in .ticks li:nth-child(n+6){transition-delay:.3s}
.js body .u-steps li:not(:last-child)::after{transform-origin:left;transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.7,.2,1) .3s}
.js body .u-steps li.in:not(:last-child)::after{transform:scaleX(1)}
.u-dark,.u-banner{position:relative;overflow:hidden;isolation:isolate}
.u-dark::before,.u-banner::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;z-index:-1;pointer-events:none;animation:glow 14s ease-in-out infinite alternate}
.u-dark::before{left:-160px;top:-200px;background:radial-gradient(circle,rgba(20,168,0,.32),transparent 65%)}
.u-banner::before{right:-120px;bottom:-260px;background:radial-gradient(circle,rgba(210,255,0,.35),transparent 65%)}
@keyframes glow{to{transform:translate(160px,90px) scale(1.15)}}
.btn .i-arrow{transition:transform .2s}
.btn:hover .i-arrow{transform:translateX(3px)}
.btn-cta{transition:background-color .2s,box-shadow .25s,transform .25s}
.btn-cta:hover{box-shadow:0 10px 24px -10px rgba(13,122,0,.7);transform:translateY(-1px)}

@media (prefers-reduced-motion:reduce){
  .vs-intro .curtain{display:none}
  .js .rv,.js .rv.in{filter:none}
  .js .split .wi{transform:none}
  .js .rv .ticks li{opacity:1;transform:none}
  .js body .u-steps li:not(:last-child)::after{transform:none}
}
@media (max-width:760px){body .nav-cta{gap:8px}body .nav-cta .btn{display:inline-flex;min-height:42px;padding:0 16px;font-size:14px}}
@media (max-width:359px){body .nav-cta .btn{display:none}}
/* the page-to-page cross-fade keeps the header still; the name sits on the glass bar itself, because a view-transition name on its parent would stop the blur from seeing the page behind */
body .site-header{view-transition-name:none}
body .site-header>.wrap.nav{view-transition-name:vs-header}
body .brand{flex:none}
@media (max-width:1080px){body .nav-phone{display:none}}
.foot-cat small{display:block;font-size:13.5px;margin-top:2px}
/* a blur cannot be nested inside the glass bar, so the open menu is solid */
@media (max-width:1080px){
  body .primary-nav{background:#fff}
  body .primary-nav .mobile-extra a{display:flex;align-items:center;justify-content:center;border-radius:999px;padding:0 24px;min-height:52px;font-size:16px}
  body .primary-nav .mobile-extra .btn-cta{background:var(--cta);color:#fff}
  body .primary-nav .mobile-extra .btn-line{border:1px solid var(--ink);color:var(--ink)}
}
.vmodal-box{overflow:visible}
.vmodal video{border-radius:22px}

@media (max-width:760px){.u-live{padding:40px 0 24px}}

/* =========================================================
   v3.1: two-row website carousel, platforms panel, gradient backgrounds, pointer light, more motion
   ========================================================= */
.sc{display:grid;gap:18px;margin-top:28px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.sc-row{display:flex;gap:20px;overflow:hidden;padding:10px 0 18px}
.sc-set{flex:none;display:flex;gap:20px;min-width:100%;animation:sc-loop 90s linear infinite}
.sc-row.rev .sc-set{animation-direction:reverse}
.sc-row:hover .sc-set,.sc-row:focus-within .sc-set{animation-play-state:paused}
@keyframes sc-loop{to{transform:translateX(calc(-100% - 20px))}}
.sc-card{display:flex;flex-direction:column;gap:14px;width:340px;height:100%;padding:18px;border-radius:20px;background:#fff;border:1px solid var(--rule);color:var(--text);
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 16px 34px -26px rgba(24,24,24,.35);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
.sc-top{display:flex;align-items:center;gap:12px}
.sc-fav{flex:none;width:42px;height:42px;border-radius:12px;object-fit:contain;background:#fff;border:1px solid var(--rule);padding:4px}
.sc-mono{display:grid;place-items:center;background:var(--green);border-color:var(--green);color:#fff;font:700 19px var(--display)}
.sc-id{min-width:0}
.sc-id b{display:block;font:600 16.5px/1.2 var(--display);color:var(--ink);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-id span{display:block;margin-top:3px;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-go{flex:none;margin-left:auto;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--stone);color:var(--ink);transition:background-color .3s,color .3s,transform .3s}
.sc-go .i{width:15px;height:15px}
.sc-shot{display:block;aspect-ratio:16/10;border-radius:12px;overflow:hidden;border:1px solid var(--rule);background:var(--stone)}
.sc-shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.sc-sum{font-size:14.5px;line-height:1.5;min-height:3em}
.sc-tags{display:flex;flex-wrap:wrap;gap:6px}
.sc-tags i{font-style:normal;font-size:12px;line-height:1;padding:6px 10px;border-radius:999px;background:var(--stone);border:1px solid var(--rule);color:var(--text)}
.sc-dom{margin-top:auto;padding-top:12px;border-top:1px solid var(--rule);font-size:13.5px;font-weight:500;color:var(--signal-ink)}
.sc-card:hover{transform:translateY(-6px);border-color:#bfe0b6;box-shadow:0 26px 50px -26px rgba(13,122,0,.45)}
.sc-card:hover .sc-shot img{transform:scale(1.06)}
.sc-card:hover .sc-go{background:var(--green);color:#fff;transform:rotate(45deg)}
.sc-card:focus-visible{outline:3px solid var(--green);outline-offset:3px}
#websites .sc{margin-top:8px}
#websites .work-next{margin-top:28px}
@media (max-width:760px){.sc-card{width:280px;padding:16px}.sc-set{animation-duration:70s}.sc{gap:10px}}

/* home: platforms we work in (dark panel with a moving gradient) */
.u-int{padding-top:40px}
.int-panel{position:relative;isolation:isolate;overflow:hidden;border-radius:28px;padding:72px 64px 64px;background:#0b110c;color:#aeb8ae}
.int-panel::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent);mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent)}
.mesh{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.mesh i{position:absolute;border-radius:50%;opacity:.55;animation:blob 22s ease-in-out infinite alternate}
.mesh i:nth-child(1){width:560px;height:560px;left:-140px;top:-220px;background:radial-gradient(circle,rgba(20,168,0,.55),transparent 68%)}
.mesh i:nth-child(2){width:520px;height:520px;right:-160px;top:30%;background:radial-gradient(circle,rgba(210,255,0,.32),transparent 68%);animation-duration:26s;animation-direction:alternate-reverse}
.mesh i:nth-child(3){width:460px;height:460px;left:35%;bottom:-260px;background:radial-gradient(circle,rgba(0,170,140,.35),transparent 68%);animation-duration:30s}
@keyframes blob{0%{transform:translate(0,0) scale(1)}50%{transform:translate(90px,60px) scale(1.15)}100%{transform:translate(-60px,110px) scale(.95)}}
.int-head{max-width:760px;margin:0 auto;text-align:center}
.int-kicker{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;border:1px solid rgba(210,255,0,.28);background:rgba(210,255,0,.06);color:var(--lime);font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.int-kicker span{position:relative;width:8px;height:8px;border-radius:50%;background:var(--lime)}
.int-kicker span::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--lime);animation:pulse 2s ease-out infinite}
html:root body .int-head h2{margin-top:22px;color:#fff;font-size:clamp(30px,3.4vw,48px);line-height:1.08}
.int-head p:last-child{margin-top:16px;font-size:17px;line-height:1.6;color:#aeb8ae}
.int-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:52px}
.int-grid>li{display:flex}
.int-card{width:100%}
.int-card{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:4px;padding:22px 20px 24px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s,background-color .35s}
.int-ic{display:grid;place-items:center;width:50px;height:50px;margin-bottom:14px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:var(--brand);transition:transform .35s cubic-bezier(.2,.7,.2,1),background-color .35s}
.int-card b{font:600 16px/1.25 var(--display);color:#fff}
.int-card>span:not(.int-ic){font-size:13.5px;line-height:1.45;color:#98a398;margin-bottom:16px}
.int-bar{display:block;width:40px;height:2px;margin-top:auto;border-radius:2px;background:var(--brand);transform-origin:left;transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.7,.2,1) .35s,width .35s}
.rv.in .int-bar{transform:scaleX(1)}
.int-card:hover{transform:translateY(-6px);background:rgba(255,255,255,.06);border-color:color-mix(in srgb,var(--brand) 55%,transparent);box-shadow:0 22px 48px -24px color-mix(in srgb,var(--brand) 70%,transparent)}
.int-card:hover .int-ic{transform:scale(1.08) rotate(-4deg);background:color-mix(in srgb,var(--brand) 16%,transparent)}
.int-card:hover .int-bar{width:72px}
.int-card.spot::before{background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--brand) 22%,transparent),transparent 60%)}
@media (max-width:1180px){.int-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:980px){.int-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.int-panel{padding:56px 32px 40px}}
@media (max-width:640px){.int-grid{grid-template-columns:1fr 1fr;gap:10px}.int-panel{padding:44px 18px 22px;border-radius:20px}.int-card{padding:18px 16px}.int-ic{width:44px;height:44px;margin-bottom:10px}.u-int .wrap{padding-left:12px;padding-right:12px}}

/* pointer light on cards (added by site.js on mouse/trackpad devices) */
.spot{position:relative;isolation:isolate}
.spot::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(20,168,0,.11),transparent 55%)}
.spot:hover::before{opacity:1}
.flip-face.audit.spot::before,.case .no-shot.spot::before{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(210,255,0,.16),transparent 55%)}

/* gradient backgrounds */
body .u-hero-panel{isolation:isolate;background:#1d2a1d}
.u-hero-panel::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--hero) center/cover no-repeat;animation:kenburns 26s ease-in-out infinite alternate;will-change:transform}
.u-hero-panel::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(45% 60% at 92% 8%,rgba(210,255,0,.16),transparent 70%),linear-gradient(90deg,rgba(10,14,10,.88) 0%,rgba(10,14,10,.72) 42%,rgba(10,14,10,.2) 75%,rgba(10,14,10,.05) 100%)}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.09) translate(-1.5%,-1%)}}
@media (max-width:1080px){.u-hero-panel::after{background:radial-gradient(60% 40% at 90% 0%,rgba(210,255,0,.14),transparent 70%),linear-gradient(180deg,rgba(10,14,10,.55) 0%,rgba(10,14,10,.88) 70%)}}
.u-sec.ambient{position:relative;isolation:isolate;overflow-x:clip}
.u-sec.ambient::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(38% 55% at 6% 30%,rgba(20,168,0,.09),transparent 70%),radial-gradient(34% 50% at 94% 78%,rgba(210,255,0,.24),transparent 70%);animation:ambient 18s ease-in-out infinite alternate}
.u-sec.ambient.alt::before{background:radial-gradient(36% 50% at 94% 20%,rgba(20,168,0,.09),transparent 70%),radial-gradient(34% 50% at 8% 85%,rgba(210,255,0,.22),transparent 70%)}
@keyframes ambient{to{transform:translate3d(2%,-3%,0) scale(1.05)}}
.page-head .wrap::after{content:"";position:absolute;inset:0 var(--gut);z-index:-1;border-radius:24px;pointer-events:none;
  background:radial-gradient(28% 55% at 18% 105%,rgba(20,168,0,.16),transparent 70%),radial-gradient(26% 50% at 62% -8%,rgba(210,255,0,.30),transparent 70%);
  background-size:160% 160%;animation:headmesh 16s ease-in-out infinite alternate}
@keyframes headmesh{from{background-position:0% 0%}to{background-position:100% 60%}}
@media (max-width:760px){.page-head .wrap::after{inset:0 12px;border-radius:18px}}
body .site-footer>.wrap{position:relative;isolation:isolate;overflow:hidden}
body .site-footer>.wrap::before{content:"";position:absolute;width:560px;height:560px;right:-180px;top:-260px;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(20,168,0,.28),transparent 66%);animation:glow 16s ease-in-out infinite alternate}

/* popular plan: a slowly turning gradient border */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.u-plan.pop,.plan.pop{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from var(--ang),#14a800,#d2ff00 25%,#14a800 50%,#9fd88f 75%,#14a800) border-box;animation:spin-border 6s linear infinite}
@keyframes spin-border{to{--ang:360deg}}

/* reading progress line */
.progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:80;background:linear-gradient(90deg,#14a800,#d2ff00);transform-origin:left;transform:scaleX(0);pointer-events:none}
.vcard-btn{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.vcard-btn:hover{box-shadow:0 30px 60px -28px rgba(13,122,0,.6)}

@media (prefers-reduced-motion:reduce){
  .sc-row{overflow-x:auto}
  .sc{-webkit-mask-image:none;mask-image:none}
  .sc-set{animation:none}
  .sc-set[aria-hidden]{display:none}
  .int-bar{transform:none}
}
#websites .title{margin-bottom:0}
#websites .work-next{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px 48px}
@media (max-width:760px){#websites .work-next{grid-template-columns:1fr}}
/* logo (5 Nov 2026): the client's full horizontal logo, as an image, in the header, footer and home intro */
body .brand img{display:block;width:auto;height:44px}
body .foot-brand .brand img{height:64px}
@media (max-width:760px){body .brand img{height:36px}body .foot-brand .brand img{height:56px}}
@media (max-width:430px){body .site-header .brand img{height:32px}}
/* phones: buttons stay on the right, the text logo shrinks so everything fits in the bar */
@media (max-width:1080px){body .nav-cta{margin-left:auto}}
@media (max-width:430px){body .site-header>.wrap.nav{padding:0 6px 0 14px;gap:10px}body .nav-cta .btn{padding:0 14px}}
/* platforms: 11 cards + "and much more" (client list, 4 Nov 2026) */
.int-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.int-more{--brand:#d2ff00;border-style:dashed;border-color:rgba(210,255,0,.35);background:rgba(210,255,0,.05);color:inherit}
.int-more .int-ic{background:var(--lime);border-color:var(--lime);color:#0b110c;transition:transform .45s cubic-bezier(.2,.7,.2,1),background-color .35s}
.int-more:hover .int-ic{transform:rotate(90deg) scale(1.08);background:var(--lime)}
.int-more:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
@media (max-width:1180px){.int-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:980px){.int-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.int-grid{grid-template-columns:1fr 1fr}}

/* =========================================================
   v4 (8 Nov 2026): Austin's brief. Plans, hero AI scene, tech strip, services motion, blog covers, Gemini.
   ========================================================= */

/* plans: Kickstart / Growth / Scale with their positioning lines */
.u-plan-tier{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.u-plan-tier.hot{align-self:flex-start;background:var(--lime);color:#181818;letter-spacing:.02em;text-transform:none;padding:4px 12px;border-radius:999px;font-size:12.5px}
.u-plan .motto{margin-top:6px;font:600 16px/1.3 var(--display);color:var(--signal-ink)}
.u-plan .for{margin:10px 0 20px}
.u-plan li.plus{display:block;font-weight:600;color:var(--ink);font-size:14.5px}
.u-plan-more{display:inline-block;margin:-14px 0 24px;font-size:14px;font-weight:600;color:var(--signal-ink);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(13,122,0,.35)}
.u-plan-more:hover{text-decoration-color:currentColor}
.plan .tier .motto{color:var(--signal-ink)}
.plan .line{font:600 17px/1.35 var(--display);color:var(--ink);margin-bottom:10px}
.plan .plus{font-size:14.5px;font-weight:600;color:var(--ink);margin:-6px 0 12px}

/* "A few of our live clients' websites": the heading glows (light sweeps across, soft green halo) */
.glow-title{position:relative}
.glow-title>span{background:linear-gradient(100deg,var(--ink) 0%,var(--ink) 38%,#14a800 46%,#b8f000 50%,#14a800 54%,var(--ink) 62%,var(--ink) 100%);background-size:250% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:glow-sweep 5.5s cubic-bezier(.45,.05,.25,1) infinite;filter:drop-shadow(0 0 0 rgba(20,168,0,0))}
.glow-title::after{content:"";position:absolute;left:-4%;right:40%;top:10%;bottom:-10%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(180,255,40,.45),rgba(20,168,0,.12) 60%,transparent);filter:blur(18px);animation:glow-halo 5.5s ease-in-out infinite;pointer-events:none}
@keyframes glow-sweep{0%,20%{background-position:100% 0}70%,100%{background-position:0 0}}
@keyframes glow-halo{0%,100%{opacity:.35;transform:scale(.96)}50%{opacity:1;transform:scale(1.03)}}
@media (prefers-reduced-motion:reduce){.glow-title>span{animation:none;background:none;color:var(--ink)}.glow-title::after{animation:none;opacity:.6}}

/* moving technology strip: dark band, two rows of brand chips drifting in opposite directions */
.tech{padding:24px 0 8px}
.tech.tight{padding:0}
.tech-band{position:relative;isolation:isolate;overflow:hidden;border-radius:24px;background:#0b0f0b;color:#fff;padding:52px 0 44px}
.tech-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(40% 70% at 15% 0%,rgba(20,168,0,.28),transparent 70%),radial-gradient(35% 60% at 90% 100%,rgba(210,255,0,.14),transparent 70%);animation:tech-glow 14s ease-in-out infinite alternate}
@keyframes tech-glow{to{transform:translateX(6%) scale(1.08)}}
.tech-head{text-align:center;max-width:760px;margin:0 auto 34px;padding:0 24px}
.tech-kicker{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--lime)}
.tech-kicker span{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px rgba(210,255,0,.18);animation:tech-dot 2s ease-in-out infinite}
@keyframes tech-dot{50%{box-shadow:0 0 0 8px rgba(210,255,0,0)}}
html:root body .tech-head h2{color:#fff;font-size:clamp(24px,2.6vw,36px);line-height:1.12;margin-top:12px;letter-spacing:-.01em}
.tech-head p{color:#b9c2b9;font-size:16px;margin-top:12px}
.tech-row{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.tech-row+.tech-row{margin-top:14px}
.tech-track{display:flex;gap:14px;width:max-content;animation:tech-move 46s linear infinite}
.tech-row.rev .tech-track{animation-direction:reverse;animation-duration:52s}
.tech-band:hover .tech-track{animation-play-state:paused}
@keyframes tech-move{to{transform:translateX(calc(-50% - 7px))}}
.tech-chip{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);font-size:15px;font-weight:600;color:#dfe6df;white-space:nowrap;transition:color .25s,border-color .25s,background .25s}
.tech-chip svg{flex:none;color:#fff;opacity:.85;transition:color .25s,opacity .25s}
.tech-chip:hover{border-color:color-mix(in srgb,var(--brand) 60%,transparent);background:color-mix(in srgb,var(--brand) 12%,transparent);color:#fff}
.tech-chip:hover svg{color:var(--brand);opacity:1}
@media (max-width:760px){.tech-band{border-radius:18px;padding:40px 0 32px}.tech-chip{padding:10px 14px;font-size:14px}.tech-track{animation-duration:34s}.tech-row.rev .tech-track{animation-duration:38s}}
@media (prefers-reduced-motion:reduce){.tech-track,.tech-glow{animation:none}.tech-row{overflow-x:auto}}

/* ---------- home hero: AI search assistant scene ---------- */
body .u-hero-panel.ai-hero{min-height:720px;padding:84px 56px 0;justify-content:flex-start;background:#070a07}
.u-hero-panel.ai-hero::before{background:radial-gradient(70% 90% at 78% 40%,#0f1d0f 0%,#070a07 70%);animation:none}
.u-hero-panel.ai-hero::after{background:linear-gradient(90deg,rgba(7,10,7,.92) 0%,rgba(7,10,7,.7) 38%,rgba(7,10,7,0) 62%)}
.ai-hero>:not(.hero-scene){position:relative;z-index:2}
.ai-hero h1{max-width:11.5em}
html:root body .ai-hero h1{font-size:clamp(38px,4.6vw,66px);line-height:1.02}
.ai-hero .lede{max-width:30em}
.ai-hero .u-search{max-width:600px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.hero-proof{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-size:14.5px;color:#d7ded7;align-self:flex-start}
.hero-proof .stars{color:#ffc93c;letter-spacing:1px;font-size:13px}
.hero-proof b{color:#fff;font-weight:600}
.hero-proof .i{width:15px;height:15px;color:var(--lime);transition:transform .2s}
.hero-proof:hover .i{transform:translateX(3px)}
.hero-logos{display:flex;align-items:center;gap:24px;margin:56px -56px 0;padding:18px 56px;border-top:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hero-logos>p{flex:none;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.hero-logos-row{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.hero-logos-track{display:flex;gap:34px;width:max-content;animation:tech-move 60s linear infinite}
.hero-logos-track span{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:#c9d1c9;white-space:nowrap}
.hero-logos-track svg{color:#fff;opacity:.9}

.hero-scene{position:absolute;top:0;right:0;bottom:0;width:58%;z-index:0;pointer-events:none;overflow:hidden}
.hs-bg{position:absolute;inset:0}
.hs-bg i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55}
.hs-bg .b1{width:420px;height:420px;left:22%;top:4%;background:#14a800}
.hs-bg .b2{width:300px;height:300px;right:-4%;top:42%;background:#1fb8a0;opacity:.32}
.hs-bg .b3{width:260px;height:260px;left:8%;bottom:-6%;background:#c8f500;opacity:.18}
.hs-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(60% 60% at 55% 42%,#000,transparent);mask-image:radial-gradient(60% 60% at 55% 42%,#000,transparent)}
.hs-stage{position:absolute;left:50%;top:50%;width:560px;height:620px;margin:-310px 0 0 -280px;transform-origin:50% 50%;font-family:var(--font);color:#fff}
.hs-ring{position:absolute;left:50%;top:210px;border-radius:50%;border:1px dashed rgba(210,255,0,.22);transform:translate(-50%,-50%)}
.hs-ring.r1{width:330px;height:330px}
.hs-ring.r2{width:450px;height:450px;border:1px solid rgba(255,255,255,.06)}
.hs-orbit{position:absolute;left:280px;top:210px;width:0;height:0}
.hs-planet{position:absolute;left:-23px;top:-23px;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:rgba(18,24,18,.85);border:1px solid rgba(255,255,255,.14);color:#e9f0e9;box-shadow:0 8px 20px rgba(0,0,0,.4);will-change:transform}
.hs-planet.on{background:#fff;color:#0b0f0b;border-color:#fff;box-shadow:0 0 0 6px rgba(210,255,0,.2),0 0 34px rgba(210,255,0,.55)}
.hs-orb{position:absolute;left:175px;top:105px;width:210px;height:210px;border-radius:50%;will-change:transform}
.hs-orb i{position:absolute;inset:0;border-radius:50%;mix-blend-mode:screen;will-change:transform}
.hs-orb .o1{background:conic-gradient(from 0deg,#14a800,#d2ff00,#1fb8a0,#14a800);filter:blur(10px);opacity:.95}
.hs-orb .o2{inset:12px;background:conic-gradient(from 120deg,transparent,#3b82f6 20%,transparent 45%,#d2ff00 70%,transparent);filter:blur(14px);opacity:.75}
.hs-orb .o3{inset:-18px;background:radial-gradient(closest-side,rgba(210,255,0,.45),rgba(20,168,0,.25) 55%,transparent);filter:blur(16px)}
.hs-orb .o4{inset:26px;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.85),rgba(255,255,255,0) 45%),conic-gradient(from 200deg,#0d7a00,#14a800,#b8f000,#1fb8a0,#0d7a00);filter:blur(4px);opacity:.9}
.hs-core{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:radial-gradient(circle,#fff 0%,rgba(255,255,255,.6) 35%,transparent 70%);filter:blur(2px)}
.hs-wave{position:absolute;left:150px;top:338px;width:260px;height:46px;display:flex;align-items:center;justify-content:space-between}
.hs-wave i{display:block;width:4px;height:6px;border-radius:4px;background:linear-gradient(180deg,#d2ff00,#14a800);will-change:transform}
.hs-query{position:absolute;left:50%;top:398px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;max-width:470px;padding:10px 18px 10px 10px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);white-space:nowrap;font-size:15.5px;font-weight:500;color:#f2f6f2}
.hs-mic{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--lime);color:#0b0f0b}
.hs-qtext{overflow:hidden;text-overflow:clip}
.hs-caret{flex:none;width:2px;height:18px;margin-left:-6px;background:var(--lime)}
.hs-cards{position:absolute;left:50%;top:452px;width:410px;margin-left:-205px}
.hs-card{position:absolute;left:0;top:0;width:100%;padding:16px 18px;border-radius:18px;background:#fff;color:#1b1f1b;box-shadow:0 30px 60px -20px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.5);opacity:0;visibility:hidden;will-change:transform,opacity;font-size:13px;line-height:1.35}
.hs-card b{font-weight:650;color:#111}
.hs-card small{display:block;color:#5f6b5f;font-size:12px}
.hs-stars{display:inline-flex;align-items:center;gap:1px;color:#f5a623;margin-top:3px}
.hs-stars em{font-style:normal;color:#5f6b5f;font-size:12px;margin-left:6px}
.hs-sbar{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;border:1px solid #e3e7e3;margin-bottom:10px;color:#333}
.hs-sbar svg{color:#4285f4}
.hs-res{display:flex;gap:12px;align-items:flex-start;padding:9px 10px;border-radius:12px}
.hs-res+.hs-res{opacity:.45}
.hs-res.win{background:#f1f9ec;box-shadow:inset 0 0 0 1px #cfeac4}
.hs-res b{display:block;font-size:14px;color:#1a0dab}
.hs-res.win b{color:#0d5c00}
.hs-rank{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#eef0ee;font-weight:700;font-size:12.5px;color:#555}
.hs-res.win .hs-rank{background:var(--green);color:#fff}
.hs-map{position:relative;height:96px;margin:-16px -18px 12px;border-radius:18px 18px 0 0;background:#141c14;overflow:hidden}
.hs-map svg{position:absolute;inset:0;width:100%;height:100%}
.hs-map .pin{position:absolute;width:14px;height:14px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#56635a}
.hs-map .p1{left:22%;top:40%}.hs-map .p2{left:72%;top:28%}
.hs-map .pin.win{left:47%;top:20%;width:40px;height:40px;display:grid;place-items:center;background:var(--lime);box-shadow:0 0 0 8px rgba(210,255,0,.2)}
.hs-map .pin.win svg{transform:rotate(45deg);color:#0b0f0b}
.hs-listing{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hs-listing b{font-size:15px}
.hs-listing .open{font-style:normal;color:#0d7a00;font-weight:600}
.hs-btn{flex:none;padding:8px 16px;border-radius:999px;background:var(--green);color:#fff;font-weight:600;font-size:13px}
.hs-post-head{display:flex;align-items:center;gap:10px}
.hs-post-head small{display:inline-flex;align-items:center;gap:4px}
.hs-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--lime);font-weight:700;font-size:12px}
.hs-post-img{margin:10px -18px;padding:16px 18px;min-height:74px;background:linear-gradient(120deg,#0d7a00,#14a800 45%,#b8f000);color:#fff}
.hs-post-img span{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.hs-post-img b{display:block;color:#fff;font:600 19px/1.15 var(--display);margin-top:4px}
.hs-post-foot{display:flex;align-items:center;justify-content:space-between}
.hs-likes{color:#e0245e;font-weight:600}
.hs-likes em{font-style:normal}
.hs-ai-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.hs-ai-head svg{color:#8e75ff}
.hs-ai-head b{background:linear-gradient(90deg,#4f7cff,#8e75ff,#14a800);-webkit-background-clip:text;background-clip:text;color:transparent}
.hs-ai-text{min-height:54px;font-size:14px;line-height:1.45;color:#222}
.hs-ai-text strong{color:#0d5c00;background:#eaf7e2;padding:0 3px;border-radius:4px}
.hs-src{display:flex;gap:6px;margin-top:10px}
.hs-src span{padding:4px 10px;border-radius:999px;background:#f1f3f1;color:#4a554a;font-size:11.5px}
.hs-toast{position:absolute;right:-6px;top:34px;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:16px;background:rgba(255,255,255,.96);color:#111;box-shadow:0 20px 40px -12px rgba(0,0,0,.55);opacity:0;will-change:transform,opacity}
.hs-toast b{display:block;font-size:14px}
.hs-toast small{display:block;font-size:12px;color:#5f6b5f}
.hs-ping{position:relative;flex:none;width:34px;height:34px;border-radius:10px;background:var(--green)}
.hs-ping::after{content:"";position:absolute;inset:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.35)}

@media (max-width:1180px){
  .hero-scene{width:52%}
  .u-hero-panel.ai-hero::after{background:linear-gradient(90deg,rgba(7,10,7,.94) 0%,rgba(7,10,7,.75) 45%,rgba(7,10,7,.1) 75%)}
}
@media (max-width:1080px){
  body .u-hero-panel.ai-hero{min-height:0;padding:56px 40px 0}
  .u-hero-panel.ai-hero::after{background:none}
  .hero-scene{position:relative;order:10;width:auto;height:470px;margin:32px -40px 0}
  .hero-logos{order:11;margin:0 -40px;padding:16px 40px}
  .ai-hero h1{max-width:13em}
}
@media (max-width:760px){
  body .u-hero-panel.ai-hero{padding:40px 22px 0}
  .hero-scene{height:400px;margin:24px -22px 0}
  .hero-logos{margin:0 -22px;padding:14px 22px;gap:14px}
  .hero-logos>p{display:none}
  .hero-proof{font-size:13.5px;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){.hero-logos-track{animation:none}.hero-logos-row{overflow-x:auto}}
.hero-scene{bottom:60px}
/* the orb: a glassy sphere edge and highlight over the moving colour */
.hs-orb::after{content:"";position:absolute;inset:8px;border-radius:50%;background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.55),rgba(255,255,255,0) 32%),radial-gradient(circle at 70% 80%,rgba(0,0,0,0) 55%,rgba(0,20,0,.35) 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 -12px 40px rgba(0,40,0,.35),0 0 80px rgba(150,255,60,.35);pointer-events:none}
.hs-orb .o1{filter:blur(6px)}
@media (max-width:1080px){.hero-scene{bottom:auto}}
/* scene: everything 22px higher so the tallest answer card fits above the logo bar */
.hs-ring,.hs-orbit{top:188px}
.hs-orb{top:83px}
.hs-wave{top:314px}
.hs-query{top:372px}
.hs-cards{top:424px}
.hs-post-head>div{display:flex;flex-direction:column}
.hs-listing b{display:block}

/* Services page: icon tiles, platform logos under each group, the AI panel */
.svc-item h3{display:flex;align-items:center;gap:16px}
.svc-ic{position:relative;flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:#0f140f;color:#d2ff00;overflow:hidden;isolation:isolate;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.svc-ic::before{content:"";position:absolute;inset:-40%;z-index:-1;background:conic-gradient(from var(--ang),transparent 0 70%,rgba(210,255,0,.9) 82%,transparent 92%);animation:spin-border 4.5s linear infinite;opacity:.0;transition:opacity .4s}
.svc-ic::after{content:"";position:absolute;inset:2px;z-index:-1;border-radius:12px;background:#0f140f}
.svc-ic.brand{color:#fff}
.svc-ic.brand svg{color:var(--brand);filter:drop-shadow(0 0 10px color-mix(in srgb,var(--brand) 45%,transparent))}
.svc-item.in .svc-ic::before{opacity:.75}
.svc-item:hover .svc-ic{transform:translateY(-3px) rotate(-4deg)}
.svc-ic .dr{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s cubic-bezier(.6,.1,.2,1) .25s}
.svc-item.in .svc-ic .dr{stroke-dashoffset:0}
.svc-item.in .svc-ic svg{animation:svc-float 4s ease-in-out 1.6s infinite}
@keyframes svc-float{50%{transform:translateY(-2px) scale(1.06)}}
.svc-brands{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.svc-brands li{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:var(--stone);border:1px solid var(--rule);font-size:13px;font-weight:600;color:var(--ink);animation:vs-in .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 60ms + .2s)}
.svc-brands svg{color:var(--signal-ink)}
.svc-item .ai-vis{grid-column:1/-1;margin-top:26px}
@media (prefers-reduced-motion:reduce){.svc-ic::before,.svc-item.in .svc-ic svg{animation:none}.svc-ic .dr{stroke-dashoffset:0;transition:none}}

/* animated AI panel (Services: AI optimization; About: Gemini) */
.ai-vis{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);align-items:center;gap:24px;min-height:250px;padding:28px 32px;border-radius:18px;background:radial-gradient(60% 90% at 18% 50%,#18251a,#0b0f0b 70%);color:#fff}
.ai-spark{position:relative;display:grid;place-items:center;height:190px}
.ai-spark svg{position:relative;z-index:1;animation:ai-spark 6s ease-in-out infinite;filter:drop-shadow(0 0 24px rgba(155,114,255,.55))}
@keyframes ai-spark{0%,100%{transform:rotate(0) scale(1)}40%{transform:rotate(45deg) scale(1.12)}60%{transform:rotate(45deg) scale(.96)}}
.ai-halo{position:absolute;width:170px;height:170px;border-radius:50%;background:conic-gradient(from var(--ang),#4f7cff,#9b72ff,#d2ff00,#14a800,#4f7cff);filter:blur(30px);opacity:.55;animation:spin-border 7s linear infinite}
.ai-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:#d2ff00;box-shadow:0 0 14px #d2ff00;animation:ai-orbit 7s linear infinite}
.ai-dot.d2{background:#9b72ff;box-shadow:0 0 14px #9b72ff;animation-duration:9s;animation-direction:reverse}
.ai-dot.d3{background:#4f7cff;box-shadow:0 0 14px #4f7cff;animation-duration:11s}
@keyframes ai-orbit{from{transform:rotate(0) translateX(86px)}to{transform:rotate(360deg) translateX(86px)}}
.ai-chat{position:relative;height:190px}
.ai-msg{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:12px;opacity:0;animation:ai-msg 12s infinite;animation-delay:calc(var(--n) * 4s)}
@keyframes ai-msg{0%{opacity:0;transform:translateY(12px)}4%,30%{opacity:1;transform:none}34%,100%{opacity:0;transform:translateY(-10px)}}
.ai-q{align-self:flex-end;max-width:85%}
.ai-q span{display:inline-block;padding:10px 16px;border-radius:16px 16px 4px 16px;background:#d2ff00;color:#0b0f0b;font-weight:600;font-size:15px}
.ai-a{max-width:92%;padding:12px 16px 14px;border-radius:16px 16px 16px 4px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.ai-who{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#b9c2b9}
.ai-who svg{color:#fff}
.ai-a p{margin-top:6px;font-size:15px;line-height:1.45;color:#eef3ee;animation:ai-ans 12s infinite;animation-delay:calc(var(--n) * 4s)}
.ai-a b{color:#0b0f0b;background:#d2ff00;padding:0 5px;border-radius:5px;font-weight:600}
.ai-typing{display:inline-flex;gap:4px;margin-left:10px;vertical-align:middle;animation:ai-typing 12s infinite;animation-delay:calc(var(--n) * 4s)}
.ai-typing i{width:5px;height:5px;border-radius:50%;background:#b9c2b9;animation:ai-bounce .9s ease-in-out infinite}
.ai-typing i:nth-child(2){animation-delay:.15s}.ai-typing i:nth-child(3){animation-delay:.3s}
@keyframes ai-bounce{50%{transform:translateY(-3px);opacity:.4}}
@keyframes ai-ans{0%,11%{opacity:0;transform:translateY(4px)}15%,100%{opacity:1;transform:none}}
@keyframes ai-typing{0%,3%{opacity:0}5%,12%{opacity:1}14%,100%{opacity:0}}
@media (max-width:760px){.ai-vis{grid-template-columns:1fr;padding:20px;gap:0}.ai-spark{height:130px}.ai-spark svg{width:84px;height:84px}.ai-halo{width:120px;height:120px}@keyframes ai-orbit{from{transform:rotate(0) translateX(62px)}to{transform:rotate(360deg) translateX(62px)}}.ai-chat{height:200px}}
@media (prefers-reduced-motion:reduce){.ai-vis *{animation:none!important}.ai-msg:first-child{opacity:1}.ai-typing{display:none}}

/* blog covers (our own 3D renders) */
.cover{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.u-post-cover{display:block;aspect-ratio:16/10;margin:-26px -26px 18px;border-radius:14px 14px 0 0;overflow:hidden;background:#0b0f0b}
.u-posts a:hover .cover,.post-row:hover .cover{transform:scale(1.05)}
.post-cover{aspect-ratio:16/10;margin:-28px -28px 6px;border-radius:15px 15px 0 0;overflow:hidden;background:#0b0f0b}
.post-row.lead{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:"cover meta" "cover body";align-content:center;column-gap:40px;row-gap:12px}
.post-row.lead .post-cover{grid-area:cover;margin:-40px 0 -40px -40px;border-radius:15px 0 0 15px;aspect-ratio:auto;min-height:340px}
.post-row.lead .meta{grid-area:meta;align-self:end}
.post-row.lead .body{grid-area:body}
.article-cover{margin:0 0 8px;border-radius:20px;overflow:hidden;aspect-ratio:16/7;background:#0b0f0b}
@media (max-width:760px){
  .post-cover{margin:-24px -24px 4px}
  .post-row.lead{display:flex}
  .post-row.lead .post-cover{margin:-24px -24px 4px;border-radius:15px 15px 0 0;min-height:0;aspect-ratio:16/10}
  .article-cover{aspect-ratio:16/10;border-radius:14px}
}
.post-list.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.post-list.two .post-row:not(.lead){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"cover meta" "cover body";column-gap:24px;row-gap:8px;align-content:center}
.post-list.two .post-row:not(.lead) .post-cover{grid-area:cover;margin:-28px 0 -28px -28px;border-radius:15px 0 0 15px;aspect-ratio:auto;min-height:230px}
.post-list.two .post-row:not(.lead) .meta{grid-area:meta;align-self:end}
.post-list.two .post-row:not(.lead) .body{grid-area:body}
.article-cover{aspect-ratio:16/9}
@media (max-width:1080px){.post-list.two{grid-template-columns:1fr}}
@media (max-width:760px){.post-list.two .post-row:not(.lead){display:flex}.post-list.two .post-row:not(.lead) .post-cover{margin:-24px -24px 4px;border-radius:15px 15px 0 0;min-height:0;aspect-ratio:16/10}}

/* About: Gemini section */
.gemini-sec .ai-vis{margin-top:36px}
.gem-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.gem-points>div{padding:26px;border:1px solid var(--rule);border-radius:16px;background:#fff}
.gem-points h3{font-size:19px;margin:16px 0 8px}
.gem-points p{font-size:15.5px;color:var(--text)}
.gem-ic{display:inline-grid}
.gem-ic>.svc-ic{width:48px;height:48px}
.gem-ic>svg{width:48px;height:48px;padding:11px;border-radius:14px;background:#0f140f;color:#9b72ff;box-sizing:border-box}
.gem-points .rv.in .svc-ic::before{opacity:.75}
.gem-points .rv.in .svc-ic .dr{stroke-dashoffset:0}
.gem-read{margin-top:28px}
.tech.tight{padding:24px 0 0}
@media (max-width:900px){.gem-points{grid-template-columns:1fr}}
.plan .tier{min-height:26px;align-items:center}
.u-plan-tier{display:flex;align-items:center;height:24px;margin-bottom:6px}
.u-plan-tier.hot{display:inline-flex;height:24px;padding:0 12px;margin-bottom:6px}
/* Our work: the longer heading from the brief */
html:root body .head-long h1{font-size:clamp(30px,3.9vw,54px);max-width:17em}

.hero-scene{bottom:86px}
@media (max-width:1080px){.hero-scene{bottom:auto}}