/* ══════════════════════════════════════════════════════════════════════════ css/contact.css — CONTACT US (fw-ctc) /contact, built 9 Oct 2026. ITS OWN PAGE, on the tools hub's opening (crumb and eyebrow, gradient title, floating clay icons, three promises) with its own device inside the first screen: §1 WHO ARE YOU? a row of clay stops on a line; the chosen person's panel opens under it: the patient's three routes, or the desks for that audience as rows with their phone and email chips §2 where we are: our front desk photograph beside the network figures and the registered office §3 the grievance officer beside "maybe it is already answered" PALETTE: blue carries the page; pink marks the chosen stop and the one action. Colour from :root only. No inline styles. Never a class holding "fa-", "bi-" or "uil-". Without script every panel shows (.fw-js gates the one-at-a-time view). ══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ 00 · TOKENS & PRIMITIVES ══════════════════════════════════════════════════════════════ */ .fw-ctc-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, 5vh, 56px); --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-ctc{display:block;position:relative;background:var(--wh)} .fw-ctc em{font-family:var(--ff);font-style:normal} .fw-ctc address{font-style:normal} .fw-ctc-inner{position:relative;z-index:1;width:100%;padding-inline:var(--pad)} .fw-ctc-sec{position:relative;padding:var(--sec) 0} .fw-ctc-sec::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;z-index:1;height:1px;background:var(--fade)} .fw-ctc-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--bl-d)} .fw-ctc-eyebrow .fw-ico{width:16px;height:16px;flex:none} .fw-ctc-h2{margin:0;font-family:var(--ff);font-weight:600;color:var(--ink);font-size:clamp(24px, 3.8vh, 36px);line-height:1.15;letter-spacing:-.02em;text-wrap:balance} .fw-ctc-h3{margin:0;font-family:var(--ff);font-size:17px;font-weight:600;line-height:1.3;color:var(--ink)} .fw-ctc-sub{margin:0;max-width:560px;font-size:15px;line-height:1.6;color:var(--g6);text-wrap:pretty} .fw-ctc-sub b{color:var(--ink)} .fw-ctc-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:44px;padding:0 20px;border-radius:999px;background:var(--pk-d);color:var(--wh);font-size:14.5px;font-weight:600;box-shadow:var(--pk-glow);transition:background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease)} .fw-ctc-btn:hover{background:var(--pk-dd);color:var(--wh);transform:translateY(-2px);box-shadow:var(--pk-glow-lg)} .fw-ctc-btn .bi{transition:transform .25s var(--ease)} .fw-ctc-btn:hover .bi{transform:translateX(4px)} .fw-ctc-link{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--bl-d);transition:color .2s var(--ease)} .fw-ctc-link:hover{color:var(--pk-dd)} .fw-ctc-chip{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 15px;border-radius:999px;background:var(--bl-l);color:var(--bl-ink);font-size:14px;font-weight:600;white-space:nowrap;transition:background .2s var(--ease), color .2s var(--ease), transform .25s var(--ease)} .fw-ctc-chip:hover{background:var(--bl-d);color:var(--wh);transform:translateY(-2px)} @keyframes fw-ctc-float{50%{transform:translateY(-5px)}} @keyframes fw-ctc-in{from{opacity:0;transform:translateY(8px)}} /* ══════════════════════════════════════════════════════════════ 01 · WHO ARE YOU? ══════════════════════════════════════════════════════════════ */ .fw-ctc .fw-ctc-mast{position:relative;padding-bottom:clamp(22px, 3.6vh, 40px)} .fw-ctc-title{display:grid;grid-template-columns:minmax(0, 1fr) auto;align-items:end;gap:14px 40px} .fw-ctc .fw-ctc-h1{margin:0;font-size:clamp(34px, 5.8vh, 56px);letter-spacing:-.03em;background:linear-gradient(100deg, var(--dk-d) 30%, var(--bl-d) 70%, var(--pk-d));-webkit-background-clip:text;background-clip:text;color:transparent} .fw-ctc-lead{margin:8px 0 0;max-width:680px;font-size:clamp(15.5px, 2.1vh, 18px);line-height:1.55;color:var(--g6);text-wrap:pretty} .fw-ctc-lead b{color:var(--pk-dd)} .fw-ctc-title__side{display:grid;justify-items:end;gap:12px} .fw-ctc-title__art{display:flex} .fw-ctc-title__art img{width:clamp(52px, 7vh, 64px);aspect-ratio:1;object-fit:contain;padding:6px;border-radius:50%;background:var(--wh);box-shadow:0 8px 22px var(--bl-ring), 0 0 0 3px var(--wh);animation:fw-ctc-float 6s ease-in-out infinite} .fw-ctc-title__art img + img{margin-left:-12px} .fw-ctc-title__art img:nth-child(2){animation-delay:-2s} .fw-ctc-title__art img:nth-child(3){animation-delay:-4s} .fw-ctc-trust{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 16px;margin:0;padding:0;list-style:none} .fw-ctc-trust li{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--g7)} .fw-ctc-trust .bi{color:var(--bl-d);font-size:14px} .fw-ctc-who{position:relative;display:grid;gap:clamp(14px, 2.4vh, 22px);margin-top:clamp(20px, 3.4vh, 34px);padding-top:clamp(16px, 2.6vh, 24px)} .fw-ctc-who::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-ctc-who__q{display:flex;align-items:center;gap:14px;margin:0} .fw-ctc-who__q img{width:52px;aspect-ratio:1;object-fit:contain;animation:fw-ctc-float 6s ease-in-out infinite} .fw-ctc-who__q span{display:grid;gap:2px} .fw-ctc-who__q b{font-family:var(--ff);font-size:clamp(20px, 3vh, 26px);font-weight:700;color:var(--ink)} .fw-ctc-who__q small{font-size:14.5px;color:var(--g6)} .fw-ctc-stops{position:relative;display:grid;grid-template-columns:repeat(auto-fit, minmax(110px, 1fr));gap:clamp(10px, 1.6vw, 24px);margin:0;padding:0;list-style:none} .fw-ctc-stops::before{content:"";position:absolute;left:6%;right:6%;top:38px;height:3px;border-radius:3px;background:linear-gradient(90deg, var(--bl-l2), var(--pk-l2), var(--mt-l2))} .fw-ctc-stop{position:relative;display:grid;justify-items:center;gap:6px;width:100%;padding:0 4px 6px;text-align:center;background:none} .fw-ctc-stop__dot{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:var(--wh);box-shadow:0 0 0 5px var(--wh), inset 0 0 0 2px var(--bl-l2), 0 14px 28px -16px var(--bl);transition:transform .35s var(--ease-pop), box-shadow .25s var(--ease)} .fw-ctc-stop__dot img{width:50px;aspect-ratio:1;object-fit:contain} .fw-ctc-stop b{margin-top:6px;font-size:15px;font-weight:700;color:var(--ink);transition:color .2s var(--ease)} .fw-ctc-stop:hover .fw-ctc-stop__dot{transform:translateY(-4px);box-shadow:0 0 0 5px var(--wh), inset 0 0 0 2px var(--bl), 0 18px 30px -16px var(--bl)} .fw-ctc-stop[aria-pressed="true"] .fw-ctc-stop__dot{transform:scale(1.08);box-shadow:0 0 0 5px var(--wh), inset 0 0 0 3px var(--pk-d), 0 18px 34px -14px var(--pk)} .fw-ctc-stop[aria-pressed="true"] b{color:var(--pk-dd)} /* the chosen person's way in */ .fw-ctc-panels{position:relative;padding-top:16px} .fw-ctc-panels::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-ctc-panel{display:grid;gap:14px;animation:fw-ctc-in .4s var(--ease) both} .fw-ctc-panel + .fw-ctc-panel{margin-top:22px} .fw-js .fw-ctc-panel:not(.is-on){display:none} .fw-js .fw-ctc-panel + .fw-ctc-panel{margin-top:0} .fw-ctc-panel__h{margin:0;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--g5)} .fw-ctc-routes{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:var(--gap);margin:0;padding:0;list-style:none} .fw-ctc-routes li{position:relative;display:grid;grid-template-columns:60px minmax(0, 1fr);gap:16px;align-items:start} .fw-ctc-routes li + li::before{content:"";position:absolute;left:calc(var(--gap) / -2);top:0;bottom:0;width:1px;background:var(--fade-v)} .fw-ctc-routes img{width:60px;aspect-ratio:1;object-fit:contain} .fw-ctc-routes li > div{display:grid;gap:8px;justify-items:start} .fw-ctc-routes p{margin:0;font-size:14.5px;line-height:1.55;color:var(--g6)} .fw-ctc-routes li.is-main .fw-ctc-h3{color:var(--pk-dd)} .fw-ctc-desks{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:0 clamp(18px, 2.6vw, 40px);margin:0;padding:0;list-style:none} .fw-ctc-desks > .fw-ctc-desk:last-child:nth-child(odd){grid-column:1 / -1} .fw-ctc-desk{position:relative;display:grid;gap:10px;padding:16px 0} .fw-ctc-desk::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-ctc-desk__txt{display:grid;gap:4px} .fw-ctc-desk__txt .fw-ctc-h3{font-size:18px} .fw-ctc-desk__txt p{margin:0;font-size:14.5px;line-height:1.55;color:var(--g6)} .fw-ctc-desk__meta{display:flex;flex-wrap:wrap;gap:4px 18px} .fw-ctc-desk__meta span{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--g7)} .fw-ctc-desk__meta .bi{color:var(--bl-d)} .fw-ctc-desk__go{display:flex;flex-wrap:wrap;gap:8px} /* ══════════════════════════════════════════════════════════════ 02 · WHERE WE ARE ══════════════════════════════════════════════════════════════ */ .fw-ctc-where{background:linear-gradient(180deg, var(--bl-wash), var(--wh))} .fw-ctc-where__grid{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:var(--gap);align-items:center} .fw-ctc-pic{margin:0} .fw-ctc-pic img{display:block;width:100%;aspect-ratio:3/2;max-height:46vh;object-fit:cover;border-radius:22px} .fw-ctc-where__txt{display:grid;gap:12px;justify-items:start} .fw-ctc-office{position:relative;display:grid;grid-template-columns:56px minmax(0, 1fr);gap:16px;align-items:start;width:100%;margin-top:8px;padding-top:16px} .fw-ctc-office::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-ctc-office img{width:56px;aspect-ratio:1;object-fit:contain} .fw-ctc-office > div{display:grid;gap:6px;justify-items:start} .fw-ctc-office b{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--g5)} .fw-ctc-office address{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink)} /* ══════════════════════════════════════════════════════════════ 03 · IF SOMETHING WENT WRONG, AND THE CLOSE ══════════════════════════════════════════════════════════════ */ .fw-ctc-last{background:linear-gradient(180deg, color-mix(in srgb, var(--pk) 4%, var(--wh)), var(--wh))} .fw-ctc-last__grid{display:grid;grid-template-columns:minmax(0, 1.3fr) minmax(0, .7fr);gap:var(--gap);align-items:stretch} .fw-ctc-griev{display:grid;grid-template-columns:76px minmax(0, 1fr);gap:20px;align-items:start} .fw-ctc-griev > img{width:76px;aspect-ratio:1;object-fit:contain;animation:fw-ctc-float 6s ease-in-out infinite} .fw-ctc-griev > div{display:grid;gap:10px} .fw-ctc-officer{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;margin:4px 0 0;font-size:14.5px;color:var(--g7)} .fw-ctc-officer b{font-family:var(--ff);font-size:17px;color:var(--ink)} .fw-ctc-officer a,.fw-ctc-officer span{display:inline-flex;align-items:center;gap:7px} .fw-ctc-officer a{font-weight:600;color:var(--bl-ink)} .fw-ctc-officer a:hover{color:var(--pk-dd)} .fw-ctc-officer .bi{color:var(--bl-d)} .fw-ctc-close{position:relative;display:grid;gap:8px;justify-items:start;align-content:center;padding-left:calc(var(--gap) / 2)} .fw-ctc-close::before{content:"";position:absolute;left:calc(var(--gap) / -2);top:0;bottom:0;width:1px;background:var(--fade-v)} .fw-ctc-close img{width:60px;aspect-ratio:1;object-fit:contain;animation:fw-ctc-float 6s ease-in-out infinite;animation-delay:-3s} .fw-ctc-close .fw-ctc-h3{font-size:clamp(20px, 2.9vh, 24px)} .fw-ctc-close p{margin:0 0 4px;font-size:15px;line-height:1.6;color:var(--g6)} /* ══════════════════════════════════════════════════════════════ 04 · RESPONSIVE ══════════════════════════════════════════════════════════════ */ @media (max-width:1024px){ .fw-ctc-title,.fw-ctc-where__grid,.fw-ctc-last__grid{grid-template-columns:minmax(0, 1fr)} .fw-ctc-title__side{justify-items:start} .fw-ctc-trust{justify-content:flex-start} .fw-ctc-routes{grid-template-columns:minmax(0, 1fr);gap:22px} .fw-ctc-routes li + li::before{left:0;right:0;top:-11px;bottom:auto;width:auto;height:1px;background:var(--fade)} .fw-ctc-close{padding-left:0;padding-top:22px} .fw-ctc-close::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px;background:var(--fade)} } @media (max-width:640px){ .fw-ctc-page{--pad:14px} .fw-ctc .fw-ctc-h1{font-size:clamp(30px, 8.6vw, 40px)} .fw-ctc-title__art{display:none} .fw-ctc-h2{font-size:clamp(22px, 6.2vw, 28px)} /* The stops become a swipe row on a phone. */ .fw-ctc-stops{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:96px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--pad) * -1);padding:4px var(--pad) 6px;scrollbar-width:none} .fw-ctc-stops::-webkit-scrollbar{display:none} .fw-ctc-stops li{scroll-snap-align:start} .fw-ctc-stops::before{display:none} .fw-ctc-stop__dot{width:68px;height:68px} .fw-ctc-stop__dot img{width:44px} .fw-ctc-stop b{font-size:13px} .fw-ctc-desks{grid-template-columns:minmax(0, 1fr)} .fw-ctc-desks > .fw-ctc-desk:last-child:nth-child(odd){grid-column:auto} .fw-ctc-griev{grid-template-columns:minmax(0, 1fr)} .fw-ctc-griev > img{width:60px} } @media (prefers-reduced-motion:reduce){ .fw-ctc-title__art img,.fw-ctc-who__q img,.fw-ctc-griev > img,.fw-ctc-close img,.fw-ctc-panel{animation:none} }