/* DesignSense free website audit page. Design: the approved New Look preview. Live report rules: audit tool package. */

@font-face{font-family:Fractul;src:url(../fonts/Fractul-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Fractul;src:url(../fonts/Fractul-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Fractul;src:url(../fonts/Fractul-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Fractul;src:url(../fonts/Fractul-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
/* tokens taken from design-sense-2244.webflow.css, identical to the draft site pages */
:root{--blue:#4517ff;--black:#000;--card-d:#121213;--line-d:#252525;--bg-l:#f9f9f9;--line-l:#e1e2e6;--grey:#6d6f7b;--grey-d:#b2b4c3;--green:#36d67e;--green-deep:#0e7a4a;--sun:#ffd66b}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{overflow-x:clip;margin:0;font-family:Fractul,Arial,sans-serif;color:#000;background:#fff;font-size:16px;line-height:24px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,[role="button"],select,summary,input:not([type="checkbox"],[type="radio"]){min-height:44px}
.wrap{width:95%;max-width:1340px;margin:0 auto}
.dark{background:#000;color:#fff}
.sec{padding:140px 0}
h1,h2,h3{margin:0;font-weight:500}
/* eyebrow = .eyebrow-text-wrap + .blue-graphic, as on the site */
.eyebrow{display:flex;align-items:center;gap:14px;font-size:16px;line-height:26px;font-weight:500;text-transform:uppercase;color:#0006}
.dark .eyebrow{color:#bfbfbf}
.eyebrow:before{content:"";width:3.35px;height:13px;border-radius:20px;background:var(--blue)}
.h2{font-size:32px;line-height:46px;max-width:820px;margin-top:24px}
.lead{font-size:18px;line-height:28px;color:var(--grey);max-width:620px;margin-top:16px}
.dark .lead{color:var(--grey-d)}
/* buttons = .btn-primary / .secondary-btn, exact site hover: text slides, chip stretches, arrow rotates */
.btn{display:inline-flex;align-items:center;gap:16px;background:var(--blue);color:#fff;border:0;border-radius:30px;padding:6px 6px 6px 24px;font-family:inherit;font-size:20px;line-height:20px;font-weight:500;white-space:nowrap;position:relative;cursor:pointer}
.btn .btn-t{position:relative;z-index:5;transition:transform .3s cubic-bezier(.455,.03,.515,.955)}
.btn i{background:#fff;border-radius:80px;width:45px;height:45px;flex:none;display:flex;align-items:center;justify-content:center;transition:width .3s cubic-bezier(.455,.03,.515,.955)}
.btn i img{width:15px;height:15px;transition:transform .3s cubic-bezier(.455,.03,.515,.955)}
.btn:hover .btn-t{transform:translateX(3px)}
.btn:hover i{width:60px}
.btn:hover i img{transform:rotate(45deg)}
.btn.btn-2{background:var(--line-d)}
.btn.btn-2 i{background:var(--blue)}
.btn:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid rgba(69,23,255,.45);outline-offset:2px}
.tag{display:inline-block;border:1px solid var(--line-l);background:#fff;border-radius:40px;padding:10px 26px;font-size:16px;line-height:20px;color:#000000b3}
.dark .tag{background:var(--card-d);border-color:var(--line-d);color:#ddd}

/* NAV = .navbar / .nav-flex, copied from the site pages. This page's hero is light, so the bar uses the site's scrolled (white) state from the start. */
.nav{position:sticky;top:0;z-index:50;padding:15px 0}
.navin{display:flex;align-items:center;justify-content:space-between;gap:24px;border:1px solid var(--line-l);border-radius:20px;padding:15px 16px;background:#fff;color:#000;position:relative;transition:background .3s,border-color .3s,color .3s}
.logo img{width:150px;filter:invert(1)}
.menu{display:flex;gap:50px;align-items:center;font-size:16px;line-height:24px}
.menu > a,.dd > button{white-space:nowrap;background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:10px 0;display:flex;gap:8px;align-items:center}
.dd > button:after{content:"•";font-size:24px;line-height:1}
.mega{position:absolute;left:0;right:0;top:calc(100% + 10px);background:var(--bg-l);border:1px solid var(--line-l);border-radius:20px;padding:14px 15px;color:#000;display:grid;grid-template-columns:1fr 1fr 1fr 290px;gap:0 10px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s,visibility .2s;z-index:60}
.dd:hover .mega,.dd:focus-within .mega,.mega.open{opacity:1;visibility:visible;transform:none}
/* NAV v3 hover bridge, so the mega menu does not close crossing the gap */
.logo img{transition:filter .3s}
.mega:before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.mega.small:before{top:-30px;height:30px}
.dd .mega{transition:opacity .2s,transform .2s,visibility 0s linear .2s}
.dd:hover .mega,.dd:focus-within .mega{transition:opacity .2s,transform .2s,visibility 0s}
.mega > div:not(.mega-cta):not(.mega-for){background:#fff;border:1px solid var(--line-l);border-radius:10px;padding:16px 10px}
.mega h4{margin:0 0 10px 15px;font-size:16px;line-height:26px;color:var(--grey);font-weight:500;text-transform:uppercase}
.mi{display:flex;gap:18px;align-items:center;padding:10px 15px;border-radius:4px;transition:background .2s}
.mi:hover,.mi:focus-visible{background:var(--bg-l);outline:0}
.mi .ico{flex:none;width:30px;display:flex;align-items:center;justify-content:center}
.mi .ico img{max-width:30px;max-height:28px}
.mi b{display:block;font-weight:500;font-size:17px;line-height:24px}
.mi span{display:block;font-size:14px;color:var(--grey);line-height:20px;margin-top:2px}
.mega-for{grid-column:1/4;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 15px 0;font-size:15px;color:var(--grey)}
.mega-for a{border:1px solid var(--line-l);background:#fff;border-radius:40px;padding:8px 20px;color:#000000b3;font-size:15px;transition:border-color .2s}
.mega-for a:hover{border-color:var(--blue)}
.mega-cta{grid-column:4;grid-row:1/3;display:flex;flex-direction:column;gap:10px}
.mega-cta .card{flex:1;border-radius:10px;padding:24px;background:var(--blue);color:#fff;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.mega-cta .card b{font-size:20px;font-weight:500;line-height:28px}
.mega-cta .card span{display:block;color:#ffffffcc;font-size:15px;margin-top:8px;line-height:22px}
.mega-cta .card em{font-style:normal;display:inline-flex;align-items:center;gap:10px;margin-top:20px;font-size:16px;font-weight:500}
.mega-cta .card em i{background:#fff;border-radius:80px;padding:10px;display:flex}
.mega-cta .card em img{width:12px;height:12px}
.mega-cta .alt{background:#fff;border:1px solid var(--line-l);border-radius:10px;padding:16px 18px;font-size:14px;line-height:20px;color:var(--grey);transition:border-color .2s}
.mega-cta .alt b{display:block;color:#000;font-size:16px;font-weight:500;margin-bottom:2px}
.mega-cta .alt:hover{border-color:var(--blue)}
.navcta{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:16px;line-height:24px;color:inherit}
.navcta img{width:9px}
.navcta svg{width:13px;height:13px}
.burger{display:none}
/* burger lines = NAV v3 from our-work.html: short second line that grows on hover, X when open */
.bl{position:relative;display:block;width:20px;height:12px}
.bl i{position:absolute;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform .35s cubic-bezier(.7,0,.2,1),width .35s cubic-bezier(.7,0,.2,1),top .35s cubic-bezier(.7,0,.2,1)}
.bl i:first-child{top:0;width:20px}
.bl i:last-child{top:10px;width:13px}
.burger:hover .bl i:last-child{width:20px}
.bl.x i{top:5px;width:20px}
.bl.x i:first-child{transform:rotate(45deg)}
.bl.x i:last-child{transform:rotate(-45deg)}
.dd{position:static}
.dd.res{position:relative}
.mega.small{left:50%;right:auto;width:600px;transform:translate(-50%,-6px);grid-template-columns:1fr 1fr;top:calc(100% + 26px)}
.dd.res:hover .mega.small,.dd.res:focus-within .mega.small{transform:translate(-50%,0)}
.mega .post{display:block;border-radius:10px;overflow:hidden}
.mega .post img{width:100%;height:130px;object-fit:cover;border-radius:8px}
.mega .post div{padding:12px 4px 0;font-size:17px;line-height:24px;font-weight:500}
.mega .post small{display:block;color:var(--grey);font-size:13px;margin-bottom:4px;font-weight:400}
/* mobile menu = NAV v3 from our-work.html: white panel revealed by a circle growing from the top right burger, items fade in staggered */
.mnav{position:fixed;inset:0;z-index:100;background:#fff;color:#000;display:flex;flex-direction:column;padding:18px 5% 24px;overflow-y:auto;visibility:hidden;clip-path:circle(0px at calc(100% - 44px) 46px);transition:clip-path .65s cubic-bezier(.7,0,.2,1),visibility 0s linear .65s}
.mnav.open{visibility:visible;clip-path:circle(160% at calc(100% - 44px) 46px);transition:clip-path .7s cubic-bezier(.7,0,.2,1),visibility 0s}
.mnav>*:not(.mnav-top){opacity:0;transform:translateY(14px);transition:opacity .25s,transform .25s}
.mnav.open>*:not(.mnav-top){opacity:1;transform:none;transition:opacity .45s ease,transform .45s ease}
.mnav.open>*:nth-child(2){transition-delay:.18s}.mnav.open>*:nth-child(3){transition-delay:.24s}.mnav.open>*:nth-child(4){transition-delay:.3s}.mnav.open>*:nth-child(5){transition-delay:.36s}.mnav.open>*:nth-child(6){transition-delay:.42s}
.mnav.open .bl.x i{animation:blin .45s cubic-bezier(.7,0,.2,1)}
@keyframes blin{from{transform:rotate(0)}}
.mnav-top{display:flex;justify-content:space-between;align-items:center;padding:6px 0 22px;border-bottom:1px solid var(--line-l)}
.mnav-top img{width:140px;filter:invert(1)}
.mnav-close{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-l);background:#fff;color:#000;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;min-height:46px}
.mnav details{border:0;border-bottom:1px solid var(--line-l);border-radius:0;padding:0;margin:0}
.mnav summary{font-size:20px;padding:20px 0;font-weight:500;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary:after{content:"•";font-size:24px;color:#000}
.mnav .grp{font-size:14px;color:var(--grey);margin:14px 0 6px;text-transform:uppercase}
.mnav .sub a{display:flex;gap:16px;align-items:center;padding:10px 0;font-size:17px;font-weight:500}
.mnav .sub a .ico{width:30px;flex:none;display:flex;justify-content:center}
.mnav .sub a .ico img{max-width:28px;max-height:26px}
.mnav .sub{padding-bottom:16px}
.mnav > a.top{display:block;font-size:20px;padding:20px 0;border-bottom:1px solid var(--line-l);font-weight:500}
.mnav .mcta{margin-top:auto;padding-top:28px;display:grid;gap:12px}
.mnav .mcta .btn{justify-content:space-between}
.mnav .mcta p{color:var(--grey);font-size:14px;text-align:center;margin:4px 0 0}
body.lock{overflow:hidden}
.mbar{display:none}

/* HERO = site hero sizing (60/68, 50/58, 40/48), full viewport height, everything centre aligned over the simple scenery painting */
.hero{position:relative;overflow:hidden;isolation:isolate;background:#fff;margin-top:-110px;padding-top:200px;min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 40%;filter:saturate(1.03) contrast(1.02)}
/* One soft white light pooled behind the centred text, and nothing else over the picture.
   The scenery is now a simple, clean painting with a calm open sky in the centre, so the text
   only needs this single gentle pool to stay perfectly readable. The pool sits high, around the
   headline and form, and is gone well before the meadow and river at the bottom. */
.hero-shade{position:absolute;inset:0;background:radial-gradient(ellipse 72% 46% at 50% 32%,rgba(255,255,255,.86) 0%,rgba(255,255,255,.52) 48%,rgba(255,255,255,0) 72%),linear-gradient(180deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 22%)}
/* the painting fades into white only at the very bottom edge, no cut shape. The fade is short and
   stays transparent for most of its height, so the near meadow below the form reads crisp instead of
   washed out; only the last few pixels blend into the white section below. */
.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:170px;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 34%,rgba(255,255,255,.38) 64%,rgba(255,255,255,.90) 86%,#fff 98%,#fff 100%);z-index:4;pointer-events:none}
/* The scan panel no longer lives inside the hero. It sits in its own plain white section
   directly below the hero, so running an audit never grows or re-crops the hero painting,
   and the hero always ends in the same clean white fade with no cut or strip below it. */
.scan-section{display:none;background:#fff;padding:56px 0 96px;position:relative;z-index:2}
.scan-section.show{display:block}
#report{background:#fff;margin-top:0;position:relative}
/* HERO LIFE: the painting slowly breathes while birds, clouds and pollen move over it.
   Everything lives in the sky band at the top and the flower band at the bottom,
   on its own layer above the shade but below the text, so the words never move
   and never lose contrast. Pointer events are off throughout. */
.hero-bg{animation:heroBreath 30s ease-in-out infinite alternate;will-change:transform}
@keyframes heroBreath{from{transform:scale(1.045)}to{transform:scale(1.085) translate(-.4%,-.5%)}}
.hero-life{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3}
/* soft daylight glow breathing in the top right corner of the blue sky */
.sun-glow{position:absolute;top:-14%;right:-6%;width:56vmin;height:56vmin;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 65%);animation:sunPulse 9s ease-in-out infinite;will-change:transform,opacity}
@keyframes sunPulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.6;transform:scale(1.09)}}
/* The painting already has its own soft clouds, so the extra drifting cloud shapes and the
   pollen motes stay off. Life in the hero now comes from the balloon on the right of the sky,
   small bird flocks crossing high in the sky, and butterflies over the meadow at the sides,
   away from the centred text. All of it is transform and opacity only, so nothing lags. */
.cloud,.pollen{display:none}
.cloud{position:absolute;left:0;width:190px;height:36px;border-radius:999px;background:rgba(255,255,255,.6);filter:blur(11px);opacity:.5;animation:cloudDrift linear infinite;will-change:transform}
.cloud:before,.cloud:after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.6)}
.cloud:before{width:74px;height:74px;left:26px;top:-32px}
.cloud:after{width:52px;height:52px;right:30px;top:-20px}
.cloud.c1{top:12%;animation-duration:110s;animation-delay:-38s}
.cloud.c2{top:26%;width:130px;height:26px;opacity:.32;animation-duration:140s;animation-delay:-92s}
.cloud.c3{top:5%;width:250px;height:44px;opacity:.38;animation-duration:165s;animation-delay:-64s}
@keyframes cloudDrift{from{transform:translateX(-32vw)}to{transform:translateX(118vw)}}
/* 3D hot air balloon floating on the right of the sky, in light green and white stripes. It is built as shaded SVG volume, not a flat icon:
   curved coloured gores clipped to the envelope, a spherical light-to-dark shade across the whole ball,
   a glossy sun highlight high on the left, a rim light on the right edge, and a shaded woven basket
   hanging on ropes below, with a soft drop shadow so it sits in the air in front of the painting. */
.balloon{position:absolute;right:6.5%;top:11%;width:68px;z-index:1;opacity:.96;animation:balloonDrift 16s ease-in-out infinite;will-change:transform}
.balloon-in{animation:balloonSway 9s ease-in-out infinite;transform-origin:50% 18%;will-change:transform}
.balloon svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(-3px 8px 10px rgba(20,60,30,.16)) saturate(.9) brightness(1.1)}
@keyframes balloonDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(6px,-10px)}}
@keyframes balloonSway{0%,100%{transform:rotate(-1.1deg)}50%{transform:rotate(1.2deg)}}
@media (max-width:991px){.balloon{width:52px;right:4%;top:10%}}
@media (max-width:767px){.balloon{width:38px;right:3.5%;top:9.5%;opacity:.92}}
/* bird flocks crossing the sky, wings flapping, each flock on its own timetable */
.flock{position:absolute;left:0;display:flex;gap:16px;align-items:flex-start;animation:flyAcross linear infinite;will-change:transform}
.flock .bob{display:flex;gap:16px;align-items:flex-start;animation:flockBob 3.6s ease-in-out infinite}
.flock.f1{top:13.5%;animation-duration:56s;animation-delay:-21s;opacity:.85}
.flock.f2{top:20.5%;animation-duration:74s;animation-delay:-49s;opacity:.72}
.flock.f3{top:8.5%;animation-duration:92s;animation-delay:-11s;opacity:.55}
.flock.f2 .bob{animation-duration:4.4s}
.flock.f3 .bob{animation-duration:5.2s}
@keyframes flyAcross{from{transform:translate3d(-22vw,0,0)}to{transform:translate3d(116vw,-3.5vh,0)}}
@keyframes flockBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.bird{flex:none;line-height:0}
.bird svg{display:block;width:100%;height:auto;overflow:visible}
.bird .wl,.bird .wr{transform-box:fill-box;animation:flap .58s ease-in-out infinite alternate}
.bird .wl{transform-origin:100% 100%;animation-name:flapL}
.bird .wr{transform-origin:0% 100%;animation-name:flapR}
@keyframes flapL{from{transform:rotate(16deg)}to{transform:rotate(-18deg)}}
@keyframes flapR{from{transform:rotate(-16deg)}to{transform:rotate(18deg)}}
/* golden pollen motes rising and twinkling over the wildflower meadow */
.pollen{position:absolute;left:0;right:0;bottom:0;height:30%}
.mote{position:absolute;bottom:var(--b,12%);left:var(--x,50%);width:var(--sz,5px);height:var(--sz,5px);border-radius:50%;background:radial-gradient(circle,#fff8cf 0%,#ffd66b 55%,rgba(255,214,107,0) 78%);box-shadow:0 0 10px 2px rgba(255,214,107,.45);opacity:0;animation:moteRise var(--dur,7s) ease-in-out infinite;animation-delay:var(--del,0s);will-change:transform,opacity}
@keyframes moteRise{0%{opacity:0;transform:translate(0,0) scale(.7)}18%{opacity:.95}55%{transform:translate(12px,-38px) scale(1)}100%{opacity:0;transform:translate(-10px,-76px) scale(.8)}}
/* butterflies wandering over the meadow at the sides of the hero, wings flapping fast while
   the body drifts on a slow, lazy loop. They sit in the hero-life layer, under the text. */
.bfly{position:absolute;z-index:1;pointer-events:none;animation:bflyPath var(--fd,13s) ease-in-out infinite;animation-delay:var(--fdel,0s)}
.bfly svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 3px 4px rgba(20,50,20,.18))}
.bfly .wl,.bfly .wr{transform-box:fill-box;animation:bflyFlap .34s ease-in-out infinite alternate}
.bfly .wl{transform-origin:100% 50%;animation-name:bflyFlapL}
.bfly .wr{transform-origin:0% 50%;animation-name:bflyFlapR}
@keyframes bflyFlapL{from{transform:scaleX(.94) rotate(5deg)}to{transform:scaleX(.36) rotate(-7deg)}}
@keyframes bflyFlapR{from{transform:scaleX(.94) rotate(-5deg)}to{transform:scaleX(.36) rotate(7deg)}}
@keyframes bflyPath{0%,100%{transform:translate(0,0) rotate(-4deg)}28%{transform:translate(30px,-20px) rotate(3deg)}55%{transform:translate(56px,2px) rotate(-2deg)}78%{transform:translate(24px,14px) rotate(4deg)}}
.bfly.b1{left:7%;bottom:19%;width:30px;--fd:13s}
.bfly.b2{right:10%;bottom:27%;width:24px;--fd:16s;--fdel:-6s}
.bfly.b3{left:16%;bottom:31%;width:20px;--fd:18s;--fdel:-11s;opacity:.85}
@media (max-width:767px){.bfly.b1{width:22px;left:5%;bottom:22%}.bfly.b2{width:18px;right:6%;bottom:30%}.bfly.b3{display:none}}
@media (prefers-reduced-motion:reduce){.hero-life{display:none}.hero-bg{animation:none}}
.hero-in{position:relative;z-index:5;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding-bottom:120px;width:95%;max-width:1340px;margin:0 auto}
.hero-content{max-width:820px;width:100%;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-pills{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:center}
.hero-pills .partner{height:38px;width:auto;border-radius:60px;background:#fff;padding:4px 10px;border:1px solid var(--line-l)}
.agency-pill{border:1px solid var(--line-l);background:#fff;color:#000000b3;text-transform:uppercase;border-radius:60px;min-height:38px;padding:0 20px;font-size:14px;line-height:18px;display:flex;align-items:center;gap:9px}
.agency-pill .pulse{width:9px;height:9px;border-radius:50%;background:var(--green);flex:none;animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.55}}
.hero h1{font-size:60px;line-height:68px;margin-top:24px;text-wrap:balance;color:#0d1f13;text-shadow:0 1px 26px rgba(255,255,255,.65)}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero .lead{color:#1d2b21;max-width:640px;font-size:20px;line-height:30px;font-weight:500;margin-left:auto;margin-right:auto;text-shadow:0 1px 18px rgba(255,255,255,.7)}
/* liquid glass bar: frosted translucent shell, solid white field inside, site blue button */
.audit-form{width:100%;max-width:760px;margin-top:44px;background:rgba(255,255,255,.34);backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);border:1px solid rgba(255,255,255,.95);border-radius:60px;padding:8px;display:flex;gap:8px;box-shadow:0 24px 60px rgba(11,27,16,.22),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.35)}
.audit-form .field{flex:1;display:flex;align-items:center;gap:10px;padding:0 8px 0 18px;min-width:0;background:#fff;border-radius:40px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.9)}
.audit-form .field svg{flex:none;color:var(--grey)}
.audit-form input{flex:1;border:0;background:transparent;font-family:inherit;font-size:18px;color:#000;min-width:0;padding:12px 0}
.audit-form input::placeholder{color:#83868f}
.audit-form input:focus{outline:none}
.audit-form:focus-within{outline:3px solid rgba(69,23,255,.35);outline-offset:2px}
.audit-form .btn{flex:none}
.form-error{max-width:760px;margin:12px auto 0;color:#b3261e;font-weight:600;font-size:15px;text-align:center;background:rgba(255,255,255,.75);border-radius:20px;padding:6px 14px}
/* proof row: white text and white check discs, as requested. A soft dark green shadow behind
   each line keeps the white lettering readable where it crosses the bright meadow and river. */
.proof{display:flex;flex-wrap:wrap;gap:12px 34px;margin-top:32px;color:#fff;font-size:15.5px;font-weight:600;list-style:none;padding:0 4px;justify-content:center;background:none;border:0;box-shadow:none}
.proof li{display:flex;align-items:center;gap:9px;text-shadow:0 1px 8px rgba(7,32,16,.55),0 0 18px rgba(7,32,16,.35)}
.proof-check{width:22px;height:22px;border-radius:50%;background:#fff;color:var(--blue);display:inline-flex;align-items:center;justify-content:center;flex:none;box-shadow:0 4px 12px rgba(7,32,16,.28)}
.sample-link{display:inline-flex;align-items:center;gap:9px;margin-top:20px;font-weight:600;font-size:15.5px;color:#0b2013;background:rgba(255,255,255,.96);border:1px solid #fff;border-radius:40px;padding:11px 22px;box-shadow:0 14px 34px rgba(11,27,16,.20);transition:transform .2s}
.sample-link:hover{transform:translateY(-1px)}
.sample-link svg{color:var(--blue)}
.sample-link.gone{display:none}

/* Scanning panel: lives in the white .scan-section below the hero, never inside the hero */
.scan-panel{position:relative;width:100%;max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line-l);border-radius:20px;box-shadow:0 24px 60px rgba(11,27,16,.16);padding:28px;text-align:left}
.scan-head{display:flex;align-items:center;gap:16px}
.sprout{width:54px;height:54px;flex:none}
.sprout .stem{stroke-dasharray:60;stroke-dashoffset:60}
.sprout .leaf{transform:scale(0);transform-origin:center}
.scan-panel.play .stem{animation:grow 2.8s ease forwards}
.scan-panel.play .leaf{animation:leafin .6s ease forwards}
.scan-panel.play .leaf.l2{animation-delay:1.5s}
.scan-panel.play .leaf.l1{animation-delay:.9s}
@keyframes grow{to{stroke-dashoffset:0}}
@keyframes leafin{to{transform:scale(1)}}
.scan-title{font-weight:700;font-size:19px}
.scan-domain{color:var(--grey);font-size:15px;word-break:break-all}
.scan-steps{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.scan-steps li{display:flex;gap:12px;align-items:center;color:var(--grey);font-weight:500;transition:color .3s}
.scan-steps li .tick{width:26px;height:26px;border-radius:50%;border:2px solid var(--line-l);display:grid;place-items:center;flex:none;color:#fff;transition:all .3s}
.scan-steps li.active{color:#000}
.scan-steps li.active .tick{border-color:#e8a33d}
.scan-steps li.done{color:#000}
.scan-steps li.done .tick{background:var(--green);border-color:var(--green)}
.scan-bar{height:8px;background:var(--bg-l);border-radius:8px;margin-top:22px;overflow:hidden}
.scan-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#e05252 0%,#ef7d31 30%,#f5c33b 52%,#8fce52 78%,#1fae62 100%);border-radius:8px;transition:width .5s ease}

/* Double outline frame = site .bx (grey frame + white inner card) */
.bx{background:var(--bg-l);border:1px solid var(--line-l);border-radius:20px;padding:12px;transition:border-color .3s;display:flex}
.bx:hover{border-color:var(--blue)}
.bx-in{background:#fff;border:1px solid var(--line-l);border-radius:10px;padding:30px;display:flex;flex-direction:column;width:100%}
.bx-top{display:flex;align-items:center;justify-content:space-between}
.bx-ico img{height:33px;width:auto}
.bx-cat{border:1px solid var(--line-l);background:#fff;border-radius:40px;padding:6px 18px;font-size:14px;line-height:20px;color:#000000b3}
/* What it checks cards are not links, so they carry no arrow and no hover lift or colour change */
.check-card.bx:hover{border-color:var(--line-l)}

/* Report: no big frame around the section, just a single hairline above and below. Double outlines stay on the small cards inside. */
.report-frame{margin-top:44px;border-top:1px solid var(--line-l);border-bottom:1px solid var(--line-l);position:relative}
.report-in{background:#fff;overflow:hidden}
.report-top{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;padding:22px 4px;border-bottom:1px solid var(--line-l)}
/* Peek state: before an audit runs, only a little of the sample report shows. The rest is softly blurred under a fade, with a clear way to open the full sample. */
.report-peek{position:relative}
.report-frame.locked .report-peek{max-height:430px;overflow:hidden}
.report-frame.locked .report-peek .peek-blur{filter:blur(7px);opacity:.55;pointer-events:none;user-select:none}
.peek-cta{position:absolute;left:0;right:0;bottom:0;z-index:4;display:none;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:110px 20px 30px;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.94) 46%,#fff 78%)}
.report-frame.locked .peek-cta{display:flex}
.peek-cta b{font-size:21px;font-weight:600;line-height:30px;max-width:520px}
.peek-cta p{margin:0;color:var(--grey);max-width:520px}
.peek-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.peek-btns .ghost{display:inline-flex;align-items:center;min-height:52px;border:1.5px solid #000;border-radius:30px;padding:6px 24px;font-weight:600;font-size:17px;background:#fff}
.report-site{font-weight:700;font-size:19px;display:flex;align-items:center;gap:10px;min-width:0}
.report-site span{word-break:break-all}
.badge{display:inline-flex;align-items:center;gap:7px;background:#fdf3e0;color:#92600a;font-size:13px;font-weight:600;border-radius:30px;padding:6px 13px;white-space:nowrap}
.report-note{font-size:14px;color:var(--grey);padding:14px 4px 0;line-height:22px}
.report-grid{display:grid;grid-template-columns:300px 1fr;gap:36px;padding:26px 4px 30px}
/* Report charts row: radar of all 11 categories, the score journey, and the measured mobile numbers */
.charts{display:grid;grid-template-columns:1.05fr 1fr 1fr;gap:20px;padding:6px 4px 30px;border-bottom:1px solid var(--line-l);margin-bottom:28px}
.chart-card{border:1px solid var(--line-l);border-radius:16px;padding:20px;background:#fff}
.chart-card h4{margin:0 0 4px;font-size:16.5px;font-weight:600}
.chart-card .cap{color:var(--grey);font-size:13.5px;line-height:20px;margin:0}
.radar{width:100%;height:auto;margin-top:8px}
.radar text{font-family:Fractul,Arial,sans-serif;font-size:10.5px;font-weight:600;fill:#3c4048}
.radar .grid-poly{fill:none;stroke:#e3e6e1;stroke-width:1}
.radar .axis{stroke:#e9ebe7;stroke-width:1}
.radar .data-poly{fill:rgba(232,163,61,.16);stroke:#d97a1f;stroke-width:2;stroke-linejoin:round}
.radar .dot{fill:#fff;stroke:#d97a1f;stroke-width:2}
.journey{margin-top:18px}
.journey-track{position:relative;height:12px;border-radius:12px;background:linear-gradient(90deg,#e05252 0%,#ef7d31 30%,#f5c33b 52%,#8fce52 78%,#1fae62 100%);opacity:.92}
.journey-track:after{content:"";position:absolute;inset:0;border-radius:12px;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),rgba(255,255,255,.65) calc(10% - 1px),rgba(255,255,255,.65) 10%)}
.journey-dot{position:absolute;top:50%;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid #000;transform:translate(-50%,-50%);z-index:2}
.journey-dot.target{border-color:var(--green-deep);background:var(--green)}
.journey-lbls{display:flex;justify-content:space-between;margin-top:12px;font-size:13.5px;font-weight:600}
.journey-lbls span small{display:block;color:var(--grey);font-weight:500}
.vitals{display:grid;gap:14px;margin-top:16px}
.vital{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:baseline}
.vital b{font-size:15px;font-weight:600}
.vital output{font-size:19px;font-weight:700}
.vital .vbar{grid-column:1/-1;height:8px;background:#eef0ec;border-radius:8px;overflow:hidden;position:relative}
.vital .vbar i{display:block;height:100%;border-radius:8px;width:0;transition:width 1.3s cubic-bezier(.22,.8,.3,1)}
.vital .vbar em{position:absolute;top:-2px;bottom:-2px;width:2px;background:#00000055}
.vital small{grid-column:1/-1;color:var(--grey);font-size:13px}
.vital .status{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:20px;padding:4px 10px}
.status.bad{background:#fdecec;color:#b3261e}.status.ok{background:#eef6ee;color:var(--green-deep)}.status.mid{background:#fdf3e0;color:#92600a}
.seg{display:flex;height:14px;border-radius:14px;overflow:hidden;margin-top:16px;gap:2px}
.seg i{display:block;height:100%}
.seg-lbls{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px;font-size:13.5px;font-weight:500;color:var(--grey)}
.seg-lbls b{color:#000}
.dotkey{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:6px}
.score-side{text-align:center;border-right:1px solid var(--line-l);padding-right:36px}
.ring-wrap{--p:71;position:relative;width:190px;height:190px;margin:6px auto 0}
/* Score dial as zones: the revealed arc starts red at the top, passes orange and yellow in the
   middle, and only reaches green as the score climbs, so a good final number ends in green.
   The grey rest layer covers the spectrum past the current score and shrinks as --p grows. */
.ring-dial,.ring-rest{position:absolute;inset:0;border-radius:50%;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 14px),#000 calc(100% - 13px));mask:radial-gradient(farthest-side,transparent calc(100% - 14px),#000 calc(100% - 13px))}
.ring-dial{background:conic-gradient(from 0deg,#d9402e 0deg,#ef7d31 80deg,#f2b63d 150deg,#f5cf4a 195deg,#8fce52 265deg,#22b573 330deg,#0e7a4a 360deg)}
.ring-rest{background:conic-gradient(from 0deg,transparent 0deg,transparent calc(var(--p)*3.6deg),#edf0ea calc(var(--p)*3.6deg),#edf0ea 360deg)}
.ring-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring-num b{font-size:58px;line-height:1;font-weight:700}
.ring-num small{color:var(--grey);font-weight:500}
.achieve{margin-top:16px;background:#eef6ee;border-radius:14px;padding:12px 14px;font-size:14.5px;font-weight:500;line-height:22px}
.achieve b{color:var(--green-deep)}
.split-bars{margin-top:18px;text-align:left;display:grid;gap:12px}
.split-bars .row{font-size:14px;font-weight:500}
.split-bars .row .lbl{display:flex;justify-content:space-between;margin-bottom:5px}
.bar{height:9px;background:#eef0ec;border-radius:9px;overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:9px;background:#e8a33d;transition:width 1.3s cubic-bezier(.22,.8,.3,1)}
.bar i.green{background:var(--green)}
.cat-bars{display:grid;grid-template-columns:1fr 1fr;gap:14px 34px;align-content:start}
.cat-bar .lbl{display:flex;justify-content:space-between;font-size:15px;font-weight:500;margin-bottom:5px}
.cat-bar .lbl output{font-weight:700}
.cat-bar.low .lbl output{color:#c2410c}
.cat-bar.mid .lbl output{color:#a16207}
.cat-bar.high .lbl output{color:var(--green-deep)}
.cat-bar .bar{height:10px}
.cat-bar.low .bar i{background:linear-gradient(90deg,#f0836b,#e05252)}
.cat-bar.mid .bar i{background:linear-gradient(90deg,#f3c96b,#e8a33d)}
.cat-bar.high .bar i{background:linear-gradient(90deg,#36d67e,#0e7a4a)}
.cat-bar .st{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:20px;padding:3px 9px;margin-left:8px;vertical-align:2px}
.cat-bar.low .st{background:#fdecec;color:#b3261e}
.cat-bar.mid .st{background:#fdf3e0;color:#92600a}
.cat-bar.high .st{background:#eef6ee;color:var(--green-deep)}
.fixes{padding:0 4px 28px}
.fixes h3{font-size:22px;font-weight:600;margin-bottom:6px}
.fixes .sub{color:var(--grey);margin-bottom:18px}
.fix-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fix-grid .bx-in{padding:24px}
.fix-card .prio{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:20px;padding:5px 11px;margin-bottom:12px}
.prio.high{background:#fdecec;color:#b3261e}
.prio.med{background:#fdf3e0;color:#92600a}
.fix-card h4{margin:0 0 8px;font-size:17.5px;line-height:26px;font-weight:600}
.fix-card p{color:var(--grey);font-size:15px;margin:0}
.fix-card .ev{margin-top:12px;font-size:13.5px;font-weight:600;color:var(--green-deep);display:flex;gap:7px;align-items:center}
/* unlock: natural scenery under a deep green shade, heading and text sit directly on it with no card, tab or glass box. The only solid element is the single white email pill, so the section stays clean but the form stays clearly visible */
.unlock{margin:0 0 6px;color:#fff;border-radius:20px;padding:64px 28px;display:flex;flex-direction:column;gap:0;align-items:center;text-align:center;position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(8,26,15,.88),rgba(8,26,15,.80)),url(../assets/img/hero-scenery.webp) center 72%/cover no-repeat #0a2013}
.unlock h4{margin:0;font-size:24px;line-height:34px;font-weight:600;position:relative;max-width:560px}
.unlock p{color:#dcefe0;font-size:15.5px;line-height:24px;margin:10px 0 0;max-width:500px;position:relative}
.unlock-form{display:flex;gap:8px;align-items:center;position:relative;width:100%;max-width:760px;margin-top:26px;background:#fff;border:0;border-radius:60px;padding:6px;box-shadow:0 18px 44px rgba(0,0,0,.28)}
.unlock-form .ufield{flex:1;display:flex;align-items:center;background:transparent;border-radius:40px;padding:0 8px 0 20px;min-width:0}
.unlock-form .ufield-name{flex:.9}
.unlock-form .ufield-email{flex:1.1;border-left:1px solid var(--line-l);border-radius:0 40px 40px 0;padding-left:20px}
.unlock-form input{border:0;background:transparent;color:#000;border-radius:40px;padding:12px 0;font-family:inherit;font-size:16px;flex:1;min-width:0;width:100%}
.unlock-form input::placeholder{color:#83868f}
.unlock-form input:focus{outline:none}
.unlock-form .btn{flex:none}
.unlock-msg{width:100%;font-size:14.5px;color:#b9f4cf;font-weight:500;display:none;margin:14px 0 0}

/* Category checks = .bx service cards with the site's own icon files */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.filters button{border:1px solid var(--line-l);background:#fff;border-radius:40px;padding:10px 26px;font-family:inherit;font-size:16px;line-height:20px;color:#000000b3;cursor:pointer}
.filters button[aria-pressed="true"]{background:#000;color:#fff;border-color:#000}
.check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:24px}
.check-card.hide{display:none}
.check-card h3{font-size:20px;line-height:32px;margin-top:44px}
.check-card .nature{font-size:14px;font-weight:600;color:var(--green-deep);margin-top:4px}
.check-card p{color:var(--grey);font-size:16px;line-height:24px;margin:8px 0 0}
.check-card.cta-tile .bx-in{background:#000;border-color:var(--line-d);color:#fff}
.check-card.cta-tile p{color:var(--grey-d)}
.group-label{margin:48px 0 0;font-weight:500;font-size:16px;line-height:26px;letter-spacing:.02em;text-transform:uppercase;color:var(--grey)}

/* Steps = site process steps (numbered circles on a line) */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:70px;counter-reset:s;position:relative}
.steps:before{content:"";position:absolute;left:26px;right:26px;top:26px;height:1px;background:var(--line-l)}
.step{position:relative;padding-right:32px}
.step-in:before{counter-increment:s;content:"0" counter(s);position:relative;z-index:1;width:52px;height:52px;border-radius:100px;border:1px solid var(--line-l);background:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:600;transition:background .3s,border-color .3s,color .3s}
.step:hover .step-in:before{background:var(--blue);border-color:var(--blue);color:#fff}
.step h3{font-size:20px;line-height:32px;margin-top:24px}
.step p{color:var(--grey);margin:8px 0 0}

/* FAQ = site .faq layout + native details cards */
.faq{display:grid;grid-template-columns:1fr 1.2fr;gap:80px}
.faq-left{position:sticky;top:120px;align-self:start}
details{border:1px solid var(--line-l);border-radius:20px;padding:24px;margin-bottom:16px;background:#fff}
details summary{font-size:20px;line-height:28px;font-weight:500;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
details summary::-webkit-details-marker{display:none}
details summary:after{content:"";width:11px;height:11px;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(45deg);flex:none;transition:transform .3s;margin-right:4px}
details[open ] summary:after{transform:rotate(225deg)}
details p{color:var(--grey);margin:20px 0 0;line-height:24px;max-width:90%}
details p a{color:var(--blue);font-weight:600}

/* Final CTA = site .final card exactly as on the other pages, branding rings graphic on the right */
.final{background:#000;color:#fff;border-radius:20px;min-height:500px;padding:80px 100px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.final .cta-graphic{position:absolute;right:0;top:0;height:100%;width:auto;border-radius:20px;pointer-events:none}
.final .badge-row{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:500;position:relative;flex-wrap:wrap}
.final .badge-row img{width:23px;height:23px}
.final h2{font-size:32px;line-height:46px;max-width:620px;margin-top:24px;position:relative}
.final .lead{position:relative;color:var(--grey-d)}
.final .ctas{position:relative;margin-top:40px;display:flex;gap:16px;flex-wrap:wrap}
.final .mail{margin-top:24px;color:var(--grey-d);position:relative}
.final .mail a{color:#fff;text-decoration:underline}
.final .firefly{position:absolute;border-radius:50%;background:var(--sun);opacity:0;animation:fly2 9s ease-in-out infinite;pointer-events:none}
@keyframes fly2{0%,100%{opacity:0;transform:translateY(0)}50%{opacity:.9;transform:translateY(-26px)}}

/* FOOTER = site .footer */
footer{background:#000;color:#fff;padding:180px 0 60px;position:relative;overflow:hidden}
.f1{display:flex;justify-content:space-between;gap:24px}
.fl{max-width:450px}
.fl .fbadge{width:151px;border-radius:40px;background:#fff;padding:6px 10px}
.fl h2{font-size:32px;line-height:46px;margin-top:24px}
.fl .btn{margin-top:60px}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:60px 16px;width:45%}
.fcol{display:flex;flex-direction:column;gap:12px}
.flabel{color:#ffffff80;font-size:14px;text-transform:uppercase}
.fcol a{color:#fff;font-size:16px;line-height:28px}
.fcol a:hover{color:var(--grey-d)}
.fcontact{display:flex;justify-content:space-between;border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);margin:60px 0;padding:60px 0;gap:30px}
.fcontact > div:last-child{width:45%}
.social{display:flex;gap:12px;margin-top:24px}
.social img{width:50px}
.fbot{display:flex;justify-content:space-between;color:var(--grey-d);font-size:18px;gap:16px}
.fbot .r{display:flex;justify-content:space-between;width:45%;gap:20px}
footer .firefly{position:absolute;border-radius:50%;background:var(--sun);opacity:0;animation:fly2 9s ease-in-out infinite;pointer-events:none}

/* fade (ds-fade pattern) */
.fade{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.fade.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.fade{opacity:1;transform:none}.marq{animation:none}*,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important}html{scroll-behavior:auto}}

/* RESPONSIVE, same breakpoints as the site pages */
@media (max-width:1100px){
  .menu{gap:30px}
  .hero h1{font-size:50px;line-height:58px}
  .mega{grid-template-columns:1fr 1fr 1fr}
  .mega-cta{display:none}
  .mega-for{grid-column:1/-1}
}
@media (max-width:991px){
  .menu,.navcta{display:none}
  /* NAV v3 burger from our-work.html: dark circle, turns white once the page is scrolled */
  .burger{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-d);background:var(--card-d);color:#fff;cursor:pointer;padding:0;transition:background .3s,border-color .3s,color .3s}
  .nav.scrolled .burger{background:#fff;border-color:var(--line-l);color:#000}
  .faq{grid-template-columns:1fr}
  .faq-left{position:static}
  .check-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr 1fr;row-gap:50px}
  .steps:before{display:none}
  .charts{grid-template-columns:1fr 1fr}
  .report-grid{grid-template-columns:1fr}
  .score-side{border-right:0;border-bottom:1px solid var(--line-l);padding:0 0 24px}
  .fix-grid{grid-template-columns:1fr}
  .f1{flex-direction:column;gap:60px}
  .fr{width:100%}
  .final{padding:60px 50px}
}
@media (max-width:767px){
  .mbar{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:60;background:#000;border:1px solid var(--line-d);border-radius:40px;padding:6px 6px 6px 20px;align-items:center;justify-content:space-between;gap:10px;color:#fff;font-size:15px;transform:translateY(140%);transition:transform .3s}
  .mbar.show{transform:none}
  .mbar .btn{font-size:16px;padding:4px 4px 4px 18px}
  .mbar .btn i{width:38px;height:38px}
  .mbar .btn:hover i{width:48px}
  .sec{padding:90px 0}
  .hero{padding-top:150px}
  .hero h1{font-size:40px;line-height:48px}
  .hero .lead{font-size:18px;line-height:28px}
  .h2,.final h2,.fl h2{font-size:28px;line-height:38px}
  .final{padding:50px 24px;min-height:0}
  .check-grid{grid-template-columns:1fr}
  .bx-in{padding:24px}
  .steps{grid-template-columns:1fr;gap:36px}
  .steps:before{display:block;left:26px;right:auto;top:26px;bottom:26px;width:1px;height:auto}
  .step{display:block;padding:0 0 0 76px}
  .step-in:before{position:absolute;left:0;top:0}
  .step h3{margin-top:8px}
  .btn{font-size:17px;padding-left:20px;max-width:100%}
  .audit-form{flex-direction:column;border-radius:28px;padding:10px}
  .audit-form .btn{justify-content:space-between;width:100%}
  .audit-form .field{padding:6px 10px}
  .cat-bars{grid-template-columns:1fr}
  .charts{grid-template-columns:1fr;padding-left:0;padding-right:0}
  .report-top,.report-grid,.fixes{padding-left:0;padding-right:0}
  .unlock{margin:0 0 6px;padding:44px 20px}
  .unlock-form{flex-direction:column;border-radius:28px;padding:8px}
  .unlock-form .ufield{width:100%;padding:8px 12px}
  .unlock-form .ufield-email{border-left:0;border-top:1px solid var(--line-l);border-radius:0;padding-left:12px}
  .unlock-form .btn{width:100%;justify-content:space-between}
  .peek-btns .btn,.peek-btns .ghost{justify-content:center}
  .report-note{padding-left:0;padding-right:0}
  .fcontact{flex-direction:column;gap:30px}
  .fcontact > div:last-child,.fbot .r{width:auto}
  .fbot{flex-direction:column;gap:12px;font-size:16px}
  footer{padding:110px 0 110px}
  details p{max-width:100%}
}
@media (prefers-reduced-motion:reduce){.mnav,.mnav.open{transition:none}.mnav>*{transition:none !important}}

/* ---- current site header/footer (same rules as css/v2-service.css) ---- */
.f1{display:flex;justify-content:space-between;gap:24px}
.fl{max-width:450px}
.fl .fbadge{width:151px;border-radius:40px}
.fl h2{font-size:32px;line-height:46px;margin-top:24px}
.fl .btn{margin-top:60px}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:60px 16px;width:45%}
.fcol{display:flex;flex-direction:column;gap:12px}
.flabel{color:#ffffff80;font-size:14px;text-transform:uppercase}
.fcol a{color:#fff;font-size:16px;line-height:28px}
.fcontact{display:flex;justify-content:space-between;border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);margin:60px 0;padding:60px 0}
.fcontact > div:last-child{width:45%}
.social{display:flex;gap:12px;margin-top:24px}
.social img{width:50px}
.fbot{display:flex;justify-content:space-between;color:var(--grey-d);font-size:18px}
.fbot .r{display:flex;justify-content:space-between;width:45%}
@media (max-width:991px){.f1{flex-direction:column;gap:60px}}
@media (max-width:991px){.fr{width:100%}}
@media (max-width:767px){.fl h2{font-size:28px;line-height:38px}}
@media (max-width:767px){.fcontact{flex-direction:column;gap:30px}}
@media (max-width:767px){.fcontact > div:last-child,.fbot .r{width:auto}}
@media (max-width:767px){.fbot{flex-direction:column;gap:12px;font-size:16px}}
@media (max-width:767px){.fbot .r{gap:20px}}

/* ---- live audit: progress, report, gate (from the audit tool package) ---- */
:root{--audit-good:#1a9e5c;--audit-ok:#d98a00;--audit-bad:#e5484d}
.audit-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.audit-sr{position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;}
.btn.audit-btn{cursor: pointer;
  border: 0;
  flex: none;
  font-family: inherit;}
.btn.audit-btn[disabled]{cursor: wait;
  opacity: .7;}
.audit-form-error{color: #ff8a8d;
  margin-top: 14px;
  margin-bottom: 0;
  font-size: 16px;}
.audit-group-label{color: #4517ff;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-top: 70px;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;}
.audit-shell{flex-flow: column;
  gap: 30px;
  display: flex;}
.audit-card{background-color: #f9f9f9;
  border: 1px solid #e1e2e6;
  border-radius: 22px;
  padding: 10px;}
.audit-card-inner{background-color: #fff;
  border: 1px solid #e1e2e6;
  border-radius: 12px;
  padding: 40px;}
.audit-card.dark{background-color: #121213;
  border-color: #252525;}
.audit-card.dark .audit-card-inner{color: #fff;
  background-color: #000;
  border-color: #252525;}
.audit-progress-head{justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  display: flex;}
.audit-progress-host{word-break: break-all;
  margin-top: 8px;}
.audit-steps-list{grid-row-gap: 18px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
  display: grid;}
.audit-steps-list li{grid-column-gap: 14px;
  color: #6d6f7b;
  align-items: center;
  font-size: 18px;
  line-height: 24px;
  display: flex;}
.audit-steps-list li.is-active{color: #fff;}
.audit-steps-list li.is-done{color: #b2b4c3;}
.audit-step-dot{border: 1px solid #3a3a3e;
  border-radius: 50%;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  display: flex;}
.is-active .audit-step-dot{border-color: #4517ff;
  border-top-color: transparent;
  animation: audit-spin .9s linear infinite;}
.is-done .audit-step-dot{color: #fff;
  background-color: #4517ff;
  border-color: #4517ff;}
.audit-progress-bar{background-color: #1e1e21;
  border-radius: 10px;
  height: 6px;
  margin-top: 36px;
  overflow: hidden;}
.audit-progress-bar span{background: linear-gradient(90deg, #e05252 0%, #ef7d31 30%, #f5c33b 52%, #8fce52 78%, #1fae62 100%);
  border-radius: 10px;
  height: 100%;
  display: block;
  transition: width .8s ease;}
.audit-summary{grid-column-gap: 60px;
  grid-row-gap: 40px;
  grid-template-columns: .9fr 1.1fr;
  display: grid;}
.audit-eyebrow-sm{color: #b2b4c3;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 20px;}
.audit-eyebrow-sm.dark{color: #6d6f7b;}
.audit-big-score{align-items: baseline;
  gap: 12px;
  margin-top: 16px;
  display: flex;}
.audit-big-score strong{font-size: 96px;
  font-weight: 600;
  line-height: 1;}
.audit-big-score span{color: #b2b4c3;
  font-size: 22px;}
.audit-grade{color: #fff;
  background-color: #4517ff;
  border-radius: 30px;
  margin-left: 6px;
  padding: 4px 14px;
  font-size: 18px;
  font-weight: 500;}
.audit-meta{color: #b2b4c3;
  margin-top: 20px;
  font-size: 16px;
  line-height: 24px;}
.audit-meta b{color: #fff;
  font-weight: 500;}
.audit-cap{color: #ffc56b;
  border: 1px solid #3a2d12;
  background-color: #1a1408;
  border-radius: 10px;
  margin-top: 20px;
  padding: 12px 14px;
  font-size: 15px;
  line-height: 22px;}
.audit-bars{grid-column-gap: 30px;
  grid-row-gap: 18px;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  display: grid;}
.audit-bar-row{color: inherit;
  text-decoration: none;}
.audit-bar-top{justify-content: space-between;
  gap: 10px;
  font-size: 16px;
  line-height: 22px;
  display: flex;}
.audit-bar-top b{font-weight: 500;}
.audit-bar{background-color: #1e1e21;
  border-radius: 10px;
  height: 6px;
  margin-top: 8px;
  overflow: hidden;}
.audit-bar span{border-radius: 10px;
  height: 100%;
  display: block;}
.audit-tiles{grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 40px;
  display: grid;}
.audit-tile{background-color: #121213;
  border: 1px solid #252525;
  border-radius: 12px;
  padding: 16px;}
.audit-tile strong{margin-top: 6px;
  font-size: 30px;
  font-weight: 600;
  line-height: 36px;
  display: block;}
.audit-tile.is-ai{background-image: linear-gradient(135deg, #4517ff33, #4517ff0d);
  border-color: #4517ff;}
.audit-section-head{justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  display: flex;}
.audit-top{grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 30px;
  display: grid;}
.audit-top .audit-card-inner{height: 100%;
  padding: 30px;}
.audit-top-no{color: #4517ff;
  font-size: 20px;
  font-weight: 600;}
.audit-top-cat{color: #6d6f7b;
  margin-top: 40px;
  font-size: 14px;
  line-height: 20px;}
.audit-chip{white-space: nowrap;
  border-radius: 30px;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  display: inline-flex;}
.audit-chip.high{color: #c1272d;
  background-color: #fdeced;}
.audit-chip.medium{color: #9a5b00;
  background-color: #fdf3e0;}
.audit-chip.low{color: #4a4c57;
  background-color: #eeeef1;}
.audit-chip.verified{color: #127a46;
  background-color: #e3f6ec;}
.audit-chip.ai{color: #4517ff;
  background-color: #ece8ff;}
.audit-chip-row{flex-wrap: wrap;
  gap: 8px;
  display: flex;}
.audit-gate-copy{max-width: 520px;}
.audit-gate-form{flex: 1;
  max-width: 520px;}
.audit-gate-row{gap: 10px;
  display: flex;}
.audit-gate-row .form-field{flex: 1;
  min-width: 0;
  height: 60px;
  font-size: 17px;}
.audit-hp{position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;}
.audit-note{color: #6d6f7b;
  margin-top: 12px;
  font-size: 14px;
  line-height: 20px;}
.audit-report{grid-column-gap: 50px;
  grid-template-columns: 280px 1fr;
  align-items: start;
  display: grid;}
.audit-toc{position: sticky;
  top: 110px;}
.audit-toc a{color: #6d6f7b;
  border-top: 1px solid #f0f0f1;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0;
  font-size: 16px;
  line-height: 20px;
  text-decoration: none;
  display: flex;}
.audit-toc a:hover,.audit-toc a.is-active{color: #000;}
.audit-toc a b{font-weight: 500;}
.audit-cats{flex-flow: column;
  gap: 30px;
  display: flex;}
.audit-cat{scroll-margin-top: 110px;}
.audit-cat-head{color: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 0;
  font-family: inherit;
  display: flex;}
.audit-cat-right{flex: none;
  align-items: center;
  gap: 14px;
  display: flex;}
.audit-chev{color: #6d6f7b;
  transition: transform .3s ease;}
.audit-cat.is-collapsed .audit-chev{transform: rotate(-90deg);}
.audit-cat.is-collapsed .audit-cat-body{display: none;}
.audit-cat.is-collapsed .audit-card-inner{padding-top: 28px;
  padding-bottom: 28px;}
.audit-score-pill{border-radius: 30px;
  flex: none;
  padding: 4px 14px;
  font-size: 16px;
  font-weight: 600;}
.audit-howbox{background-color: #f6f4ff;
  border: 1px solid #dcd5ff;
  border-radius: 12px;
  margin-top: 24px;
  padding: 20px 22px;}
.audit-howbox-q{color: #4517ff;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;}
.audit-howbox p{color: #4a4c57;
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 24px;}
.audit-list-title{align-items: center;
  gap: 10px;
  margin-top: 32px;
  font-size: 18px;
  font-weight: 500;
  display: flex;}
.audit-list-title svg{flex: none;}
.audit-items{flex-flow: column;
  gap: 12px;
  margin-top: 14px;
  display: flex;}
.audit-item{border: 1px solid #e1e2e6;
  border-radius: 12px;
  padding: 18px 20px;}
.audit-item-head{justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  display: flex;}
.audit-item-title{font-size: 17px;
  font-weight: 500;
  line-height: 24px;}
.audit-item p{color: #6d6f7b;
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 24px;}
.audit-rec{background-color: #f9f9f9;
  border-left: 3px solid #4517ff;
  border-radius: 0 8px 8px 0;
  margin-top: 14px;
  padding: 12px 14px;}
.audit-rec-label{color: #4517ff;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;}
.audit-rec p{color: #000;
  margin-top: 4px;}
.audit-evidence{background-color: #f2fbf6;
  border: 1px solid #c9ecd8;
  border-radius: 8px;
  margin-top: 12px;
  padding: 10px 12px;}
.audit-evidence q{color: #1d2a22;
  quotes: '"' '"';
  font-size: 15px;
  line-height: 22px;}
.audit-evidence-src{color: #6d6f7b;
  margin-top: 4px;
  font-size: 13px;
  line-height: 18px;}
.audit-measure{flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 12px;
  display: flex;}
.audit-measure-val{color: #4a4c57;
  word-break: break-word;
  font-size: 14px;
  line-height: 20px;}
.audit-measure-val .audit-evidence-src{margin-top: 0;
  display: inline;}
.audit-more{color: #4517ff;
  cursor: pointer;
  background: none;
  border: 0;
  margin-top: 12px;
  padding: 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;}
.audit-actions{flex-wrap: wrap;
  gap: 14px;
  display: flex;}
.audit-link-btn{color: #000;
  cursor: pointer;
  background: none;
  border: 1px solid #e1e2e6;
  border-radius: 30px;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;}
.audit-link-btn:hover{border-color: #4517ff;}
.audit-error p{margin-top: 10px;}
@media screen and (max-width: 991px){.audit-summary{grid-template-columns: 1fr;}}
@media screen and (max-width: 991px){.audit-tiles{grid-template-columns: repeat(3, 1fr);}}
@media screen and (max-width: 991px){.audit-top{grid-template-columns: 1fr;}}
@media screen and (max-width: 991px){.audit-report{grid-template-columns: 1fr;}}
@media screen and (max-width: 991px){.audit-toc{display: none;}}
@media screen and (max-width: 991px){.audit-gate-form{width: 100%;
    max-width: none;}}
@media screen and (max-width: 767px){.audit-card-inner{padding: 24px 20px;}}
@media screen and (max-width: 767px){.audit-big-score strong{font-size: 72px;}}
@media screen and (max-width: 767px){.audit-bars{grid-template-columns: 1fr;}}
@media screen and (max-width: 767px){.audit-tiles{grid-template-columns: 1fr 1fr;}}
@media screen and (max-width: 767px){.audit-item{padding: 16px 14px;}}
@media screen and (max-width: 767px){.audit-cat-head{align-items: flex-start;}}
@media screen and (max-width: 767px){.audit-gate-row{flex-flow: column;}}
@media screen and (max-width: 767px){.audit-section-head{flex-flow: column;
    align-items: flex-start;}}
@media (prefers-reduced-motion: reduce){.is-active .audit-step-dot{animation: none;}}
.audit-filters{display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px;}
.audit-filters button{border: 1px solid #e1e2e6; background: #fff; border-radius: 40px; padding: 10px 26px; font-family: inherit; font-size: 16px; line-height: 20px; color: rgba(0,0,0,.7); cursor: pointer;}
.audit-filters button[aria-pressed="true"]{background: #000; color: #fff; border-color: #000;}
.audit-check-card.hide{display: none;}
.audit-check-card .b2b-scope-icon{height: 33px; width: auto;}
.audit-report-summary{border-top: 1px solid #e1e2e6; border-bottom: 1px solid #e1e2e6; padding: 44px 0;}
.audit-charts{display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px;}
.audit-chart-card{background: #f9f9f9; border: 1px solid #e1e2e6; border-radius: 20px; padding: 24px;}
.audit-chart-card h4{margin: 0; font-size: 17px; font-weight: 600;}
.audit-chart-card .cap{color: #6d6f7b; font-size: 14px; line-height: 22px; margin: 8px 0 0;}
.audit-radar{width: 100%; height: auto; margin-top: 8px;}
.audit-radar text{font-family: Fractul, Arial, sans-serif; font-size: 10.5px; font-weight: 600; fill: #3c4048;}
.audit-radar .grid-poly{fill: none; stroke: #e3e6e1; stroke-width: 1;}
.audit-radar .axis{stroke: #e9ebe7; stroke-width: 1;}
.audit-radar .data-poly{fill: rgba(232,163,61,.16); stroke: #d97a1f; stroke-width: 2; stroke-linejoin: round;}
.audit-radar .dot{fill: #fff; stroke: #d97a1f; stroke-width: 2;}
.audit-journey-track{position: relative; height: 12px; border-radius: 12px; background: linear-gradient(90deg, #e05252 0%, #ef7d31 30%, #f5c33b 52%, #8fce52 78%, #1fae62 100%); margin-top: 18px;}
.audit-journey-dot{position: absolute; top: 50%; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid #000; transform: translate(-50%, -50%);}
.audit-journey-dot.target{border-color: #0e7a4a; background: #36d67e;}
.audit-journey-lbls{display: flex; justify-content: space-between; margin-top: 12px; font-size: 13.5px; font-weight: 600;}
.audit-journey-lbls small{display: block; color: #6d6f7b; font-weight: 500;}
.audit-vitals{display: grid; gap: 14px; margin-top: 16px;}
.audit-vital{display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline;}
.audit-vital b{font-size: 15px; font-weight: 600;}
.audit-vital output{font-size: 19px; font-weight: 700;}
.audit-vital .vbar{grid-column: 1 / -1; height: 8px; background: #eef0ec; border-radius: 8px; overflow: hidden; position: relative;}
.audit-vital .vbar i{display: block; height: 100%; border-radius: 8px;}
.audit-vital .vbar em{position: absolute; top: -2px; bottom: -2px; width: 2px; background: rgba(0,0,0,.33);}
.audit-vital small{grid-column: 1 / -1; color: #6d6f7b; font-size: 13px;}
.audit-gate-clean{color: #fff; border-radius: 20px; padding: 64px 28px; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(8,26,15,.88), rgba(8,26,15,.80)), url(../assets/img/hero-scenery.webp) center / cover;}
.audit-gate-clean h2{color: #fff;}
.audit-gate-clean .audit-gate-copy{max-width: 640px; text-align: center;}
.audit-gate-clean .audit-gate-copy p{color: #d7e8dc;}
.audit-gate-clean .audit-gate-form{max-width: 760px; width: 100%; margin-top: 28px;}
.audit-gate-clean .audit-gate-row{background: #fff; border-radius: 60px; padding: 8px; box-shadow: 0 24px 60px rgba(0,0,0,.25); align-items: center;}
.audit-gate-clean .audit-gate-row .form-field{background: transparent; border: 0; color: #000; height: 52px;}
.audit-gate-clean .audit-gate-row .form-field::placeholder{color: #83868f;}
.audit-gate-clean .audit-note{color: #d7e8dc; text-align: center;}
.audit-gate-clean .audit-note a{color: #fff;}
@media (max-width: 1100px){.audit-charts{grid-template-columns: 1fr 1fr;}}
@media (max-width: 991px){.audit-charts{grid-template-columns: 1fr;}}
@media (max-width: 991px){.audit-gate-clean .audit-gate-row{flex-direction: column; border-radius: 20px;}}
@media (max-width: 991px){.audit-gate-clean .audit-gate-row .btn{width: 100%; justify-content: center;}}
@media (max-width: 767px){.audit-report-summary{padding: 30px 0;}}

/* ---- shims for the plain helper classes used by the live report markup ---- */
#audit-app .container { width: 100%; margin: 0 auto; }
#audit-app .h2 { font-size: 32px; line-height: 46px; max-width: none; margin: 0; font-weight: 500; }
#audit-app .h3 { font-size: 24px; line-height: 34px; margin: 0; font-weight: 500; }
#audit-app .small-lh { line-height: 30px; }
#audit-app .text-18px { font-size: 18px; line-height: 28px; margin: 0; }
#audit-app .text-20px { font-size: 20px; line-height: 30px; margin: 0; }
#audit-app ._6d6f7b { color: #6d6f7b; }
#audit-app .mg-top-8 { margin-top: 8px; } #audit-app .mg-top-16 { margin-top: 16px; } #audit-app .mg-top-24 { margin-top: 24px; } #audit-app .mg-top-40 { margin-top: 40px; }
#audit-app .eyebrow { margin: 0; }
#audit-app .form-field { display: block; width: 100%; padding: 0 18px; font: inherit; font-size: 17px; color: #000; background: #fff; border: 1px solid #e1e2e6; border-radius: 10px; height: 56px; outline: 0; }
#audit-app .audit-gate-row { display: flex; gap: 8px; }
#audit-app .btn.audit-btn { cursor: pointer; }
.audit-gate-clean .h2 { color: #fff; margin: 0; }
.audit-gate-clean .text-20px, #audit-app .audit-gate-clean ._6d6f7b { color: #d7e8dc; }
.audit-gate-clean .audit-note { color: #d7e8dc; }
.audit-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#audit-app[hidden] { display: none; }
/* ---- the live report sits on a white section: readable text colours ---- */
.audit-report-summary .audit-eyebrow-sm { color: #6d6f7b; }
.audit-card.dark .audit-eyebrow-sm, .audit-tile .audit-eyebrow-sm { color: #b2b4c3; }
.audit-big-score span { color: #6d6f7b; }
.audit-big-score .audit-grade { color: #fff; }
.audit-meta { color: #6d6f7b; }
.audit-meta b { color: #000; }
.audit-tile { color: #fff; }
.audit-bar { background-color: #e1e2e6; }

/* while a real report is on screen the sample and explainer sections step aside */
body.audit-has-report #report, body.audit-has-report #checks, body.audit-has-report #how, body.audit-has-report #about-audit, body.audit-has-report #faq { display: none; }