/* ══════════════════════════════════════════════════════════════════════════ css/grow-practice.css — GROW PRACTICE (fw-grp; fw-gp is Global Presence) /grow-practice, built 4 Oct 2026 as a hybrid information page (Manage › Partner With Us › For Doctors › Grow Practice). No form: every button opens Join as Doctor with ?from=grow-practice. ITS OWN PAGE, the third For Doctors sibling (same family of devices, its own centrepiece): §1 the opening beside ONE TALL PHOTOGRAPH, the network in numbers §2 how families find you: a PATH of glyph stops on one line §3 THE PROFILE PREVIEW: a live doctor's profile in a browser frame, numbered 1 to 4, beside what each part does for a practice §4 what we do for your practice: glyph tiles on a mint wash §5 how it works: a numbered track §6 questions beside the network in numbers and a way to write to us §7 the closing photograph beside the words and the Apply button PALETTE: blue is the page's voice, mint is growth, pink is the action and the preview's numbers. No inline styles. Never a class holding "fa-", "bi-" or "uil-". ══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ 00 · TOKENS & PRIMITIVES ══════════════════════════════════════════════════════════════ */ .fw-grp-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); --ease:cubic-bezier(.22,1,.36,1); --ease-pop:cubic-bezier(.34,1.56,.64,1); background:var(--wh); } .fw-grp{display:block;position:relative;background:var(--wh)} .fw-grp em{font-family:var(--ff);font-style:normal} .fw-grp .fw-ico{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .fw-grp-inner{position:relative;z-index:1;width:100%;padding-inline:var(--pad)} .fw-grp-sec{position:relative;padding:var(--sec) 0} .fw-grp-sec::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;z-index:1;height:1px;background:var(--fade)} .fw-grp-head{display:flex;flex-direction:column;gap:8px;margin-bottom:clamp(18px, 2.8vh, 30px)} .fw-grp-head--row{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:12px 40px;flex-wrap:wrap} .fw-grp-head--row > div{display:flex;flex-direction:column;gap:8px;max-width:760px} .fw-grp-head--row > .fw-grp-sub{flex:1 1 320px;max-width:520px;text-align:right} .fw-grp-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-grp-eyebrow .fw-ico{width:16px;height:16px;flex:none} .fw-grp-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-grp-h3{margin:0;font-family:var(--ff);font-size:17px;font-weight:600;line-height:1.3;color:var(--ink)} .fw-grp-sub{margin:0;font-size:clamp(14.5px, 1.9vh, 16.5px);line-height:1.6;color:var(--g6);text-wrap:pretty} .fw-grp-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;padding:0 26px;border-radius:999px;background:var(--bl-d);color:var(--wh);font-size:15px;font-weight:600;transition:background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease)} .fw-grp-btn--pk{background:var(--pk-d);box-shadow:var(--pk-glow)} .fw-grp-btn--pk:hover{background:var(--pk-dd);color:var(--wh);transform:translateY(-2px);box-shadow:var(--pk-glow-lg)} .fw-grp-btn .bi-arrow-right,.fw-grp-link .bi{transition:transform .25s var(--ease)} .fw-grp-btn:hover .bi-arrow-right,.fw-grp-link:hover .bi-arrow-right{transform:translateX(4px)} .fw-grp-link:hover .bi-arrow-down{transform:translateY(3px)} .fw-grp-link:hover .bi-arrow-up-right{transform:translate(2px, -2px)} .fw-grp-link{display:inline-flex;align-items:center;gap:7px;padding:0;background:none;font-size:14.5px;font-weight:600;color:var(--bl-d);transition:color .2s var(--ease)} .fw-grp-link:hover{color:var(--pk-dd)} .fw-grp-tile{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:16px;color:var(--mt-ink);background:var(--mt-l);transition:transform .35s var(--ease-pop)} .fw-grp-tile .fw-ico{width:26px;height:26px} .fw-grp-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0} .fw-grp-spot{position:absolute;display:block;aspect-ratio:1;border-radius:50%;filter:blur(80px);animation:fw-grp-drift 27s ease-in-out infinite} .fw-grp-spot--b{top:8%;right:-4%;width:clamp(220px, 24vw, 400px);background:var(--bl-t)} .fw-grp-spot--p{bottom:-8%;left:-4%;width:clamp(220px, 24vw, 400px);background:color-mix(in srgb, var(--pk) 10%, transparent);animation-duration:31s} @keyframes fw-grp-drift{50%{transform:translate(26px, -20px) scale(1.06)}} /* ══════════════════════════════════════════════════════════════ 01 · THE OPENING ══════════════════════════════════════════════════════════════ */ .fw-grp .fw-grp-mast{position:relative;padding-bottom:clamp(24px, 4vh, 44px)} .fw-grp-mast__grid{display:grid;grid-template-columns:minmax(0, 1.15fr) auto;align-items:center;gap:clamp(24px, 4vw, 72px)} .fw-grp-mast__copy{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0} .fw-grp-mast__copy .fw-crumb{margin-bottom:4px} .fw-grp .fw-grp-h1{margin:0;font-size:clamp(36px, 6.4vh, 64px);line-height:1.04;letter-spacing:-.035em;color:var(--ink);text-wrap:balance} .fw-grp .fw-grp-mast .fw-grp-h1 span{display:block;-webkit-text-fill-color:transparent;background:linear-gradient(100deg, var(--bl-d) 10%, var(--mt-d) 55%, var(--pk-d) 95%);-webkit-background-clip:text;background-clip:text;color:transparent} .fw-grp-lead{margin:0;max-width:600px;font-size:clamp(16px, 2.2vh, 19px);line-height:1.6;color:var(--g6);text-wrap:pretty} .fw-grp-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:6px} .fw-grp-facts{position:relative;display:grid;grid-template-columns:repeat(4, minmax(0, auto));justify-content:start;gap:12px clamp(18px, 2.6vw, 40px);margin:clamp(10px, 2vh, 22px) 0 0;padding:clamp(14px, 2.2vh, 20px) 0 0;list-style:none} .fw-grp-facts::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-grp-facts li{display:grid;grid-template-columns:auto auto;grid-template-areas:"ico n" "ico t";align-items:center;column-gap:10px} .fw-grp-facts__ico{grid-area:ico;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;color:var(--bl-d);background:var(--bl-wash)} .fw-grp-facts__ico .fw-ico{width:21px;height:21px} .fw-grp-facts b{grid-area:n;font-size:clamp(20px, 2.8vh, 26px);font-weight:700;line-height:1.1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums} .fw-grp-facts span:last-child{grid-area:t;font-size:12.5px;font-weight:600;color:var(--g6)} /* the photograph: shown whole, a vh height and its own shape */ .fw-grp-hero{position:relative;margin:0;height:clamp(360px, 62vh, 620px);aspect-ratio:4/5} .fw-grp-hero img{display:block;width:100%;height:100%;object-fit:cover} .fw-grp-hero.is-empty{display:grid;place-items:center;background:linear-gradient(160deg, var(--mt-wash), color-mix(in srgb, var(--bl) 8%, var(--wh)))} .fw-grp-hero__blank .fw-ico{width:96px;height:96px;color:var(--mt-d);opacity:.4} .fw-grp-hero__badge{position:absolute;left:clamp(12px, 2vw, 20px);bottom:clamp(12px, 2vw, 20px);display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:color-mix(in srgb, var(--wh) 92%, transparent);backdrop-filter:blur(6px);box-shadow:0 10px 28px color-mix(in srgb, var(--dk) 18%, transparent);font-size:13.5px;font-weight:700;color:var(--ink)} .fw-grp-hero__badge .fw-ico{width:18px;height:18px;color:var(--mt-d)} /* ══════════════════════════════════════════════════════════════ 02 · HOW FAMILIES FIND YOU — a path of glyph stops ══════════════════════════════════════════════════════════════ */ .fw-grp-paths{background:linear-gradient(180deg, var(--bl-wash), var(--wh))} .fw-grp-paths__list{--n:4;position:relative;display:grid;grid-template-columns:repeat(var(--n), minmax(0, 1fr));gap:clamp(18px, 2.6vw, 44px);margin:0;padding:0;list-style:none;counter-reset:fw-grp-path} .fw-grp-paths__list--1{--n:1}.fw-grp-paths__list--2{--n:2}.fw-grp-paths__list--3{--n:3}.fw-grp-paths__list--4{--n:4}.fw-grp-paths__list--5{--n:5} /* the dotted road the stops sit on */ .fw-grp-paths__list::before{content:"";position:absolute;left:36px;right:36px;top:35px;height:2px;background:repeating-linear-gradient(90deg, var(--bl) 0 6px, transparent 6px 14px);opacity:.45} .fw-grp-paths__list li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;counter-increment:fw-grp-path} .fw-grp-paths__stop{position:relative;z-index:1;display:grid;place-items:center;width:72px;height:72px;margin-bottom:8px;border-radius:50%;color:var(--bl-d);background:var(--wh);box-shadow:0 0 0 6px var(--bl-wash), 0 0 0 7px var(--bl-l2), 0 14px 30px var(--bl-ring);transition:transform .35s var(--ease-pop), color .25s var(--ease)} .fw-grp-paths__stop .fw-ico{width:30px;height:30px} .fw-grp-paths__stop::after{content:counter(fw-grp-path);position:absolute;top:-4px;right:-4px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--mt-d);color:var(--wh);font-size:12px;font-weight:700;box-shadow:0 0 0 3px var(--wh)} .fw-grp-paths__list li:hover .fw-grp-paths__stop{transform:translateY(-4px);color:var(--pk-dd)} .fw-grp-paths__list p{margin:0;font-size:14.5px;line-height:1.6;color:var(--g6)} /* ══════════════════════════════════════════════════════════════ 03 · THE PROFILE PREVIEW — the centrepiece ══════════════════════════════════════════════════════════════ */ .fw-grp-preview{overflow:hidden} .fw-grp-preview__grid{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:var(--gap);align-items:center} .fw-grp-preview__t{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0} .fw-grp-preview__t .fw-grp-head{margin-bottom:0} /* the screen: a browser frame around a real profile */ .fw-grp-shot{position:relative;margin:0;max-width:560px;width:100%;justify-self:center;background:var(--wh);border-radius:18px;box-shadow:0 30px 70px color-mix(in srgb, var(--bl-d) 16%, transparent), 0 4px 14px color-mix(in srgb, var(--dk) 6%, transparent)} .fw-grp-shot__bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-radius:18px 18px 0 0;background:var(--g0)} .fw-grp-shot__bar > span{width:10px;height:10px;border-radius:50%;background:var(--g3)} .fw-grp-shot__bar > span:first-child{background:var(--pk-l2)} .fw-grp-shot__bar > span:nth-child(2){background:var(--go-l2)} .fw-grp-shot__bar > span:nth-child(3){background:var(--mt-l2)} .fw-grp-shot__bar small{flex:1;min-width:0;margin-left:10px;padding:5px 12px;border-radius:999px;background:var(--wh);font-size:12px;font-weight:500;color:var(--g5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fw-grp-shot__cap{position:absolute;left:0;right:0;bottom:-30px;text-align:center;font-size:12.5px;font-weight:600;color:var(--g5)} .fw-grp-card{display:flex;flex-direction:column;padding:clamp(18px, 2.6vh, 26px) clamp(18px, 2vw, 28px) clamp(16px, 2.4vh, 24px)} .fw-grp-card__top{display:grid;grid-template-columns:auto minmax(0, 1fr);gap:18px;align-items:center} .fw-grp-card__ph{display:block;width:clamp(84px, 11vh, 108px);aspect-ratio:1;border-radius:50%;object-fit:cover;box-shadow:0 0 0 4px var(--wh), 0 0 0 6px var(--mt-l2)} .fw-grp-card__who{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0} .fw-grp-card__ver{position:relative;display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:var(--mt-l);color:var(--mt-ink);font-size:12px;font-weight:700} .fw-grp-card__ver .fw-ico{width:15px;height:15px} .fw-grp-card__name{font-family:var(--ff);font-size:clamp(19px, 2.6vh, 23px);font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--ink)} .fw-grp-card__role{position:relative;padding-right:34px;font-size:14px;font-weight:600;color:var(--bl-d)} .fw-grp-card__qual{font-size:13px;color:var(--g6)} .fw-grp-card__mid{position:relative;margin-top:clamp(14px, 2.2vh, 20px);padding:clamp(12px, 1.8vh, 16px) 34px clamp(12px, 1.8vh, 16px) 0} .fw-grp-card__mid::before,.fw-grp-card__mid::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--fade)} .fw-grp-card__mid::before{top:0} .fw-grp-card__mid::after{bottom:0} .fw-grp-card__facts{display:grid;grid-template-columns:repeat(3, minmax(0, auto));justify-content:start;gap:8px clamp(16px, 2vw, 30px);margin:0;padding:0;list-style:none} .fw-grp-card__facts li{display:flex;flex-direction:column;gap:2px;min-width:0} .fw-grp-card__facts b{font-size:14.5px;font-weight:700;line-height:1.3;color:var(--ink)} .fw-grp-card__facts span{font-size:12px;font-weight:600;color:var(--g5)} .fw-grp-card__foot{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:clamp(14px, 2.2vh, 20px);padding-right:34px} .fw-grp-card__fee{display:flex;flex-direction:column;line-height:1.2} .fw-grp-card__fee small{font-size:12px;font-weight:600;color:var(--g5)} .fw-grp-card__fee b{font-size:20px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums} .fw-grp-card__book{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border-radius:999px;background:var(--pk-d);color:var(--wh);font-size:14px;font-weight:600;box-shadow:var(--pk-glow)} .fw-grp-card__book .fw-ico{width:17px;height:17px} /* the numbers that tie each part to its note */ .fw-grp-mark{position:absolute;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--pk-d);color:var(--wh);font-size:12px;font-weight:700;line-height:1;box-shadow:0 0 0 3px var(--wh), 0 0 0 4px var(--pk-l2);animation:fw-grp-ping 3.2s var(--ease) infinite} .fw-grp-card__ver .fw-grp-mark{right:-32px;top:50%;margin-top:-12px} .fw-grp-card__role .fw-grp-mark{right:0;top:50%;margin-top:-12px;animation-delay:.8s} .fw-grp-card__mid > .fw-grp-mark{right:0;top:50%;margin-top:-12px;animation-delay:1.6s} .fw-grp-card__foot > .fw-grp-mark{right:0;top:50%;margin-top:-12px;animation-delay:2.4s} @keyframes fw-grp-ping{0%, 70%, 100%{box-shadow:0 0 0 3px var(--wh), 0 0 0 4px var(--pk-l2)}35%{box-shadow:0 0 0 3px var(--wh), 0 0 0 9px var(--pk-t)}} /* what each part does */ .fw-grp-notes{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:0 clamp(18px, 2vw, 32px);margin:0 0 clamp(6px, 1.2vh, 12px);padding:0;list-style:none;width:100%} .fw-grp-notes li{position:relative;display:grid;grid-template-columns:32px minmax(0, 1fr);gap:14px;align-items:start;padding:9px 0} .fw-grp-notes li:nth-child(n+3)::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-grp-notes li > span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:color-mix(in srgb, var(--pk) 10%, var(--wh));color:var(--pk-dd);font-size:14px;font-weight:700} .fw-grp-notes b{display:block;font-size:15.5px;font-weight:600;color:var(--ink)} .fw-grp-notes p{margin:3px 0 0;font-size:14.5px;line-height:1.55;color:var(--g6)} /* ══════════════════════════════════════════════════════════════ 04 · WHAT WE DO FOR YOUR PRACTICE ══════════════════════════════════════════════════════════════ */ .fw-grp-serv{background:linear-gradient(180deg, var(--mt-wash), var(--wh))} .fw-grp-serv__list{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:0 clamp(20px, 3vw, 48px);margin:0;padding:0;list-style:none} .fw-grp-serv__list li{position:relative;display:grid;grid-template-columns:52px minmax(0, 1fr);gap:16px;align-items:start;padding:20px 0} .fw-grp-serv__list li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-grp-serv__list li:hover .fw-grp-tile{transform:translateY(-3px) rotate(-5deg)} .fw-grp-serv__list p{margin:5px 0 0;font-size:14.5px;line-height:1.6;color:var(--g6)} /* ══════════════════════════════════════════════════════════════ 05 · HOW IT WORKS — the numbered track ══════════════════════════════════════════════════════════════ */ .fw-grp-track{--n:4;position:relative;display:grid;grid-template-columns:repeat(var(--n), minmax(0, 1fr));gap:clamp(18px, 2.6vw, 40px);margin:0;padding:0;list-style:none} .fw-grp-track--1{--n:1}.fw-grp-track--2{--n:2}.fw-grp-track--3{--n:3}.fw-grp-track--4{--n:4}.fw-grp-track--5{--n:5} .fw-grp-track::before{content:"";position:absolute;left:30px;right:30px;top:30px;height:2px;background:linear-gradient(90deg, var(--mt), var(--bl), var(--pk));opacity:.4} .fw-grp-track li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px} .fw-grp-track__node{position:relative;z-index:1;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;color:var(--bl-d);background:var(--wh);box-shadow:0 0 0 2px var(--bl-l2), 0 10px 24px var(--bl-ring);margin-bottom:6px} .fw-grp-track__node .fw-ico{width:26px;height:26px} .fw-grp-track__node b{position:absolute;top:-6px;right:-6px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--pk-d);color:var(--wh);font-size:12px;font-weight:700;box-shadow:0 0 0 3px var(--wh)} .fw-grp-track__when{padding:3px 11px;border-radius:999px;background:var(--mt-l);color:var(--mt-ink);font-size:12px;font-weight:700} .fw-grp-track p{margin:0;font-size:14.5px;line-height:1.6;color:var(--g6)} /* ══════════════════════════════════════════════════════════════ 06 · QUESTIONS — the left side pins with the theme plugin ══════════════════════════════════════════════════════════════ */ .fw-grp-faq{background:linear-gradient(180deg, color-mix(in srgb, var(--pk) 4%, var(--wh)), var(--wh))} .fw-grp-faq__grid{display:grid;grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr);gap:var(--gap);align-items:stretch} .fw-grp-faq__side{min-width:0} .fw-grp-faq__in{display:flex;flex-direction:column;gap:22px} .fw-grp-faq__in .fw-grp-head{margin:0} /* real faces: a stack of live doctors' photos and the count */ .fw-grp-faq__faces{position:relative;display:flex;align-items:center;gap:16px;padding-top:20px} .fw-grp-faq__faces::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-grp-faq__stack{display:flex;flex:none;align-items:center} .fw-grp-faq__stack img,.fw-grp-faq__stack b{display:block;width:46px;height:46px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--wh), 0 6px 16px color-mix(in srgb, var(--dk) 12%, transparent);transition:transform .3s var(--ease-pop)} .fw-grp-faq__stack img + img,.fw-grp-faq__stack b{margin-left:-12px} .fw-grp-faq__stack b{display:grid;place-items:center;color:var(--wh);background:linear-gradient(150deg, var(--mt-d), var(--bl-d))} .fw-grp-faq__stack b .fw-ico{width:22px;height:22px} .fw-grp-faq__faces:hover .fw-grp-faq__stack img:nth-child(odd){transform:translateY(-3px)} .fw-grp-faq__faces p{margin:0;font-size:14.5px;line-height:1.5;color:var(--g6);text-wrap:pretty} .fw-grp-faq__faces p b{color:var(--ink);font-weight:700} /* the network in numbers: a two-by-two, each figure with its own glyph and colour, crossed by fades */ .fw-grp-faq__nums{position:relative;display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));margin:0;padding:0;list-style:none} .fw-grp-faq__nums::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-grp-faq__nums li{--ac:var(--bl-d);--ac-l:var(--bl-wash);position:relative;display:grid;grid-template-columns:48px minmax(0, 1fr);grid-template-areas:"ico n" "ico t";column-gap:14px;align-items:center;padding:clamp(14px, 2.2vh, 20px) 0} .fw-grp-faq__nums li:nth-child(2){--ac:var(--mt-ink);--ac-l:var(--mt-l)} .fw-grp-faq__nums li:nth-child(3){--ac:var(--pk-dd);--ac-l:color-mix(in srgb, var(--pk) 10%, var(--wh))} .fw-grp-faq__nums li:nth-child(4){--ac:var(--go-ink);--ac-l:var(--go-l)} .fw-grp-faq__nums li:nth-child(even){padding-left:clamp(16px, 2vw, 26px)} .fw-grp-faq__nums li:nth-child(even)::before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;background:var(--fade-v)} .fw-grp-faq__nums li:nth-child(n+3)::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-grp-faq__num-ico{grid-area:ico;display:grid;place-items:center;width:48px;height:48px;border-radius:16px;color:var(--ac);background:var(--ac-l);transition:transform .35s var(--ease-pop)} .fw-grp-faq__num-ico .fw-ico{width:24px;height:24px} .fw-grp-faq__nums li:hover .fw-grp-faq__num-ico{transform:translateY(-3px) rotate(-6deg)} .fw-grp-faq__nums b{grid-area:n;align-self:end;font-size:clamp(24px, 3.4vh, 32px);font-weight:700;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)} .fw-grp-faq__nums li > span:last-child{grid-area:t;align-self:start;font-size:13px;font-weight:600;color:var(--g6)} /* a way to write to the team */ .fw-grp-faq__ask::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-grp-faq__ask{position:relative;display:grid;grid-template-columns:56px minmax(0, 1fr);gap:16px;align-items:start;margin-top:clamp(10px, 2vh, 20px);padding:22px clamp(16px, 2vw, 24px) 4px;background:linear-gradient(100deg, var(--bl-wash), transparent 85%)} .fw-grp-faq__ask-ico{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;color:var(--wh);background:linear-gradient(150deg, var(--mt-d), var(--bl-d));box-shadow:0 12px 26px var(--bl-ring)} .fw-grp-faq__ask-ico .fw-ico{width:26px;height:26px} .fw-grp-faq__ask > div{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px} .fw-grp-faq__ask .fw-grp-h3{flex:1 0 100%} .fw-grp-qa .fw-grp-faq__ask p{flex:1 1 280px;margin:0 0 14px;font-size:14.5px;line-height:1.6;color:var(--g6)} .fw-grp-faq__mail{flex:none;margin-bottom:14px;display:inline-flex;align-items:center;gap:9px;max-width:100%;height:44px;padding:0 18px;border-radius:999px;background:var(--wh);box-shadow:inset 0 0 0 1.5px var(--bl-l2);font-size:14.5px;font-weight:600;color:var(--bl-d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:box-shadow .2s var(--ease), color .2s var(--ease), transform .2s var(--ease)} .fw-grp-faq__mail:hover{color:var(--pk-dd);box-shadow:inset 0 0 0 1.5px var(--pk-d);transform:translateY(-1px)} .fw-grp-qa__n{flex:none;width:30px;font-size:13px;font-weight:700;color:var(--pk-d);font-variant-numeric:tabular-nums} .fw-grp-qa summary > span:nth-child(2){flex:1} .fw-grp-qa details{position:relative} .fw-grp-qa details + details::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-grp-qa summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;list-style:none;cursor:pointer;font-size:16.5px;font-weight:600;color:var(--ink);transition:color .2s var(--ease)} .fw-grp-qa summary::-webkit-details-marker{display:none} .fw-grp-qa summary:hover,.fw-grp-qa details[open] summary{color:var(--bl-d)} .fw-grp-qa summary .bi{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--bl-l);color:var(--bl-d);font-size:14px;transition:transform .3s var(--ease), background .2s var(--ease), color .2s var(--ease)} .fw-grp-qa details[open] summary .bi{transform:rotate(45deg);background:var(--bl-d);color:var(--wh)} .fw-grp-qa p{margin:0 48px 16px 46px;font-size:15px;line-height:1.65;color:var(--g6)} /* ══════════════════════════════════════════════════════════════ 07 · THE CLOSE — photograph beside the words ══════════════════════════════════════════════════════════════ */ .fw-grp-close{background:linear-gradient(180deg, var(--wh), var(--bl-wash))} .fw-grp-close__grid{display:grid;grid-template-columns:auto minmax(0, 1fr);gap:var(--gap);align-items:center} .fw-grp-close__grid.is-one{grid-template-columns:minmax(0, 1fr)} .fw-grp-close__pic{margin:0;height:clamp(260px, 44vh, 440px);aspect-ratio:3/2} .fw-grp-close__pic img{display:block;width:100%;height:100%;object-fit:cover} .fw-grp-close__t{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0;max-width:620px} .fw-grp-close__t .fw-grp-act{margin-top:10px} /* ══════════════════════════════════════════════════════════════ 10 · RESPONSIVE ══════════════════════════════════════════════════════════════ */ @media (max-width:1200px){ .fw-grp-facts{grid-template-columns:repeat(2, minmax(0, auto))} .fw-grp-serv__list{grid-template-columns:repeat(2, minmax(0, 1fr))} .fw-grp-track,.fw-grp-paths__list{grid-template-columns:repeat(2, minmax(0, 1fr))} .fw-grp-track::before,.fw-grp-paths__list::before{display:none} .fw-grp-close__pic{height:auto;width:min(46vw, 520px)} } @media (max-width:1024px){ .fw-grp-mast__grid,.fw-grp-preview__grid,.fw-grp-faq__grid,.fw-grp-close__grid{grid-template-columns:minmax(0, 1fr)} .fw-grp-hero{height:auto;width:100%;aspect-ratio:4/3} .fw-grp-close__pic{width:100%} .fw-grp-head--row{align-items:flex-start} .fw-grp-head--row > .fw-grp-sub{text-align:left} .fw-grp-shot{margin-bottom:30px} .fw-grp-spot{filter:blur(50px)} } @media (max-width:640px){ .fw-grp-page{--pad:14px} .fw-grp .fw-grp-h1{font-size:clamp(32px, 9vw, 42px)} .fw-grp-h2{font-size:clamp(24px, 6.6vw, 30px)} .fw-grp-act .fw-grp-btn{width:100%} .fw-grp-facts,.fw-grp-faq__nums{grid-template-columns:repeat(2, minmax(0, 1fr))} .fw-grp-hero{aspect-ratio:4/5} .fw-grp-serv__list,.fw-grp-track,.fw-grp-paths__list{grid-template-columns:minmax(0, 1fr)} .fw-grp-paths__list li{display:grid;grid-template-columns:72px minmax(0, 1fr);grid-template-areas:"stop h" "stop p";column-gap:16px;row-gap:4px} .fw-grp-paths__stop{grid-area:stop;margin:0} .fw-grp-paths__list .fw-grp-h3{grid-area:h;align-self:end} .fw-grp-paths__list p{grid-area:p} .fw-grp-track li{display:grid;grid-template-columns:60px minmax(0, 1fr);grid-template-areas:"node when" "node h" "node p";column-gap:16px;row-gap:4px;justify-items:start} .fw-grp-track__node{grid-area:node;margin:0} .fw-grp-track__when{grid-area:when} .fw-grp-track .fw-grp-h3{grid-area:h} .fw-grp-track p{grid-area:p} .fw-grp-card__top{grid-template-columns:minmax(0, 1fr);justify-items:start} .fw-grp-card__facts{grid-template-columns:repeat(2, minmax(0, auto))} .fw-grp-card__ver .fw-grp-mark{right:-30px} .fw-grp-close__pic{height:auto;aspect-ratio:3/2} .fw-grp-qa p{margin-right:0;margin-left:0} .fw-grp-notes{grid-template-columns:minmax(0, 1fr)} .fw-grp-faq__stack img,.fw-grp-faq__stack b{width:38px;height:38px} .fw-grp-faq__stack img + img,.fw-grp-faq__stack b{margin-left:-10px} .fw-grp-faq__nums li{grid-template-columns:40px minmax(0, 1fr);column-gap:10px} .fw-grp-faq__num-ico{width:40px;height:40px;border-radius:13px} .fw-grp-notes li:nth-child(2)::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} } @media (prefers-reduced-motion:reduce){ .fw-grp-spot,.fw-grp-mark{animation:none} .fw-grp-tile,.fw-grp-paths__stop{transition:none} }