/* ══════════════════════════════════════════════════════════════════════════ css/network-join.css — NETWORK JOIN (fw-nj) /network-join, built 6 Oct 2026 as a hybrid with a request form (Manage › Partner With Us › For Clinics › Network Join; requests in Network Join Requests). A For Clinics sibling with its own idea: the clinic keeps its NAME. The name is drawn as a NAMEPLATE on the photographs, and it reads whatever the visitor types. §1 the opening beside a member clinic, its plate live §2 THE LEDGER: a photograph, what stays yours, what the network adds §3 THE TIERS behind a sliding switch; the photograph beside the terms §4 member clinics as a photo rail of plates, filtered by city §5 the standards as a register beside a photograph §6 the way in as one line of numbered stops §7 questions, numbered, two columns §8 the request in FOUR STEPS beside the closing plate PALETTE: blue is this page's voice (a network, trust), mint marks what a clinic keeps, pink only for the plate's member mark. No inline styles. Never a class holding "fa-", "bi-" or "uil-". ══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ 00 · TOKENS & PRIMITIVES ══════════════════════════════════════════════════════════════ */ .fw-nj-page{ --pad:28px; --ink:var(--dk-d); --line:color-mix(in srgb, var(--dk) 10%, transparent); --fade:linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent); --fade-v:linear-gradient(180deg, transparent, var(--line) 14%, var(--line) 86%, transparent); --sec:clamp(30px, 5.4vh, 60px); --gap:clamp(28px, 5vw, 80px); --glow:0 8px 20px -8px color-mix(in srgb, var(--bl-dd) 70%, transparent); --glow-lg:0 14px 28px -10px color-mix(in srgb, var(--bl-dd) 75%, transparent); --ease:cubic-bezier(.22,1,.36,1); --ease-pop:cubic-bezier(.34,1.56,.64,1); background:var(--wh); } .fw-nj{display:block;position:relative;background:var(--wh)} .fw-nj em{font-family:var(--ff);font-style:normal} .fw-nj .fw-ico{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .fw-nj-inner{position:relative;z-index:1;width:100%;padding-inline:var(--pad)} .fw-nj-sec{position:relative;padding:var(--sec) 0} .fw-nj-sec::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;z-index:1;height:1px;background:var(--fade)} .fw-nj-head{display:flex;flex-direction:column;gap:8px;margin-bottom:clamp(18px, 2.8vh, 30px)} .fw-nj-head--row{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:12px 40px;flex-wrap:wrap} .fw-nj-head--row > div:first-child{display:flex;flex-direction:column;gap:8px;max-width:760px} .fw-nj-head--row > .fw-nj-sub{flex:1 1 320px;max-width:520px;text-align:right} .fw-nj-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--bl-d)} .fw-nj-eyebrow .fw-ico{width:16px;height:16px;flex:none} .fw-nj-sample{margin-left:4px;padding:1px 9px;border-radius:999px;background:var(--go-l);color:var(--go-ink);font-size:11.5px;font-weight:700;letter-spacing:0;text-transform:none} .fw-nj-h2{margin:0;font-family:var(--ff);font-weight:600;color:var(--ink);font-size:clamp(26px, 4.2vh, 40px);line-height:1.12;letter-spacing:-.02em;text-wrap:balance} .fw-nj-h3{margin:0;font-family:var(--ff);font-size:17px;font-weight:600;line-height:1.3;color:var(--ink)} .fw-nj-sub{margin:0;font-size:clamp(14.5px, 1.9vh, 16.5px);line-height:1.6;color:var(--g6);text-wrap:pretty} .fw-nj-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;padding:0 26px;border:0;border-radius:999px;background:linear-gradient(150deg, var(--bl-d), var(--bl-dd));box-shadow:var(--glow);color:var(--wh);font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap;transition:transform .25s var(--ease), box-shadow .25s var(--ease)} .fw-nj-btn:hover{color:var(--wh);transform:translateY(-2px);box-shadow:var(--glow-lg)} .fw-nj-btn .bi-arrow-right,.fw-nj-link .bi-arrow-right{transition:transform .25s var(--ease)} .fw-nj-btn:hover .bi-arrow-right,.fw-nj-link:hover .bi-arrow-right{transform:translateX(4px)} .fw-nj-link{display:inline-flex;align-items:center;gap:8px;padding:0;background:none;font-size:14.5px;font-weight:600;color:var(--bl-d);transition:color .2s var(--ease)} .fw-nj-link .fw-ico{width:18px;height:18px} .fw-nj-link:hover{color:var(--bl-dd)} @keyframes fw-nj-rise{from{opacity:0;transform:translateY(12px)}} /* the NAMEPLATE: the clinic's own name, with the network's small mark */ .fw-nj-plate{position:absolute;left:clamp(14px, 2.4vw, 30px);top:clamp(14px, 2.4vw, 30px);display:flex;flex-direction:column;gap:6px;max-width:min(78%, 380px);padding:14px 20px 12px;background:color-mix(in srgb, var(--wh) 94%, transparent);backdrop-filter:blur(8px);box-shadow:0 18px 40px -18px color-mix(in srgb, var(--dk) 55%, transparent);border-left:4px solid var(--bl-d)} .fw-nj-plate b{font-size:clamp(20px, 3.2vh, 28px);font-weight:700;line-height:1.1;letter-spacing:-.02em;color:var(--ink);overflow-wrap:anywhere;transition:opacity .2s var(--ease)} .fw-nj-plate b.is-typed{animation:fw-nj-type .35s var(--ease)} @keyframes fw-nj-type{from{opacity:.4;transform:translateY(3px)}} .fw-nj-plate small{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--g6)} .fw-nj-plate small .fw-ico{width:15px;height:15px;color:var(--pk-d)} .fw-nj-plate--sm{padding:10px 16px 9px} .fw-nj-plate--sm b{font-size:clamp(17px, 2.5vh, 22px)} /* ══════════════════════════════════════════════════════════════ 01 · THE OPENING — your own name on the plate ══════════════════════════════════════════════════════════════ */ .fw-nj .fw-nj-mast{position:relative;padding-bottom:clamp(24px, 4vh, 44px)} .fw-nj-mast__grid{display:grid;grid-template-columns:minmax(0, 1fr) auto;align-items:center;gap:clamp(30px, 5vw, 88px)} .fw-nj-mast__copy{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0} .fw-nj-mast__copy .fw-crumb{margin-bottom:4px} .fw-nj .fw-nj-h1{margin:0;font-size:clamp(36px, 6.4vh, 64px);line-height:1.04;letter-spacing:-.035em;color:var(--ink);text-wrap:balance} .fw-nj .fw-nj-mast .fw-nj-h1 span{display:block;-webkit-text-fill-color:transparent;background:linear-gradient(100deg, var(--bl-d) 0%, var(--bl-dd) 50%, var(--mt-dd) 100%);-webkit-background-clip:text;background-clip:text;color:transparent} .fw-nj-lead{margin:0;max-width:600px;font-size:clamp(16px, 2.2vh, 19px);line-height:1.6;color:var(--g6);text-wrap:pretty} .fw-nj-try{display:flex;flex-direction:column;gap:6px;width:min(100%, 420px);margin:2px 0 0} .fw-nj-try__k{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--g5)} .fw-nj-try__box{display:flex;align-items:center;gap:10px;height:50px;padding:0 16px;border-radius:14px;background:var(--wh);box-shadow:inset 0 0 0 1.5px var(--bl-l2), 0 8px 24px -14px color-mix(in srgb, var(--bl-dd) 45%, transparent);transition:box-shadow .2s var(--ease)} .fw-nj-try__box:focus-within{box-shadow:inset 0 0 0 1.5px var(--bl-d), 0 0 0 4px var(--bl-ring)} .fw-nj-try__box .fw-ico{flex:none;width:18px;height:18px;color:var(--bl-d)} .fw-nj-try__box input{flex:1;min-width:0;height:100%;border:0;background:none;font:inherit;font-size:15.5px;font-weight:600;color:var(--ink);outline:0} .fw-nj-try__box input::placeholder{font-weight:500;color:var(--g5)} .fw-nj-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:6px} .fw-nj-hero{position:relative;margin:0;height:clamp(320px, 52vh, 520px);aspect-ratio:4/3;overflow:hidden} .fw-nj-hero img{display:block;width:100%;height:100%;object-fit:cover} .fw-nj-hero.is-empty{display:grid;place-items:center;background:linear-gradient(160deg, var(--bl-wash), var(--mt-wash))} .fw-nj-hero__blank .fw-ico{width:96px;height:96px;color:var(--bl-d);opacity:.35} .fw-nj-hero__count{position:absolute;right:clamp(12px, 2vw, 20px);bottom:clamp(12px, 2vw, 20px);display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:999px;background:color-mix(in srgb, var(--wh) 92%, transparent);backdrop-filter:blur(6px);color:var(--ink);transition:transform .25s var(--ease)} .fw-nj-hero__count b{display:grid;place-items:center;min-width:34px;height:34px;padding:0 8px;border-radius:999px;background:linear-gradient(150deg, var(--mt-dd), var(--bl-d));color:var(--wh);font-size:15px;font-weight:700} .fw-nj-hero__count span{font-size:13.5px;font-weight:700} a.fw-nj-hero__count:hover{transform:translateY(-2px);color:var(--ink)} /* ══════════════════════════════════════════════════════════════ 02 · THE LEDGER — what stays yours beside what the network adds ══════════════════════════════════════════════════════════════ */ .fw-nj-keep{background:linear-gradient(180deg, var(--mt-wash), var(--wh) 70%)} .fw-nj-ledger{display:grid;grid-template-columns:auto minmax(0, 1fr) minmax(0, 1fr);gap:0 clamp(24px, 3.4vw, 56px);align-items:stretch} .fw-nj-ledger.is-text{grid-template-columns:repeat(2, minmax(0, 1fr))} .fw-nj-ledger__pic{position:relative;margin:0;width:clamp(280px, 25vw, 380px);min-height:clamp(340px, 50vh, 470px);overflow:hidden} .fw-nj-ledger__pic img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover} .fw-nj-ledger__col{position:relative;display:flex;flex-direction:column;min-width:0} .fw-nj-ledger__col + .fw-nj-ledger__col::before{content:"";position:absolute;left:calc(clamp(24px, 3.4vw, 56px) / -2);top:0;bottom:0;width:1px;background:var(--fade-v)} .fw-nj-ledger__k{display:flex;align-items:center;gap:10px;margin:0 0 6px;padding-bottom:12px;border-bottom:2px solid var(--mt-d);font-family:var(--ff);font-size:18px;font-weight:600;color:var(--ink)} .fw-nj-ledger__k .bi{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-size:16px;color:var(--mt-ink);background:var(--mt-l)} .fw-nj-ledger__col--benefit .fw-nj-ledger__k{border-bottom-color:var(--bl-d)} .fw-nj-ledger__col--benefit .fw-nj-ledger__k .bi{color:var(--bl-d);background:var(--bl-l)} .fw-nj-ledger__lede{margin:0 0 4px;font-size:14px;line-height:1.55;color:var(--g6)} .fw-nj-ledger ul{margin:0;padding:0;list-style:none} .fw-nj-ledger li{position:relative;display:grid;grid-template-columns:40px minmax(0, 1fr);gap:14px;align-items:start;padding:clamp(10px, 1.5vh, 14px) 0} .fw-nj-ledger li + li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-nj-ledger__ico{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:var(--mt-ink);background:var(--mt-l)} .fw-nj-ledger__col--benefit .fw-nj-ledger__ico{color:var(--bl-d);background:var(--bl-l)} .fw-nj-ledger__ico .fw-ico{width:20px;height:20px} .fw-nj-ledger li b{display:block;font-size:15.5px;font-weight:600;line-height:1.35;color:var(--ink)} .fw-nj-ledger li p{margin:3px 0 0;font-size:14px;line-height:1.55;color:var(--g6)} /* ══════════════════════════════════════════════════════════════ 03 · THE TIERS — a sliding switch; the photograph beside the terms ══════════════════════════════════════════════════════════════ */ .fw-nj-tiers{background:linear-gradient(180deg, var(--bl-wash), var(--wh) 70%)} .fw-nj-tiers .fw-nj-head--row{align-items:center} .fw-nj-tiers__lede{max-width:760px;margin:-12px 0 18px} .fw-nj-switch{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:minmax(0, 1fr);padding:5px;border-radius:999px;background:var(--wh);box-shadow:inset 0 0 0 1.5px var(--bl-l2), 0 10px 28px -18px color-mix(in srgb, var(--bl-dd) 55%, transparent);isolation:isolate} .fw-nj-switch__knob{position:absolute;z-index:-1;top:5px;bottom:5px;left:5px;border-radius:999px;background:linear-gradient(150deg, var(--bl-d), var(--bl-dd));box-shadow:var(--glow);transition:transform .45s var(--ease)} .fw-nj-switch--n2 .fw-nj-switch__knob{width:calc((100% - 10px) / 2)} .fw-nj-switch--n3 .fw-nj-switch__knob{width:calc((100% - 10px) / 3)} .fw-nj-switch--n4 .fw-nj-switch__knob{width:calc((100% - 10px) / 4)} .fw-nj-switch--n5 .fw-nj-switch__knob{width:calc((100% - 10px) / 5)} .fw-nj-switch__knob.is-at-1{transform:translateX(100%)} .fw-nj-switch__knob.is-at-2{transform:translateX(200%)} .fw-nj-switch__knob.is-at-3{transform:translateX(300%)} .fw-nj-switch__knob.is-at-4{transform:translateX(400%)} .fw-nj-switch button{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:150px;padding:9px 22px;border:0;border-radius:999px;background:none;cursor:pointer;transition:color .3s var(--ease)} .fw-nj-switch button b{font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap;transition:color .3s var(--ease)} .fw-nj-switch button small{font-size:12px;font-weight:600;color:var(--g6);white-space:nowrap;transition:color .3s var(--ease)} .fw-nj-switch button:hover b{color:var(--bl-d)} .fw-nj-switch button[aria-selected="true"] b{color:var(--wh)} .fw-nj-switch button[aria-selected="true"] small{color:color-mix(in srgb, var(--wh) 82%, transparent)} .fw-nj-switch button:focus-visible{outline:2px solid var(--pk);outline-offset:2px} .fw-nj-tier{display:grid;grid-template-columns:auto minmax(0, 1fr);gap:0;background:var(--wh)} .fw-nj-tier[hidden]{display:none} .fw-nj-tier:not([hidden]){animation:fw-nj-rise .45s var(--ease)} .fw-nj-tier__pic{position:relative;margin:0;height:clamp(360px, 50vh, 480px);aspect-ratio:4/5;overflow:hidden;background:linear-gradient(160deg, var(--bl-wash), var(--mt-wash))} .fw-nj-tier__pic img{display:block;width:100%;height:100%;object-fit:cover} .fw-nj-tier__pic.is-empty{display:grid;place-items:center} .fw-nj-tier__pic.is-empty .fw-ico{width:72px;height:72px;color:var(--bl-d);opacity:.35} .fw-nj-tier__pic figcaption{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:color-mix(in srgb, var(--wh) 94%, transparent);font-size:12.5px;font-weight:700;color:var(--bl-dd)} .fw-nj-tier__pic figcaption .fw-ico{width:15px;height:15px;color:var(--go-dd)} .fw-nj-tier__body{display:flex;flex-direction:column;gap:14px;min-width:0;padding:clamp(18px, 3vh, 30px) 0 clamp(18px, 3vh, 30px) clamp(24px, 3.4vw, 56px)} .fw-nj-tier__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px 28px;flex-wrap:wrap} .fw-nj-tier__k{display:flex;align-items:flex-start;gap:8px;margin:0 0 6px;font-size:14px;font-weight:600;line-height:1.45;color:var(--g6)} .fw-nj-tier__k .fw-ico{flex:none;width:18px;height:18px;margin-top:1px;color:var(--bl-d)} .fw-nj-tier__title{margin:0;font-family:var(--ff);font-size:clamp(26px, 4vh, 38px);font-weight:600;line-height:1.08;letter-spacing:-.025em;color:var(--ink)} .fw-nj-fee{display:flex;flex-direction:column;align-items:flex-end;margin:0;padding:10px 0 0;text-align:right} .fw-nj-fee b{font-size:clamp(24px, 3.8vh, 34px);font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--bl-dd);font-variant-numeric:tabular-nums} .fw-nj-fee small{margin-top:4px;font-size:12.5px;font-weight:600;color:var(--g6)} .fw-nj-fee--free b{color:var(--mt-ink)} .fw-nj-fee--discussed b{font-size:clamp(18px, 2.6vh, 22px);color:var(--g7)} .fw-nj-tier__sum{margin:0;max-width:760px;font-size:15px;line-height:1.6;color:var(--g7)} .fw-nj-terms{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:0 clamp(22px, 3vw, 44px);border-top:2px solid var(--bl-d)} .fw-nj-terms__col{position:relative;padding-top:14px} .fw-nj-terms__col--ask::before{content:"";position:absolute;left:calc(clamp(22px, 3vw, 44px) / -2);top:14px;bottom:0;width:1px;background:var(--fade-v)} .fw-nj-terms__k{margin:0 0 8px;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--g5)} .fw-nj-terms ul{display:grid;gap:7px;margin:0;padding:0;list-style:none} .fw-nj-terms li{display:flex;align-items:flex-start;gap:9px;font-size:14.5px;line-height:1.45;color:var(--g7)} .fw-nj-terms li .bi{flex:none;margin-top:1px;font-size:15px;color:var(--mt-dd)} .fw-nj-terms__col--ask li .bi{color:var(--bl-d)} .fw-nj-tier__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:auto;padding-top:14px;border-top:1px solid var(--g2)} .fw-nj-tier__for{margin:0;max-width:520px;font-size:14px;line-height:1.5;color:var(--g7)} .fw-nj-tier__for b{display:block;margin-bottom:2px;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--g5)} /* ══════════════════════════════════════════════════════════════ 04 · MEMBER CLINICS — their own names on plates, filtered by city ══════════════════════════════════════════════════════════════ */ .fw-nj-rail{position:relative;display:flex;align-items:center;min-width:0} .fw-nj-rail > .fw-nj-chips,.fw-nj-rail > .fw-nj-pills{flex:1;min-width:0;display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x proximity;scroll-padding-inline:2px;scrollbar-width:none;padding:4px 2px 8px} .fw-nj-rail > .fw-nj-chips::-webkit-scrollbar,.fw-nj-rail > .fw-nj-pills::-webkit-scrollbar{display:none} .fw-nj-rail.is-l > *:not(button){-webkit-mask-image:linear-gradient(90deg, transparent, var(--bk) 56px);mask-image:linear-gradient(90deg, transparent, var(--bk) 56px)} .fw-nj-rail.is-r > *:not(button){-webkit-mask-image:linear-gradient(90deg, var(--bk) calc(100% - 56px), transparent);mask-image:linear-gradient(90deg, var(--bk) calc(100% - 56px), transparent)} .fw-nj-rail.is-l.is-r > *:not(button){-webkit-mask-image:linear-gradient(90deg, transparent, var(--bk) 56px, var(--bk) calc(100% - 56px), transparent);mask-image:linear-gradient(90deg, transparent, var(--bk) 56px, var(--bk) calc(100% - 56px), transparent)} .fw-nj-rail > * > *{flex:none;scroll-snap-align:start} .fw-nj-rail__nav{position:absolute;top:calc(50% - 2px);z-index:2;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:var(--wh);color:var(--bl-d);box-shadow:0 6px 16px color-mix(in srgb, var(--bl-d) 22%, transparent), inset 0 0 0 1px var(--bl-l2);transform:translateY(-50%);cursor:pointer;transition:background .2s var(--ease), color .2s var(--ease)} .fw-nj-rail__nav[hidden]{display:none} .fw-nj-rail__nav--prev{left:-4px} .fw-nj-rail__nav--next{right:-4px} .fw-nj-rail__nav:hover{background:var(--bl-d);color:var(--wh)} .fw-nj-rail__nav .bi{font-size:15px} .fw-nj-rail--cards .fw-nj-rail__nav{top:calc(50% - 22px)} .fw-nj-rail--pills{margin-bottom:10px} .fw-nj-pills button{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 8px 0 15px;border:0;border-radius:999px;background:var(--wh);box-shadow:inset 0 0 0 1.5px var(--g2);font-size:13.5px;font-weight:600;color:var(--g7);white-space:nowrap;cursor:pointer;transition:background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease)} .fw-nj-pills button span{display:grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--g1);color:var(--g7);font-size:12px;font-weight:700} .fw-nj-pills button:hover{box-shadow:inset 0 0 0 1.5px var(--bl)} .fw-nj-pills button.is-on{background:var(--ink);color:var(--wh);box-shadow:none} .fw-nj-pills button.is-on span{background:var(--wh);color:var(--ink)} .fw-nj-cards{flex:1;min-width:0;display:flex;gap:16px;margin:0;padding:4px 2px 10px;list-style:none;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x proximity;scrollbar-width:none} .fw-nj-cards::-webkit-scrollbar{display:none} .fw-nj-cards li{flex:0 0 clamp(250px, 24vw, 340px);scroll-snap-align:start} .fw-nj-cards li[hidden]{display:none} .fw-nj-cards a{display:flex;flex-direction:column;gap:10px;color:var(--ink)} .fw-nj-cards__pic{position:relative;margin:0;height:clamp(220px, 32vh, 300px);overflow:hidden;background:linear-gradient(160deg, var(--bl-wash), var(--mt-wash))} .fw-nj-cards__pic img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} .fw-nj-cards a:hover .fw-nj-cards__pic img{transform:scale(1.05)} .fw-nj-cards__pic.is-empty > span{display:grid;place-items:center;height:100%} .fw-nj-cards__pic.is-empty > span .fw-ico{width:48px;height:48px;margin-bottom:60px;color:var(--bl-d);opacity:.35} .fw-nj-cards__plate{position:absolute;left:12px;right:12px;bottom:12px;display:flex;flex-direction:column;gap:4px;padding:11px 14px 10px;background:color-mix(in srgb, var(--wh) 94%, transparent);backdrop-filter:blur(6px);border-left:3px solid var(--bl-d)} .fw-nj-cards__plate b{font-size:16px;font-weight:700;line-height:1.25;letter-spacing:-.01em;color:var(--ink);transition:color .2s var(--ease)} .fw-nj-cards a:hover .fw-nj-cards__plate b{color:var(--bl-dd)} .fw-nj-cards__plate small{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--g6)} .fw-nj-cards__plate small .fw-ico{width:14px;height:14px;color:var(--pk-d)} .fw-nj-cards__where{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--g6)} .fw-nj-cards__where img{width:20px;height:14px;border-radius:2px;object-fit:cover} /* ══════════════════════════════════════════════════════════════ 05 · OUR STANDARDS — a register beside a photograph ══════════════════════════════════════════════════════════════ */ .fw-nj-std__grid{display:grid;grid-template-columns:minmax(0, 1fr) auto;gap:var(--gap);align-items:stretch} .fw-nj-std__grid.is-text{grid-template-columns:minmax(0, 1fr)} .fw-nj-std__main{display:flex;flex-direction:column;min-width:0} .fw-nj-std__pic{position:relative;margin:0;width:clamp(300px, 28vw, 420px);min-height:clamp(360px, 52vh, 500px);overflow:hidden} .fw-nj-std__pic img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover} .fw-nj-register{margin:0;padding:0;list-style:none;border-top:2px solid var(--ink)} .fw-nj-register li{position:relative;display:grid;grid-template-columns:44px minmax(0, 1fr) auto;gap:16px;align-items:start;padding:clamp(10px, 1.6vh, 15px) 0} .fw-nj-register li + li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-nj-register__n{font-size:22px;font-weight:700;line-height:1.1;letter-spacing:-.03em;color:var(--bl-d);font-variant-numeric:tabular-nums} .fw-nj-register p{margin:4px 0 0;font-size:14.5px;line-height:1.6;color:var(--g6)} .fw-nj-register__how{display:inline-flex;align-items:center;gap:6px;margin-top:2px;padding:5px 12px;border-radius:999px;background:var(--mt-l);color:var(--mt-ink);font-size:12.5px;font-weight:700;white-space:nowrap} .fw-nj-register__how .fw-ico{width:15px;height:15px} /* ══════════════════════════════════════════════════════════════ 06 · THE WAY IN — one line of numbered stops ══════════════════════════════════════════════════════════════ */ .fw-nj-way{background:linear-gradient(180deg, var(--wh), var(--bl-wash))} .fw-nj-stops{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0, 1fr);gap:0 clamp(16px, 2.2vw, 32px);margin:0;padding:0;list-style:none} .fw-nj-stops::before{content:"";position:absolute;left:24px;right:24px;top:52px;height:2px;background:linear-gradient(90deg, var(--mt-d), var(--bl-d))} .fw-nj-stops li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0} .fw-nj-stops__when{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bl-d);min-height:16px} .fw-nj-stops__dot{position:relative;z-index:1;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;color:var(--bl-d);background:var(--wh);box-shadow:inset 0 0 0 2px var(--bl-l2), 0 0 0 6px var(--wh)} .fw-nj-stops__dot .fw-ico{width:22px;height:22px} .fw-nj-stops li:last-child .fw-nj-stops__dot{color:var(--wh);background:linear-gradient(150deg, var(--mt-dd), var(--bl-d));box-shadow:0 0 0 6px var(--wh), var(--glow)} .fw-nj-stops h3{margin-top:4px} .fw-nj-stops p{margin:0;font-size:14px;line-height:1.55;color:var(--g6)} /* ══════════════════════════════════════════════════════════════ 07 · QUESTIONS — numbered, two columns ══════════════════════════════════════════════════════════════ */ .fw-nj-mail{display:inline-flex;align-items:center;gap:12px;color:var(--ink)} .fw-nj-mail > span:first-child{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:50%;color:var(--wh);background:linear-gradient(150deg, var(--bl-d), var(--mt-dd))} .fw-nj-mail .fw-ico{width:22px;height:22px} .fw-nj-mail > span:last-child{display:flex;flex-direction:column;gap:1px} .fw-nj-mail small{font-size:12.5px;color:var(--g6)} .fw-nj-mail b{font-size:15px;font-weight:600;transition:color .2s var(--ease)} .fw-nj-mail:hover b{color:var(--bl-dd)} .fw-nj-qa{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:0 var(--gap);align-items:start} .fw-nj-qa details{position:relative} .fw-nj-qa details::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-nj-qa summary{display:grid;grid-template-columns:34px minmax(0, 1fr) auto;align-items:center;gap:12px;padding:15px 0;list-style:none;cursor:pointer;font-size:16px;font-weight:600;color:var(--ink);transition:color .2s var(--ease)} .fw-nj-qa summary::-webkit-details-marker{display:none} .fw-nj-qa summary em{font-size:13px;font-weight:700;color:var(--g5);font-variant-numeric:tabular-nums;transition:color .2s var(--ease)} .fw-nj-qa summary:hover,.fw-nj-qa details[open] summary{color:var(--bl-dd)} .fw-nj-qa details[open] summary em{color:var(--bl-d)} .fw-nj-qa summary .bi{font-size:15px;color:var(--bl-d);transition:transform .3s var(--ease)} .fw-nj-qa details[open] summary .bi{transform:rotate(180deg)} .fw-nj-qa p{margin:0 30px 15px 46px;font-size:15px;line-height:1.65;color:var(--g6)} /* ══════════════════════════════════════════════════════════════ 08 · ASK TO JOIN — four short steps beside the closing plate ══════════════════════════════════════════════════════════════ */ .fw-nj-enquire{background:linear-gradient(180deg, var(--bl-wash), var(--wh) 55%)} .fw-nj-enquire__grid{display:grid;grid-template-columns:minmax(0, .82fr) minmax(0, 1.18fr);gap:var(--gap);align-items:start} .fw-nj-enquire__side{display:flex;flex-direction:column;gap:12px;min-width:0} .fw-nj-enquire__pic{position:relative;margin:0;overflow:hidden} .fw-nj-enquire__pic img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover} .fw-nj-enquire__mail{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;color:var(--g6)} .fw-nj-enquire__mail .fw-ico{width:18px;height:18px;color:var(--bl-d)} .fw-nj-enquire__mail a{font-weight:600;color:var(--bl-d)} .fw-nj-enquire__main{position:relative;min-width:0} .fw-nj-enquire__main::before{content:"";position:absolute;left:calc(var(--gap) / -2);top:0;bottom:0;width:1px;background:var(--fade-v)} .fw-nj-form{display:grid;gap:4px} .fw-nj-form[hidden]{display:none} .fw-nj-form__head{display:grid;gap:8px;margin-bottom:14px} .fw-nj-steps{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:10px;margin:0 0 6px;padding:0;list-style:none} .fw-nj-steps li{position:relative;padding-top:12px} .fw-nj-steps li::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;border-radius:999px;background:var(--g2);transition:background .3s var(--ease)} .fw-nj-steps li.is-done::before{background:var(--mt-d)} .fw-nj-steps li.is-on::before{background:linear-gradient(90deg, var(--mt-d), var(--bl-d))} .fw-nj-steps button{display:flex;align-items:center;gap:8px;width:100%;padding:0;border:0;background:none;font-size:13.5px;font-weight:600;color:var(--g5);text-align:left;cursor:pointer} .fw-nj-steps button:disabled{cursor:default} .fw-nj-steps button span{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--g1);color:var(--g6);font-size:12px;font-weight:700} .fw-nj-steps li.is-done button{color:var(--mt-ink)} .fw-nj-steps li.is-done button span{background:var(--mt-l);color:var(--mt-ink)} .fw-nj-steps li.is-on button{color:var(--ink)} .fw-nj-steps li.is-on button span{background:linear-gradient(150deg, var(--bl-d), var(--bl-dd));color:var(--wh)} .fw-nj-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .fw-nj-step{margin:0;padding:6px 0 0;border:0;min-width:0} .fw-nj-step[hidden]{display:none} .fw-nj-step:not([hidden]){animation:fw-nj-rise .4s var(--ease)} .fw-nj-step .fw-ui__form{margin-top:12px} .fw-nj-field{margin-top:18px} .fw-nj-label{display:block;margin-bottom:8px;font-size:13px;font-weight:600;color:var(--g7)} .fw-nj-label small{margin-left:6px;font-size:12px;font-weight:500;color:var(--g5)} .fw-nj-chip{position:relative;margin:0;cursor:pointer} .fw-nj-chip input{position:absolute;opacity:0;pointer-events:none} .fw-nj-chip span{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:999px;background:var(--wh);box-shadow:inset 0 0 0 1.5px var(--g2);font-size:14px;font-weight:600;color:var(--g7);white-space:nowrap;transition:box-shadow .2s var(--ease), background .2s var(--ease), color .2s var(--ease)} .fw-nj-chip span .fw-ico{width:18px;height:18px;color:var(--bl-d)} .fw-nj-chip:hover span{box-shadow:inset 0 0 0 1.5px var(--bl);color:var(--ink)} .fw-nj-chip input:checked + span{background:var(--bl-d);box-shadow:0 6px 16px var(--bl-ring);color:var(--wh)} .fw-nj-chip input:checked + span .fw-ico{color:var(--wh)} .fw-nj-chip input:focus-visible + span{outline:2px solid var(--pk);outline-offset:2px} .fw-nj-chips.is-bad .fw-nj-chip span{box-shadow:inset 0 0 0 1.5px var(--co)} /* several may be chosen: a tick that appears, and mint once chosen */ .fw-nj-chips--multi .fw-nj-chip span .bi{display:none;font-size:15px} .fw-nj-chips--multi .fw-nj-chip input:checked + span{background:var(--mt-l);box-shadow:inset 0 0 0 1.5px var(--mt-d);color:var(--mt-ink)} .fw-nj-chips--multi .fw-nj-chip input:checked + span .bi{display:inline} /* the tier choice: a tile with its fee under the name */ .fw-nj-chips--tile .fw-nj-chip span{display:grid;grid-template-columns:auto minmax(0, 1fr);grid-template-areas:"ico b" "ico s";column-gap:12px;row-gap:1px;align-items:center;height:auto;min-width:200px;padding:12px 18px 12px 12px;border-radius:16px} .fw-nj-chips--tile .fw-nj-chip span .fw-ico{grid-area:ico;width:40px;height:40px;padding:9px;border-radius:12px;background:var(--bl-l)} .fw-nj-chips--tile .fw-nj-chip b{grid-area:b;font-size:14.5px;font-weight:600} .fw-nj-chips--tile .fw-nj-chip small{grid-area:s;font-size:12px;font-weight:600;color:var(--g6)} .fw-nj-chips--tile .fw-nj-chip input:checked + span{background:linear-gradient(150deg, var(--bl-d), var(--bl-dd))} .fw-nj-chips--tile .fw-nj-chip input:checked + span .fw-ico{background:color-mix(in srgb, var(--wh) 18%, transparent)} .fw-nj-chips--tile .fw-nj-chip input:checked + span small{color:color-mix(in srgb, var(--wh) 82%, transparent)} .fw-nj-who{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:10px} .fw-nj-who__i{position:relative;margin:0;cursor:pointer} .fw-nj-who__i input{position:absolute;opacity:0;pointer-events:none} .fw-nj-who__i > span{display:flex;align-items:center;gap:12px;height:100%;padding:12px 14px;border-radius:16px;background:var(--wh);box-shadow:inset 0 0 0 1.5px var(--g2);transition:box-shadow .2s var(--ease), background .2s var(--ease)} .fw-nj-who__i .fw-ico{width:42px;height:42px;padding:10px;border-radius:12px;color:var(--bl-d);background:var(--bl-l)} .fw-nj-who__i b{font-size:15px;font-weight:600;color:var(--ink)} .fw-nj-who__i:hover > span{box-shadow:inset 0 0 0 1.5px var(--bl)} .fw-nj-who__i input:checked + span{background:linear-gradient(150deg, var(--bl-d), var(--bl-dd));box-shadow:var(--glow)} .fw-nj-who__i input:checked + span .fw-ico{color:var(--wh);background:color-mix(in srgb, var(--wh) 18%, transparent)} .fw-nj-who__i input:checked + span b{color:var(--wh)} .fw-nj-who__i input:focus-visible + span{outline:2px solid var(--pk);outline-offset:2px} .fw-nj-who.is-bad .fw-nj-who__i > span{box-shadow:inset 0 0 0 1.5px var(--co)} .fw-nj-drop{position:relative;display:grid;grid-template-columns:46px minmax(0, 1fr);align-items:center;gap:14px;margin:0;padding:14px 16px;border-radius:14px;background:var(--wh);box-shadow:inset 0 0 0 1.5px var(--g2);cursor:pointer;transition:box-shadow .2s var(--ease), background .2s var(--ease)} .fw-nj-drop:hover,.fw-nj-drop.is-over{box-shadow:inset 0 0 0 1.5px var(--bl-d);background:var(--bl-wash)} .fw-nj-drop.is-set{box-shadow:inset 0 0 0 1.5px var(--mt-d);background:var(--mt-wash)} .fw-nj-drop.is-bad{box-shadow:inset 0 0 0 1.5px var(--co)} .fw-nj-drop input{position:absolute;inset:0;opacity:0;cursor:pointer} .fw-nj-drop__ico{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;color:var(--bl-d);background:var(--bl-l)} .fw-nj-drop__ico .bi{font-size:22px} .fw-nj-drop__t{display:grid;gap:2px;min-width:0} .fw-nj-drop__t b{font-size:14.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fw-nj-drop__t small{font-size:12.5px;line-height:1.45;color:var(--g6)} .fw-nj-drop-err{display:block;margin-top:6px;font-size:12.5px;font-weight:600;color:var(--co-ink)} .fw-nj-recap{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:0 24px;margin:16px 0 0;padding:6px 16px;background:linear-gradient(150deg, var(--bl-wash), var(--wh))} .fw-nj-recap:empty{display:none} .fw-nj-recap div{position:relative;display:flex;justify-content:space-between;gap:12px;padding:9px 0} .fw-nj-recap div:nth-child(n+3)::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-nj-recap dt{font-size:12.5px;font-weight:600;color:var(--g6)} .fw-nj-recap dd{margin:0;font-size:13.5px;font-weight:600;color:var(--ink);text-align:right} .fw-nj-consent{margin-top:16px;align-items:flex-start;gap:12px;font-size:14.5px;line-height:1.55;color:var(--g7)} .fw-nj-consent .fw-ui__check-box{margin-top:2px;flex:none} .fw-nj-consent a{color:var(--bl-d);font-weight:600} .fw-nj-form__nav{position:relative;display:flex;align-items:center;gap:14px;margin-top:22px;padding-top:18px} .fw-nj-form__nav::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-nj-back{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 18px;border:0;border-radius:999px;background:var(--wh);box-shadow:inset 0 0 0 1.5px var(--g2);font-size:14.5px;font-weight:600;color:var(--g7);cursor:pointer;transition:box-shadow .2s var(--ease), color .2s var(--ease)} .fw-nj-back:hover{box-shadow:inset 0 0 0 1.5px var(--bl);color:var(--bl-d)} .fw-nj-back[hidden],.fw-nj-form__nav [hidden]{display:none} .fw-nj-form__count{flex:1;font-size:13px;font-weight:600;color:var(--g5)} .fw-nj-send{position:relative;min-width:220px} .fw-nj-send__spin{display:none;width:18px;height:18px;border-radius:50%;border:2px solid color-mix(in srgb, var(--wh) 40%, transparent);border-top-color:var(--wh);animation:fw-nj-spin .8s linear infinite} .fw-nj-send.is-busy{pointer-events:none;opacity:.85} .fw-nj-send.is-busy .bi-arrow-right{display:none} .fw-nj-send.is-busy .fw-nj-send__spin{display:inline-block} @keyframes fw-nj-spin{to{transform:rotate(360deg)}} .fw-nj-thanks{display:grid;justify-items:start;align-content:center;gap:12px;min-height:100%;padding:clamp(20px, 4vh, 40px) 0} .fw-nj-thanks[hidden]{display:none} .fw-nj-thanks__ico{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;color:var(--wh);background:linear-gradient(150deg, var(--mt-dd), var(--bl-d));box-shadow:var(--glow)} .fw-nj-thanks__ico .fw-ico{width:34px;height:34px} .fw-nj-thanks__ref{margin:0;font-size:15px;color:var(--g6)} .fw-nj-thanks__ref b{margin-left:6px;padding:4px 12px;border-radius:999px;background:var(--bl-l);color:var(--bl-d);font-size:15px;letter-spacing:.04em;font-variant-numeric:tabular-nums} /* ══════════════════════════════════════════════════════════════ 09 · RESPONSIVE (the phone is designed as an app) ══════════════════════════════════════════════════════════════ */ @media (max-width:1200px){ .fw-nj-ledger{grid-template-columns:repeat(2, minmax(0, 1fr))} .fw-nj-ledger__pic{grid-column:1 / -1;width:100%;min-height:0;aspect-ratio:16/7;margin-bottom:18px} .fw-nj-tier__pic{height:auto;width:clamp(260px, 34vw, 360px);aspect-ratio:auto;min-height:100%} .fw-nj-stops{grid-auto-flow:row;grid-template-columns:repeat(3, minmax(0, 1fr));gap:22px clamp(16px, 2.2vw, 32px)} .fw-nj-stops::before{display:none} } @media (max-width:1024px){ .fw-nj-mast__grid,.fw-nj-std__grid,.fw-nj-enquire__grid{grid-template-columns:minmax(0, 1fr)} .fw-nj-hero{height:auto;width:100%} .fw-nj-head--row{align-items:flex-start} .fw-nj-head--row > .fw-nj-sub{text-align:left} .fw-nj-tier{grid-template-columns:minmax(0, 1fr)} .fw-nj-tier__pic{width:100%;min-height:0;aspect-ratio:16/9} .fw-nj-tier__body{padding-left:0} .fw-nj-std__pic{order:-1;width:100%;min-height:0;aspect-ratio:16/9} .fw-nj-enquire__side{display:grid;grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);align-items:start;gap:12px var(--gap)} .fw-nj-enquire__side .fw-nj-enquire__pic{grid-row:span 3} .fw-nj-enquire__main::before{left:0;right:0;top:calc(var(--gap) / -2);bottom:auto;width:auto;height:1px;background:var(--fade)} } @media (max-width:760px){ .fw-nj-switch{display:flex;width:100%;overflow-x:auto;scrollbar-width:none} .fw-nj-switch::-webkit-scrollbar{display:none} .fw-nj-switch button{flex:1 0 auto;min-width:0;padding:8px 16px} /* widths differ once it scrolls: the chosen button carries the colour itself */ .fw-nj-switch__knob{display:none} .fw-nj-switch button[aria-selected="true"]{background:linear-gradient(150deg, var(--bl-d), var(--bl-dd))} } @media (max-width:640px){ .fw-nj-page{--pad:14px} .fw-nj .fw-nj-h1{font-size:clamp(32px, 9vw, 42px)} .fw-nj-h2{font-size:clamp(24px, 6.6vw, 30px)} .fw-nj-try{width:100%} .fw-nj-act .fw-nj-btn{width:100%} .fw-nj-plate{max-width:86%;padding:10px 14px 9px} .fw-nj-plate b{font-size:19px} .fw-nj-hero__count{left:12px;right:auto} .fw-nj-ledger,.fw-nj-ledger.is-text{grid-template-columns:minmax(0, 1fr)} .fw-nj-ledger__pic{aspect-ratio:4/3} .fw-nj-ledger__col + .fw-nj-ledger__col{margin-top:22px} .fw-nj-ledger__col + .fw-nj-ledger__col::before{display:none} .fw-nj-tier__top{flex-direction:column} .fw-nj-fee{align-items:flex-start;padding-top:0;text-align:left} .fw-nj-terms{grid-template-columns:minmax(0, 1fr)} .fw-nj-terms__col--ask{margin-top:6px} .fw-nj-terms__col--ask::before{display:none} .fw-nj-tier__foot .fw-nj-btn{width:100%} .fw-nj-cards{margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);scroll-padding-inline:var(--pad)} .fw-nj-cards li{flex-basis:78%} .fw-nj-register li{grid-template-columns:34px minmax(0, 1fr)} .fw-nj-register__how{grid-column:2;justify-self:start} .fw-nj-stops{grid-template-columns:minmax(0, 1fr);gap:0} .fw-nj-stops li{display:grid;grid-template-columns:50px minmax(0, 1fr);grid-template-areas:"dot when" "dot h" "dot p";column-gap:14px;row-gap:2px;padding:12px 0} .fw-nj-stops li + li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-nj-stops__dot{grid-area:dot;box-shadow:inset 0 0 0 2px var(--bl-l2)} .fw-nj-stops__when{grid-area:when} .fw-nj-stops h3{grid-area:h;margin:0} .fw-nj-stops p{grid-area:p} .fw-nj-qa{grid-template-columns:minmax(0, 1fr)} .fw-nj-qa p{margin-right:0} .fw-nj-enquire__side{display:flex} .fw-nj-who{grid-template-columns:minmax(0, 1fr)} .fw-nj-steps{gap:4px} .fw-nj-steps button{flex-direction:column;align-items:flex-start;gap:4px;font-size:10.5px} .fw-nj-rail__nav{display:none} .fw-nj .fw-ui__form{grid-template-columns:minmax(0, 1fr)} .fw-nj-form__nav{flex-wrap:wrap} .fw-nj-form__count{order:-1;flex-basis:100%} .fw-nj-form__nav .fw-nj-btn{flex:1} .fw-nj-send{min-width:0} .fw-nj-recap{grid-template-columns:minmax(0, 1fr)} .fw-nj-recap div:nth-child(n+2)::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} } @media (prefers-reduced-motion:reduce){ .fw-nj-step:not([hidden]),.fw-nj-tier:not([hidden]),.fw-nj-plate b.is-typed{animation:none} .fw-nj-cards__pic img,.fw-nj-switch__knob{transition:none} }