/* Self-hosted fonts, 2026-09-10. They came from fonts.googleapis.com, whose stylesheet is RENDER-BLOCKING: the page painted nothing until it resolved. On a slow mobile connection that is a blank, frozen screen — reported as ~19s with the nav and hero dead and the rotating keyword absent until everything arrived at once. Serving them from this origin removes two third-party lookups from the critical path. Bricolage Grotesque and Instrument Sans are VARIABLE fonts: Google serves ONE file spanning the whole weight range. A first attempt here saved that same file once per weight, so the browser fetched identical bytes three times — 332KB against Google's 124KB. Faces are now deduped by content hash and declared with a font-weight RANGE, which is what a variable font wants anyway. */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/a/fonts/bricolage-grotesque-400-latin-ext.1d04719f13.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/a/fonts/bricolage-grotesque-400-latin.85f55a58a3.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/a/fonts/ibm-plex-mono-400-latin-ext.f1050dc531.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/a/fonts/ibm-plex-mono-400-latin.c36f509c0a.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/a/fonts/ibm-plex-mono-500-latin-ext.77f03e26f9.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/a/fonts/ibm-plex-mono-500-latin.a76f53ca66.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/a/fonts/instrument-sans-400-latin-ext.21fac8da55.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/a/fonts/instrument-sans-400-latin.6219bc4bfd.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root{ /* four environments */ --cream:#F5F2EA; --white:#FCFBF7; --mint:#E8EFE6; --forest:#0E1A14; --forest-2:#152A20; --surface:#FFFFFF; --ink:#13150F; --slate:#5F6259; --line:#E2DCCD; --line-w:#E8E4DA; --line-m:#D5E0D2; --emerald:#0F5C41; --lime:#CDF564; --lime-soft:#E9F8C4; /* Bricolage Grotesque is a grotesque SANS. The fallback was Georgia,serif, so with font-display:swap every visitor saw the hero headline and the logo set in a serif until the webfont landed, then snap to a sans. On Safari, which gets the font later, that state is long enough to read as "the font is wrong". --body and --mono already fall back to matching generic families; this was the only stack that did not. */ --display:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; --body:"Instrument Sans",system-ui,-apple-system,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace; --pad:clamp(20px,4vw,60px); --sec:clamp(78px,9vw,148px); } *{box-sizing:border-box} /* overflow-x MUST NOT be `hidden` on . `hidden` makes the element a scroll container, and on iOS Safari that breaks touch scrolling of the document outright: the page renders, the nav works, programmatic window.scrollTo() works, and a finger swipe does nothing. It is the "stuck at the hero" bug, reported on an iPhone 17 Pro Max while a budget Android rendered the same page fine. Confirmed by on-device A/B on the reporting handset: baseline sticks, and three separate variants that take `hidden` off all scroll normally. HLS - a sibling site that has never had the problem - sets overflow-x on only and leaves alone. `clip` clips exactly like `hidden` but explicitly does NOT create a scroll container, so the horizontal-overflow protection is kept. body declares `hidden` first and `clip` second: a browser too old for `clip` ignores that line and keeps `hidden` on body only, which is the configuration HLS ships. Nothing in the tooling caught this because every scroll in the gates, including Lighthouse, is programmatic - and programmatic scrolling was never broken. */ html{scroll-behavior:smooth;overflow-x:clip;max-width:100%} body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip;max-width:100vw;position:relative} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} ::selection{background:var(--lime);color:var(--ink)} :focus-visible{outline:2px solid var(--emerald);outline-offset:3px;border-radius:4px} .wrap{max-width:1340px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)} /* environments */ .env{padding-top:var(--sec);padding-bottom:var(--sec);position:relative;overflow:hidden} .env-cream{background:var(--cream)} .env-white{background:var(--white)} .env-mint{background:var(--mint)} .env-dark{background:var(--forest);color:#F1F4EE} .env-dark .lead{color:rgba(241,244,238,.72)} .env-dark .hair{background:rgba(241,244,238,.16)} .env-dark::before{content:"";position:absolute;width:720px;height:720px;border-radius:50%;filter:blur(130px);opacity:.16;background:var(--lime);top:-380px;right:-220px;pointer-events:none} h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.038em;line-height:1;margin:0} h1{font-size:clamp(42px,7vw,96px);line-height:.98} h2{font-size:clamp(32px,4.8vw,66px)} /* secondary, functional section headings: quieter than the display statements */ h2.h2-sec{font-size:clamp(24px,2.5vw,36px);font-weight:500;letter-spacing:-.024em;line-height:1.18;max-width:26ch} .env-dark h2.h2-sec{color:#fff} h3{font-size:clamp(20px,1.9vw,27px);letter-spacing:-.028em;line-height:1.14} p{margin:0} .lead{font-size:clamp(17px,1.35vw,20px);color:var(--slate);line-height:1.6} .eyebrow{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:9px;padding-bottom:7px;border-bottom:2px solid var(--lime)} .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--emerald);flex:none} .env-dark .eyebrow{color:#fff;border-bottom-color:var(--lime)} .env-dark .eyebrow::before{background:var(--lime)} .limepanel .eyebrow{color:var(--ink);border-bottom-color:rgba(19,21,15,.55)} .limepanel .eyebrow::before{background:var(--ink)} .mark{background:linear-gradient(180deg,transparent 56%,var(--lime) 56%);padding:0 .04em} .hair{height:1px;background:var(--line);width:100%} /* buttons */ .btn{display:inline-flex;align-items:center;gap:11px;padding:16px 28px;border-radius:100px;font-size:15.5px;font-weight:500;border:1px solid transparent;cursor:pointer;transition:background .35s cubic-bezier(.2,.7,.3,1),color .35s,border-color .35s,transform .25s} .btn svg{transition:transform .4s cubic-bezier(.2,.7,.3,1)} .btn:hover svg{transform:translateX(4px)} .btn-lime{background:var(--lime);color:var(--ink)} .btn-lime:hover{background:var(--ink);color:#fff} .btn-ghost{border-color:rgba(19,21,15,.22);color:var(--ink)} .btn-ghost:hover{border-color:var(--ink);background:rgba(19,21,15,.05)} .btn-dark{background:var(--ink);color:#fff} .btn-dark:hover{background:var(--emerald)} .btn-outline-l{border-color:rgba(241,244,238,.32);color:#fff} .btn-outline-l:hover{border-color:#fff;background:rgba(255,255,255,.08)} .link-arrow{display:inline-flex;align-items:center;gap:9px;font-size:15.5px;font-weight:500;padding-bottom:3px;border-bottom:1px solid var(--line);transition:border-color .3s,color .3s;white-space:nowrap} .link-arrow:hover{border-color:var(--emerald);color:var(--emerald)} .link-arrow svg{transition:transform .4s cubic-bezier(.2,.7,.3,1)} .link-arrow:hover svg{transform:translate(3px,-3px)} .env-dark .link-arrow{border-color:rgba(241,244,238,.28)} .env-dark .link-arrow:hover{border-color:var(--lime);color:var(--lime)} /* #757770 replaces #9A9C94 on the three browser-mockup text rules below. At 6.5-7.5px on white, #9A9C94 measures 2.78:1 against the 4.5:1 AA requirement - axe reports it as serious on /, /local-seo and /web-design. aria-hidden on the mockups does NOT clear it, and should not: contrast is about what a sighted low-vision reader can perceive, and the text is on screen either way. #757770 is the MINIMUM darkening of the same hue that reaches AA (76% of the original, 4.54:1), chosen to keep the approved design's tone rather than reaching for a safer, darker grey. */ /* ---------- MOBILE: STATIC, NO DECORATIVE ANIMATION ---------- Measured on the live site, Chrome trace at 20x CPU throttle over 9s: baseline Paint 2,430ms render 8,621ms all animations off Paint 359ms render 2,856ms (-67%) all big shadows off Paint 2,708ms render 9,573ms (no effect) The 33 infinite animations are the cost, not the shadows. They repaint large areas continuously - the marquee alone is 70,000px2, the three workflow columns ~52,000px2 each - and on WebKit that painting happens on the main thread. That is the 3-second freeze on iPhone: the frozen hero, the dead hamburger, the sections that never fill in. Blink rasterises off the main thread, which is why a budget Android is unaffected. The hero's rotating word is NOT affected: it is driven by JS and animates with a transition, not an animation, so it keeps working. Transitions are deliberately left alone throughout - they are user-triggered and cheap. Desktop keeps every animation exactly as designed. */ @media (max-width:900px){ *,*::before,*::after{animation:none!important} /* The marquee is the one exception to the blanket kill above, and it was wrongly implicated in the first place. That pass blamed it for being 70,000px2, but area is not what costs on a transform animation: mqScroll is translateX only, so WebKit rasterises the track once and the compositor moves it: no repaint per frame. The track is also text only (no images, no SVG) and 2917x24px, so that single raster is trivial. What actually cost was the large-radius blurs underneath, which every repaint had to re-rasterise. Those are gone as of the gradient change below, and re-measured on an iPhone 13 viewport the strip is free: parked 0 long frames, worst 19ms, avg 16.7ms scrolling 0 long frames, worst 19ms, avg 16.7ms Re-enabled with !important because the blanket rule above uses it, and the old transform:none park rule is gone with it: parking was only needed because the animation was stopped. Nested inside prefers-reduced-motion:no-preference deliberately. The reduced-motion rule that stops this track does NOT use !important, so a bare !important here overrode it and kept the strip scrolling for a user who had asked for no motion. Caught in test; do not flatten this nesting. */ @media (prefers-reduced-motion:no-preference){ .mq-track{animation:mqScroll 46s linear infinite!important} } /* Several demos are only visible BECAUSE they are mid-animation: their base CSS is the animation's starting frame, not its resting state. Switching animations off left them stuck at that start frame - the Local SEO steps rendered at opacity .34 (reported as "faint") and the Google Growth mockup rendered empty, because it uses the same .d3 demo with its progress rail at width 0. Each one is pinned to the state the animation is designed to arrive at, so the static version reads as a finished timeline rather than one that never started. */ .d3 .st{opacity:1!important;transform:none!important} .d3 .rail i{width:100%!important} .d3 .st .dot{border-color:var(--lime)!important;background:var(--lime)!important;color:#13150F!important} .d4 .bars i{transform:scaleY(1)!important} } /* ---------- HEADER ---------- */ .head{position:fixed;top:0;left:0;right:0;z-index:90;padding:14px var(--pad) 0} .bar{max-width:1340px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:11px 11px 11px 24px;border-radius:100px;border:1px solid transparent;transition:all .45s cubic-bezier(.2,.7,.3,1)} .head.stuck .bar{background:rgba(252,251,247,.86);backdrop-filter:blur(18px);border-color:var(--line);box-shadow:0 12px 40px -26px rgba(19,21,15,.55)} .logo{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.05em;white-space:nowrap} .logo span{color:var(--ink);background:linear-gradient(180deg,transparent 62%,var(--lime) 62%);padding:0 .06em;border-radius:1px} .nav{display:flex;gap:2px;align-items:center} .nav a{padding:9px 15px;font-size:15px;border-radius:100px;transition:background .3s} .nav a:hover{background:rgba(19,21,15,.06)} .head-r{display:flex;align-items:center;gap:10px} .tel{font-family:var(--mono);font-size:13.5px;color:var(--slate);padding:0 6px} .tel:hover{color:var(--emerald)} .head .btn{padding:12px 22px;font-size:14.5px} .burger{display:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.6);cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px} .burger i{width:17px;height:1.5px;background:var(--ink);display:block} .mob{position:fixed;inset:80px 12px auto 12px;z-index:89;background:var(--surface);border:1px solid var(--line); border-radius:26px;padding:clamp(14px,4vw,20px);box-shadow:0 34px 70px -30px rgba(19,21,15,.42); opacity:0;visibility:hidden;transform:translateY(-10px) scale(.985);transform-origin:top center; transition:opacity .38s cubic-bezier(.2,.7,.3,1),transform .42s cubic-bezier(.2,.7,.3,1),visibility .38s} .mob.open{opacity:1;visibility:visible;transform:none} .mob-links{display:grid} .mob-links a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 14px;border-radius:14px; font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.028em; opacity:0;transform:translateY(8px);transition:opacity .45s cubic-bezier(.2,.7,.3,1),transform .45s cubic-bezier(.2,.7,.3,1),background .25s} .mob-links a::after{content:"";width:7px;height:7px;border-right:1.6px solid var(--slate);border-top:1.6px solid var(--slate);transform:rotate(45deg);opacity:.45;transition:transform .3s,opacity .3s} .mob-links a:active{background:var(--cream)} .mob-links a:hover::after{transform:rotate(45deg) translate(2px,-2px);opacity:.9} .mob.open .mob-links a{opacity:1;transform:none} .mob.open .mob-links a:nth-child(1){transition-delay:.06s} .mob.open .mob-links a:nth-child(2){transition-delay:.11s} .mob.open .mob-links a:nth-child(3){transition-delay:.16s} .mob.open .mob-links a:nth-child(4){transition-delay:.21s} .mob.open .mob-links a:nth-child(5){transition-delay:.26s} .mob-div{height:1px;background:var(--line);margin:14px 6px 18px} .mob-actions{display:grid;gap:10px;opacity:0;transform:translateY(8px);transition:opacity .45s cubic-bezier(.2,.7,.3,1) .3s,transform .45s cubic-bezier(.2,.7,.3,1) .3s} .mob.open .mob-actions{opacity:1;transform:none} .mob-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:17px 22px;border-radius:100px; font-size:16.5px;font-weight:600;letter-spacing:-.01em;transition:background .3s,color .3s,transform .25s} .mob-btn:active{transform:scale(.985)} .mob-cta{background:var(--lime);color:var(--ink)} .mob-wa{background:#2F7D46;color:#fff} .mob-tel{display:flex;align-items:center;justify-content:center;gap:9px;padding:14px;border-radius:100px; border:1px solid var(--line);font-family:var(--mono);font-size:14.5px;letter-spacing:.04em;color:var(--slate);margin-top:2px} .mob-tel svg{opacity:.6} .mob-tel:active{background:var(--cream)} /* ---------- HERO ---------- */ .hero{overflow:hidden;padding-top:clamp(132px,16vw,196px);padding-bottom:clamp(70px,8vw,120px);text-align:center;background:var(--cream)} .hero h1{max-width:17ch;margin:0 auto} .hero-sub{font-size:clamp(17px,1.35vw,20px);color:var(--slate);line-height:1.6;max-width:56ch;margin:26px auto 0} .hero-cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:32px;justify-content:center} .promise{margin-top:34px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--slate);line-height:1.75} .promise b{color:var(--ink);font-weight:500} /* ---------- device mock kit ---------- */ .frame{max-width:100%;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--surface);box-shadow:0 40px 70px -50px rgba(19,21,15,.55)} .chrome{display:flex;align-items:center;gap:7px;padding:11px 15px;background:var(--surface);border-bottom:1px solid var(--line-w)} .chrome i{width:8px;height:8px;border-radius:50%;background:var(--line);display:block} .chrome b{margin-left:9px;font-family:var(--mono);font-weight:400;font-size:11px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .chrome em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)} .site{padding:clamp(18px,2.6vw,38px);display:flex;flex-direction:column;min-height:clamp(210px,26vw,360px)} .site-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:clamp(18px,2.6vw,36px)} .site-nav .sl{font-family:var(--display);font-weight:700;font-size:clamp(11px,1vw,15px);letter-spacing:-.03em} .site-nav ul{list-style:none;display:flex;gap:clamp(10px,1.4vw,22px);margin:0;padding:0;font-size:clamp(8px,.78vw,11.5px);opacity:.7} .site-nav .sb{font-size:clamp(8px,.75vw,11px);padding:7px 14px;border-radius:100px;font-weight:600;white-space:nowrap} .site h4{font-family:var(--display);font-size:clamp(20px,2.8vw,40px);letter-spacing:-.04em;line-height:1;margin:auto 0 12px;max-width:14ch;font-weight:600} .site p{font-size:clamp(10px,.95vw,13.5px);line-height:1.55;opacity:.66;max-width:34ch;margin-bottom:16px} .site .sbtn{font-size:clamp(8px,.78vw,11.5px);font-weight:600;padding:9px 17px;border-radius:100px;width:fit-content} .site .rows{display:flex;gap:9px;margin-top:auto;padding-top:20px} .site .rows b{flex:1;height:clamp(26px,3vw,40px);border-radius:9px;background:currentColor;opacity:.09} .site.navy{background:#122A22;color:#EDF3EE}.site.navy .sb{background:var(--lime);color:#122A22} .site.paperbg{background:#F4EFE3;color:#26301F}.site.paperbg .sb{background:#26301F;color:#F4EFE3} .site.mint{background:#E7EFE9;color:#12261C}.site.mint .sb{background:var(--emerald);color:#fff} /* phone mock */ .phone{width:clamp(112px,13vw,178px);border-radius:22px;padding:6px;background:#14170F;box-shadow:0 30px 50px -26px rgba(19,21,15,.6)} .phone-in{border-radius:17px;overflow:hidden;background:#fff} .phone-bar{height:16px;background:#122A22;display:flex;align-items:center;justify-content:center} .phone-bar i{width:34px;height:4px;border-radius:3px;background:rgba(255,255,255,.35);display:block} .phone-body{padding:12px;display:grid;gap:7px} .phone-body u{text-decoration:none;height:10px;width:78%;border-radius:3px;background:var(--ink);opacity:.85} .phone-body s{text-decoration:none;height:5px;border-radius:3px;background:var(--slate);opacity:.24} .phone-body s.a{width:92%}.phone-body s.b{width:66%} .phone-body em{height:20px;width:70px;border-radius:100px;background:var(--lime);display:block;margin-top:4px} .phone-body .ph-rows{display:flex;gap:5px;margin-top:6px} .phone-body .ph-rows i{flex:1;height:26px;border-radius:6px;background:var(--slate);opacity:.1;display:block} /* composed device stage */ .stage{position:relative;padding-bottom:clamp(28px,4vw,52px);max-width:100%} .stage .phone{position:absolute;right:-6px;bottom:0;z-index:3} .stage .frame{transition:transform .9s cubic-bezier(.2,.7,.3,1)} [data-rv].in .stage .frame{transform:translateY(0)} /* ---------- SERVICES (white) ---------- */ .intro-wide{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,70px);align-items:end} .intro-wide h2{max-width:15ch} .intro-wide h2.h2-sec{max-width:16ch} .intro-wide .lead+.lead{margin-top:16px} .panels{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px);margin-top:clamp(38px,4.6vw,64px)} .panel{background:var(--surface);border:1px solid var(--line-w);border-radius:24px;overflow:hidden;display:flex;flex-direction:column;transition:transform .55s cubic-bezier(.2,.7,.3,1),box-shadow .55s,border-color .55s} .panel:hover{transform:translateY(-8px);box-shadow:0 50px 70px -50px rgba(19,21,15,.45);border-color:var(--line)} .panel-vis{height:clamp(196px,17.6vw,232px);position:relative;overflow:hidden;background:#EFEDE5;border-bottom:1px solid var(--line-w)} .panel-vis img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.2,.7,.3,1)} .panel:hover .panel-vis img{transform:scale(1.035)} .panel-vis.v1 img{object-position:left top} .panel-vis.v2 img{object-position:center 42%} .panel-vis.v3 img{object-position:center 45%} .panel-body{padding:clamp(22px,2.2vw,30px);display:flex;flex-direction:column;flex:1} .panel-body small{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);display:block;margin-bottom:12px} .panel-body h3{margin-bottom:10px} .panel-body p{font-size:15px;color:var(--slate);line-height:1.55} .panel-cta{margin-top:auto;padding-top:20px;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--ink)} .panel-cta svg{transition:transform .45s cubic-bezier(.2,.7,.3,1)} .panel:hover .panel-cta svg{transform:translateX(5px)} /* ---------- PORTFOLIO ---------- */ .shot{width:100%;height:auto;display:block} .tagc{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate); border:1px solid var(--line);background:rgba(255,255,255,.55);padding:6px 12px;border-radius:100px} .tagc::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime)} .qualify{color:var(--slate);font-size:16.5px;max-width:54ch;margin-top:16px} /* quiet realistic browser window */ .win{border-radius:9px;overflow:hidden;background:#fff;border:1px solid rgba(19,21,15,.11); box-shadow:0 2px 4px rgba(19,21,15,.04),0 30px 55px -32px rgba(19,21,15,.4); transition:transform .7s cubic-bezier(.2,.7,.3,1),box-shadow .7s} .case:hover .win{transform:translateY(-7px);box-shadow:0 2px 4px rgba(19,21,15,.04),0 50px 75px -38px rgba(19,21,15,.44)} .win-bar{display:flex;align-items:center;gap:6px;padding:0 12px;height:clamp(26px,2.2vw,32px);background:#F2F0EB;border-bottom:1px solid rgba(19,21,15,.07)} .win-bar i{width:7px;height:7px;border-radius:50%;background:#D6D2C7;flex:none} .win-bar b{margin:0 auto;font-family:var(--mono);font-weight:400;font-size:10.5px;color:#8B8A81;background:#FBFAF7; border:1px solid rgba(19,21,15,.06);border-radius:6px;padding:3px 16px;max-width:62%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* featured preview + supporting row */ .pfeat{display:block;margin-top:clamp(26px,3vw,40px)} .pfeat .win{max-width:1000px;margin:0 auto} .pfeat .shot{width:100%;height:auto;display:block} .pfeat-meta{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,4vw,70px);align-items:start;max-width:1000px;margin:0 auto 26px} .pfeat-meta .cat{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--slate);margin:18px 0 10px} .pfeat-meta h3{font-size:clamp(25px,2.4vw,34px);letter-spacing:-.032em} .pfeat-meta p{color:var(--slate);font-size:clamp(16px,1.2vw,17.5px);line-height:1.6;max-width:50ch} .pfeat-meta .link-arrow{margin-top:22px;display:inline-flex} .prow{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,2.4vw,32px);margin-top:clamp(48px,5vw,64px)} .pmini{display:block} .pmini .shot{width:100%;aspect-ratio:2.05;object-fit:cover;object-position:top center} .pmini-meta{padding-top:24px} .pmini-meta .cat{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--slate);margin-bottom:9px} .pmini-meta h3{font-size:clamp(19px,1.5vw,22px);letter-spacing:-.028em;margin-bottom:10px} .pmini-meta p{color:var(--slate);font-size:15.5px;line-height:1.55;margin-bottom:16px} .pmini-meta .link-arrow{display:inline-flex} /* ---------- WORK (cream, editorial) ---------- */ .work-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;padding-bottom:clamp(28px,3.4vw,46px)} .feat-grid{display:grid;grid-template-columns:1fr;gap:clamp(22px,2.6vw,38px)} .feat-meta{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(18px,3vw,54px);align-items:start;padding-top:26px;border-top:1px solid var(--line)} .case-meta{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin-bottom:8px} .feat-meta p{color:var(--slate);font-size:16px;max-width:56ch} .case:hover .frame{transform:translateY(-6px)} .frame{transition:transform .6s cubic-bezier(.2,.7,.3,1)} .pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,40px);margin-top:clamp(38px,4.4vw,64px)} .pair .site{min-height:clamp(170px,19vw,240px)} .pair-meta{padding-top:22px;border-top:1px solid var(--line);margin-top:22px} .pair-meta p{color:var(--slate);font-size:15.5px;margin-top:10px} /* ---------- PROBLEM (dark) ---------- */ .diag-head{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,70px);align-items:end;padding-bottom:clamp(40px,5vw,72px)} .diag-head h2{max-width:17ch} .diag{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid rgba(241,244,238,.18)} .diag article{padding:clamp(28px,3vw,46px) clamp(20px,2.4vw,38px) 0 0;border-right:1px solid rgba(241,244,238,.18);position:relative} .diag article:last-child{border-right:0} .diag article:not(:first-child){padding-left:clamp(20px,2.4vw,38px)} .diag .n{font-family:var(--display);font-size:clamp(38px,4.4vw,62px);font-weight:700;letter-spacing:-.05em;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(205,245,100,.55);display:block;margin-bottom:22px} .diag h3{font-size:clamp(20px,1.9vw,25px);margin-bottom:12px;color:#fff} .diag p{color:rgba(241,244,238,.66);font-size:15.5px;max-width:34ch} /* ---------- SPLIT SERVICE SECTIONS ---------- */ .split{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(28px,4.5vw,84px);align-items:center} .split.rev .split-vis{order:-1} .split h2{max-width:15ch;margin:18px 0 20px} .split h2.h2-sec{max-width:24ch;margin:20px 0 20px} .split .lead{max-width:44ch} .slist{display:grid;grid-template-columns:1fr 1fr;gap:11px 26px;margin:30px 0 30px;border-top:1px solid var(--line);padding-top:24px} .env-mint .slist{border-color:var(--line-m)} .env-dark .slist{border-color:rgba(241,244,238,.18)} .slist span{font-size:15px;color:var(--slate);display:flex;gap:10px;align-items:baseline} .env-dark .slist span{color:rgba(241,244,238,.74)} .slist span::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--lime);flex:none;transform:translateY(-1px)} .addon{margin-top:26px;font-size:15px;color:var(--slate);max-width:46ch} /* SERP card */ .serp{background:var(--surface);border:1px solid var(--line-w);border-radius:18px;padding:clamp(16px,1.8vw,26px);box-shadow:0 40px 70px -55px rgba(19,21,15,.5)} .serp-bar{display:flex;align-items:center;gap:10px;border:1px solid var(--line-w);border-radius:100px;padding:11px 16px;font-size:13.5px;color:var(--slate);margin-bottom:18px} .serp-bar svg{flex:none;opacity:.5} .res{padding:13px 0;border-top:1px solid var(--line-w);position:relative} .res:first-of-type{border-top:0} .res u{text-decoration:none;font-family:var(--mono);font-size:10.5px;color:var(--slate);display:block;margin-bottom:5px} .res b{display:block;font-size:14.5px;font-weight:500;color:#1B4B8F;margin-bottom:4px;letter-spacing:-.01em} .res span{font-size:12.5px;color:var(--slate);line-height:1.45;display:block} .res.you{background:var(--lime-soft);border-radius:12px;padding:13px 14px;border-top:0;margin:6px -4px} .res.you b{color:var(--emerald)} .res .pos{position:absolute;right:10px;top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;background:var(--lime);color:var(--ink);border-radius:100px;padding:4px 9px} .arch{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-w);font-family:var(--mono);font-size:11.5px;color:var(--slate);line-height:1.9} .arch b{color:var(--ink);font-weight:500} .arch em{font-style:normal;color:var(--emerald)} /* console-style chart */ .console{margin-top:clamp(14px,1.6vw,20px);background:var(--surface);border:1px solid var(--line-w);border-radius:18px;padding:clamp(16px,1.8vw,22px);box-shadow:0 30px 60px -55px rgba(19,21,15,.5)} .console-h{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin-bottom:16px} .bars{display:flex;align-items:flex-end;gap:6px;height:74px} .bars i{flex:1;background:var(--lime-soft);border-radius:4px 4px 2px 2px;display:block;height:12%;transition:height 1.1s cubic-bezier(.2,.7,.3,1)} .bars i:nth-last-child(-n+4){background:var(--lime)} .seo-shot{border-radius:12px;overflow:hidden;background:#fff;border:1px solid rgba(19,21,15,.11);box-shadow:0 2px 4px rgba(19,21,15,.04),0 30px 55px -32px rgba(19,21,15,.4)} .seo-shot img{width:100%;height:auto;display:block} .seo-note{margin-top:14px} .console-f{margin-top:12px;font-size:12px;color:var(--slate)} /* GBP composition */ .gbp{background:var(--surface);border-radius:18px;overflow:hidden;box-shadow:0 50px 80px -50px rgba(0,0,0,.6);color:var(--ink)} .gbp-top{padding:clamp(16px,1.8vw,24px);border-bottom:1px solid var(--line-w)} .gbp-top h5{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.028em;margin:0 0 6px} .stars{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--slate)} .stars i{color:#E8A33D;font-style:normal;letter-spacing:1px} .gbp-cat{font-size:13px;color:var(--slate);margin-top:5px} .gbp-acts{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap} .gbp-acts span{font-size:12px;padding:8px 14px;border-radius:100px;border:1px solid var(--line-w);color:var(--slate)} .gbp-acts span:first-child{background:var(--emerald);color:#fff;border-color:var(--emerald)} .gbp-rev{padding:clamp(14px,1.6vw,20px);display:grid;gap:13px;border-bottom:1px solid var(--line-w)} .gbp-rev div{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start} .gbp-rev em{font-style:normal;width:30px;height:30px;border-radius:50%;background:#EDEAE0;display:grid;place-items:center;font-family:var(--mono);font-size:11px;color:var(--slate)} .gbp-rev b{font-size:13px;font-weight:600;display:block;margin-bottom:2px} .gbp-rev span{font-size:12.5px;color:var(--slate);line-height:1.45} .geo-wrap{padding:clamp(14px,1.6vw,20px)} .geo-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px} .geo-head b{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);font-weight:400} .phase{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:100px;background:#F3F1E9;border:1px solid var(--line-w);color:var(--slate);transition:background .5s,color .5s,border-color .5s} .phase.on{background:var(--lime);border-color:var(--lime);color:var(--ink)} .geo-plot{border-radius:12px;padding:9px;border:1px solid var(--line-w);background: linear-gradient(#EFECE2 1px,transparent 1px) 0 0/100% 16.66%, linear-gradient(90deg,#EFECE2 1px,transparent 1px) 0 0/16.66% 100%,#F7F5EE} .cells{display:grid;grid-template-columns:repeat(6,1fr);gap:5px} .cell{aspect-ratio:1;border-radius:7px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:clamp(8px,.72vw,10.5px);background:#fff;border:1px solid var(--line-w);color:var(--slate);opacity:0;transform:scale(.6);transition:background .6s ease,color .6s ease,border-color .6s ease,opacity .45s ease,transform .5s cubic-bezier(.2,.9,.3,1.3)} .cell.show{opacity:1;transform:scale(1)} .cell.r1{background:var(--lime);border-color:#bce34f;color:var(--ink)} .cell.r2{background:var(--lime-soft);border-color:#dcefb4;color:var(--emerald)} .cell.r3{background:#fff} .cell.r4{background:transparent;border-style:dashed;color:#B9B6AA} .geo-note{margin-top:11px;font-size:11.5px;line-height:1.45;color:var(--slate)} /* ---------- WHY (cream 2x2) ---------- */ .why-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,70px);align-items:end;padding-bottom:clamp(34px,4vw,56px)} .why2{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line)} .why2 article{padding:clamp(28px,3.2vw,44px) clamp(20px,3vw,44px);border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2vw,32px);align-items:start;border-radius:22px;background:transparent; transition:background .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s cubic-bezier(.2,.7,.3,1),transform .45s cubic-bezier(.2,.7,.3,1),border-color .3s} .why2 article:nth-child(even){border-left:1px solid var(--line)} .why2 article:nth-last-child(-n+2){border-bottom:0} .why2 article:hover{background:var(--surface);border-color:transparent;transform:translateY(-6px);box-shadow:0 40px 60px -40px rgba(19,21,15,.4);position:relative;z-index:2} .why2 article:hover .n{color:var(--emerald)} .why2 .n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--emerald);padding-top:5px} .why2 h3{margin-bottom:11px} .why2 p{font-size:15.5px;color:var(--slate);max-width:40ch} /* ---------- NOT SURE (lime panel) ---------- */ .limepanel{background:var(--lime);color:var(--ink);border-radius:clamp(22px,2.6vw,36px);padding:clamp(34px,5vw,86px) clamp(26px,5vw,80px);display:grid;grid-template-columns:1fr .95fr;gap:clamp(26px,4vw,70px);align-items:center;position:relative;overflow:hidden} .limepanel::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:rgba(255,255,255,.34);filter:blur(90px);top:-260px;left:-160px;pointer-events:none} .limepanel>*{position:relative;z-index:2} .limepanel h2{max-width:14ch;margin-top:18px} .limepanel p{color:rgba(19,21,15,.74);font-size:17px;line-height:1.6} .limepanel p+p{margin-top:16px} .limepanel .btn{margin-top:28px;background:var(--ink);color:#fff} .limepanel .btn:hover{background:var(--emerald)} /* ---------- ABOUT (dark) ---------- */ .about{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4.5vw,84px);align-items:center} .years{font-family:var(--display);font-weight:700;letter-spacing:-.055em;line-height:.82;font-size:clamp(84px,13vw,190px);color:var(--lime)} .years small{display:block;font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:rgba(241,244,238,.6);margin-top:20px;line-height:1.6} .about h2{max-width:14ch;margin-bottom:24px;color:#fff} .about p{color:rgba(241,244,238,.74);font-size:17px;line-height:1.62} .about p+p{margin-top:16px} /* Labels the brand wall so a row of logos cannot be read as a client list. The rule and spacing move up onto the label so the group still reads as one block. 0.62 alpha on --forest measures 6.88:1, well clear of 4.5:1. */ .creds-label{display:block;margin-top:30px;padding-top:26px; border-top:1px solid rgba(241,244,238,.16); font-family:var(--mono);font-size:10.5px;letter-spacing:.14em; text-transform:uppercase;color:rgba(241,244,238,.62)} .creds-label + .creds{margin-top:14px;padding-top:0;border-top:0} .creds{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;padding-top:26px;border-top:1px solid rgba(241,244,238,.16)} .creds span{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.02em;padding:9px 18px;border-radius:100px;background:rgba(241,244,238,.08);color:rgba(241,244,238,.9)} /* ---------- HOW IT WORKS (timeline) ---------- */ .tl{margin-top:clamp(36px,4.4vw,62px);position:relative} .tl-line{position:absolute;left:0;right:0;top:19px;height:2px;background:var(--line-w)} .tl-line i{display:block;height:100%;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform 1.6s cubic-bezier(.2,.7,.3,1)} .tl.in .tl-line i{transform:scaleX(1)} .tl-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,44px);position:relative} .tl-steps article{padding-right:clamp(10px,2vw,26px)} .tl-dot{width:40px;height:40px;border-radius:50%;background:var(--white);border:2px solid var(--line-w);display:grid;place-items:center;font-family:var(--mono);font-size:12px;color:var(--slate);margin-bottom:24px;transition:background .5s ease,border-color .5s ease,color .5s ease} .tl.in article:nth-child(1) .tl-dot{background:var(--lime);border-color:var(--lime);color:var(--ink);transition-delay:.15s} .tl.in article:nth-child(2) .tl-dot{background:var(--lime);border-color:var(--lime);color:var(--ink);transition-delay:.5s} .tl.in article:nth-child(3) .tl-dot{background:var(--lime);border-color:var(--lime);color:var(--ink);transition-delay:.85s} .tl.in article:nth-child(4) .tl-dot{background:var(--lime);border-color:var(--lime);color:var(--ink);transition-delay:1.2s} .tl-steps h3{font-size:21px;margin-bottom:10px} .tl-steps p{font-size:15px;color:var(--slate);line-height:1.55;max-width:32ch} /* ---------- UK (typographic) ---------- */ .uk-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,70px);align-items:end;padding-bottom:clamp(30px,3.6vw,50px)} .regions{border-top:1px solid var(--line)} .regions a{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:clamp(16px,1.8vw,26px) 0;border-bottom:1px solid var(--line);font-family:var(--display);font-weight:600;letter-spacing:-.035em;font-size:clamp(26px,3.4vw,46px);line-height:1;transition:padding-left .5s cubic-bezier(.2,.7,.3,1),color .4s} .regions a em{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);opacity:0;transform:translateX(-8px);transition:opacity .4s,transform .5s cubic-bezier(.2,.7,.3,1)} .regions a:hover{padding-left:18px;color:var(--emerald)} .regions a:hover em{opacity:1;transform:none} .regions a.all{font-size:clamp(18px,1.7vw,23px);color:var(--slate)} .regions a.all:hover{color:var(--ink)} /* ---------- FAQ ---------- */ .faqgrid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,4vw,72px);align-items:start} .q{border-bottom:1px solid var(--line-w)} .q:first-child{border-top:1px solid var(--line-w)} .q button{width:100%;background:transparent;border:0;cursor:pointer;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:22px;padding:23px 0;font-family:var(--display);font-size:clamp(16.5px,1.5vw,21px);font-weight:600;letter-spacing:-.026em;color:var(--ink)} .q i{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--line-w);display:grid;place-items:center;font-style:normal;font-size:18px;line-height:1;color:var(--slate);transition:transform .45s cubic-bezier(.2,.7,.3,1),background .3s,color .3s,border-color .3s} .q.open i{transform:rotate(45deg);background:var(--lime);color:var(--ink);border-color:var(--lime)} .a{max-height:0;overflow:hidden;transition:max-height .55s cubic-bezier(.2,.7,.3,1)} .a p{padding:0 0 26px;color:var(--slate);font-size:16px;max-width:68ch} /* ---------- FINAL CTA ---------- */ .cta{text-align:center;position:relative;z-index:2} .cta h2{max-width:14ch;margin:20px auto 20px;color:#fff;font-size:clamp(38px,6vw,86px)} .cta p{color:rgba(241,244,238,.72);max-width:56ch;margin:0 auto} .cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:36px} .cta p.cta-alt{margin:42px auto 0;font-family:var(--mono);font-size:12.5px;color:rgba(241,244,238,.6)} .cta-alt a{color:var(--lime)} /* ---------- FOOTER ---------- */ .foot{background:var(--cream);padding:clamp(52px,6vw,84px) 0 32px} .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(22px,2.6vw,44px);padding-bottom:44px;border-bottom:1px solid var(--line)} .foot h5{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--slate);font-weight:400;margin:0 0 16px} .foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px} .foot a{font-size:15px;transition:color .3s} .foot a:hover{color:var(--emerald)} .foot-blurb{font-size:15px;color:var(--slate);max-width:30ch;margin:14px 0 18px} .foot-regions{margin-top:30px} .foot-reg-line{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;line-height:1.7} .foot-reg-line a{font-size:14px;color:var(--slate)} .foot-reg-line a:hover{color:var(--emerald)} .foot-reg-line .sep{color:var(--slate);opacity:.4;font-size:13px} @media(max-width:430px){.foot-reg-line{gap:5px 8px}.foot-reg-line a{font-size:13.5px}} .foot-bot{display:flex;flex-direction:column;align-items:flex-start;gap:12px;flex-wrap:wrap;padding-top:24px;font-size:13.5px;color:var(--slate)} .foot-bot a{font-size:13.5px;color:var(--slate)} /* ---------- WHATSAPP FLOAT ---------- */ .wa-float{position:fixed;right:clamp(16px,2.4vw,28px);bottom:clamp(16px,2.4vw,28px);z-index:95;display:inline-flex;align-items:center;gap:11px;padding:15px 24px;border-radius:100px;background:#2F7D46;color:#fff;font-size:16px;font-weight:600;letter-spacing:-.01em;box-shadow:0 18px 40px -16px rgba(19,45,26,.55),0 0 0 4px rgba(252,251,247,.35);opacity:0;transform:translateY(16px) scale(.96);pointer-events:none;transition:opacity .5s cubic-bezier(.2,.7,.3,1),transform .5s cubic-bezier(.2,.7,.3,1),background .3s} .wa-float.show{opacity:1;transform:none;pointer-events:auto} .wa-float:hover{background:#26663a} .wa-float svg{flex:none} /* ---------- reveal ---------- */ /* Scroll-reveal is an ENHANCEMENT, not a prerequisite. These rules only apply while carries .rv, which an inline script in the head adds and then removes again after a short failsafe window. So: no JS at all -> content is visible immediately; slow JS -> visible within the failsafe; normal -> the reveal animation plays as designed. Previously 132 elements on the homepage were opacity:0 until a DEFERRED script ran an IntersectionObserver, so every page load and every internal navigation showed an empty page until then. */ .rv [data-rv]{opacity:0;transform:translateY(26px);transition:opacity .85s cubic-bezier(.2,.7,.3,1),transform .85s cubic-bezier(.2,.7,.3,1)} .rv [data-rv].in{opacity:1;transform:none} .rv [data-vis]{opacity:0;transform:translateY(34px) scale(.985);transition:opacity 1s cubic-bezier(.2,.7,.3,1),transform 1.1s cubic-bezier(.2,.7,.3,1)} .rv [data-vis].in{opacity:1;transform:none} /* Hero entrance: a CSS animation, NOT a JS-triggered transition. It used to wait for body.loaded, which the DEFERRED site.js sets — so the

(the LCP element) stayed opacity:0 until that script had downloaded and run. On a throttled mobile profile that put LCP at 5.4s while the HTML itself arrived in ~300ms. An animation starts as soon as styles apply, so the hero now paints independently of any script. The stagger is preserved by class rather than by the inline transition-delay attributes, which no longer drive anything. */ .rv [data-load]{opacity:0;transform:translateY(28px); animation:loadIn .95s cubic-bezier(.2,.7,.3,1) .06s forwards} .rv .hero-sub[data-load]{animation-delay:.2s} .rv .hero-cta[data-load]{animation-delay:.3s} @keyframes loadIn{to{opacity:1;transform:none}} @media(max-width:1080px){ .pfeat-meta{grid-template-columns:1fr;gap:16px} .intro-wide,.diag-head,.why-head,.uk-head{grid-template-columns:1fr;align-items:start;gap:22px} .panels{grid-template-columns:1fr 1fr} .panel-vis{height:clamp(210px,26vw,280px)} .diag{grid-template-columns:1fr} .diag article{border-right:0;border-bottom:1px solid rgba(241,244,238,.18);padding:28px 0} .diag article:not(:first-child){padding-left:0} .diag article:last-child{border-bottom:0} .split,.split.rev,.limepanel,.about,.faqgrid,.pair{grid-template-columns:1fr} /* stacked: lift the visual up under the intro paragraph so the copy isn't one long wall */ .split{gap:0} .split>div:first-child{display:contents} .split .eyebrow{order:1} .split h2{order:2} .split .lead{order:3} .split .split-vis,.split.rev .split-vis{order:4;margin-top:30px;padding-top:28px;border-top:1px solid var(--line)} .env-mint .split .split-vis{border-top-color:var(--line-m)} .env-dark .split .split-vis{border-top-color:rgba(241,244,238,.18)} .split .slist{order:5;border-top:0;padding-top:0;margin:30px 0 0} .split>div:first-child>.link-arrow{order:6;margin-top:30px} .split .addon{order:7} .why2{grid-template-columns:1fr} .why2 article,.why2 article:nth-child(even){padding:26px 0;border-left:0;border-bottom:1px solid var(--line)} .why2 article:nth-last-child(-n+2){border-bottom:1px solid var(--line)} .why2 article:last-child{border-bottom:0} .tl-line{display:none} .tl-steps{grid-template-columns:1fr 1fr} .feat-meta{grid-template-columns:1fr;gap:12px} .foot-grid{grid-template-columns:1fr 1fr 1fr} .stage .phone{position:static;margin:-30px auto 0} } @media(max-width:1080px){ .nav,.tel{display:none} .burger{display:flex} .site-nav ul{display:none} /* logo left, compact CTA + burger right */ .bar{justify-content:space-between;padding:9px 9px 9px 18px;gap:10px} .head-r{gap:8px} .head .btn.hide-sm{display:inline-flex;padding:10px 16px;font-size:13px;gap:0;order:1} .burger{width:42px;height:42px;gap:4.5px;order:2} .burger i{width:15px} } @media(max-width:430px){ .logo{font-size:18px} .head .btn.hide-sm{padding:9px 14px;font-size:12.5px} } @media(max-width:360px){ .logo{font-size:16px} .bar{padding:8px 8px 8px 13px;gap:7px} .head .btn.hide-sm{padding:8px 11px;font-size:11.5px} .burger{width:36px;height:36px} .burger i{width:13px} } .head .btn.hide-sm{white-space:nowrap} /* floating WhatsApp: compact circle on mobile */ @media(max-width:768px){ .wa-float{padding:0;width:56px;height:56px;justify-content:center;gap:0;font-size:0; right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom))} .wa-float svg{width:26px;height:26px} } @media(max-width:640px){ .chrome b{font-size:10px} /* supporting previews become a swipeable row */ .prow{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;gap:16px; margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1); padding:4px var(--pad) 14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; scrollbar-width:thin;scrollbar-color:rgba(19,21,15,.22) transparent} .prow::-webkit-scrollbar{height:4px} .prow::-webkit-scrollbar-thumb{background:rgba(19,21,15,.22);border-radius:100px} .pmini{scroll-snap-align:start} .pmini-meta{padding-top:18px} .panels,.tl-steps{grid-template-columns:1fr} .panel-vis{height:clamp(200px,52vw,300px)} .slist{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr 1fr} } @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition-duration:.01ms!important} [data-rv],[data-load],[data-vis]{opacity:1!important;transform:none!important} .cell{opacity:1;transform:none} html{scroll-behavior:auto} } /* active page state (shared nav) */ .nav a[data-nav] span,.mob-links a[data-nav] span{transition:background .28s ease;padding:0 .06em;border-radius:1px} body[data-page="home"] .nav a[data-nav="home"] span, body[data-page="web-design"] .nav a[data-nav="web-design"] span, body[data-page="local-seo"] .nav a[data-nav="local-seo"] span, body[data-page="google-growth"] .nav a[data-nav="google-growth"] span, body[data-page="work"] .nav a[data-nav="work"] span, body[data-page="about"] .nav a[data-nav="about"] span, body[data-page="contact"] .nav a[data-nav="contact"] span, body[data-page="home"] .mob-links a[data-nav="home"] span, body[data-page="web-design"] .mob-links a[data-nav="web-design"] span, body[data-page="local-seo"] .mob-links a[data-nav="local-seo"] span, body[data-page="google-growth"] .mob-links a[data-nav="google-growth"] span, body[data-page="work"] .mob-links a[data-nav="work"] span, body[data-page="about"] .mob-links a[data-nav="about"] span, body[data-page="contact"] .mob-links a[data-nav="contact"] span{ color:var(--ink);background:linear-gradient(180deg,transparent 62%,var(--lime) 62%)} .mob.open .mob-links>*:nth-child(6){transition-delay:.26s} .mob.open .mob-links>*:nth-child(7){transition-delay:.31s} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ---------- Web Design subnav ---------- */ .has-sub{position:relative;display:inline-flex} .nav .has-sub>a{display:inline-flex;align-items:center;gap:6px} .nav .has-sub .chev{opacity:.55;transition:transform .25s ease,opacity .25s ease} .has-sub:hover .chev,.has-sub:focus-within .chev,.has-sub.sub-open .chev{opacity:1;transform:rotate(180deg)} .sub{position:absolute;top:100%;left:50%;transform:translate(-50%,6px);min-width:232px;display:grid; background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:8px;margin-top:8px; box-shadow:0 30px 60px -34px rgba(19,21,15,.5);opacity:0;visibility:hidden;pointer-events:none; transition:opacity .22s ease,transform .22s cubic-bezier(.2,.7,.3,1),visibility .22s;z-index:5} .sub::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px} .has-sub:hover .sub,.has-sub:focus-within .sub,.has-sub.sub-open .sub{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)} /* An explicit close must beat :hover. Otherwise clicking to close does nothing you can see, because the cursor is still sitting on the parent — which reads as the menu being stuck open. Cleared on mouseleave, so moving away and back restores normal hover behaviour. */ .has-sub.sub-shut .sub{opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,6px)} .has-sub.sub-shut .chev{transform:none} .sub a{display:block;padding:9px 13px;border-radius:10px;font-size:14.5px;color:var(--slate);white-space:nowrap;transition:background .2s ease,color .2s ease} .sub a:hover{background:rgba(19,21,15,.05);color:var(--ink)} .sub a:focus-visible{outline:2px solid var(--emerald);outline-offset:-2px} .sub a:first-child{color:var(--ink);font-weight:500} body[data-sub="overview"] .sub a[data-sub="overview"], body[data-sub="professional-services"] .sub a[data-sub="professional-services"], body[data-sub="home-services"] .sub a[data-sub="home-services"], body[data-sub="trades"] .sub a[data-sub="trades"], body[data-sub="clinics"] .sub a[data-sub="clinics"]{color:var(--ink);background:var(--lime-soft)} /* mobile expandable group */ .mob-group{position:relative} .mob-toggle{position:absolute;opacity:0;width:0;height:0;pointer-events:none} .mob-group>a{padding-right:56px} .mob-exp{position:absolute;top:6px;right:6px;width:40px;height:40px;border-radius:12px;border:1px solid var(--line); display:grid;place-items:center;cursor:pointer;color:var(--slate);background:rgba(255,255,255,.6);transition:transform .25s ease,background .2s ease} .mob-exp:active{background:var(--cream)} .mob-toggle:focus-visible + .mob-exp{outline:2px solid var(--emerald);outline-offset:2px} .mob-toggle:checked + .mob-exp{transform:rotate(180deg);background:var(--lime);border-color:var(--lime);color:var(--ink)} .mob-sub{display:none;padding:2px 0 8px 14px;border-left:1px solid var(--line);margin:2px 0 6px 14px} .mob-toggle:checked ~ .mob-sub{display:grid} .mob-sub a{display:block;padding:11px 12px;border-radius:10px;font-size:16px;font-family:var(--body);font-weight:500;letter-spacing:0;color:var(--slate)} .mob-sub a::after{display:none} .mob-sub a:active{background:var(--cream)} body[data-sub="overview"] .mob-sub a[data-sub="overview"], body[data-sub="professional-services"] .mob-sub a[data-sub="professional-services"], body[data-sub="home-services"] .mob-sub a[data-sub="home-services"], body[data-sub="trades"] .mob-sub a[data-sub="trades"], body[data-sub="clinics"] .mob-sub a[data-sub="clinics"]{color:var(--ink);background:var(--lime-soft)} /* seven items: recover a little horizontal room without shrinking the type */ @media(min-width:1081px){ .nav a{padding:9px 12px;white-space:nowrap} .head-r{gap:8px} .tel{padding:0 4px} .sub a{padding:9px 13px} } @media(min-width:1081px) and (max-width:1240px){ .nav a{padding:9px 9px;font-size:14.5px} .head .btn{padding:11px 18px;font-size:14px} .tel{font-size:12.5px;white-space:nowrap} } @media(prefers-reduced-motion:reduce){.nav a[data-nav] span,.mob-links a[data-nav] span,.sub,.mob-exp,.chev{transition:none}} /* niche routes (carried over) */ .niches{display:grid;gap:0;border-top:1px solid var(--line);margin-top:clamp(34px,4vw,54px)} .niche{display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:clamp(20px,3vw,48px);align-items:center; padding:clamp(20px,2.4vw,30px) clamp(14px,1.6vw,20px);border-bottom:1px solid var(--line);border-radius:18px; transition:background .25s ease,padding .25s ease} .niche:hover{background:rgba(255,255,255,.7);padding-left:clamp(20px,2.4vw,30px)} .niche-vis{border-radius:12px;overflow:hidden;border:1px solid var(--line-w);aspect-ratio:2;background:var(--cream)} .niche-vis img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block} .niche small{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-bottom:11px} .niche b{display:block;font-family:var(--display);font-weight:600;font-size:clamp(20px,2vw,27px);letter-spacing:-.032em;line-height:1.15;margin-bottom:9px} .niche p{font-size:15.5px;color:var(--slate);line-height:1.5;max-width:46ch} .niche .go{flex:none} @media(max-width:1080px){ .niche{grid-template-columns:140px minmax(0,1fr);gap:20px} .niche .go{grid-column:2} } @media(max-width:640px){ .niches .niche{grid-template-columns:minmax(0,1fr);gap:16px;padding-left:0;padding-right:0} .niches .niche:hover{padding-left:0} .niches .niche>span{min-width:0} .niches .link-arrow.go{flex-wrap:wrap;min-width:0} .niches .link-arrow.go svg{flex:none} } @media(prefers-reduced-motion:reduce){.niche{transition:none}} /* where customers look */ .ai-strip{padding-top:clamp(52px,6vw,86px);padding-bottom:clamp(52px,6vw,86px)} .ai-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,72px);align-items:start; border-top:1px solid var(--line);padding-top:clamp(30px,3.4vw,44px)} .ai-row .h2-sec{margin-top:18px;max-width:16ch} .ai-where{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:9px} .ai-where li{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--emerald); background:var(--lime-soft);border-radius:100px;padding:8px 14px} @media(max-width:900px){.ai-row{grid-template-columns:1fr;gap:20px}} /* homepage clarity pass: rebalance two wrappers whose second column is now empty */ .diag-head.bridge{grid-template-columns:minmax(0,.95fr) minmax(0,1fr);align-items:start;padding-bottom:0} .diag-head.bridge h2{max-width:16ch;margin:0} .why-head.solo{grid-template-columns:minmax(0,1fr)} /* three Why points instead of four: keep the row divider logic correct */ .why2 article:nth-child(-n+2){border-bottom:1px solid var(--line)} .why2 article:last-child{border-bottom:0} @media(max-width:1080px){ .diag-head.bridge{grid-template-columns:minmax(0,1fr);gap:20px} } /* supporting previews: let the three-up grid shrink to its container between 641px and 1080px */ .prow > *{min-width:0} .prow .win,.prow .win-bar,.prow .shot{min-width:0} /* ---------- rotating keyword ---------- */ .rot{display:inline-block;position:relative;vertical-align:baseline} /* H1 in the body face for readability; the rotating word keeps the display face */ /* --- dark hero (matches the About treatment) --- */ .hero-dark{position:relative;overflow:hidden;padding:0;background:var(--forest)} .hero-dark .hero{background:transparent} .hero-dark::before{content:"";position:absolute;width:900px;height:900px;border-radius:50%; filter:blur(150px);opacity:.15;background:var(--lime);top:-420px;right:-240px;pointer-events:none} .hero-dark .wrap{position:relative;z-index:1} .hero-dark h1{color:#fff} /* rotating keyword on dark: lime type with a lime rule beneath */ .hero-dark .rot-in{color:var(--lime);background:none;padding:0 .02em .06em; border-bottom:5px solid rgba(205,245,100,.42);line-height:1.06} .hero-dark .hero-sub{color:rgba(241,244,238,.72)} .hero-dark .eyebrow{color:var(--lime)} .hero-dark .btn-ghost{color:#fff;border-color:rgba(241,244,238,.32)} .hero-dark .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.12);color:#fff} /* lime -> white on dark: ink flips would vanish against the forest */ .hero-dark .btn-lime{background:var(--lime);color:var(--ink)} .hero-dark .btn-lime:hover{background:#fff;color:var(--ink)} /* header sits outside the section, so it needs its own dark treatment. These come last and are specific enough to beat the base rules. */ body.dark-top:not(.is-scrolled) .head .bar{background:rgba(20,32,25,.86); border-color:rgba(241,244,238,.16);box-shadow:0 12px 40px -26px rgba(0,0,0,.8)} body.dark-top:not(.is-scrolled) .head .bar .logo{color:#fff} /* on dark the lime sits BENEATH the text, never behind it (white on lime has no contrast) */ body.dark-top:not(.is-scrolled) .head .bar .logo span{color:#fff;background:none; display:inline-block;padding:0 0 1px;border-bottom:2.5px solid var(--lime);border-radius:0} body.dark-top:not(.is-scrolled) .head .bar .nav a{color:rgba(241,244,238,.86)} body.dark-top:not(.is-scrolled) .head .bar .nav a:hover{color:#fff;background:rgba(255,255,255,.08)} body.dark-top:not(.is-scrolled) .head .bar .nav a[data-nav] span{color:#fff} body.dark-top:not(.is-scrolled) .head .bar .nav a[aria-current] span{color:#fff;background:none; display:inline-block;padding:0 0 1px;border-bottom:2px solid var(--lime);border-radius:0} body.dark-top:not(.is-scrolled) .head .bar .tel{color:rgba(241,244,238,.78)} body.dark-top:not(.is-scrolled) .head .bar .burger span{background:#fff} body.dark-top:not(.is-scrolled) .head .bar .sub{background:rgba(20,32,25,.96); border-color:rgba(241,244,238,.16)} body.dark-top:not(.is-scrolled) .head .bar .sub a{color:rgba(241,244,238,.86)} body.dark-top:not(.is-scrolled) .head .bar .sub a:hover{color:#fff} .h1-alt{max-width:17ch;margin-inline:auto} .rot{display:block;margin-bottom:.1em} .rot-in{display:inline-block;white-space:nowrap;font-weight:700; letter-spacing:-.035em;font-size:1.12em;line-height:1; background:linear-gradient(180deg,transparent 56%,var(--lime) 56%,var(--lime) 95%,transparent 95%); padding:0 .06em; transition:opacity .28s ease, transform .28s ease} .rot-in.out{opacity:0;transform:translateY(-.16em)} @media(prefers-reduced-motion:reduce){.rot-in{transition:none}} /* ---------- product sections ---------- */ /* section heading sits high, with deliberate space before product 01 */ .phead{padding-top:clamp(84px,9vh,120px);padding-bottom:clamp(56px,6.5vh,88px)} #website-build{padding-top:0} .pfull{min-height:100vh;display:flex;align-items:center; padding-top:clamp(96px,11vh,132px);padding-bottom:clamp(70px,8vh,104px)} .pfull .wrap{width:100%} .pfull .split{grid-template-columns:.86fr 1.14fr;gap:clamp(32px,5vw,90px)} .p-name{font-family:var(--display);font-weight:600;letter-spacing:-.028em;line-height:1.02; font-size:clamp(34px,4.3vw,56px);margin:16px 0 16px;max-width:13ch} .env-dark .p-name{color:#fff} .p-line{font-size:clamp(16px,1.32vw,18.5px);line-height:1.5;color:var(--slate);max-width:42ch;margin:0} .env-dark .p-line{color:rgba(241,244,238,.78)} .plist{list-style:none;margin:22px 0 0;padding:20px 0 0;border-top:1px solid var(--line);display:grid;gap:13px} .env-mint .plist{border-color:var(--line-m)} .env-dark .plist{border-color:rgba(241,244,238,.18)} .plist{gap:15px} .plist li{position:relative;padding-left:23px;font-size:15px;line-height:1.45;color:var(--slate)} .plist li b{display:block;font-family:var(--display);font-weight:600;font-size:16px; color:var(--ink);letter-spacing:-.015em;margin-bottom:3px} .env-dark .plist li b{color:#fff} .plist li span{display:block;font-size:14.5px;line-height:1.5} .env-dark .plist li{color:rgba(241,244,238,.8)} .plist li::before{content:"";position:absolute;left:0;top:.58em;width:11px;height:3px; border-radius:2px;background:var(--emerald)} .env-dark .plist li::before{background:var(--lime)} .btn-dark{background:var(--ink);color:var(--white);border-color:var(--ink)} .btn-dark:hover{background:var(--emerald);color:#fff;border-color:var(--emerald)} .env-dark .btn-dark{background:var(--lime);color:var(--ink);border-color:var(--lime)} .env-dark .btn-dark:hover{background:var(--emerald);color:#fff;border-color:var(--emerald)} .pfull .btn-dark{margin-top:24px} /* ---------- work (dark) ---------- */ #work .work-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px} #work .p-name{margin:16px 0 0} .pgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,44px);margin-top:clamp(38px,4.4vw,62px)} /* ---------- product demos ---------- */ .demo{position:relative;aspect-ratio:16/11;overflow:hidden;font-family:var(--body);background:#EDEFEA} .demo *{box-sizing:border-box} /* ===== 1. WEBSITE BUILD ===== */ .d1{background:#0B140F;position:relative;overflow:hidden} .d1 .shotwrap{position:absolute;inset:0;overflow:hidden} .d1 .shotwrap img{width:100%;height:100%;object-fit:cover;object-position:0% 20%} .d1 .glow{position:absolute;left:13.2%;top:67.5%;width:120px;height:56px; transform:translate(-50%,-50%);border-radius:8px;pointer-events:none; box-shadow:0 0 0 0 rgba(205,245,100,.75);opacity:0;animation:glowPulse 7s infinite} .d1 .cursor{position:absolute;left:13.2%;top:70.5%;z-index:6;width:15px;opacity:0; animation:curTo 7s infinite;filter:drop-shadow(0 3px 5px rgba(0,0,0,.65))} .d1 .quote{position:absolute;right:5%;top:50%;z-index:7;width:38%; transform:translateY(-46%) scale(.94);opacity:0;animation:qIn 7s infinite; background:rgba(252,251,247,.98);border-radius:12px;padding:14px 15px; box-shadow:0 30px 60px -22px rgba(0,0,0,.75)} .d1 .quote b{display:block;font-family:var(--display);font-size:12.5px;color:#13150F; letter-spacing:-.02em;margin-bottom:10px} .d1 .quote .f{border:1px solid #E4E2DC;border-radius:7px;background:#fff;padding:7px 9px; font-size:7.5px;color:#757770;margin-bottom:6px} .d1 .quote .f.on{color:#13150F;border-color:var(--emerald)} .d1 .quote .send{background:var(--lime);color:#13150F;font-size:8px;font-weight:600; text-align:center;border-radius:7px;padding:8px;margin-top:3px} .d1 .tagl{position:absolute;left:5%;bottom:6%;z-index:6;font-family:var(--mono);font-size:8px; letter-spacing:.1em;text-transform:uppercase;color:#13150F;background:var(--lime); border-radius:99px;padding:5px 11px;opacity:0;animation:tagl 7s infinite} @keyframes glowPulse{0%,22%{opacity:0;box-shadow:0 0 0 0 rgba(205,245,100,.75)} 30%{opacity:1;box-shadow:0 0 0 5px rgba(205,245,100,.35)} 44%{opacity:1;box-shadow:0 0 0 16px rgba(205,245,100,0)}52%,100%{opacity:0}} @keyframes curTo{0%,10%{opacity:0;transform:translate(30px,34px)} 26%,36%{opacity:1;transform:translate(0,0)}39%{transform:translate(0,3px)} 50%,100%{opacity:0;transform:translate(0,0)}} @keyframes qIn{0%,38%{opacity:0;transform:translateY(-40%) scale(.94)} 50%,90%{opacity:1;transform:translateY(-50%) scale(1)}97%,100%{opacity:0}} @keyframes tagl{0%,56%{opacity:0;transform:translateY(8px)}64%,90%{opacity:1;transform:none} 97%,100%{opacity:0}} /* ===== 2. REVIEWS: three columns, full bleed ===== */ .d2{background:linear-gradient(160deg,#EFF2ED,#E2E9E0);position:relative;overflow:hidden} .d2::before,.d2::after{content:"";position:absolute;left:0;right:0;height:20%;z-index:3;pointer-events:none} .d2::before{top:0;background:linear-gradient(#EFF2ED,rgba(239,242,237,0))} .d2::after{bottom:0;background:linear-gradient(rgba(226,233,224,0),#E2E9E0)} .d2 .col{position:absolute;top:0;bottom:0;width:30%;overflow:hidden} .d2 .col.cl{left:3%} .d2 .col.cm{left:35%} .d2 .col.cr{left:67%} .d2 .col .run{display:flex;flex-direction:column;animation:wfUp 22s linear infinite;will-change:transform} .d2 .col.cm .run{animation:wfDown 26s linear infinite} .d2 .col.cr .run{animation:wfUp 19s linear infinite} .d2:hover .run{animation-play-state:paused} .d2 .rc{background:#fff;border-radius:8px;padding:8px 9px;margin-bottom:7px;flex:none; box-shadow:0 6px 14px -10px rgba(19,21,15,.32);transition:transform .3s ease,box-shadow .3s ease} .d2 .rc:hover{transform:scale(1.06);box-shadow:0 14px 26px -12px rgba(19,21,15,.45);position:relative;z-index:4} .d2 .rc .top{display:flex;align-items:center;gap:5px;margin-bottom:4px} .d2 .rc .av{width:13px;height:13px;border-radius:50%;background:#E3E8DF;flex:none;font-size:6.5px; display:flex;align-items:center;justify-content:center;color:#5F6259;font-weight:600} .d2 .rc .nm{font-size:7px;font-weight:600;color:#13150F} .d2 .rc .st{display:flex;gap:1px;margin-left:auto} .d2 .rc .st svg{width:7px;height:7px;fill:#FBBC04} .d2 .rc p{margin:0;font-size:6.5px;line-height:1.5;color:#5F6259} .d2 .rc .vf{display:flex;align-items:center;gap:3px;margin-top:4px;font-size:5.5px;color:#188038; font-family:var(--mono);letter-spacing:.03em} .d2 .rc .vf svg{width:7px;height:7px;fill:#188038} @keyframes wfUp{from{transform:translateY(0)}to{transform:translateY(-50%)}} @keyframes wfDown{from{transform:translateY(-50%)}to{transform:translateY(0)}} /* ===== 3. LOCAL SEO: the work, left to right, ending in rankings ===== */ .d3{background:#FCFBF7;padding:7% 5%;position:relative;overflow:hidden;display:flex} .d3 .tl{position:relative;flex:1;display:flex;gap:2.6%;align-items:stretch} .d3 .st{flex:1;position:relative;display:flex;flex-direction:column; opacity:.34;transform-origin:0% 22%;will-change:transform,opacity; animation:stIn 8s cubic-bezier(.22,.9,.28,1) infinite} .d3 .st .body{flex:1;display:flex;flex-direction:column;justify-content:flex-start} .d3 .st:nth-child(1){animation-delay:0s} .d3 .st:nth-child(2){animation-delay:2s} .d3 .st:nth-child(3){animation-delay:4s} .d3 .st:nth-child(4){animation-delay:6s} .d3 .st .dot{width:20px;height:20px;border-radius:50%;border:2px solid #DDE0D7;background:#fff; font-family:var(--mono);font-size:9px;display:flex;align-items:center;justify-content:center; color:#757770;margin-bottom:11px;flex:none; animation:dotOn 8s cubic-bezier(.3,1.6,.45,1) infinite; transition:none} .d3 .st:nth-child(1) .dot{animation-delay:0s} .d3 .st:nth-child(2) .dot{animation-delay:2s} .d3 .st:nth-child(3) .dot{animation-delay:4s} .d3 .st:nth-child(4) .dot{animation-delay:6s} .d3 .st h6{font-family:var(--display);font-weight:600;font-size:12.5px;color:#13150F;margin:0 0 4px; letter-spacing:-.015em;line-height:1.22} .d3 .st .when{font-family:var(--mono);font-size:7.5px;letter-spacing:.11em;text-transform:uppercase; color:var(--emerald);margin-bottom:7px} .d3 .rail{position:absolute;left:0;right:0;top:9px;height:2px;background:#E7E9E2;z-index:0} .d3 .rail i{display:block;height:100%;width:0;background:var(--lime); animation:rail 8s cubic-bezier(.5,.02,.3,1) infinite} .d3 .st>*{position:relative;z-index:1} .d3 .chk{display:grid;gap:8px;margin-top:11px} .d3 .chk span{display:flex;align-items:flex-start;gap:6px;font-size:8.5px;color:#5F6259;line-height:1.4} .d3 .chk i{width:10px;height:10px;border-radius:50%;flex:none;display:block;background:#E7E9E2;margin-top:2px} .d3 .chk.bad i{background:#F0C05A} .d3 .chk.good i{background:var(--emerald)} .d3 .pg{background:#fff;border:1px solid #E7E9E2;border-radius:7px;padding:8px 9px;margin-bottom:8px; box-shadow:0 5px 12px -9px rgba(19,21,15,.32)} .d3 .st:nth-child(2) .body{margin-top:11px} .d3 .pg u{display:block;font-size:6.5px;color:#757770;text-decoration:none;font-family:var(--mono)} .d3 .pg b{display:block;font-size:8.5px;color:#13150F;font-weight:600;margin-top:3px} .d3 .serp{background:#132018;border-radius:8px;padding:10px 11px;position:relative;margin-top:11px} .d3 .serp u{display:block;font-size:6.5px;color:rgba(255,255,255,.5);text-decoration:none} .d3 .serp b{display:block;font-size:9px;color:var(--lime);margin-top:3px;font-weight:500} .d3 .serp .pos{position:absolute;right:10px;top:10px;font-family:var(--mono);font-size:8.5px; color:var(--lime);height:1.2em;overflow:hidden} .d3 .serp .pos em{display:block;font-style:normal; animation:posRoll 8s cubic-bezier(.3,.9,.3,1) infinite} .d3 .out{margin-top:10px;font-size:8px;color:#5F6259;line-height:1.5} .d3 .ghost{background:#fff;border:1px solid #EDEEE9;border-radius:7px;padding:8px 9px;margin-top:7px} .d3 .ghost span{display:block;height:4px;border-radius:2px;background:#EDEEE9;margin-bottom:5px} .d3 .ghost span:last-child{width:62%;margin:0} @keyframes stIn{0%,1%{opacity:.34;transform:scale(.94)} 7%{opacity:1;transform:scale(1.045)} 11%,22%{opacity:1;transform:scale(1.03)} 29%,100%{opacity:.4;transform:scale(.94)}} @keyframes dotOn{0%,1%{border-color:#DDE0D7;background:#fff;color:#9A9C94;transform:scale(1)} 6%{border-color:var(--lime);background:var(--lime);color:#13150F;transform:scale(1.28)} 10%,100%{border-color:var(--lime);background:var(--lime);color:#13150F;transform:scale(1)}} @keyframes rail{0%{width:6%}18%,25%{width:31%}43%,50%{width:56%}68%,75%{width:81%}92%,100%{width:100%}} @keyframes posRoll{0%,76%{transform:translateY(0)}83%{transform:translateY(-1.2em)} 90%,100%{transform:translateY(-2.4em)}} @media(max-width:900px){.d3 .st h6{font-size:9px}.d3 .chk span{font-size:6.5px}} /* ===== 4. GOOGLE GROWTH: chart draws, bars rise, tags pop ===== */ .d4{background:#132018;position:relative;padding:8% 8% 10%} .d4 .gl{position:absolute;left:8%;right:8%;height:1px;background:rgba(241,244,238,.09)} .d4 .bars{position:absolute;left:8%;right:8%;bottom:14%;top:26%;display:flex;align-items:flex-end;gap:5%} .d4 .bars i{flex:1;border-radius:3px 3px 0 0;background:rgba(205,245,100,.2);transform-origin:50% 100%; transform:scaleY(0);animation:grow 7s cubic-bezier(.2,.7,.3,1) infinite} .d4 .bars i:nth-child(1){animation-delay:.2s;--h:26%}.d4 .bars i:nth-child(2){animation-delay:.35s;--h:34%} .d4 .bars i:nth-child(3){animation-delay:.5s;--h:30%}.d4 .bars i:nth-child(4){animation-delay:.65s;--h:47%} .d4 .bars i:nth-child(5){animation-delay:.8s;--h:58%}.d4 .bars i:nth-child(6){animation-delay:.95s;--h:72%} .d4 .bars i:nth-child(7){animation-delay:1.1s;--h:88%}.d4 .bars i:nth-child(8){animation-delay:1.25s;--h:100%} .d4 svg.line{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .d4 svg.line path{fill:none;stroke:var(--lime);stroke-width:2.5;stroke-linecap:round; stroke-dasharray:420;stroke-dashoffset:420;animation:draw 7s cubic-bezier(.4,0,.3,1) infinite} .d4 .tag{position:absolute;font-family:var(--mono);font-size:8px;letter-spacing:.07em; background:var(--lime);color:#13150F;border-radius:99px;padding:4px 9px;opacity:0; animation:tagPop 7s infinite;text-transform:uppercase;font-weight:500} .d4 .t1{left:30%;top:52%;animation-delay:2.1s} .d4 .t2{left:52%;top:36%;animation-delay:2.5s} .d4 .t3{right:9%;top:17%;animation-delay:2.9s} .d4 .cap{position:absolute;left:8%;bottom:5%;font-family:var(--mono);font-size:8px; letter-spacing:.1em;text-transform:uppercase;color:rgba(241,244,238,.45)} @keyframes grow{0%,3%{transform:scaleY(0)}22%,92%{transform:scaleY(1)}99%,100%{transform:scaleY(0)}} @keyframes draw{0%,6%{stroke-dashoffset:420}42%,92%{stroke-dashoffset:0}99%,100%{stroke-dashoffset:420}} @keyframes tagPop{0%,26%{opacity:0;transform:translateY(9px) scale(.9)} 34%,90%{opacity:1;transform:none}98%,100%{opacity:0}} @media(prefers-reduced-motion:reduce){ .demo *{animation:none !important;opacity:1 !important} .d1 .url b,.d1 h4{width:auto !important} .d1 .page{background:#132018 !important;color:#fff !important} .d3 .mine{transform:rotate(-45deg) !important} .d4 .bars i{transform:scaleY(1) !important} .d4 svg.line path{stroke-dashoffset:0 !important} } /* auto-scrolling strip */ .mq{background:var(--ink);overflow:hidden;position:relative; padding:clamp(15px,1.5vw,19px) 0;border-top:1px solid rgba(241,244,238,.1)} .mq::before,.mq::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none} .mq::before{left:0;background:linear-gradient(90deg,var(--ink),transparent)} .mq::after{right:0;background:linear-gradient(270deg,var(--ink),transparent)} .mq-track{display:flex;width:max-content;animation:mqScroll 46s linear infinite} .mq:hover .mq-track{animation-play-state:paused} .mq-run{display:flex;align-items:center;flex:none} .mq-run span{font-family:var(--display);font-weight:600;font-size:clamp(15px,1.6vw,19px); letter-spacing:-.012em;color:#FCFBF7;white-space:nowrap;padding:0 clamp(16px,1.8vw,26px)} .mq-run i{width:7px;height:7px;flex:none;background:var(--lime); transform:rotate(45deg);border-radius:1.5px} @keyframes mqScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.mq-track{animation:none;flex-wrap:wrap;width:100%;justify-content:center}} /* credential strip (kept for the about pills) */ .cred-strip{padding:clamp(26px,3vw,38px) 0;background:var(--cream);border-bottom:1px solid var(--line)} .cred-strip .wrap{display:flex;align-items:center;justify-content:center;flex-wrap:wrap; gap:14px clamp(20px,2.6vw,36px)} .cred-lead{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.06em; text-transform:uppercase;color:var(--slate)} .cred-lead b{color:var(--ink);font-weight:500} .cred-names{display:flex;flex-wrap:wrap;align-items:center;gap:10px clamp(18px,2.2vw,30px)} .cred-names span{font-family:var(--display);font-weight:600;font-size:clamp(15px,1.5vw,19px); letter-spacing:-.015em;color:var(--ink);opacity:.62;transition:opacity .3s ease} .cred-names span:hover{opacity:1} @media(max-width:760px){ .cred-strip .wrap{flex-direction:column;gap:12px;text-align:center} .cred-lead{font-size:11px} .cred-names{justify-content:center} } /* concept-build note */ .concept-note{margin:clamp(26px,3vw,38px) 0 0;font-family:var(--mono);font-size:12px; letter-spacing:.04em;color:var(--slate);text-align:center;opacity:.85} .whocard::before{background-position:50% 50%} .whogrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,18px); margin-top:clamp(36px,4.2vw,56px)} .whocard{position:relative;display:flex;flex-direction:column;justify-content:flex-end; min-height:clamp(300px,27vw,380px);border-radius:20px;overflow:hidden;isolation:isolate; padding:clamp(22px,2.1vw,28px);background:#132018; transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s ease} /* photo slot: set --img on the card and it takes over from the gradient */ .whocard::before{content:"";position:absolute;inset:0;z-index:-2; background-image:var(--img,none);background-size:cover;background-position:50% 42%; transition:transform .8s cubic-bezier(.2,.7,.3,1)} .whocard::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(11,20,15,.25) 0%,rgba(11,20,15,.72) 52%,rgba(11,20,15,.94) 100%)} .whocard:hover{transform:translateY(-8px);box-shadow:0 40px 60px -40px rgba(19,21,15,.6)} .whocard:hover::before{transform:scale(1.06)} /* tinted fallback while there is no photo */ .whocard .n{position:absolute;top:clamp(20px,1.9vw,26px);left:clamp(22px,2.1vw,28px); font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--lime);opacity:.85} .whocard h3{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.1vw,25px); letter-spacing:-.022em;margin:0 0 10px;color:#fff;line-height:1.14} .whocard p{margin:0 0 18px;font-size:14.5px;line-height:1.55;color:rgba(241,244,238,.72)} .whocard .go2{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px; letter-spacing:.1em;text-transform:uppercase;color:var(--lime); border-top:1px solid rgba(205,245,100,.28);padding-top:13px;transition:gap .35s ease} .whocard:hover .go2{gap:12px} @media(prefers-reduced-motion:reduce){.whocard,.whocard::before,.whocard .go2{transition:none} .whocard:hover{transform:none}.whocard:hover::before{transform:none}} @media(max-width:900px){.whogrid{grid-template-columns:1fr 1fr}.whocard{min-height:280px}} @media(max-width:560px){.whogrid{grid-template-columns:1fr}.whocard{min-height:230px}} /* service tags on work previews */ .pcard-meta .svcs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} .pcard-meta .svcs span{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em; text-transform:uppercase;color:var(--slate);background:var(--cream);border:1px solid var(--line); border-radius:99px;padding:4px 9px} .pill-lead{margin:clamp(38px,4.4vw,58px) 0 16px;font-family:var(--mono);font-size:12px; letter-spacing:.09em;text-transform:uppercase;color:var(--slate);text-align:center} .pills{display:flex;flex-wrap:wrap;justify-content:center;gap:9px} .pill-n{display:inline-flex;align-items:center;font-size:14.5px;color:var(--slate); background:var(--white);border:1px solid var(--line);border-radius:100px;padding:9px 16px; cursor:default;transition:transform .3s cubic-bezier(.2,.7,.3,1),background .3s ease, border-color .3s ease,color .3s ease,box-shadow .3s ease} .pill-n:hover{transform:translateY(-3px);background:var(--forest);border-color:var(--forest); color:var(--lime);box-shadow:0 12px 22px -14px rgba(19,21,15,.55)} @media(prefers-reduced-motion:reduce){.pill-n{transition:none}.pill-n:hover{transform:none}} @media(max-width:560px){.pill-n{font-size:13.5px;padding:8px 13px}.pills{gap:7px}} /* work cards */ .pcard{display:block;background:var(--white);border:1px solid var(--line);border-radius:20px; padding:clamp(14px,1.2vw,18px); transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s ease,border-color .4s ease} .pcard:hover{transform:translateY(-7px);border-color:var(--emerald); box-shadow:0 46px 70px -50px rgba(19,21,15,.5)} .pcard .win{border-radius:12px;overflow:hidden;border:1px solid var(--line); box-shadow:none;transition:none} .pcard:hover .win{transform:none} .pcard .shot{transition:transform .7s cubic-bezier(.2,.7,.3,1)} .pcard:hover .shot{transform:scale(1.028)} .pcard-meta{padding:20px 8px 8px} .pcard-meta .cat{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase; color:var(--emerald);margin:0} .pcard-meta h3{font-family:var(--display);font-weight:600;font-size:clamp(20px,2vw,26px); margin:9px 0 0;letter-spacing:-.022em;display:flex;align-items:center;gap:10px} .pcard-meta h3::after{content:"";width:16px;height:16px;flex:none;opacity:.35; background:currentColor;transition:transform .4s ease,opacity .4s ease; -webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,") center/contain no-repeat} .pcard:hover .pcard-meta h3::after{transform:translate(3px,-3px);opacity:.9} .pcard-line{margin:10px 0 0;font-size:15.5px;line-height:1.55;color:var(--slate);max-width:44ch} @media(prefers-reduced-motion:reduce){.pcard,.pcard .shot,.pcard-meta h3::after{transition:none} .pcard:hover{transform:none}.pcard:hover .shot{transform:none}} /* ---------- how it works ---------- */ .steps-head{text-align:center;max-width:40ch;margin:0 auto clamp(52px,6vw,84px)} .steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3.6vw,58px);position:relative} .steps3{position:relative} .steps-wave{position:absolute;top:8px;left:14%;width:72%;height:60px;color:var(--line); pointer-events:none;z-index:0} .step{position:relative;z-index:1} .step{position:relative;text-align:center} .sdot{width:58px;height:58px;border-radius:50%;background:var(--lime);color:var(--ink); font-family:var(--display);font-weight:600;font-size:24px;display:flex;align-items:center; justify-content:center;margin:0 auto 26px;position:relative;z-index:1} .step h3{font-family:var(--display);font-weight:600;font-size:clamp(19px,2vw,24px); letter-spacing:-.02em;margin:0 0 12px;line-height:1.2} .step h3 em{display:block;font-style:normal;font-family:var(--mono);font-size:11.5px; letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin-top:9px;font-weight:400} .step p{font-size:16px;line-height:1.55;color:var(--slate);margin:0;max-width:34ch;margin-inline:auto} /* ---------- free check ---------- */ #check .split.chk{grid-template-columns:1.02fr .98fr;align-items:start} #check .p-name{font-size:clamp(34px,4.4vw,54px);max-width:14ch} #check .plist li{font-size:16px} .chk-note{font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--slate);margin:26px 0 0} .ab-h{line-height:1.24} .creds-wide{display:flex;flex-wrap:wrap;gap:9px;max-width:430px} .creds-wide span{white-space:nowrap} .env-dark .hl{display:inline-block;background:var(--lime);color:var(--ink); padding:.04em .16em .1em;border-radius:3px} .signoff{font-family:var(--display);font-weight:600;font-size:clamp(18px,1.9vw,22px); color:#fff;margin:26px 0 0;display:table;clear:both; background:linear-gradient(180deg,transparent 88%,var(--lime) 88%,var(--lime) 97%,transparent 97%); padding-bottom:2px} .note{margin:30px 0 0;padding:22px 0 0;border-top:1px solid rgba(241,244,238,.18)} .note p{font-family:var(--display);font-weight:500;font-size:clamp(17px,1.7vw,20px); line-height:1.45;color:#fff;margin:0 0 12px;max-width:44ch} .note cite{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase; color:var(--lime);font-style:normal} /* The badge ships hidden and is revealed only once a real figure has been fetched. display:inline-flex below outranks the hidden attribute, so without this the element renders as an empty pill whenever the backend is unreachable. */ .slots[hidden]{display:none} .slots{display:inline-flex;align-items:center;gap:9px;margin:0 0 16px; font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase; color:var(--emerald);background:var(--white);border:1px solid var(--line-m); border-radius:100px;padding:9px 16px} .slots b{font-weight:500} .slot-dot{width:7px;height:7px;border-radius:50%;background:var(--lime);flex:none; box-shadow:0 0 0 0 rgba(205,245,100,.9);animation:slotPulse 2.4s infinite} .slot-dot.is-full{background:var(--slate);animation:none} @keyframes slotPulse{70%{box-shadow:0 0 0 7px rgba(205,245,100,0)}100%{box-shadow:0 0 0 0 rgba(205,245,100,0)}} @media(prefers-reduced-motion:reduce){.slot-dot{animation:none}} .cap-note{font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--slate);margin:14px 0 0} .wiz{background:var(--white);border:1px solid var(--line-m);border-radius:20px; padding:clamp(24px,2.8vw,34px);box-shadow:0 40px 70px -55px rgba(19,21,15,.5);position:relative} .wiz-top{display:flex;align-items:center;gap:14px;margin-bottom:26px} .wiz-bar{flex:1;height:4px;border-radius:99px;background:var(--line);overflow:hidden} .wiz-bar i{display:block;height:100%;width:33%;background:var(--lime);border-radius:99px; transition:width .4s cubic-bezier(.2,.7,.3,1)} .wiz-step{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--slate);white-space:nowrap} .wiz-pane{display:none} .wiz-pane.is-on{display:block;animation:wizIn .32s cubic-bezier(.2,.7,.3,1)} @keyframes wizIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .wiz-q{font-family:var(--display);font-weight:600;font-size:clamp(19px,2vw,23px); letter-spacing:-.02em;line-height:1.25;margin:0 0 20px;color:var(--ink)} .wiz-opts{display:grid;gap:10px} .wiz-opt{text-align:left;font-family:var(--body);font-size:16px;color:var(--ink);cursor:pointer; background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:16px 18px; transition:border-color .2s,background .2s,transform .2s} .wiz-opt:hover{border-color:var(--emerald);background:#fff;transform:translateX(3px)} .wiz-opt:focus-visible{outline:2px solid var(--emerald);outline-offset:2px} .wiz-back{margin-top:18px;background:none;border:0;cursor:pointer;padding:0; font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--slate)} .wiz-back:hover{color:var(--ink)} .chk-form{display:grid;gap:15px} .chk-form label{display:grid;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.11em; text-transform:uppercase;color:var(--slate)} .chk-form input{font-family:var(--body);font-size:16px;color:var(--ink);background:var(--cream); border:1px solid var(--line);border-radius:10px;padding:14px 15px;width:100%} .chk-form input::placeholder{color:#9a9c94} .chk-form input:focus{outline:2px solid var(--emerald);outline-offset:1px;border-color:transparent} .chk-form .btn{width:100%;justify-content:center;margin-top:4px} .chk-small{font-size:13px;color:var(--slate);margin:0;text-align:center} /* Success card. Replaces the form outright rather than leaving an emptied form, a dead "Sent" button and a green strip on screen - the old state read as though something had gone wrong. Uses the site's own tokens; the .form-status greens are generic and only serve the sending/error states now. */ .form-done{text-align:center;padding:clamp(26px,3.6vw,44px) clamp(16px,2.6vw,28px)} .form-done .mark{width:56px;height:56px;border-radius:50%; display:grid;place-items:center;margin:0 auto 18px} .form-done .mark svg{width:26px;height:26px;display:block} /* Three tones, because the outcomes must not be confusable at a glance: confirmed, week full (nothing booked), and failed (we cannot say). */ .form-done.is-ok .mark{background:var(--lime)} .form-done.is-warn .mark{background:var(--line)} .form-done.is-error .mark{background:#FEE2E2} .form-done .done-action{margin-top:20px} /* Fully-booked lock: the wizard stays on screen for context but is inert. Everything except the message is dimmed and unclickable; the controls themselves are also disabled, so keyboard users cannot reach them either - pointer-events alone would not stop tabbing. */ .wiz.is-locked > :not(.wiz-lock){opacity:.38;pointer-events:none;user-select:none} .wiz-lock{padding:clamp(18px,2.4vw,26px) clamp(14px,2vw,22px);margin-bottom:8px; border-bottom:1px solid var(--line)} .wiz-lock .mark{width:44px;height:44px;margin-bottom:12px} .wiz-lock .mark svg{width:21px;height:21px} .wiz-lock b{font-size:clamp(18px,1.9vw,21px)} .wiz-lock p{font-size:15px} .form-done b{display:block;font-family:var(--display);font-weight:600; font-size:clamp(20px,2.2vw,25px);letter-spacing:-.01em;margin-bottom:10px} .form-done p{color:var(--slate);margin:0 auto;font-size:16px;line-height:1.6;max-width:40ch} /* display:block is load-bearing: this is a , and an inline box ignores vertical margin/padding for layout, so the rule overlapped the paragraph above it. */ .form-done .done-note{display:block;margin-top:20px;padding-top:16px;border-top:1px solid var(--line); font-family:var(--mono);font-size:10.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--slate)} @media(prefers-reduced-motion:no-preference){ .form-done{animation:doneIn .45s cubic-bezier(.2,.7,.3,1) both} @keyframes doneIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} } .wiz-done{text-align:center;padding:16px 0 8px} .wiz-done b{display:block;font-family:var(--display);font-weight:600;font-size:22px;margin-bottom:10px} .wiz-done p{color:var(--slate);margin:0;font-size:16px} @media(max-width:900px){ #check .split.chk{grid-template-columns:1fr} /* mobile order: heading, description, form, then the detail list */ #check .split .eyebrow{order:1} #check .split .p-name{order:2} #check .split .p-line{order:3} #check .split .split-vis{order:4;margin-top:26px} #check .split .plist{order:5;margin-top:30px} #check .split .chk-note{order:6} @media(prefers-reduced-motion:reduce){.wiz-pane.is-on{animation:none}} } /* ---------- mobile: reduce density ---------- */ @media(max-width:900px){ .pfull{min-height:0;padding-top:clamp(64px,8vh,90px);padding-bottom:clamp(64px,8vh,90px)} .pfull .split{grid-template-columns:1fr;gap:28px} /* the shared .split rule sets display:contents on mobile, so every child needs an explicit order */ .pfull .split .eyebrow{order:1} .pfull .split .p-name{order:2} .pfull .split .p-line{order:3} .pfull .split .split-vis,.pfull .split.rev .split-vis{order:4;margin-top:26px;padding-top:0;border-top:0} .pfull .split .plist{order:5} .pfull .split .btn-dark{order:6} .p-name{font-size:clamp(34px,8.4vw,44px);max-width:none;margin:16px 0 16px} .p-line{font-size:17px;max-width:none} .plist{margin-top:26px;padding-top:22px;gap:11px} .plist li{font-size:15.5px} .pgrid{grid-template-columns:1fr;gap:26px} .steps3{grid-template-columns:1fr;gap:38px} .steps-wave{display:none} .step{text-align:left;display:grid;grid-template-columns:auto 1fr;gap:0 18px} .sdot{width:44px;height:44px;font-size:19px;margin:0;grid-row:span 2} .step h3{margin:8px 0 8px;align-self:center} .step p{grid-column:2;max-width:none;margin:0} #work .work-head{flex-direction:column;align-items:flex-start;gap:14px} } /* mobile services group, matching the live pattern */ .mob-group>a::after{display:none} .mob-links .mob-exp{border:0;background:none;color:var(--slate); display:flex;align-items:center;justify-content:flex-end;padding-right:11.5px} .mob-links .mob-exp svg{display:none} /* same 7px chevron as every other row, pointing down */ .mob-links .mob-exp::after{content:"";width:7px;height:7px;flex:none; border-right:1.6px solid currentColor;border-top:1.6px solid currentColor; transform:rotate(135deg);opacity:.45;transition:opacity .3s} .mob-links .mob-toggle:checked + .mob-exp{transform:rotate(180deg); border:0;background:none;color:var(--emerald)} .mob-links .mob-toggle:checked + .mob-exp::after{opacity:1} .mob-group:has(.mob-toggle:checked)>a{background:var(--mint); box-shadow:inset 0 0 0 1.5px var(--emerald);border-radius:14px} /* ---- v115: who-we-help photo framing + section gap ---- */ #who-we-help{padding-bottom:clamp(24px,3.2vw,48px)} /* Who-we-help card photos. These come from source/kit/_homepage-images.css in the approved export — a 270KB file of four base64 webps that nothing in the source build scripts ever linked (the underscore prefix marks it as an include, but no include existed). The conversion consequently shipped .whocard with its documented "tinted fallback while there is no photo" on every page, which is why the cards rendered as empty dark panels. The images themselves were already decoded losslessly during conversion (public/images/section/home-decor-*.webp, SHA-256 identical to the export's base64); only these four assignments were missing. Referenced as files rather than re-inlined, per the conversion's zero-base64 rule. */ .whocard.w1{--img:url("/a/images/section/home-decor-1.538a5ca9ac.webp")} .whocard.w2{--img:url("/a/images/section/home-decor-2.3008ca667c.webp")} .whocard.w3{--img:url("/a/images/section/home-decor-3.6d8d19f00e.webp")} .whocard.w4{--img:url("/a/images/section/home-decor-4.d6df4c694a.webp")} .whocard::before{background-position:50% 50%} @media(max-width:900px){ .whocard.w1::before{background-position:50% 8%} .whocard.w2::before{background-position:50% 20%} .whocard.w3::before{background-position:50% 10%} .whocard.w4::before{background-position:50% 10%} } /* ============ JOURNEY: interactive visitor walkthrough ============ */ .jrn{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(34px,4.4vw,72px); align-items:center;margin-top:clamp(40px,4.6vw,62px)} .jrn-steps{display:flex;flex-direction:column;gap:2px} .jrn-step{position:relative;display:block;width:100%;text-align:left;cursor:pointer; background:none;border:0;padding:clamp(17px,1.7vw,21px) 0 clamp(17px,1.7vw,21px) 26px; font-family:inherit;color:var(--slate);border-top:1px solid var(--line); transition:color .4s ease,padding-left .4s cubic-bezier(.2,.7,.3,1)} .jrn-step:last-child{border-bottom:1px solid var(--line)} .jrn-step::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px; background:var(--lime);transform:scaleY(0);transform-origin:top; transition:transform .55s cubic-bezier(.2,.7,.3,1)} .jrn-step b{display:block;font-family:var(--display);font-weight:600; font-size:clamp(17px,1.5vw,20px);letter-spacing:-.018em;color:var(--ink); transition:opacity .4s ease} .jrn-step span{display:block;margin-top:7px;font-size:14.5px;line-height:1.55; max-height:0;opacity:0;overflow:hidden; transition:max-height .55s cubic-bezier(.2,.7,.3,1),opacity .4s ease,margin-top .4s ease} .jrn-step[aria-selected="true"]::before{transform:scaleY(1)} .jrn-step[aria-selected="true"]{padding-left:34px} .jrn-step[aria-selected="true"] span{max-height:80px;opacity:1} .jrn-step:not([aria-selected="true"]) b{opacity:.5} .jrn-step:hover b{opacity:.82} .jrn-vis{position:relative;border-radius:16px;overflow:hidden; box-shadow:0 46px 74px -46px rgba(19,21,15,.5);background:#0b120e} .jrn-bar{display:flex;align-items:center;gap:7px;padding:11px 15px;background:#f2f0e9; border-bottom:1px solid rgba(19,21,15,.08)} .jrn-bar i{width:9px;height:9px;border-radius:50%;background:rgba(19,21,15,.16)} .jrn-bar b{margin-left:9px;font-family:var(--mono);font-size:11px;color:var(--slate);font-weight:400} .jrn-shot{position:relative;line-height:0} .jrn-shot img{width:100%;height:auto;display:block} .jrn-shot::after{content:"";position:absolute;inset:0;background:rgba(6,12,9,.42); opacity:0;transition:opacity .6s ease;pointer-events:none} .jrn[data-step] .jrn-shot::after{opacity:1} .jrn[data-step="4"] .jrn-shot::after{opacity:0} /* highlight rings */ .jrn-ring{position:absolute;border:2px solid var(--lime);border-radius:8px; opacity:0;transform:scale(.97);pointer-events:none; box-shadow:0 0 0 9999px rgba(6,12,9,.34); transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.3,1)} .jrn[data-step="1"] .jrn-ring.r-what, .jrn[data-step="3"] .jrn-ring.r-cta{opacity:1;transform:scale(1)} /* floating proof card */ .jrn-proof{position:absolute;right:3.5%;bottom:9%;width:min(37%,268px); background:#fff;border-radius:13px;padding:15px 17px; box-shadow:0 26px 44px -22px rgba(6,12,9,.55); opacity:0;transform:translateY(16px);pointer-events:none; transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.3,1)} .jrn[data-step="2"] .jrn-proof,.jrn[data-step="4"] .jrn-proof{opacity:1;transform:none} .jrn-proof .top{display:flex;align-items:center;gap:8px;margin-bottom:9px} .jrn-proof .top b{font-size:13.5px;color:var(--ink)} .jrn-proof .st{color:#E8A33D;font-size:12px;letter-spacing:.06em} .jrn-proof p{margin:0 0 7px;font-size:11.5px;line-height:1.5;color:var(--slate)} .jrn-proof p:last-child{margin:0} /* contact bar */ .jrn-contact{position:absolute;left:3.5%;bottom:9%;display:flex;gap:7px; opacity:0;transform:translateY(16px);pointer-events:none; transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.3,1)} .jrn[data-step="3"] .jrn-contact,.jrn[data-step="4"] .jrn-contact{opacity:1;transform:none} .jrn-contact span{display:inline-flex;align-items:center;gap:6px;padding:9px 14px; border-radius:100px;font-size:12px;font-weight:600;background:var(--lime);color:var(--ink)} .jrn-contact span+span{background:rgba(255,255,255,.94)} @media(max-width:900px){.jrn{grid-template-columns:1fr;gap:30px} .jrn-step[aria-selected="true"] span{max-height:110px} .jrn-proof{width:44%;padding:11px 13px} .jrn-proof .top b{font-size:11.5px}.jrn-proof p{font-size:10px} .jrn-contact span{padding:7px 11px;font-size:10.5px}} /* ============ MASONRY: what makes the website work ============ */ .msn{columns:3;column-gap:clamp(14px,1.6vw,22px);margin-top:clamp(44px,5vw,68px)} /* Cards must be ATOMIC inside the multi-column container. A display:block child with break-inside:avoid is only a *hint* in WebKit, so Safari re-fragments and re-balances the columns on repaint: /local-seo rendered 3/3 with column 3 empty, /google-reviews 3/2/1, and cards jumped between columns on hover/font-load, which is the flicker. inline-block + width:100% makes each card an atomic inline-level box a column cannot split, which pins the balance. Verified: both engines now render 2/2/2 with identical column tops at every breakpoint. */ .msn > *{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid; margin-bottom:clamp(14px,1.6vw,22px);display:inline-block;width:100%;vertical-align:top} /* Two classes, so this beats a.mcard / button.mcard (one class + one type) which set display:block and would otherwise reintroduce the fragmentation. */ .msn > .mcard{display:inline-block;width:100%;vertical-align:top} .mcard{position:relative;border-radius:22px;padding:clamp(26px,2.5vw,34px); border:1px solid transparent;background:var(--mint);overflow:hidden; transition:transform .55s cubic-bezier(.2,.7,.3,1),box-shadow .55s ease} .mcard:hover{transform:translateY(-6px);box-shadow:0 40px 60px -42px rgba(19,21,15,.45)} .mcard .ic{width:44px;height:44px;border-radius:13px;display:flex;align-items:center; justify-content:center;margin-bottom:clamp(46px,5.4vw,74px); background:rgba(15,92,65,.1);transition:background .45s ease} .mcard .ic svg{width:20px;height:20px;stroke:var(--emerald);stroke-width:1.7;fill:none; stroke-linecap:round;stroke-linejoin:round;transition:stroke .45s ease} .mcard h3{font-family:var(--display);font-weight:600;font-size:clamp(19px,1.75vw,23px); letter-spacing:-.022em;line-height:1.2;margin:0 0 12px;color:var(--ink)} .mcard p{margin:0;font-size:15px;line-height:1.63;color:var(--slate)} .mcard:hover .ic{background:var(--lime)} .mcard:hover .ic svg{stroke:var(--ink)} /* fills, so the wall is not six identical boxes */ .mcard.tall .ic{margin-bottom:clamp(96px,11vw,158px)} .mcard.dark{background:var(--forest);border-color:rgba(241,244,238,.12)} .mcard.dark h3{color:#fff} .mcard.dark p{color:rgba(241,244,238,.74)} .mcard.dark .ic{background:rgba(205,245,100,.14)} .mcard.dark .ic svg{stroke:var(--lime)} .mcard.mint{background:#DFF0D8;border-color:rgba(15,92,65,.15)} .mcard.cream{background:var(--cream);border-color:rgba(19,21,15,.16)} .mcard.cream .ic{background:rgba(15,92,65,.11)} .mcard.emerald{background:#146B4C;border-color:transparent} .mcard.emerald h3{color:#fff} .mcard.emerald p{color:rgba(241,244,238,.8)} .mcard.emerald .ic{background:rgba(205,245,100,.18)} .mcard.emerald .ic svg{stroke:var(--lime)} .mcard.lime{background:var(--lime);border-color:transparent} .mcard.lime p{color:rgba(19,21,15,.72)} .mcard.lime .ic{background:rgba(19,21,15,.1)} .mcard.lime .ic svg{stroke:var(--ink)} .mcard.lime:hover .ic{background:var(--ink)} .mcard.lime:hover .ic svg{stroke:var(--lime)} @media(max-width:960px){.msn{columns:2}.mcard.tall .ic{margin-bottom:clamp(60px,8vw,96px)}} @media(max-width:620px){.msn{columns:1} .mcard .ic,.mcard.tall .ic{margin-bottom:34px}} /* ============ EXAMPLE PREVIEWS (compact) ============ */ .exgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.2vw,32px); margin-top:clamp(38px,4.4vw,58px)} .excard{display:block;text-decoration:none;group:none} .exshot{position:relative;border-radius:14px;overflow:hidden;line-height:0; border:1px solid var(--line);background:#fff; transition:transform .55s cubic-bezier(.2,.7,.3,1),box-shadow .55s ease} .exshot img{width:100%;height:auto;display:block} .excard:hover .exshot{transform:translateY(-7px);box-shadow:0 40px 60px -40px rgba(19,21,15,.45)} .exchip{position:absolute;top:12px;left:12px;z-index:2; font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase; background:rgba(11,18,14,.82);color:#fff;padding:6px 10px;border-radius:100px; backdrop-filter:blur(4px)} .exmeta{display:flex;align-items:baseline;gap:12px;margin-top:17px;flex-wrap:wrap} .exmeta h3{font-family:var(--display);font-weight:600;font-size:clamp(17px,1.5vw,20px); letter-spacing:-.02em;margin:0;color:var(--ink)} .exmeta .cat{font-family:var(--mono);font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--emerald);margin:0} .excard > p{margin:9px 0 0;font-size:15px;line-height:1.6;color:var(--slate);max-width:44ch} @media(max-width:700px){.exgrid{grid-template-columns:1fr}} /* ============ SHARED: photo hero, text left over dark side ============ */ .hero-photo{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center} .hero-photo::before{content:"";position:absolute;inset:0;z-index:-2; background-image:var(--hero);background-size:cover;background-position:70% 50%} .hero-photo::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(92deg,rgba(8,14,11,.97) 0%,rgba(8,14,11,.95) 30%,rgba(8,14,11,.88) 46%,rgba(8,14,11,.5) 68%,rgba(8,14,11,.18) 100%)} .hero-photo .hwrap{width:100%;padding:clamp(136px,12vw,164px) var(--pad) clamp(52px,5.4vw,72px)} .hero-photo .hbar{max-width:1340px;margin:0 auto;padding-left:24px} @media(max-width:1080px){.hero-photo .hbar{padding-left:18px}} @media(max-width:360px){.hero-photo .hbar{padding-left:13px}} .hero-photo h1{font-family:var(--display);font-weight:600; font-size:clamp(34px,3.7vw,50px);line-height:1.06;letter-spacing:-.032em; margin:18px 0 0;max-width:16ch;color:#fff} .hero-photo h1 .hl{background-image:linear-gradient(var(--lime),var(--lime)); background-repeat:no-repeat;background-size:100% .085em;background-position:0 .93em; -webkit-box-decoration-break:clone;box-decoration-break:clone} .hero-photo .hero-sub{margin:clamp(18px,2vw,24px) auto 0 0;max-width:42ch; font-size:clamp(16px,1.25vw,18px);line-height:1.58;color:rgba(241,244,238,.82)} .hero-photo .hero-cta{margin-top:clamp(26px,2.8vw,36px);justify-content:flex-start} .hero-photo .eyebrow,.hero-photo h1{margin-left:0;margin-right:auto} .hero-photo .eyebrow{color:#fff;border-bottom-color:var(--lime)} .hero-photo .eyebrow::before{background:var(--lime)} @media(max-width:820px){.hero-photo h1{max-width:none} .hero-photo::before{background-position:64% 50%} .hero-photo::after{background:linear-gradient(180deg,rgba(8,14,11,.9) 0%,rgba(8,14,11,.93) 100%)}} /* ============ SHARED: audience band (slim cross-link row) ============ */ .audband{display:grid;grid-template-columns:repeat(4,1fr);gap:0; margin-top:clamp(34px,4vw,50px);border-top:1px solid var(--line)} .audband a{display:block;padding:clamp(24px,2.4vw,32px) clamp(18px,1.8vw,26px) clamp(26px,2.6vw,34px); border-bottom:1px solid var(--line);border-right:1px solid var(--line); text-decoration:none;transition:background .35s ease} .audband a:first-child{border-left:1px solid var(--line)} .audband a:hover{background:var(--white)} .audband .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--emerald)} .audband h3{font-family:var(--display);font-weight:600;font-size:clamp(16px,1.4vw,18.5px); letter-spacing:-.018em;margin:12px 0 8px;color:var(--ink)} .audband p{margin:0;font-size:14px;line-height:1.55;color:var(--slate)} .audband a:hover h3{text-decoration:underline;text-decoration-color:var(--lime); text-decoration-thickness:2px;text-underline-offset:4px} @media(max-width:900px){.audband{grid-template-columns:1fr 1fr} .audband a:nth-child(3){border-left:1px solid var(--line)}} @media(max-width:560px){.audband{grid-template-columns:1fr} .audband a{border-left:1px solid var(--line)}} /* ============ HOW WE WORK: four-step variant of the homepage component ============ */ .steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(22px,2.8vw,44px);position:relative} .steps4 .steps-wave{position:absolute;top:8px;left:11%;width:78%;height:60px; color:var(--line);pointer-events:none;z-index:0;display:block} .steps4 .step{position:relative;z-index:1;text-align:center;display:block} .steps4 .step h3{margin:0 0 10px;font-size:clamp(17px,1.6vw,21px)} .steps4 .step p{max-width:30ch;margin-inline:auto;font-size:15.5px} @media(max-width:900px){.steps4{grid-template-columns:1fr 1fr;gap:38px} .steps4 .steps-wave{display:none}} @media(max-width:560px){.steps4{grid-template-columns:1fr;gap:34px}} /* ============ WHAT MAKES IT WORK: hover states ============ */ .mkitem{padding:20px 20px 22px;margin:0 -20px;border-radius:16px; transition:background .5s ease,transform .5s cubic-bezier(.2,.7,.3,1)} .mkitem::after{left:20px} .mkitem .n{display:inline-flex;align-items:center;justify-content:center; min-width:30px;height:22px;padding:0 8px;border-radius:100px; background:rgba(15,92,65,.09);color:var(--emerald); transition:background .45s ease,color .45s ease} .mkitem h3{transition:transform .5s cubic-bezier(.2,.7,.3,1)} .mkitem p{transition:color .45s ease} .mkitem:hover,.mkitem:focus-within{background:var(--white);transform:translateY(-4px); box-shadow:0 30px 48px -38px rgba(19,21,15,.4)} .mkitem:hover .n,.mkitem:focus-within .n{background:var(--lime);color:var(--ink)} .mkitem:hover h3,.mkitem:focus-within h3{transform:translateX(4px)} .mkitem:hover p,.mkitem:focus-within p{color:var(--ink)} @media(hover:none){.mkitem{margin:0;padding:20px 0 22px}.mkitem::after{left:0}} /* ============ WHO IT IS FOR: editorial rows ============ */ .audrow{margin-top:clamp(34px,4vw,52px);border-top:1px solid var(--line)} .audrow a{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center; gap:clamp(16px,2.2vw,34px);padding:clamp(20px,2.3vw,28px) clamp(14px,1.6vw,22px); border-bottom:1px solid var(--line);text-decoration:none;position:relative; transition:background .45s ease,padding-left .45s cubic-bezier(.2,.7,.3,1)} .audrow a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px; background:var(--lime);transform:scaleY(0);transform-origin:center; transition:transform .5s cubic-bezier(.2,.7,.3,1)} .audrow a:hover{background:var(--mint);padding-left:clamp(22px,2.4vw,34px)} .audrow a:hover::before{transform:scaleY(1)} .audrow .n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--emerald)} .audrow h3{font-family:var(--display);font-weight:600; font-size:clamp(20px,2.1vw,28px);letter-spacing:-.024em;margin:0;color:var(--ink)} .audrow p{margin:0;font-size:15.5px;color:var(--slate);text-align:right} .audrow .go{display:inline-flex;width:34px;height:34px;border-radius:50%;flex:none; align-items:center;justify-content:center;border:1px solid var(--line); transition:background .4s ease,border-color .4s ease,transform .5s cubic-bezier(.2,.7,.3,1)} .audrow .go svg{width:13px;height:13px;stroke:var(--ink);stroke-width:1.7;fill:none; stroke-linecap:round;stroke-linejoin:round} .audrow a:hover .go{background:var(--lime);border-color:var(--lime);transform:translateX(4px)} @media(max-width:760px){.audrow a{grid-template-columns:auto 1fr auto;gap:14px 16px} .audrow p{grid-column:2/4;text-align:left;margin-top:6px;font-size:14.5px}} /* skip link */ .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--lime);color:var(--ink); padding:12px 20px;border-radius:0 0 12px 0;font-weight:600;font-size:15px;text-decoration:none} .skip:focus{left:0} /* ============ HERO: emerald variant of the homepage dark hero ============ */ .hero-emerald{position:relative;overflow:hidden;padding:0;background:#0F4331} .hero-emerald .hero{background:transparent} .hero-emerald::before{content:"";position:absolute;width:900px;height:900px;border-radius:50%; filter:blur(150px);opacity:.2;background:var(--lime);top:-430px;right:-250px;pointer-events:none} .hero-emerald::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(6,26,18,.34) 0%,rgba(6,26,18,0) 42%)} .hero-emerald .wrap{position:relative;z-index:1} .hero-emerald h1{color:#fff} .hero-emerald .eyebrow{color:var(--lime);border-bottom-color:rgba(205,245,100,.5)} .hero-emerald .eyebrow::before{background:var(--lime)} .hero-emerald .hero-sub{color:rgba(238,246,241,.78)} /* the highlighted word: lime type over a lime rule, never lime behind white */ .hero-emerald .mark{color:var(--lime);background:none;padding:0 .02em .06em; border-bottom:5px solid rgba(205,245,100,.42)} .hero-emerald .btn-lime{background:var(--lime);color:var(--ink)} .hero-emerald .btn-lime:hover{background:#fff;color:var(--ink)} .hero-emerald .btn-ghost,.hero-emerald .btn-outline-l{color:#fff;border-color:rgba(238,246,241,.34)} .hero-emerald .btn-ghost:hover,.hero-emerald .btn-outline-l:hover{border-color:#fff; background:rgba(255,255,255,.13);color:#fff} .hero-emerald a:focus-visible{outline:2px solid var(--lime);outline-offset:3px} /* nav pill sits on emerald, not forest */ body.hero-alt:not(.is-scrolled) .head .bar{background:rgba(12,52,38,.82); border-color:rgba(238,246,241,.18)} /* ============ HOVER STATES BY BACKGROUND ============ */ /* the base lime->ink flip is right on cream/white/mint, wrong on any dark ground where near-black reads as a hole. flip to white there instead. */ .env-dark .btn-lime:hover,.hero-photo .btn-lime:hover, .hero-dark .btn-lime:hover,.hero-emerald .btn-lime:hover{background:#fff;color:var(--ink)} .env-dark .btn-ghost,.hero-photo .btn-ghost{color:#fff;border-color:rgba(241,244,238,.32)} .env-dark .btn-ghost:hover,.hero-photo .btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.12);color:#fff} .hero-photo .btn-outline-l:hover,.env-dark .btn-outline-l:hover{border-color:#fff; background:rgba(255,255,255,.12);color:#fff} /* on the mint card wall the ink flip is fine, but the dark button needs a lift */ .env-mint .btn-dark:hover{background:var(--emerald);color:#fff;border-color:var(--emerald)} /* ============ MASONRY CARD REFINEMENTS ============ */ .mcard{border-color:rgba(19,21,15,.14)} .mcard:hover{border-color:rgba(19,21,15,.26)} .mcard.cream:hover{border-color:rgba(19,21,15,.26)} .mcard .ic{background:rgba(15,92,65,.12)} .mcard .ic svg{stroke:var(--emerald)} .mcard:hover .ic{background:var(--lime)} .mcard:hover .ic svg{stroke:var(--ink)} /* one accent colour per card so the icons carry the colour, not the cards */ .mcard.i-lime .ic{background:var(--lime)} .mcard.i-lime .ic svg{stroke:var(--ink)} .mcard.i-emer .ic{background:var(--emerald)} .mcard.i-emer .ic svg{stroke:var(--lime)} .mcard.i-ink .ic{background:var(--forest)} .mcard.i-ink .ic svg{stroke:var(--lime)} .mcard.i-mint .ic{background:#BCE39F} .mcard.i-mint .ic svg{stroke:#123D22} .mcard.i-sage .ic{background:#7FB48F} .mcard.i-sage .ic svg{stroke:#0B2A18} .mcard.i-olive .ic{background:#A9C86A} .mcard.i-olive .ic svg{stroke:#1B2A10} .mcard:hover .ic{transform:scale(1.06)} .mcard .ic{transition:background .4s ease,transform .45s cubic-bezier(.2,.7,.3,1)} /* hero section padding must beat any page stylesheet that redeclares .env */ .env.hero-emerald,.env.hero-dark{padding-top:0;padding-bottom:0} /* reviews hero: wide, short source. anchor left so the dark panel stays under the text */ .hero-photo.hero-reviews::before{background-position:38% 50%} @media(max-width:820px){.hero-photo.hero-reviews::before{background-position:52% 50%}} /* below desktop the step number sits centred above the text, on every page it appears */ @media(max-width:900px){ .steps3 .step,.steps4 .step{text-align:center;display:block} .steps3 .sdot,.steps4 .sdot{margin:0 auto 20px;width:50px;height:50px;font-size:21px;grid-row:auto} .steps3 .step h3,.steps4 .step h3{margin:0 0 10px;align-self:auto} .steps3 .step p,.steps4 .step p{grid-column:auto;max-width:38ch;margin-inline:auto} } /* ============ HERO: flat colour variants ============ */ /* one tint per page, set inline via --tint. shares every text and control rule with the emerald review hero so the states stay in step. */ .hero-tint{position:relative;overflow:hidden;padding:0;background:var(--tint)} .env.hero-tint{padding-top:0;padding-bottom:0} .hero-tint .hero{background:transparent} .hero-tint::before{content:"";position:absolute;width:900px;height:900px;border-radius:50%; filter:blur(150px);opacity:.18;background:var(--lime);top:-430px;right:-250px;pointer-events:none} .hero-tint::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(4,14,10,.36) 0%,rgba(4,14,10,0) 44%)} .hero-tint .wrap{position:relative;z-index:1} .hero-tint h1{color:#fff} .hero-tint .eyebrow{color:var(--lime);border-bottom-color:rgba(205,245,100,.5)} .hero-tint .eyebrow::before{background:var(--lime)} .hero-tint .hero-sub{color:rgba(238,246,241,.8)} .hero-tint .mark{color:var(--lime);background:none;padding:0 .02em .06em; border-bottom:5px solid rgba(205,245,100,.42)} .hero-tint .btn-lime{background:var(--lime);color:var(--ink)} .hero-tint .btn-lime:hover{background:#fff;color:var(--ink)} .hero-tint .btn-ghost,.hero-tint .btn-outline-l{color:#fff;border-color:rgba(238,246,241,.34)} .hero-tint .btn-ghost:hover,.hero-tint .btn-outline-l:hover{border-color:#fff; background:rgba(255,255,255,.13);color:#fff} .hero-tint a:focus-visible{outline:2px solid var(--lime);outline-offset:3px} /* nav pill matches whichever tint the page uses */ body.hero-alt{--pill:rgba(12,52,38,.82)} body.tint-teal{--pill:rgba(9,47,54,.84)} body.tint-moss{--pill:rgba(34,44,24,.84)} body.hero-alt:not(.is-scrolled) .head .bar{background:var(--pill); border-color:rgba(238,246,241,.18)} /* ============ HERO: light variants ============ */ .hero-light{position:relative;overflow:hidden;padding:0;background:var(--tint); display:flex;align-items:center} .env.hero-light{padding-top:0;padding-bottom:0} .hero-light::before{content:"";position:absolute;inset:-15% -10% auto -10%;height:120%;pointer-events:none; background: radial-gradient(56% 60% at 78% 14%, var(--glow,rgba(205,245,100,.6)) 0%, transparent 66%), radial-gradient(48% 56% at 14% 84%, rgba(15,92,65,.16) 0%, transparent 70%)} .hero-light::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 40%)} .hero-light .wrap{position:relative;z-index:1} .hero-light .hero{background:transparent} .hero-light h1{color:var(--ink)} .hero-light .eyebrow{color:var(--emerald);border-bottom-color:var(--lime)} .hero-light .eyebrow::before{background:var(--emerald)} .hero-light .hero-sub{color:var(--slate)} /* lime sits beneath the text, never behind it */ .hero-light .mark{color:var(--ink);background-image:linear-gradient(var(--lime),var(--lime)); background-repeat:no-repeat;background-size:100% .1em;background-position:0 .92em; -webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0} .hero-light .btn-dark{background:var(--ink);color:#fff;border-color:transparent} .hero-light .btn-dark:hover{background:var(--emerald);color:#fff} .hero-light .btn-ghost,.hero-light .btn-outline-l{color:var(--ink);border-color:rgba(19,21,15,.24)} .hero-light .btn-ghost:hover,.hero-light .btn-outline-l:hover{border-color:var(--ink); background:rgba(19,21,15,.05);color:var(--ink)} .hero-light a:focus-visible{outline:2px solid var(--emerald);outline-offset:3px} /* heroes keep real height, closer to the homepage */ /* ============ HERO: gradient variant ============ */ /* deep base colour with two blurred glows. per page: --base, --gA, --gB, --pill */ .hero-grad{position:relative;overflow:hidden;padding:0;background:var(--base)} .env.hero-grad{padding-top:0;padding-bottom:0} .hero-grad::before{content:"";position:absolute;inset:-20% -10% auto -10%;height:110%; pointer-events:none; background: radial-gradient(58% 62% at 74% 18%, var(--gA) 0%, transparent 68%), radial-gradient(52% 58% at 18% 76%, var(--gB) 0%, transparent 70%), radial-gradient(70% 50% at 50% 110%, var(--gC,transparent) 0%, transparent 72%)} .hero-grad::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(6,8,18,.42) 0%,rgba(6,8,18,0) 38%,rgba(6,8,18,.28) 100%)} .hero-grad .wrap{position:relative;z-index:1} .hero-grad .hero,.hero-light .hero,.hero-tint .hero{padding-bottom:clamp(56px,7vw,96px)} .hero-grad .hero{background:transparent} .hero-grad h1{color:#fff} .hero-grad .eyebrow{color:var(--lime);border-bottom-color:rgba(205,245,100,.5)} .hero-grad .eyebrow::before{background:var(--lime)} .hero-grad .hero-sub{color:rgba(238,241,250,.76)} .hero-grad .mark{color:var(--lime);background:none;padding:0 .02em .06em; border-bottom:5px solid rgba(205,245,100,.42)} .hero-grad .btn-lime{background:var(--lime);color:var(--ink)} .hero-grad .btn-lime:hover{background:#fff;color:var(--ink)} .hero-grad .btn-ghost,.hero-grad .btn-outline-l{color:#fff;border-color:rgba(255,255,255,.36)} .hero-grad .btn-ghost:hover,.hero-grad .btn-outline-l:hover{border-color:#fff; background:rgba(255,255,255,.14);color:#fff} .hero-grad a:focus-visible{outline:2px solid var(--lime);outline-offset:3px} body.tint-slate{--pill:rgba(28,34,43,.84)} body.tint-ocean{--pill:rgba(9,38,60,.82)} /* every non-homepage hero is the same height as /website-review/ */ .hero-grad,.hero-emerald,.hero-tint,.hero-light{min-height:818px;display:flex;align-items:center} @media(max-width:1080px){.hero-grad,.hero-emerald,.hero-tint,.hero-light{min-height:624px}} @media(max-width:760px){ .hero-grad,.hero-emerald,.hero-tint,.hero-light,.hero-dark{min-height:695px;min-height:100svh} .hero-dark{display:flex;align-items:center} .hero h1{line-height:1.1} .hero-wide h1{line-height:1.1} } /* ============ MASONRY: white cards with a gradient icon tile ============ */ /* one gradient per page, set on the container via --icA / --icB */ .msn.wcards .mcard{background:#fff;border:1px solid rgba(19,21,15,.06); box-shadow:0 1px 3px rgba(19,21,15,.05),0 10px 26px -20px rgba(19,21,15,.32)} .msn.wcards .mcard:hover{border-color:rgba(19,21,15,.1); box-shadow:0 2px 6px rgba(19,21,15,.06),0 34px 54px -34px rgba(19,21,15,.34)} .msn.wcards .mcard h3{color:var(--ink)} .msn.wcards .mcard p{color:var(--slate)} .msn.wcards .mcard .ic{width:52px;height:52px;border-radius:15px; background:linear-gradient(142deg,var(--icA) 0%,var(--icB) 100%); box-shadow:0 8px 18px -10px var(--icB)} .msn.wcards .mcard .ic svg{width:22px;height:22px;stroke:#fff} .msn.wcards .mcard:hover .ic{background:linear-gradient(142deg,var(--icA) 0%,var(--icB) 100%); transform:scale(1.07) rotate(-2deg)} .msn.wcards .mcard:hover .ic svg{stroke:#fff} /* icon tile sits close to the heading. the old gap was the masonry stagger device, which the varying copy lengths already provide. */ .msn.wcards .mcard .ic{margin-bottom:clamp(20px,2.1vw,26px)} @media(max-width:620px){.msn.wcards .mcard .ic{margin-bottom:20px}} /* ============ ACTIVE PAGE STATE ============ */ .nav a[aria-current="page"] span,.mob-links a[aria-current="page"] span{ color:var(--ink);background:linear-gradient(180deg,transparent 62%,var(--lime) 62%)} .sub a[aria-current="page"]{background:rgba(205,245,100,.5);color:var(--ink);font-weight:600} .sub a[aria-current="page"]:hover{background:rgba(205,245,100,.68)} .mob-exp a[aria-current="page"]{background:rgba(205,245,100,.5);color:var(--ink);font-weight:600} /* on a dark hero the pill lifts instead, the lime rule already reads */ body.dark-top:not(.is-scrolled) .head .bar .sub a[aria-current="page"]{background:rgba(205,245,100,.24);color:#fff} body.tint-petrol{--pill:rgba(12,55,57,.84)} /* ============ FLOW STRIP under a product demo ============ */ .flowstrip{display:flex;flex-wrap:wrap;align-items:center;gap:8px 6px; margin-top:clamp(18px,2vw,26px);justify-content:center} .flowstrip span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--slate);background:rgba(19,21,15,.045); border:1px solid var(--line);border-radius:100px;padding:7px 12px;white-space:nowrap} .flowstrip span:last-child{background:var(--lime);border-color:transparent;color:var(--ink)} .flowstrip i{width:12px;height:1px;background:rgba(19,21,15,.22);flex:none} @media(max-width:640px){.flowstrip{justify-content:flex-start}.flowstrip i{display:none}} body.tint-navy{--pill:rgba(20,35,72,.84)} /* opt-in wider measure for an unusually long headline, so it keeps to three lines and the hero stays the same height as the other service pages */ .hero-wide h1{max-width:var(--measure,17ch)} .hero-wide .hero-sub{max-width:var(--submeasure,52ch)} /* ============ PAIRS: two-column editorial list ============ */ .pairs{display:grid;grid-template-columns:1fr 1fr; column-gap:clamp(36px,5vw,92px);row-gap:clamp(32px,3.6vw,48px); margin-top:clamp(40px,4.6vw,62px)} .pairitem{padding-top:20px;border-top:1px solid rgba(19,21,15,.16);position:relative} .pairitem::after{content:"";position:absolute;top:-1px;left:0;width:52px;height:2px;background:var(--lime)} .pairitem .n{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--emerald)} .pairitem h3{font-family:var(--display);font-weight:600;font-size:clamp(18px,1.65vw,21px); letter-spacing:-.02em;line-height:1.22;margin:12px 0 10px;color:var(--ink)} .pairitem p{margin:0;font-size:15.5px;line-height:1.62;color:var(--slate);max-width:42ch} @media(max-width:700px){.pairs{grid-template-columns:1fr;row-gap:30px}} /* ============ AUDIT SNAPSHOT (unused, kept for reuse) ============ */ .vsa{background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden; box-shadow:0 30px 60px -44px rgba(19,21,15,.45)} .vsa-bar{display:flex;align-items:center;gap:9px;padding:13px 16px;background:#F2F0E9; border-bottom:1px solid rgba(19,21,15,.08)} .vsa-bar .q{flex:1;background:#fff;border:1px solid var(--line);border-radius:100px; padding:7px 13px;font-size:12.5px;color:var(--ink);display:flex;align-items:center;gap:8px} .vsa-bar .q svg{width:13px;height:13px;stroke:var(--slate);stroke-width:1.8;fill:none;flex:none} .vsa-bar .q b{font-weight:500} .vsa-bar .q em{font-style:normal;color:var(--slate)} .vsa-body{padding:clamp(16px,1.8vw,22px);display:grid;gap:10px} .vsa-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px; padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:#FCFBF7} .vsa-row .t{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--slate);background:rgba(19,21,15,.05);border-radius:100px;padding:5px 8px;white-space:nowrap} .vsa-row .f{font-size:13.5px;line-height:1.4;color:var(--ink)} .vsa-row .s{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase; padding:5px 9px;border-radius:100px;white-space:nowrap} .vsa-row.miss{background:#FFFBF2;border-color:rgba(190,140,40,.28)} .vsa-row.miss .s{background:rgba(190,140,40,.16);color:#7A5510} .vsa-row.ok{background:#F6FBF3;border-color:rgba(15,92,65,.2)} .vsa-row.ok .s{background:rgba(15,92,65,.13);color:var(--emerald)} .vsa-foot{padding:12px 16px 16px;border-top:1px solid var(--line); font-size:12.5px;color:var(--slate)} .vsa-foot b{color:var(--ink);font-weight:600} @media(max-width:560px){.vsa-row{grid-template-columns:1fr auto;gap:8px} .vsa-row .t{grid-column:1/-1}} /* ============ CONFIDENCE CHECKLIST (sector pages) ============ */ .ccl{margin-top:clamp(38px,4.4vw,58px);border-top:1px solid var(--line)} .ccl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center; gap:clamp(14px,2vw,28px);padding:clamp(18px,2.1vw,26px) clamp(6px,1vw,14px); border-bottom:1px solid var(--line);transition:background .4s ease} .ccl-row:hover{background:var(--white)} .ccl-row .n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--emerald)} .ccl-row .ask{font-family:var(--display);font-weight:600;font-size:clamp(16.5px,1.5vw,19.5px); letter-spacing:-.018em;line-height:1.3;color:var(--ink);margin:0} .ccl-row .ask::before{content:"\201C";color:var(--slate)} .ccl-row .ask::after{content:"\201D";color:var(--slate)} .ccl-row .arrow{width:26px;height:1px;background:rgba(19,21,15,.22);position:relative;flex:none} .ccl-row .arrow::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px; border-top:1px solid rgba(19,21,15,.28);border-right:1px solid rgba(19,21,15,.28); transform:rotate(45deg)} .ccl-row:hover .arrow,.ccl-row:hover .arrow::after{background:var(--lime);border-color:var(--lime)} .ccl-row .fix{margin:0;font-size:15px;line-height:1.55;color:var(--slate)} .ccl-row .fix b{display:block;color:var(--ink);font-weight:600;font-size:14px;margin-bottom:3px} @media(max-width:820px){.ccl-row{grid-template-columns:auto 1fr;row-gap:10px} .ccl-row .arrow{display:none} .ccl-row .fix{grid-column:2}} body.tint-wine{--pill:rgba(44,26,36,.84)} body.tint-graphite{--pill:rgba(30,34,40,.84)} body.tint-oxblood{--pill:rgba(48,24,26,.84)} body.tint-limeblack{--pill:rgba(24,28,16,.86)} /* ============ CLIENT CHECK: three plain columns ============ */ .ccheck{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px; background:var(--white);border:1px solid var(--line);border-radius:16px; padding:clamp(16px,1.8vw,22px);box-shadow:0 30px 60px -46px rgba(19,21,15,.4)} .ccol{display:flex;flex-direction:column;gap:9px} .ccol h6{margin:0 0 3px;font-family:var(--mono);font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:var(--slate);font-weight:400} .ccol .it{font-size:13.5px;line-height:1.35;color:var(--ink);background:#FBFAF6; border:1px solid var(--line);border-radius:9px;padding:9px 11px} .ccol.q .it{background:#F6FAF2;border-color:rgba(15,92,65,.18)} .ccol.q .it::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%; background:var(--lime);margin-right:8px;vertical-align:1px} .ccol.s .it{font-family:var(--mono);font-size:12px;color:var(--slate)} .ccol.s .it::before{content:"\1F50D\00a0\00a0";font-family:inherit;opacity:.5} @media(max-width:760px){.ccheck{grid-template-columns:1fr;gap:20px}} /* ============ ASK / SHOW: two columns ============ */ .askshow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,38px); margin-top:clamp(38px,4.4vw,56px)} .aspanel{background:var(--white);border:1px solid var(--line);border-radius:16px; padding:clamp(22px,2.4vw,32px)} .aspanel.show{background:var(--forest);border-color:transparent} .aspanel h3{margin:0 0 20px;font-family:var(--display);font-weight:600; font-size:clamp(18px,1.7vw,22px);letter-spacing:-.02em;color:var(--ink)} .aspanel.show h3{color:#fff} .aspanel ul{list-style:none;margin:0;padding:0;display:grid;gap:13px} .aspanel li{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start; font-size:15.5px;line-height:1.5;color:var(--slate)} .aspanel.show li{color:rgba(238,246,241,.82)} .aspanel li i{width:7px;height:7px;border-radius:50%;background:rgba(19,21,15,.22);margin-top:8px;flex:none} .aspanel.show li i{background:var(--lime)} .aspanel li b{color:var(--ink);font-weight:600} .aspanel.show li b{color:#fff} .asnote{margin:clamp(24px,2.6vw,34px) 0 0;font-size:15.5px;line-height:1.6;color:var(--slate);max-width:62ch} @media(max-width:760px){.askshow{grid-template-columns:1fr}} /* nav CTA on a dark hero: near-black is invisible there, so it flips to white */ body.dark-top:not(.is-scrolled) .head .bar .btn-dark{background:#fff;color:var(--ink);border-color:transparent} body.dark-top:not(.is-scrolled) .head .bar .btn-dark:hover{background:var(--lime);color:var(--ink)} /* ============ WHAT A CLIENT CHECKS: three columns ============ */ .chk3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(12px,1.4vw,18px); margin-top:clamp(30px,3.4vw,44px)} .chk3 .col3{background:var(--white);border:1px solid var(--line);border-radius:14px; padding:clamp(16px,1.6vw,20px);box-shadow:0 1px 3px rgba(19,21,15,.05),0 14px 30px -24px rgba(19,21,15,.3)} .chk3 .hd{display:flex;align-items:center;gap:8px;padding-bottom:12px;margin-bottom:12px; border-bottom:1px solid var(--line)} .chk3 .hd b{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase; color:var(--slate);font-weight:500} .chk3 .hd i{width:20px;height:20px;border-radius:6px;background:var(--lime);display:grid; place-items:center;flex:none} .chk3 .hd i svg{width:12px;height:12px;stroke:var(--ink);stroke-width:1.9;fill:none} .chk3 ul{list-style:none;margin:0;padding:0;display:grid;gap:8px} .chk3 li{font-size:14px;line-height:1.4;color:var(--ink);background:#FAF9F4; border:1px solid rgba(19,21,15,.07);border-radius:9px;padding:9px 11px} .chk3 .col3.ask li{background:transparent;border-color:transparent;padding:6px 0;color:var(--slate); display:flex;gap:8px;align-items:flex-start} .chk3 .col3.ask li::before{content:"?";font-family:var(--mono);font-size:11px;color:var(--emerald); background:rgba(15,92,65,.1);border-radius:5px;width:17px;height:17px;display:grid;place-items:center; flex:none;margin-top:1px} @media(max-width:820px){.chk3{grid-template-columns:1fr}} /* ============ ASK / SHOW two-column ============ */ .askgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px); margin-top:clamp(34px,4vw,52px)} .askcol{background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden} .askcol.fix{background:var(--forest);border-color:transparent} .askcol h3{margin:0;padding:clamp(16px,1.7vw,20px) clamp(18px,1.9vw,24px); font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--slate);font-weight:500;border-bottom:1px solid var(--line)} .askcol.fix h3{color:var(--lime);border-bottom-color:rgba(241,244,238,.14)} .askcol ol{list-style:none;margin:0;padding:clamp(8px,1vw,12px) clamp(10px,1.2vw,14px)} .askcol li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline; padding:clamp(11px,1.2vw,14px);border-radius:10px} .askcol li + li{border-top:1px solid var(--line)} .askcol.fix li + li{border-top-color:rgba(241,244,238,.12)} .askcol .n{font-family:var(--mono);font-size:10.5px;color:var(--emerald)} .askcol.fix .n{color:var(--lime)} .askcol .l{font-size:clamp(15px,1.35vw,16.5px);line-height:1.45;color:var(--ink)} .askcol.fix .l{color:#fff} .askcol .l em{display:block;font-style:normal;font-size:14px;color:var(--slate);margin-top:4px} .askcol.fix .l em{color:rgba(238,246,241,.66)} @media(max-width:760px){.askgrid{grid-template-columns:1fr}} body.tint-indigo{--pill:rgba(28,38,84,.84)} /* photo used in place of a device in a split section */ .splitphoto{border-radius:16px;overflow:hidden;border:1px solid var(--line); box-shadow:0 34px 66px -46px rgba(19,21,15,.5)} .splitphoto img{display:block;width:100%;height:auto} /* ============ WHAT THEY CHECK: four panels ============ */ .check4{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.3vw,16px)} .check4 .p4{background:var(--white);border:1px solid var(--line);border-radius:14px; padding:clamp(15px,1.5vw,19px);box-shadow:0 1px 3px rgba(19,21,15,.05),0 14px 30px -24px rgba(19,21,15,.3)} .check4 .p4 .hd{display:flex;align-items:center;gap:8px;margin-bottom:12px} .check4 .p4 .hd i{width:22px;height:22px;border-radius:7px;background:var(--lime); display:grid;place-items:center;flex:none} .check4 .p4 .hd i svg{width:12px;height:12px;stroke:var(--ink);stroke-width:1.9;fill:none} .check4 .p4 .hd b{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em; text-transform:uppercase;color:var(--slate);font-weight:500} .check4 .p4 ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px} .check4 .p4 li{font-size:13px;line-height:1.35;color:var(--ink);background:#FAF9F4; border:1px solid rgba(19,21,15,.07);border-radius:8px;padding:7px 10px} .check4 .p4.srch li{font-family:var(--mono);font-size:11.5px;color:var(--slate); background:#fff;border-radius:100px;padding:7px 12px} @media(max-width:640px){.check4{grid-template-columns:1fr}} /* ============ QUOTE READINESS: rows with fixes ============ */ .qready{margin-top:clamp(34px,4vw,50px);background:var(--white);border:1px solid var(--line); border-radius:16px;overflow:hidden} .qrow{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.15fr); gap:clamp(12px,1.6vw,22px);align-items:center;padding:clamp(15px,1.7vw,20px) clamp(16px,1.9vw,24px)} .qrow + .qrow{border-top:1px solid var(--line)} .qrow:hover{background:#FCFBF7} .qrow .tick{width:24px;height:24px;border-radius:50%;background:rgba(15,92,65,.1); display:grid;place-items:center;flex:none} .qrow .tick svg{width:13px;height:13px;stroke:var(--emerald);stroke-width:2.2;fill:none} .qrow .qq{font-family:var(--display);font-weight:600;font-size:clamp(15.5px,1.4vw,18px); letter-spacing:-.015em;color:var(--ink);line-height:1.3} .qrow .tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end} .qrow .tags span{font-size:12.5px;line-height:1;color:var(--emerald);background:rgba(15,92,65,.09); border-radius:100px;padding:7px 11px;white-space:nowrap} .qready .qhead{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.15fr); gap:clamp(12px,1.6vw,22px);padding:14px clamp(16px,1.9vw,24px);background:#F2F0E9; border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10px; letter-spacing:.13em;text-transform:uppercase;color:var(--slate)} .qready .qhead span:last-child{text-align:right} @media(max-width:760px){.qrow,.qready .qhead{grid-template-columns:auto 1fr} .qrow .tags{grid-column:2;justify-content:flex-start;margin-top:8px} .qready .qhead span:last-child{display:none}} body.tint-stone{--pill:rgba(58,46,36,.84)} body.tint-steel{--pill:rgba(40,54,64,.84)} /* ============ CALL PATH: search to call (trades) ============ */ .cpath{margin-top:clamp(34px,4vw,50px);background:var(--forest);border-radius:18px; padding:clamp(20px,2.4vw,32px);overflow:hidden} .cpath-grid{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; gap:clamp(10px,1.4vw,20px);align-items:stretch} .cstep{display:flex;flex-direction:column;gap:12px} .cstep .top{display:flex;align-items:center;gap:9px} .cstep .no{width:26px;height:26px;border-radius:50%;background:var(--lime);color:var(--ink); font-family:var(--mono);font-size:12px;font-weight:600;display:grid;place-items:center;flex:none} .cstep .lb{font-family:var(--display);font-weight:600;font-size:clamp(15px,1.35vw,17.5px); letter-spacing:-.015em;color:#fff} .cstep ul{list-style:none;margin:0;padding:0;display:grid;gap:6px} .cstep li{font-size:13px;line-height:1.35;color:rgba(238,246,241,.82); background:rgba(255,255,255,.06);border:1px solid rgba(241,244,238,.1); border-radius:9px;padding:8px 11px} .cstep.srch li{font-family:var(--mono);font-size:11.5px;color:rgba(238,246,241,.72); border-radius:100px;padding:8px 12px} .cstep.last li{background:rgba(205,245,100,.14);border-color:rgba(205,245,100,.3);color:#fff} .cpath .arw{align-self:center;color:rgba(241,244,238,.3);flex:none} .cpath .arw svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.6;fill:none} .cpath-end{margin:clamp(18px,2vw,26px) 0 0;padding-top:clamp(16px,1.8vw,22px); border-top:1px solid rgba(241,244,238,.14);font-family:var(--display);font-weight:600; font-size:clamp(16px,1.5vw,19px);letter-spacing:-.015em;color:var(--lime);text-align:center} @media(max-width:900px){.cpath-grid{grid-template-columns:1fr 1fr;gap:20px} .cpath .arw{display:none}} @media(max-width:560px){.cpath-grid{grid-template-columns:1fr}} /* ============ SPLIT CHECK: what they check / what we make clearer ============ */ .splitcheck{margin-top:clamp(34px,4vw,50px);background:var(--white);border:1px solid var(--line); border-radius:16px;overflow:hidden} .sc-head{display:grid;grid-template-columns:1fr 1fr;background:#F2F0E9; border-bottom:1px solid var(--line)} .sc-head span{padding:14px clamp(18px,2vw,26px);font-family:var(--mono);font-size:10px; letter-spacing:.13em;text-transform:uppercase;color:var(--slate)} .sc-head span + span{border-left:1px solid var(--line)} .sc-row{display:grid;grid-template-columns:1fr 1fr;align-items:stretch} .sc-row + .sc-row{border-top:1px solid var(--line)} .sc-row .qq{margin:0;padding:clamp(18px,2vw,24px) clamp(18px,2vw,26px); font-family:var(--display);font-weight:600;font-size:clamp(16px,1.45vw,19px); letter-spacing:-.015em;line-height:1.32;color:var(--ink);display:flex;align-items:center;gap:11px} .sc-row .qq .d{width:7px;height:7px;border-radius:50%;background:var(--lime);flex:none} .sc-row .aa{margin:0;padding:clamp(18px,2vw,24px) clamp(18px,2vw,26px); border-left:1px solid var(--line);display:flex;flex-direction:column;gap:7px;justify-content:center} .sc-row .aa span{font-size:15px;line-height:1.4;color:var(--emerald);display:flex;gap:9px;align-items:baseline} .sc-row .aa span::before{content:"";width:12px;height:1px;background:var(--lime);flex:none; transform:translateY(-4px)} .sc-row:hover{background:#FCFBF7} @media(max-width:720px){.sc-head{display:none} .sc-row{grid-template-columns:1fr} .sc-row .aa{border-left:0;padding-top:0}} body.tint-plum{--pill:rgba(50,36,70,.84)} body.tint-rose{--pill:rgba(66,48,58,.84)} .hero-note{margin:clamp(9px,1vw,12px) auto 0;font-family:var(--mono);font-size:12px; letter-spacing:.06em;color:rgba(238,241,250,.62)} .coverline{margin:clamp(24px,2.6vw,34px) 0 0;font-family:var(--display);font-weight:600; font-size:clamp(16px,1.5vw,19px);letter-spacing:-.015em;color:var(--ink); padding-left:16px;border-left:3px solid var(--lime)} .priceblock{text-align:center} .priceblock .lead,.priceblock .p-name{margin-inline:auto} .pricenote{margin:clamp(22px,2.4vw,30px) auto 0;max-width:52ch;font-size:14.5px; line-height:1.6;color:var(--slate)} /* ============ CREDIBILITY PANEL (about) ============ */ .credcard{background:var(--forest);border-radius:18px;padding:clamp(24px,2.6vw,34px);color:#fff} .credcard .who{display:flex;align-items:center;gap:14px;padding-bottom:clamp(18px,2vw,24px); margin-bottom:clamp(18px,2vw,24px);border-bottom:1px solid rgba(241,244,238,.16)} .credcard .init{width:52px;height:52px;border-radius:50%;background:var(--lime);color:var(--ink); display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:21px;flex:none} .credcard .nm{margin:0;font-family:var(--display);font-weight:600;font-size:20px; letter-spacing:-.02em;color:#fff} .credcard .ro{margin:3px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.11em; text-transform:uppercase;color:rgba(238,246,241,.62)} .credcard ul{list-style:none;margin:0;padding:0;display:grid;gap:13px} .credcard li{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:baseline; font-size:15.5px;line-height:1.5;color:rgba(238,246,241,.86)} .credcard li::before{content:"";width:14px;height:2px;background:var(--lime); transform:translateY(-4px);border-radius:2px} body.tint-sand{--pill:rgba(74,63,46,.84)} /* consecutive body paragraphs in a split section need space between them */ .p-line + .p-line{margin-top:clamp(14px,1.3vw,18px)} body.tint-jade{--pill:rgba(30,66,57,.84)} /* ============ WORK: featured preview ============ */ .feat{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,3vw,46px);align-items:center; margin-top:clamp(34px,4vw,50px)} .feat-img{border-radius:16px;overflow:hidden;border:1px solid var(--line); box-shadow:0 40px 74px -50px rgba(19,21,15,.55)} .feat-img img{display:block;width:100%;height:auto} .feat .lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase; color:var(--emerald);background:rgba(15,92,65,.09);border-radius:100px;padding:7px 12px; display:inline-block} .feat h3{font-family:var(--display);font-weight:600;letter-spacing:-.025em; font-size:clamp(24px,2.5vw,33px);line-height:1.18;color:var(--ink);margin:16px 0 0;max-width:20ch} .feat p{margin:16px 0 0;font-size:16.5px;line-height:1.6;color:var(--slate);max-width:44ch} .feat .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px} .feat .tags span{font-size:12.5px;color:var(--slate);background:rgba(19,21,15,.05); border:1px solid var(--line);border-radius:100px;padding:7px 12px} .feat .acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:26px} .feat .acts .lnk{font-size:15px;color:var(--emerald);border-bottom:1px solid rgba(15,92,65,.3); padding-bottom:2px} .feat .acts .lnk:hover{border-bottom-color:var(--emerald)} @media(max-width:900px){.feat{grid-template-columns:1fr}} /* honesty band */ .band{background:var(--forest);border-radius:18px;padding:clamp(24px,3vw,40px);color:#fff} .band h2{margin:0;font-family:var(--display);font-weight:600;letter-spacing:-.025em; font-size:clamp(22px,2.4vw,32px);line-height:1.2;color:#fff;max-width:22ch} .band p{margin:16px 0 0;font-size:16.5px;line-height:1.62;color:rgba(238,246,241,.78);max-width:60ch} /* placeholder preview cards */ .soon{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,18px); margin-top:clamp(30px,3.4vw,44px)} .soon .s{background:var(--white);border:1px solid var(--line);border-radius:14px; padding:clamp(16px,1.7vw,22px);display:flex;flex-direction:column;gap:10px} .soon .ph{aspect-ratio:4/3;border-radius:10px;background: repeating-linear-gradient(135deg,rgba(19,21,15,.035) 0 10px,rgba(19,21,15,.06) 10px 20px); border:1px solid var(--line);display:grid;place-items:center} .soon .ph span{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--slate)} .soon h3{margin:4px 0 0;font-family:var(--display);font-weight:600;font-size:17px; letter-spacing:-.02em;color:var(--ink)} .soon p{margin:0;font-size:14.5px;line-height:1.5;color:var(--slate)} @media(max-width:900px){.soon{grid-template-columns:1fr 1fr}} @media(max-width:560px){.soon{grid-template-columns:1fr}} /* scrollable preview viewer */ .viewer{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--white); box-shadow:0 40px 74px -50px rgba(19,21,15,.5);margin-top:clamp(26px,3vw,40px)} .viewer .vbar{display:flex;align-items:center;gap:9px;padding:12px 16px;background:#F2F0E9; border-bottom:1px solid var(--line)} .viewer .vbar i{width:9px;height:9px;border-radius:50%;background:rgba(19,21,15,.16)} .viewer .vbar b{margin-left:6px;font-family:var(--mono);font-size:11.5px;font-weight:400;color:var(--slate)} .viewer .scroll{max-height:min(78vh,900px);overflow-y:auto;overscroll-behavior:contain; -webkit-overflow-scrolling:touch} .viewer .scroll img{display:block;width:100%;height:auto} .viewer .vnote{padding:13px 16px;border-top:1px solid var(--line);font-size:13.5px;color:var(--slate); background:#FCFBF7} /* featured preview: desktop with a small mobile inset */ .feat-stack{position:relative} .feat-mob{position:absolute;right:-14px;bottom:-26px;width:clamp(84px,10.5%,124px); border-radius:12px;overflow:hidden;border:2px solid #fff; box-shadow:0 20px 38px -22px rgba(19,21,15,.55)} .feat-mob img{display:block;width:100%;height:auto} .feat .note{margin:16px 0 0;font-size:13px;color:var(--slate)} @media(max-width:900px){.feat-mob{width:92px;right:-8px;bottom:-18px}} /* short 3-step strip */ .strip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,30px); margin-top:clamp(28px,3.2vw,42px)} .strip .st3{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline} .strip .st3 .n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--emerald)} .strip .st3 p{margin:0;font-size:15.5px;line-height:1.55;color:var(--slate)} .strip .st3 b{display:block;font-family:var(--display);font-weight:600;font-size:17px; letter-spacing:-.02em;color:var(--ink);margin-bottom:5px} @media(max-width:760px){.strip{grid-template-columns:1fr;gap:18px}} /* inline mini list */ .minilist{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(20px,2.2vw,28px)} .minilist span{font-size:14px;color:var(--slate);background:rgba(19,21,15,.045); border:1px solid var(--line);border-radius:100px;padding:8px 14px} /* ============ WORK GRID: preview cards ============ */ .wgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,34px); margin-top:clamp(32px,3.8vw,48px)} .wcard{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line); border-radius:16px;overflow:hidden;transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s ease,border-color .4s ease; box-shadow:0 1px 3px rgba(19,21,15,.05),0 16px 34px -26px rgba(19,21,15,.3)} .wcard:hover{transform:translateY(-4px);border-color:rgba(19,21,15,.12); box-shadow:0 2px 6px rgba(19,21,15,.06),0 40px 60px -38px rgba(19,21,15,.4)} .wcard .shot{position:relative;display:block;border-bottom:1px solid var(--line)} .wcard .shot img{display:block;width:100%;height:auto} .wcard .chip{position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:9.5px; letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(19,21,15,.72); border-radius:100px;padding:6px 10px;backdrop-filter:blur(4px)} .wcard .body{padding:clamp(18px,1.9vw,24px);display:flex;flex-direction:column;gap:10px;flex:1} .wcard .cat{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase; color:var(--emerald)} .wcard h3{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(19px,1.8vw,22px); letter-spacing:-.022em;color:var(--ink)} .wcard p{margin:0;font-size:15px;line-height:1.55;color:var(--slate)} .wcard .tg{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px} .wcard .tg span{font-size:12px;color:var(--slate);background:rgba(19,21,15,.045); border:1px solid var(--line);border-radius:100px;padding:6px 10px} .wcard .go3{margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:8px; font-size:14.5px;color:var(--emerald)} .wcard .go3 svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.7;fill:none; transition:transform .4s cubic-bezier(.2,.7,.3,1)} .wcard:hover .go3 svg{transform:translateX(4px)} @media(max-width:820px){.wgrid{grid-template-columns:1fr}} /* ============ WORK: project grid ============ */ .filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(26px,3vw,38px)} .filters button{font-family:var(--sans);font-size:14px;color:var(--slate);background:transparent; border:1px solid var(--line);border-radius:100px;padding:9px 16px;cursor:pointer; transition:background .3s ease,color .3s ease,border-color .3s ease} .filters button:hover{border-color:rgba(19,21,15,.28);color:var(--ink)} .filters button[aria-pressed="true"]{background:var(--ink);border-color:transparent;color:#fff} .pjgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.2vw,32px); margin-top:clamp(28px,3.2vw,42px)} .pjgrid.trio{grid-template-columns:repeat(3,1fr)} .pj{background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden; display:flex;flex-direction:column; box-shadow:0 1px 3px rgba(19,21,15,.05),0 20px 40px -30px rgba(19,21,15,.34); transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s ease,border-color .4s ease} .pj:hover{transform:translateY(-4px);border-color:rgba(19,21,15,.12); box-shadow:0 2px 6px rgba(19,21,15,.06),0 40px 62px -38px rgba(19,21,15,.4)} .pj .shot{aspect-ratio:16/10;overflow:hidden;background:#F2F0E9;border-bottom:1px solid var(--line); position:relative} .pj .shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center} .pj .shot.ph{display:grid;place-items:center; background:linear-gradient(150deg,#EFEDE5 0%,#E4E8DF 55%,#DFE6DA 100%)} .pj .shot.ph span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase; color:var(--slate);border:1px solid rgba(19,21,15,.14);border-radius:100px;padding:8px 14px; background:rgba(255,255,255,.5)} .pj .body{padding:clamp(18px,1.9vw,24px);display:flex;flex-direction:column;gap:10px;flex:1} .pj .pjmeta{display:flex;flex-wrap:wrap;align-items:center;gap:7px} .pj .pjmeta .pill-s{flex:0 0 auto;width:auto;display:inline-flex;align-items:center} .pill-s{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase; border-radius:100px;padding:6px 10px;background:rgba(15,92,65,.1);color:var(--emerald)} .pill-s.pill-wait{background:rgba(19,21,15,.06);color:var(--slate)} .pill-s.sector{background:transparent;border:1px solid var(--line);color:var(--slate)} .pj h3{margin:2px 0 0;font-family:var(--display);font-weight:600;letter-spacing:-.022em; font-size:clamp(18px,1.6vw,21px);line-height:1.22;color:var(--ink)} .pj p{margin:0;font-size:15px;line-height:1.55;color:var(--slate)} .pj .go3{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:8px; font-size:14.5px;color:var(--emerald);background:none;border:0;padding-left:0;cursor:pointer; font-family:var(--sans)} .pj .go3 svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.7;fill:none; transition:transform .4s cubic-bezier(.2,.7,.3,1)} .pj:hover .go3 svg{transform:translateX(4px)} .pj .go3[disabled]{color:var(--slate);cursor:default} .pj[hidden]{display:none} @media(max-width:980px){.pjgrid.trio{grid-template-columns:1fr 1fr}} @media(max-width:700px){.pjgrid,.pjgrid.trio{grid-template-columns:1fr}} /* ============ MODAL ============ */ .mdl{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center; padding:clamp(16px,3vw,48px)} .mdl[open],.mdl.is-open{display:flex} .mdl-bg{position:absolute;inset:0;background:rgba(10,16,12,.62);backdrop-filter:blur(3px)} .mdl-box{position:relative;width:min(1040px,100%);max-height:min(88vh,940px);background:var(--white); border-radius:18px;overflow:hidden;display:flex;flex-direction:column; box-shadow:0 60px 100px -50px rgba(0,0,0,.6)} .mdl-head{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#F2F0E9; border-bottom:1px solid var(--line);flex:none} .mdl-head i{width:9px;height:9px;border-radius:50%;background:rgba(19,21,15,.16);flex:none} .mdl-head b{margin-left:6px;font-family:var(--mono);font-size:11.5px;font-weight:400;color:var(--slate)} .mdl-head .x{margin-left:auto;width:32px;height:32px;border-radius:50%;border:1px solid var(--line); background:#fff;cursor:pointer;display:grid;place-items:center;color:var(--ink)} .mdl-head .x:hover{background:var(--ink);color:#fff;border-color:transparent} .mdl-head .x svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.8;fill:none} .mdl-scroll{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;flex:1} .mdl-scroll img{display:block;width:100%;height:auto} .mdl-foot{padding:12px 16px;border-top:1px solid var(--line);background:#FCFBF7;flex:none; display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between} .mdl-foot span{font-size:13px;color:var(--slate)} body.mdl-lock{overflow:hidden} /* ============ WORK: desktop + mobile duo card visual ============ */ .pj .shotduo{position:relative;aspect-ratio:16/10;overflow:hidden; border-bottom:1px solid var(--line); background:linear-gradient(148deg,#F0EEE6 0%,#E7EBE2 56%,#DFE6DA 100%)} .pj .shotduo .d{position:absolute;top:6%;left:17%;right:0;bottom:0;overflow:hidden; border-top-left-radius:10px;border-top:1px solid rgba(19,21,15,.10); border-left:1px solid rgba(19,21,15,.10); box-shadow:-12px 12px 34px -20px rgba(19,21,15,.48)} .pj .shotduo .m{position:absolute;left:3%;bottom:6%;width:16.5%;aspect-ratio:9/18.6; overflow:hidden;border-radius:10px;border:2px solid #FCFBF7; box-shadow:0 18px 30px -16px rgba(19,21,15,.55)} .pj .shotduo .d img,.pj .shotduo .m img{display:block;width:100%;height:100%; object-fit:cover;object-position:top center} .pj .shotduo.ph .d,.pj .shotduo.ph .m{background:rgba(19,21,15,.055);box-shadow:none} .pj .shotduo.ph .m{border-color:rgba(252,251,247,.9)} .pj .shotduo .lbl{position:absolute;inset:0;display:grid;place-items:center;z-index:2} .pj .shotduo .lbl span{font-family:var(--mono);font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:var(--slate);border:1px solid rgba(19,21,15,.14); border-radius:100px;padding:8px 14px;background:rgba(255,255,255,.72)} .pjgrid.trio .pj .shotduo .m{width:20%} .pj a.go3{text-decoration:none} .pj a.go3 .ext{width:13px;height:13px} /* ============ WORK MODAL: paired desktop and mobile frames ============ */ .mdl-body{flex:1;min-height:0;display:grid;grid-template-columns:1fr 272px; gap:clamp(12px,1.4vw,18px);padding:clamp(12px,1.4vw,18px);background:#F2F0E9;overflow:hidden} .mdl-body.one{grid-template-columns:1fr} .mdl-body .frm{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch; background:#fff;border:1px solid var(--line);border-radius:12px} .mdl-body .frm img{display:block;width:100%;height:auto} .mdl-body .frm[hidden]{display:none} @media(max-width:820px){ .mdl-body{grid-template-columns:1fr;overflow-y:auto} .mdl-body .frm{overflow:visible} .mdl-body .frm-m{width:min(300px,80%);margin:0 auto} } .mdl-foot[hidden]{display:none} /* ============ WORK PREVIEW CARDS REUSED ON OTHER PAGES ============ */ .pjgrid.pj-pair{grid-template-columns:repeat(2,minmax(0,440px));justify-content:center; margin-top:clamp(16px,2vw,28px)} .pjgrid.pj-solo{grid-template-columns:minmax(0,640px);justify-content:center} @media(max-width:700px){.pjgrid.pj-pair{grid-template-columns:1fr}} /* ============ CONTACT PAGE ============ */ body.tint-mulberry{--pill:rgba(53,22,50,.86)} .csplit{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(28px,4.4vw,76px);align-items:start} @media(max-width:960px){.csplit{grid-template-columns:1fr;gap:clamp(30px,4vw,44px)}} .cform{background:var(--white);border:1px solid var(--line-m);border-radius:20px; padding:clamp(24px,2.8vw,36px);box-shadow:0 40px 70px -55px rgba(19,21,15,.5)} .chk-form textarea{font-family:var(--body);font-size:16px;color:var(--ink);background:var(--cream); border:1px solid var(--line);border-radius:10px;padding:14px 15px;width:100%; min-height:150px;resize:vertical;line-height:1.55} .chk-form textarea::placeholder{color:#9a9c94} .chk-form textarea:focus{outline:2px solid var(--emerald);outline-offset:1px;border-color:transparent} .chk-form label i{font-style:normal;text-transform:none;letter-spacing:.02em;color:var(--slate)} /* service choice pills, not a dropdown */ .svc{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px} .svc input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .chk-form .svc label{display:inline-flex;align-items:center;font-family:var(--body);font-size:15.5px; letter-spacing:0;text-transform:none;color:var(--ink);cursor:pointer;background:var(--white); border:1px solid var(--line-m);border-radius:100px;padding:12px 20px;gap:0; transition:background .2s ease,border-color .2s ease,color .2s ease} .chk-form .svc label:hover{border-color:var(--emerald)} .svc input:checked+label{background:var(--ink);border-color:transparent;color:#fff} .svc input:focus-visible+label{outline:2px solid var(--emerald);outline-offset:2px} /* contact details list */ .clist{display:grid} .clist a{display:block;text-decoration:none;padding:clamp(22px,2.3vw,30px) 0; border-top:1px solid var(--line);transition:opacity .2s ease} .clist a:last-of-type{border-bottom:1px solid var(--line)} .clist b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.13em; text-transform:uppercase;color:var(--emerald);font-weight:400} .clist em{display:block;font-style:normal;font-family:var(--display);font-weight:600; font-size:clamp(20px,1.9vw,25px);letter-spacing:-.02em;color:var(--ink);margin-top:11px; transition:color .2s ease} .clist small{display:block;font-size:15px;line-height:1.5;color:var(--slate);margin-top:9px} .clist a:hover em{color:var(--emerald)} .clist a:focus-visible{outline:2px solid var(--emerald);outline-offset:3px} .cnote{margin:clamp(26px,2.8vw,36px) 0 0;font-size:16px;line-height:1.6;color:var(--slate)} button.mcard{width:100%;text-align:left;font-family:inherit;color:inherit;cursor:pointer; -webkit-appearance:none;appearance:none} a.mcard{text-decoration:none;color:inherit;display:block} button.mcard .pick{display:block;margin-top:16px;font-family:var(--mono);font-size:10.5px; letter-spacing:.12em;text-transform:uppercase;color:var(--emerald)} button.mcard[aria-pressed="true"]{border-color:var(--emerald); box-shadow:0 0 0 1px var(--emerald) inset,0 26px 42px -32px rgba(19,21,15,.4)} button.mcard[aria-pressed="true"] .pick::after{content:" \2713"} button.mcard:focus-visible{outline:2px solid var(--emerald);outline-offset:3px} .hero-light .hero-note{color:var(--slate);opacity:1} .copt small{display:block;font-size:13px;line-height:1.45;color:var(--slate);margin-top:6px} .chk-form fieldset{border:0;margin:0;padding:0;display:grid;gap:8px} .chk-form .flab{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.11em; text-transform:uppercase;color:var(--slate)} /* ============ LOCATIONS HUB ============ */ .checkcard{background:var(--white);border:1px solid var(--line-m);border-radius:18px; padding:clamp(24px,2.6vw,34px);margin-top:clamp(30px,3.4vw,44px);max-width:740px} .checkcard h3{margin:0 0 18px;font-family:var(--display);font-weight:600; font-size:clamp(18px,1.7vw,21px);letter-spacing:-.02em;color:var(--ink)} .checkcard ul{list-style:none;margin:0;padding:0;display:grid;gap:13px} .checkcard li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.5;color:var(--slate)} .checkcard li svg{width:19px;height:19px;flex:none;margin-top:2px;stroke:var(--emerald); stroke-width:2.1;fill:none;stroke-linecap:round;stroke-linejoin:round} .locgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,3.6vw,64px); margin-top:clamp(30px,3.4vw,44px)} .locgrid a{display:block;text-decoration:none;padding:clamp(19px,2vw,25px) 14px; margin-inline:-14px;border-top:1px solid var(--line);border-radius:0 0 12px 12px; transition:background .25s ease,border-color .25s ease} .locgrid a:hover{background:var(--white);border-color:var(--emerald)} .locgrid a strong{display:flex;align-items:center;gap:9px;font-family:var(--display); font-weight:600;font-size:clamp(19px,1.75vw,22px);letter-spacing:-.02em;color:var(--ink); transition:color .2s ease} .locgrid a strong svg{width:14px;height:14px;flex:none;stroke:currentColor;stroke-width:1.8; fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:translateX(-5px); transition:opacity .25s ease,transform .25s ease} .locgrid a p{margin:9px 0 0;font-size:15.5px;line-height:1.55;color:var(--slate);max-width:46ch} .locgrid a:hover strong{color:var(--emerald)} .locgrid a:hover p{color:var(--ink)} .locgrid a:hover strong svg{opacity:1;transform:none} .locgrid a:focus-visible{outline:2px solid var(--emerald);outline-offset:3px} @media(max-width:760px){.locgrid{grid-template-columns:1fr}} .locgroups{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3.2vw,48px); margin-top:clamp(30px,3.4vw,44px)} @media(max-width:820px){.locgroups{grid-template-columns:1fr;gap:30px}} .locgroups h3{margin:0 0 15px;font-family:var(--mono);font-size:11px;letter-spacing:.13em; text-transform:uppercase;color:var(--emerald);font-weight:400} a.pill-n{text-decoration:none;cursor:pointer} a.pill-n:focus-visible{outline:2px solid var(--emerald);outline-offset:2px} .locgroups .pills{justify-content:flex-start} @media(prefers-reduced-motion:reduce){.locgrid a strong svg{transition:none}} /* ============ NUMBERED TWO-COLUMN LIST ============ */ .numlist{list-style:none;margin:clamp(30px,3.4vw,44px) 0 0;padding:0;display:grid; grid-template-columns:1fr 1fr;gap:0 clamp(28px,3.6vw,64px)} .numlist li{display:grid;grid-template-columns:auto 1fr;gap:0 16px;align-items:start; padding:clamp(19px,2vw,24px) 0;border-top:1px solid var(--line)} .numlist .n{font-family:var(--mono);font-size:11px;letter-spacing:.11em;color:var(--emerald); padding-top:5px} .numlist b{font-family:var(--display);font-weight:600;font-size:clamp(17px,1.6vw,20px); letter-spacing:-.02em;color:var(--ink)} .numlist p{grid-column:2;margin:8px 0 0;font-size:15.5px;line-height:1.55;color:var(--slate); max-width:44ch} @media(max-width:760px){.numlist{grid-template-columns:1fr}} /* ============ HERO: background photo (layers under hero-grad's glow + scrim) ============ */ .hero-grad.hero-scene{background-color:var(--base);background-image:var(--photo); background-size:cover;background-position:center 58%;background-repeat:no-repeat} .hero-grad.hero-scene::after{background: linear-gradient(180deg,rgba(24,8,22,.76) 0%,rgba(24,8,22,.54) 42%,rgba(24,8,22,.82) 100%), linear-gradient(90deg,rgba(24,8,22,.48) 0%,rgba(24,8,22,.10) 58%,rgba(24,8,22,.38) 100%)} .hero-grad.hero-scene .hero-sub{color:#fff} @media(max-width:700px){.hero-grad.hero-scene{background-position:center 50%}} /* ============ LEGAL PAGES ============ */ .legal-head h1{margin:16px 0 0;max-width:16ch;font-family:var(--display);font-weight:600; font-size:clamp(38px,5vw,62px);letter-spacing:-.03em;line-height:1.04;color:var(--ink)} .legal-head .lead{margin-top:18px;max-width:50ch} .legal-head .upd{margin-top:22px;font-family:var(--mono);font-size:11.5px;letter-spacing:.11em; text-transform:uppercase;color:var(--emerald)} .legal{max-width:72ch} .legal h2{margin:clamp(36px,3.8vw,52px) 0 0;font-family:var(--display);font-weight:600; font-size:clamp(21px,2.1vw,27px);letter-spacing:-.022em;line-height:1.2;color:var(--ink)} .legal h2:first-child{margin-top:0} .legal h3{margin:clamp(24px,2.5vw,32px) 0 0;font-family:var(--display);font-weight:600; font-size:clamp(17px,1.6vw,19px);letter-spacing:-.018em;color:var(--ink)} .legal p{margin:14px 0 0;font-size:16.5px;line-height:1.66;color:var(--slate)} .legal h2+p,.legal h3+p{margin-top:11px} .legal a{color:var(--emerald);text-decoration:underline;text-underline-offset:3px; text-decoration-thickness:1px} .legal a:hover{color:var(--ink)} /* ============ PHOTO CREDITS ============ */ .credits{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--line)} .credits li{padding:18px 0;border-bottom:1px solid var(--line)} .credits b{display:block;font-family:var(--display);font-weight:600;font-size:17px; letter-spacing:-.015em;color:var(--ink)} .credits p{margin:8px 0 0;font-size:15.5px;line-height:1.6;color:var(--slate)} .credits a{color:var(--emerald);text-decoration:underline;text-underline-offset:3px; text-decoration-thickness:1px} .credits a:hover{color:var(--ink)} .credits .mod{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:10px; letter-spacing:.1em;text-transform:uppercase;color:var(--emerald); border:1px solid rgba(15,92,65,.3);border-radius:100px;padding:5px 11px} .credits .todo{border-color:rgba(19,21,15,.22);color:var(--slate)} .foot-legal{display:flex;flex-wrap:wrap;align-items:center;gap:0} .foot-legal i{font-style:normal;color:var(--slate);opacity:.45;padding:0 12px} @media(max-width:520px){.foot-legal i{padding:0 9px}} .about-bio{max-width:62ch;margin-inline:auto;text-align:center} .about-bio .eyebrow{display:inline-flex} .about-bio .p-name{text-align:center} .about-bio .p-line{text-align:left;margin-inline:auto;max-width:60ch} /* ============ VISIBLE BREADCRUMBS ============ */ .crumbbar{background:var(--cream);border-bottom:1px solid var(--line);padding:13px 0} .crumbbar ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center; gap:7px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase} .crumbbar li{display:flex;align-items:center;gap:7px} .crumbbar li:not(:last-child)::after{content:"/";color:var(--slate);opacity:.4} .crumbbar a{color:var(--slate);text-decoration:none;transition:color .15s ease} .crumbbar a:hover{color:var(--emerald)} .crumbbar li[aria-current="page"]{color:var(--ink)} @media(max-width:560px){.crumbbar ol{font-size:10px;gap:6px}.crumbbar li:not(:last-child)::after{margin:0}} /* ---- /website-review components recovered 2026-09-10 ---------------------- .gets/.get, .rsteps/.rstep and .fixlist had NO rules in this stylesheet, so three sections of that page rendered as unstyled stacked text. Why the conversion missed them: these rules exist only inside the 153KB inline