/* ═══════════════════════════════════════════════════════════════════════════ ACCESS SURGICAL NETWORK · GLOBAL DESIGN SYSTEM THE SINGLE SOURCE OF TRUTH FOR ALL SITE STYLING. INSTALL ONCE: Elementor → Site Settings (hamburger menu, top-left of the editor) → Custom CSS → paste this ENTIRE file → Update. It then applies to every page, plus the Theme Builder header and footer. ───────────────────────────────────────────────────────────────────────── THE TWO RULES THAT MAKE COLOUR BUGS IMPOSSIBLE: 1. Every section on a NAVY background MUST carry class asn-dark 2. Every LIGHT section on the HOMEPAGE MUST carry class asn-light (Inner pages are light by default. No class needed.) PAGE WRAPPER (required, first element of every page): Homepage:
Every other:
═══════════════════════════════════════════════════════════════════════════ */ /* ── FONTS ──────────────────────────────────────────────────────────────── FALLBACK ONLY. Do not rely on this line. An @import is ignored by the browser unless it comes before every style rule. Elementor generates its own stylesheet and can place this Custom CSS after its rules, and caching/minifying plugins can hoist or strip it. When that happens BOTH fonts silently fail to load and the entire site falls back to the system sans-serif, which reads as "the fonts changed a bit". Re-publishing any Theme Builder template (header or footer) regenerates Elementor's CSS, which is what makes the breakage appear. THE RELIABLE WAY, install once: paste 02-GLOBAL-ASSETS/access-fonts-head.html into Elementor -> Custom Code -> Add New -> Location: . That loads the fonts from the document head, where nothing can drop them. It is also faster: @import blocks, a does not. ─────────────────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600&display=swap'); @media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth;} } /* ═══════════════════════════════════════════ 1 · DESIGN TOKENS ═══════════════════════════════════════════ */ .asn-page, .asn-hd, .asn-ft{ --n-900:#061426; /* deepest navy · dark section backgrounds */ --n-800:#0b1f3d; /* THE brand navy */ --n-700:#0f2547; --n-600:#13294c; --ice-300:#DCEBF8; --ice-400:#A9CDEE; /* accents ON DARK backgrounds */ --ice-500:#6FA9DE; /* primary ice · buttons */ --ice-600:#3D78B8; /* accents/links ON LIGHT backgrounds */ --ice-700:#255C99; --ink:#122741; /* headings on light */ --ink-soft:#4A5F7E; /* body on light */ --soft:#BCCBDF; /* body on navy */ --soft-2:#8FA6C2; --line:rgba(111,169,222,.16); --line-strong:rgba(111,169,222,.34); --line-light:#E2ECF6; --bg-light:#F4F8FC; --grad-leaf:linear-gradient(120deg,#4A86C6 0%,#6FA9DE 45%,#A9CDEE 100%); --rad-lg:36px; --rad:28px; --rad-sm:16px; --wrap:1400px; /* content width. NEVER make this narrower. */ --font-d:'Montserrat',sans-serif; --font-b:'Plus Jakarta Sans',sans-serif; } /* ═══════════════════════════════════════════ 2 · PAGE BASE + THEME VARIANTS ═══════════════════════════════════════════ */ .asn-page{ font-family:var(--font-b); font-size:17px; line-height:1.75; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } .asn-page--home{ background:var(--n-800); color:var(--soft); } .asn-page--inner{ background:var(--bg-light); color:var(--ink-soft); } .asn-page *, .asn-page *::before, .asn-page *::after{ box-sizing:border-box; margin:0; padding:0; } .asn-page img{ display:block; max-width:100%; height:auto; } .asn-page a{ text-decoration:none; color:inherit; } .asn-page ul{ list-style:none; } .asn-page button{ background:none; border:none; font:inherit; color:inherit; cursor:pointer; } .asn-page ::selection{ background:#6FA9DE; color:#061426; } .asn-page a:focus-visible, .asn-page button:focus-visible{ outline:2px solid var(--ice-500); outline-offset:3px; border-radius:6px; } .asn-container{ max-width:var(--wrap); margin:0 auto; padding:0 48px; } /* ═══════════════════════════════════════════ 3 · TYPOGRAPHY ═══════════════════════════════════════════ */ .asn-h1{ font-family:var(--font-d); font-weight:300; line-height:1.15; } .asn-h2{ font-family:var(--font-d); font-weight:300; line-height:1.16; } .asn-h3{ font-family:var(--font-d); font-weight:600; line-height:1.3; letter-spacing:.01em; } .asn-lead{ line-height:1.8; } .asn-em{ font-weight:500; } /* heading accent span. NEVER italic. NEVER serif. */ .asn-page--home .asn-h1{ font-size:clamp(2.35rem,4.4vw,4.25rem); line-height:1.16; text-transform:uppercase; letter-spacing:.05em; } .asn-page--home .asn-h2{ font-size:clamp(2.1rem,3.6vw,3.4rem); } .asn-page--home .asn-h3{ font-size:clamp(1.25rem,1.6vw,1.55rem); } .asn-page--home .asn-lead{ font-size:clamp(1.05rem,1.35vw,1.25rem); } .asn-h1__strong{ font-weight:700; color:var(--ice-400); } .asn-page--inner .asn-h1{ font-size:clamp(2.1rem,3.6vw,3.15rem); } .asn-page--inner .asn-h2{ font-size:clamp(1.9rem,3.1vw,2.9rem); } .asn-page--inner .asn-h3{ font-size:clamp(1.2rem,1.5vw,1.45rem); } .asn-page--inner .asn-lead{ font-size:clamp(1.02rem,1.3vw,1.2rem); } /* ═══════════════════════════════════════════ 4 · THEME · THE ANTI-BUG LAYER ═══════════════════════════════════════════ */ .asn-page--home .asn-h1, .asn-page--home .asn-h2, .asn-page--home .asn-h3{ color:#fff; } .asn-page--home .asn-em{ color:var(--ice-400); } .asn-page--home .asn-lead{ color:var(--soft); } .asn-page--inner .asn-h2, .asn-page--inner .asn-h3{ color:var(--ink); } .asn-page--inner .asn-em{ color:var(--ice-600); } .asn-page--inner .asn-lead{ color:var(--ink-soft); } /* DARK sections · always light text */ .asn-page .asn-dark{ background:var(--n-900); color:var(--soft); } .asn-page .asn-dark .asn-h1, .asn-page .asn-dark .asn-h2, .asn-page .asn-dark .asn-h3{ color:#fff; } .asn-page .asn-dark .asn-em{ color:var(--ice-400); } .asn-page .asn-dark .asn-lead{ color:var(--soft); } .asn-page .asn-dark .asn-arrow-link{ color:var(--ice-500); } .asn-page .asn-dark .asn-arrow-link:hover{ color:var(--ice-300); } /* LIGHT sections (homepage) */ .asn-page .asn-light{ background:var(--bg-light); color:var(--ink-soft); } .asn-page .asn-light .asn-h2, .asn-page .asn-light .asn-h3{ color:var(--ink); } .asn-page .asn-light .asn-em{ color:var(--ice-600); } .asn-page .asn-light .asn-lead{ color:var(--ink-soft); } .asn-page .asn-light .asn-arrow-link{ color:var(--ice-600); } .asn-page .asn-light .asn-arrow-link:hover{ color:var(--ice-700); } /* ═══════════════════════════════════════════ 5 · BUTTONS HARD RULE: ice-blue buttons ALWAYS carry dark navy text. ═══════════════════════════════════════════ */ .asn-btn{ display:inline-flex; align-items:center; gap:14px; font-family:var(--font-d); font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; padding:19px 38px; border-radius:999px; border:1.5px solid transparent; cursor:pointer; white-space:nowrap; transition:transform .35s cubic-bezier(.2,.7,.3,1),background .35s,border-color .35s,color .35s,box-shadow .35s; } .asn-btn svg{ flex:none; transition:transform .35s cubic-bezier(.2,.7,.3,1); } .asn-btn:hover svg{ transform:translateX(5px); } .asn-page .asn-btn--primary{ background:var(--ice-500); color:var(--n-900); } .asn-page .asn-btn--primary:hover{ background:var(--ice-400); color:var(--n-900); transform:translateY(-2px); box-shadow:0 18px 40px -12px rgba(111,169,222,.45); } .asn-page .asn-btn--ghost{ border-color:rgba(255,255,255,.35); color:#fff; background:transparent; } .asn-page .asn-btn--ghost:hover{ border-color:var(--ice-400); color:var(--ice-300); transform:translateY(-2px); } .asn-page .asn-btn--ink{ background:var(--n-800); color:#fff; } .asn-page .asn-btn--ink:hover{ background:var(--n-700); transform:translateY(-2px); box-shadow:0 18px 40px -14px rgba(11,31,61,.4); } .asn-page .asn-arrow-link{ display:inline-flex; align-items:center; gap:12px; font-family:var(--font-d); font-size:12.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ice-600); transition:color .3s; } .asn-page--home .asn-arrow-link{ color:var(--ice-500); } .asn-page .asn-arrow-link svg{ transition:transform .35s cubic-bezier(.2,.7,.3,1); } .asn-page .asn-arrow-link:hover{ color:var(--ice-700); } .asn-page--home .asn-arrow-link:hover{ color:var(--ice-300); } .asn-page .asn-arrow-link:hover svg{ transform:translateX(5px); } /* ═══════════════════════════════════════════ 6 · SCROLL REVEAL (class "asn-reveal", stagger with style="--rd:.1s") ═══════════════════════════════════════════ */ .asn-reveal{ opacity:0; transform:translateY(34px); transition:opacity .9s cubic-bezier(.2,.65,.3,1),transform .9s cubic-bezier(.2,.65,.3,1); transition-delay:var(--rd,0s); } .asn-reveal.is-in{ opacity:1; transform:none; } /* ═══════════════════════════════════════════ 7 · SHARED SMALL COMPONENTS ═══════════════════════════════════════════ */ .asn-checks{ margin-bottom:40px; } .asn-checks li{ display:flex; gap:16px; align-items:flex-start; padding:15px 0; border-top:1px solid var(--line-light); font-size:15px; line-height:1.6; color:var(--ink-soft); } .asn-checks li:last-child{ border-bottom:1px solid var(--line-light); } .asn-checks svg{ flex:none; margin-top:3px; } .asn-dark .asn-checks li, .asn-page--home .asn-checks li{ border-top-color:var(--line); color:var(--soft); } .asn-dark .asn-checks li:last-child, .asn-page--home .asn-checks li:last-child{ border-bottom-color:var(--line); } .asn-trust-item, .asn-meta-item{ display:inline-flex; align-items:center; gap:11px; font-family:var(--font-d); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.85); } .asn-trust-item svg, .asn-meta-item svg{ flex:none; } .asn-crumbs{ display:flex; align-items:center; gap:12px; margin-bottom:26px; font-family:var(--font-d); font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; } .asn-page .asn-crumbs a{ color:var(--soft-2); transition:color .3s; } .asn-page .asn-crumbs a:hover{ color:var(--ice-300); } .asn-crumbs svg{ color:var(--soft-2); opacity:.6; flex:none; } .asn-crumbs span{ color:var(--ice-400); } .asn-filter{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .asn-filter__label{ font-family:var(--font-d); font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); margin-right:6px; } .asn-fpill{ font-family:var(--font-d); font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); background:#fff; border:1.5px solid var(--line-light); border-radius:999px; padding:12px 24px; transition:all .3s; } .asn-fpill:hover{ border-color:var(--ice-500); color:var(--ice-700); } .asn-fpill.is-active{ background:var(--n-800); border-color:var(--n-800); color:#fff; } /* Light-blue callout note */ .asn-note{ font-size:14.5px; line-height:1.75; color:var(--ink-soft); background:#EFF6FC; border:1px solid #D7E7F5; border-radius:16px; padding:22px 28px; } .asn-note strong{ color:var(--ink); font-weight:600; } /* ═══════════════════════════════════════════════════════════════════════════ HOMEPAGE COMPONENTS (only used on asn-page--home) ═══════════════════════════════════════════════════════════════════════════ */ /* ── Video hero ───────────────────────────── */ .asn-hero{ padding:28px 28px 0; } .asn-hero__media{ position:relative; border-radius:var(--rad-lg); overflow:hidden; min-height:min(94vh,960px); display:flex; align-items:flex-end; background:var(--n-700) center/cover no-repeat; } .asn-hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .asn-hero__overlay{ position:absolute; inset:0; z-index:1; background: linear-gradient(to top,rgba(6,20,38,.88) 0%,rgba(6,20,38,.25) 42%,rgba(6,20,38,.15) 100%), linear-gradient(78deg,rgba(6,20,38,.92) 0%,rgba(11,31,61,.62) 46%,rgba(11,31,61,.18) 100%); } .asn-hero__inner{ position:relative; z-index:2; width:100%; max-width:calc(var(--wrap) + 96px); margin:0 auto; padding:clamp(56px,8vw,120px) 48px clamp(64px,7vw,104px); } .asn-hero__content{ max-width:none; } .asn-hero .asn-h1{ margin:0 0 30px; } .asn-hero__lead{ max-width:880px; font-size:clamp(1.08rem,1.4vw,1.3rem); line-height:1.8; color:var(--ice-300); } .asn-hero__cta{ display:flex; flex-wrap:wrap; gap:18px; margin-top:44px; } .asn-hero__trust{ display:flex; flex-wrap:wrap; gap:14px 40px; margin-top:52px; padding-top:34px; border-top:1px solid rgba(255,255,255,.14); } .asn-hero__content > *{ opacity:0; transform:translateY(26px); animation:asnRise 1s cubic-bezier(.2,.65,.3,1) forwards; } .asn-hero__content > *:nth-child(1){ animation-delay:.15s; } .asn-hero__content > *:nth-child(2){ animation-delay:.3s; } .asn-hero__content > *:nth-child(3){ animation-delay:.45s; } .asn-hero__content > *:nth-child(4){ animation-delay:.6s; } @keyframes asnRise{ to{ opacity:1; transform:none; } } .asn-hero__scroll{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px; font-family:var(--font-d); font-size:10px; font-weight:600; letter-spacing:.34em; text-transform:uppercase; color:rgba(255,255,255,.5); } .asn-hero__scroll span{ display:block; width:1px; height:44px; background:linear-gradient(to bottom,rgba(255,255,255,.6),transparent); animation:asnDrip 2.4s ease-in-out infinite; } @keyframes asnDrip{ 0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top} 55%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} } /* ── Stats band (overlaps hero) ────────────── */ .asn-stats{ padding:0 28px; position:relative; z-index:5; } .asn-stats__card{ max-width:var(--wrap); margin:-78px auto 0; background:linear-gradient(180deg,var(--n-600) 0%,#0d2346 100%); border:1px solid var(--line); border-radius:var(--rad); padding:56px 64px 50px; display:grid; grid-template-columns:repeat(4,1fr); box-shadow:0 40px 80px -30px rgba(3,10,22,.7); } .asn-stat{ padding:0 36px; border-left:1px solid var(--line); } .asn-stat:first-child{ border-left:none; padding-left:0; } .asn-stat__num{ font-family:var(--font-d); font-weight:300; font-size:clamp(3rem,4.2vw,4.3rem); line-height:1; color:#fff; display:flex; align-items:baseline; gap:6px; } .asn-stat__suffix{ font-size:.38em; font-weight:600; letter-spacing:.12em; color:var(--ice-500); text-transform:uppercase; } .asn-stat__label{ margin-top:14px; font-size:13.5px; line-height:1.6; color:var(--soft-2); } .asn-stats__note{ max-width:var(--wrap); margin:18px auto 0; padding:0 8px; font-size:11.5px; color:rgba(143,166,194,.55); line-height:1.6; } /* ── Mission ───────────────────────────────── */ .asn-mission{ position:relative; padding:clamp(120px,13vw,190px) 0 clamp(110px,12vw,170px); overflow:hidden; } .asn-mission__watermark{ position:absolute; top:44%; left:50%; transform:translate(-50%,-50%); font-family:var(--font-d); font-weight:800; letter-spacing:.04em; font-size:clamp(140px,24vw,320px); line-height:1; color:transparent; -webkit-text-stroke:1px rgba(111,169,222,.07); user-select:none; pointer-events:none; white-space:nowrap; } .asn-mission__inner{ position:relative; max-width:940px; margin:0 auto; text-align:center; padding:0 48px; } .asn-mission .asn-h2{ margin:0 0 30px; } .asn-mission .asn-lead{ max-width:820px; margin:0 auto 40px; } .asn-mission__arcs{ position:absolute; inset:0; pointer-events:none; } /* ── How it works (dark) ───────────────────── */ .asn-how{ padding:clamp(100px,11vw,160px) 0; } .asn-how__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom:64px; } .asn-how__head .asn-h2{ margin-top:0; max-width:720px; } .asn-how__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; } .asn-how-step{ position:relative; background:linear-gradient(180deg,rgba(19,41,76,.55) 0%,rgba(15,37,71,.25) 100%); border:1px solid var(--line); border-radius:var(--rad); padding:150px 32px 40px; overflow:hidden; transition:transform .45s cubic-bezier(.2,.7,.3,1),border-color .45s,background .45s; } .asn-how-step::after{ content:''; position:absolute; left:0; right:0; top:0; height:3px; background:var(--grad-leaf); opacity:0; transform:scaleX(.3); transform-origin:left; transition:opacity .45s,transform .55s cubic-bezier(.2,.7,.3,1); } .asn-how-step:hover{ transform:translateY(-6px); border-color:var(--line-strong); background:linear-gradient(180deg,rgba(19,41,76,.8) 0%,rgba(15,37,71,.4) 100%); } .asn-how-step:hover::after{ opacity:1; transform:scaleX(1); } .asn-how-step__num{ position:absolute; top:26px; left:26px; font-family:var(--font-d); font-weight:700; font-size:88px; line-height:1; color:transparent; -webkit-text-stroke:1px rgba(111,169,222,.28); } .asn-how-step .asn-h3{ font-size:1.2rem; margin-bottom:14px; } .asn-how-step p{ font-size:14.5px; line-height:1.75; color:var(--soft-2); } /* ── Specialties (light) ───────────────────── */ .asn-spec{ padding:clamp(100px,11vw,170px) 0; } .asn-spec__head{ max-width:820px; margin-bottom:64px; } .asn-spec__head .asn-h2{ margin:0 0 24px; } .asn-spec__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; align-items:start; } .asn-spec-card{ background:#fff; border:1px solid #DFE9F4; border-radius:var(--rad); padding:46px 40px 40px; position:relative; overflow:hidden; transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s; } .asn-spec-card:hover{ transform:translateY(-6px); box-shadow:0 34px 70px -30px rgba(18,39,65,.22); } .asn-spec-card h3{ font-family:var(--font-d); font-weight:600; color:var(--ink); font-size:clamp(1.5rem,2vw,1.9rem); margin-bottom:14px; } .asn-spec-card > p{ font-size:15px; line-height:1.75; color:var(--ink-soft); max-width:560px; margin-bottom:8px; } .asn-linklist{ margin-top:26px; } .asn-linklist li{ border-top:1px solid #E5EEF7; } .asn-linklist li:last-child{ border-bottom:1px solid #E5EEF7; } .asn-linklist a{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px 4px; font-family:var(--font-d); font-weight:600; font-size:15px; color:var(--ink); transition:color .3s,padding-left .35s cubic-bezier(.2,.7,.3,1); } .asn-linklist a svg{ flex:none; color:var(--ice-600); transition:transform .35s cubic-bezier(.2,.7,.3,1); } .asn-linklist a:hover{ color:var(--ice-700); padding-left:12px; } .asn-linklist a:hover svg{ transform:translateX(4px); } .asn-spec-card .asn-arrow-link{ margin-top:30px; } /* ── National reach (full-bleed split) ─────── */ .asn-nat{ display:grid; grid-template-columns:1fr 1fr; background:var(--n-800); } .asn-nat__content{ width:100%; max-width:700px; margin-left:auto; padding:clamp(96px,10.5vw,168px) clamp(44px,5vw,84px) clamp(96px,10.5vw,168px) 48px; } .asn-nat__content .asn-h2{ margin:0 0 26px; } .asn-nat__content .asn-lead{ margin-bottom:36px; } .asn-nat__media{ position:relative; min-height:640px; overflow:hidden; } .asn-nat__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .asn-nat__media::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg,var(--n-800) 0%,rgba(11,31,61,0) 24%); } /* ── Why ACCESS value cards (dark) ─────────── */ .asn-values{ padding:clamp(100px,11vw,160px) 0; } .asn-values__head{ text-align:center; max-width:760px; margin:0 auto 68px; } .asn-values__head .asn-h2{ margin-top:0; } .asn-values__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; } .asn-value-card{ background:linear-gradient(180deg,rgba(19,41,76,.5) 0%,rgba(15,37,71,.2) 100%); border:1px solid var(--line); border-radius:var(--rad); padding:44px 34px 40px; transition:transform .45s cubic-bezier(.2,.7,.3,1),border-color .45s; } .asn-value-card:hover{ transform:translateY(-6px); border-color:var(--line-strong); } .asn-value-card__icon{ width:64px; height:64px; border-radius:18px; margin-bottom:28px; display:flex; align-items:center; justify-content:center; background:rgba(111,169,222,.1); border:1px solid var(--line); color:var(--ice-400); } .asn-value-card h3{ font-family:var(--font-d); font-weight:600; font-size:1.13rem; color:#fff; margin-bottom:13px; line-height:1.35; } .asn-value-card p{ font-size:14.5px; line-height:1.75; color:var(--soft-2); } /* ── Network collage ───────────────────────── */ .asn-net{ padding:clamp(110px,12vw,180px) 0; position:relative; overflow:hidden; } .asn-net__watermark{ position:absolute; bottom:-4%; right:-2%; font-family:var(--font-d); font-weight:800; font-size:clamp(120px,17vw,240px); line-height:1; color:transparent; -webkit-text-stroke:1px rgba(111,169,222,.06); user-select:none; pointer-events:none; white-space:nowrap; } .asn-net__grid{ display:grid; grid-template-columns:6fr 5fr; gap:clamp(48px,6vw,96px); align-items:center; position:relative; } .asn-net__collage{ position:relative; padding:24px 0 96px 24px; } .asn-net__collage::before{ content:''; position:absolute; top:0; left:0; width:58%; height:56%; border:1px solid var(--line-strong); border-radius:var(--rad); } .asn-net__imgA{ position:relative; width:82%; border-radius:var(--rad); overflow:hidden; margin:24px 0 0 24px; box-shadow:0 40px 80px -30px rgba(3,10,22,.75); } .asn-net__imgA img{ width:100%; aspect-ratio:4/3.1; object-fit:cover; } .asn-net__imgB{ position:absolute; right:0; bottom:0; width:52%; border-radius:var(--rad); overflow:hidden; border:8px solid var(--n-800); box-shadow:0 40px 80px -30px rgba(3,10,22,.75); } .asn-net__imgB img{ width:100%; aspect-ratio:4/3; object-fit:cover; } .asn-net__content .asn-h2{ margin:0 0 26px; } .asn-net__content .asn-lead{ margin-bottom:38px; font-size:1.05rem; } .asn-net__marks{ display:grid; grid-template-columns:1fr; margin-bottom:44px; } .asn-net__mark{ display:flex; align-items:center; gap:18px; padding:16px 0; border-top:1px solid var(--line); font-family:var(--font-d); font-weight:600; font-size:13.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ice-300); } .asn-net__mark:last-child{ border-bottom:1px solid var(--line); } .asn-net__cta{ display:flex; flex-wrap:wrap; gap:16px; } /* ── Testimonial (light) ───────────────────── */ .asn-quote{ padding:clamp(100px,11vw,160px) 0; text-align:center; } .asn-quote blockquote{ max-width:920px; margin:0 auto 44px; font-family:var(--font-d); font-weight:300; font-size:clamp(1.45rem,2.5vw,2.05rem); line-height:1.55; color:var(--ink); } .asn-quote__who{ font-family:var(--font-d); font-weight:700; font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink); } .asn-quote__meta{ margin-top:8px; font-size:13.5px; color:var(--ink-soft); letter-spacing:.06em; } .asn-quote__stars{ display:flex; justify-content:center; gap:6px; margin-bottom:34px; color:var(--ice-600); } /* ── Consultation panel + GoHighLevel lead form (homepage) ── */ .asn-consult{ padding:clamp(90px,9vw,130px) 28px; background:var(--n-900); } .asn-consult__panel{ position:relative; max-width:var(--wrap); margin:0 auto; border-radius:var(--rad-lg); overflow:hidden; padding:clamp(56px,6.5vw,96px) clamp(28px,5.5vw,96px); border:1px solid rgba(111,169,222,.16); box-shadow:0 60px 120px -50px rgba(0,0,0,.85); } .asn-consult__bg{ position:absolute; inset:0; } .asn-consult__bg img{ width:100%; height:100%; object-fit:cover; } .asn-consult__overlay{ position:absolute; inset:0; background:linear-gradient(120deg,rgba(6,20,38,.97) 0%,rgba(13,42,82,.93) 55%,rgba(23,62,112,.88) 100%); } .asn-consult__arc{ position:absolute; inset:0; pointer-events:none; } .asn-consult__grid{ position:relative; display:grid; grid-template-columns:5fr 6fr; gap:clamp(44px,5vw,84px); align-items:center; } .asn-consult__info .asn-h2{ margin:0 0 24px; font-size:clamp(2.2rem,3.8vw,3.5rem); color:#fff; } .asn-consult__info .asn-em{ color:var(--ice-400); } .asn-consult__info .asn-lead{ margin-bottom:38px; color:var(--ice-300); } .asn-consult__contact{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; margin-bottom:38px; } .asn-page .asn-consult__contact a{ display:inline-flex; align-items:center; gap:14px; font-family:var(--font-d); font-size:14px; font-weight:600; letter-spacing:.08em; color:var(--ice-300); transition:color .3s; } .asn-page .asn-consult__contact a:hover{ color:#fff; } .asn-consult__assure{ display:flex; flex-wrap:wrap; gap:12px 30px; } .asn-vh{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .asn-hp{ position:absolute; left:-5000px; width:1px; height:1px; opacity:0; overflow:hidden; } .asn-form-card{ position:relative; background:#fff; border-radius:26px; padding:clamp(28px,3.2vw,46px); box-shadow:0 50px 100px -40px rgba(3,10,22,.85); } .asn-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .asn-field{ margin-bottom:14px; } .asn-input,.asn-select,.asn-textarea{ width:100%; font-family:var(--font-b); font-size:15.5px; color:var(--ink); background:#F8FBFE; border:1.5px solid #DFE9F4; border-radius:14px; padding:16px 18px; appearance:none; -webkit-appearance:none; transition:border-color .25s,box-shadow .25s,background .25s; } .asn-input::placeholder,.asn-textarea::placeholder{ color:#93A5BC; } .asn-input:focus,.asn-select:focus,.asn-textarea:focus{ outline:none; border-color:var(--ice-600); background:#fff; box-shadow:0 0 0 4px rgba(61,120,184,.12); } .asn-select{ background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%233D78B8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 18px center; padding-right:46px; cursor:pointer; } .asn-select:invalid{ color:#93A5BC; } .asn-select option{ color:var(--ink); } .asn-textarea{ min-height:118px; resize:vertical; } .asn-form__kicker{ font-family:var(--font-d); font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--ink); margin:6px 0 12px; } .asn-pills{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px; } .asn-pill{ font-family:var(--font-b); font-size:13.5px; font-weight:500; color:var(--ink-soft); background:#fff; border:1.5px solid #DFE9F4; border-radius:12px; padding:13px 6px; text-align:center; cursor:pointer; transition:border-color .25s,background .25s,color .25s; } .asn-pill:hover{ border-color:var(--ice-500); color:var(--ice-700); } .asn-pill.is-on{ border-color:var(--ice-600); background:rgba(111,169,222,.13); color:var(--ice-700); font-weight:600; } .asn-form__submit{ width:100%; justify-content:center; margin-top:4px; } .asn-form__submit:disabled{ opacity:.55; cursor:not-allowed; transform:none !important; box-shadow:none !important; } .asn-field.has-error .asn-input,.asn-field.has-error .asn-select,.asn-field.has-error .asn-textarea{ border-color:#D9646C; box-shadow:none; background:#FEF7F7; } .asn-error-msg{ display:none; font-size:12.5px; line-height:1.4; color:#C0505A; margin:7px 2px 0; } .asn-field.has-error .asn-error-msg{ display:block; } .asn-form__status{ display:none; margin-top:14px; font-size:14px; line-height:1.55; border-radius:12px; padding:13px 16px; } .asn-form__status.is-error{ display:block; background:#FCEEEF; color:#9E3E47; } .asn-form__fineprint{ margin-top:18px; text-align:center; font-size:12.5px; line-height:1.5; color:#8598B1; } .asn-page .asn-form__fineprint a{ color:var(--ice-700); text-decoration:underline; } .asn-form__secure{ display:flex; justify-content:center; align-items:center; gap:10px; margin-top:13px; font-size:13px; color:var(--ink-soft); } .asn-form-success{ display:none; text-align:center; padding:44px 12px; } .asn-form-success h3{ font-family:var(--font-d); font-weight:600; font-size:1.4rem; color:var(--ink); margin:22px 0 12px; } .asn-form-success p{ font-size:15px; line-height:1.7; color:var(--ink-soft); max-width:400px; margin:0 auto; } .asn-page .asn-form-success a{ color:var(--ice-700); font-weight:600; } .asn-form-card.is-done form{ display:none; } .asn-form-card.is-done .asn-form-success{ display:block; } /* ═══════════════════════════════════════════════════════════════════════════ INNER PAGE COMPONENTS (used on asn-page--inner) ═══════════════════════════════════════════════════════════════════════════ */ /* ── Page hero (compact, full bleed, ALWAYS dark) ── */ .asn-phero{ position:relative; overflow:hidden; background:radial-gradient(1000px 500px at 80% 0%,#10294f 0%,var(--n-800) 60%); border-bottom:1px solid var(--line); padding:clamp(56px,6.5vw,92px) 0; /* top and bottom MUST match */ } .asn-phero .asn-h1{ color:#fff; margin-bottom:22px; max-width:900px; } .asn-phero .asn-em{ color:var(--ice-400); } .asn-phero__lead{ max-width:800px; font-size:clamp(1.02rem,1.3vw,1.2rem); line-height:1.8; color:var(--soft); } .asn-phero__watermark{ position:absolute; right:-1%; bottom:-14%; font-family:var(--font-d); font-weight:800; letter-spacing:.04em; font-size:clamp(90px,13vw,200px); line-height:1; color:transparent; -webkit-text-stroke:1px rgba(111,169,222,.08); user-select:none; pointer-events:none; white-space:nowrap; } .asn-phero__arcs{ position:absolute; inset:0; pointer-events:none; } .asn-phero__inner{ position:relative; } .asn-phero__meta{ display:flex; flex-wrap:wrap; gap:14px 40px; margin-top:40px; padding-top:30px; border-top:1px solid rgba(255,255,255,.12); } /* Split variant (procedure pages: text + image + stat badge) */ .asn-phero--split .asn-phero__inner{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(40px,5vw,80px); align-items:center; } .asn-phero__cta{ display:flex; flex-wrap:wrap; gap:16px; margin-top:38px; } .asn-phero__media{ position:relative; } .asn-phero__media img{ width:100%; border-radius:var(--rad); aspect-ratio:6/5; object-fit:cover; box-shadow:0 40px 90px -40px rgba(0,0,0,.7); } .asn-phero__media-badge{ position:absolute; left:-18px; bottom:26px; background:linear-gradient(180deg,#0f2748 0%,#0a1d38 100%); border:1px solid var(--line-strong); border-radius:18px; padding:20px 26px; box-shadow:0 30px 60px -24px rgba(0,0,0,.6); } .asn-phero__media-badge strong{ display:block; font-family:var(--font-d); font-weight:300; font-size:2.2rem; line-height:1; color:#fff; margin-bottom:6px; } .asn-phero__media-badge strong span{ color:var(--ice-400); } .asn-phero__media-badge em{ font-style:normal; font-family:var(--font-b); font-size:12.5px; color:var(--soft-2); letter-spacing:.02em; } /* ── CTA panel (dark panel on a light page) ── */ .asn-cta{ padding:0 28px clamp(90px,9vw,130px); } .asn-cta__panel{ position:relative; max-width:var(--wrap); margin:0 auto; border-radius:var(--rad-lg); overflow:hidden; text-align:center; padding:clamp(72px,8vw,120px) clamp(32px,6vw,110px); background: radial-gradient(900px 500px at 15% 0%, rgba(23,62,112,.7) 0%, rgba(6,20,38,0) 60%), linear-gradient(120deg,#081b36 0%,#0d2a52 60%,#123563 100%); border:1px solid rgba(111,169,222,.16); box-shadow:0 60px 120px -50px rgba(10,25,48,.55); } .asn-cta__arc{ position:absolute; inset:0; pointer-events:none; } .asn-cta__inner{ position:relative; max-width:820px; margin:0 auto; } .asn-cta__inner .asn-h2{ color:#fff; margin-bottom:24px; font-size:clamp(2.1rem,3.6vw,3.3rem); } .asn-cta__inner .asn-em{ color:var(--ice-400); } .asn-cta__inner .asn-lead{ color:var(--ice-300); margin-bottom:44px; } .asn-cta__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px; margin-bottom:40px; } .asn-cta__contact{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 46px; } .asn-page .asn-cta__contact a{ display:inline-flex; align-items:center; gap:11px; font-family:var(--font-d); font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ice-300); transition:color .3s; } .asn-page .asn-cta__contact a:hover{ color:#fff; } /* ── FAQ accordion ── */ .asn-faq{ padding:clamp(90px,10vw,150px) 0; } .asn-faq--flush{ padding-top:0; } .asn-faq__head{ text-align:center; max-width:720px; margin:0 auto 52px; } .asn-faq__head .asn-h2{ margin-bottom:18px; } .asn-faq__list{ max-width:920px; margin:0 auto; border-top:1px solid var(--line-light); } .asn-faq__item{ border-bottom:1px solid var(--line-light); } .asn-faq__q{ display:flex; align-items:center; justify-content:space-between; gap:22px; width:100%; text-align:left; padding:24px 4px; font-family:var(--font-d); font-size:16.5px; font-weight:600; color:var(--ink); transition:color .3s; } .asn-faq__q:hover{ color:var(--ice-700); } .asn-faq__q svg{ flex:none; color:var(--ice-600); transition:transform .35s; } .asn-faq__q.is-open svg{ transform:rotate(45deg); } .asn-faq__a{ max-height:0; overflow:hidden; transition:max-height .5s cubic-bezier(.2,.7,.3,1); } .asn-faq__a p{ padding:2px 4px 26px; font-size:15px; line-height:1.8; color:var(--ink-soft); max-width:820px; } /* ── Standards band (dark, 4 icon cards) ── */ .asn-std{ padding:clamp(90px,10vw,150px) 0; position:relative; overflow:hidden; } .asn-std__watermark{ position:absolute; left:50%; top:-8%; transform:translateX(-50%); font-family:var(--font-d); font-weight:800; font-size:clamp(100px,16vw,240px); line-height:1; color:transparent; -webkit-text-stroke:1px rgba(111,169,222,.05); user-select:none; pointer-events:none; white-space:nowrap; } .asn-std__head{ position:relative; text-align:center; max-width:820px; margin:0 auto 64px; } .asn-std__head .asn-h2{ margin-bottom:22px; } .asn-std__grid{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:26px; } .asn-std-card{ background:linear-gradient(180deg,rgba(19,41,76,.5) 0%,rgba(15,37,71,.2) 100%); border:1px solid var(--line); border-radius:var(--rad); padding:42px 32px 38px; transition:transform .45s cubic-bezier(.2,.7,.3,1),border-color .45s; } .asn-std-card:hover{ transform:translateY(-6px); border-color:var(--line-strong); } .asn-std-card__icon{ width:62px; height:62px; border-radius:18px; margin-bottom:26px; display:flex; align-items:center; justify-content:center; background:rgba(111,169,222,.1); border:1px solid var(--line); color:var(--ice-400); } .asn-std-card h3{ font-family:var(--font-d); font-weight:600; font-size:1.1rem; color:#fff; margin-bottom:12px; line-height:1.35; } .asn-std-card p{ font-size:14px; line-height:1.7; color:var(--soft-2); } /* ── Light split with framed image ── */ .asn-match{ padding:clamp(90px,10vw,150px) 0; } .asn-match__grid{ display:grid; grid-template-columns:6fr 5fr; gap:clamp(48px,6vw,96px); align-items:center; } .asn-match__content .asn-h2{ margin-bottom:24px; } .asn-match__content .asn-lead{ margin-bottom:34px; } .asn-match__media{ position:relative; padding:24px 24px 0 0; } .asn-match__media::before{ content:''; position:absolute; top:0; right:0; width:62%; height:58%; border:1px solid #C7DCEF; border-radius:var(--rad); } .asn-match__media img{ position:relative; width:94%; border-radius:var(--rad); aspect-ratio:11/10; object-fit:cover; box-shadow:0 40px 80px -34px rgba(18,39,65,.35); } /* ═══════════════════════════════════════════════════════════════════════════ PROCEDURE (SPOKE) PAGE COMPONENTS ═══════════════════════════════════════════════════════════════════════════ */ /* ── At a glance (4 quick-fact cards) ── */ .asn-glance{ padding:clamp(64px,7vw,100px) 0; border-bottom:1px solid var(--line-light); } .asn-glance__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; } .asn-glance-card{ background:#fff; border:1px solid #DFE9F4; border-radius:var(--rad); padding:34px 30px; transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s; } .asn-glance-card:hover{ transform:translateY(-5px); box-shadow:0 30px 60px -32px rgba(18,39,65,.2); } .asn-glance-card__label{ font-family:var(--font-d); font-size:10.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ice-700); margin-bottom:14px; } .asn-glance-card__val{ font-family:var(--font-d); font-weight:300; font-size:clamp(1.6rem,2.2vw,2rem); line-height:1.15; color:var(--ink); margin-bottom:8px; } .asn-glance-card p{ font-size:13.5px; line-height:1.6; color:var(--ink-soft); } /* ── Overview split ── */ .asn-ov{ padding:clamp(80px,9vw,130px) 0; } .asn-ov__grid{ display:grid; grid-template-columns:6fr 5fr; gap:clamp(48px,6vw,96px); align-items:center; } .asn-ov__content .asn-h2{ margin-bottom:24px; } .asn-ov__content .asn-lead{ margin-bottom:22px; } .asn-ov__content > p{ font-size:15.5px; line-height:1.85; color:var(--ink-soft); margin-bottom:20px; } .asn-ov__content > p:last-of-type{ margin-bottom:30px; } .asn-ov__content strong{ color:var(--ink); font-weight:600; } .asn-ov__media{ position:relative; padding:24px 24px 0 0; } .asn-ov__media::before{ content:''; position:absolute; top:0; right:0; width:60%; height:56%; border:1px solid #C7DCEF; border-radius:var(--rad); } .asn-ov__media img{ position:relative; width:94%; border-radius:var(--rad); aspect-ratio:11/10; object-fit:cover; box-shadow:0 40px 80px -34px rgba(18,39,65,.35); } /* ── A vs B comparison (partial/total, anatomic/reverse) ── */ .asn-comp{ padding:0 0 clamp(90px,10vw,150px); } .asn-comp__head{ text-align:center; max-width:780px; margin:0 auto 52px; } .asn-comp__head .asn-h2{ margin-bottom:18px; } .asn-comp__grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; } .asn-comp-card{ position:relative; background:#fff; border:1px solid #DFE9F4; border-radius:var(--rad); padding:clamp(32px,3.4vw,46px); overflow:hidden; transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s,border-color .45s; } .asn-comp-card:hover{ transform:translateY(-6px); box-shadow:0 34px 70px -30px rgba(18,39,65,.22); border-color:#C7DCEF; } /* --feature = the option patients are rarely told about. Gets the accent bar. */ .asn-comp-card--feature{ background:linear-gradient(180deg,#F7FBFE 0%,#FFFFFF 100%); border-color:#C7DCEF; } .asn-comp-card--feature::before{ content:''; position:absolute; left:0; right:0; top:0; height:3px; background:var(--grad-leaf); } .asn-comp-card__pill{ display:inline-block; font-family:var(--font-d); font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ice-700); background:rgba(111,169,222,.13); border-radius:999px; padding:8px 16px; margin-bottom:22px; } .asn-comp-card h3{ font-family:var(--font-d); font-weight:600; font-size:clamp(1.35rem,1.9vw,1.7rem); color:var(--ink); margin-bottom:14px; line-height:1.25; } .asn-comp-card > p{ font-size:15px; line-height:1.8; color:var(--ink-soft); margin-bottom:26px; } .asn-comp-card dl{ border-top:1px solid var(--line-light); } .asn-comp-card dl div{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:15px 0; border-bottom:1px solid var(--line-light); } .asn-comp-card dt{ font-family:var(--font-d); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); opacity:.75; flex:none; padding-top:2px; } .asn-comp-card dd{ font-size:14.5px; line-height:1.55; color:var(--ink); text-align:right; font-weight:500; } .asn-comp__note{ margin-top:30px; text-align:center; max-width:900px; margin-left:auto; margin-right:auto; font-size:14.5px; line-height:1.75; color:var(--ink-soft); background:#EFF6FC; border:1px solid #D7E7F5; border-radius:16px; padding:22px 28px; } .asn-comp__note strong{ color:var(--ink); font-weight:600; } /* Inline links inside the comparison note. Without this, .asn-page a{color:inherit} makes the link indistinguishable from the surrounding text. Mirrors .asn-cand__note a, in the light-section accent instead of the dark one. */ .asn-page .asn-comp__note a{ color:var(--ice-600); font-weight:600; transition:color .3s; } .asn-page .asn-comp__note a:hover{ color:var(--ice-700); } /* ── Trade-offs (light, two columns) ─────────────────────────────────────── Added for spinal fusion. Some operations are not a choice between A and B, they are a single operation with a real price attached, and the honest thing is to set the gains and the costs side by side and let the patient read both. .asn-comp is the wrong component for that: it compares two options. Padding is bottom-only: the section above (usually .asn-comp) supplies the top. Left column carries the accent bar, right column the neutral one. */ .asn-tradeoff{ padding:0 0 clamp(90px,10vw,150px); } .asn-tradeoff__head{ text-align:center; max-width:820px; margin:0 auto 52px; } .asn-tradeoff__head .asn-h2{ margin-bottom:18px; } .asn-tradeoff__grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; } .asn-tradeoff-col{ position:relative; background:#fff; border:1px solid #DFE9F4; border-radius:var(--rad); padding:clamp(32px,3.4vw,44px); overflow:hidden; transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s,border-color .45s; } .asn-tradeoff-col:hover{ transform:translateY(-6px); box-shadow:0 34px 70px -30px rgba(18,39,65,.22); border-color:#C7DCEF; } .asn-tradeoff-col::before{ content:''; position:absolute; left:0; right:0; top:0; height:3px; } .asn-tradeoff-col--gain::before{ background:var(--grad-leaf); } .asn-tradeoff-col--cost::before{ background:#C7DCEF; } .asn-tradeoff-col h3{ font-family:var(--font-d); font-weight:600; font-size:clamp(1.2rem,1.6vw,1.45rem); color:var(--ink); margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--line-light); } .asn-tradeoff-col ul li{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; font-size:14.5px; line-height:1.65; color:var(--ink-soft); } .asn-tradeoff-col ul li svg{ flex:none; margin-top:3px; } .asn-tradeoff-col--gain ul li svg{ color:var(--ice-600); } .asn-tradeoff-col--cost ul li svg{ color:var(--ink-soft); opacity:.7; } .asn-tradeoff-col strong{ color:var(--ink); font-weight:600; } .asn-tradeoff__note{ margin:30px auto 0; text-align:center; max-width:900px; font-size:14.5px; line-height:1.75; color:var(--ink-soft); background:#EFF6FC; border:1px solid #D7E7F5; border-radius:16px; padding:22px 28px; } .asn-tradeoff__note strong{ color:var(--ink); font-weight:600; } .asn-page .asn-tradeoff__note a{ color:var(--ice-600); font-weight:600; transition:color .3s; } .asn-page .asn-tradeoff__note a:hover{ color:var(--ice-700); } /* ── Candidacy (DARK · two columns) ── */ .asn-cand{ padding:clamp(90px,10vw,150px) 0; position:relative; overflow:hidden; } .asn-cand__watermark{ position:absolute; right:-1%; top:-6%; font-family:var(--font-d); font-weight:800; font-size:clamp(90px,15vw,220px); line-height:1; color:transparent; -webkit-text-stroke:1px rgba(111,169,222,.05); user-select:none; pointer-events:none; white-space:nowrap; } .asn-cand__head{ position:relative; text-align:center; max-width:760px; margin:0 auto 60px; } .asn-cand__head .asn-h2{ margin-bottom:18px; } .asn-cand__grid{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:26px; } .asn-cand-col{ background:linear-gradient(180deg,rgba(19,41,76,.55) 0%,rgba(15,37,71,.25) 100%); border:1px solid var(--line); border-radius:var(--rad); padding:40px 36px 36px; } .asn-cand-col h3{ font-family:var(--font-d); font-weight:600; font-size:1.2rem; color:#fff; margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--line); } .asn-cand-col ul li{ display:flex; gap:14px; align-items:flex-start; padding:13px 0; font-size:14.5px; line-height:1.6; color:var(--soft); } .asn-cand-col ul li svg{ flex:none; margin-top:3px; } .asn-cand__note{ position:relative; margin:32px auto 0; text-align:center; font-size:14px; line-height:1.7; color:var(--soft-2); max-width:760px; } .asn-page .asn-cand__note a{ color:var(--ice-400); font-weight:600; transition:color .3s; } .asn-page .asn-cand__note a:hover{ color:var(--ice-300); } /* ── Recovery timeline (5 connected stages) ── */ .asn-rec{ padding:clamp(90px,10vw,150px) 0; } .asn-rec__head{ text-align:center; max-width:760px; margin:0 auto 60px; } .asn-rec__head .asn-h2{ margin-bottom:18px; } .asn-rec__track{ position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:20px; } .asn-rec__track::before{ content:''; position:absolute; left:0; right:0; top:26px; height:2px; background:linear-gradient(90deg,#D7E7F5 0%,#6FA9DE 50%,#D7E7F5 100%); } .asn-rec-step{ position:relative; text-align:center; } .asn-rec-step__dot{ width:54px; height:54px; border-radius:50%; margin:0 auto 22px; display:flex; align-items:center; justify-content:center; background:#fff; border:2px solid var(--ice-500); font-family:var(--font-d); font-weight:700; font-size:13px; color:var(--ice-700); position:relative; z-index:2; transition:transform .4s cubic-bezier(.2,.7,.3,1),background .4s,color .4s; } .asn-rec-step:hover .asn-rec-step__dot{ transform:scale(1.08); background:var(--n-800); color:#fff; border-color:var(--n-800); } .asn-rec-step h3{ font-family:var(--font-d); font-weight:600; font-size:1rem; color:var(--ink); margin-bottom:10px; } .asn-rec-step p{ font-size:13.5px; line-height:1.65; color:var(--ink-soft); } .asn-rec__note{ margin:44px auto 0; text-align:center; font-size:13px; line-height:1.7; color:#9DB0C6; max-width:820px; } /* ── Cost (NO DOLLAR FIGURES, EVER · see CONTENT-VOICE-RULES.md) ── */ .asn-cost{ padding:0 0 clamp(90px,10vw,150px); } .asn-cost__grid{ display:grid; grid-template-columns:6fr 5fr; gap:clamp(48px,6vw,88px); align-items:center; } .asn-cost__content .asn-h2{ margin-bottom:24px; } .asn-cost__content .asn-lead{ margin-bottom:22px; } .asn-cost__content > p{ font-size:15.5px; line-height:1.8; color:var(--ink-soft); margin-bottom:30px; } .asn-cost__content strong{ color:var(--ink); font-weight:600; } .asn-cost__drivers{ margin:0 0 30px; } .asn-cost__drivers li{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-top:1px solid var(--line-light); font-size:14.5px; line-height:1.6; color:var(--ink-soft); } .asn-cost__drivers li:last-child{ border-bottom:1px solid var(--line-light); } .asn-cost__drivers li svg{ flex:none; margin-top:3px; color:var(--ice-600); } .asn-cost__drivers strong{ color:var(--ink); font-weight:600; } .asn-cost__note{ font-size:14px; line-height:1.75; color:var(--ink-soft); background:#EFF6FC; border:1px solid #D7E7F5; border-radius:16px; padding:20px 24px; margin-bottom:30px; } .asn-cost__note strong{ color:var(--ink); font-weight:600; } .asn-cost-card{ background:linear-gradient(180deg,#0d2449 0%,#0a1c38 100%); border:1px solid var(--line-strong); border-radius:var(--rad); padding:clamp(34px,3.6vw,48px); box-shadow:0 50px 100px -45px rgba(10,25,48,.6); } .asn-cost-card__label{ font-family:var(--font-d); font-size:10.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ice-400); margin-bottom:16px; } .asn-cost-card h3{ font-family:var(--font-d); font-weight:600; font-size:1.15rem; color:#fff; margin-bottom:22px; padding-bottom:20px; border-bottom:1px solid var(--line); } .asn-cost-card ul li{ display:flex; gap:13px; align-items:flex-start; padding:11px 0; font-size:14.5px; line-height:1.55; color:var(--soft); } .asn-cost-card ul li svg{ flex:none; margin-top:3px; } .asn-cost-card__foot{ margin-top:24px; padding-top:22px; border-top:1px solid var(--line); font-size:13px; line-height:1.65; color:var(--soft-2); } .asn-cost-card__foot strong{ color:var(--ice-300); font-weight:600; } /* ── Surgeon cross-link band (DARK) ── */ .asn-surgband{ padding:clamp(80px,9vw,130px) 0; } .asn-surgband__inner{ display:grid; grid-template-columns:1fr auto; gap:44px; align-items:center; max-width:var(--wrap); margin:0 auto; } .asn-surgband__content .asn-h2{ margin-bottom:20px; } .asn-surgband__content .asn-lead{ max-width:640px; } .asn-surgband__names{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; } .asn-surgband__chip{ font-family:var(--font-d); font-size:12.5px; font-weight:600; letter-spacing:.04em; color:var(--ice-300); background:rgba(111,169,222,.1); border:1px solid var(--line); border-radius:999px; padding:10px 20px; } .asn-surgband__cta{ flex:none; } /* ── Related procedures ── */ .asn-rel{ padding:0 0 clamp(90px,10vw,150px); } .asn-rel__head{ text-align:center; max-width:700px; margin:0 auto 48px; } .asn-rel__head .asn-h2{ margin-bottom:16px; } .asn-rel__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .asn-rel-card{ display:flex; flex-direction:column; background:#fff; border:1px solid #DFE9F4; border-radius:var(--rad); padding:32px 30px 28px; transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s,border-color .4s; } .asn-rel-card:hover{ transform:translateY(-5px); box-shadow:0 30px 60px -32px rgba(18,39,65,.2); border-color:#C7DCEF; } .asn-rel-card__pill{ align-self:flex-start; font-family:var(--font-d); font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ice-700); background:rgba(111,169,222,.12); border-radius:999px; padding:7px 14px; margin-bottom:20px; } .asn-rel-card h3{ font-family:var(--font-d); font-weight:600; font-size:1.2rem; color:var(--ink); margin-bottom:10px; } .asn-rel-card p{ font-size:14px; line-height:1.7; color:var(--ink-soft); margin-bottom:24px; } .asn-rel-card__link{ margin-top:auto; display:inline-flex; align-items:center; justify-content:space-between; gap:10px; font-family:var(--font-d); font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ice-600); padding-top:20px; border-top:1px solid var(--line-light); transition:color .3s; } .asn-rel-card__link svg{ transition:transform .35s cubic-bezier(.2,.7,.3,1); } .asn-rel-card:hover .asn-rel-card__link{ color:var(--ice-700); } .asn-rel-card:hover .asn-rel-card__link svg{ transform:translateX(4px); } /* ── Prehabilitation (light, 3 cards) ────────────────────────────────────── Added for ACL reconstruction. Some procedures have a phase BEFORE surgery that measurably changes the result, and the recovery timeline (asn-rec) starts at day one, so there was nowhere to say it. Use only where the evidence genuinely supports pre-operative preparation. Same card language as .asn-rel-card. Light section. No asn-dark. Padding is TOP ONLY, like .asn-comp and .asn-cost, because the section that follows it supplies its own top padding. Placing it directly before an unpadded section would leave it sitting flush. */ .asn-prehab{ padding:clamp(90px,10vw,150px) 0 0; } .asn-prehab__head{ text-align:center; max-width:820px; margin:0 auto 52px; } .asn-prehab__head .asn-h2{ margin-bottom:18px; } .asn-prehab__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .asn-prehab-card{ background:#fff; border:1px solid #DFE9F4; border-radius:var(--rad); padding:38px 32px 34px; transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s,border-color .4s; } .asn-prehab-card:hover{ transform:translateY(-5px); box-shadow:0 30px 60px -32px rgba(18,39,65,.2); border-color:#C7DCEF; } .asn-prehab-card__icon{ width:56px; height:56px; border-radius:16px; margin-bottom:24px; display:flex; align-items:center; justify-content:center; background:rgba(111,169,222,.12); color:var(--ice-700); } .asn-prehab-card h3{ font-family:var(--font-d); font-weight:600; font-size:1.15rem; color:var(--ink); margin-bottom:12px; } .asn-prehab-card p{ font-size:14.5px; line-height:1.75; color:var(--ink-soft); } .asn-prehab__note{ margin:36px auto 0; text-align:center; max-width:900px; font-size:14.5px; line-height:1.75; color:var(--ink-soft); background:#EFF6FC; border:1px solid #D7E7F5; border-radius:16px; padding:22px 28px; } .asn-prehab__note strong{ color:var(--ink); font-weight:600; } /* ═══════════════════════════════════════════════════════════════════════════ PILLAR (SPECIALTY) PAGE COMPONENTS ═══════════════════════════════════════════════════════════════════════════ */ /* ── Wait-time value strip ── */ .asn-wait{ padding:clamp(64px,7vw,104px) 0 clamp(56px,6vw,88px); border-bottom:1px solid var(--line-light); } .asn-wait__head{ max-width:820px; margin:0 auto 52px; text-align:center; } .asn-wait__head .asn-h2{ margin-bottom:20px; } .asn-wait__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .asn-wait-card{ background:#fff; border:1px solid #DFE9F4; border-radius:var(--rad); padding:40px 34px; text-align:center; transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s; } .asn-wait-card:hover{ transform:translateY(-5px); box-shadow:0 30px 60px -32px rgba(18,39,65,.2); } .asn-wait-card__num{ font-family:var(--font-d); font-weight:300; font-size:clamp(2.8rem,4.4vw,3.7rem); line-height:1; color:var(--ink); margin-bottom:6px; } .asn-wait-card__num span{ color:var(--ice-600); } .asn-wait-card__unit{ font-family:var(--font-d); font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ice-700); margin-bottom:16px; } .asn-wait-card p{ font-size:14.5px; line-height:1.65; color:var(--ink-soft); } .asn-wait__src{ margin-top:24px; text-align:center; font-size:11.5px; line-height:1.6; color:#9DB0C6; } /* ── The trip (light, 4 legs) ─────────────────────────────────────────────── Added for the day-surgery clusters (hand & wrist, ENT, foot & ankle). These procedures are the ones where the cross-province model is easiest: the operation is day surgery, so the whole journey is about two days. The pillar template had nowhere to say that. .asn-process is the CARE pathway (reach out, consult, operate, recover); this is the TRAVEL, and putting the two in one component would muddle both. Sits directly under .asn-wait so the wait figure and the trip length collide on purpose. Padding is bottom-only: .asn-wait supplies the top. */ .asn-trip{ padding:0 0 clamp(80px,9vw,120px); } .asn-trip__head{ text-align:center; max-width:820px; margin:52px auto; } .asn-trip__head .asn-h2{ margin-bottom:18px; } .asn-trip__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; } .asn-trip-leg{ position:relative; background:#fff; border:1px solid #DFE9F4; border-radius:var(--rad); padding:32px 28px 28px; transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s,border-color .4s; } .asn-trip-leg:hover{ transform:translateY(-5px); box-shadow:0 30px 60px -32px rgba(18,39,65,.2); border-color:#C7DCEF; } .asn-trip-leg__icon{ width:46px; height:46px; border-radius:14px; margin-bottom:20px; display:flex; align-items:center; justify-content:center; background:rgba(111,169,222,.12); color:var(--ice-700); } .asn-trip-leg__time{ font-family:var(--font-d); font-size:10.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ice-700); margin-bottom:10px; } .asn-trip-leg h3{ font-family:var(--font-d); font-weight:600; font-size:1.05rem; color:var(--ink); margin-bottom:9px; } .asn-trip-leg p{ font-size:13.5px; line-height:1.65; color:var(--ink-soft); } .asn-trip__note{ margin:32px auto 0; text-align:center; max-width:900px; font-size:14.5px; line-height:1.75; color:var(--ink-soft); background:#EFF6FC; border:1px solid #D7E7F5; border-radius:16px; padding:22px 28px; } .asn-trip__note strong{ color:var(--ink); font-weight:600; } /* ── Conditions treated (interactive body-region tabs) ── */ .asn-cond{ padding:clamp(80px,9vw,130px) 0; } .asn-cond__head{ max-width:760px; margin:0 auto 56px; text-align:center; } .asn-cond__head .asn-h2{ margin-bottom:18px; } .asn-cond__tabs{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-bottom:48px; } .asn-ctab{ font-family:var(--font-d); font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); background:#fff; border:1.5px solid var(--line-light); border-radius:999px; padding:13px 28px; transition:all .3s; } .asn-ctab:hover{ border-color:var(--ice-500); color:var(--ice-700); } .asn-ctab.is-active{ background:var(--n-800); border-color:var(--n-800); color:#fff; } .asn-cond__panels{ position:relative; } .asn-cpanel{ display:none; } .asn-cpanel.is-active{ display:block; animation:asnCFade .45s cubic-bezier(.2,.7,.3,1); } @keyframes asnCFade{ from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:none;} } .asn-cpanel__grid{ display:grid; grid-template-columns:5fr 7fr; gap:clamp(36px,4vw,68px); align-items:center; } .asn-cpanel__intro h3{ font-family:var(--font-d); font-weight:600; font-size:clamp(1.5rem,2.2vw,2rem); color:var(--ink); margin-bottom:16px; } .asn-cpanel__intro p{ font-size:15.5px; line-height:1.8; color:var(--ink-soft); margin-bottom:24px; } .asn-cpanel__list{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .asn-cpanel__list li{ display:flex; align-items:flex-start; gap:12px; background:#fff; border:1px solid #E5EEF7; border-radius:14px; padding:16px 18px; font-size:14.5px; line-height:1.5; color:var(--ink); font-family:var(--font-d); font-weight:500; } .asn-cpanel__list svg{ flex:none; margin-top:2px; color:var(--ice-600); } /* ── Procedure index cards (DARK · numbered, NO icons) ── */ .asn-procs{ padding:clamp(90px,10vw,150px) 0; position:relative; overflow:hidden; } .asn-procs__watermark{ position:absolute; right:-1%; top:-6%; font-family:var(--font-d); font-weight:800; font-size:clamp(90px,15vw,220px); line-height:1; color:transparent; -webkit-text-stroke:1px rgba(111,169,222,.05); user-select:none; pointer-events:none; white-space:nowrap; } .asn-procs__head{ position:relative; max-width:760px; margin:0 auto 60px; text-align:center; } .asn-procs__head .asn-h2{ margin-bottom:18px; } .asn-procs__grid{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .asn-proc-card{ display:flex; flex-direction:column; position:relative; overflow:hidden; background:linear-gradient(180deg,rgba(19,41,76,.55) 0%,rgba(15,37,71,.25) 100%); border:1px solid var(--line); border-radius:var(--rad); padding:34px 32px 30px; transition:transform .45s cubic-bezier(.2,.7,.3,1),border-color .45s,background .45s; } .asn-proc-card::after{ content:''; position:absolute; left:0; right:0; top:0; height:3px; background:var(--grad-leaf); opacity:0; transform:scaleX(.3); transform-origin:left; transition:opacity .45s,transform .55s cubic-bezier(.2,.7,.3,1); } .asn-proc-card:hover{ transform:translateY(-6px); border-color:var(--line-strong); background:linear-gradient(180deg,rgba(19,41,76,.85) 0%,rgba(15,37,71,.45) 100%); } .asn-proc-card:hover::after{ opacity:1; transform:scaleX(1); } .asn-proc-card__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; padding-bottom:20px; border-bottom:1px solid var(--line); } .asn-proc-card__idx{ font-family:var(--font-d); font-weight:300; font-size:2.1rem; line-height:1; color:#fff; } .asn-proc-card__idx span{ color:var(--ice-400); } .asn-proc-card__pill{ font-family:var(--font-d); font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ice-300); background:rgba(111,169,222,.12); border:1px solid var(--line); border-radius:999px; padding:7px 14px; } .asn-proc-card h3{ font-family:var(--font-d); font-weight:600; font-size:1.3rem; color:#fff; margin-bottom:12px; line-height:1.28; } .asn-proc-card p{ font-size:14px; line-height:1.7; color:var(--soft-2); margin-bottom:26px; } .asn-proc-card__link{ margin-top:auto; display:inline-flex; align-items:center; justify-content:space-between; gap:10px; font-family:var(--font-d); font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ice-500); padding-top:20px; border-top:1px solid var(--line); transition:color .3s; } .asn-proc-card__link svg{ transition:transform .35s cubic-bezier(.2,.7,.3,1); } .asn-proc-card:hover .asn-proc-card__link{ color:var(--ice-300); } .asn-proc-card:hover .asn-proc-card__link svg{ transform:translateX(4px); } /* ── Why private (light split with benefit rows) ── */ .asn-whysplit{ padding:clamp(90px,10vw,150px) 0; } .asn-whysplit__grid{ display:grid; grid-template-columns:6fr 5fr; gap:clamp(48px,6vw,96px); align-items:center; } .asn-whysplit__content .asn-h2{ margin-bottom:24px; } .asn-whysplit__content .asn-lead{ margin-bottom:22px; } .asn-whysplit__content > p{ font-size:15.5px; line-height:1.8; color:var(--ink-soft); margin-bottom:30px; } .asn-whysplit__media{ position:relative; padding:24px 24px 0 0; } .asn-whysplit__media::before{ content:''; position:absolute; top:0; right:0; width:60%; height:56%; border:1px solid #C7DCEF; border-radius:var(--rad); } .asn-whysplit__media img{ position:relative; width:94%; border-radius:var(--rad); aspect-ratio:11/10; object-fit:cover; box-shadow:0 40px 80px -34px rgba(18,39,65,.35); } .asn-benefits{ display:flex; flex-direction:column; gap:4px; } .asn-benefit{ display:flex; gap:16px; align-items:flex-start; padding:16px 0; border-top:1px solid var(--line-light); } .asn-benefit:last-child{ border-bottom:1px solid var(--line-light); } .asn-benefit__icon{ width:38px; height:38px; border-radius:11px; flex:none; display:flex; align-items:center; justify-content:center; background:rgba(111,169,222,.12); color:var(--ice-700); } .asn-benefit h4{ font-family:var(--font-d); font-weight:600; font-size:15px; color:var(--ink); margin-bottom:4px; } .asn-benefit p{ font-size:13.5px; line-height:1.6; color:var(--ink-soft); } /* ── Process (light, 4 numbered steps) ── */ .asn-process{ padding:0 0 clamp(90px,10vw,150px); } /* asn-process ships with no top padding because on the pillar pages it follows a padded light section. On pages where it is the FIRST light section after a dark hero/panel (how-it-works, contact) that leaves its heading with no top gap, so give it the standard section top padding there, scoped by page id. */ .page-id-449 .asn-process, .page-id-453 .asn-process{ padding-top:clamp(72px,8vw,120px); } .asn-process__head{ text-align:center; max-width:720px; margin:0 auto 60px; } .asn-process__head .asn-h2{ margin-bottom:18px; } .asn-process__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; } .asn-pstep{ position:relative; background:#fff; border:1px solid #DFE9F4; border-radius:var(--rad); padding:40px 28px 34px; overflow:hidden; transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s; } .asn-pstep:hover{ transform:translateY(-5px); box-shadow:0 30px 60px -32px rgba(18,39,65,.2); } .asn-pstep__num{ font-family:var(--font-d); font-weight:700; font-size:54px; line-height:1; color:transparent; -webkit-text-stroke:1px rgba(61,120,184,.4); margin-bottom:20px; } .asn-pstep h3{ font-family:var(--font-d); font-weight:600; font-size:1.1rem; color:var(--ink); margin-bottom:10px; } .asn-pstep p{ font-size:14px; line-height:1.65; color:var(--ink-soft); } /* ═══════════════════════════════════════════════════════════════════════════ HUB PAGE COMPONENTS (/procedures/) ═══════════════════════════════════════════════════════════════════════════ */ /* ── Specialty pillar cards ────────────────────────────────────────────────── Three large white cards, one per specialty. Unlike .asn-rel-card these carry a list of the procedures inside the cluster, because the hub's whole job is to route a patient DOWN into the right silo in one click. Padding is bottom-only: the section above supplies the top. */ .asn-hub{ padding:0 0 clamp(90px,10vw,150px); } .asn-hub__head{ text-align:center; max-width:820px; margin:0 auto 52px; } .asn-hub__head .asn-h2{ margin-bottom:18px; } .asn-hub__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; } .asn-hub-card{ display:flex; flex-direction:column; background:#fff; border:1px solid #DFE9F4; border-radius:var(--rad); padding:clamp(32px,3.2vw,44px); transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s,border-color .45s; } .asn-hub-card:hover{ transform:translateY(-6px); box-shadow:0 34px 70px -30px rgba(18,39,65,.22); border-color:#C7DCEF; } .asn-hub-card__pill{ align-self:flex-start; font-family:var(--font-d); font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ice-700); background:rgba(111,169,222,.13); border-radius:999px; padding:8px 16px; margin-bottom:22px; } .asn-hub-card h3{ font-family:var(--font-d); font-weight:600; font-size:clamp(1.3rem,1.8vw,1.6rem); color:var(--ink); margin-bottom:12px; line-height:1.25; } .asn-hub-card > p{ font-size:14.5px; line-height:1.75; color:var(--ink-soft); margin-bottom:24px; } .asn-hub-card__list{ margin-bottom:26px; border-top:1px solid var(--line-light); } .asn-hub-card__list li{ border-bottom:1px solid var(--line-light); } .asn-page .asn-hub-card__list a{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0; font-size:14.5px; font-weight:500; color:var(--ink-soft); transition:color .3s,padding .3s; } .asn-page .asn-hub-card__list a:hover{ color:var(--ice-700); padding-left:6px; } .asn-hub-card__list svg{ flex:none; color:var(--ice-600); opacity:.55; transition:transform .35s cubic-bezier(.2,.7,.3,1),opacity .3s; } .asn-page .asn-hub-card__list a:hover svg{ transform:translateX(4px); opacity:1; } .asn-hub-card__link{ margin-top:auto; display:inline-flex; align-items:center; justify-content:space-between; gap:10px; font-family:var(--font-d); font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ice-600); padding-top:20px; border-top:1px solid var(--line-light); transition:color .3s; } .asn-hub-card__link svg{ transition:transform .35s cubic-bezier(.2,.7,.3,1); } .asn-hub-card:hover .asn-hub-card__link{ color:var(--ice-700); } .asn-hub-card:hover .asn-hub-card__link svg{ transform:translateX(4px); } /* ═══════════════════════════════════════════════════════════════════════════ ABOUT PAGE COMPONENTS ═══════════════════════════════════════════════════════════════════════════ */ .asn-story{ padding:clamp(72px,8vw,120px) 0; } .asn-story__grid{ display:grid; grid-template-columns:6fr 5fr; gap:clamp(48px,6vw,96px); align-items:center; } .asn-story__content .asn-h2{ margin-bottom:26px; } .asn-story__content p{ font-size:16px; line-height:1.85; color:var(--ink-soft); margin-bottom:20px; } .asn-story__content p:last-of-type{ margin-bottom:0; } .asn-story__content strong{ color:var(--ink); font-weight:600; } .asn-story__media{ position:relative; padding:24px 0 0 24px; } .asn-story__media::before{ content:''; position:absolute; top:0; left:0; width:60%; height:56%; border:1px solid #C7DCEF; border-radius:var(--rad); } .asn-story__media img{ position:relative; width:94%; margin-left:auto; border-radius:var(--rad); aspect-ratio:11/10; object-fit:cover; box-shadow:0 40px 80px -34px rgba(18,39,65,.35); } .asn-band{ padding:clamp(72px,8vw,120px) 0; position:relative; overflow:hidden; } .asn-band__watermark{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-family:var(--font-d); font-weight:800; font-size:clamp(90px,15vw,220px); line-height:1; color:transparent; -webkit-text-stroke:1px rgba(111,169,222,.05); user-select:none; pointer-events:none; white-space:nowrap; } .asn-band__inner{ position:relative; text-align:center; max-width:900px; margin:0 auto; } .asn-band__inner .asn-h2{ margin-bottom:22px; } .asn-band__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:58px; } .asn-band-stat{ background:linear-gradient(180deg,rgba(19,41,76,.5) 0%,rgba(15,37,71,.2) 100%); border:1px solid var(--line); border-radius:var(--rad); padding:40px 28px; } .asn-band-stat__num{ font-family:var(--font-d); font-weight:300; font-size:clamp(2.6rem,4vw,3.6rem); line-height:1; color:#fff; margin-bottom:14px; } .asn-band-stat__num span{ color:var(--ice-400); } .asn-band-stat p{ font-size:14px; line-height:1.65; color:var(--soft-2); } .asn-path{ padding:clamp(80px,9vw,130px) 0; } .asn-path__grid{ display:grid; grid-template-columns:5fr 6fr; gap:clamp(48px,6vw,96px); align-items:center; } .asn-path__media{ position:relative; padding:24px 24px 0 0; order:0; } .asn-path__media::before{ content:''; position:absolute; top:0; right:0; width:60%; height:56%; border:1px solid #C7DCEF; border-radius:var(--rad); } .asn-path__media img{ position:relative; width:94%; border-radius:var(--rad); aspect-ratio:11/10; object-fit:cover; box-shadow:0 40px 80px -34px rgba(18,39,65,.35); } .asn-path__content .asn-h2{ margin-bottom:24px; } .asn-path__content .asn-lead{ margin-bottom:22px; } .asn-path__content p{ font-size:15.5px; line-height:1.8; color:var(--ink-soft); margin-bottom:28px; } .asn-path__badge{ display:inline-flex; align-items:center; gap:11px; font-family:var(--font-d); font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ice-700); background:#EFF6FC; border:1px solid #D7E7F5; border-radius:12px; padding:14px 20px; } .asn-path__badge svg{ flex:none; } .asn-principles{ padding:clamp(90px,10vw,150px) 0; position:relative; overflow:hidden; } .asn-principles__watermark{ position:absolute; left:50%; top:-8%; transform:translateX(-50%); font-family:var(--font-d); font-weight:800; font-size:clamp(100px,16vw,240px); line-height:1; color:transparent; -webkit-text-stroke:1px rgba(111,169,222,.05); user-select:none; pointer-events:none; white-space:nowrap; } .asn-principles__head{ position:relative; text-align:center; max-width:820px; margin:0 auto 64px; } .asn-principles__head .asn-h2{ margin-bottom:22px; } .asn-principles__grid{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:26px; } .asn-principle-card{ background:linear-gradient(180deg,rgba(19,41,76,.5) 0%,rgba(15,37,71,.2) 100%); border:1px solid var(--line); border-radius:var(--rad); padding:44px 34px 40px; transition:transform .45s cubic-bezier(.2,.7,.3,1),border-color .45s; } .asn-principle-card:hover{ transform:translateY(-6px); border-color:var(--line-strong); } .asn-principle-card__icon{ width:62px; height:62px; border-radius:18px; margin-bottom:26px; display:flex; align-items:center; justify-content:center; background:rgba(111,169,222,.1); border:1px solid var(--line); color:var(--ice-400); } .asn-principle-card h3{ font-family:var(--font-d); font-weight:600; font-size:1.15rem; color:#fff; margin-bottom:13px; line-height:1.35; } .asn-principle-card p{ font-size:14.5px; line-height:1.75; color:var(--soft-2); } .asn-model{ padding:clamp(90px,10vw,150px) 0; } .asn-model__head{ text-align:center; max-width:760px; margin:0 auto 60px; } .asn-model__head .asn-h2{ margin-bottom:18px; } .asn-model__rows{ max-width:960px; margin:0 auto; display:flex; flex-direction:column; gap:20px; } .asn-model-row{ display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:flex-start; background:#fff; border:1px solid #DFE9F4; border-radius:var(--rad); padding:34px 40px; transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s; } .asn-model-row:hover{ transform:translateY(-4px); box-shadow:0 30px 60px -32px rgba(18,39,65,.2); } .asn-model-row__icon{ width:56px; height:56px; border-radius:16px; flex:none; display:flex; align-items:center; justify-content:center; background:rgba(111,169,222,.12); color:var(--ice-700); } .asn-model-row h3{ font-family:var(--font-d); font-weight:600; font-size:1.2rem; color:var(--ink); margin-bottom:10px; } .asn-model-row p{ font-size:15px; line-height:1.75; color:var(--ink-soft); } /* ═══════════════════════════════════════════════════════════════════════════ LEGAL PAGES (/privacy-policy/, /terms-of-use/) ═══════════════════════════════════════════════════════════════════════════ */ /* ── Long-form legal document ─────────────────────────────────────────────── Added for the privacy policy and terms of use. Nothing in the system could set long-form prose with numbered sections: every other component is a card or a split. Narrower measure than --wrap on purpose, because legal text has to be readable, and 1400px of it is not. */ .asn-legal{ padding:clamp(72px,8vw,120px) 0 clamp(90px,10vw,150px); } .asn-legal__inner{ max-width:920px; margin:0 auto; } .asn-legal__meta{ display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center; padding-bottom:26px; margin-bottom:40px; border-bottom:1px solid var(--line-light); font-family:var(--font-d); font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ice-700); } .asn-legal__toc{ background:#fff; border:1px solid #DFE9F4; border-radius:var(--rad); padding:32px 34px; margin-bottom:52px; } .asn-legal__toc h2{ font-family:var(--font-d); font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:18px; } .asn-legal__toc ol{ list-style:none; counter-reset:asnleg; columns:2; column-gap:36px; } .asn-legal__toc li{ counter-increment:asnleg; break-inside:avoid; padding:7px 0; } .asn-page .asn-legal__toc a{ display:flex; gap:12px; font-size:14.5px; line-height:1.5; color:var(--ink-soft); transition:color .3s; } .asn-page .asn-legal__toc a::before{ content:counter(asnleg) '.'; flex:none; font-family:var(--font-d); font-weight:700; color:var(--ice-600); min-width:20px; } .asn-page .asn-legal__toc a:hover{ color:var(--ice-700); } .asn-legal__block{ margin-bottom:48px; scroll-margin-top:120px; } .asn-legal__block:last-child{ margin-bottom:0; } .asn-legal__block .asn-h2{ font-size:clamp(1.5rem,2.2vw,2rem); margin-bottom:20px; } .asn-legal__block h3{ font-family:var(--font-d); font-weight:600; font-size:1.1rem; color:var(--ink); margin:30px 0 12px; } .asn-legal__block p{ font-size:16px; line-height:1.85; color:var(--ink-soft); margin-bottom:18px; } .asn-legal__block p:last-child{ margin-bottom:0; } .asn-legal__block strong{ color:var(--ink); font-weight:600; } .asn-page .asn-legal__block a{ color:var(--ice-600); font-weight:600; transition:color .3s; } .asn-page .asn-legal__block a:hover{ color:var(--ice-700); } .asn-legal__block ul{ margin:0 0 20px; } .asn-legal__block ul li{ display:flex; gap:14px; align-items:flex-start; padding:8px 0; font-size:15.5px; line-height:1.75; color:var(--ink-soft); } .asn-legal__block ul li::before{ content:''; flex:none; width:6px; height:6px; margin-top:11px; border-radius:50%; background:var(--ice-500); } .asn-legal__note{ font-size:14.5px; line-height:1.75; color:var(--ink-soft); background:#EFF6FC; border:1px solid #D7E7F5; border-radius:16px; padding:22px 28px; margin-bottom:20px; } .asn-legal__note strong{ color:var(--ink); font-weight:600; } /* ═══════════════════════════════════════════════════════════════════════════ SURGEONS PAGE (roster) ═══════════════════════════════════════════════════════════════════════════ */ .asn-surg{ padding:clamp(72px,8vw,120px) 0 clamp(80px,9vw,130px); } .asn-surg__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap; margin-bottom:52px; } .asn-surg__head .asn-h2{ max-width:600px; } .asn-surg__note{ margin-top:14px; font-size:15px; line-height:1.7; color:var(--ink-soft); max-width:640px; } .asn-surg__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; } .asn-surg-card{ display:flex; flex-direction:column; background:#fff; border:1px solid #DFE9F4; border-radius:var(--rad); overflow:hidden; transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s; } .asn-surg-card:hover{ transform:translateY(-6px); box-shadow:0 34px 70px -30px rgba(18,39,65,.22); } .asn-surg-card.is-hide{ display:none; } .asn-surg-card.is-showing{ animation:asnCardIn .5s cubic-bezier(.2,.7,.3,1); } @keyframes asnCardIn{ from{opacity:0;transform:translateY(18px);} to{opacity:1;transform:none;} } .asn-surg-card__media{ position:relative; aspect-ratio:4/3.4; overflow:hidden; background:var(--n-700); } .asn-surg-card__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1); } .asn-surg-card:hover .asn-surg-card__media img{ transform:scale(1.04); } .asn-surg-card__badge{ position:absolute; left:16px; top:16px; z-index:2; display:inline-flex; align-items:center; gap:7px; font-family:var(--font-d); font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#fff; background:rgba(6,20,38,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border:1px solid rgba(169,205,238,.28); border-radius:999px; padding:8px 14px; } .asn-surg-card__badge svg{ flex:none; } .asn-surg-card__body{ padding:30px 30px 32px; display:flex; flex-direction:column; flex:1; } .asn-surg-card__spec{ font-family:var(--font-d); font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ice-700); margin-bottom:12px; } .asn-surg-card h2{ font-family:var(--font-d); font-weight:600; color:var(--ink); font-size:clamp(1.35rem,1.7vw,1.6rem); line-height:1.2; margin-bottom:6px; } .asn-surg-card__cred{ font-family:var(--font-d); font-size:12.5px; font-weight:600; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:20px; } .asn-surg-card__desc{ font-size:14.5px; line-height:1.75; color:var(--ink-soft); margin-bottom:24px; } .asn-surg-card__focus{ margin-top:auto; padding-top:22px; border-top:1px solid var(--line-light); } .asn-surg-card__focus-label{ font-family:var(--font-d); font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); opacity:.7; margin-bottom:14px; } .asn-surg-card__tags{ display:flex; flex-wrap:wrap; gap:8px; } .asn-surg-card__tag{ font-family:var(--font-d); font-size:11.5px; font-weight:600; letter-spacing:.04em; color:var(--ice-700); background:rgba(111,169,222,.12); border-radius:999px; padding:8px 15px; } /* Pillar link at the foot of each surgeon card (Phase 2). Uses .asn-arrow-link for styling; this rule only supplies the spacing above it. */ .asn-surg-card__more{ margin-top:20px; } .asn-surg__foot{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:center; text-align:center; margin-top:52px; padding:34px 40px; background:#fff; border:1px solid #DFE9F4; border-radius:var(--rad); } .asn-surg__foot p{ font-size:15.5px; color:var(--ink-soft); } .asn-surg__foot strong{ font-family:var(--font-d); font-weight:600; color:var(--ink); } /* ═══════════════════════════════════════════════════════════════════════════ FACILITIES PAGE ═══════════════════════════════════════════════════════════════════════════ */ .asn-fac{ padding:clamp(72px,8vw,120px) 0 clamp(80px,9vw,130px); } .asn-fac__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap; margin-bottom:52px; } .asn-fac__head .asn-h2{ max-width:640px; } .asn-fac__note{ margin-top:14px; font-size:15px; line-height:1.7; color:var(--ink-soft); max-width:620px; } .asn-fac__grid{ display:flex; flex-direction:column; gap:32px; } .asn-fac-card{ display:grid; grid-template-columns:5fr 7fr; background:#fff; border:1px solid #DFE9F4; border-radius:var(--rad); overflow:hidden; transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s; } .asn-fac-card:hover{ transform:translateY(-6px); box-shadow:0 34px 70px -30px rgba(18,39,65,.22); } .asn-fac-card.is-hide{ display:none; } .asn-fac-card.is-showing{ animation:asnCardIn .5s cubic-bezier(.2,.7,.3,1); } .asn-fac-card__media{ position:relative; min-height:380px; } .asn-fac-card__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .asn-fac-card__body{ padding:clamp(32px,3.4vw,50px); } .asn-fac-card__chip{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-d); font-size:10.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ice-700); background:rgba(111,169,222,.13); border-radius:999px; padding:9px 18px; margin-bottom:22px; } .asn-fac-card__chip svg{ flex:none; } .asn-fac-card h2{ font-family:var(--font-d); font-weight:600; color:var(--ink); font-size:clamp(1.45rem,2vw,1.85rem); margin-bottom:14px; } .asn-fac-card__desc{ font-size:15.5px; line-height:1.8; color:var(--ink-soft); max-width:640px; margin-bottom:26px; } .asn-fac-card__feats{ display:grid; grid-template-columns:1fr 1fr; gap:10px 28px; margin-bottom:28px; } .asn-fac-card__feats li{ display:flex; align-items:flex-start; gap:11px; font-size:14px; line-height:1.55; color:var(--ink-soft); } .asn-fac-card__feats svg{ flex:none; margin-top:3px; } .asn-fac-card__ribbon{ display:inline-flex; align-items:center; gap:11px; font-family:var(--font-d); font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ice-700); background:#EFF6FC; border:1px solid #D7E7F5; border-radius:12px; padding:13px 18px; } .asn-fac-card__ribbon svg{ flex:none; } /* ═══════════════════════════════════════════════════════════════════════════ GLOBAL HEADER (.asn-hd) · Theme Builder → Header template ═══════════════════════════════════════════════════════════════════════════ */ .asn-hd{ position:relative;z-index:2000; font-family:var(--font-b);color:var(--soft); -webkit-font-smoothing:antialiased; } .asn-hd *,.asn-hd *::before,.asn-hd *::after{box-sizing:border-box;margin:0;padding:0;} .asn-hd a{text-decoration:none;color:inherit;} .asn-hd ul{list-style:none;} .asn-hd button{background:none;border:none;font:inherit;color:inherit;cursor:pointer;} .asn-hd a:focus-visible,.asn-hd button:focus-visible{outline:2px solid var(--ice-400);outline-offset:3px;border-radius:6px;} .asn-lock{overflow:hidden !important;} /* ── Utility top bar ────────────────────────────── */ .asn-hd__top{background:var(--n-900);border-bottom:1px solid rgba(111,169,222,.1);} .asn-hd__top-inner{ display:flex;align-items:center;justify-content:space-between;gap:24px; padding:0 clamp(20px,3vw,48px);height:42px; } .asn-hd__top-note{ font-family:var(--font-d);font-size:10.5px;font-weight:600; letter-spacing:.18em;text-transform:uppercase;color:var(--soft-2); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .asn-hd__top-links{display:flex;align-items:center;gap:28px;flex:none;} .asn-hd__top-links a{ display:inline-flex;align-items:center;gap:9px; font-family:var(--font-d);font-size:11.5px;font-weight:600; letter-spacing:.1em;color:var(--ice-300);transition:color .3s;white-space:nowrap; } .asn-hd__top-links a:hover{color:#fff;} .asn-hd__top-links svg{flex:none;} /* ── Main bar ───────────────────────────────────── */ .asn-hd__bar{ position:relative;background:var(--n-800); border-bottom:1px solid var(--line); transition:background .35s,box-shadow .35s; } .asn-hd__bar-inner{ display:flex;align-items:center;gap:clamp(20px,2.5vw,44px); padding:0 clamp(20px,3vw,48px);height:86px; transition:height .35s; } .asn-hd.is-stuck .asn-hd__bar{ position:fixed;top:0;left:0;right:0;z-index:2000; background:rgba(9,26,50,.94); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); box-shadow:0 18px 50px -20px rgba(2,8,18,.75); } .asn-hd.is-stuck .asn-hd__bar-inner{height:74px;} .asn-hd__spacer{height:0;} .asn-hd__logo{display:inline-flex;align-items:center;flex:none;} .asn-hd__logo img{display:block;height:54px;width:auto;transition:height .35s;} .asn-hd.is-stuck .asn-hd__logo img{height:46px;} /* ── Desktop nav ────────────────────────────────── */ .asn-hd__nav{flex:1;display:flex;justify-content:center;} .asn-hd__nav > ul{display:flex;align-items:center;gap:clamp(4px,1vw,14px);} .asn-hd__item{position:relative;} .asn-hd__item--mega{position:static;} .asn-hd .asn-hd__link{ display:inline-flex;align-items:center;gap:8px; font-family:var(--font-d);font-size:12.5px;font-weight:600; letter-spacing:.15em;text-transform:uppercase;color:#D6E3F2; padding:14px 16px;position:relative;transition:color .3s;white-space:nowrap; } .asn-hd__link::after{ content:'';position:absolute;left:16px;right:16px;bottom:6px;height:2px; background:var(--ice-500);border-radius:2px; transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.3,1); } .asn-hd__link:hover,.asn-hd__link.is-current{color:var(--ice-400);} .asn-hd__link:hover::after,.asn-hd__link.is-current::after{transform:scaleX(1);} .asn-hd__chev{transition:transform .3s;flex:none;} .asn-hd__item.is-open .asn-hd__chev{transform:rotate(180deg);} .asn-hd__item.is-open > .asn-hd__link{color:var(--ice-400);} .asn-hd__item.is-open > .asn-hd__link::after{transform:scaleX(1);} /* ── Actions ────────────────────────────────────── */ .asn-hd__actions{display:flex;align-items:center;gap:16px;flex:none;} .asn-hd .asn-hd__btn{ display:inline-flex;align-items:center;gap:11px; font-family:var(--font-d);font-size:11.5px;font-weight:700; letter-spacing:.15em;text-transform:uppercase; background:var(--ice-500);color:var(--n-900); padding:15px 28px;border-radius:999px;white-space:nowrap; transition:background .3s,transform .3s,box-shadow .3s; } .asn-hd__btn svg{flex:none;transition:transform .3s;} .asn-hd__btn:hover{background:var(--ice-400);transform:translateY(-1px);box-shadow:0 14px 30px -12px rgba(111,169,222,.5);} .asn-hd__btn:hover svg{transform:translateX(4px);} /* ── Burger (mobile trigger) ────────────────────── */ .asn-hd__burger{ display:none;width:46px;height:46px;border-radius:12px; border:1px solid var(--line);position:relative;flex:none; transition:border-color .3s,background .3s; } .asn-hd__burger:hover{border-color:var(--line-strong);background:rgba(111,169,222,.06);} .asn-hd__burger span{ position:absolute;left:13px;right:13px;height:1.8px;border-radius:2px; background:var(--ice-300);transition:transform .35s,opacity .3s,top .35s; } .asn-hd__burger span:nth-child(1){top:16px;} .asn-hd__burger span:nth-child(2){top:22px;} .asn-hd__burger span:nth-child(3){top:28px;} .asn-hd__burger.is-open span:nth-child(1){top:22px;transform:rotate(45deg);} .asn-hd__burger.is-open span:nth-child(2){opacity:0;} .asn-hd__burger.is-open span:nth-child(3){top:22px;transform:rotate(-45deg);} /* ── Mega menu (Procedures) ─────────────────────── */ .asn-hd__mega{ position:absolute;left:0;right:0;top:100%; background:linear-gradient(180deg,#0d2449 0%,#0a1c38 100%); border-top:1px solid var(--line);border-bottom:1px solid var(--line); box-shadow:0 50px 90px -30px rgba(2,8,18,.85); opacity:0;visibility:hidden;transform:translateY(14px);pointer-events:none; transition:opacity .35s cubic-bezier(.2,.7,.3,1),transform .35s cubic-bezier(.2,.7,.3,1),visibility 0s .35s; } .asn-hd__item.is-open .asn-hd__mega{ opacity:1;visibility:visible;transform:none;pointer-events:auto; transition:opacity .35s cubic-bezier(.2,.7,.3,1),transform .35s cubic-bezier(.2,.7,.3,1),visibility 0s 0s; } .asn-hd__mega-inner{ max-width:1400px;margin:0 auto; display:grid;grid-template-columns:284px 1fr 320px;gap:clamp(28px,3vw,52px); padding:40px clamp(24px,3.5vw,56px) 44px; } /* Rail holds six specialties (Phase 2). Tightened from the original three-tab spacing so the column stays compact; single line-height on the description. */ .asn-hd__mega-rail{display:flex;flex-direction:column;gap:5px;} .asn-hd__tab{ text-align:left;padding:12px 16px;border-radius:12px; border:1px solid transparent;transition:background .3s,border-color .3s; } .asn-hd__tab strong{ display:flex;align-items:center;justify-content:space-between;gap:12px; font-family:var(--font-d);font-size:13.5px;font-weight:600; letter-spacing:.04em;color:#E8F1FA;margin-bottom:3px; } .asn-hd__tab strong svg{opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s;flex:none;color:var(--ice-400);} .asn-hd__tab span{display:block;font-size:12px;line-height:1.4;color:var(--soft-2);} .asn-hd__tab:hover,.asn-hd__tab.is-active{background:rgba(111,169,222,.08);border-color:var(--line);} .asn-hd__tab.is-active strong{color:var(--ice-300);} .asn-hd__tab.is-active strong svg{opacity:1;transform:none;} .asn-hd .asn-hd__mega-all{ margin-top:auto;padding:18px 18px 4px; display:inline-flex;align-items:center;gap:10px; font-family:var(--font-d);font-size:11.5px;font-weight:700; letter-spacing:.18em;text-transform:uppercase;color:var(--ice-500); transition:color .3s; } .asn-hd__mega-all svg{transition:transform .3s;} .asn-hd__mega-all:hover{color:var(--ice-300);} .asn-hd__mega-all:hover svg{transform:translateX(4px);} .asn-hd__panel{display:none;} .asn-hd__panel.is-active{display:block;animation:asnHdFade .4s cubic-bezier(.2,.7,.3,1);} @keyframes asnHdFade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}} .asn-hd .asn-hd__panel-head{ display:inline-flex;align-items:center;gap:10px; font-family:var(--font-d);font-size:11.5px;font-weight:700; letter-spacing:.2em;text-transform:uppercase;color:var(--ice-400); padding-bottom:16px;margin-bottom:10px;border-bottom:1px solid var(--line); width:100%;transition:color .3s; } .asn-hd__panel-head svg{transition:transform .3s;} .asn-hd__panel-head:hover{color:var(--ice-300);} .asn-hd__panel-head:hover svg{transform:translateX(4px);} .asn-hd__panel-links{display:grid;grid-template-columns:1fr 1fr;column-gap:36px;} .asn-hd__panel-links a{ display:flex;align-items:center;justify-content:space-between;gap:14px; font-size:15px;font-weight:500;color:#C9D8EA; padding:13px 2px;border-bottom:1px solid rgba(111,169,222,.09); transition:color .3s,padding-left .3s; } .asn-hd__panel-links a svg{flex:none;color:var(--ice-600);opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s;} .asn-hd__panel-links a:hover{color:var(--ice-300);padding-left:8px;} .asn-hd__panel-links a:hover svg{opacity:1;transform:none;} .asn-hd__mega-feature{ background:rgba(111,169,222,.07);border:1px solid var(--line); border-radius:18px;padding:30px 28px;align-self:start; } .asn-hd__mega-feature h4{ font-family:var(--font-d);font-size:16px;font-weight:600;color:#fff;margin-bottom:10px; } .asn-hd__mega-feature p{font-size:13.5px;line-height:1.65;color:var(--soft-2);margin-bottom:22px;} .asn-hd__mega-feature .asn-hd__btn{padding:13px 24px;font-size:11px;} .asn-hd .asn-hd__mega-tel{ display:inline-flex;align-items:center;gap:9px;margin-top:18px; font-family:var(--font-d);font-size:12px;font-weight:600; letter-spacing:.08em;color:var(--ice-300);transition:color .3s; } .asn-hd__mega-tel:hover{color:#fff;} /* ── Simple dropdown (About) ────────────────────── */ .asn-hd__drop{ position:absolute;top:100%;left:50%;transform:translate(-50%,14px); width:340px;background:linear-gradient(180deg,#0d2449 0%,#0a1c38 100%); border:1px solid var(--line);border-radius:16px;padding:10px; box-shadow:0 40px 80px -25px rgba(2,8,18,.85); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .3s cubic-bezier(.2,.7,.3,1),transform .3s cubic-bezier(.2,.7,.3,1),visibility 0s .3s; } .asn-hd__item.is-open .asn-hd__drop{ opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto; transition:opacity .3s cubic-bezier(.2,.7,.3,1),transform .3s cubic-bezier(.2,.7,.3,1),visibility 0s 0s; } .asn-hd__drop a{display:block;padding:14px 16px;border-radius:12px;transition:background .25s;} .asn-hd__drop a:hover{background:rgba(111,169,222,.08);} .asn-hd__drop strong{ display:block;font-family:var(--font-d);font-size:13.5px;font-weight:600; letter-spacing:.03em;color:#E8F1FA;margin-bottom:3px; } .asn-hd__drop span{display:block;font-size:12px;line-height:1.5;color:var(--soft-2);} /* ── Off-canvas mobile menu ─────────────────────── */ .asn-hd__scrim{ position:fixed;inset:0;z-index:2900; background:rgba(3,10,20,.62); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); opacity:0;pointer-events:none;transition:opacity .4s; } .asn-hd__scrim.is-open{opacity:1;pointer-events:auto;} .asn-hd__mnav{ position:fixed;top:0;right:0;bottom:0;z-index:3000; width:min(400px,90vw); background:linear-gradient(180deg,#0c2347 0%,#081729 100%); border-left:1px solid var(--line); transform:translateX(105%);transition:transform .45s cubic-bezier(.2,.7,.25,1); display:flex;flex-direction:column; padding:22px 26px 30px;overflow-y:auto; } .asn-hd__mnav.is-open{transform:none;} .asn-hd__mnav-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;} .asn-hd__mnav-top img{height:42px;width:auto;display:block;} .asn-hd__close{ width:44px;height:44px;border-radius:12px;border:1px solid var(--line); position:relative;transition:border-color .3s,background .3s;flex:none; } .asn-hd__close:hover{border-color:var(--line-strong);background:rgba(111,169,222,.06);} .asn-hd__close::before,.asn-hd__close::after{ content:'';position:absolute;left:13px;right:13px;top:21px;height:1.8px; border-radius:2px;background:var(--ice-300); } .asn-hd__close::before{transform:rotate(45deg);} .asn-hd__close::after{transform:rotate(-45deg);} .asn-hd .asn-hd__mlink,.asn-hd .asn-hd__macc{ display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%; font-family:var(--font-d);font-size:14px;font-weight:600; letter-spacing:.12em;text-transform:uppercase;color:#E2EDF8; padding:19px 2px;border-bottom:1px solid rgba(111,169,222,.12); transition:color .3s;text-align:left; } .asn-hd__mlink:hover,.asn-hd__macc:hover{color:var(--ice-400);} .asn-hd__macc svg{transition:transform .35s;flex:none;color:var(--ice-500);} .asn-hd__macc.is-open svg{transform:rotate(180deg);} .asn-hd__mpanel{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.2,.7,.3,1);} .asn-hd__mpanel-in{padding:16px 2px 22px;border-bottom:1px solid rgba(111,169,222,.12);} .asn-hd__mgroup{margin-bottom:20px;} .asn-hd__mgroup:last-child{margin-bottom:4px;} .asn-hd__mgroup > a{ display:inline-flex;align-items:center;gap:9px; font-family:var(--font-d);font-size:11px;font-weight:700; letter-spacing:.2em;text-transform:uppercase;color:var(--ice-400); margin-bottom:8px; } .asn-hd__mgroup ul a{ display:block;font-size:15px;font-weight:500;color:#BFD0E4; padding:9px 0;transition:color .3s,padding-left .3s; } .asn-hd__mgroup ul a:hover{color:var(--ice-300);padding-left:8px;} .asn-hd .asn-hd__mbtn{ display:flex;align-items:center;justify-content:center;gap:11px; font-family:var(--font-d);font-size:12px;font-weight:700; letter-spacing:.15em;text-transform:uppercase; background:var(--ice-500);color:var(--n-900); padding:18px 28px;border-radius:999px;margin-top:28px; transition:background .3s,transform .3s; } .asn-hd__mbtn:hover{background:var(--ice-400);transform:translateY(-1px);} .asn-hd__mcontact{margin-top:26px;display:flex;flex-direction:column;gap:14px;} .asn-hd__mcontact a{ display:inline-flex;align-items:center;gap:11px; font-family:var(--font-d);font-size:12.5px;font-weight:600; letter-spacing:.08em;color:var(--ice-300);transition:color .3s; } .asn-hd__mcontact a:hover{color:#fff;} /* ── Responsive ─────────────────────────────────── */ @media (max-width:1080px){ .asn-hd__nav{display:none;} .asn-hd__burger{display:block;} .asn-hd__bar-inner{height:76px;justify-content:space-between;} .asn-hd.is-stuck .asn-hd__bar-inner{height:68px;} .asn-hd__logo img{height:46px;} .asn-hd.is-stuck .asn-hd__logo img{height:42px;} } @media (max-width:760px){ .asn-hd__top-note{display:none;} .asn-hd__top-inner{justify-content:center;} } @media (max-width:640px){ .asn-hd__actions .asn-hd__btn{display:none;} .asn-hd__bar-inner{height:70px;} .asn-hd.is-stuck .asn-hd__bar-inner{height:64px;} .asn-hd__logo img{height:41px;} .asn-hd.is-stuck .asn-hd__logo img{height:38px;} } @media (max-width:420px){ .asn-hd__top-links{gap:18px;} .asn-hd__top-links a span{display:none;} } /* ── Reduced motion ─────────────────────────────── */ @media (prefers-reduced-motion:reduce){ .asn-hd *,.asn-hd *::before,.asn-hd *::after{ animation-duration:.01ms !important;transition-duration:.01ms !important; } } /* ═══════════════════════════════════════════════════════════════════════════ GLOBAL FOOTER (.asn-ft) · Theme Builder → Footer template ═══════════════════════════════════════════════════════════════════════════ */ /* The footer sits OUTSIDE .asn-page, so it does not inherit the body font from there. .asn-hd already pins its own font-family; .asn-ft never did, which left it inheriting type from whatever Elementor's global typography happened to be. Pinned explicitly so the footer can never drift from the design system. */ .asn-ft{ position:relative;overflow:hidden; font-family:var(--font-b); background: radial-gradient(900px 500px at 85% 0%, rgba(17,45,86,.55) 0%, rgba(6,20,38,0) 60%), var(--n-900); border-top:1px solid var(--line); font-family:var(--font-b);color:var(--soft); -webkit-font-smoothing:antialiased; } .asn-ft *,.asn-ft *::before,.asn-ft *::after{box-sizing:border-box;margin:0;padding:0;} .asn-ft a{text-decoration:none;color:inherit;} .asn-ft ul{list-style:none;} .asn-ft a:focus-visible{outline:2px solid var(--ice-400);outline-offset:3px;border-radius:6px;} /* Faint arc accents echoing the logo swoosh */ .asn-ft__arcs{position:absolute;inset:0;pointer-events:none;} /* ── Main columns ───────────────────────────────── */ .asn-ft__main{position:relative;} .asn-ft__inner{ max-width:1400px;margin:0 auto; padding:clamp(72px,8vw,110px) 48px clamp(56px,6vw,80px); display:grid;grid-template-columns:4.2fr 2.6fr 2.6fr 3.4fr; gap:clamp(36px,4vw,72px); } .asn-ft__brand img{display:block;height:52px;width:auto;margin-bottom:26px;} .asn-ft__brand p{ font-size:15px;line-height:1.8;color:var(--soft-2); max-width:360px;margin-bottom:30px; } .asn-ft__social{display:flex;gap:12px;} .asn-ft__social a{ display:inline-flex;align-items:center;justify-content:center; width:42px;height:42px;border-radius:50%; border:1px solid var(--line);color:var(--ice-400); transition:border-color .3s,color .3s,background .3s,transform .3s; } .asn-ft__social a:hover{border-color:var(--line-strong);color:var(--ice-300);background:rgba(111,169,222,.08);transform:translateY(-2px);} .asn-ft__head{ font-family:var(--font-d);font-size:12px;font-weight:700; letter-spacing:.24em;text-transform:uppercase;color:var(--ice-500); margin-bottom:24px; } .asn-ft__col ul li a{ display:inline-block;font-size:15px;color:#A8BBD3; padding:8px 0;transition:color .3s,padding-left .3s; } .asn-ft__col ul li a:hover{color:var(--ice-300);padding-left:8px;} .asn-ft__col ul li a.asn-ft__view-all{ font-family:var(--font-d);font-size:12px;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:var(--ice-500); margin-top:8px; } .asn-ft__col ul li a.asn-ft__view-all:hover{color:var(--ice-300);} /* Contact column */ .asn-ft__contact-item{ display:flex;align-items:flex-start;gap:14px; padding:10px 0;font-size:15px;color:#A8BBD3;line-height:1.6; } .asn-ft__contact-item svg{flex:none;margin-top:4px;color:var(--ice-500);} .asn-ft__contact-item a{color:var(--ice-300);transition:color .3s;} .asn-ft__contact-item a:hover{color:#fff;} .asn-ft .asn-ft__btn{ display:inline-flex;align-items:center;gap:11px;margin-top:20px; font-family:var(--font-d);font-size:11.5px;font-weight:700; letter-spacing:.15em;text-transform:uppercase; background:var(--ice-500);color:var(--n-900); padding:15px 28px;border-radius:999px; transition:background .3s,transform .3s,box-shadow .3s; } .asn-ft__btn svg{flex:none;transition:transform .3s;} .asn-ft__btn:hover{background:var(--ice-400);transform:translateY(-1px);box-shadow:0 14px 30px -12px rgba(111,169,222,.5);} .asn-ft__btn:hover svg{transform:translateX(4px);} /* ── Giant watermark ────────────────────────────── */ .asn-ft__wm{ position:relative;overflow:hidden;height:clamp(70px,9vw,130px); pointer-events:none;user-select:none; } .asn-ft__wm span{ position:absolute;left:50%;top:0;transform:translateX(-50%); font-family:var(--font-d);font-weight:800;letter-spacing:.06em; font-size:clamp(110px,15vw,230px);line-height:1;white-space:nowrap; color:transparent;-webkit-text-stroke:1px rgba(111,169,222,.07); } /* ── Bottom bar ─────────────────────────────────── */ .asn-ft__bottom{position:relative;border-top:1px solid var(--line);} .asn-ft__bottom-inner{ max-width:1400px;margin:0 auto;padding:26px 48px 14px; display:flex;align-items:center;justify-content:space-between; gap:16px 36px;flex-wrap:wrap; } .asn-ft__copy{font-size:13px;color:var(--soft-2);} .asn-ft__legal{display:flex;align-items:center;gap:28px;} .asn-ft__legal a{ font-family:var(--font-d);font-size:11.5px;font-weight:600; letter-spacing:.12em;text-transform:uppercase;color:var(--soft-2); transition:color .3s; } .asn-ft__legal a:hover{color:var(--ice-300);} .asn-ft__disclaimer{ max-width:1400px;margin:0 auto;padding:0 48px 30px; font-size:12px;line-height:1.7;color:rgba(143,166,194,.55); } /* ── Responsive ─────────────────────────────────── */ @media (max-width:1080px){ .asn-ft__inner{grid-template-columns:1fr 1fr;gap:52px 44px;} } @media (max-width:680px){ .asn-ft__inner{grid-template-columns:1fr;gap:48px;padding:64px 24px 48px;text-align:center;} .asn-ft__brand img{margin-left:auto;margin-right:auto;} .asn-ft__brand p{margin-left:auto;margin-right:auto;} .asn-ft__social{justify-content:center;} .asn-ft__contact-item{justify-content:center;text-align:left;} .asn-ft__bottom-inner{flex-direction:column;text-align:center;padding:26px 24px 10px;} .asn-ft__disclaimer{padding:0 24px 28px;text-align:center;} } /* ── Reduced motion ─────────────────────────────── */ @media (prefers-reduced-motion:reduce){ .asn-ft *,.asn-ft *::before,.asn-ft *::after{transition-duration:.01ms !important;} } /* ═══════════════════════════════════════════ LAYOUT HOOKS Small classes used in markup as grid children or semantic hooks. min-width:0 stops long content blowing out a CSS grid column. ═══════════════════════════════════════════ */ .asn-phero__col{ min-width:0; } .asn-hd__mega-panels{ min-width:0; } .asn-hd__item--drop{ position:relative; } /* ═══════════════════════════════════════════════════════════════════════════ RESPONSIVE Mobile rule: EVERYTHING centres at <=768px. Headings, leads, cards, buttons. Checkmark lists stay left-aligned inside a centred block so icons line up. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width:1240px){ .asn-stats__card{ padding:48px 44px 42px; } .asn-stat{ padding:0 26px; } } @media (max-width:1080px){ /* Homepage */ .asn-how__grid{ grid-template-columns:repeat(2,1fr); } .asn-values__grid{ grid-template-columns:repeat(2,1fr); } .asn-stats__card{ grid-template-columns:repeat(2,1fr); row-gap:44px; } .asn-stat:nth-child(3){ border-left:none; padding-left:0; } .asn-nat{ grid-template-columns:1fr; } .asn-nat__content{ max-width:none; margin:0; padding:clamp(88px,10vw,120px) 48px; } .asn-nat__media{ min-height:460px; } .asn-net__grid{ grid-template-columns:1fr; gap:72px; } .asn-net__collage{ max-width:640px; } .asn-spec__grid{ grid-template-columns:repeat(2,1fr); } .asn-consult__grid{ grid-template-columns:1fr; gap:44px; } /* Inner */ .asn-phero--split .asn-phero__inner{ grid-template-columns:1fr; gap:52px; } .asn-phero__media{ max-width:560px; } .asn-glance__grid{ grid-template-columns:1fr 1fr; } .asn-ov__grid{ grid-template-columns:1fr; gap:56px; } .asn-ov__media{ max-width:620px; } .asn-comp__grid{ grid-template-columns:1fr; } .asn-tradeoff__grid{ grid-template-columns:1fr; } .asn-cand__grid{ grid-template-columns:1fr; } .asn-rec__track{ grid-template-columns:1fr; gap:32px; } .asn-rec__track::before{ display:none; } .asn-cost__grid{ grid-template-columns:1fr; gap:48px; } .asn-prehab__grid{ grid-template-columns:1fr 1fr; } .asn-hub__grid{ grid-template-columns:1fr; max-width:560px; margin:0 auto; } .asn-rel__grid{ grid-template-columns:1fr; } .asn-surgband__inner{ grid-template-columns:1fr; gap:32px; } .asn-std__grid{ grid-template-columns:repeat(2,1fr); } .asn-match__grid{ grid-template-columns:1fr; gap:64px; } .asn-match__media{ max-width:620px; } /* Pillar */ .asn-wait__grid{ grid-template-columns:1fr; max-width:520px; margin:0 auto; } .asn-trip__grid{ grid-template-columns:1fr 1fr; } .asn-cpanel__grid{ grid-template-columns:1fr; gap:40px; } .asn-procs__grid{ grid-template-columns:1fr 1fr; } .asn-whysplit__grid{ grid-template-columns:1fr; gap:56px; } .asn-whysplit__media{ max-width:620px; } .asn-process__grid{ grid-template-columns:1fr 1fr; } /* About */ .asn-story__grid{ grid-template-columns:1fr; gap:56px; } .asn-story__media{ max-width:620px; } .asn-path__grid{ grid-template-columns:1fr; gap:56px; } .asn-path__media{ max-width:620px; order:1; } .asn-principles__grid{ grid-template-columns:1fr 1fr; } /* Surgeons + Facilities */ .asn-surg__grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:900px){ .asn-fac-card{ grid-template-columns:1fr; } .asn-fac-card__media{ min-height:280px; } } @media (max-width:768px){ .asn-container{ padding:0 24px; } /* ── Homepage ── */ .asn-hero{ padding:14px 14px 0; } .asn-hero__media{ border-radius:26px; min-height:88vh; } .asn-hero__inner{ padding:56px 26px 64px; } .asn-hero__content{ text-align:center; } .asn-hero__lead{ margin-left:auto; margin-right:auto; } .asn-hero__cta{ justify-content:center; } .asn-hero__cta .asn-btn{ width:100%; justify-content:center; } .asn-hero__trust{ justify-content:center; } .asn-hero__scroll{ display:none; } .asn-stats{ padding:0 14px; } .asn-stats__card{ grid-template-columns:1fr; margin-top:-54px; padding:14px 30px; row-gap:0; } .asn-stat{ border-left:none; padding:26px 0; border-top:1px solid var(--line); text-align:center; } .asn-stat:first-child{ border-top:none; } .asn-stat__num{ justify-content:center; } .asn-stats__note{ text-align:center; } .asn-mission__inner{ padding:0 24px; } .asn-how__grid{ grid-template-columns:1fr; } .asn-how__head{ display:block; text-align:center; } .asn-how__head .asn-h2{ margin-bottom:24px; } .asn-how-step{ padding:118px 26px 36px; text-align:center; } .asn-how-step__num{ left:50%; transform:translateX(-50%); } .asn-values__grid{ grid-template-columns:1fr; } .asn-value-card{ text-align:center; } .asn-value-card__icon{ margin-left:auto; margin-right:auto; } .asn-spec__grid{ grid-template-columns:1fr; } .asn-spec__head{ text-align:center; } .asn-spec-card{ padding:38px 28px 34px; text-align:center; } .asn-spec-card > p{ margin-left:auto; margin-right:auto; } .asn-linklist a{ justify-content:center; gap:10px; } .asn-linklist a:hover{ padding-left:4px; } .asn-nat__content{ padding:76px 24px 72px; text-align:center; } .asn-nat__media{ min-height:340px; } .asn-net__content{ text-align:center; } .asn-net__collage{ padding:16px 0 72px 16px; } .asn-net__imgA{ margin:16px 0 0 16px; width:88%; } .asn-net__imgB{ width:58%; border-width:6px; } .asn-net__marks{ max-width:440px; margin-left:auto; margin-right:auto; text-align:left; } .asn-net__cta{ justify-content:center; } .asn-net__cta .asn-btn{ width:100%; justify-content:center; } .asn-consult{ padding:64px 14px 72px; } .asn-consult__panel{ padding:44px 20px 40px; } .asn-consult__info{ text-align:center; } .asn-consult__contact{ align-items:center; } .asn-consult__assure{ justify-content:center; } .asn-form__row{ grid-template-columns:1fr; } .asn-pills{ grid-template-columns:repeat(2,1fr); } /* ── Inner pages ── */ .asn-phero{ text-align:center; } .asn-crumbs{ justify-content:center; flex-wrap:wrap; } .asn-phero .asn-h1, .asn-phero__lead{ margin-left:auto; margin-right:auto; } .asn-phero__meta{ justify-content:center; } .asn-phero__cta{ justify-content:center; } .asn-phero__media-badge{ left:50%; transform:translateX(-50%); bottom:-24px; } .asn-glance__grid{ grid-template-columns:1fr; max-width:420px; margin:0 auto; } .asn-glance-card{ text-align:center; } .asn-ov__content{ text-align:center; } .asn-ov__media{ margin:0 auto; } .asn-comp__head, .asn-cand__head, .asn-rec__head, .asn-faq__head, .asn-rel__head, .asn-std__head, .asn-procs__head, .asn-process__head, .asn-wait__head, .asn-cond__head, .asn-principles__head, .asn-model__head, .asn-prehab__head{ text-align:center; } .asn-prehab__grid{ grid-template-columns:1fr; } .asn-prehab-card{ text-align:center; } .asn-prehab-card__icon{ margin-left:auto; margin-right:auto; } .asn-hub-card{ text-align:center; } .asn-hub-card__pill{ align-self:center; } .asn-hub-card__list{ text-align:left; } .asn-hub-card__link{ justify-content:center; } .asn-comp-card{ text-align:center; } .asn-comp-card dl div{ flex-direction:column; gap:6px; text-align:left; } .asn-comp-card dd{ text-align:left; } .asn-tradeoff-col{ text-align:center; } .asn-tradeoff-col ul li{ text-align:left; } .asn-cand-col{ text-align:center; } .asn-cand-col ul li{ text-align:left; } .asn-cost__content{ text-align:center; } .asn-cost__drivers li{ text-align:left; } .asn-cost-card{ text-align:left; } .asn-surgband__content{ text-align:center; } .asn-surgband__names{ justify-content:center; } .asn-surgband__cta{ width:100%; } .asn-surgband__cta .asn-btn{ width:100%; justify-content:center; } .asn-rel-card{ text-align:center; } .asn-rel-card__pill{ align-self:center; } .asn-rel-card__link{ justify-content:center; } .asn-std__grid{ grid-template-columns:1fr; } .asn-std-card{ text-align:center; } .asn-std-card__icon{ margin-left:auto; margin-right:auto; } .asn-match__content{ text-align:center; } .asn-match__media{ margin:0 auto; } .asn-checks{ max-width:440px; margin-left:auto; margin-right:auto; text-align:left; } .asn-cta{ padding:0 14px 80px; } .asn-cta__actions .asn-btn{ width:100%; justify-content:center; } /* ── Pillar ── */ .asn-trip__grid{ grid-template-columns:1fr; max-width:420px; margin:0 auto; } .asn-trip-leg{ text-align:center; } .asn-trip-leg__icon{ margin-left:auto; margin-right:auto; } .asn-cond__tabs{ gap:8px; } .asn-cpanel__intro{ text-align:center; } .asn-cpanel__list{ grid-template-columns:1fr; text-align:left; } .asn-procs__grid{ grid-template-columns:1fr; } .asn-whysplit__content{ text-align:center; } .asn-benefit{ text-align:left; } .asn-whysplit__media{ margin:0 auto; } .asn-process__grid{ grid-template-columns:1fr; } /* ── About ── */ .asn-story__content{ text-align:center; } .asn-story__media{ margin:0 auto; } .asn-band__grid{ grid-template-columns:1fr; } .asn-path__content{ text-align:center; } .asn-path__media{ margin:0 auto; } .asn-path__badge{ text-align:left; } .asn-principles__grid{ grid-template-columns:1fr; } .asn-principle-card{ text-align:center; } .asn-principle-card__icon{ margin-left:auto; margin-right:auto; } .asn-model-row{ grid-template-columns:1fr; text-align:center; padding:30px 26px; } .asn-model-row__icon{ margin:0 auto; } /* ── Legal pages ── */ .asn-legal__meta{ justify-content:center; text-align:center; } .asn-legal__toc ol{ columns:1; } .asn-legal__block{ text-align:left; } /* ── Surgeons + Facilities ── */ .asn-surg__head, .asn-fac__head{ display:block; text-align:center; } .asn-surg__head .asn-h2, .asn-fac__head .asn-h2{ max-width:none; margin-bottom:0; } .asn-surg__note, .asn-fac__note{ margin:14px auto 28px; } .asn-filter{ justify-content:center; } .asn-surg__grid{ grid-template-columns:1fr; max-width:440px; margin-left:auto; margin-right:auto; } .asn-fac-card__body{ text-align:center; } .asn-fac-card__feats{ grid-template-columns:1fr; max-width:420px; margin-left:auto; margin-right:auto; text-align:left; } } @media (max-width:520px){ .asn-container{ padding:0 20px; } .asn-hero .asn-h1{ letter-spacing:.03em; } .asn-form-card{ padding:26px 18px; } .asn-stats__card{ padding:10px 24px; } .asn-fac-card__body{ padding:28px 22px; } .asn-surg-card__body{ padding:26px 24px 28px; } .asn-fpill, .asn-ctab{ padding:11px 18px; } } /* ═══════════════════════════════════════════ REDUCED MOTION ═══════════════════════════════════════════ */ @media (prefers-reduced-motion:reduce){ .asn-page *, .asn-page *::before, .asn-page *::after, .asn-hd *, .asn-hd *::before, .asn-hd *::after, .asn-ft *, .asn-ft *::before, .asn-ft *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } .asn-reveal{ opacity:1; transform:none; } .asn-hero__content > *{ opacity:1; transform:none; animation:none; } } /* ═══════════════════════════════════════════════════════════════════════════ END OF ACCESS DESIGN SYSTEM ═══════════════════════════════════════════════════════════════════════════ */