/* Weslo Digital — shared stylesheet for the prototype set. Dark-committed brand world: charcoal ground, chevron blue action, chevron green confirm. */ :root{ color-scheme: dark; --ink:#2E2F31; --ink-deep:#232426; --surface:#37393C; --line:#46494D; --paper:#F3F5F7; --muted:#A6ACB2; --dim:#8B9299; --sky:#38A1DB; --sky-lo:#2A86BA; --grass:#3FAE62; --display:"Poppins","Century Gothic",system-ui,sans-serif; --body:"Barlow","Helvetica Neue",Arial,sans-serif; --w:1140px; --r:5px; } *{box-sizing:border-box} html{scroll-behavior:smooth} #free-audit{scroll-margin-top:90px} body{background:var(--ink);color:var(--paper);font-family:var(--body);font-size:16px;line-height:1.6;margin:0;-webkit-font-smoothing:antialiased} .wrap{max-width:var(--w);margin:0 auto;padding-inline:20px;position:relative;z-index:1} h1,h2,h3{font-family:var(--display);margin:0;line-height:1.12;text-wrap:balance;letter-spacing:-0.02em;font-weight:600} h1{font-size:clamp(2rem,4.6vw,3.1rem);font-weight:700} h2{font-size:clamp(1.6rem,3.3vw,2.25rem)} h3{font-size:1.14rem;letter-spacing:-0.01em} p{margin:0} a{color:var(--sky)} .eyebrow{font-family:var(--display);font-size:.74rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--sky);margin:0} .lede{color:var(--muted);max-width:62ch} .small{font-size:.875rem;color:var(--muted)} section{border-top:1px solid var(--line);position:relative;overflow:hidden} section .wrap{padding-block:clamp(42px,5.5vw,68px)} .band{background:var(--ink-deep)} .sechead{display:flex;flex-direction:column;gap:12px;margin-bottom:32px;max-width:66ch} .grid{display:grid;gap:20px} .g2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))} .g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))} .g4{grid-template-columns:repeat(auto-fit,minmax(225px,1fr))} .grid>*{min-width:0} .prose{max-width:var(--measure,66ch);display:flex;flex-direction:column;gap:16px;color:var(--muted)} .prose strong{color:var(--paper);font-weight:600} .prose h3{color:var(--paper);margin-top:14px} .prose ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px} /* ---------- chevron mark ---------- */ .logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--paper)} .logo .word{font-family:var(--display);font-weight:700;font-size:1.3rem;letter-spacing:-0.025em;white-space:nowrap} /* zoomed, low-opacity chevron behind a content block */ .chevbg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0} .chevbg svg{position:absolute;opacity:.02;color:var(--sky)} .chevbg.right svg{right:-10%;top:50%;transform:translateY(-50%);height:190%;width:auto} .chevbg.left svg{left:-14%;top:50%;transform:translateY(-50%);height:200%;width:auto} .chevbg.corner svg{right:-6%;bottom:-40%;height:150%;width:auto;opacity:.015} @media (max-width:760px){.chevbg svg{opacity:.012}} /* chevron as a small inline list marker */ .chevlist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px} .chevlist li{display:flex;gap:11px;align-items:flex-start;color:var(--muted)} .chevlist .m{flex:none;margin-top:6px} /* chevron divider rule */ .chevrule{display:flex;align-items:center;gap:12px;margin:0 0 18px} .chevrule .bar{height:1px;background:var(--line);flex:1} /* ---------- header ---------- */ .topbar{position:sticky;top:0;z-index:40;background:rgba(35,36,38,.95);backdrop-filter:blur(8px); border-bottom:1px solid var(--line);transition:transform .25s ease} /* give the bar back on a phone: it slides away as you read down and returns the moment you scroll up, so it is never costing height while someone is reading */ .topbar.hide{transform:translateY(-100%)} .topbar .wrap{display:flex;align-items:center;gap:20px;min-height:68px;padding-block:10px;flex-wrap:nowrap} .nav{display:flex;gap:18px;margin-left:auto} .nav a{color:var(--muted);text-decoration:none;font-weight:500;font-size:.93rem;white-space:nowrap} .nav a:hover,.nav a[aria-current]{color:var(--paper)} .tel{font-family:var(--display);font-weight:600;font-size:1.02rem;color:var(--paper);text-decoration:none;white-space:nowrap} /* icon buttons + mobile panel: present in the markup always, shown only under 920px */ .iconbtn{display:none;align-items:center;justify-content:center;width:42px;height:42px;flex:0 0 auto; border:1px solid var(--line);border-radius:var(--r);background:transparent;color:var(--paper); cursor:pointer;padding:0;text-decoration:none} .iconbtn:hover{border-color:var(--sky);color:var(--sky)} .iconbtn:focus-visible{outline:2px solid var(--sky);outline-offset:2px} .bars,.bars::before,.bars::after{display:block;width:18px;height:2px;background:currentColor;border-radius:2px; transition:transform .2s ease,opacity .2s ease} .bars::before,.bars::after{content:"";position:absolute} .bars::before{transform:translateY(-6px)} .bars::after{transform:translateY(6px)} .burger{position:relative} .burger[aria-expanded="true"] .bars{background:transparent} .burger[aria-expanded="true"] .bars::before{transform:rotate(45deg)} .burger[aria-expanded="true"] .bars::after{transform:rotate(-45deg)} .mobnav{display:none;border-top:1px solid var(--line);background:var(--ink-deep); padding:14px 20px calc(20px + env(safe-area-inset-bottom,0px));flex-direction:column;gap:14px; max-height:calc(100dvh - 58px);overflow-y:auto} .mobnav nav{display:flex;flex-direction:column} .mobnav nav a{color:var(--paper);text-decoration:none;font-family:var(--display);font-weight:600; font-size:1.05rem;padding:14px 0;border-bottom:1px solid var(--line)} .mobnav nav a[aria-current]{color:var(--sky)} .mobtel{text-align:center;font-family:var(--display);font-weight:600;font-size:1.05rem; color:var(--paper);text-decoration:none} @media (max-width:920px){ .topbar .wrap{min-height:58px;gap:10px;padding-block:8px} .nav,.tel,.btn.cta-head{display:none} .iconbtn{display:inline-flex} .callbtn{margin-left:auto} .logo .word{font-size:1.12rem} .mobnav[data-open]{display:flex} } @media (max-width:360px){.logo .word{display:none}} /* ---------- breadcrumbs ---------- */ .crumb{font-size:.84rem;color:var(--dim)} .crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0} .crumb li{display:flex;gap:6px;align-items:center} .crumb li+li::before{content:"›";color:var(--line)} .crumb a{color:var(--dim);text-decoration:none} .crumb a:hover{color:var(--sky);text-decoration:underline} .crumb [aria-current]{color:var(--muted)} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--display);font-weight:600;font-size:.95rem;padding:13px 24px;border-radius:var(--r);border:1px solid transparent;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,color .15s} .btn-primary{background:var(--sky);color:#0E2231;border-color:var(--sky)} .btn-primary:hover{background:#4BB1E8} .btn-ghost{background:transparent;color:var(--paper);border-color:var(--line)} .btn-ghost:hover{border-color:var(--sky);color:var(--sky)} .btn-go{background:var(--grass);color:#0C2614;border-color:var(--grass)} .btn-go:hover{background:#4CC072} .btn-block{width:100%} .btn-lg{font-size:1.02rem;padding:15px 28px} .btnrow{display:flex;gap:12px;flex-wrap:wrap} /* ---------- forms ---------- */ .field{display:flex;flex-direction:column;gap:6px;margin-bottom:13px} .field label{font-family:var(--display);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .field input,.field select,.field textarea{font-family:var(--body);font-size:1rem;color:var(--paper);background:var(--ink-deep);border:1px solid var(--line);border-radius:var(--r);padding:12px 13px;width:100%} .field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--sky);outline-offset:1px;border-color:var(--sky)} .formcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;position:relative;overflow:hidden} .formnote{font-size:.8rem;color:var(--muted);margin-top:11px;text-align:center} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .steps{display:flex;gap:8px;align-items:center;margin-bottom:16px} .dot{height:3px;flex:1;background:var(--line);border-radius:2px} .dot.on{background:var(--sky)} .stepnum{font-family:var(--display);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);white-space:nowrap} /* ---------- image slots ---------- */ .figslot{position:relative;width:100%;border:1px dashed #5F646A;border-radius:var(--r);background:repeating-linear-gradient(135deg,#2A2C2E 0 10px,#2E3033 10px 20px);display:grid;place-items:center;text-align:center;padding:20px;gap:6px} .figslot .tag{font-family:var(--display);font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sky)} .figslot .desc{color:var(--muted);font-size:.88rem;max-width:42ch} .figslot .dims{font-family:ui-monospace,Menlo,monospace;font-size:.72rem;color:var(--dim)} .figreal{position:relative;width:100%;overflow:hidden;border-radius:var(--r);background:var(--ink-deep)} .figreal img{width:100%;height:100%;object-fit:cover;display:block} .ratio-wide{aspect-ratio:16/7} .ratio-4x3{aspect-ratio:4/3} .ratio-3x2{aspect-ratio:3/2} .ratio-port{aspect-ratio:4/5} .ratio-sq{aspect-ratio:1/1} figure{margin:0;display:flex;flex-direction:column;gap:8px} figcaption{font-size:.82rem;color:var(--dim)} .split{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:34px;align-items:start} .split.rev{grid-template-columns:1fr minmax(260px,340px)} @media (max-width:840px){.split,.split.rev{grid-template-columns:1fr}} /* ---------- cards, tiers, reviews ---------- */ .card{display:flex;flex-direction:column;gap:9px;padding:20px;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:inherit;transition:border-color .15s,background .15s} .card:hover{border-color:var(--sky);background:#323437} .card h3{color:var(--paper)} .card p{color:var(--muted);font-size:.93rem} .card .more{color:var(--sky);font-size:.88rem;font-weight:500;margin-top:auto} .kicker{font-family:var(--display);font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sky)} .tier{display:flex;flex-direction:column;gap:10px;padding:22px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)} .tier.pick{border-color:var(--sky);box-shadow:inset 0 2px 0 var(--sky)} .tier .fig{font-family:var(--display);font-weight:700;font-size:2rem;line-height:1} .tier .per{color:var(--muted);font-size:.86rem} .tier ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px;color:var(--muted);font-size:.92rem} .badge{display:inline-flex;align-self:flex-start;font-family:var(--display);font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:999px;color:var(--sky);border:1px solid rgba(56,161,219,.45);background:rgba(56,161,219,.1)} .badge-go{color:var(--grass);border-color:rgba(63,174,98,.45);background:rgba(63,174,98,.1)} .note{border-left:2px solid var(--grass);padding:12px 0 12px 16px;color:var(--muted);max-width:64ch} .note strong{color:var(--paper)} .ribbon{display:grid;grid-template-columns:auto 1fr 1fr;gap:28px;align-items:center} @media (max-width:900px){.ribbon{grid-template-columns:1fr;gap:20px}} .rating{display:flex;gap:13px;align-items:center;flex:none} .gmark{width:46px;height:46px;border-radius:var(--r);display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);flex:none} .score{font-family:var(--display);font-weight:700;font-size:1.7rem;line-height:1;margin-right:8px} .stars{color:var(--grass);letter-spacing:.1em;font-size:.95rem} /* trusted-by logo strip */ .logolabel{font-family:var(--display);font-size:.72rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);margin-bottom:14px} .logostrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px 18px;align-items:stretch} .logoslot{ border:1px dashed #5F646A;border-radius:var(--r); background:repeating-linear-gradient(135deg,#2A2C2E 0 10px,#2E3033 10px 20px); aspect-ratio:3/1;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:3px;padding:8px;text-align:center;min-width:0; } .logoslot .lname{font-family:var(--display);font-weight:600;font-size:.84rem;color:#B6BCC2;line-height:1.2} .logoslot .ldim{font-family:ui-monospace,Menlo,monospace;font-size:.62rem;color:var(--dim)} /* Real logos. brightness(0) invert(1) flattens any artwork — dark, light or multicolour — to a white silhouette while keeping its alpha, which is the only way a strip mixing navy wordmarks and white reversed marks reads evenly on charcoal. Hover returns the real thing. */ .logocell{min-height:84px;display:flex;align-items:center;justify-content:center;padding:6px;min-width:0} .clientlogo{max-width:100%;max-height:72px;width:auto;height:auto;object-fit:contain; opacity:.8;filter:brightness(0) invert(1);transition:opacity .18s ease,filter .18s ease} .logocell:hover .clientlogo{opacity:1;filter:none} @media (prefers-reduced-motion:reduce){.clientlogo{transition:none}} /* text stand-in for a client whose logo file we don't have yet — same optical weight as the white marks beside it, so the row still reads as one line of brands */ .logoword{font-family:var(--display);font-weight:600;font-size:.95rem;line-height:1.25; letter-spacing:.01em;color:var(--paper);opacity:.52;text-align:center; text-wrap:balance;transition:opacity .18s ease} .logocell:hover .logoword{opacity:.8} /* budget calculator block. The illustration bleeds past the block's left margin and off the bottom edge, desaturated and tinted toward the brand so it reads as part of the page rather than pasted in. Decorative only — empty alt, aria-hidden. */ .budgetband{overflow:hidden} .budgetart{ position:absolute;left:-70px;bottom:-90px;width:min(430px,38vw);height:auto;z-index:0; pointer-events:none;user-select:none; /* It sits BEHIND body copy, so it fades out toward the top-right before it reaches the text. Two masks: one kills the bottom edge, one dissolves it away from the bottom-left corner it is anchored to. */ opacity:.3; -webkit-mask-image:linear-gradient(to top,transparent 0,#000 22%,#000 100%), radial-gradient(ellipse 125% 115% at 0% 100%,#000 32%,transparent 78%); mask-image:linear-gradient(to top,transparent 0,#000 22%,#000 100%), radial-gradient(ellipse 125% 115% at 0% 100%,#000 32%,transparent 78%); -webkit-mask-composite:source-in; mask-composite:intersect; } @media (max-width:1180px){.budgetart{left:-120px;width:360px;opacity:.22}} @media (max-width:880px){.budgetart{left:auto;right:-90px;bottom:-70px;width:300px;opacity:.12}} @media (max-width:560px){.budgetart{display:none}} .budgetband .budget{position:relative;z-index:1} /* No indent: this block sits on the page gutter like every other section. The old clamp(0,9vw,150px) pushed it up to 150px right of everything above and below it. */ .budget{display:grid;grid-template-columns:1fr minmax(320px,420px);gap:38px;align-items:center} @media (max-width:880px){.budget{grid-template-columns:1fr;gap:26px}} .budgetcopy{display:flex;flex-direction:column;gap:14px} .budgetname{font-family:var(--display);font-weight:700; font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.12;letter-spacing:-0.02em; color:var(--sky);margin:2px 0 0;text-wrap:balance} .budgetcalc{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--sky);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:4px} .brow{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media (max-width:460px){.brow{grid-template-columns:1fr}} .bout{border-top:1px solid var(--line);margin:10px 0 14px;padding-top:16px} .blabel{font-family:var(--display);font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .bfig{font-family:var(--display);font-weight:700;font-size:2.4rem;line-height:1.1;color:var(--paper);font-variant-numeric:tabular-nums;margin-top:6px} .brange{color:var(--muted);font-size:.88rem;margin-top:4px} /* the allocation split: a single stacked bar plus a legend that carries the dollars. The bar is decoration for the numbers, so it is role=img with one label and the legend below is the accessible version of the same data. */ .bsplit{border-top:1px solid var(--line);padding-top:16px;margin-bottom:16px} .sbar{display:flex;height:9px;border-radius:999px;overflow:hidden;background:var(--ink-deep);margin-top:9px} .sbar>i{display:block;height:100%;transition:flex-basis .28s ease} .slist{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px} .slist li{display:flex;align-items:baseline;gap:7px;font-size:.84rem;color:var(--muted);line-height:1.35} .slist .dot{flex:0 0 auto;width:8px;height:8px;border-radius:2px;transform:translateY(-1px)} .slist .sname{color:var(--paper)} .slist .samt{margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap} /* industries hero */ .indhero{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center} @media (max-width:880px){.indhero{grid-template-columns:1fr;gap:26px}} .indstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--r);overflow:hidden} @media (max-width:760px){.indstats{grid-template-columns:repeat(2,minmax(0,1fr))}} /* A page with only three stats gets three columns, not a blank fourth cell (branding has no fourth figure worth inventing). On narrow screens the three stack 2+1 with the last spanning the row. */ .indstats:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))} @media (max-width:760px){ .indstats:has(> :nth-child(3):last-child){grid-template-columns:repeat(2,minmax(0,1fr))} .indstats:has(> :nth-child(3):last-child)>:last-child{grid-column:1/-1} } .indstats>div{background:var(--ink);padding:18px 20px;display:flex;flex-direction:column;gap:4px} .indstats .sfig{font-family:var(--display);font-weight:700;font-size:1.9rem;line-height:1;color:var(--paper)} .indstats .scap{color:var(--muted);font-size:.86rem;line-height:1.4} /* industry trade lists: columns collapse by width, never a single tall stack */ .tradecols ul{grid-template-columns:repeat(4,minmax(0,1fr))} @media (max-width:1020px){.tradecols ul{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:700px){.tradecols ul{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:420px){.tradecols ul{grid-template-columns:1fr}} .card ul li a:hover span{color:var(--sky)} /* ticked bullet lists inside cards */ .ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .ticks li{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:.93rem;line-height:1.5} .ticks li svg{flex:0 0 auto;margin-top:4px} /* design map: template cards and status pills */ .tplcard{gap:14px} .tplhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px} .tplhead h3{flex:1 1 auto} .tplref{display:inline-block;font-family:var(--display);font-size:.72rem;font-weight:700;letter-spacing:.08em; color:var(--sky);border:1px solid rgba(56,161,219,.45);border-radius:3px;padding:2px 7px} .blocklist{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:.9rem;line-height:1.45} .blocklist li::marker{color:var(--dim);font-family:var(--display);font-size:.82rem} .st{display:inline-block;font-family:var(--display);font-size:.68rem;font-weight:600;letter-spacing:.09em; text-transform:uppercase;padding:3px 8px;border-radius:999px;border:1px solid var(--line);color:var(--dim);white-space:nowrap} .st-done{color:var(--grass);border-color:rgba(63,174,98,.5);background:rgba(63,174,98,.1)} .st-legacy{color:#E0A64A;border-color:rgba(224,166,74,.5);background:rgba(224,166,74,.1)} .st-todo{color:var(--muted)} .st-vsl{color:var(--sky);border-color:rgba(56,161,219,.45);background:rgba(56,161,219,.1)} .dimcell{color:var(--dim)} /* build spec: a long reference document, so density beats whitespace here */ .pgnav{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:5px 18px} .pgnav a{display:flex;align-items:center;gap:8px;color:var(--muted);text-decoration:none;font-size:.9rem;padding:4px 0} .pgnav a:hover{color:var(--sky)} .tplref.sm{font-size:.62rem;padding:1px 5px;flex:0 0 auto} .pg{border-top:1px solid var(--line);padding-top:26px;margin-top:34px;scroll-margin-top:80px} .pg:first-child{border-top:none;margin-top:0;padding-top:0} .pghead{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:flex-end;margin-bottom:16px} .pghead h2{font-family:ui-monospace,Menlo,monospace;font-size:1.3rem;margin-top:7px;letter-spacing:-.01em} .pgmeta{display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right} .kvs{display:flex;flex-direction:column;gap:7px} .kvs.meta{background:var(--ink-deep);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:18px} .kv{display:grid;grid-template-columns:132px 1fr;gap:12px;align-items:baseline;font-size:.9rem;line-height:1.45} @media (max-width:620px){.kv{grid-template-columns:1fr;gap:2px}} .kvk{font-family:var(--display);font-size:.65rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)} .kvv{color:var(--muted);min-width:0;overflow-wrap:anywhere} .kvv strong{color:var(--paper);font-weight:600} .len{display:inline-block;font-family:ui-monospace,Menlo,monospace;font-size:.7rem;padding:1px 6px;border-radius:3px;margin-left:5px} .len.ok{color:var(--grass);background:rgba(63,174,98,.13)} .len.warn{color:#E0A64A;background:rgba(224,166,74,.13)} .blks{display:flex;flex-direction:column;gap:10px} .blk{border:1px solid var(--line);border-left:2px solid var(--sky);border-radius:var(--r);padding:13px 15px;display:flex;flex-direction:column;gap:9px} .blkhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .bn{font-family:ui-monospace,Menlo,monospace;font-size:.72rem;color:var(--ink-deep);background:var(--sky);border-radius:3px;padding:1px 6px;font-weight:700} .btype{font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--paper)} .bw{margin-left:auto;font-family:ui-monospace,Menlo,monospace;font-size:.7rem;color:var(--dim)} .sub{display:flex;gap:12px;flex-wrap:wrap;align-items:baseline} .subk{font-family:var(--display);font-size:.65rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);flex:0 0 132px} @media (max-width:620px){.subk{flex-basis:100%}} .chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:5px;flex:1 1 300px;min-width:0} .chips li{font-size:.82rem;color:var(--muted);background:var(--ink-deep);border:1px solid var(--line);border-radius:3px;padding:2px 8px;overflow-wrap:anywhere} /* ---------- city landing page: "the local brief" ---------- A sticky contents rail beside one long column. The point is that a city page can carry 2,000 words of genuinely local writing without becoming a wall, and that adding a section is one more heading rather than one more band to design. */ .cityhero{border-top:none} .cityhead{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center} @media (max-width:900px){.cityhead{grid-template-columns:1fr;gap:26px}} .cityhead>div:first-child{display:flex;flex-direction:column;gap:16px} .cityhead h1{max-width:16ch} .doc{display:grid;grid-template-columns:232px 1fr;gap:52px;align-items:start} /* The first column is the contents rail. Pages without one were putting the write-up itself in that 232px column, so every results page but Arctic Air was reading at a fifth of its container width. */ .doc:not(:has(> .toc)){grid-template-columns:minmax(0,1fr)} @media (max-width:940px){.doc{grid-template-columns:1fr;gap:28px}} .toc{position:sticky;top:88px;display:flex;flex-direction:column;gap:14px} @media (max-width:940px){.toc{position:static;top:auto;border-bottom:1px solid var(--line);padding-bottom:20px}} .tocl{font-family:var(--display);font-size:.65rem;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--dim)} .toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px; border-left:1px solid var(--line)} .toc ol a{display:block;color:var(--muted);text-decoration:none;font-size:.9rem;line-height:1.35; padding:8px 0 8px 14px;margin-left:-1px;border-left:2px solid transparent;transition:color .15s,border-color .15s} .toc ol a:hover{color:var(--paper)} .toc ol a[aria-current="true"]{color:var(--sky);border-left-color:var(--sky);font-weight:500} .tocbox{border:1px solid var(--line);border-left:2px solid var(--grass);border-radius:var(--r); padding:14px;display:flex;flex-direction:column;gap:8px} .tocbl{font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--paper);line-height:1.25} /* the long column. Generous measure and rhythm — this is the page's main job. */ .docbody{max-width:70ch;min-width:0} .docsec{border-top:none;overflow:visible;scroll-margin-top:96px;padding-bottom:40px} .docsec+.docsec{border-top:1px solid var(--line);padding-top:38px} .docsec h2{margin-bottom:18px;max-width:22ch} .docsec h3{color:var(--paper);margin:26px 0 10px} .docsec p{color:var(--muted);margin-bottom:15px;line-height:1.72} .docsec p strong{color:var(--paper);font-weight:600} .docsec .tablewrap{margin:22px 0} .pull{border-left:2px solid var(--sky);padding:4px 0 4px 20px;margin:26px 0} .pull p{font-family:var(--display);font-size:1.22rem;font-weight:500;line-height:1.4; color:var(--paper);margin:0;text-wrap:balance} /* named-client proof block */ .clientproof{display:grid;grid-template-columns:200px 1fr;gap:36px;align-items:center} @media (max-width:760px){.clientproof{grid-template-columns:1fr;gap:20px}} .cpmark{display:flex;align-items:center;justify-content:center;min-height:96px; border:1px solid var(--line);border-radius:var(--r);padding:18px;background:var(--ink)} .cpmark .clientlogo{opacity:.9;filter:brightness(0) invert(1)} /* neighbouring-city links */ .nbstrip{display:flex;flex-wrap:wrap;gap:9px 10px} .nbstrip a{font-family:var(--display);font-weight:500;font-size:.92rem;color:var(--paper); text-decoration:none;border:1px solid var(--line);border-radius:var(--r);padding:8px 15px; transition:border-color .15s,color .15s} .nbstrip a:hover{border-color:var(--sky);color:var(--sky)} /* ---------- T5: PPC landing page ("the offer page") ---------- Photographic hero behind a scrim, copy left, form right. Stays in the dark world; the form panel is the one lighter surface, because a form is the one thing on the page people have to read and type into. */ .lpbar{position:static} .lphero{border-top:none;position:relative;isolation:isolate;overflow:hidden} .lpbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2} /* scrim: heavier on the left so the headline always clears, whatever photo lands here */ .lphero::before{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(100deg,rgba(26,27,29,.95) 0%,rgba(26,27,29,.86) 38%,rgba(26,27,29,.42) 66%,rgba(26,27,29,.55) 100%)} .lphero .wrap{padding-block:clamp(36px,4.6vw,64px)} .lpgrid{display:grid;grid-template-columns:1.08fr minmax(360px,.92fr);gap:46px;align-items:center} @media (max-width:980px){.lpgrid{grid-template-columns:1fr;gap:30px}} .lpcopy{display:flex;flex-direction:column;gap:17px;min-width:0} .lpcopy h1{max-width:17ch} /* review proof, directly under the headline — not buried in a ribbon further down */ .proofrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .avs{display:flex} .av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center; font-family:var(--display);font-weight:600;font-size:.78rem;color:var(--paper); border:2px solid var(--ink);margin-left:-11px} .av:first-child{margin-left:0} .ratefig{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--paper);margin-left:6px} .proofrow .stars{font-size:1rem} .lpticks{list-style:none;margin:4px 0 0;padding:0;display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:9px 20px} .lpticks li{display:flex;gap:9px;align-items:flex-start;color:var(--muted);font-size:.92rem} .lpticks li svg{flex:0 0 auto;margin-top:3px} /* the form panel */ .lpformwrap{min-width:0} .lpform{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--grass); border-radius:var(--r);padding:26px;box-shadow:0 18px 50px rgba(0,0,0,.4)} .lpfk{font-family:var(--display);font-size:.66rem;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--grass)} .lpform h2{font-size:1.5rem;margin:8px 0 14px} .lpfl{list-style:none;margin:0 0 18px;padding:0 0 16px;display:flex;flex-direction:column;gap:8px; border-bottom:1px solid var(--line)} .lpfl li{display:flex;gap:9px;align-items:flex-start;color:var(--muted);font-size:.9rem} .lpfl li svg{flex:0 0 auto;margin-top:3px} .lprow{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media (max-width:440px){.lprow{grid-template-columns:1fr}} /* numbered outcome cards */ .outcard{display:flex;flex-direction:column;gap:9px;padding-top:18px;border-top:2px solid var(--sky)} .onum{font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.1em;color:var(--sky)} .outcard h3{color:var(--paper)} .outcard p{color:var(--muted);font-size:.95rem;line-height:1.6} .lpclose{background:var(--ink-deep)} .lpfoot{background:#1E1F21;border-top:1px solid var(--line)} .lpfoot .wrap{padding-bottom:26px} .lpfoot a{color:#9AA1A7;text-decoration:none} .lpfoot a:hover{color:var(--sky)} /* ---------- URL map ---------- A tree read top to bottom rather than left to right, because depth here is only three levels and the interesting information is what each branch is FOR. */ .rulecard{display:flex;flex-direction:column;gap:8px;padding:20px;border:1px solid var(--line); border-top:2px solid var(--sky);border-radius:var(--r)} .rulecard h3{color:var(--paper)} .rulecard p{color:var(--muted);font-size:.93rem;line-height:1.6} .rn{font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.1em;color:var(--sky)} .tree{display:flex;flex-direction:column;gap:30px} .lvl{display:flex;flex-direction:column;gap:12px;position:relative;padding-left:22px} .lvl::before{content:"";position:absolute;left:0;top:7px;bottom:10px;width:2px; background:linear-gradient(to bottom,var(--sky),rgba(56,161,219,.12))} .lvll{font-family:var(--display);font-size:.66rem;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--dim)} .stack{display:flex;flex-direction:column;gap:9px} .stack.tight{gap:6px} .node{border:1px solid var(--line);border-left:2px solid var(--line);border-radius:var(--r); padding:12px 15px;display:flex;flex-direction:column;gap:5px;transition:border-color .15s} .node:hover{border-left-color:var(--sky)} .nhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .node .u{font-family:ui-monospace,Menlo,monospace;font-size:.93rem;color:var(--paper); text-decoration:none;overflow-wrap:anywhere} a.u:hover{color:var(--sky);text-decoration:underline} .nwhy{color:var(--muted);font-size:.89rem;line-height:1.55;margin:0} .nwhy:empty{display:none} .cnt{font-family:var(--display);font-size:.7rem;font-weight:600;letter-spacing:.06em; color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:2px 8px;white-space:nowrap} .cnt.big{align-self:flex-start;font-size:.78rem;color:var(--sky);border-color:rgba(56,161,219,.45); background:rgba(56,161,219,.1);margin-top:4px} .ix{margin-left:auto;font-family:var(--display);font-size:.62rem;font-weight:600;letter-spacing:.1em; text-transform:uppercase;padding:2px 8px;border-radius:999px;white-space:nowrap} .ix-y{color:var(--grass);background:rgba(63,174,98,.12);border:1px solid rgba(63,174,98,.4)} .ix-n{color:#E0A64A;background:rgba(224,166,74,.12);border:1px solid rgba(224,166,74,.4)} .grouped{display:grid;grid-template-columns:minmax(260px,1fr) 1.1fr;gap:26px;align-items:start} @media (max-width:860px){.grouped{grid-template-columns:1fr;gap:16px}} .gnote{border:1px solid var(--line);border-left:2px solid var(--grass);border-radius:var(--r);padding:18px} .gnote h3{color:var(--paper);margin-bottom:8px} .gnote p{color:var(--muted);font-size:.92rem;line-height:1.6} .gnote strong{color:var(--paper)} code{font-family:ui-monospace,Menlo,monospace;font-size:.88em;color:var(--sky); background:var(--ink-deep);border-radius:3px;padding:1px 5px} /* ---------- home hero: featured-service spotlight ---------- The hero pushes one service at a time rather than describing the agency. The video lives INSIDE the featured card, not across the hero: on a homepage the video is an offer, and putting it centre stage delays the only decision that matters. */ .homehero{border-top:none} .hhgrid{display:grid;grid-template-columns:1.1fr minmax(340px,.9fr);gap:46px;align-items:center} @media (max-width:960px){.hhgrid{grid-template-columns:1fr;gap:30px}} .hhcopy{display:flex;flex-direction:column;gap:16px;min-width:0} .hhcopy h1{max-width:16ch} .feat{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--sky); border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:14px;min-width:0; box-shadow:0 18px 50px rgba(0,0,0,.34)} .featk{font-family:var(--display);font-size:.65rem;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--sky)} .feath{font-size:1.32rem;line-height:1.2;color:var(--paper)} /* click-to-play poster. Nothing autoplays and nothing loads until it is asked for. */ .featvid{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:7px;aspect-ratio:16/9;border:1px dashed #5F646A;border-radius:var(--r);text-decoration:none; background:repeating-linear-gradient(135deg,#2A2C2E 0 10px,#2E3033 10px 20px); padding:14px;text-align:center;transition:border-color .15s} .featvid:hover{border-color:var(--sky)} .play{width:52px;height:52px;border-radius:50%;background:var(--sky);color:#0E2231; display:grid;place-items:center;padding-left:4px;flex:none;transition:transform .15s} .featvid:hover .play{transform:scale(1.07)} .featvt{font-family:var(--display);font-weight:600;font-size:.9rem;color:var(--paper)} .featvd{font-family:ui-monospace,Menlo,monospace;font-size:.68rem;color:var(--dim)} .featl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .featl li{display:flex;gap:9px;align-items:flex-start;color:var(--muted);font-size:.92rem;line-height:1.5} .featl li svg{flex:0 0 auto;margin-top:3px} .featfoot{display:flex;align-items:center;gap:12px;flex-wrap:wrap; border-top:1px solid var(--line);padding-top:14px;margin-top:2px} .featp{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--paper)} .featfoot .btn{margin-left:auto;font-size:.88rem;padding:9px 16px} /* ---------- T4: seasonal demand chart ---------- Bars carry the shape, the list beneath carries the meaning and the accessible text. The chart is role=img with one label; nobody has to read a bar to get the content. */ .seasonwrap{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center} @media (max-width:880px){.seasonwrap{grid-template-columns:1fr;gap:26px}} .seasonchart{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-items:end; height:210px;padding:14px 0;border-bottom:1px solid var(--line)} .scol{display:flex;flex-direction:column;align-items:center;gap:9px;height:100%;justify-content:flex-end} .sbarwrap{width:100%;height:100%;display:flex;align-items:flex-end} .sbarfill{width:100%;border-radius:3px 3px 0 0; background:linear-gradient(to top,var(--sky-lo),var(--sky));min-height:6px} .sm{font-family:var(--display);font-size:.74rem;font-weight:600;letter-spacing:.04em;color:var(--muted)} .seasonnotes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px} .seasonnotes li{color:var(--muted);font-size:.92rem;line-height:1.55;padding-left:14px; border-left:2px solid var(--line)} .seasonnotes strong{color:var(--paper);font-family:var(--display);font-weight:600} /* ---------- T6-A: answer page ---------- Almost no sales furniture. The answer box is the whole point: a self-contained block a snippet can lift and an LLM can quote without the surrounding page. */ .anshero{border-top:none} .ansmeta{color:var(--dim);font-size:.86rem} .answerbox{border:1px solid rgba(63,174,98,.45);border-left:3px solid var(--grass); background:rgba(63,174,98,.07);border-radius:var(--r);padding:20px 22px;margin-bottom:34px} .abk{font-family:var(--display);font-size:.65rem;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--grass)} .answerbox p{color:var(--paper);font-size:1.08rem;line-height:1.62;margin-top:9px;max-width:66ch} .numlist{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:11px; color:var(--muted);line-height:1.65} .numlist li::marker{color:var(--sky);font-family:var(--display);font-weight:600} .numlist strong{color:var(--paper)} .rell{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .rell a{color:var(--muted);text-decoration:none;font-size:.88rem;line-height:1.4} .rell a:hover{color:var(--sky)} /* one inline CTA at the halfway mark, and only one */ .inlinecta{display:flex;align-items:center;gap:20px;flex-wrap:wrap; border:1px solid var(--line);border-left:2px solid var(--sky);border-radius:var(--r); padding:18px 20px;margin:34px 0} .inlinecta h3{color:var(--paper)} .inlinecta .btn{margin-left:auto} @media (max-width:560px){.inlinecta .btn{margin-left:0;width:100%}} .authorbox{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:center; border-top:1px solid var(--line);padding-top:26px;margin-top:38px} @media (max-width:560px){.authorbox{grid-template-columns:1fr}} .abyk{font-family:var(--display);font-size:.65rem;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--dim)} .authorbox h3{color:var(--paper);margin:3px 0 7px} /* the three steps beside the calculator. Their job is partly editorial and partly structural: without them the copy column was 272px against a 662px card. */ .bsteps{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:14px} .bsteps li{display:flex;gap:13px;align-items:flex-start} /* The step marker is the brand chevron rather than a numbered circle. The step's own chevron is lit and the other two sit back, so the sequence is still readable as first / second / third. */ .bsn{flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;margin-top:2px} .bsn svg{display:block;width:22px;height:12px} .bsteps strong{display:block;font-family:var(--display);font-weight:600;font-size:.97rem;color:var(--paper)} .bsteps span:not(.bsn){color:var(--muted);font-size:.9rem;line-height:1.55} /* credential row — closes the height gap in an image + prose split */ .prose .credrow,.credrow{list-style:none;margin:6px 0 0;padding:14px 0 0;border-top:1px solid var(--line); display:grid;grid-template-columns:repeat(3,minmax(0,auto));gap:10px 34px;justify-content:start} @media (max-width:440px){.prose .credrow,.credrow{grid-template-columns:1fr 1fr}} .credrow li{display:flex;flex-direction:column;gap:2px;align-items:flex-start} .cf{font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1;color:var(--paper)} .cc{color:var(--muted);font-size:.82rem;line-height:1.35;max-width:16ch} .arealist{margin-top:26px;padding-top:20px;border-top:1px solid var(--line); display:flex;flex-direction:column;gap:12px} .arealabel{font-family:var(--display);font-size:.66rem;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--dim)} /* ---------- Pulse client sign-in ---------- */ .signin{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-weight:600; font-size:.86rem;color:var(--muted);text-decoration:none;white-space:nowrap; border:1px solid var(--line);border-radius:var(--r);padding:9px 14px;transition:border-color .15s,color .15s} .signin:hover{border-color:var(--sky);color:var(--sky)} .signin:focus-visible{outline:2px solid var(--sky);outline-offset:2px} .fsignin{margin-top:16px;align-self:flex-start} @media (max-width:1180px){.topbar .signin{display:none}} /* ---------- footer socials ---------- */ .socials{display:flex;gap:9px;margin-top:16px} .socials a{width:36px;height:36px;border:1px solid var(--line);border-radius:var(--r); display:grid;place-items:center;color:#9AA1A7;transition:border-color .15s,color .15s} .socials a:hover{border-color:var(--sky);color:var(--sky)} .socials a:focus-visible{outline:2px solid var(--sky);outline-offset:2px} /* ---------- scrolling logo marquee ---------- Two identical runs translated by -50% give a seamless loop. Edges are masked so logos fade in and out rather than being guillotined by the viewport. */ .marqband{overflow:hidden;padding-bottom:34px} /* The caption that used to sit under the marquee carried the band's bottom padding in its wrapper. With the caption gone the logos sat on the border, so the band owns its own spacing now. */ .marquee{position:relative;overflow:hidden; -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent)} .mtrack{display:flex;width:max-content;animation:marq 46s linear infinite} .marquee:hover .mtrack,.marquee:focus-within .mtrack{animation-play-state:paused} .mrun{display:flex;align-items:center;flex:0 0 auto} .mcell{flex:0 0 auto;width:188px;height:88px;display:flex;align-items:center;justify-content:center;padding:8px} .mcell .clientlogo{max-height:58px;opacity:.72} .marquee .mcell:hover .clientlogo{opacity:1;filter:none} @keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){ .mtrack{animation:none;flex-wrap:wrap;width:100%;justify-content:center} .mrun[aria-hidden="true"]{display:none} .marquee{-webkit-mask-image:none;mask-image:none} } /* ---------- alternative section textures ---------- Three treatments so no two adjacent blocks carry the same decoration. The chevron watermark is the loudest, so it is rationed — never twice in a row. */ .texbg{position:absolute;inset:0;pointer-events:none;z-index:0} .gridbg{background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.055) 1px,transparent 0); background-size:26px 26px; -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000,transparent); mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000,transparent)} /* Angled matte plate. Gradient base paints instantly; the WebP layers over it. */ .platebg{background-color:var(--ink); background-image:linear-gradient(118deg,#333436 0%,#2E2F31 46%,#292A2C 100%); background-repeat:no-repeat;background-size:cover;background-position:center} .platebg::after{content:"";position:absolute;inset:0; background-repeat:no-repeat;background-size:cover;background-position:center;opacity:.9} .platebg.p-a::after{background-image:url(/assets/bg/plate-a.webp)} .platebg.p-b::after{background-image:url(/assets/bg/plate-b.webp)} .platebg.p-c::after{background-image:url(/assets/bg/plate-c.webp)} .platebg.p-d::after{background-image:url(/assets/bg/plate-d.webp)} .platebg.left::after{transform:scaleX(-1)} /* Narrow viewports: the plate's diagonal edge would cut straight through the body copy, so zoom past it and show only the panel interior. */ @media (max-width:760px){.platebg::after{background-size:260% auto;background-position:28% 32%}} .washbg.right{background:radial-gradient(ellipse 58% 120% at 92% 50%,rgba(56,161,219,.10),transparent 70%)} .washbg.left{background:radial-gradient(ellipse 58% 120% at 8% 50%,rgba(63,174,98,.085),transparent 70%)} /* Google review bar */ .revband{background:var(--ink-deep);padding-bottom:clamp(42px,5.5vw,68px)} .revband .wrap{padding-bottom:0} .rvhead{display:flex;align-items:center;justify-content:space-between;gap:24px; flex-wrap:wrap;padding-bottom:20px;margin-bottom:22px;border-bottom:1px solid var(--line)} .rvh2{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap} .rvh2 h2{margin:0;font-size:clamp(1.3rem,2.4vw,1.75rem)} .rvall{color:var(--sky);font-size:.9rem;text-decoration:none;border-bottom:1px solid transparent} .rvall:hover{border-bottom-color:var(--sky)} .rvall.pending{color:var(--dim);cursor:default} /* Rolling review marquee. Slower than the logo strip (90s) because these are read, not recognised, and paused on hover or keyboard focus so a visitor can actually finish one. Fades at both edges so cards enter and leave cleanly. */ .revmarq{position:relative;overflow:hidden;padding-block:4px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)} .rvtrack{display:flex;width:max-content;animation:rvmarq 90s linear infinite} .revmarq:hover .rvtrack,.revmarq:focus-within .rvtrack{animation-play-state:paused} .rvrun{display:flex;align-items:stretch;flex:0 0 auto} .rcard{flex:0 0 auto;width:360px;margin:0 8px;display:flex;flex-direction:column;gap:10px; padding:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)} .rcard .stars{color:#E8B33A;font-size:.95rem;letter-spacing:.08em} .rcard p{color:var(--paper);font-size:.93rem;line-height:1.55;margin:0;flex:1; display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden} .rcard footer{display:flex;flex-direction:column;gap:2px;padding-top:10px; border-top:1px solid var(--line)} .rcard cite{font-style:normal;font-family:var(--display);font-weight:600; color:var(--paper);font-size:.92rem} .rrole{color:var(--dim);font-size:.82rem} @keyframes rvmarq{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){ .rvtrack{animation:none;flex-wrap:wrap;width:100%} .rvrun[aria-hidden="true"]{display:none} .rvrun{flex-wrap:wrap;justify-content:center} .revmarq{-webkit-mask-image:none;mask-image:none} .rcard p{-webkit-line-clamp:none;overflow:visible} } @media (max-width:620px){.rcard{width:290px}} /* Pricing — grouped by service, with a jump nav */ .pnavwrap{border-top:none;position:sticky;top:0;z-index:30;background:var(--ink-deep); border-bottom:1px solid var(--line)} .pnavwrap .wrap{display:flex;align-items:center;gap:14px;padding-block:12px;flex-wrap:wrap} .pnav{display:flex;flex-wrap:wrap;gap:7px} .pchip{font-size:.86rem;color:var(--muted);background:var(--ink);border:1px solid var(--line); border-radius:999px;padding:6px 14px;text-decoration:none;white-space:nowrap; transition:color .15s,border-color .15s} .pchip:hover{color:var(--paper);border-color:var(--sky-lo)} .priceblock{scroll-margin-top:72px} .phead{display:flex;align-items:flex-end;justify-content:space-between;gap:18px; flex-wrap:wrap;margin-bottom:22px;padding-bottom:14px;border-bottom:1px solid var(--line)} .phead h2{margin:0} .pfrom{font-family:var(--display);font-size:.9rem;color:var(--grass);font-weight:600} .pmore{font-size:.86rem;padding:8px 16px;white-space:nowrap} .grid.g1{grid-template-columns:minmax(0,420px)} @media (max-width:620px){.pnavwrap{position:static}} /* Results grid — filterable client cards */ .rfilters{display:flex;flex-direction:column;gap:12px;padding-bottom:22px;margin-bottom:26px; border-bottom:1px solid var(--line)} .frow{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap} .flabel{font-family:var(--display);font-size:.7rem;font-weight:600;letter-spacing:.15em; text-transform:uppercase;color:var(--dim);min-width:72px} .fchips{display:flex;flex-wrap:wrap;gap:7px} .fchip{font-family:var(--body);font-size:.86rem;color:var(--muted);background:var(--ink-deep); border:1px solid var(--line);border-radius:999px;padding:6px 14px;cursor:pointer; transition:border-color .15s,color .15s,background .15s} .fchip:hover{color:var(--paper);border-color:var(--dim)} .fchip.on{background:var(--sky);border-color:var(--sky);color:#0C1114;font-weight:600} .fmeta{justify-content:space-between;align-items:center;margin-top:2px} .rcount{font-family:var(--display);font-size:.9rem;color:var(--paper);font-weight:600} .fclear{background:none;border:none;color:var(--dim);font-size:.86rem;cursor:pointer; text-decoration:underline;text-underline-offset:3px;padding:4px} .fclear:hover{color:var(--paper)} .rgrid{display:flex;flex-direction:column;gap:10px} .rcard{border:1px solid var(--line);border-radius:var(--r);background:var(--ink-deep);overflow:hidden} .rcard:has(.rhead[aria-expanded="true"]){border-color:var(--sky-lo)} .rhead{display:grid;grid-template-columns:150px 1fr auto 22px;gap:20px;align-items:center; width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:16px 18px; font-family:inherit;transition:background .15s} .rhead:hover{background:var(--surface)} .rmark{display:flex;align-items:center;justify-content:flex-start;min-height:40px} .rmark .clientlogo{max-height:38px;filter:brightness(0) invert(1);opacity:.9} .rmeta{display:flex;flex-direction:column;gap:2px;min-width:0} .rname{font-family:var(--display);font-weight:600;color:var(--paper);font-size:1rem} .rsec{font-size:.84rem;color:var(--dim)} .rfig{display:flex;flex-direction:column;align-items:flex-end;text-align:right;max-width:30ch} .rnum{font-family:var(--display);font-weight:700;font-size:1.5rem;color:var(--grass);line-height:1.1} .rfig.pending .rnum{color:var(--line)} .rwhat{font-size:.78rem;color:var(--dim);line-height:1.3} .rchev{color:var(--dim);display:flex;transition:transform .18s ease} .rhead[aria-expanded="true"] .rchev{transform:rotate(180deg);color:var(--sky)} .rbody{padding:4px 18px 20px;border-top:1px solid var(--line); display:flex;flex-direction:column;gap:14px} .rsvcs{display:flex;flex-wrap:wrap;gap:6px;padding-top:14px} .svc{font-size:.76rem;color:var(--sky);border:1px solid var(--sky-lo);border-radius:999px;padding:3px 11px} .rwork{margin:0} .rnote{color:var(--muted);font-size:.92rem;margin:0;font-style:italic} .rbtn{align-self:flex-start;font-size:.86rem;padding:8px 16px} .rempty{color:var(--dim);text-align:center;padding:36px 0} /* [hidden] is display:none at UA specificity (0,0,1) — a class rule setting display:flex beats it, so these have to say it explicitly. */ .rbody[hidden],.rcard[hidden],.rempty[hidden]{display:none} @media (max-width:860px){ .rhead{grid-template-columns:1fr 22px;grid-template-areas:"mark chev" "meta chev" "fig chev";gap:10px} .rmark{grid-area:mark}.rmeta{grid-area:meta} .rfig{grid-area:fig;align-items:flex-start;text-align:left;max-width:none} .rchev{grid-area:chev;align-self:start;margin-top:6px} } @media (prefers-reduced-motion:reduce){.rchev{transition:none}} /* Service areas index */ .aregions{display:flex;flex-direction:column;gap:26px} .aregion{display:grid;grid-template-columns:260px 1fr;gap:22px;align-items:start; padding-top:20px;border-top:1px solid var(--line)} .aregion:first-child{border-top:none;padding-top:0} .arhead h3{margin:0 0 5px} .acities{display:flex;flex-wrap:wrap;gap:8px} .acity{display:inline-flex;flex-direction:column;gap:1px;padding:8px 13px;border-radius:var(--r); border:1px solid var(--line);background:var(--ink-deep);color:var(--muted); font-size:.92rem;line-height:1.25;text-decoration:none} a.acity.live{border-color:var(--sky-lo);color:var(--paper)} a.acity.live:hover{background:var(--surface);border-color:var(--sky)} .acs{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)} a.acity.live .acs{color:var(--sky)} @media (max-width:760px){.aregion{grid-template-columns:1fr;gap:12px}} .protonote{margin-top:30px;padding:10px 14px;border:1px dashed #4E5257;border-radius:var(--r); color:var(--dim);font-size:.8rem} .protonote a{color:var(--dim)} .protonote a:hover{color:var(--sky)} /* ---------- T6-B: case study ("the receipt") ---------- Result first. Somebody scanning has one question — did it work and by how much — so the number sits above the fold and the story explains it underneath. */ .unverified{border-top:none;background:rgba(224,166,74,.08)} .unvbox{border-left:3px solid #E0A64A;padding-left:16px} .unvk{font-family:var(--display);font-size:.68rem;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:#E0A64A} .unvbox p{margin-top:6px;max-width:74ch} .unvbox .ticks li{font-size:.88rem} .cshero{border-top:none} .csgrid{display:grid;grid-template-columns:1.15fr minmax(280px,.85fr);gap:44px;align-items:center} @media (max-width:900px){.csgrid{grid-template-columns:1fr;gap:28px}} .cscopy{display:flex;flex-direction:column;gap:15px;min-width:0} .cscopy h1{max-width:14ch} .csmark{display:flex;align-items:center;height:62px} .csmark .clientlogo{max-height:52px;opacity:.95;filter:brightness(0) invert(1)} .csmeta{display:flex;gap:34px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:16px;margin-top:4px} .csmk{display:block;font-family:var(--display);font-size:.64rem;font-weight:600;letter-spacing:.15em; text-transform:uppercase;color:var(--dim);margin-bottom:6px} .csmv{color:var(--muted);font-size:.92rem} .cssvc{display:flex;gap:7px;flex-wrap:wrap} .cssvc a{font-size:.85rem;color:var(--sky);text-decoration:none;border:1px solid rgba(56,161,219,.4); border-radius:999px;padding:3px 11px} .cssvc a:hover{background:rgba(56,161,219,.12)} /* the headline number */ .csbig{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--grass); border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:6px; box-shadow:0 18px 50px rgba(0,0,0,.34)} .csbk{font-family:var(--display);font-size:.65rem;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--grass)} .csbfig{font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,6vw,3.8rem);line-height:1; color:var(--paper);letter-spacing:-.03em;margin:4px 0} .csbwhat{color:var(--muted);font-size:.98rem;line-height:1.45} .csbsrc{font-family:ui-monospace,Menlo,monospace;font-size:.7rem;color:var(--dim);margin-top:8px; padding-top:10px;border-top:1px solid var(--line)} /* supporting metrics — each one carries its own source line */ .mxgrid{display:flex;flex-wrap:wrap;gap:1px; background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .mx{background:var(--ink-deep);padding:20px;display:flex;flex-direction:column;gap:5px;flex:1 1 215px;min-width:0} .mxfig{font-family:var(--display);font-weight:700;font-size:1.85rem;line-height:1;color:var(--paper)} .mxwhat{color:var(--muted);font-size:.89rem;line-height:1.45} .mxsrc{font-family:ui-monospace,Menlo,monospace;font-size:.67rem;color:var(--dim);margin-top:5px} .csquote{margin:36px 0 0;padding:24px 26px;background:var(--ink-deep);border:1px solid var(--line); border-left:3px solid var(--sky);border-radius:var(--r)} .csquote p{font-family:var(--display);font-size:1.22rem;font-weight:500;line-height:1.5; color:var(--paper);text-wrap:balance;margin:0} .csquote footer{display:flex;flex-direction:column;gap:3px;margin-top:16px;padding-top:14px; border-top:1px solid var(--line)} .csquote cite{font-style:normal;font-family:var(--display);font-weight:600;color:var(--paper);font-size:.95rem} .csqr{color:var(--muted);font-size:.86rem} .csqs{font-family:ui-monospace,Menlo,monospace;font-size:.67rem;color:var(--dim);margin-top:5px} .pills{display:flex;flex-wrap:wrap;gap:8px 10px} .pills a{color:#9AA1A7;text-decoration:none;font-size:.88rem;border:1px solid var(--line);border-radius:999px;padding:6px 13px} .pills a:hover{color:var(--sky);border-color:var(--sky)} /* ---------- tables, faq ---------- */ .tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)} table{width:100%;border-collapse:collapse;font-size:.94rem} th,td{text-align:left;padding:12px 15px;border-bottom:1px solid var(--line)} th{font-family:var(--display);font-size:.72rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);background:var(--ink-deep)} td{color:var(--muted)} td:first-child{color:var(--paper)} tr:last-child td{border-bottom:none} .num{font-variant-numeric:tabular-nums;white-space:nowrap} details{border-bottom:1px solid var(--line)} details summary{cursor:pointer;list-style:none;padding:16px 0;display:flex;justify-content:space-between;gap:16px;align-items:center;font-family:var(--display);font-size:1.07rem;font-weight:600} details summary::-webkit-details-marker{display:none} details summary::after{content:"+";color:var(--sky);font-size:1.5rem;line-height:1;flex:none} details[open] summary::after{content:"–"} details .ans{padding:0 0 18px;color:var(--muted);max-width:68ch} /* ---------- footer ---------- */ /* scoped to the page footer: a bare `footer` selector also hits the