/* ========================================================================== SPORT-FIT PHYSIO CARE · ACL Rehabilitation · premium landing edition -------------------------------------------------------------------------- Self-contained. core.css is NOT used. Loaded after the shared style.css, landing-shell.css and footer-fab.css so it can restyle the shared header, booking popup, chatbot and footer to match, without editing those files. Direction: quiet, editorial, private-clinic. Deep navy + warm ivory, one restrained blue accent for hairlines and numerals, Playfair Display for every heading, Inter for reading text. Generous space, hairline rules, almost no drop-shadow, motion that is slow and eased rather than bouncy. 1 tokens 6 hero 11 proof / video 2 base + headings 7 stats 12 clinic spaces 3 motion system 8 recognition 13 faq 4 header + footer 9 why / pain check 14 final cta 5 buttons 10 approach 15 shared widgets, a11y ========================================================================== */ /* ---------- 1 · tokens ---------- */ :root{ /* brand blues (same values as the recovery-system landing page) */ --b1:#27a6db; --b1-dk:#1580b8; --b1-lt:#cdeef9; --b1-xlt:#e8f7fd; --b2:#0a4f7b; --b2-dk:#072e4a; --b2-mid:#0d6a9a; --ink:#061a2b; --ink-soft:#1a3a52; --muted:#4a6679; --paper:#eef6fb; --paper-2:#f7fbfd; --white:#fff; /* the one accent (blue gradient): hairlines, numerals, stars. Change this and the whole page follows. */ --clr-accent:#00b4d8; --clr-primary:#1a4d8f; --clr-primary-lt:color-mix(in srgb,var(--clr-primary) 40%,#9fd8ff); --gold:#00b4d8; --gold-lt:#00b4d8; --gold-dk:#1a4d8f; --grad:linear-gradient(135deg,#00b4d8,#1a4d8f); --line:rgba(7,46,74,.14); --line-lt:rgba(255,255,255,.16); --ff-h:'Playfair Display',Georgia,serif; --ff-b:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --ease:cubic-bezier(.22,.8,.24,1); --ease-io:cubic-bezier(.65,0,.35,1); --gut:clamp(1.15rem,4.2vw,2.5rem); --maxw:1440px; --sec:clamp(4.25rem,8.5vw,8rem); --r-lg:28px; --r-md:18px; --r-sm:12px; /* the shared widgets (booking popup, chatbot, quick bar) read these; style.css already defines them, we only re-point the heading face */ --ff-head:'Playfair Display',Georgia,serif; --ff-body:'Inter',system-ui,sans-serif; } /* ---------- 2 · base + headings ---------- */ html{scroll-behavior:smooth} body{ font-family:var(--ff-b); color:var(--ink-soft); background:var(--white); font-size:1rem; line-height:1.7; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } ::selection{background:var(--b2);color:#fff} /* The client's brief: every heading, everywhere on this page, in Playfair Display. */ h1,h2,h3,h4,h5,h6{ font-family:'Playfair Display',Georgia,serif; font-optical-sizing:auto; font-weight:500; letter-spacing:-.012em; text-wrap:balance; } main.acl{display:block;position:relative;overflow-x:clip} :where(main.acl) *,:where(main.acl) *::before,:where(main.acl) *::after{box-sizing:border-box} /* :where() keeps these resets at zero specificity so component rules always win */ :where(main.acl) p{margin:0} :where(main.acl) img{display:block;max-width:100%;height:auto} :where(main.acl) :is(ul,ol){list-style:none;margin:0;padding:0} :where(main.acl) button{font:inherit;color:inherit;cursor:pointer} :where(main.acl) a{color:inherit;text-decoration:none} .acl-wrap{width:min(var(--maxw),100% - var(--gut)*2);margin-inline:auto} .acl-rel{position:relative;z-index:2} .acl-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .acl-section{position:relative;padding:var(--sec) 0;background:var(--white)} .acl-paper{background:var(--paper)} .acl-sky{background: radial-gradient(900px 420px at 85% 0,rgba(39,166,219,.10),transparent 70%), linear-gradient(180deg,#eef6fb 0%,#f7fafc 100%)} .acl-flush{padding-top:0} .acl-paper.acl-flush{padding-top:clamp(.5rem,2vw,1.5rem)} /* section head: heading left, standfirst right, hairline between */ .acl-head{ display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:1.25rem clamp(2rem,6vw,6rem);align-items:end; margin-bottom:clamp(2.25rem,5vw,4rem); } .acl-eyebrow{ display:flex;align-items:center;gap:.9rem; font:600 .72rem/1.3 var(--ff-b);letter-spacing:.2em;text-transform:uppercase; color:var(--gold-dk);margin:0 0 1.15rem; } .acl-eyebrow::before{content:"";width:2.4rem;height:1px;background:currentColor;flex:none} .acl-eyebrow--center{justify-content:center} .acl-eyebrow--center::after{content:"";width:2.4rem;height:1px;background:currentColor;flex:none} .acl-h2{ line-height:1.12;color:var(--ink);margin:0; } .acl-h2--center{margin-inline:auto;text-align:center;} .acl-h3{line-height:1.25;font-weight:700;color:var(--ink);margin:0 0 .85rem} .acl-h3--lg{line-height:1.15;margin-bottom:1.25rem} .acl-intro{font-size:1.02rem;line-height:1.8;color:var(--muted);max-width:52ch;padding-bottom:.35rem} .acl-brand{color:var(--b2-mid);font-style:italic} .acl-card-title{font-size:1.28rem;line-height:1.28;color:var(--ink);margin:0 0 .5rem;font-weight:500} /* ---------- 3 · motion system ---------- */ .acl-progress{position:fixed;left:0;top:0;right:0;height:3px;z-index:1200;pointer-events:none;background:transparent} .acl-progress i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(var(--p,0)); background:linear-gradient(90deg,#00b4d8,#1a4d8f)} /* scroll reveals. Individual transform properties (translate/scale) are used so the tilt effect can own `transform` on the same element. */ .acl-js [data-r]{ --rd:calc(var(--d,0s) + var(--i,0)*.09s); opacity:0;translate:0 34px; transition:opacity .95s var(--ease) var(--rd),translate 1.15s var(--ease) var(--rd),scale 1.15s var(--ease) var(--rd); } .acl-js [data-r="scale"]{translate:0 18px;scale:.955} .acl-js [data-r].is-in{opacity:1;translate:0 0;scale:1} /* image reveal: curtain wipe + slow settle of the picture inside */ .acl-js [data-r="mask"]{ opacity:1;translate:none; clip-path:inset(0 0 100% 0 round var(--r-lg)); transition:clip-path 1.35s var(--ease-io) var(--rd); } .acl-js [data-r="mask"].is-in{clip-path:inset(0 0 0 0 round var(--r-lg))} .acl-js [data-r="mask"] img{scale:1.22;transition:scale 1.9s var(--ease) var(--rd)} .acl-js [data-r="mask"].is-in img{scale:1} /* headline word-rise (JS wraps words; without JS the text is simply visible) */ .acl-js [data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .02em .16em;margin:-.04em -.02em -.16em} .acl-js [data-split] .wi{display:inline-block;translate:0 112%;rotate:3deg;transform-origin:0 100%; transition:translate 1.05s var(--ease) calc(var(--wi,0)*38ms + var(--sd,0ms)),rotate 1.05s var(--ease) calc(var(--wi,0)*38ms + var(--sd,0ms))} .acl-js [data-split].is-in .wi{translate:0 0;rotate:0deg} /* ---------- 4 · header + footer (shared markup, re-skinned) ---------- */ .lp-hdr{ background:rgba(251,249,244,.86)!important; -webkit-backdrop-filter:saturate(1.5) blur(16px)!important;backdrop-filter:saturate(1.5) blur(16px)!important; border-bottom:1px solid var(--line)!important; transition:background .4s ease,box-shadow .4s ease!important; } .lp-hdr.is-scrolled{background:rgba(251,249,244,.95)!important;box-shadow:0 10px 30px -18px rgba(7,46,74,.35)!important} .lp-hdr__link{font-size:.84rem!important;font-weight:600!important;letter-spacing:.07em!important;text-transform:uppercase;color:#4a6679!important} .lp-hdr__link:hover{color:var(--b2)!important} .lp-hdr__link.is-active{color:var(--ink)!important} .lp-hdr__link::after{height:1px!important;bottom:20px!important;border-radius:0!important;background:var(--gold)!important} .lp-hdr__call{color:var(--b2)!important;font-weight:600!important} .lp-hdr__book{ border-radius:999px!important;background:var(--b2-dk)!important;color:#fff!important;border:1px solid var(--b2-dk)!important; font-weight:600!important;letter-spacing:.04em!important;box-shadow:none!important; transition:background .35s ease,color .35s ease,border-color .35s ease,transform .35s var(--ease)!important; } .lp-hdr__book:hover{background:transparent!important;color:var(--b2-dk)!important;transform:translateY(-1px)} .lp-mnav{background:var(--paper-2)!important} .lp-mnav__link{font-family:var(--ff-h)!important;font-weight:500!important;font-size:1.15rem!important} .lp-mnav__link.is-active::before{background:var(--gold)!important} .lp-mnav__book{background:var(--b2-dk)!important;box-shadow:none!important} .page-loader{background:var(--paper-2)!important} .page-loader .loader-bar-fill{background:linear-gradient(90deg,#1a4d8f,#00b4d8)!important} .lp-ftr{background:var(--b2-dk)!important;color:rgba(255,255,255,.78)!important;border-top:1px solid rgba(255,255,255,.08)} .lp-ftr__h{font-family:var(--ff-h)!important;font-weight:500!important;letter-spacing:.01em!important;text-transform:none!important;font-size:1.15rem!important;color:#fff!important} .lp-ftr__links a{transition:color .3s ease,padding .35s var(--ease)} .lp-ftr__links a:hover{color:var(--gold-lt)!important;padding-left:.4rem} /* ---------- 5 · buttons ---------- */ .acl-actions{display:flex;flex-wrap:wrap;gap:.85rem 1rem;align-items:center} .acl-actions--center{justify-content:center;margin-top:clamp(2.25rem,5vw,3.5rem)} .acl-btn{ --bg:var(--b2-dk);--fg:#fff;--bd:var(--b2-dk); position:relative;isolation:isolate;overflow:hidden; display:inline-flex;align-items:center;justify-content:center;gap:.7rem; min-height:52px;padding:.95rem 1.75rem;border-radius:999px; background:var(--bg);color:var(--fg)!important;border:1px solid var(--bd); font:600 .92rem/1 var(--ff-b);letter-spacing:.035em;white-space:nowrap; translate:var(--mx,0) var(--my,0); transition:color .45s var(--ease),border-color .45s var(--ease),translate .35s var(--ease),box-shadow .45s var(--ease); -webkit-tap-highlight-color:transparent; } .acl-btn svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .acl-btn svg[viewBox] path[d^="M12 2a10"]{fill:currentColor;stroke:none} .acl-btn em{font-style:normal;display:inline-block;transition:translate .45s var(--ease)} /* fill sweeps up from the bottom on hover */ .acl-btn::before{ content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit; background:var(--hv,var(--gold));translate:0 101%; transition:translate .55s var(--ease); } /* slow blue sheen that crosses the primary button every few seconds */ .acl-btn--gold::after{ content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;pointer-events:none; background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%); translate:-120% 0;animation:aclSheen 6.5s var(--ease-io) 2.4s infinite; } .acl-btn--gold{--bg:var(--grad);--fg:#fff;--bd:transparent;--hv:var(--b2-dk)} .acl-btn--gold:hover{box-shadow:0 18px 40px -16px rgba(0,180,216,.7)} .acl-btn--ghost{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.38);--hv:#fff} .acl-btn--ghost:hover{color:var(--b2-dk)!important;border-color:#fff} .acl-btn--navy{--bg:var(--b2-dk);--fg:#fff;--bd:var(--b2-dk);--hv:var(--b2-mid)} .acl-btn--navy:hover{border-color:var(--b2-mid)} .acl-btn--line{--bg:transparent;--fg:var(--b2-dk);--bd:rgba(7,46,74,.28);--hv:var(--b2-dk)} .acl-btn--line:hover{color:#fff!important;border-color:var(--b2-dk)} .acl-btn--light{--bg:#fff;--fg:var(--b2-dk);--bd:#fff;--hv:var(--gold-lt)} .acl-btn--lg{min-height:58px;padding:1.05rem 2rem;font-size:.96rem} .acl-btn:hover::before{translate:0 0} .acl-btn:hover em{translate:5px 0} .acl-btn:active{scale:.98} @keyframes aclSheen{0%,55%{translate:-120% 0}100%{translate:120% 0}} /* ---------- 6 · hero ---------- */ .acl-hero{ position:relative;isolation:isolate;overflow:hidden;color:#fff; --hp:clamp(3.25rem,5.6vw,5.5rem);--ov:clamp(2.6rem,5vw,3.6rem); padding:var(--hp) 0 calc(var(--hp) + var(--ov)); /* the client's specified background */ background:linear-gradient(160deg,var(--b2-dk) 0%,var(--b2) 50%,var(--b2-mid) 100%); } .acl-hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .acl-hero__grain{ position:absolute;inset:-50%;opacity:.16;mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,"); } .acl-hero__lines{ position:absolute;inset:0;opacity:.5; background: linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px) 0 0/calc(100%/12) 100%, linear-gradient(180deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/100% 120px; -webkit-mask-image:radial-gradient(ellipse 80% 75% at 70% 35%,#000 20%,transparent 75%); mask-image:radial-gradient(ellipse 80% 75% at 70% 35%,#000 20%,transparent 75%); } .acl-hero__spot{ position:absolute;inset:0; background: radial-gradient(560px circle at var(--sx,72%) var(--sy,26%),rgba(130,208,242,.20),transparent 62%), radial-gradient(900px 520px at 8% 105%,rgba(0,180,216,.14),transparent 62%); } .acl-ring{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.12)} .acl-ring--1{width:720px;height:720px;right:-210px;top:-260px;animation:aclSpin 90s linear infinite} .acl-ring--2{width:520px;height:520px;right:-110px;top:-160px;border-color:rgba(0,180,216,.28);animation:aclSpin 70s linear infinite reverse} .acl-ring--3{width:340px;height:340px;left:-120px;bottom:-110px;border-color:rgba(255,255,255,.10)} .acl-ring--1::after,.acl-ring--2::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:var(--gold-lt);top:14%;left:7%;box-shadow:0 0 0 6px rgba(0,180,216,.12),0 0 24px rgba(0,180,216,.65)} .acl-ring--2::after{background:#9fdcf4;box-shadow:0 0 0 6px rgba(159,220,244,.12),0 0 24px rgba(159,220,244,.65);top:auto;left:auto;bottom:12%;right:9%} .acl-ring--4{width:640px;height:640px;left:-240px;top:-240px;animation:aclSpin 110s linear infinite} .acl-ring--5{width:760px;height:760px;left:50%;top:50%;margin:-380px 0 0 -380px;animation:aclSpin 120s linear infinite} .acl-ring--6{width:520px;height:520px;left:50%;top:50%;margin:-260px 0 0 -260px;border-color:rgba(0,180,216,.22);animation:aclSpin 90s linear infinite reverse} @keyframes aclSpin{to{rotate:360deg}} .acl-hero__grid{ position:relative;z-index:2; display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(2.5rem,5vw,5.5rem);align-items:center; } .acl-kicker{ display:inline-flex;align-items:center;gap:.8rem;margin:0 0 1.3rem; font:600 .7rem/1.5 var(--ff-b);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-lt); } .acl-kicker i{width:2.6rem;height:1px;background:currentColor;flex:none;position:relative;overflow:hidden} .acl-kicker i::after{content:"";position:absolute;inset:0;background:#fff;translate:-100% 0;animation:aclSheen 3.8s var(--ease-io) 1.2s infinite} .acl-h1{ font-size:clamp(2.1rem,1rem + 3.15vw,3.6rem); letter-spacing:-.022em;font-weight:700;color:#fff;margin:0 0 1.35rem;max-width:18ch; --sd:250ms; } .acl-h1 em{font-style:italic;font-weight:700;padding:0 .1em .08em 0;color:var(--clr-accent);background:linear-gradient(135deg,var(--clr-accent),var(--clr-primary-lt));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone} .acl-lead{font-size:clamp(1.02rem,.95rem + .35vw,1.2rem);line-height:1.75;color:rgba(255,255,255,.82);max-width:54ch;margin:0 0 1.3rem} .acl-support{ position:relative;max-width:54ch;margin:0 0 2.2rem;padding:.95rem 1.25rem .95rem 1.5rem; font-size:.94rem;line-height:1.7;color:rgba(255,255,255,.82); background:linear-gradient(90deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.1);border-radius:var(--r-sm); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); } .acl-support::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;background:linear-gradient(#00b4d8,#1a4d8f);border-radius:2px} .acl-support b{color:#fff;font-weight:600} .acl-hero .acl-actions{margin-bottom:1.9rem} .acl-proof{display:flex;flex-wrap:wrap;gap:1.1rem 0;align-items:stretch;border-top:1px solid rgba(255,255,255,.14);padding-top:1.5rem} .acl-proof li{display:flex;flex-direction:column;gap:.15rem;padding:0 clamp(1rem,2.2vw,2rem);border-left:1px solid rgba(255,255,255,.14)} .acl-proof li:first-child{padding-left:0;border-left:0} .acl-proof strong{font:500 clamp(1.5rem,1.1rem + 1.2vw,2.15rem)/1 var(--ff-h);color:#fff;letter-spacing:-.01em} .acl-star{color:var(--gold-lt);margin-left:.1em;font-size:.7em;vertical-align:.12em} .acl-proof span{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62)} .acl-proof__loc{flex:1 1 100%;flex-direction:row!important;align-items:center;gap:.6rem!important;padding:.2rem 0 0!important;border-left:0!important} .acl-proof__loc span{letter-spacing:.14em} .acl-proof__loc svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--gold-lt);stroke-width:1.6} .acl-hero__visual{position:relative;--px:0;--py:0} [data-depth]{translate:calc(var(--px)*var(--depth,10)*1px) calc(var(--py)*var(--depth,10)*1px);transition:translate .9s var(--ease)} .acl-arch{position:relative;aspect-ratio:3/2.2} .acl-arch__frame{ position:absolute;inset:-14px 14px 14px -14px;border:1px solid rgba(0,180,216,.55); border-radius:clamp(70px,11vw,170px) 26px clamp(70px,11vw,170px) 26px;z-index:0; } .acl-arch__img{ position:absolute;inset:0;z-index:1;overflow:hidden;background:var(--b2-dk); border-radius:clamp(70px,11vw,170px) 26px clamp(70px,11vw,170px) 26px; box-shadow:0 50px 90px -40px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08); } .acl-arch__img img{width:100%;height:100%;object-fit:cover;object-position:72% 38%;scale:1.05;animation:aclKen 22s ease-in-out infinite alternate} @keyframes aclKen{to{scale:1.14;translate:-1.5% 1%}} .acl-arch__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(7,46,74,.55));} .acl-scan{position:absolute;left:0;right:0;top:0;height:2px;z-index:2; background:linear-gradient(90deg,transparent,rgba(159,220,244,.95),transparent); box-shadow:0 0 22px 4px rgba(159,220,244,.5);opacity:0;animation:aclScan 7s var(--ease-io) 1.5s infinite} @keyframes aclScan{0%{translate:0 0;opacity:0}8%{opacity:1}50%{opacity:1}60%{opacity:0;translate:0 calc(var(--h,380px))}100%{opacity:0;translate:0 calc(var(--h,380px))}} .acl-badge{ position:absolute;z-index:3;left:-1.75rem;top:14%;display:inline-flex;align-items:center;gap:.65rem; padding:.7rem 1.1rem .7rem .95rem;border-radius:999px; font:600 .74rem/1 var(--ff-b);letter-spacing:.1em;text-transform:uppercase;color:#fff; background:rgba(7,46,74,.55);border:1px solid rgba(255,255,255,.2); -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4); --depth:-10; } .acl-badge i{position:relative;width:8px;height:8px;border-radius:50%;background:#7fe0a0;flex:none} .acl-badge i::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid #7fe0a0;animation:aclPing 2.4s ease-out infinite} @keyframes aclPing{0%{scale:.5;opacity:.9}100%{scale:2.2;opacity:0}} .acl-flowcard{ position:absolute;z-index:3;right:-1rem;bottom:-2.25rem;width:min(86%,400px); padding:1.25rem 1.35rem 1.3rem;border-radius:var(--r-md); background:rgba(251,249,244,.92);color:var(--ink); border:1px solid rgba(255,255,255,.6); -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px); box-shadow:0 40px 70px -30px rgba(0,0,0,.55); --depth:-18; } .acl-flowcard small{display:block;font:600 .66rem/1 var(--ff-b);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dk);margin-bottom:.6rem} .acl-flowcard strong{display:block;font:500 1.02rem/1.45 var(--ff-h);color:var(--ink);margin-bottom:1rem} .acl-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;position:relative} .acl-flow span{ position:relative;padding-top:.85rem;text-align:center;font:600 .62rem/1 var(--ff-b);letter-spacing:.06em;text-transform:uppercase;color:#7b92a2; transition:color .5s ease; } .acl-flow span::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:rgba(7,46,74,.12);border-radius:2px;transition:background .6s ease} .acl-flow span.is-on{color:var(--b2-dk)} .acl-flow span.is-on::before{background:linear-gradient(90deg,var(--b1),var(--b2))} .acl-flow span.is-now::before{background:var(--gold);box-shadow:0 0 12px rgba(0,180,216,.8)} /* decorative loops pause when their section is off screen (set by the script) */ .is-off .acl-physio *,.is-off .acl-ring,.is-off .acl-scan,.is-off .acl-arch__img img,.is-off .acl-btn--gold::after,.is-off .acl-kicker i::after{animation-play-state:paused} /* ---------- 7 · stats ---------- */ .acl-stats{position:relative;z-index:5;margin-top:calc(clamp(2.6rem,5vw,3.6rem)*-1);padding-bottom:0} .acl-stats__plate{ display:grid;grid-template-columns:repeat(4,1fr); background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:0 40px 80px -46px rgba(7,46,74,.55); } .acl-stats__plate>div{padding:clamp(1.3rem,2.6vw,2.2rem) clamp(1rem,2vw,2rem);text-align:center;position:relative} .acl-stats__plate>div+div::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:var(--line)} .acl-stats strong{display:block;font:500 clamp(1.7rem,1.1rem + 2vw,2.9rem)/1.05 var(--ff-h);color:var(--b2-dk);letter-spacing:-.015em;font-variant-numeric:lining-nums tabular-nums} .acl-stats .acl-star{display:inline;margin:0 0 0 .08em;font:400 .5em/1 var(--ff-b);color:var(--gold);vertical-align:.55em;letter-spacing:0} .acl-stats strong+span,.acl-stats div>span{display:block;margin-top:.55rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} /* ---------- 8 · recognition ---------- */ .acl-recog{padding-top:calc(var(--sec)*.9)} .acl-tiles{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)} .acl-tile{ position:relative;isolation:isolate;overflow:hidden;padding:clamp(1.6rem,2.6vw,2.4rem);min-height:290px; border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:transparent; display:flex;flex-direction:column; transform-style:preserve-3d; transition:opacity .95s var(--ease) var(--rd),translate 1.15s var(--ease) var(--rd),transform .5s var(--ease),color .5s var(--ease); } .acl-tile::before{ /* navy fill rises from the base on hover */ content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(170deg,var(--b2-dk),var(--b2));translate:0 101%;transition:translate .7s var(--ease)} .acl-tile::after{ /* soft light that follows the pointer */ content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s ease; background:radial-gradient(260px circle at var(--sx,50%) var(--sy,50%),rgba(130,208,242,.22),transparent 65%)} .acl-tile__no{position:absolute;right:1.4rem;top:1.1rem;font:italic 400 1.1rem/1 var(--ff-h);color:var(--gold-dk);transition:color .5s ease} .acl-ico{ width:56px;height:56px;border-radius:50%;display:grid;place-items:center;flex:none;margin-bottom:auto; border:1px solid rgba(0,180,216,.55);color:var(--gold-dk); transition:color .5s ease,border-color .5s ease,background .5s ease,rotate .8s var(--ease); } .acl-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .acl-tile .acl-card-title{margin-top:2.4rem;transition:color .5s ease} .acl-tile p{font-size:.95rem;line-height:1.7;color:var(--muted);transition:color .5s ease} @media (hover:hover){ .acl-tile:hover{color:#fff} .acl-tile:hover::before{translate:0 0} .acl-tile:hover::after{opacity:1} .acl-tile:hover .acl-card-title{color:#fff} .acl-tile:hover p{color:rgba(255,255,255,.78)} .acl-tile:hover .acl-ico{color:var(--gold-lt);border-color:var(--gold-lt);rotate:360deg} .acl-tile:hover .acl-tile__no{color:var(--gold-lt)} } /* ---------- 9 · why / pain check ---------- */ .acl-explainer{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,6vw,6rem);align-items:center} .acl-art{margin:0;position:relative} .acl-art__img{position:relative;overflow:hidden;border-radius:var(--r-lg);aspect-ratio:1/1;background:#0c1a29} .acl-par{position:absolute;inset:-7% 0} .acl-art__img img,.acl-par img{width:100%;height:100%;object-fit:cover} .acl-art__label{ position:absolute;left:1.1rem;right:1.1rem;bottom:1.1rem;padding:.8rem 1.1rem;border-radius:var(--r-sm); font:600 .68rem/1.5 var(--ff-b);letter-spacing:.14em;text-transform:uppercase;color:#fff; background:rgba(7,46,74,.6);border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); } .acl-wwh{position:relative;display:grid} .acl-wwh::before{content:"";position:absolute;left:calc(clamp(72px,8vw,104px)/2);top:1.6rem;bottom:1.6rem;width:1px;background:linear-gradient(#00b4d8,#1a4d8f)} .acl-wwh__row{display:grid;grid-template-columns:clamp(72px,8vw,104px) 1fr;gap:clamp(.9rem,2vw,1.6rem);padding:clamp(1.3rem,2.4vw,2rem) 0;position:relative} .acl-wwh__row+.acl-wwh__row{border-top:1px solid var(--line)} .acl-wwh__row b{ position:relative;z-index:1;align-self:start;justify-self:center;display:grid;place-items:center; width:clamp(52px,5vw,64px);height:clamp(52px,5vw,64px);border-radius:50%; background:var(--paper);border:1px solid var(--gold);color:var(--gold-dk); font:600 .68rem/1 var(--ff-b);letter-spacing:.14em;transition:background .6s ease,color .6s ease,scale .6s var(--ease); } .acl-wwh__row.is-in b{background:var(--b2-dk);color:var(--gold-lt);border-color:var(--b2-dk)} .acl-wwh strong{display:block;font:500 clamp(1.2rem,1rem + .7vw,1.55rem)/1.3 var(--ff-h);color:var(--ink);margin-bottom:.5rem} .acl-wwh strong{text-wrap:balance} .acl-wwh p{color:var(--muted);line-height:1.8;max-width:52ch} .acl-assess{ position:relative;padding:clamp(.6rem,1.4vw,1rem);border-radius:calc(var(--r-lg) + 6px); background:linear-gradient(160deg,var(--b2-dk),var(--b2) 60%,var(--b2-mid)); box-shadow:0 60px 100px -60px rgba(7,46,74,.7); } .acl-assess__bar{display:flex;align-items:center;gap:.45rem;padding:.55rem .8rem .8rem} .acl-assess__bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22)} .acl-assess__bar i:first-child{background:var(--gold-lt)} .acl-assess__bar span{margin-left:auto;font:600 .64rem/1 var(--ff-b);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.62)} .acl-assess__frame{display:block;width:100%;height:clamp(620px,82vh,860px);border:0;border-radius:var(--r-md);background:#eef4f9} .acl-assess__note{display:flex;padding:1rem .9rem .5rem} .acl-assess__note p{flex:1 1 280px;font-size:.88rem;line-height:1.65;color:rgba(255,255,255,.72)} .acl-pattern{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.75rem)} .acl-pcard{ position:relative;overflow:hidden;padding:clamp(1.8rem,3vw,2.7rem);border-radius:var(--r-lg);background:#fff;border:1px solid var(--line); transform-style:preserve-3d; transition:opacity .95s var(--ease) var(--rd),translate 1.15s var(--ease) var(--rd),transform .5s var(--ease),box-shadow .5s ease,border-color .5s ease; } .acl-pcard::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s ease;background:radial-gradient(320px circle at var(--sx,50%) var(--sy,50%),rgba(0,180,216,.14),transparent 65%)} .acl-num{ display:block;font:400 clamp(3.4rem,2rem + 4vw,5.5rem)/.9 var(--ff-h);letter-spacing:-.03em;margin-bottom:1.5rem; color:transparent;-webkit-text-stroke:1px var(--gold); background:linear-gradient(180deg,rgba(0,180,216,.3),transparent 80%);-webkit-background-clip:text;background-clip:text; } .acl-pcard p{color:var(--muted);line-height:1.75} @media (hover:hover){.acl-pcard:hover{border-color:rgba(0,180,216,.6);box-shadow:0 40px 70px -44px rgba(7,46,74,.45)}.acl-pcard:hover::after{opacity:1}} /* ---------- 10 · approach (dark) ---------- */ .acl-dark{ isolation:isolate;overflow:hidden;color:rgba(255,255,255,.8); background:linear-gradient(160deg,var(--b2-dk) 0%,var(--b2) 50%,var(--b2-mid) 100%); } .acl-dark .acl-eyebrow{color:var(--gold-lt)} .acl-dark .acl-h2,.acl-dark .acl-h3,.acl-dark .acl-card-title{color:#fff} .acl-dark .acl-intro{color:rgba(255,255,255,.74)} .acl-dark .acl-brand{color:var(--gold-lt)} .acl-checks{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-lt);border-left:1px solid var(--line-lt);margin-bottom:clamp(3.5rem,7vw,6rem)} .acl-check{ position:relative;isolation:isolate;overflow:hidden;display:flex;gap:1.15rem;align-items:flex-start;padding:clamp(1.4rem,2.4vw,2.1rem); border-right:1px solid var(--line-lt);border-bottom:1px solid var(--line-lt); transform-style:preserve-3d; transition:opacity .95s var(--ease) var(--rd),translate 1.15s var(--ease) var(--rd),transform .5s var(--ease),background .5s ease; } .acl-check::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s ease;background:radial-gradient(300px circle at var(--sx,50%) var(--sy,50%),rgba(130,208,242,.18),transparent 65%)} .acl-check .acl-ico{margin:0;width:48px;height:48px;color:var(--gold-lt);border-color:rgba(0,180,216,.45)} .acl-check .acl-card-title{font-size:1.18rem;margin-bottom:.35rem} .acl-check p{font-size:.92rem;line-height:1.65;color:rgba(255,255,255,.68)} @media (hover:hover){.acl-check:hover{background:rgba(255,255,255,.04)}.acl-check:hover::after{opacity:1}.acl-check:hover .acl-ico{rotate:360deg;background:rgba(0,180,216,.12)}} /* the six-stage pathway: a line that fills as you scroll, nodes that light in turn */ .acl-path{--p:0;position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin-bottom:clamp(3.5rem,7vw,6rem)} .acl-path::before,.acl-path::after{content:"";position:absolute;left:0;right:0;top:19px;height:1px} .acl-path::before{background:rgba(255,255,255,.2)} .acl-path::after{background:linear-gradient(90deg,#1a4d8f,#00b4d8);transform-origin:0 50%;transform:scaleX(var(--p));box-shadow:0 0 14px rgba(0,180,216,.7)} .acl-path li{position:relative;padding:3.2rem clamp(.5rem,1.2vw,1.1rem) 0 0} .acl-path b{ position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;display:grid;place-items:center; font:600 .72rem/1 var(--ff-b);letter-spacing:.06em;color:rgba(255,255,255,.6);background:var(--b2-dk);border:1px solid rgba(255,255,255,.3); transition:background .6s ease,color .6s ease,border-color .6s ease,box-shadow .6s ease,scale .6s var(--ease); } .acl-path li.is-on b{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 0 0 6px rgba(0,180,216,.14),0 10px 24px -8px rgba(0,0,0,.5)} .acl-path li.is-on b{scale:1.08} .acl-path strong{display:block;font:500 1.12rem/1.3 var(--ff-h);color:#fff;margin-bottom:.45rem;opacity:.55;transition:opacity .6s ease} .acl-path p{font-size:.88rem;line-height:1.65;color:rgba(255,255,255,.62);opacity:.7;transition:opacity .6s ease} .acl-path li.is-on strong,.acl-path li.is-on p{opacity:1} .acl-imt{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(1rem,2.4vw,2rem);align-items:stretch} .acl-imt__card{ display:flex;flex-direction:column; padding:clamp(1.8rem,3.4vw,3rem);border-radius:var(--r-lg); background:rgba(255,255,255,.06);border:1px solid var(--line-lt); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); } .acl-imt__card .acl-h3{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem);max-width:20ch} .acl-imt__card>p{color:rgba(255,255,255,.76);line-height:1.8;max-width:56ch;margin-bottom:1.6rem} .acl-chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:auto} .acl-chips span{padding:.5rem .95rem;border-radius:999px;font-size:.78rem;font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.22);transition:background .4s ease,color .4s ease,border-color .4s ease} @media (hover:hover){.acl-chips span:hover{background:var(--gold-lt);color:var(--b2-dk);border-color:var(--gold-lt)}} .acl-visit{ position:relative;overflow:hidden;padding:clamp(1.8rem,3.4vw,3rem);border-radius:var(--r-lg);color:var(--ink-soft); background:var(--paper-2);border:1px solid rgba(255,255,255,.4); box-shadow:0 50px 80px -44px rgba(0,0,0,.6); } .acl-visit::before{content:"";position:absolute;right:-90px;top:-90px;width:240px;height:240px;border-radius:50%;border:1px solid rgba(0,180,216,.45)} .acl-visit::after{content:"";position:absolute;right:-50px;top:-50px;width:160px;height:160px;border-radius:50%;border:1px solid rgba(0,180,216,.3)} .acl-visit small{display:block;font:600 .68rem/1 var(--ff-b);letter-spacing:.22em;color:var(--gold-dk);margin-bottom:.9rem} .acl-price{font:400 clamp(3rem,2rem + 3.6vw,4.9rem)/1 var(--ff-h);letter-spacing:-.03em;color:var(--b2-dk);margin-bottom:1rem} .acl-visit .acl-h3{font-size:1.28rem;color:var(--ink);margin-bottom:1.1rem} .acl-ticks{display:grid;gap:.8rem;margin:0 0 1.75rem} .acl-ticks li{position:relative;padding-left:2rem;font-size:.95rem;line-height:1.65;color:var(--muted)} .acl-ticks li::before{ content:"";position:absolute;left:0;top:.28em;width:1.1rem;height:1.1rem;border-radius:50%; background:var(--gold); -webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; } .acl-tick-warn{color:#1a4d8f!important} .acl-tick-warn::before{background:#00b4d8!important; -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,")} /* ---------- clinical context ---------- */ .acl-scan2{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,6vw,6.5rem);align-items:center} .acl-scan2__img{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3.4;background:var(--b2-dk)} .acl-scan2__img>div{position:absolute;inset:-6% 0} .acl-scan2__img img{width:100%;height:100%;object-fit:cover} .acl-scan2__copy>p:not(.acl-eyebrow){color:var(--muted);line-height:1.85;max-width:50ch;margin-bottom:1.6rem} /* ---------- 11 · proof / video ---------- */ .acl-proofgrid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(1rem,2.2vw,1.75rem);margin-bottom:clamp(3.5rem,7vw,6rem)} main.acl .acl-story,main.acl .acl-vcard{ position:relative;display:block;width:100%;padding:0;border:0;text-align:left;overflow:hidden;color:#fff;background:var(--b2-dk); border-radius:var(--r-lg);isolation:isolate; } .acl-story{min-height:clamp(320px,36vw,500px);height:100%} .acl-story img,.acl-vcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:scale 1.4s var(--ease),filter .8s ease} .acl-story::before,.acl-vcard::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(7,46,74,.05) 15%,rgba(7,46,74,.92))} .acl-story:hover img,.acl-vcard:hover img{scale:1.07} .acl-play{ position:absolute;z-index:2;left:50%;top:44%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%; background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.55); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); transition:background .5s ease,scale .5s var(--ease); } .acl-play::before{content:"";position:absolute;left:50%;top:50%;translate:-34% -50%;border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent #fff} .acl-play::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(255,255,255,.45);animation:aclPing 2.8s ease-out infinite} .acl-story:hover .acl-play,.acl-vcard:hover .acl-play{background:var(--gold);scale:1.08} .acl-story:hover .acl-play::before,.acl-vcard:hover .acl-play::before{border-left-color:var(--b2-dk)} .acl-story__copy,.acl-vcard__copy{position:absolute;z-index:2;left:0;right:0;bottom:0;display:block;padding:clamp(1.2rem,2.4vw,2rem)} .acl-story small,.acl-vcard small{display:block;font:600 .64rem/1.3 var(--ff-b);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:.5rem} .acl-story strong{display:block;font:500 clamp(1.35rem,1rem + 1.1vw,1.95rem)/1.2 var(--ff-h);margin-bottom:.55rem} .acl-story em{display:block;font-style:normal;font-size:.9rem;line-height:1.65;color:rgba(255,255,255,.78);max-width:56ch} .acl-story.is-playing .acl-play,.acl-story.is-playing .acl-story__copy,.acl-story.is-playing::before,.acl-story.is-playing img, .acl-vcard.is-playing .acl-play,.acl-vcard.is-playing .acl-vcard__copy,.acl-vcard.is-playing::before,.acl-vcard.is-playing img{opacity:0;visibility:hidden} .acl-story iframe,.acl-vcard iframe{position:absolute;inset:0;z-index:3;width:100%;height:100%;border:0;background:#000;animation:aclFadeIn .6s ease both} @keyframes aclFadeIn{from{opacity:0}to{opacity:1}} .acl-reviews{display:grid;gap:clamp(.8rem,1.6vw,1.1rem);align-content:stretch} .acl-review{ position:relative;padding:clamp(1.4rem,2.4vw,2rem);border-radius:var(--r-lg);background:#fff;border:1px solid var(--line); display:flex;flex-direction:column;justify-content:space-between;gap:1rem; } .acl-review::before{content:"“";position:absolute;right:1.3rem;top:.2rem;font:400 5.5rem/1 var(--ff-h);color:rgba(0,180,216,.28);pointer-events:none} .acl-stars{color:var(--gold);letter-spacing:.22em;font-size:.95rem} .acl-review blockquote{margin:0;font:400 clamp(1.1rem,1rem + .4vw,1.3rem)/1.5 var(--ff-h);font-style:italic;color:var(--ink)} .acl-review__foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.3rem 1rem;padding-top:.9rem;border-top:1px solid var(--line)} .acl-review small,.acl-review__foot span{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .acl-google{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.5rem;padding:clamp(1.3rem,2.2vw,1.8rem);border-radius:var(--r-lg);color:#fff;background:linear-gradient(160deg,var(--b2-dk),var(--b2) 60%,var(--b2-mid))} .acl-google strong{display:block;font:500 1.2rem/1.3 var(--ff-h)} .acl-google div>span{display:block;font-size:.82rem;color:rgba(255,255,255,.72);margin-top:.25rem} .acl-google .acl-btn{min-height:46px;padding:.75rem 1.35rem;font-size:.84rem} .acl-lib__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:1.75rem} .acl-lib__head small{display:block;font:600 .68rem/1 var(--ff-b);letter-spacing:.2em;color:var(--gold-dk);margin-bottom:.9rem} .acl-lib__head .acl-h3{margin-bottom:.5rem} .acl-lib__head p{color:var(--muted);max-width:52ch} .acl-lib__arrows{display:flex;gap:.6rem} .acl-lib__arrows button{ width:52px;height:52px;border-radius:50%;border:1px solid rgba(7,46,74,.25);background:transparent;color:var(--b2-dk);font-size:1.1rem; display:grid;place-items:center;transition:background .4s ease,color .4s ease,border-color .4s ease,opacity .3s ease,scale .3s var(--ease); } .acl-lib__arrows button:hover:not(:disabled){background:var(--b2-dk);color:#fff;border-color:var(--b2-dk)} .acl-lib__arrows button:active{scale:.94} .acl-lib__arrows button:disabled{opacity:.3;cursor:default} .acl-rail{ display:flex;gap:clamp(.8rem,1.6vw,1.25rem);overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab; margin-inline:calc(var(--gut)*-1);padding:.4rem var(--gut) 1rem;scroll-padding-inline:var(--gut); } .acl-rail::-webkit-scrollbar{display:none} .acl-rail.is-drag{cursor:grabbing;scroll-snap-type:none} .acl-rail.is-drag *{pointer-events:none} .acl-vcard{flex:0 0 clamp(250px,26vw,330px);aspect-ratio:3/3.7;scroll-snap-align:start;transition:translate .6s var(--ease),box-shadow .6s ease} @media (hover:hover){.acl-vcard:hover{translate:0 -8px;box-shadow:0 40px 60px -34px rgba(7,46,74,.7)}} .acl-vcard .acl-play{width:60px;height:60px;margin:-30px 0 0 -30px;top:42%} .acl-vcard strong{display:block;font:500 1.2rem/1.3 var(--ff-h);margin-bottom:.35rem} .acl-vcard em{display:block;font-style:normal;font-size:.78rem;letter-spacing:.06em;color:rgba(255,255,255,.72)} .acl-rail__meta{display:flex;align-items:center;gap:1.5rem;margin:.4rem 0 1.5rem} .acl-rail__bar{flex:1;height:1px;background:var(--line);position:relative} .acl-rail__bar i{position:absolute;left:0;top:-1px;height:3px;width:var(--w,20%);margin-left:var(--l,0%);background:linear-gradient(90deg,#1a4d8f,#00b4d8);border-radius:3px;transition:margin .25s linear,width .25s linear} .acl-rail__dots{display:flex;gap:.45rem} .acl-rail__dots button{width:7px;height:7px;padding:0;border-radius:50%;background:rgba(7,46,74,.2);transition:background .3s ease,width .4s var(--ease),border-radius .4s;position:relative} .acl-rail__dots button::after{content:"";position:absolute;inset:-9px} .acl-rail__dots button.is-active{width:22px;border-radius:7px;background:var(--b2)} .acl-trust{display:flex;flex-wrap:wrap;gap:.6rem} .acl-trust span{padding:.55rem 1rem;border-radius:999px;font-size:.76rem;letter-spacing:.04em;color:var(--b2-dk);border:1px solid rgba(0,180,216,.55);background:rgba(255,255,255,.6)} /* ---------- 12 · clinic spaces ---------- */ .acl-spaces{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,2rem);align-items:start} .acl-space{margin:0} .acl-space:nth-child(2){margin-top:clamp(0rem,4vw,3.5rem)} .acl-space:nth-child(3){margin-top:clamp(0rem,8vw,7rem)} .acl-space__img{position:relative;overflow:hidden;border-radius:var(--r-lg);aspect-ratio:4/4.7;background:var(--b2-dk)} .acl-space__img img{width:100%;height:100%;object-fit:cover;transition:scale 1.6s var(--ease)} .acl-space:hover .acl-space__img img{scale:1.07} .acl-space__cap{display:flex;gap:1rem;align-items:flex-start;padding:1.2rem .2rem 0} .acl-space__cap>span{font:italic 400 1.2rem/1.2 var(--ff-h);color:var(--gold-dk);padding-top:.1rem} .acl-space__cap strong{display:block;font:500 1.3rem/1.25 var(--ff-h);color:var(--ink);margin-bottom:.3rem} .acl-space__cap p{font-size:.92rem;line-height:1.65;color:var(--muted)} /* the [data-r=mask] wipe is applied to the whole figure; keep its caption from being clipped by rounding */ .acl-js .acl-space[data-r="mask"]{clip-path:inset(0 0 100% 0)} .acl-js .acl-space[data-r="mask"].is-in{clip-path:inset(0 0 -2rem 0)} /* ---------- 13 · faq ---------- */ .acl-faqwrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,6rem);align-items:start} .acl-faqhead{position:sticky;top:calc(var(--lp-hdr-h,74px) + 2rem)} .acl-faqhead .acl-h2{margin-bottom:1.25rem} .acl-count{display:inline-block;margin-bottom:1.1rem;padding:.4rem .9rem;border-radius:999px;font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dk);border:1px solid rgba(0,180,216,.55)} .acl-faq{border-top:1px solid var(--line)} .acl-q{border-bottom:1px solid var(--line);transition:background .5s ease} .acl-q summary{ display:grid;grid-template-columns:auto 1fr auto;gap:clamp(.9rem,2vw,1.6rem);align-items:center;list-style:none;cursor:pointer; padding:clamp(1.15rem,2vw,1.6rem) .25rem;min-height:64px;-webkit-tap-highlight-color:transparent; } .acl-q summary::-webkit-details-marker{display:none} .acl-q__num{font:italic 400 1rem/1 var(--ff-h);color:var(--gold-dk);min-width:1.8rem} .acl-q__text{font:500 clamp(1.08rem,1rem + .45vw,1.35rem)/1.35 var(--ff-h);color:var(--ink);transition:color .4s ease,translate .5s var(--ease)} .acl-q summary i{position:relative;width:40px;height:40px;border-radius:50%;border:1px solid rgba(7,46,74,.25);flex:none;transition:background .5s ease,border-color .5s ease,rotate .6s var(--ease)} .acl-q summary i::before,.acl-q summary i::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;margin:-.75px 0 0 -7px;background:var(--b2-dk);transition:background .4s ease,rotate .6s var(--ease)} .acl-q summary i::after{rotate:90deg} .acl-q[open]:not(.is-closing) summary i{background:var(--b2-dk);border-color:var(--b2-dk)} .acl-q[open]:not(.is-closing) summary i::before,.acl-q[open]:not(.is-closing) summary i::after{background:#fff} .acl-q[open]:not(.is-closing) summary i::after{rotate:0deg} .acl-q[open]:not(.is-closing) .acl-q__text{color:var(--b2)} .acl-q__a{overflow:hidden} .acl-q__a p{padding:0 clamp(3.5rem,6vw,5rem) clamp(1.4rem,2.4vw,2rem) calc(1.8rem + clamp(.9rem,2vw,1.6rem) + .25rem);color:var(--muted);line-height:1.85;max-width:62ch} @media (hover:hover){.acl-q:not([open]) summary:hover .acl-q__text{translate:6px 0;color:var(--b2)}.acl-q summary:hover i{border-color:var(--b2-dk)}} /* ---------- 14 · final cta ---------- */ .acl-final{ position:relative;isolation:isolate;overflow:hidden;text-align:center;color:rgba(255,255,255,.8); padding:clamp(5rem,10vw,9rem) 0; background:linear-gradient(160deg,var(--b2-dk) 0%,var(--b2) 50%,var(--b2-mid) 100%); } .acl-final .acl-eyebrow{color:var(--gold-lt)} .acl-final .acl-h2{color:#fff;max-width:21ch;margin-bottom:1.6rem} .acl-final__lead{max-width:60ch;margin:0 auto clamp(2.5rem,5vw,4rem);font-size:clamp(1rem,.95rem + .3vw,1.15rem);line-height:1.8;color:rgba(255,255,255,.78)} .acl-final .acl-h2{max-width:none;width:100%} .acl-final__lead{max-width:72ch} /* open journey: centred, no boxes, interactive glowing line linking three steps */ @property --fill{syntax:"";inherits:true;initial-value:0%} .acl-decisions{--fill:0%;--dot:16.667%;position:relative;display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:clamp(3rem,6vw,5rem);text-align:center;transition:--fill .9s var(--ease)} .acl-decisions::before{content:"";position:absolute;left:16.667%;right:16.667%;top:31px;height:2px;border-radius:2px;background:linear-gradient(90deg,#00dcff 0,#7fe7ff var(--fill),rgba(255,255,255,.2) var(--fill))} .acl-decisions::after{content:"";position:absolute;left:var(--dot);top:26px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#fff;box-shadow:0 0 0 7px rgba(0,220,255,.28),0 0 34px 8px rgba(0,225,255,.95);transition:left .9s var(--ease);pointer-events:none;z-index:3} .acl-decisions>div{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;padding:0 clamp(.8rem,2.6vw,2.6rem);cursor:pointer;-webkit-tap-highlight-color:transparent} .acl-decisions>div::before{content:"";position:absolute;left:-10%;right:-10%;top:-10%;bottom:-8%;z-index:-2;opacity:0;transition:opacity .5s;background:radial-gradient(closest-side at var(--sx,50%) var(--sy,30%),rgba(0,200,240,.28),transparent)} .acl-decisions>div.is-active::before{opacity:1} .acl-dec__ico{position:relative;display:grid;place-items:center;width:62px;height:62px;margin-bottom:1.7rem;border-radius:50%;font-style:normal;color:#fff;background:var(--grad); box-shadow:0 0 0 7px rgba(8,52,86,.95),0 0 0 8px rgba(0,220,255,.4),0 18px 40px -8px rgba(0,200,240,.8);transition:scale .6s var(--ease),rotate .7s var(--ease),box-shadow .6s var(--ease),filter .5s} .acl-dec__ico::before{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(0,225,255,.85);animation:aclDecPing 2.8s ease-out infinite} .acl-dec__ico svg{width:27px;height:27px;position:relative} @keyframes aclDecPing{0%{scale:1;opacity:.9}100%{scale:2;opacity:0}} .acl-decisions>div.is-active .acl-dec__ico{scale:1.16;box-shadow:0 0 0 7px rgba(8,52,86,.95),0 0 0 9px #7fe7ff,0 0 50px 6px rgba(0,225,255,.9)} .acl-decisions>div:not(.is-active) .acl-dec__ico{filter:saturate(.8) brightness(.92)} .acl-decisions .acl-dec__no{position:absolute;left:0;right:0;top:3.6rem;margin:0;z-index:-1;text-align:center;font:italic 600 clamp(6rem,11vw,9.5rem)/.9 var(--ff-h);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.16);pointer-events:none;transition:translate .8s var(--ease),-webkit-text-stroke-color .5s} .acl-decisions>div.is-active .acl-dec__no{translate:0 -8px;-webkit-text-stroke-color:rgba(127,231,255,.55)} .acl-decisions strong{display:block;font:500 clamp(1.35rem,1.05rem + 1vw,1.85rem)/1.2 var(--ff-h);color:#fff;margin-bottom:.85rem;text-shadow:0 2px 18px rgba(3,20,38,.6);transition:translate .6s var(--ease)} .acl-decisions p{max-width:32ch;margin-inline:auto;font-size:clamp(.96rem,.9rem + .2vw,1.06rem);line-height:1.75;color:rgba(255,255,255,.88);text-shadow:0 1px 12px rgba(3,20,38,.55)} .acl-dec__ecg{display:none} .acl-dec__tag{border:0;cursor:pointer;-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;margin-top:1.3rem;padding:.7rem 1.1rem;border-radius:999px;font:600 .72rem/1 var(--ff-b);letter-spacing:.16em;text-transform:uppercase;color:#bff4ff;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(127,231,255,.4);transition:gap .4s var(--ease),color .3s,background .4s,box-shadow .4s} .acl-dec__tag svg{width:15px;height:15px} .acl-decisions>div.is-active .acl-dec__tag{gap:1rem;color:#fff;background:var(--grad);box-shadow:0 14px 30px -12px rgba(0,200,240,.9)} .acl-decisions>div.is-active strong{translate:0 -3px} @media (hover:hover){.acl-decisions>div:hover .acl-dec__ico{rotate:-8deg}} .acl-decisions>div:focus-visible{outline-offset:8px} /* high-impact action row */ .acl-final__actions{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem 1.2rem;width:100%;margin-inline:auto} .acl-final__actions .acl-btn--gold{padding-block:1.25rem;padding-inline:2.4rem;font-size:1.02rem;animation:aclDecHalo 2.6s ease-out infinite} @keyframes aclDecHalo{0%{box-shadow:0 18px 44px -14px rgba(0,180,216,.8),0 0 0 0 rgba(0,220,255,.55)}70%,100%{box-shadow:0 18px 44px -14px rgba(0,180,216,.8),0 0 0 22px rgba(0,220,255,0)}} @media (prefers-reduced-motion:reduce){.acl-dec__ico::before,.acl-final__actions .acl-btn--gold{animation:none!important}.acl-decisions::after,.acl-decisions{transition:none}} /* ---------- 15 · shared widgets, a11y ---------- */ /* booking popup: same markup + behaviour, re-skinned to the page */ .apf-modal{border-radius:var(--r-lg)!important;box-shadow:0 60px 120px -40px rgba(7,46,74,.7)!important} .apf-left{background:linear-gradient(160deg,var(--b2-dk) 0%,var(--b2) 50%,var(--b2-mid) 100%)!important} .apf-left-title{font-family:'Playfair Display',Georgia,serif!important;font-weight:500!important} .apf-left-title em{color:var(--gold-lt)!important;font-style:italic} .apf-submit{border-radius:999px!important;background:var(--grad)!important;color:#fff!important;font-weight:600!important;letter-spacing:.04em} .apf-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .chatbot-header{background:linear-gradient(160deg,var(--b2-dk),var(--b2))!important} .chatbot-header h4{font-family:'Playfair Display',Georgia,serif!important;font-weight:500!important} .lead-form-status{font-size:.88rem;margin-top:.6rem} .lead-form-status.is-ok{color:#1a7a4c}.lead-form-status.is-error{color:#b3261e} :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px} .acl-btn:focus-visible{outline-color:#fff;outline-offset:4px} .acl-paper :focus-visible,.acl-section:not(.acl-dark) :focus-visible{outline-color:var(--b2)} /* ---------- responsive ---------- */ @media (max-width:1199px){ .acl-hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,.86fr)} .acl-tiles{grid-template-columns:repeat(2,1fr)} .acl-tile{min-height:250px} .acl-checks{grid-template-columns:repeat(2,1fr)} .acl-path{grid-template-columns:repeat(3,1fr);row-gap:3rem} .acl-path::before,.acl-path::after{display:none} .acl-path li::before{content:"";position:absolute;left:38px;right:0;top:19px;height:1px;background:rgba(255,255,255,.2)} .acl-path li.is-on::before{background:linear-gradient(90deg,#00b4d8,rgba(26,77,143,.2))} .acl-path li:nth-child(3n)::before{display:none} } @media (max-width:999px){ .acl-head{grid-template-columns:1fr;align-items:start} .acl-h2{max-width:24ch} .acl-hero__grid{grid-template-columns:1fr;gap:3.6rem} .acl-h1{max-width:20ch} .acl-hero__visual{width:min(100%,560px);margin-inline:auto;padding-bottom:2rem} .acl-badge{left:.6rem} .acl-flowcard{right:.6rem} .acl-explainer,.acl-scan2,.acl-imt,.acl-proofgrid{grid-template-columns:1fr} .acl-art{max-width:560px} .acl-pattern{grid-template-columns:1fr} .acl-faqwrap{grid-template-columns:1fr} .acl-faqhead{position:static} .acl-spaces{grid-template-columns:1fr 1fr} .acl-space:nth-child(3){grid-column:1/-1;margin-top:0} .acl-space:nth-child(3) .acl-space__img{aspect-ratio:16/9} .acl-decisions{grid-template-columns:1fr;row-gap:clamp(2.6rem,6vw,3.4rem)} .acl-decisions::before,.acl-decisions::after{display:none} .acl-decisions>div{padding:0 .5rem} .acl-decisions>div+div::after{content:"";position:absolute;left:50%;top:calc(-1 * clamp(2.6rem,6vw,3.4rem) + 6px);width:2px;height:calc(clamp(2.6rem,6vw,3.4rem) - 18px);margin-left:-1px;border-radius:2px;background:linear-gradient(180deg,rgba(0,220,255,.7),rgba(0,220,255,.15))} .acl-decisions .acl-dec__no{top:3.2rem;font-size:clamp(5.5rem,24vw,8rem)} .acl-decisions p{max-width:40ch} .acl-stats__plate{grid-template-columns:repeat(2,1fr)} .acl-stats__plate>div:nth-child(3)::before{display:none} .acl-stats__plate>div:nth-child(n+3){border-top:1px solid var(--line)} } @media (max-width:759px){ .acl-tiles,.acl-checks{grid-template-columns:1fr} .acl-tile{min-height:0} .acl-tile .acl-card-title{margin-top:1.6rem} .acl-path{grid-template-columns:1fr;row-gap:0;padding-left:0} .acl-path li{padding:0 0 2.2rem 62px;min-height:78px} .acl-path li::before{left:19px!important;right:auto!important;top:38px!important;bottom:0;width:1px!important;height:auto!important;display:block!important} .acl-path li:last-child::before{display:none!important} .acl-path b{top:0} .acl-spaces{grid-template-columns:1fr} .acl-space:nth-child(n){margin-top:0} .acl-space:nth-child(3) .acl-space__img{aspect-ratio:4/5} .acl-space__img{aspect-ratio:4/3.4} .acl-wwh::before{display:none} .acl-wwh__row{grid-template-columns:52px 1fr} .acl-wwh__row b{width:46px;height:46px} .acl-q__a p{padding-right:1rem;padding-left:calc(1.8rem + .9rem + .25rem)} .acl-vcard{flex-basis:78%} .acl-flowcard{width:min(92%,360px);bottom:-1.5rem} .acl-assess__frame{height:min(78vh,720px);min-height:560px} .acl-actions .acl-btn,.acl-final__actions .acl-btn{flex:1 1 100%} .acl-final__actions{flex-direction:column;align-items:stretch} .acl-final__actions .acl-btn--gold{padding-inline:1.4rem} .acl-lib__arrows button{width:46px;height:46px} .acl-proof{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:1rem 0} .acl-proof li{padding:0 .85rem} .acl-proof strong{font-size:1.5rem} .acl-proof span{font-size:.62rem;letter-spacing:.1em} .acl-proof__loc{grid-column:1/-1} } @media (max-width:480px){ .acl-kicker{letter-spacing:.14em;font-size:.64rem} .acl-badge{top:8%;font-size:.66rem;padding:.55rem .85rem .55rem .75rem} .acl-stats strong{font-size:1.6rem} .acl-stats__plate>div{padding:1.1rem .6rem} .acl-stats div>span{font-size:.64rem;letter-spacing:.1em} .acl-btn{white-space:normal;text-align:center} } /* sit above the shared mobile quick bar (Call / WhatsApp / Book) */ @media (max-width:760px){.acl-final{padding-bottom:calc(clamp(5rem,10vw,9rem) + 64px)}} /* ---------- reduced motion: everything visible, nothing moves ---------- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .acl-js [data-r],.acl-js [data-r="mask"],.acl-js [data-r="mask"] img,.acl-js [data-split] .wi{opacity:1!important;translate:none!important;scale:1!important;rotate:0deg!important;clip-path:none!important;transition:none!important} .acl-physio *,.acl-ring,.acl-scan,.acl-btn--gold::after,.acl-arch__img img,.acl-kicker i::after,.acl-badge i::after,.acl-play::after{animation:none!important} [data-depth]{translate:none!important} .acl-path::after{transform:scaleX(1)} .acl-path li strong,.acl-path li p{opacity:1} } /* ---------- hero · physiotherapy motifs (decorative background, infinite) ---------- */ .acl-physio{position:absolute;inset:0;overflow:hidden} .acl-physio svg{position:absolute;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round} .acl-silk{position:absolute;inset:0;width:100%;height:100%;display:block} /* heartbeat trace with a travelling light */ .acl-physio .p-ecg{left:0;bottom:17%;width:100%;height:120px} .p-ecg .base{stroke:rgba(0,180,216,.16);stroke-width:1} .p-ecg .echo{stroke:rgba(0,180,216,.14);stroke-width:1;stroke-dasharray:2 6} .p-ecg .beat{stroke:#00b4d8;stroke-width:2;stroke-dasharray:520 2400;animation:aclEcg 7s linear infinite;filter:drop-shadow(0 0 6px rgba(0,180,216,.75))} .p-ecg .dot{fill:#e6faff;stroke:none;filter:drop-shadow(0 0 5px #00b4d8) drop-shadow(0 0 14px rgba(0,180,216,.85))} @keyframes aclEcg{from{stroke-dashoffset:520}to{stroke-dashoffset:-1254}} /* shared keyframes */ @keyframes aclBreath{0%,100%{opacity:.45}50%{opacity:1}} @keyframes aclRun{from{stroke-dashoffset:1.2}to{stroke-dashoffset:0}} @keyframes aclSweepY{0%{translate:0 0}100%{translate:0 470px}} @keyframes aclFloat{0%,100%{translate:0 0}50%{translate:0 -14px}} @keyframes aclTwinkle{0%,100%{opacity:.18}50%{opacity:.6}} @keyframes aclRipple{0%{scale:1;opacity:.9}100%{scale:5;opacity:0}} /* body joint map (left gutter) and muscle with motor nerve (right gutter) - wide screens only */ .acl-physio .p-body,.acl-physio .p-muscle{display:none;top:50%;margin-top:-200px;height:380px} .acl-physio .p-body{width:160px;left:calc((100% - var(--maxw))/4 - 80px);animation:aclFloat 12s ease-in-out infinite} .acl-physio .p-muscle{width:130px;right:calc((100% - var(--maxw))/4 - 65px);animation:aclFloat 13s ease-in-out -5s infinite} @media (min-width:1760px){.acl-physio .p-body,.acl-physio .p-muscle{display:block}} .p-body .b-head{stroke:rgba(220,246,255,.55);stroke-width:1.2;fill:rgba(0,180,216,.08)} .p-body .b-line{stroke:rgba(220,246,255,.5);stroke-width:1.2} .p-body .b-volarm{stroke:url(#aclxBm);stroke-width:12} .p-body .b-spine{stroke:rgba(0,180,216,.55);stroke-width:1.2} .p-body .b-flow{stroke:#bff1ff;stroke-width:1.8;stroke-dasharray:.12 1;filter:drop-shadow(0 0 4px #00b4d8);animation:aclRun 4.2s linear infinite} .p-body .b-flow--2{animation-delay:-2.1s} .p-body .b-arm{transform-box:view-box;animation:aclAbduct 7s ease-in-out infinite} .p-body .b-arm--l{transform-origin:52px 80px} .p-body .b-arm--r{transform-origin:108px 80px;--dir:-1} .p-body .b-j{fill:#e6faff;stroke:#00b4d8;stroke-width:1.2;filter:drop-shadow(0 0 4px #00b4d8);animation:aclBreath 3.2s ease-in-out infinite;animation-delay:calc(var(--i)*.4s)} .p-body .b-ripples circle{stroke:#00b4d8;stroke-width:1;transform-box:fill-box;transform-origin:50% 50%;animation:aclRipple 4s ease-out infinite;animation-delay:calc(var(--i)*-1s)} .p-body .b-scan{stroke:none;animation:aclSweepY 6s var(--ease-io) infinite} @keyframes aclAbduct{0%,100%{rotate:calc(var(--dir,1)*4deg)}50%{rotate:calc(var(--dir,1)*38deg)}} .p-muscle .mu-bone{stroke:rgba(220,246,255,.5);stroke-width:1.1} .p-muscle .mu-tendon{stroke:rgba(220,246,255,.4);stroke-width:1.1} .p-muscle .mu-belly{transform-box:view-box;transform-origin:65px 190px;animation:aclContract 3.8s ease-in-out infinite} .p-muscle .mu-shape{stroke:rgba(0,180,216,.7);stroke-width:1.2} .p-muscle .mu-fib path{stroke:rgba(220,246,255,.3);stroke-width:.8} .p-muscle .mu-sig path{stroke:#bff1ff;stroke-width:1.6;stroke-dasharray:.14 1;filter:drop-shadow(0 0 4px #00b4d8);animation:aclRun 3.8s linear infinite;animation-delay:calc(var(--i,0)*-1.27s)} .p-muscle .mu-nerve{stroke:rgba(0,180,216,.6);stroke-width:1} .p-muscle .mu-nerve-run{stroke:#e6faff;stroke-width:2;stroke-dasharray:.2 1;filter:drop-shadow(0 0 4px #00b4d8);animation:aclRun 1.9s linear infinite} .p-muscle .mu-soma{fill:rgba(0,180,216,.3);stroke:#00b4d8;stroke-width:1.2;animation:aclBreath 1.9s ease-in-out infinite} .p-muscle .mu-ep{fill:#00b4d8;filter:drop-shadow(0 0 5px #00b4d8);animation:aclBreath 1.9s ease-in-out infinite} @keyframes aclContract{0%,100%{scale:1 1}45%,60%{scale:1.1 .9}} .acl-physio .p-cross{width:22px;height:22px;opacity:.4;stroke:#00b4d8;stroke-width:1.6;animation:aclFloat 7s ease-in-out infinite,aclTwinkle 5s ease-in-out infinite} .acl-physio .p-cross--1{left:47%;top:34%;width:16px;height:16px} .acl-physio .p-cross--2{right:36%;bottom:26%;animation-delay:-3s,-2s;width:14px;height:14px} .acl-physio .p-cross--3{right:4%;top:46%;animation-delay:-5s,-1s;width:20px;height:20px} /* spine and movement screen floating above the treatment photo */ .acl-instr{position:absolute;left:0;right:0;bottom:calc(100% + clamp(.6rem,1.4vw,1.4rem));display:none;justify-content:space-between;align-items:flex-end;gap:4%;pointer-events:none;z-index:0} .acl-js .acl-instr{display:flex} .acl-instr svg{display:block;height:auto;overflow:visible;stroke-linecap:round;stroke-linejoin:round} .acl-spine{width:66%;align-self:center} .acl-mocap{width:min(28%,170px)} .acl-spine .sp-body{fill:url(#aclxSpBody);stroke:rgba(220,246,255,.85);stroke-width:1.1} .acl-spine .sp-arch{stroke:rgba(220,246,255,.55);stroke-width:.9} .acl-spine .sp-proc{stroke:rgba(220,246,255,.7);stroke-width:.9;fill:rgba(0,180,216,.1)} .acl-spine .sp-disc{fill:#00b4d8;stroke:none;filter:drop-shadow(0 0 3px #00b4d8);animation:aclBreath 3.4s ease-in-out infinite;animation-delay:calc(var(--i)*-.14s)} .acl-spine .sp-v{animation:aclRock 3.4s ease-in-out infinite;animation-delay:calc(var(--i)*-.14s)} .acl-spine .sp-cord{stroke:rgba(0,180,216,.5);stroke-width:1.4} .acl-spine .sp-pulse{stroke:#e6faff;stroke-width:2.4;stroke-dasharray:.1 1;filter:drop-shadow(0 0 5px #00b4d8) drop-shadow(0 0 10px rgba(0,180,216,.7));animation:aclRun 3.6s linear infinite} .acl-spine .sp-pulse--2{animation-delay:-1.8s} .acl-spine .sp-roots path{stroke:rgba(0,180,216,.5);stroke-width:.8;animation:aclBreath 3.6s ease-in-out infinite;animation-delay:calc(var(--i)*.15s)} .acl-spine .sp-sac{fill:url(#aclxSpBody);stroke:rgba(220,246,255,.75);stroke-width:1} .acl-spine .sp-sac-l{stroke:rgba(220,246,255,.4);stroke-width:.8} .acl-spine .sp-skull path{stroke:rgba(220,246,255,.42);stroke-width:1} .acl-spine .sp-ribs path{stroke:rgba(220,246,255,.3);stroke-width:1;transform-box:fill-box;transform-origin:100% 0;animation:aclRibs 5s ease-in-out infinite;animation-delay:calc(var(--i)*.05s)} @keyframes aclRibs{0%,100%{rotate:0deg;opacity:.65}50%{rotate:-5deg;opacity:1}} .acl-spine .sp-ilium{stroke:rgba(220,246,255,.32);stroke-width:1;stroke-dasharray:2 4} @keyframes aclRock{0%,100%{rotate:-3deg}50%{rotate:3deg}} .acl-mocap .m-floor{stroke:rgba(0,180,216,.5);stroke-width:.8} .acl-mocap .m-floor--in{stroke:rgba(0,180,216,.28);stroke-dasharray:2 4} .acl-mocap .m-grid{stroke:rgba(255,255,255,.1);stroke-width:.7} .acl-mocap .m-traj{stroke:rgba(0,180,216,.55);stroke-width:1;stroke-dasharray:1 4} .acl-mocap .m-traj--w{stroke:rgba(220,246,255,.3)} .acl-mocap .m-plumb{stroke:rgba(255,255,255,.3);stroke-width:.8;stroke-dasharray:4 4} .acl-mocap .m-grf line,.acl-mocap .m-grf path{stroke:#00b4d8;stroke-width:1.4} .acl-mocap .m-flesh line{stroke-linecap:round} .acl-mocap .m-bones line{stroke:rgba(230,250,255,.9);stroke-width:2} .acl-mocap .m-head{stroke:rgba(230,250,255,.9);stroke-width:1.8;fill:rgba(0,180,216,.18)} .acl-mocap .m-ang{stroke:#00b4d8;stroke-width:1.2;fill:rgba(0,180,216,.16)} .acl-mocap .m-ang--hip{stroke:rgba(220,246,255,.6);fill:rgba(220,246,255,.08)} .acl-mocap .m-mks circle{fill:#e6faff;filter:drop-shadow(0 0 3px #00b4d8)} .acl-mocap .m-mks circle.is-key{fill:#00b4d8;stroke:#e6faff;stroke-width:1;filter:drop-shadow(0 0 6px #00b4d8)} /* engraved range-of-motion dial turning behind the photo corner */ .acl-subdial{position:absolute;z-index:0;left:0;bottom:0;width:clamp(170px,19vw,290px);height:auto;translate:-50% 50%;pointer-events:none;overflow:visible;stroke-linecap:round} .acl-subdial .sd-ring{stroke:rgba(255,255,255,.22);stroke-width:.8} .acl-subdial .sd-ring--in{stroke:rgba(0,180,216,.4)} .acl-subdial .tk{stroke:rgba(255,255,255,.2);stroke-width:.8} .acl-subdial .tk--on{stroke:rgba(255,255,255,.48)} .acl-subdial .tk--maj{stroke:#00b4d8;stroke-width:1.4} .acl-subdial text{fill:rgba(255,255,255,.5);font:600 7.5px var(--ff-b);letter-spacing:.08em;text-anchor:middle} .acl-subdial .sd-ticks,.acl-subdial .sd-comet,.acl-subdial .sd-dash,.acl-subdial .sd-hand{transform-box:view-box;transform-origin:150px 150px} .acl-subdial .sd-ticks{animation:aclSpin 120s linear infinite} .acl-subdial .sd-comet{stroke-width:2.4;stroke-dasharray:160 444;animation:aclSpin 6s linear infinite;filter:drop-shadow(0 0 6px rgba(0,180,216,.85))} .acl-subdial .sd-dash{stroke:rgba(255,255,255,.3);stroke-width:.8;stroke-dasharray:1 5;animation:aclSpin 60s linear infinite reverse} .acl-subdial .sd-hand{animation:aclSpin 60s steps(60) infinite} .acl-subdial .sd-hand path{stroke:#00b4d8;stroke-width:1.2} .acl-subdial .sd-hand circle{fill:#e6faff;filter:drop-shadow(0 0 5px #00b4d8)} .acl-subdial .sd-cross{stroke:rgba(255,255,255,.4);stroke-width:.8} .acl-subdial .sd-pin{fill:#00b4d8} .is-off .acl-instr *,.is-off .acl-subdial *{animation-play-state:paused} @media (max-width:999px){ .acl-js .acl-hero__visual{margin-top:calc(min(100vw - var(--gut)*2, 560px)*.36 + .5rem)} .acl-instr{bottom:calc(100% + .5rem)} .acl-spine{width:64%} .acl-mocap{width:30%} .acl-subdial{width:clamp(150px,30vw,220px)} .acl-physio .p-cross--1{display:none} } @media (max-width:759px){ .acl-physio .p-ecg{height:80px;bottom:calc(clamp(2.6rem,5vw,3.6rem) + .5rem)} .acl-physio .p-cross--3{display:none} } @media (prefers-reduced-motion:reduce){ .acl-physio *,.acl-instr *,.acl-subdial *{animation:none!important} .p-ecg .beat{stroke-dasharray:none;opacity:.6} } /* ---------- "Does this feel familiar?" cards - same card system, icons and motion as the homepage "Is this care right for me?" section ---------- */ .acl-recog{--fit-accent:#00b4d8;--fit-primary:#1a4d8f;--fit-primary-dk:#0e2f5a;--fit-accent-dk:#0096c7;--fit-muted:#5a7a96;--fit-border:#d0e4f0;--fit-ease:cubic-bezier(.22,1,.36,1)} .acl-fit{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-bottom:2rem;counter-reset:aclFit} .acl-fit__card{ counter-increment:aclFit;position:relative;overflow:hidden;text-align:left; padding:1.6rem 1.2rem 1.5rem;border:1px solid var(--fit-border);border-radius:20px; background: radial-gradient(140px 120px at 105% -10%,rgba(0,180,216,.14),transparent 70%), radial-gradient(160px 140px at -10% 115%,rgba(26,77,143,.09),transparent 70%), #fff; transition:transform .5s var(--fit-ease),box-shadow .5s ease,border-color .5s ease,background .6s ease; will-change:transform; } .acl-js .acl-fit__card[data-r]{ transition:opacity .95s var(--ease) var(--rd),translate 1.15s var(--ease) var(--rd), transform .5s var(--fit-ease) 0s,box-shadow .5s ease 0s,border-color .5s ease 0s,background .6s ease 0s; } /* gradient bar that draws across the top on hover */ .acl-fit__card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;z-index:5;background:linear-gradient(90deg,var(--fit-accent),var(--fit-primary));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--fit-ease)} /* numbered badge on the icon */ .acl-fit__card::after{ content:counter(aclFit);position:absolute;left:57px;top:8px;z-index:4; width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,var(--fit-accent),var(--fit-primary)); color:#fff;font:800 .72rem/1 var(--ff-h);font-variant-numeric:lining-nums; box-shadow:0 6px 14px -4px rgba(0,180,216,.55),0 0 0 3px #fff; transition:transform .4s var(--fit-ease),box-shadow .4s ease; } /* large faded number, top right */ .acl-fit__no{ position:absolute;right:14px;top:10px;z-index:2;pointer-events:none; font:800 2.6rem/1 var(--ff-h);letter-spacing:-.02em; color:rgba(0,137,168,.35); background:linear-gradient(160deg,var(--fit-accent),var(--fit-primary)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; opacity:.16;font-variant-numeric:lining-nums;transition:opacity .45s ease,transform .45s ease; } .acl-fit__title{position:relative;z-index:2;margin:3.1rem 0 .4rem;font:700 1.25rem/1.5 var(--ff-h);color:var(--fit-primary-dk);letter-spacing:0;transition:color .35s ease} .acl-fit__card p{position:relative;z-index:2;margin:0;font-size:16px;line-height:1.875;color:var(--fit-muted)} @media (hover:hover){ .acl-fit__card:hover{ transform:translateY(-10px); box-shadow:0 24px 44px -16px rgba(0,180,216,.32),0 10px 20px rgba(26,77,143,.14); border-color:rgba(0,180,216,.4); background: radial-gradient(220px 180px at 108% -15%,rgba(0,180,216,.22),transparent 72%), radial-gradient(220px 180px at -12% 118%,rgba(26,77,143,.15),transparent 72%), #fff; } .acl-fit__card:hover::before{transform:scaleX(1)} .acl-fit__card:hover::after{transform:scale(1.15) rotate(10deg);box-shadow:0 8px 18px -3px rgba(0,180,216,.6),0 0 0 3px #fff} .acl-fit__card:hover .acl-fit__no{opacity:.3;transform:translateY(-3px)} .acl-fit__card:hover .acl-fit__title{color:var(--fit-accent-dk)} } /* icon tiles (glass square with small animated diagrams) */ .acl-sym{ position:absolute;left:18px;top:16px;width:72px;height:66px;margin:0;border-radius:20px;overflow:hidden; border:1px solid rgba(0,180,216,.28); background:linear-gradient(155deg,rgba(0,180,216,.16),rgba(26,77,143,.10)); box-shadow:0 10px 22px -10px rgba(0,180,216,.45),inset 1px 1px 0 rgba(255,255,255,.7); transform:scale(.72);transform-origin:top left; transition:transform .45s var(--fit-ease),box-shadow .45s ease; } .acl-sym i,.acl-sym b{position:absolute;display:block;letter-spacing:normal} @media (hover:hover){ .acl-fit__card:hover .acl-sym{transform:scale(.8) translateY(-2px);box-shadow:0 14px 26px -10px rgba(0,180,216,.5),inset 1px 1px 0 rgba(255,255,255,.7)} } /* target: assess */ .acl-sym--assess i:first-child{inset:13px;border:1px solid #7fb0e5;border-radius:50%} .acl-sym--assess i:nth-child(2){inset:21px;border:1px dashed #68cdbf;border-radius:50%;animation:aclCsSpin 5s linear infinite} .acl-sym--assess i:nth-child(3){width:8px;height:8px;left:32px;top:29px;border-radius:50%;background:#0a64e8;box-shadow:0 0 0 6px rgba(10,100,232,.12);animation:aclCsRing 2.4s ease-out infinite} /* connected steps: plan */ .acl-sym--plan b{left:15px;right:15px;top:31px;height:2px;background:#76aee6;transform:rotate(-12deg);transform-origin:center} .acl-sym--plan i{z-index:2;width:11px;height:11px;border:3px solid #0a64e8;border-radius:50%;background:#f5faff;animation:aclCsPulse 2.6s ease-in-out infinite} .acl-sym--plan i:first-child{left:12px;top:38px} .acl-sym--plan i:nth-child(2){left:31px;top:27px;border-color:#53cdbb;animation-delay:.45s} .acl-sym--plan i:nth-child(3){right:11px;top:18px;animation-delay:.9s} /* rotating cycle: recheck */ .acl-sym--recheck i:first-child{inset:13px;border:2px solid #74ace4;border-right-color:#55d4c0;border-radius:50%} .acl-sym--recheck b{inset:0;display:grid;place-items:center;color:#0a64e8;font:500 23px/1 var(--ff-b);animation:aclCsSpin 6s linear infinite} .acl-sym--recheck b::before{content:"\21BB"} /* bobbing joints: movement */ .acl-sym--movement b{left:13px;right:13px;top:38px;height:2px;background:#75ade4;transform:rotate(-16deg)} .acl-sym--movement i{z-index:2;width:11px;height:11px;border-radius:50%;border:3px solid #79b5e9;background:#0e3966;animation:aclCsBob 2s ease-in-out infinite} .acl-sym--movement i:first-child{left:11px;top:39px} .acl-sym--movement i:nth-child(2){left:30px;top:28px;border-color:#5bd4c1;animation-delay:.2s} .acl-sym--movement i:nth-child(3){right:10px;top:18px;animation-delay:.4s} /* hover speeds the idle motion up */ @media (hover:hover){ .acl-fit__card:hover .acl-sym--recheck b{animation-duration:1.4s} .acl-fit__card:hover .acl-sym--movement i{animation-duration:.8s} .acl-fit__card:hover .acl-sym--plan i{animation-duration:1s} .acl-fit__card:hover .acl-sym--assess i:nth-child(2){animation-duration:1.6s} .acl-fit__card:hover .acl-sym--assess i:nth-child(3){animation-duration:1s} } @keyframes aclCsSpin{to{transform:rotate(360deg)}} @keyframes aclCsPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}} @keyframes aclCsRing{0%{box-shadow:0 0 0 0 rgba(10,100,232,.32)}70%{box-shadow:0 0 0 9px rgba(10,100,232,0)}100%{box-shadow:0 0 0 0 rgba(10,100,232,0)}} @keyframes aclCsBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}} /* actions: filled pill + text link, as on the homepage */ .acl-fit__actions{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;justify-content:center;align-items:center;margin-top:clamp(1rem,2.5vw,1.6rem)} .acl-fit__btn{ display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.5rem;border-radius:999px; background:var(--fit-primary);color:#fff!important;font:700 .95rem/1.65 var(--ff-b);text-decoration:none; box-shadow:0 6px 20px rgba(26,77,143,.3); transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s cubic-bezier(.4,0,.2,1),background .35s cubic-bezier(.4,0,.2,1); } .acl-fit__btn em,.acl-fit__link em{font-style:normal;display:inline-block;transition:translate .35s var(--fit-ease)} .acl-fit__link{display:inline-flex;align-items:center;gap:.45rem;font:700 1rem/1.65 var(--ff-b);color:var(--fit-primary)!important;text-decoration:none;transition:color .3s ease} .acl-fit__link svg{width:18px;height:18px;flex:none;fill:currentColor} @media (hover:hover){ .acl-fit__btn:hover{background:var(--fit-accent-dk);transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,150,199,.4)} .acl-fit__btn:hover em,.acl-fit__link:hover em{translate:4px 0} .acl-fit__link:hover{color:var(--fit-accent-dk)!important} } @media (max-width:900px){.acl-fit{grid-template-columns:1fr 1fr}} @media (max-width:520px){ .acl-fit{grid-template-columns:1fr} .acl-fit__actions{flex-direction:column;gap:1.1rem} .acl-fit__btn{width:100%;justify-content:center} } @media (prefers-reduced-motion:reduce){ .acl-fit__card,.acl-fit__card *,.acl-sym,.acl-sym *{animation:none!important;transition:none!important} } /* ---------- What · Why · How (image + connected glass steps) ---------- */ .acl-u{ --u-a:#00b4d8;--u-b:#1a4d8f;--u-ink:#0b2a4a;--u-muted:#557089;--u-ease:cubic-bezier(.22,1,.36,1); overflow:hidden;isolation:isolate; background:linear-gradient(180deg,#f4f9fd 0%,#eaf4fb 100%); } .acl-u__bg{position:absolute;inset:0;z-index:0;pointer-events:none} .acl-u__waves{position:absolute;inset:0;width:100%;height:100%} .acl-u__waves .w1{animation:aclUDrift 18s ease-in-out infinite alternate} .acl-u__waves .w2{animation:aclUDrift 22s ease-in-out -6s infinite alternate-reverse} .acl-u__waves .w3{stroke-width:1.2;stroke-dasharray:6 10;animation:aclUDash 30s linear infinite} @keyframes aclUDrift{from{translate:-1.5% 0}to{translate:1.5% 1%}} .acl-u__waves .w3--b{animation-direction:reverse;animation-duration:38s} @keyframes aclUDash{to{stroke-dashoffset:-640}} .acl-u__glow{position:absolute;border-radius:50%;filter:blur(10px)} .acl-u__glow--a{width:520px;height:520px;right:-140px;top:-160px;background:radial-gradient(circle,rgba(0,180,216,.16),transparent 65%);animation:aclUFloat 14s ease-in-out infinite} .acl-u__glow--b{width:620px;height:620px;left:-220px;bottom:-260px;background:radial-gradient(circle,rgba(26,77,143,.12),transparent 65%);animation:aclUFloat 16s ease-in-out -5s infinite reverse} @keyframes aclUFloat{0%,100%{translate:0 0}50%{translate:24px -18px}} /* head */ .acl-u__head{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:1.5rem clamp(2rem,5vw,5rem);align-items:center;margin-bottom:clamp(2.25rem,4.5vw,3.5rem)} .acl-u .acl-eyebrow{color:var(--u-b)} .acl-u__title{color:var(--u-ink)} .acl-u__dot{color:var(--u-a)} .acl-u__intro{display:flex;align-items:center;gap:clamp(1.1rem,2vw,1.8rem)} .acl-u__intro p{position:relative;margin:0;padding-left:clamp(1.1rem,2vw,1.8rem);font-size:1.02rem;line-height:1.8;color:var(--u-muted);max-width:46ch} .acl-u__intro p::before{content:"";position:absolute;left:0;top:.35rem;bottom:.35rem;width:1px;background:linear-gradient(var(--u-a),var(--u-b));opacity:.55} .acl-u__badge{ position:relative;flex:none;display:grid;place-items:center;width:clamp(76px,7vw,104px);aspect-ratio:1;border-radius:50%; color:var(--u-b);background:radial-gradient(circle at 30% 25%,#fff 0%,#e3f5fb 55%,#c9ebf6 100%); box-shadow:0 22px 40px -22px rgba(26,77,143,.55),inset 0 0 0 1px rgba(255,255,255,.9); } .acl-u__badge::before{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px dashed rgba(0,180,216,.45);animation:aclSpin 26s linear infinite} .acl-u__badge::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:2px solid transparent;border-top-color:var(--u-a);border-right-color:rgba(0,180,216,.35);animation:aclSpin 4.5s linear infinite} .acl-u__badge svg,.acl-u__label-ico svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .acl-u__badge svg .lig,.acl-u__label-ico svg .lig{stroke:var(--u-a);stroke-width:2.4;animation:aclULig 2.6s ease-in-out infinite} @keyframes aclULig{0%,100%{opacity:.45}50%{opacity:1}} /* body */ .acl-u__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(1.5rem,3vw,2.75rem);align-items:stretch} /* image card */ .acl-u__art{position:relative;margin:0;align-self:center} .acl-u__frame{ position:relative;overflow:hidden;aspect-ratio:1/1;border-radius:clamp(22px,2.4vw,32px); background:#0e3a66; box-shadow:0 50px 90px -50px rgba(26,77,143,.75),0 0 0 1px rgba(255,255,255,.7),0 0 0 7px rgba(255,255,255,.45); transform-style:preserve-3d;transition:transform .9s var(--u-ease),box-shadow .6s ease; } .acl-u__frame img{width:100%;height:100%;object-fit:cover;display:block;scale:1.02;transition:scale 1.2s var(--u-ease)} .acl-u__frame::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(180deg,transparent 62%,rgba(11,42,74,.35))} @keyframes aclUPing{0%{scale:1;opacity:1}100%{scale:3.4;opacity:0}} /* glare that follows the pointer + slow sheen */ .acl-u__glare{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit; background:radial-gradient(420px circle at var(--gx,30%) var(--gy,20%),rgba(255,255,255,.22),transparent 55%);opacity:.7;transition:opacity .5s ease} .acl-u__glare::after{content:"";position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.18) 50%,transparent 58%);translate:-60% 0;animation:aclUSheen 7s var(--ease-io) 1.5s infinite} @keyframes aclUSheen{0%{translate:-60% 0}55%,100%{translate:60% 0}} /* caption pill */ .acl-u__label{ position:absolute;z-index:4;left:clamp(.75rem,2vw,1.5rem);bottom:clamp(.75rem,2vw,1.5rem);right:auto;max-width:calc(100% - clamp(1.5rem,4vw,3rem)); display:flex;align-items:center;gap:.95rem;padding:.5rem 1.6rem .5rem .5rem;border-radius:999px; background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.95); -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3); box-shadow:0 22px 44px -24px rgba(11,42,74,.6); transform:translateZ(40px); } .acl-u__label-ico{position:relative;flex:none;display:grid;place-items:center;width:clamp(48px,4.4vw,62px);aspect-ratio:1;border-radius:50%;color:#fff;background:linear-gradient(135deg,var(--u-a),var(--u-b));box-shadow:0 10px 22px -10px rgba(0,180,216,.9),0 0 0 4px rgba(0,180,216,.15)} .acl-u__label-ico::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(0,180,216,.5);animation:aclUPing 2.8s ease-out infinite} .acl-u__label-ico svg{width:56%;height:56%} .acl-u__label-ico svg .lig{stroke:#bff1ff} .acl-u__label-txt{display:flex;flex-direction:column;gap:.3rem;min-width:0} .acl-u__label-txt b{font:700 clamp(.7rem,.62rem + .3vw,.84rem)/1.25 var(--ff-b);letter-spacing:.16em;text-transform:uppercase;color:var(--u-ink)} .acl-u__label-txt small{font:500 clamp(.62rem,.58rem + .2vw,.72rem)/1.3 var(--ff-b);letter-spacing:.18em;text-transform:uppercase;color:var(--u-muted)} @media (hover:hover){ .acl-u__art:hover .acl-u__frame{box-shadow:0 60px 100px -50px rgba(0,180,216,.7),0 0 0 1px rgba(255,255,255,.8),0 0 0 7px rgba(255,255,255,.6)} .acl-u__art:hover .acl-u__frame img{scale:1.06} } /* connected steps */ .acl-u__steps{position:relative;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(.9rem,1.6vw,1.25rem)} .acl-u__steps::before,.acl-u__steps::after{content:"";position:absolute;z-index:0;left:var(--cx,60px);top:var(--c0,60px);width:2px;margin-left:-1px;border-radius:2px;pointer-events:none} .acl-u__steps::before{height:var(--cl,0px);background:repeating-linear-gradient(180deg,rgba(26,77,143,.28) 0 6px,transparent 6px 11px)} .acl-u__steps::after{height:var(--cp,0px);background:linear-gradient(180deg,var(--u-a),var(--u-b));box-shadow:0 0 12px rgba(0,180,216,.7);transition:height .9s var(--u-ease)} .acl-u__step{ position:relative;z-index:1;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1rem,1.8vw,1.6rem);align-items:center; padding:clamp(1.15rem,2vw,1.7rem) clamp(1.2rem,2.4vw,2rem) clamp(1.15rem,2vw,1.7rem) clamp(1rem,1.6vw,1.4rem); border-radius:clamp(20px,2vw,28px);cursor:default; background: radial-gradient(380px 160px at 100% 0%,rgba(0,180,216,.10),transparent 70%), linear-gradient(135deg,rgba(255,255,255,.88),rgba(255,255,255,.62)); border:1px solid rgba(255,255,255,.95); -webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25); box-shadow:0 26px 50px -36px rgba(26,77,143,.45),inset 0 1px 0 rgba(255,255,255,.9); overflow:hidden; } .acl-js .acl-u__step[data-r]{ transition:opacity .95s var(--ease) var(--rd),translate 1.15s var(--ease) var(--rd), transform .6s var(--u-ease) 0s,box-shadow .6s ease 0s,border-color .6s ease 0s; } .acl-u__step::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none; background:linear-gradient(135deg,var(--u-a),rgba(26,77,143,.15) 45%,var(--u-b)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude; opacity:0;transition:opacity .6s ease} .acl-u__step::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:140px;border-radius:50%;pointer-events:none; background:radial-gradient(closest-side,rgba(0,180,216,.18),transparent);opacity:.6;transition:opacity .6s ease,translate .9s var(--u-ease)} .acl-u__step.is-active{transform:translateX(clamp(0px,.6vw,8px));box-shadow:0 34px 64px -34px rgba(0,180,216,.55),inset 0 1px 0 rgba(255,255,255,.9)} .acl-u__step.is-active::before{opacity:1} .acl-u__step.is-active::after{opacity:1;translate:-30px 20px} /* icon disc */ .acl-u__ico{position:relative;display:grid;place-items:center;width:clamp(64px,5.6vw,84px);aspect-ratio:1;border-radius:50%; background:rgba(255,255,255,.9);box-shadow:0 14px 30px -16px rgba(26,77,143,.55),inset 0 0 0 1px rgba(0,180,216,.18)} .acl-u__ico>i{position:relative;display:grid;place-items:center;width:78%;aspect-ratio:1;border-radius:50%;color:#fff; box-shadow:0 12px 24px -10px rgba(0,180,216,.75),inset 0 2px 0 rgba(255,255,255,.35);transition:transform .6s var(--u-ease),box-shadow .6s ease} .acl-u__ico--what>i{background:linear-gradient(140deg,#28c7e6,#0096c7 55%,#0e7fb3)} .acl-u__ico--why>i{background:linear-gradient(140deg,#13aedb,#1a6fb5 55%,#1a4d8f)} .acl-u__ico--how>i{background:linear-gradient(140deg,#2b8fd3,#1a4d8f 60%,#12386b)} .acl-u__ico::before{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid transparent;border-top-color:var(--u-a);border-right-color:rgba(0,180,216,.3);opacity:0;transition:opacity .5s ease;animation:aclSpin 3.2s linear infinite} .acl-u__ico::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none} .acl-u__step.is-active .acl-u__ico::before{opacity:1} .acl-u__step.is-active .acl-u__ico::after{animation:aclURing 2.4s ease-out infinite} @keyframes aclURing{0%{box-shadow:0 0 0 0 rgba(0,180,216,.45)}100%{box-shadow:0 0 0 18px rgba(0,180,216,0)}} .acl-u__step.is-active .acl-u__ico>i{transform:scale(1.06)} .acl-u__ico svg{width:48%;height:48%;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .acl-u__ico--what .ray{animation:aclURay 2.4s ease-in-out infinite} .acl-u__ico--what .fil{stroke:#d7f7ff;animation:aclULig 2.4s ease-in-out infinite} @keyframes aclURay{0%,100%{opacity:.35}50%{opacity:1}} .acl-u__ico--why .ring{transform-box:fill-box;transform-origin:center;animation:aclUPulse 2.6s ease-in-out infinite} .acl-u__ico--why .core{fill:currentColor;stroke:none} .acl-u__ico--why .dart{animation:aclUDart 2.6s var(--u-ease) infinite} @keyframes aclUPulse{0%,100%{scale:1}50%{scale:.82}} @keyframes aclUDart{0%{translate:6px -6px;opacity:0}30%,80%{translate:0 0;opacity:1}100%{translate:0 0;opacity:0}} .acl-u__ico--how .gear{transform-box:fill-box;transform-origin:center;animation:aclSpin 9s linear infinite} .acl-u__step.is-active .acl-u__ico--how .gear{animation-duration:3s} /* text */ .acl-u__tagrow{display:flex;align-items:center;gap:.8rem;margin-bottom:.55rem} .acl-u__tag{display:inline-block;padding:.34rem .85rem;border-radius:999px;font:700 .66rem/1 var(--ff-b);letter-spacing:.2em;color:var(--u-b); background:linear-gradient(135deg,rgba(0,180,216,.14),rgba(26,77,143,.1));border:1px solid rgba(0,180,216,.22);transition:color .5s ease,background .5s ease,box-shadow .5s ease} .acl-u__step.is-active .acl-u__tag{color:#fff;background:linear-gradient(135deg,var(--u-a),var(--u-b));border-color:transparent;box-shadow:0 8px 18px -8px rgba(0,180,216,.8)} .acl-u__bar{position:relative;flex:none;width:clamp(48px,6vw,84px);height:2px;border-radius:2px;background:rgba(26,77,143,.14);overflow:hidden} .acl-u__bar i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--u-a),var(--u-b))} .acl-u__step.is-active .acl-u__bar i{transform:scaleX(1)} .acl-u__step.is-run .acl-u__bar i{animation:aclUBar var(--u-dur,4.2s) linear both} @keyframes aclUBar{from{transform:scaleX(0)}to{transform:scaleX(1)}} .acl-u__t{display:block;margin:0 0 .45rem;font:600 clamp(1.15rem,.98rem + .62vw,1.5rem)/1.3 var(--ff-h);color:var(--u-ink);text-wrap:balance;transition:color .5s ease} .acl-u__step.is-active .acl-u__t{color:var(--u-b)} .acl-u__txt p{margin:0;font-size:.97rem;line-height:1.75;color:var(--u-muted);max-width:56ch} .is-off .acl-u *,.acl-u.is-off *{animation-play-state:paused} @media (max-width:1199px){ .acl-u__body{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)} .acl-u__txt p{font-size:.93rem} } @media (max-width:999px){ .acl-u__head{grid-template-columns:1fr;gap:1.6rem} .acl-u__title{max-width:22ch} .acl-u__body{grid-template-columns:1fr;gap:2rem} .acl-u__art,.acl-u__steps{width:min(100%,680px);margin-inline:auto} .acl-u__step.is-active{transform:none} } @media (max-width:599px){ .acl-u__intro{align-items:flex-start} .acl-u__intro p{font-size:.96rem} .acl-u__step{grid-template-columns:auto minmax(0,1fr);align-items:start;padding:1.1rem 1.1rem 1.15rem .9rem} .acl-u__ico{width:56px} .acl-u__label{ display:none;gap:.7rem;padding:.4rem 1.1rem .4rem .4rem} .acl-u__label-txt b{letter-spacing:.1em} .acl-u__label-txt small{letter-spacing:.12em} } @media (prefers-reduced-motion:reduce){ .acl-u *,.acl-u *::before,.acl-u *::after{animation:none!important} .acl-u__frame,.acl-u__step{transition:none!important} } /* 3D pain check modal open (full-screen frame): soft blur over the page behind, like the homepage */ html.acl-assess-open body::after{content:"";position:fixed;inset:0;z-index:2147482990;pointer-events:none;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} /* ---------- Understand the pattern: organic glass blobs with gradient icons ---------- */ .acl-pt{ --p-a:#00b4d8;--p-b:#1a4d8f;--p-ink:#0b2a4a;--p-muted:#4f6b84;--p-ease:cubic-bezier(.22,1,.36,1); overflow:hidden;isolation:isolate; padding:calc(var(--sec)*.85) 0 calc(var(--sec)*1.15); background:linear-gradient(180deg,#f4f9fe 0%,#ecf5fc 55%,#e2f0fb 100%); } .acl-pt__bg{position:absolute;inset:0;z-index:0;pointer-events:none} .acl-pt__glow{position:absolute;border-radius:50%;filter:blur(8px)} .acl-pt__glow--a{width:640px;height:640px;right:-200px;top:-260px;background:radial-gradient(circle,rgba(0,180,216,.2),transparent 65%);animation:aclUFloat 15s ease-in-out infinite} .acl-pt__glow--b{width:560px;height:560px;left:-220px;top:30%;background:radial-gradient(circle,rgba(26,77,143,.1),transparent 65%);animation:aclUFloat 18s ease-in-out -6s infinite reverse} .acl-pt__sweep{position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(150px,25vw,360px)} .acl-pt__sweep .s1{animation:aclUDrift 16s ease-in-out infinite alternate} .acl-pt__sweep .s2{animation:aclUDrift 21s ease-in-out -7s infinite alternate-reverse} .acl-pt__sweep .s3{animation:aclUDrift 16s ease-in-out infinite alternate} /* head */ .acl-pt__head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:1.4rem clamp(2rem,6vw,6rem);align-items:end;margin-bottom:clamp(2.5rem,5.5vw,4.5rem)} .acl-pt__eyebrow{color:var(--p-a);letter-spacing:.32em} .acl-pt__eyebrow::before{background:linear-gradient(90deg,var(--p-b),var(--p-a))} .acl-pt__title{max-width:30ch;font-weight: 700;} .acl-pt__title em{font-style:italic;font-weight:600;color:var(--p-b)} .acl-pt__title em .wi,.acl-pt__title em:not(:has(.wi)){background:linear-gradient(120deg,#0b2a4a 0%,var(--p-b) 35%,var(--p-a) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:.12em} .acl-pt__intro{position:relative;margin:0;padding:.2rem 0 .2rem clamp(1.1rem,2vw,1.6rem);font-size:1.02rem;line-height:1.85;color:var(--p-muted);max-width:50ch} .acl-pt__intro::before{content:"";position:absolute;left:0;top:.3rem;bottom:.3rem;width:2px;border-radius:2px;background:linear-gradient(var(--p-a),var(--p-b))} /* cards */ .acl-pt__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,2.6vw,2.5rem)} .acl-pt__card{ --mx:30%;--my:20%; position:relative;z-index:1;min-height:clamp(300px,25vw,350px); padding:clamp(1.9rem,2.6vw,2.4rem) clamp(2rem,3vw,3rem) clamp(3.6rem,4.6vw,4.6rem) clamp(2rem,3vw,3rem); } .acl-js .acl-pt__card[data-r]{transition:opacity .95s var(--ease) var(--rd),translate 1.15s var(--ease) var(--rd),transform .7s var(--p-ease) 0s} .acl-pt__card>*:not(.acl-pt__blob):not(.acl-pt__arc):not(.acl-pt__dot){position:relative;z-index:2} .acl-pt__blob{ position:absolute;inset:0;z-index:0;pointer-events:none; border-radius:150px 190px 130px 110px/120px 140px 110px 90px; background: radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.95),transparent 60%), linear-gradient(150deg,rgba(255,255,255,.86),rgba(232,245,253,.62) 55%,rgba(200,232,250,.55)); border:1px solid rgba(255,255,255,.95); box-shadow:0 44px 70px -44px rgba(26,77,143,.5),inset 0 2px 0 rgba(255,255,255,.95),inset 0 -26px 46px -26px rgba(0,180,216,.28); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); animation:aclPtMorph 16s ease-in-out infinite;transition:box-shadow .7s ease,border-color .7s ease; } .acl-pt__card:nth-child(2) .acl-pt__blob{animation-delay:-5s;animation-duration:18s} .acl-pt__card:nth-child(3) .acl-pt__blob{animation-delay:-10s;animation-duration:17s} .acl-pt__blob::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .5s ease; background:radial-gradient(260px circle at var(--mx) var(--my),rgba(255,255,255,.75),transparent 62%)} .acl-pt__blob--edge{inset:-7px -5px -3px -9px;background:none;box-shadow:none;border:1.5px solid rgba(0,180,216,.2);-webkit-backdrop-filter:none;backdrop-filter:none;animation-duration:20s;animation-direction:reverse;opacity:.85} .acl-pt__blob--edge::after{display:none} @keyframes aclPtMorph{ 0%,100%{border-radius:150px 190px 130px 110px/120px 140px 110px 90px} 33%{border-radius:180px 150px 150px 100px/140px 120px 120px 85px} 66%{border-radius:130px 200px 120px 120px/110px 150px 100px 95px} } /* arc + travelling light */ .acl-pt__arc{position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:visible;pointer-events:none;fill:none} .acl-pt__arc path{vector-effect:non-scaling-stroke;stroke-linecap:round} .acl-pt__arc .base{stroke:url(#aclxPtArc);stroke:var(--p-a);stroke-opacity:.7;stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s var(--p-ease) .35s} .acl-pt__card.is-in .acl-pt__arc .base,html:not(.acl-js) .acl-pt__arc .base{stroke-dashoffset:0} .acl-pt__arc .run{stroke:#e9fbff;stroke-width:2.6;stroke-dasharray:.1 1;stroke-dashoffset:1.1;filter:drop-shadow(0 0 5px #00b4d8);animation:aclPtRun 4.2s linear infinite} .acl-pt__card:nth-child(2) .acl-pt__arc .run{animation-delay:-1.4s} .acl-pt__card:nth-child(3) .acl-pt__arc .run{animation-delay:-2.8s} @keyframes aclPtRun{from{stroke-dashoffset:1.1}to{stroke-dashoffset:0}} .acl-pt__dot{position:absolute;z-index:2;left:84.5%;top:90%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%; background:radial-gradient(circle at 35% 35%,#bff4ff,var(--p-a) 60%,var(--p-b));box-shadow:0 0 0 4px rgba(0,180,216,.16),0 0 14px rgba(0,180,216,.8); opacity:0;scale:.3;transition:opacity .6s ease 1.7s,scale .6s var(--p-ease) 1.7s} .acl-pt__card.is-in .acl-pt__dot,html:not(.acl-js) .acl-pt__dot{opacity:1;scale:1} .acl-pt__dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid rgba(0,180,216,.6);animation:aclUPing 2.6s ease-out infinite} /* icon + number */ .acl-pt__top{display:flex;align-items:center;gap:clamp(.9rem,1.6vw,1.4rem);margin:0 0 clamp(1.2rem,2vw,1.7rem) clamp(-1.6rem,-1.6vw,-.6rem)} .acl-pt__ico{position:relative;flex:none;display:grid;place-items:center;width:clamp(80px,7vw,104px);aspect-ratio:1;border-radius:50%; background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.95); box-shadow:0 22px 40px -22px rgba(26,77,143,.6),inset 0 0 0 1px rgba(0,180,216,.12); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .acl-pt__ico::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid transparent;border-top-color:var(--p-a);border-right-color:rgba(0,180,216,.35);animation:aclSpin 5s linear infinite;opacity:.9} .acl-pt__ico>i{position:relative;display:grid;place-items:center;width:80%;aspect-ratio:1;border-radius:50%;color:#fff; background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.45),transparent 42%),linear-gradient(140deg,#22c6e8 0%,#0096c7 45%,#1a4d8f 100%); box-shadow:0 14px 26px -10px rgba(0,150,199,.8),inset 0 -6px 14px rgba(11,42,74,.25); transition:transform .7s var(--p-ease)} .acl-pt__ico svg{width:50%;height:50%;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .acl-pt__ico .sp{stroke-width:2;stroke-dasharray:1.2 2;animation:aclPtSp 1.8s linear infinite} @keyframes aclPtSp{to{stroke-dashoffset:-6.4}} .acl-pt__ico .run{animation:aclPtBob .9s ease-in-out infinite alternate} .acl-pt__ico .ln{animation:aclURay 1.2s ease-in-out infinite} @keyframes aclPtBob{from{translate:0 0}to{translate:1px -1.4px}} .acl-pt__ico .pat{stroke-width:1.4} .acl-pt__ico .lig{stroke:#bff4ff;stroke-width:2.4;animation:aclULig 2.4s ease-in-out infinite} .acl-pt__no{position:relative;display:inline-block;font:italic 600 clamp(3rem,2.2rem + 2.2vw,4.6rem)/1 var(--ff-h);letter-spacing:-.02em;font-variant-numeric:lining-nums; background:linear-gradient(130deg,var(--p-a) 0%,#0a8fc7 45%,var(--p-b) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:.08em} .acl-pt__no::after{content:"";position:absolute;left:.06em;bottom:-.42em;width:2rem;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--p-a),var(--p-b));transition:width .6s var(--p-ease)} .acl-pt__t{margin:0 0 .6rem;font:600 clamp(1.18rem,1rem + .55vw,1.48rem)/1.3 var(--ff-h);color:var(--p-ink);text-wrap:balance;transition:color .5s ease} .acl-pt__card p{margin:0;font-size:.98rem;line-height:1.75;color:var(--p-muted);max-width:36ch} @media (hover:hover){ .acl-pt__card:hover{transform:translateY(-8px)} .acl-pt__card:hover .acl-pt__blob{box-shadow:0 54px 80px -44px rgba(0,180,216,.55),inset 0 2px 0 rgba(255,255,255,.95),inset 0 -30px 50px -26px rgba(0,180,216,.36)} .acl-pt__card:hover .acl-pt__blob::after{opacity:1} .acl-pt__card:hover .acl-pt__blob--edge{border-color:rgba(0,180,216,.45)} .acl-pt__card:hover .acl-pt__ico>i{transform:rotate(-8deg) scale(1.06)} .acl-pt__card:hover .acl-pt__ico::before{animation-duration:1.6s} .acl-pt__card:hover .acl-pt__no::after{width:3.6rem} .acl-pt__card:hover .acl-pt__t{color:var(--p-b)} .acl-pt__card:hover .acl-pt__arc .run{animation-duration:1.8s} } .acl-pt.is-off *{animation-play-state:paused} @media (max-width:1199px){ .acl-pt__card{padding-left:2.5rem;padding-right:2rem;padding-bottom:5rem} .acl-pt__top{margin-left:-1.3rem} } @media (max-width:999px){ .acl-pt__head{grid-template-columns:1fr;gap:1.4rem} .acl-pt__title{max-width:20ch} .acl-pt__grid{grid-template-columns:1fr;gap:clamp(1.5rem,4vw,2.25rem);width:min(100%,640px);margin-inline:auto} .acl-pt__card{min-height:0;padding:2rem clamp(2.4rem,6.5vw,3.2rem) 3.8rem} .acl-pt__top{margin:0 0 1.3rem -.4rem} .acl-pt__card p{max-width:46ch} } @media (max-width:599px){ .acl-pt__card{padding:1.8rem 1.9rem 3.4rem 2.1rem} .acl-pt__top{margin:0 0 1.2rem -.6rem} .acl-pt__ico{width:76px} .acl-pt__no{font-size:2.9rem} .acl-pt__blob,.acl-pt__blob--edge{animation-name:aclPtMorphM} .acl-pt__blob{border-radius:90px 110px 70px 90px/80px 90px 70px 80px} } @keyframes aclPtMorphM{ 0%,100%{border-radius:90px 110px 70px 90px/80px 90px 70px 80px} 50%{border-radius:110px 90px 90px 70px/90px 80px 80px 70px} } @media (prefers-reduced-motion:reduce){ .acl-pt *,.acl-pt *::before,.acl-pt *::after{animation:none!important} .acl-pt__arc .base{transition:none;stroke-dashoffset:0} .acl-pt__dot{transition:none;opacity:1;scale:1} } /* ---------- Integrated Manual Therapy (dark): glowing checks, icon pathway, glass price panel ---------- */ .acl-ap{ --a:#00b4d8;--b:#1a4d8f;--lc:#6fd8f2;--g:clamp(1.5rem,3.2vw,3.25rem);--ap-ease:cubic-bezier(.22,1,.36,1); overflow:hidden;isolation:isolate;color:#fff; background: radial-gradient(1100px 620px at 92% -8%,rgba(0,180,216,.26),transparent 62%), radial-gradient(900px 700px at -6% 104%,rgba(0,150,230,.28),transparent 60%), linear-gradient(165deg,#041b3a 0%,#072c59 40%,#0a3d78 75%,#0b4a90 100%); } .acl-ap__bg{position:absolute;inset:0;z-index:0;pointer-events:none} .acl-ap__glow{position:absolute;border-radius:50%;filter:blur(12px)} .acl-ap__glow--a{width:520px;height:520px;right:-120px;top:-180px;background:radial-gradient(circle,rgba(0,180,216,.28),transparent 65%);animation:aclUFloat 14s ease-in-out infinite} .acl-ap__glow--b{width:640px;height:640px;left:-260px;bottom:-200px;background:radial-gradient(circle,rgba(0,140,230,.3),transparent 65%);animation:aclUFloat 17s ease-in-out -6s infinite reverse} .acl-ap__glow--c{width:420px;height:420px;left:40%;top:38%;background:radial-gradient(circle,rgba(26,77,143,.35),transparent 65%);animation:aclUFloat 19s ease-in-out -3s infinite} .acl-ap__streaks{position:absolute;inset:0;width:100%;height:100%} .acl-ap__streaks path{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:420 900;animation:aclApStreak 9s linear infinite} .acl-ap__streaks .k2{animation-delay:-3s;stroke-width:1} .acl-ap__streaks .k3{animation-delay:-5s} .acl-ap__streaks .k4{animation-delay:-1.5s;stroke-width:1} .acl-ap__streaks .k5{animation-delay:-6.5s;stroke-width:1.2} @keyframes aclApStreak{from{stroke-dashoffset:1320}to{stroke-dashoffset:0}} /* head */ .acl-ap__head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:1.5rem clamp(2rem,6vw,6rem);align-items:center;margin-bottom:clamp(3rem,6vw,5rem)} .acl-ap__eyebrow{color:var(--lc);letter-spacing:.26em} .acl-ap__eyebrow::before{background:linear-gradient(90deg,var(--a),var(--lc))} .acl-ap__title{color:#fff;line-height:1.08;font-weight:700} .acl-ap__brand{font-style:italic;font-weight:600;color:var(--lc)} .acl-ap__brand .wi{background:linear-gradient(120deg,#9ff0ff 0%,var(--a) 55%,#3aa0e8 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:.1em} .acl-ap__intro{position:relative;margin:0;padding:.2rem 0 .2rem clamp(1.1rem,2vw,1.6rem);font-size:1rem;line-height:1.85;color:rgba(255,255,255,.76);max-width:54ch} .acl-ap__intro::before{content:"";position:absolute;left:0;top:.3rem;bottom:.3rem;width:2px;border-radius:2px;background:linear-gradient(var(--lc),var(--a) 50%,rgba(0,180,216,.1));box-shadow:0 0 12px rgba(0,180,216,.6)} /* six checks */ .acl-ap__checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(2.25rem,4vw,3.25rem) var(--g)} .acl-ap__check{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1rem,1.6vw,1.4rem);align-items:start} .acl-ap__ico{position:relative;display:grid;place-items:center;width:clamp(68px,6vw,84px);aspect-ratio:1;border-radius:50%; background:radial-gradient(circle at 34% 28%,rgba(111,216,242,.38),transparent 52%),radial-gradient(circle,#0c4c92 0%,#072a57 72%); box-shadow:0 0 0 1.5px rgba(111,216,242,.6),0 0 24px rgba(0,180,216,.42),inset 0 0 18px rgba(0,180,216,.35); transition:box-shadow .6s ease,transform .6s var(--ap-ease)} .acl-ap__ico::before{content:"";position:absolute;inset:-7px;border-radius:50%; background:conic-gradient(from 0deg,transparent 0 62%,rgba(111,216,242,.15) 70%,#9ff0ff 86%,transparent 100%); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px)); animation:aclSpin 4.5s linear infinite} .acl-ap__ico::after{content:"";position:absolute;inset:0;border-radius:50%;animation:aclApPing 3.2s ease-out infinite} .acl-ap__check:nth-child(2) .acl-ap__ico::after{animation-delay:-.5s}.acl-ap__check:nth-child(3) .acl-ap__ico::after{animation-delay:-1s} .acl-ap__check:nth-child(4) .acl-ap__ico::after{animation-delay:-1.5s}.acl-ap__check:nth-child(5) .acl-ap__ico::after{animation-delay:-2s}.acl-ap__check:nth-child(6) .acl-ap__ico::after{animation-delay:-2.5s} @keyframes aclApPing{0%{box-shadow:0 0 0 0 rgba(0,180,216,.45)}75%,100%{box-shadow:0 0 0 16px rgba(0,180,216,0)}} .acl-ap__ico>i{display:grid;place-items:center;width:100%;height:100%;color:#fff} .acl-ap__ico svg{width:46%;height:46%;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(111,216,242,.6))} .acl-ap__ico .lig{stroke:#9ff0ff;stroke-width:2.4;animation:aclULig 2.4s ease-in-out infinite} .acl-ap__ico rect{transform-box:fill-box;transform-origin:50% 100%;animation:aclApBar 2.6s ease-in-out infinite} .acl-ap__ico .bar2{animation-delay:.25s}.acl-ap__ico .bar3{animation-delay:.5s} @keyframes aclApBar{0%,100%{scale:1 1}50%{scale:1 .7}} .acl-ap__ico .sway{transform-box:fill-box;transform-origin:50% 100%;animation:aclApSway 3s ease-in-out infinite} @keyframes aclApSway{0%,100%{rotate:-4deg}50%{rotate:4deg}} .acl-ap__ico .run{animation:aclPtBob .8s ease-in-out infinite alternate} .acl-ap__ico .tick{stroke:#9ff0ff;stroke-dasharray:1;stroke-dashoffset:1;animation:aclApTick 3s ease-in-out infinite} @keyframes aclApTick{0%,15%{stroke-dashoffset:1}45%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:1}} .acl-ap__txt{min-width:0} .acl-ap__no{position:relative;display:flex;align-items:center;gap:.5rem;margin:.35rem 0 .75rem;font:700 .95rem/1 var(--ff-b);letter-spacing:.06em;color:var(--lc)} .acl-ap__no::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--lc);box-shadow:0 0 8px var(--a)} .acl-ap__flow{position:absolute;left:3.4rem;right:calc(var(--g)*-1 + 6px);top:-1px;height:48px;overflow:visible;pointer-events:none;fill:none} .acl-ap__flow path{vector-effect:non-scaling-stroke;stroke-linecap:round} .acl-ap__flow .b{stroke:rgba(111,216,242,.42);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ap-ease) calc(.35s + var(--i,0)*.12s)} .acl-ap__check.is-in .acl-ap__flow .b,html:not(.acl-js) .acl-ap__flow .b{stroke-dashoffset:0} .acl-ap__flow .r{stroke:#bff4ff;stroke-width:2;stroke-dasharray:.1 1;stroke-dashoffset:1.1;filter:drop-shadow(0 0 4px #00b4d8);animation:aclPtRun 3.6s linear infinite;animation-delay:calc(var(--i,0)*-.6s)} .acl-ap__check:nth-child(3n) .acl-ap__flow{right:0;-webkit-mask:linear-gradient(90deg,#000 55%,transparent);mask:linear-gradient(90deg,#000 55%,transparent)} .acl-ap__t{margin:0 0 .5rem;font:600 clamp(1.18rem,1rem + .5vw,1.42rem)/1.3 var(--ff-h);color:#fff;transition:color .5s ease} .acl-ap__check p{margin:0;font-size:.95rem;line-height:1.7;color:rgba(255,255,255,.72);max-width:34ch} @media (hover:hover){ .acl-ap__check:hover .acl-ap__ico{transform:scale(1.07);box-shadow:0 0 0 1.5px #9ff0ff,0 0 40px rgba(0,180,216,.7),inset 0 0 22px rgba(0,180,216,.5)} .acl-ap__check:hover .acl-ap__ico::before{animation-duration:1.4s} .acl-ap__check:hover .acl-ap__t{color:var(--lc)} .acl-ap__check:hover .acl-ap__flow .r{animation-duration:1.4s} } /* recovery pathway (scroll driven: --p and .is-on come from the page script) */ .acl-ap__path{--p:0;--nd:clamp(44px,3.6vw,52px);position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 clamp(.8rem,1.8vw,1.6rem);list-style:none;margin:clamp(3rem,6vw,4.5rem) 0 clamp(3.5rem,7vw,5.5rem);padding:clamp(1.6rem,3vw,2.4rem) 0 0;border-top:1px solid rgba(111,216,242,.14)} .acl-ap__path::before,.acl-ap__path::after{content:"";position:absolute;left:calc(var(--nd)/2);right:14px;top:calc(clamp(1.6rem,3vw,2.4rem) + var(--nd)/2);height:2px;margin-top:-1px;border-radius:2px} .acl-ap__path::before{background:linear-gradient(90deg,rgba(111,216,242,.35),rgba(111,216,242,.18))} .acl-ap__path::after{background:linear-gradient(90deg,var(--b),var(--a) 60%,#9ff0ff);transform-origin:0 50%;transform:scaleX(var(--p));box-shadow:0 0 14px rgba(0,180,216,.85)} .acl-ap__path li{position:relative;z-index:1;min-width:0} .acl-ap__path li:not(:first-child)::before{content:"";position:absolute;left:-.7rem;top:calc(var(--nd)/2);width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#2a6db5;box-shadow:0 0 0 3px rgba(0,180,216,.12);transition:background .6s ease,box-shadow .6s ease} .acl-ap__path li.is-on:not(:first-child)::before{background:#9ff0ff;box-shadow:0 0 0 3px rgba(0,180,216,.25),0 0 10px #00b4d8} .acl-ap__path li:last-child::after{content:"";position:absolute;right:-2px;top:calc(var(--nd)/2);width:9px;height:9px;margin-top:-5px;border-top:2px solid rgba(111,216,242,.7);border-right:2px solid rgba(111,216,242,.7);rotate:45deg} .acl-ap__node{position:relative;display:grid;place-items:center;width:var(--nd);aspect-ratio:1;border-radius:50%;margin-bottom:1.15rem;color:#fff; background:radial-gradient(circle,#0c4c92 0%,#072a57 75%);box-shadow:0 0 0 1.5px rgba(111,216,242,.5),0 0 16px rgba(0,180,216,.3); transition:background .6s ease,box-shadow .6s ease,transform .6s var(--ap-ease)} .acl-ap__node svg{width:48%;height:48%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .acl-ap__node .core{fill:currentColor;stroke:none} .acl-ap__path li.is-on .acl-ap__node{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.35),transparent 50%),linear-gradient(140deg,#22c6e8,#0096c7 50%,#1a4d8f);box-shadow:0 0 0 1.5px #9ff0ff,0 0 0 6px rgba(0,180,216,.14),0 0 26px rgba(0,180,216,.7);transform:scale(1.06)} .acl-ap__path b{display:block;margin-bottom:.35rem;font:700 .68rem/1 var(--ff-b);letter-spacing:.2em;color:var(--lc);opacity:.6;transition:opacity .6s ease} .acl-ap__path strong{display:block;margin-bottom:.4rem;font:600 clamp(1rem,.9rem + .3vw,1.12rem)/1.3 var(--ff-h);color:#fff;opacity:.6;transition:opacity .6s ease} .acl-ap__path p{margin:0;font-size:.86rem;line-height:1.6;color:rgba(255,255,255,.66);opacity:.7;transition:opacity .6s ease} .acl-ap__path li.is-on b,.acl-ap__path li.is-on strong,.acl-ap__path li.is-on p{opacity:1} /* bottom: clinical direction + first visit */ .acl-ap__bottom{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(2rem,5vw,4.5rem);align-items:center} .acl-ap__dirt{margin:0;color:#fff;letter-spacing:-.01em;max-width:13.5em} .acl-ap__dirt em{display:block;font-style:italic;font-weight:600;background:linear-gradient(110deg,#9ff0ff 0%,var(--a) 50%,#3aa0e8 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:.1em} .acl-ap__rule{display:block;width:52px;height:3px;margin:1.5rem 0 1.4rem;border-radius:3px;background:linear-gradient(90deg,var(--a),var(--lc));box-shadow:0 0 12px rgba(0,180,216,.7)} .acl-ap__dir>p{margin:0 0 1.8rem;font-size:1rem;line-height:1.8;color:rgba(255,255,255,.78);max-width:56ch} .acl-ap__chips{display:flex;flex-wrap:wrap;gap:.65rem} .acl-ap__chips span{padding:.6rem 1.15rem;border-radius:999px;font-size:.8rem;font-weight:500;color:rgba(255,255,255,.9); background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid rgba(111,216,242,.32); box-shadow:inset 0 1px 0 rgba(255,255,255,.08);transition:background .4s ease,border-color .4s ease,transform .4s var(--ap-ease),box-shadow .4s ease} @media (hover:hover){.acl-ap__chips span:hover{background:linear-gradient(135deg,var(--a),var(--b));border-color:transparent;transform:translateY(-2px);box-shadow:0 10px 22px -10px rgba(0,180,216,.8)}} .acl-ap__visit{position:relative;filter:drop-shadow(0 30px 50px rgba(2,16,38,.5)) drop-shadow(0 0 22px rgba(0,180,216,.28));transition:transform .7s var(--ap-ease)} .acl-js .acl-ap__visit[data-r]{transition:opacity .95s var(--ease) var(--rd),translate 1.15s var(--ease) var(--rd),transform .7s var(--ap-ease) 0s} .acl-ap__visit-bg{position:absolute;inset:0;border-radius:22px;overflow:hidden; background:radial-gradient(120% 80% at 100% 0%,#ffffff 0%,transparent 55%),linear-gradient(140deg,#f5fbff 0%,#e3f3fc 50%,#cbe8f8 100%); clip-path:polygon(9% 0,100% 0,100% 100%,0 100%)} .acl-ap__visit-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#9ff0ff,var(--a) 45%,var(--b));clip-path:polygon(9% 0,10.6% 0,1.6% 100%,0 100%)} .acl-ap__visit-bg::after{content:"";position:absolute;inset:-30%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.7) 50%,transparent 58%);translate:-70% 0;animation:aclUSheen 7.5s var(--ease-io) 2s infinite} .acl-ap__visit-in{position:relative;padding:clamp(2rem,3.4vw,2.9rem) clamp(1.6rem,3vw,2.6rem) clamp(2rem,3.4vw,2.6rem) calc(10.6% + clamp(1.25rem,2.2vw,1.9rem))} .acl-ap__visit small{display:block;margin-bottom:.7rem;font:700 .7rem/1 var(--ff-b);letter-spacing:.24em;color:var(--b)} .acl-ap__price{font:800 clamp(3.2rem,2.3rem + 3.2vw,5rem)/1 var(--ff-h);letter-spacing:-.03em;font-variant-numeric:lining-nums;margin-bottom:.7rem; background:linear-gradient(120deg,#082b55 0%,var(--b) 50%,#0a7fc0 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:.08em} .acl-ap__vt{margin:0 0 1.2rem;font:500 1.06rem/1.45 var(--ff-b);color:#0b2a4a} .acl-ap__ticks{display:grid;gap:.75rem;margin:0 0 1.8rem;padding:0;list-style:none} .acl-ap__ticks li{position:relative;padding-left:2rem;font-size:.93rem;line-height:1.6;color:#33506b} .acl-ap__ticks li::before{content:"";position:absolute;left:0;top:.18rem;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 4px 10px -3px rgba(0,180,216,.7)} .acl-ap__ticks li::after{content:"";position:absolute;left:6.5px;top:calc(.18rem + 5px);width:5px;height:8.5px;border:solid #fff;border-width:0 2px 2px 0;rotate:45deg} .acl-ap__call{display:inline-flex;align-items:center;gap:.7rem;padding:.95rem 1.6rem .95rem 1.35rem;border-radius:999px;text-decoration:none; font:700 1rem/1 var(--ff-b);color:#fff!important;background:linear-gradient(135deg,#0b2f5e,#123f7a 55%,#1a4d8f); box-shadow:0 14px 30px -12px rgba(8,35,70,.8),inset 0 1px 0 rgba(255,255,255,.15);transition:transform .4s var(--ap-ease),box-shadow .4s ease,background .4s ease} .acl-ap__call svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round} .acl-ap__call em{font-style:normal;margin-left:.6rem;color:var(--lc);transition:translate .4s var(--ap-ease)} @media (hover:hover){ .acl-ap__visit:hover{transform:translateY(-6px)} .acl-ap__call:hover{transform:translateY(-2px);background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 18px 34px -12px rgba(0,180,216,.75)} .acl-ap__call:hover em{translate:4px 0;color:#fff} } .acl-ap.is-off *,.acl-ap.is-off *::before,.acl-ap.is-off *::after{animation-play-state:paused} @media (max-width:1199px){ .acl-ap__checks{grid-template-columns:repeat(2,minmax(0,1fr))} .acl-ap__check:nth-child(3n) .acl-ap__flow{right:calc(var(--g)*-1 + 6px);-webkit-mask:none;mask:none} .acl-ap__check:nth-child(2n) .acl-ap__flow{right:0;-webkit-mask:linear-gradient(90deg,#000 55%,transparent);mask:linear-gradient(90deg,#000 55%,transparent)} } @media (max-width:999px){ .acl-ap__head,.acl-ap__bottom{grid-template-columns:1fr} .acl-ap__title{max-width:20ch} .acl-ap__path{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:2.6rem} .acl-ap__path::before,.acl-ap__path::after{display:none} .acl-ap__path li::after{content:"";position:absolute;left:var(--nd);right:-.8rem;top:calc(var(--nd)/2);height:2px;margin-top:-1px;border:0;rotate:none;width:auto; background:rgba(111,216,242,.25);transition:background .6s ease} .acl-ap__path li.is-on::after{background:linear-gradient(90deg,#9ff0ff,var(--a));box-shadow:0 0 10px rgba(0,180,216,.7)} .acl-ap__path li:nth-child(3n)::after,.acl-ap__path li:last-child::after{display:none} .acl-ap__path li:not(:first-child)::before{display:none} .acl-ap__visit{max-width:620px} } @media (max-width:759px){ .acl-ap__checks{grid-template-columns:1fr;gap:2rem} .acl-ap__flow{display:none} .acl-ap__check p{max-width:none} .acl-ap__visit-bg,.acl-ap__visit-bg::before{clip-path:none} .acl-ap__visit-bg::before{inset:0 0 auto 0;height:4px} .acl-ap__visit-in{padding:2rem 1.5rem 2rem} } @media (max-width:599px){ .acl-ap__path{grid-template-columns:1fr;row-gap:0} .acl-ap__path li{display:grid;grid-template-columns:var(--nd) minmax(0,1fr);column-gap:1rem;padding-bottom:1.8rem} .acl-ap__node{grid-row:span 3;margin:0} .acl-ap__path li::after,.acl-ap__path li:nth-child(3n)::after{display:block;left:calc(var(--nd)/2);right:auto;top:var(--nd);bottom:0;width:2px;height:auto;margin:0 0 0 -1px} .acl-ap__path li:last-child::after{display:none} .acl-ap__path li.is-on::after{background:linear-gradient(180deg,#9ff0ff,var(--a))} .acl-ap__path b{margin-top:.35rem} .acl-ap__call{width:100%;justify-content:center} } @media (prefers-reduced-motion:reduce){ .acl-ap *,.acl-ap *::before,.acl-ap *::after{animation:none!important} .acl-ap__flow .b{transition:none;stroke-dashoffset:0} .acl-ap__ico .tick{stroke-dashoffset:0} } .apf-stars,.apf-stars *{color:#00b4d8!important} .acl-h1 em .wi{background:linear-gradient(135deg,var(--clr-accent),var(--clr-primary-lt)) no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:.1em} /* ---------- hero · cinematic full-bleed redesign (scoped to .acl-hero; same content, same fonts) ---------- */ .acl-hero{--hp:clamp(2.2rem,3.3vw,3.2rem);--ov:clamp(2.6rem,5vw,3.6rem);--bandh:clamp(250px,74vw,420px);--cardh:10.5rem; display:flex;align-items:center;min-height:clamp(470px,34vw,600px); background:linear-gradient(90deg,#020b31 0%,#011250 50%,#012a8a 100%);color:#fff} .acl-hero .acl-physio,.acl-hero .acl-ring,.acl-hero .acl-hero__lines,.acl-hero .acl-hero__grain, .acl-hero .acl-instr,.acl-hero .acl-subdial,.acl-hero .acl-scan,.acl-hero .acl-arch__frame{display:none!important} .acl-hero .acl-hero__spot{background:radial-gradient(640px circle at var(--sx,78%) var(--sy,40%),rgba(70,140,255,.14),transparent 62%)} .acl-js .acl-hero .acl-hero__visual{margin-top:0} /* the photo becomes the hero background; badge + card position against the hero itself */ .acl-hero .acl-hero__visual{position:static;padding:0;margin:0;width:auto} .acl-js .acl-hero .acl-hero__visual{opacity:1!important;translate:none!important;scale:none!important;rotate:none!important;transition:none} .acl-hero .acl-arch{position:absolute;inset:0;z-index:0;aspect-ratio:auto;translate:none!important} .acl-hero .acl-arch__img{position:absolute;inset:0;border-radius:0;box-shadow:none;background:transparent} .acl-hero .acl-arch__img img{width:100%;height:100%;object-fit:cover;object-position:100% 40%;scale:1;animation:none} .acl-hero .acl-arch__img::after{background:linear-gradient(90deg,rgba(2,11,49,.7) 0%,rgba(2,11,49,.25) 42%,transparent 62%),linear-gradient(180deg,transparent 78%,rgba(2,11,49,.55))} .acl-hero .acl-hero__grid{position:static;width:min(1200px,100% - var(--gut)*2);grid-template-columns:minmax(0,1fr);gap:0} .acl-hero .acl-hero__copy{position:relative;z-index:3;max-width:min(680px,57%)} .acl-hero .acl-kicker{margin-bottom:1rem;max-width:none;font-size:.66rem;letter-spacing:.17em;line-height:1.7;color:#8fe3f7;align-items:flex-start} .acl-hero .acl-kicker i{margin-top:.8em;width:2.8rem} .acl-hero .acl-h1{font-size:clamp(2.1rem,.8rem + 2.6vw,3.2rem);letter-spacing:-.022em;font-weight:600;max-width:none;margin-bottom:1rem} .acl-hero .acl-lead{max-width:58ch;font-size:clamp(.96rem,.92rem + .2vw,1.06rem);line-height:1.65;color:rgba(255,255,255,.86);margin-bottom:1.4rem} .acl-hero .acl-actions{gap:.8rem 1rem;margin-bottom:1.5rem} .acl-hero .acl-actions .acl-btn--gold{padding:.95rem 1.6rem;box-shadow:0 22px 46px -16px rgba(0,190,230,.7),inset 0 1px 0 rgba(255,255,255,.35)} .acl-hero .acl-actions .acl-btn--ghost{padding:.95rem 1.4rem;background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .acl-hero .acl-proof{position:relative;flex-wrap:nowrap;align-items:center;gap:0;padding-top:1.2rem;border-top:0} .acl-hero .acl-proof::before{content:"";position:absolute;left:0;top:0;width:min(100%,420px);height:1px;background:linear-gradient(90deg,rgba(143,227,247,.8),rgba(255,255,255,.1) 75%,transparent)} .acl-hero .acl-proof li{position:relative;border-left:0;padding:0 clamp(1rem,2.2vw,2rem)} .acl-hero .acl-proof li:first-child{padding-left:0} .acl-hero .acl-proof li+li:not(.acl-proof__loc)::before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;background:rgba(255,255,255,.18)} .acl-hero .acl-proof strong{font-weight:500;font-size:clamp(1.4rem,1rem + .9vw,1.85rem)} .acl-hero .acl-proof span{font-size:.65rem;letter-spacing:.17em;color:rgba(255,255,255,.62);white-space:nowrap} .acl-hero .acl-proof__loc{flex:none!important;padding:0 0 0 clamp(1rem,2.2vw,2rem)!important;border-left:0!important;position:relative} .acl-hero .acl-proof__loc::before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;background:rgba(255,255,255,.18)} .acl-hero .acl-proof__loc span{font-size:.65rem;letter-spacing:.2em} /* floating details sit over the photo, clear of the subject */ .acl-hero .acl-badge{left:auto;right:clamp(5.5rem,9vw,8rem);top:auto;bottom:calc(var(--ov) + 1rem);--depth:0;padding:.75rem 1.2rem .75rem 1rem;font-size:.66rem;letter-spacing:.15em;white-space:nowrap;background:rgba(3,16,70,.55);border-color:rgba(255,255,255,.22)} .acl-hero .acl-flowcard{display:block!important;left:auto;right:clamp(1rem,4vw,4rem);top:clamp(.8rem,1.5vw,1.3rem);bottom:auto;width:min(31%,340px);padding:1.05rem 1.2rem 1.1rem;border-radius:18px; background:rgba(3,16,70,.62);color:#fff;border:1px solid rgba(255,255,255,.2);box-shadow:0 30px 60px -26px rgba(0,0,0,.7);--depth:0;-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3)} .acl-hero .acl-flowcard small{color:#8fe3f7} .acl-hero .acl-flowcard strong{color:#fff;font-size:.95rem;margin-bottom:.85rem} .acl-hero .acl-flow span{color:rgba(255,255,255,.55)} .acl-hero .acl-flow span::before{background:rgba(255,255,255,.2)} .acl-hero .acl-flow span.is-on{color:#fff} .acl-hero .acl-flow span.is-on::before{background:linear-gradient(90deg,#00b4d8,#7fe7ff)} .acl-hero .acl-flow span.is-now::before{background:#fff;box-shadow:0 0 12px rgba(0,220,255,.9)} @media (max-width:1199px){ .acl-hero .acl-hero__copy{max-width:min(560px,50%)} .acl-hero .acl-flowcard{width:min(36%,340px)} } /* tablet + phone: centred copy, photo becomes a band beneath */ @media (max-width:1139px){ .acl-hero{display:block;min-height:0;padding:var(--hp) 0 calc(var(--bandh) + var(--cardh) + var(--ov) + 3.8rem);background:linear-gradient(180deg,#020b31 0%,#011250 100%)} .acl-hero .acl-hero__grid{display:block;width:min(680px,100% - var(--gut)*2);margin-inline:auto;text-align:center} .acl-hero .acl-hero__copy{max-width:none;display:flex;flex-direction:column;align-items:center} .acl-hero .acl-kicker{justify-content:center;text-align:center;align-items:center;max-width:44ch} .acl-hero .acl-kicker i{display:none} .acl-hero .acl-h1{font-size:clamp(2.1rem,6.4vw,3.2rem)} .acl-hero .acl-lead{margin-inline:auto;max-width:52ch} .acl-hero .acl-actions{justify-content:center;width:100%} .acl-hero .acl-proof{justify-content:center;width:100%} .acl-hero .acl-proof::before{left:50%;translate:-50% 0;width:min(100%,320px);background:linear-gradient(90deg,transparent,rgba(143,227,247,.8),transparent)} .acl-hero .acl-proof li:first-child{padding-left:clamp(1rem,2.2vw,2rem)} .acl-hero .acl-proof__loc{justify-content:center} .acl-hero .acl-arch{inset:auto 0 calc(var(--cardh) + var(--ov) + .6rem) 0;height:var(--bandh)} .acl-hero .acl-arch__img img{object-position:84% 60%} .acl-hero .acl-badge{top:auto;bottom:calc(var(--cardh) + var(--ov) + var(--bandh) - .2rem);left:0;right:0;width:fit-content;margin-inline:auto;z-index:3} .acl-hero .acl-flowcard{left:0;right:0;top:auto;bottom:calc(var(--ov) + .5rem);width:min(560px,100% - var(--gut)*2);margin-inline:auto} } @media (min-width:1140px) and (max-width:1279px){ .acl-hero .acl-proof{flex-wrap:wrap} .acl-hero .acl-proof__loc{flex:1 1 100%!important;padding:.7rem 0 0!important} .acl-hero .acl-proof__loc::before{display:none} } @media (min-width:760px) and (max-width:1139px){ .acl-hero{--cardh:1rem} .acl-hero .acl-flowcard{left:var(--gut);right:auto;margin-inline:0;width:min(42%,380px);bottom:calc(var(--ov) + 3rem)} } @media (max-width:759px){ .acl-hero{--hp:2.4rem} .acl-hero .acl-kicker{font-size:.62rem;letter-spacing:.14em;margin-bottom:1.1rem} .acl-hero .acl-h1{font-size:clamp(2.05rem,9.2vw,2.7rem);max-width:none} .acl-hero .acl-lead{margin-bottom:1.7rem} .acl-hero .acl-actions{margin-bottom:2rem} .acl-hero .acl-proof{display:grid;grid-template-columns:repeat(3,auto);justify-content:center} .acl-hero .acl-proof li{padding:0 .8rem} .acl-hero .acl-proof li:first-child{padding-left:.8rem} .acl-hero .acl-proof strong{font-size:1.4rem} .acl-hero .acl-proof span{font-size:.55rem;letter-spacing:.1em} .acl-hero .acl-proof{flex-wrap:wrap} .acl-hero .acl-proof__loc{grid-column:1/-1;justify-content:center;padding:.7rem 0 0!important} .acl-hero .acl-proof__loc::before{display:none} .acl-hero .acl-badge{font-size:.58rem;padding:.6rem .9rem .6rem .8rem;letter-spacing:.1em} .acl-hero .acl-flowcard{padding:.95rem 1rem 1rem} .acl-hero .acl-flowcard strong{font-size:.9rem} } @media (max-width:380px){.acl-hero .acl-proof li{padding:0 .55rem}.acl-hero .acl-proof li:first-child{padding-left:.55rem}.acl-hero .acl-proof span{font-size:.5rem}} /* hero · very wide desktops: keep the photo whole instead of zooming it; it anchors right and melts into the navy on its left */ @media (min-width:1600px){ .acl-hero{min-height:calc(min(100vw,1850px)/2.28);background:linear-gradient(90deg,#020b31 0%,#020d3c 100%)} .acl-hero .acl-arch{left:auto;width:min(100%,1650px)} .acl-hero .acl-arch__img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%);mask-image:linear-gradient(90deg,transparent 0,#000 16%)} .acl-hero .acl-arch__img img{object-position:100% 50%} } /* ---------- "Does this feel familiar?" cards · interactive line effects on hover ---------- The top bar (::before) draws first, then the right, bottom and left edges follow it round the card, a fine grid of lines lights up around the pointer, a single light line sweeps across, and a short rule draws under the title. Mouse only; on leave everything retracts. */ .acl-fit__card{--mx:82%;--my:14%} .acl-fit__lines{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;overflow:hidden} .acl-fit__lines i{position:absolute;display:block;transition:transform .38s var(--fit-ease) 0s} .acl-fit__lines i:nth-child(1){top:0;right:0;width:2px;height:100%;background:linear-gradient(180deg,var(--fit-primary),var(--fit-accent));transform:scaleY(0);transform-origin:top} .acl-fit__lines i:nth-child(2){left:0;bottom:0;width:100%;height:2px;background:linear-gradient(270deg,var(--fit-accent),var(--fit-primary));transform:scaleX(0);transform-origin:right} .acl-fit__lines i:nth-child(3){left:0;top:0;width:2px;height:100%;background:linear-gradient(0deg,var(--fit-primary),var(--fit-accent));transform:scaleY(0);transform-origin:bottom} .acl-fit__lines::before{ content:"";position:absolute;inset:0;opacity:0;transition:opacity .45s ease; background-image:linear-gradient(rgba(0,150,199,.24) 1px,transparent 1px),linear-gradient(90deg,rgba(0,150,199,.24) 1px,transparent 1px); background-size:20px 20px;background-position:-1px -1px; -webkit-mask-image:radial-gradient(150px circle at var(--mx) var(--my),#000 0%,rgba(0,0,0,.5) 42%,transparent 72%); mask-image:radial-gradient(150px circle at var(--mx) var(--my),#000 0%,rgba(0,0,0,.5) 42%,transparent 72%); } .acl-fit__lines::after{ content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:40%;opacity:0; background:linear-gradient(100deg,transparent 46%,rgba(0,180,216,.34) 50%,transparent 54%); transform:translateX(-130%);transition:transform 0s,opacity .2s ease; } .acl-fit__title::after{content:"";display:block;width:0;height:2px;margin-top:.45rem;border-radius:2px;background:linear-gradient(90deg,var(--fit-accent),var(--fit-primary));transition:width .5s var(--fit-ease) .1s} @media (hover:hover){ .acl-fit__card:hover .acl-fit__lines i{transform:none} .acl-fit__card:hover .acl-fit__lines i:nth-child(1){transition-delay:.3s} .acl-fit__card:hover .acl-fit__lines i:nth-child(2){transition-delay:.62s} .acl-fit__card:hover .acl-fit__lines i:nth-child(3){transition-delay:.94s} .acl-fit__card:hover .acl-fit__lines::before{opacity:1} .acl-fit__card:hover .acl-fit__lines::after{opacity:1;transform:translateX(330%);transition:transform 1s var(--fit-ease) .08s,opacity .2s ease} .acl-fit__card:hover .acl-fit__title::after{width:46px} } @media (prefers-reduced-motion:reduce){ .acl-fit__lines::after{display:none} } /* ---------- condition pages · hero approach statement, kept as a quiet note under the stats ---------- */ .acl-approach-note{max-width:78ch;margin:clamp(1.5rem,3vw,2.3rem) auto 0;padding:0 .5rem;text-align:center;font-size:clamp(.95rem,.9rem + .2vw,1.04rem);line-height:1.75;color:var(--muted)} .acl-approach-note::before{content:"";display:block;width:2.6rem;height:2px;margin:0 auto 1rem;border-radius:2px;background:var(--grad)} .acl-approach-note b{color:var(--ink);font-weight:600} /* ---------- condition pages · landscape illustrations keep their own shape in the What/Why/How frame ---------- */ .acl-u__frame--wide{aspect-ratio:3/2} /* ========================================================================== Real review card · one patient review per page (includes/landing-review.php) Fixed-height card; the full review scrolls inside it with a blue-gradient scrollbar, so long reviews never stretch the section. ========================================================================== */ .acl-reviews:has(> .acl-review--real){grid-template-rows:minmax(0,1fr) auto} .acl-review--real{ justify-content:flex-start;gap:0;min-height:0;overflow:hidden; padding:clamp(1.35rem,2.2vw,1.9rem) clamp(1.3rem,2.2vw,1.9rem) clamp(1.1rem,1.8vw,1.45rem); box-shadow:0 30px 60px -42px rgba(7,46,74,.38); transition:box-shadow .5s ease,border-color .5s ease; } .acl-review--real::after{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,#00b4d8,#1a8fd0 55%,#1a4d8f)} @media (hover:hover){.acl-review--real:hover{border-color:rgba(0,180,216,.4);box-shadow:0 34px 64px -40px rgba(7,46,74,.45)}} .acl-review__top{display:flex;align-items:center;min-height:1.6rem;margin:0 0 .85rem;padding-right:3.6rem} .acl-review__stars{display:inline-flex;gap:.16em;letter-spacing:0;font-size:1.08rem;line-height:1} .acl-review__stars .is-off{color:rgba(7,46,74,.16)} .acl-review__body{ position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden; overscroll-behavior:contain;-webkit-overflow-scrolling:touch; padding:0 .85rem 0 0;margin-right:-.35rem;border-radius:10px;outline:none; } .acl-review__body:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(0,180,216,.55)} .acl-review--real blockquote{font-size:clamp(1.04rem,.97rem + .3vw,1.2rem);line-height:1.62;overflow-wrap:anywhere} .acl-review--real blockquote p{margin:0 0 .75em} .acl-review--real blockquote p:last-child{margin-bottom:0} /* soft fade at the bottom while there is more to read (scrollbar strip is left unfaded) */ .acl-review--real.is-scrollable:not(.is-end) .acl-review__body{ -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 2.4rem),transparent),linear-gradient(#000,#000); mask-image:linear-gradient(180deg,#000 calc(100% - 2.4rem),transparent),linear-gradient(#000,#000); -webkit-mask-size:calc(100% - 12px) 100%,12px 100%;mask-size:calc(100% - 12px) 100%,12px 100%; -webkit-mask-position:left top,right top;mask-position:left top,right top; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; } /* blue gradient scrollbar */ .acl-review__body::-webkit-scrollbar{width:6px} .acl-review__body::-webkit-scrollbar-track{background:linear-gradient(180deg,rgba(0,180,216,.1),rgba(26,77,143,.12));border-radius:99px} .acl-review__body::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#00b4d8 0%,#1a8fd0 55%,#1a4d8f 100%);border-radius:99px} .acl-review__body::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#1fc6e6 0%,#1580c2 55%,#0f3d78 100%)} @supports not selector(::-webkit-scrollbar){.acl-review__body{scrollbar-width:thin;scrollbar-color:#1a8fd0 rgba(0,180,216,.12)}} .acl-review__hint{ display:none;align-items:center;gap:.4rem;margin:.75rem 0 0; font:600 .66rem/1.2 var(--ff-b);letter-spacing:.14em;text-transform:uppercase;color:#1a8fd0; transition:opacity .35s ease,visibility .35s ease; } .acl-review__hint svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:aclReviewNudge 1.8s ease-in-out infinite} .acl-review--real.is-scrollable .acl-review__hint{display:flex} .acl-review--real.is-scrollable.is-end .acl-review__hint{opacity:0;visibility:hidden} @keyframes aclReviewNudge{0%,100%{transform:translateY(-1px)}50%{transform:translateY(3px)}} .acl-review__by{display:flex;align-items:center;gap:.8rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line)} .acl-review__avatar{ flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%; background:linear-gradient(135deg,#00b4d8,#1a4d8f);color:#fff;font:600 1.05rem/1 var(--ff-h); box-shadow:0 8px 18px -8px rgba(0,180,216,.65),0 0 0 3px #fff; } .acl-review__who{display:flex;flex-direction:column;gap:.25rem;min-width:0} .acl-review__who strong{font:800 1.05rem/1.3 var(--ff-b);color:var(--ink);letter-spacing:.005em;overflow-wrap:anywhere} .acl-review--real .acl-review__who small{font-size:.66rem;line-height:1.3} /* two-column layout: the card fills the height beside the video and the text scrolls */ @media (min-width:1000px){ .acl-review--real .acl-review__body{contain:size;min-height:clamp(10rem,12vw,12.5rem)} } /* stacked layout (tablet / phone): card hugs short reviews, long ones scroll */ @media (max-width:999px){ .acl-review--real .acl-review__body{max-height:clamp(10.5rem,42vh,16rem)} } @media (max-width:480px){ .acl-review--real{padding:1.25rem 1.1rem 1.1rem} .acl-review--real .acl-review__body{max-height:clamp(10rem,46vh,15rem)} .acl-review__top{padding-right:3rem} .acl-review__avatar{width:38px;height:38px;font-size:.95rem} } @media (prefers-reduced-motion:reduce){.acl-review__hint svg{animation:none}} /* Mobile (landing pages only): pain-check, chat and back-to-top as one small right-hand stack above the fixed Call / WhatsApp / Book Visit bar (82px tall). "body" prefix outranks the !important rules in footer-fab.css. */ @media (max-width:760px){ body .chatbot-launcher{left:auto!important;right:12px!important;bottom:calc(92px + env(safe-area-inset-bottom,0px))!important} body .chatbot-bubble{width:46px!important;height:46px!important} body .chatbot-bubble svg{width:22px;height:22px} body .scroll-top-btn{left:auto!important;right:15px!important;bottom:calc(148px + env(safe-area-inset-bottom,0px))!important;width:40px!important;height:40px!important} body .fab-stack{right:12px!important;bottom:calc(198px + env(safe-area-inset-bottom,0px))!important} body .fab-pain{width:46px!important;height:46px!important} } /* ---------- hero · client gradient background + condition photo card (landing pages only) ---------- hero-gradient.webp is the client's reference gradient (stretched to the hero box); the CSS gradient underneath is a close fallback while the image loads. */ .acl-hero{ --vh:calc(100vh - var(--lp-hdr-h,74px)); --ch:clamp(360px,min(34vw,var(--vh) - var(--hp)*2 - var(--ov) - 2.5rem),560px);--cw:calc(var(--ch)*.8); --cr:calc((100% - min(1200px,100% - var(--gut)*2))/2); --hero-em:#92deee; background:url(../images/landing-hero/hero-gradient.webp) 0 0/100% 100% no-repeat, linear-gradient(90deg,#5e7290 0%,#6c84a2 15%,#7692af 30%,#7d9fbb 44%,#84abca 59%,#8ab8d6 73%,#7fc0dc 88%,#84cae6 100%)} .acl-hero .acl-hero__spot{background:none} .acl-hero .acl-h1,.acl-hero .acl-lead,.acl-hero .acl-kicker,.acl-hero .acl-proof{text-shadow:0 1px 2px rgba(12,32,64,.28),0 0 22px rgba(12,32,64,.18)} .acl-hero .acl-kicker{color:#fff} .acl-hero .acl-lead{color:#fff} .acl-hero .acl-h1 em,.acl-hero .acl-h1 em .wi{background:none;color:var(--hero-em);-webkit-text-fill-color:var(--hero-em)} .acl-hero .acl-proof span{color:rgba(255,255,255,.9)} .acl-hero .acl-proof li+li:not(.acl-proof__loc)::before,.acl-hero .acl-proof__loc::before{background:rgba(255,255,255,.35)} .acl-hero .acl-proof__loc svg{stroke:#fff} .acl-hero .acl-actions .acl-btn--ghost{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.6)} /* desktop: photo as a rounded card on the right; the gradient shows all round it */ @media (min-width:1140px){ .acl-hero{min-height:max(var(--vh),calc(var(--ch) + var(--hp)*2 + var(--ov)))} .acl-hero .acl-hero__copy{max-width:min(660px,calc(100% - var(--cw) - 4.5rem))} .acl-hero .acl-arch{inset:auto;right:var(--cr);top:calc(50% - var(--ov)/2 - var(--ch)/2);width:var(--cw);height:var(--ch)} .acl-hero .acl-arch__img{border-radius:24px;overflow:hidden;box-shadow:0 34px 70px -28px rgba(10,30,62,.55),0 0 0 1px rgba(255,255,255,.35); -webkit-mask-image:none;mask-image:none} .acl-hero .acl-arch__img img{object-position:50% 50%} .acl-hero .acl-arch__img::after{background:linear-gradient(180deg,transparent 58%,rgba(8,28,58,.38))} .acl-hero .acl-badge{right:auto;left:calc(100% - var(--cr) - var(--cw) - 1.4rem);top:calc(50% - var(--ov)/2 - var(--ch)/2 + 1.4rem);bottom:auto} .acl-hero .acl-flowcard{right:auto;left:calc(100% - var(--cr) - var(--cw) - 2.4rem);top:auto;bottom:calc(50% + var(--ov)/2 - var(--ch)/2 - 1.2rem);width:max(calc(var(--cw) + .8rem),370px)} } @media (min-width:1600px){ .acl-hero{min-height:max(var(--vh),calc(var(--ch) + var(--hp)*2 + var(--ov)))} .acl-hero .acl-arch{left:auto;width:var(--cw)} } /* tablet + phone: the photo card sits under the copy */ @media (max-width:1139px){ .acl-hero{--bandh:clamp(300px,88vw,600px)} .acl-hero .acl-arch{left:max(var(--gut),calc((100% - 480px)/2));right:max(var(--gut),calc((100% - 480px)/2))} .acl-hero .acl-arch__img{border-radius:20px;overflow:hidden;box-shadow:0 30px 60px -28px rgba(10,30,62,.55),0 0 0 1px rgba(255,255,255,.35)} .acl-hero .acl-arch__img img{object-position:50% 45%} .acl-hero .acl-arch__img::after{background:linear-gradient(180deg,transparent 62%,rgba(8,28,58,.3))} } /* ---------- stat band · 5 stats: rating, reviews, first visit, booking advance, Integrated Manual Therapy™ ---------- */ .acl-stats__plate--5{grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.35fr)} .acl-stats__plate--5>div{padding:clamp(1.15rem,2vw,1.8rem) clamp(.6rem,1.2vw,1.3rem)} .acl-stats .acl-stats__plate--5 strong{display:flex;align-items:flex-end;justify-content:center;min-height:2.6rem} .acl-stats .acl-stats__plate--5 strong{font-size:clamp(1.35rem,.95rem + 1.1vw,2rem)} .acl-stats .acl-stats__plate--5 div>span{font-size:.64rem;letter-spacing:.12em;line-height:1.45} .acl-stats .acl-stats__plate--5 .acl-stats__imt strong{display:block;align-content:end;font-size:clamp(1rem,.86rem + .35vw,1.2rem);line-height:1.25;letter-spacing:0;font-variant-numeric:normal;text-wrap:balance} .acl-stats__imt sup{font-size:16px;line-height:0;vertical-align:.5em;margin-left:.06em;white-space:nowrap} @media (max-width:999px){ .acl-stats__plate--5{grid-template-columns:repeat(2,minmax(0,1fr))} .acl-stats__plate--5>div:nth-child(5){grid-column:1/-1} .acl-stats__plate--5>div:nth-child(5)::before{display:none} } @media (max-width:480px){ .acl-stats .acl-stats__plate--5 strong{font-size:1.4rem} .acl-stats .acl-stats__plate--5 .acl-stats__imt strong{font-size:1.05rem} .acl-stats .acl-stats__plate--5 div>span{font-size:.6rem;letter-spacing:.1em} } /* ---------- hero · full screen height (below the sticky header) on every device ---------- */ @supports (height:100svh){.acl-hero{--vh:calc(100svh - var(--lp-hdr-h,74px))}} @media (max-width:1139px){.acl-hero{min-height:var(--vh)}} /* desktop: heading size also follows the screen height, and the copy column is a little wider, so long headings wrap less and the hero fits one screen */ @media (min-width:1140px){ .acl-hero .acl-hero__copy{max-width:min(740px,calc(100% - var(--cw) - 4.5rem))} .acl-hero .acl-h1{font-size:clamp(2rem,min(.8rem + 2.6vw,.4rem + 4.6vh),3.2rem)} .acl-hero .acl-lead{max-width:68ch} .acl-hero{--hp:clamp(1.6rem,min(3.3vw,5vh),3.2rem)} } /* short laptop screens: tighten the hero so it still fits one screen */ @media (min-width:1140px) and (max-height:900px){ .acl-hero{--hp:clamp(1.3rem,3.2vh,2.4rem)} .acl-hero .acl-kicker{margin-bottom:.7rem} .acl-hero .acl-h1{font-size:clamp(2rem,.9rem + 3.1vh,2.6rem);margin-bottom:.75rem} .acl-hero .acl-lead{margin-bottom:1.05rem} .acl-hero .acl-actions{margin-bottom:1.05rem} } @media (min-width:1140px) and (max-height:760px){ .acl-hero{--hp:1.1rem} .acl-hero .acl-h1{font-size:clamp(1.85rem,.95rem + 3vh,2.3rem);line-height:1.4} .acl-hero .acl-lead{font-size:.95rem;line-height:1.55;margin-bottom:.9rem} .acl-hero .acl-actions{margin-bottom:.9rem} .acl-hero .acl-actions .acl-btn--gold,.acl-hero .acl-actions .acl-btn--ghost{padding-top:.8rem;padding-bottom:.8rem} } @media (min-width:1140px) and (max-height:900px){ .acl-hero .acl-hero__copy{max-width:min(740px,calc(100% - var(--cw) - 4.5rem))} } /* ---------- hero · first-visit fee box ---------- Styled like the hero WhatsApp button (white border, faint glass fill), white small text, two lines: 1) FIRST VISIT ₹2,000 · Reserve Your Appointment With ₹500 Advance 2) Adjusted Against Your ₹2,000 First-Visit Fee A small grid sizes the box to its longest line; the inner groups use display:contents so their items can sit in that grid (reading order unchanged). */ .fee-card{display:grid;grid-template-columns:auto auto auto;grid-template-areas:"lab pri head" "note note note"; align-items:baseline;column-gap:6px;row-gap:3px;width:fit-content;max-width:100%;margin-top:20px;padding:11px 16px; border-radius:16px;border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.14); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); color:#fff;font-size:13px;font-weight:500;line-height:1.45;text-align:left;text-shadow:0 1px 2px rgba(12,32,64,.3)} .fee-card *{color:#fff} .fee-card__total,.fee-card__advance{display:contents} .fee-card__advance p{margin:0;font-size:13px;line-height:1.45} /* style.css sets every

to 16px/30px */ .fee-card__label{grid-area:lab;font-weight:700;letter-spacing:.06em} .fee-card__price{grid-area:pri;font-size:20px;font-weight:700;line-height:1.2} .fee-card__adv-head{grid-area:head;font-weight:600} .fee-card__adv-head::before{content:"·";content:"·" / "";margin-right:6px;font-weight:700} .fee-card__adv-price{font-size:20px;font-weight:700;line-height:1.2} .fee-card__adv-note{grid-area:note} @media (max-width:1139px){ .acl-hero .fee-card{text-align:center;justify-content:center} } @media (max-width:759px){ /* phones: FIRST VISIT ₹2,000 / Reserve … ₹500 Advance / Adjusted …, centred */ .fee-card{grid-template-columns:auto auto;grid-template-areas:"lab pri" "head head" "note note";justify-content:center;row-gap:2px;padding:12px 16px} .fee-card__label{justify-self:end}.fee-card__price{justify-self:start} .fee-card__adv-head::before{display:none} } /* ---------- hero · tablet + phone: no card under the photo any more, so no space reserved for it ---------- */ @media (max-width:1139px){ .acl-hero{--cardh:0rem} } /* ---------- hero · desktop: photo sits a fixed gap after the text column (no wide empty gap); the text + photo pair is centred in the 1200px layout ---------- */ @media (min-width:1140px){ .acl-hero{--hg:clamp(2.5rem,4vw,4rem); --gw:min(1200px,100% - var(--gut)*2); --cpmax:660px;--cpw:min(var(--cpmax),var(--gw) - var(--cw) - var(--hg)); --pr:calc(var(--cr) + max(0px,(var(--gw) - var(--cpw) - var(--hg) - var(--cw))/2))} .acl-hero .acl-hero__copy{max-width:min(var(--cpmax),100% - var(--cw) - var(--hg)); margin-left:max(0px,(100% - min(var(--cpmax),100% - var(--cw) - var(--hg)) - var(--hg) - var(--cw))/2)} .acl-hero .acl-arch{right:var(--pr)} .acl-hero .acl-badge{left:calc(100% - var(--pr) - var(--cw) - 1.4rem)} } /* shorter laptop screens use smaller hero text, so the text column is narrower too */ @media (min-width:1140px) and (max-height:900px){ .acl-hero{--cpmax:650px} } /* ---------- phones / small devices (where the Call / WhatsApp / Book bar shows): no chatbot button on the landing pages; the pain-check and back-to-top buttons move down into its place ---------- */ @media (max-width:760px){ body .chatbot-launcher{display:none!important} body .scroll-top-btn{bottom:calc(92px + env(safe-area-inset-bottom,0px))!important} body .fab-stack{bottom:calc(142px + env(safe-area-inset-bottom,0px))!important} } /* stat band: "Integrated Manual Therapy™" in extra-bold */ .acl-stats .acl-stats__plate--5 .acl-stats__imt strong{font-weight:800} /* review card: source label with the Google "G" logo */ /* Google logo at the right end of the reviewer row */ .acl-review__glogo{margin-left:auto;flex:none;display:grid;place-items:center;width:54px;height:54px;border-radius:50%; background:#fff;box-shadow:0 6px 18px -6px rgba(14,47,90,.28),0 0 0 1px rgba(14,47,90,.08)} .acl-review__glogo svg{width:34px;height:34px;display:block} @media (max-width:480px){ .acl-review__glogo{width:46px;height:46px} .acl-review__glogo svg{width:30px;height:30px} } /* review card: five stars in Google-review gold (only these stars; --gold elsewhere is unchanged) */ .acl-review .acl-review__stars{color:#FBBC04} /* stat band: every stat value in extra-bold (800), matching "Integrated Manual Therapy™" */ .acl-stats .acl-stats__plate strong{font-weight:800} /* stat band: the star after 4.9 in Google-review gold (same as the review-card stars) */ .acl-stats .acl-star{color:#FBBC04} /* ---------- no reveal delay: boxes and text show at once (no fade / slide / stagger) ---------- */ .acl-js [data-r]{opacity:1!important;translate:none!important;scale:none!important} .acl-js [data-r="mask"]{clip-path:inset(0 0 0 0 round var(--r-lg))!important} .acl-js .acl-space[data-r="mask"]{clip-path:inset(0 0 -2rem 0)!important} .acl-js [data-r="mask"] img{scale:1!important} .acl-js [data-split] .wi{translate:none!important;rotate:none!important}